@postxl/ui-components 1.3.10 → 1.4.0

package/dist/index.js

@@ -2,6 +2,8 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, Cross1Icon, Cross2Icon, DotFilledIcon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DragHandleDots2Icon, EnterFullScreenIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import * as React$52 from "react";
+import * as React$51 from "react";
 import * as React$50 from "react";
 import * as React$49 from "react";
 import * as React$48 from "react";
@@ -78,6 +80,10 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { format } from "date-fns";
 import { Drawer as Drawer$1 } from "vaul";
 import * as LabelPrimitive from "@radix-ui/react-label";
+import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, MeasuringStrategy, MouseSensor, TouchSensor, closestCenter, closestCorners, defaultDropAnimationSideEffects, getFirstCollision, pointerWithin, rectIntersection, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import * as ReactDOM from "react-dom";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
@@ -112,13 +118,13 @@ function testId(baseId, suffix) {
 //#endregion
 //#region src/accordion/accordion.tsx
 const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+const AccordionItem = React$52.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
 	ref,
 	className: cn("border-b", className),
 	...props
 }));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React$50.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+const AccordionTrigger = React$52.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
 		ref,
@@ -128,7 +134,7 @@ const AccordionTrigger = React$50.forwardRef(({ className, children,...props },
 	})
 }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React$50.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+const AccordionContent = React$52.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 	ref,
 	className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
 	...props,
@@ -148,21 +154,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Alert = React$49.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Alert = React$51.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	role: "alert",
 	className: cn(alertVariants({ variant }), className),
 	...props
 }));
 Alert.displayName = "Alert";
-const AlertTitle = React$49.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
+const AlertTitle = React$51.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
 	ref,
 	className: cn("mb-1 font-medium leading-none tracking-tight", className),
 	...props,
 	children
 }));
 AlertTitle.displayName = "AlertTitle";
-const AlertDescription = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const AlertDescription = React$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("text-sm [&_p]:leading-relaxed", className),
 	...props
@@ -222,13 +228,13 @@ function Button({ className, variant, size, asChild = false, __e2e_test_id__,...
 const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
-const AlertDialogOverlay = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
+const AlertDialogOverlay = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
 	className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
 	...props,
 	ref
 }));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
+const AlertDialogContent = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
 	ref,
 	className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className),
 	...props
@@ -244,25 +250,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
 	...props
 });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-const AlertDialogTitle = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
+const AlertDialogTitle = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
 	ref,
 	className: cn("text-lg font-semibold", className),
 	...props
 }));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-const AlertDialogDescription = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
+const AlertDialogDescription = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-const AlertDialogAction = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
+const AlertDialogAction = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
 	ref,
 	className: cn(buttonVariants(), className),
 	...props
 }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
+const AlertDialogCancel = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
 	ref,
 	className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
 	...props
@@ -271,19 +277,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 //#endregion
 //#region src/avatar/avatar.tsx
-const Avatar = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+const Avatar = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
 	ref,
 	className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
 	...props
 }));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+const AvatarImage = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
 	ref,
 	className: cn("aspect-square h-full w-full", className),
 	...props
 }));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+const AvatarFallback = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
 	ref,
 	className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
 	...props
@@ -329,25 +335,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
 
 //#endregion
 //#region src/breadcrumb/breadcrumb.tsx
-const Breadcrumb = React$46.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+const Breadcrumb = React$48.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
 	ref,
 	"aria-label": "breadcrumb",
 	...props
 }));
 Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
+const BreadcrumbList = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
 	ref,
 	className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
 	...props
 }));
 BreadcrumbList.displayName = "BreadcrumbList";
-const BreadcrumbItem = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
+const BreadcrumbItem = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
 	ref,
 	className: cn("inline-flex items-center gap-1.5", className),
 	...props
 }));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-const BreadcrumbLink = React$46.forwardRef(({ asChild, className,...props }, ref) => {
+const BreadcrumbLink = React$48.forwardRef(({ asChild, className,...props }, ref) => {
 	const Comp = asChild ? Slot : "a";
 	return /* @__PURE__ */ jsx(Comp, {
 		ref,
@@ -356,7 +362,7 @@ const BreadcrumbLink = React$46.forwardRef(({ asChild, className,...props }, ref
 	});
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
+const BreadcrumbPage = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
 	ref,
 	"aria-disabled": "true",
 	"aria-current": "page",
@@ -386,8 +392,8 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 //#region src/calendar/calendar.tsx
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components, __e2e_test_id__,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const [rangeSelectionStep, setRangeSelectionStep] = React$45.useState("from");
-	const handleDayClick = React$45.useCallback((day, modifiers, e) => {
+	const [rangeSelectionStep, setRangeSelectionStep] = React$47.useState("from");
+	const handleDayClick = React$47.useCallback((day, modifiers, e) => {
 		if (props.mode === "range") {
 			const range = props.selected;
 			if (rangeSelectionStep === "from") {
@@ -417,8 +423,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 		fromMonth = props.startMonth ?? new Date(nowYear - 100, 0);
 		toMonth = props.endMonth ?? new Date(nowYear + 100, 11);
 	}
-	const [currentMonth, setCurrentMonth] = React$45.useState(props.defaultMonth ?? props.month ?? new Date());
-	React$45.useEffect(() => {
+	const [currentMonth, setCurrentMonth] = React$47.useState(props.defaultMonth ?? props.month ?? new Date());
+	React$47.useEffect(() => {
 		if (props.month) setCurrentMonth(props.month);
 	}, [props.month]);
 	const addMonths = (date, months) => {
@@ -562,8 +568,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 }
 function CalendarDayButton({ className, day, modifiers,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const ref = React$45.useRef(null);
-	React$45.useEffect(() => {
+	const ref = React$47.useRef(null);
+	React$47.useEffect(() => {
 		if (modifiers.focused) ref.current?.focus();
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
@@ -582,38 +588,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
 
 //#endregion
 //#region src/card/card.tsx
-const Card = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Card = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
 	...props
 }));
 Card.displayName = "Card";
-const CardHeader = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardHeader = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex flex-col space-y-1.5 p-6", className),
 	...props
 }));
 CardHeader.displayName = "CardHeader";
-const CardTitle = React$44.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
+const CardTitle = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
 	ref,
 	className: cn("font-semibold leading-none tracking-tight", className),
 	...props,
 	children
 }));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
+const CardDescription = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 CardDescription.displayName = "CardDescription";
-const CardContent = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardContent = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("p-6 pt-0", className),
 	...props
 }));
 CardContent.displayName = "CardContent";
-const CardFooter = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardFooter = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex items-center p-6 pt-0", className),
 	...props
@@ -624,7 +630,7 @@ CardFooter.displayName = "CardFooter";
 //#region src/card-hover/card-hover.tsx
 const HoverCard = HoverCardPrimitive.Root;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
-const HoverCardContent = React$43.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+const HoverCardContent = React$45.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
 	ref,
 	align,
 	sideOffset,
@@ -635,31 +641,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 //#endregion
 //#region src/carousel/carousel.tsx
-const CarouselContext = React$42.createContext(null);
+const CarouselContext = React$44.createContext(null);
 function useCarousel() {
-	const context = React$42.useContext(CarouselContext);
+	const context = React$44.useContext(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
 	return context;
 }
-const Carousel = React$42.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
+const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
 	const [carouselRef, api] = useEmblaCarousel({
 		...opts,
 		axis: orientation === "horizontal" ? "x" : "y"
 	}, plugins);
-	const [canScrollPrev, setCanScrollPrev] = React$42.useState(false);
-	const [canScrollNext, setCanScrollNext] = React$42.useState(false);
-	const onSelect = React$42.useCallback(() => {
+	const [canScrollPrev, setCanScrollPrev] = React$44.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$44.useState(false);
+	const onSelect = React$44.useCallback(() => {
 		if (!api) return;
 		setCanScrollPrev(api.canScrollPrev());
 		setCanScrollNext(api.canScrollNext());
 	}, [api]);
-	const scrollPrev = React$42.useCallback(() => {
+	const scrollPrev = React$44.useCallback(() => {
 		api?.scrollPrev();
 	}, [api]);
-	const scrollNext = React$42.useCallback(() => {
+	const scrollNext = React$44.useCallback(() => {
 		api?.scrollNext();
 	}, [api]);
-	const handleKeyDown = React$42.useCallback((event) => {
+	const handleKeyDown = React$44.useCallback((event) => {
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			scrollPrev();
@@ -668,11 +674,11 @@ const Carousel = React$42.forwardRef(({ orientation = "horizontal", opts, setApi
 			scrollNext();
 		}
 	}, [scrollPrev, scrollNext]);
-	React$42.useEffect(() => {
+	React$44.useEffect(() => {
 		if (!api || !setApi) return;
 		setApi(api);
 	}, [api, setApi]);
-	React$42.useEffect(() => {
+	React$44.useEffect(() => {
 		if (!api) return;
 		onSelect();
 		api.on("reInit", onSelect);
@@ -713,7 +719,7 @@ const Carousel = React$42.forwardRef(({ orientation = "horizontal", opts, setApi
 	});
 });
 Carousel.displayName = "Carousel";
-const CarouselContent = React$42.forwardRef(({ className,...props }, ref) => {
+const CarouselContent = React$44.forwardRef(({ className,...props }, ref) => {
 	const { carouselRef, orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref: carouselRef,
@@ -726,7 +732,7 @@ const CarouselContent = React$42.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselContent.displayName = "CarouselContent";
-const CarouselItem = React$42.forwardRef(({ className,...props }, ref) => {
+const CarouselItem = React$44.forwardRef(({ className,...props }, ref) => {
 	const { orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -736,7 +742,7 @@ const CarouselItem = React$42.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React$42.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselPrevious = React$44.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -753,7 +759,7 @@ const CarouselPrevious = React$42.forwardRef(({ className, variant = "outline",
 	});
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React$42.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselNext = React$44.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -1203,7 +1209,7 @@ function DialogDescription({ className,...props }) {
 
 //#endregion
 //#region src/command-palette/command-palette.tsx
-const CommandPalette = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+const CommandPalette = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
 	ref,
 	className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
 	...props
@@ -1221,7 +1227,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
 		})
 	});
 };
-const CommandPaletteInput = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const CommandPaletteInput = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	className: "flex items-center border-b px-3",
 	"data-cmdk-input-wrapper": "",
 	children: [/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
@@ -1231,31 +1237,31 @@ const CommandPaletteInput = React$41.forwardRef(({ className,...props }, ref) =>
 	})]
 }));
 CommandPaletteInput.displayName = Command$1.Input.displayName;
-const CommandPaletteList = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+const CommandPaletteList = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
 	ref,
 	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
 	...props
 }));
 CommandPaletteList.displayName = Command$1.List.displayName;
-const CommandPaletteEmpty = React$41.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+const CommandPaletteEmpty = React$43.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
 	ref,
 	className: "py-6 text-center text-sm",
 	...props
 }));
 CommandPaletteEmpty.displayName = Command$1.Empty.displayName;
-const CommandPaletteGroup = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+const CommandPaletteGroup = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
 	ref,
 	className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
 	...props
 }));
 CommandPaletteGroup.displayName = Command$1.Group.displayName;
-const CommandPaletteSeparator = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+const CommandPaletteSeparator = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
 	ref,
 	className: cn("-mx-1 h-px bg-border", className),
 	...props
 }));
 CommandPaletteSeparator.displayName = Command$1.Separator.displayName;
-const CommandPaletteItem = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+const CommandPaletteItem = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", className),
 	...props
@@ -1331,8 +1337,8 @@ const frameworks = [
 	}
 ];
 function ComboboxDemo() {
-	const [open, setOpen] = React$40.useState(false);
-	const [value, setValue] = React$40.useState("");
+	const [open, setOpen] = React$42.useState(false);
+	const [value, setValue] = React$42.useState("");
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -1572,32 +1578,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-const ContextMenuSubTrigger = React$39.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
+const ContextMenuSubTrigger = React$41.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
 	ref,
 	className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
 }));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-const ContextMenuSubContent = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
+const ContextMenuSubContent = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
 	ref,
 	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
 	...props
 }));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-const ContextMenuContent = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
+const ContextMenuContent = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
 	ref,
 	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
 	...props
 }) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-const ContextMenuItem = React$39.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
+const ContextMenuItem = React$41.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
 	...props
 }));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-const ContextMenuCheckboxItem = React$39.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
+const ContextMenuCheckboxItem = React$41.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	checked,
@@ -1608,7 +1614,7 @@ const ContextMenuCheckboxItem = React$39.forwardRef(({ className, children, chec
 	}), children]
 }));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-const ContextMenuRadioItem = React$39.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
+const ContextMenuRadioItem = React$41.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	...props,
@@ -1618,13 +1624,13 @@ const ContextMenuRadioItem = React$39.forwardRef(({ className, children,...props
 	}), children]
 }));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-const ContextMenuLabel = React$39.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
+const ContextMenuLabel = React$41.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
 	ref,
 	className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
 	...props
 }));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-const ContextMenuSeparator = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
+const ContextMenuSeparator = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
 	ref,
 	className: cn("-mx-1 my-1 h-px bg-border", className),
 	...props
@@ -1769,7 +1775,7 @@ function DropdownMenuSubContent({ className,...props }) {
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React$38.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+const TooltipContent = React$40.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
 	ref,
 	sideOffset,
 	className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
@@ -2254,7 +2260,7 @@ const inputVariants = cva("file:text-foreground placeholder:text-muted-foregroun
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Input = React$37.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
+const Input = React$39.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
 	const input = /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
@@ -2336,10 +2342,10 @@ const numberInputWrapperVariants = cva("border-input bg-background grid grid-col
 	} },
 	defaultVariants: { variant: "default" }
 });
-const NumberInput = React$36.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
-	const [isFocused, setIsFocused] = React$36.useState(false);
-	const [inputString, setInputString] = React$36.useState("");
-	const intlFormatter = React$36.useMemo(() => {
+const NumberInput = React$38.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
+	const [isFocused, setIsFocused] = React$38.useState(false);
+	const [inputString, setInputString] = React$38.useState("");
+	const intlFormatter = React$38.useMemo(() => {
 		if (!format$1 || typeof format$1 === "function") return void 0;
 		return new Intl.NumberFormat(format$1.locale, format$1.options);
 	}, [format$1]);
@@ -2386,7 +2392,7 @@ const NumberInput = React$36.forwardRef(({ className, wrapperClassName, prefix,
 		setInputString("");
 		props.onBlur?.(e);
 	};
-	const displayValue = React$36.useMemo(() => {
+	const displayValue = React$38.useMemo(() => {
 		if (isFocused && format$1) {
 			if (inputString !== "") return inputString;
 			if (controlledValue !== void 0) {
@@ -2463,20 +2469,20 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 	const rowOriginal = cell?.row?.original ?? {};
 	const colCellMeta = cell?.column?.columnDef?.meta;
 	const align = colCellMeta?.align ?? "left";
-	const editableResolver = React$35.useMemo(() => {
+	const editableResolver = React$37.useMemo(() => {
 		const v = colCellMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colCellMeta?.editable]);
 	const isEditable = editableResolver(rowOriginal);
-	const classNameResolver = React$35.useMemo(() => {
+	const classNameResolver = React$37.useMemo(() => {
 		const v = colCellMeta?.className;
 		return typeof v === "function" ? v : () => v;
 	}, [colCellMeta?.className]);
 	const colCellClassName = classNameResolver(rowOriginal);
 	const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
 	const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
-	const onClick = React$35.useCallback((event) => {
+	const onClick = React$37.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			onClickProp?.(event);
@@ -2489,7 +2495,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		onClickProp
 	]);
-	const onContextMenu = React$35.useCallback((event) => {
+	const onContextMenu = React$37.useCallback((event) => {
 		if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2497,7 +2503,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseDown = React$35.useCallback((event) => {
+	const onMouseDown = React$37.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2505,7 +2511,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseEnter = React$35.useCallback((event) => {
+	const onMouseEnter = React$37.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2513,10 +2519,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseUp = React$35.useCallback(() => {
+	const onMouseUp = React$37.useCallback(() => {
 		if (!isEditing) meta?.onCellMouseUp?.();
 	}, [meta, isEditing]);
-	const onDoubleClick = React$35.useCallback((event) => {
+	const onDoubleClick = React$37.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
@@ -2528,7 +2534,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		isEditable
 	]);
-	const onKeyDown = React$35.useCallback((event) => {
+	const onKeyDown = React$37.useCallback((event) => {
 		onKeyDownProp?.(event);
 		if (event.defaultPrevented) return;
 		if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown" || event.key === "Enter" || event.key === "Tab") return;
@@ -2742,22 +2748,22 @@ function HierarchyItem({ option, selectedValue, expandedIds, onToggleExpand, onS
 }
 function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$34.useState(initialValue);
-	const [open, setOpen] = React$34.useState(false);
-	const [searchValue, setSearchValue] = React$34.useState("");
-	const containerRef = React$34.useRef(null);
-	const inputRef = React$34.useRef(null);
+	const [value, setValue] = React$36.useState(initialValue);
+	const [open, setOpen] = React$36.useState(false);
+	const [searchValue, setSearchValue] = React$36.useState("");
+	const containerRef = React$36.useRef(null);
+	const inputRef = React$36.useRef(null);
 	const meta = table.options.meta;
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const sideOffset = -(containerRef.current?.clientHeight ?? 0);
 	const options = cellOpts?.variant === "hierarchy" ? cellOpts.options : [];
-	const [expandedIds, setExpandedIds] = React$34.useState(() => getInitialExpandedIds(options, initialValue));
-	const labelMap = React$34.useMemo(() => buildLabelMap(options), [options]);
-	const displayLabel = React$34.useMemo(() => {
+	const [expandedIds, setExpandedIds] = React$36.useState(() => getInitialExpandedIds(options, initialValue));
+	const labelMap = React$36.useMemo(() => buildLabelMap(options), [options]);
+	const displayLabel = React$36.useMemo(() => {
 		if (!value) return "";
 		return labelMap.get(value) ?? value;
 	}, [value, labelMap]);
-	const toggleExpand = React$34.useCallback((id) => {
+	const toggleExpand = React$36.useCallback((id) => {
 		setExpandedIds((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
@@ -2765,7 +2771,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 			return next;
 		});
 	}, []);
-	const onOptionSelect = React$34.useCallback((option) => {
+	const onOptionSelect = React$36.useCallback((option) => {
 		const newValue = option.id;
 		setValue(newValue);
 		meta?.onDataUpdate?.({
@@ -2780,18 +2786,18 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$34.useCallback((isOpen) => {
+	const onOpenChange = React$36.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) {
 			setSearchValue("");
 			meta?.onCellEditingStop?.();
 		}
 	}, [meta]);
-	const onOpenAutoFocus = React$34.useCallback((event) => {
+	const onOpenAutoFocus = React$36.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$34.useCallback((event) => {
+	const onWrapperKeyDown = React$36.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -2811,10 +2817,10 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 		initialValue,
 		meta
 	]);
-	React$34.useEffect(() => {
+	React$36.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$34.useEffect(() => {
+	React$36.useEffect(() => {
 		if (value) {
 			const ancestors = getAncestorIds(options, value);
 			if (ancestors && ancestors.length > 0) setExpandedIds((prev) => {
@@ -2824,7 +2830,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 			});
 		}
 	}, [value, options]);
-	React$34.useEffect(() => {
+	React$36.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -2922,9 +2928,9 @@ function EditorFooter({ count, onApply, onCancel }) {
 	});
 }
 function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$33.useState("");
-	const inputRef = React$33.useRef(null);
-	const handleApply = React$33.useCallback(() => {
+	const [value, setValue] = React$35.useState("");
+	const inputRef = React$35.useRef(null);
+	const handleApply = React$35.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -2936,14 +2942,14 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
 		value,
 		onApply
 	]);
-	const onKeyDown = React$33.useCallback((e) => {
+	const onKeyDown = React$35.useCallback((e) => {
 		stopGridKeys(e);
 		if (e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$33.useEffect(() => {
+	React$35.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -2965,9 +2971,9 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
 	});
 }
 function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$33.useState("");
-	const textareaRef = React$33.useRef(null);
-	const handleApply = React$33.useCallback(() => {
+	const [value, setValue] = React$35.useState("");
+	const textareaRef = React$35.useRef(null);
+	const handleApply = React$35.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -2979,14 +2985,14 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
 		value,
 		onApply
 	]);
-	const onKeyDown = React$33.useCallback((e) => {
+	const onKeyDown = React$35.useCallback((e) => {
 		stopGridKeys(e);
 		if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$33.useEffect(() => {
+	React$35.useEffect(() => {
 		textareaRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3009,12 +3015,12 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
 	});
 }
 function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$33.useState(void 0);
-	const inputRef = React$33.useRef(null);
+	const [value, setValue] = React$35.useState(void 0);
+	const inputRef = React$35.useRef(null);
 	const { min, max, step, prefix, suffix } = cell.variant === "number" ? cell : {};
 	const stringPrefix = typeof prefix === "string" ? prefix : void 0;
 	const stringSuffix = typeof suffix === "string" ? suffix : void 0;
-	const handleApply = React$33.useCallback(() => {
+	const handleApply = React$35.useCallback(() => {
 		const numValue = value ?? null;
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
@@ -3027,14 +3033,14 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
 		value,
 		onApply
 	]);
-	const onKeyDown = React$33.useCallback((e) => {
+	const onKeyDown = React$35.useCallback((e) => {
 		stopGridKeys(e);
 		if (e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$33.useEffect(() => {
+	React$35.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3063,8 +3069,8 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
 }
 function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
 	const { options: arrayOptions, optionsMap, optionsRenderer } = cell.variant === "select" ? cell : {};
-	const inputRef = React$33.useRef(null);
-	const options = React$33.useMemo(() => {
+	const inputRef = React$35.useRef(null);
+	const options = React$35.useMemo(() => {
 		if (arrayOptions) return arrayOptions.map((opt) => ({
 			value: opt.value,
 			data: opt.label
@@ -3075,7 +3081,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
 		}));
 		return [];
 	}, [arrayOptions, optionsMap]);
-	const handleSelect = React$33.useCallback((newValue) => {
+	const handleSelect = React$35.useCallback((newValue) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3086,7 +3092,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
 		columnId,
 		onApply
 	]);
-	React$33.useEffect(() => {
+	React$35.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3110,10 +3116,10 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
 }
 function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
 	const { options: arrayOptions, optionsMap } = cell.variant === "multi-select" ? cell : {};
-	const [selectedValues, setSelectedValues] = React$33.useState([]);
-	const [searchValue, setSearchValue] = React$33.useState("");
-	const inputRef = React$33.useRef(null);
-	const options = React$33.useMemo(() => {
+	const [selectedValues, setSelectedValues] = React$35.useState([]);
+	const [searchValue, setSearchValue] = React$35.useState("");
+	const inputRef = React$35.useRef(null);
+	const options = React$35.useMemo(() => {
 		if (arrayOptions) return arrayOptions;
 		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
 			value: id,
@@ -3121,12 +3127,12 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 		}));
 		return [];
 	}, [arrayOptions, optionsMap]);
-	const toggleValue = React$33.useCallback((value) => {
+	const toggleValue = React$35.useCallback((value) => {
 		setSelectedValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
 		setSearchValue("");
 		queueMicrotask(() => inputRef.current?.focus());
 	}, []);
-	const handleApply = React$33.useCallback(() => {
+	const handleApply = React$35.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3138,7 +3144,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 		selectedValues,
 		onApply
 	]);
-	React$33.useEffect(() => {
+	React$35.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3204,7 +3210,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 	});
 }
 function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const setAll = React$33.useCallback((val) => {
+	const setAll = React$35.useCallback((val) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3241,10 +3247,10 @@ function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
 }
 function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
 	const options = cell.variant === "hierarchy" ? cell.options : [];
-	const inputRef = React$33.useRef(null);
-	const [searchValue, setSearchValue] = React$33.useState("");
-	const [expandedIds, setExpandedIds] = React$33.useState(() => getInitialExpandedIds(options, null));
-	const toggleExpand = React$33.useCallback((id) => {
+	const inputRef = React$35.useRef(null);
+	const [searchValue, setSearchValue] = React$35.useState("");
+	const [expandedIds, setExpandedIds] = React$35.useState(() => getInitialExpandedIds(options, null));
+	const toggleExpand = React$35.useCallback((id) => {
 		setExpandedIds((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
@@ -3252,7 +3258,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 			return next;
 		});
 	}, []);
-	const handleSelect = React$33.useCallback((option) => {
+	const handleSelect = React$35.useCallback((option) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3263,7 +3269,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 		columnId,
 		onApply
 	]);
-	React$33.useEffect(() => {
+	React$35.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3294,7 +3300,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 	});
 }
 function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const onDateSelect = React$33.useCallback((date) => {
+	const onDateSelect = React$35.useCallback((date) => {
 		if (!date) return;
 		const year = date.getFullYear();
 		const month = String(date.getMonth() + 1).padStart(2, "0");
@@ -3326,28 +3332,28 @@ function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
 	});
 }
 function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }) {
-	const selectedRowIndices = React$33.useMemo(() => {
+	const selectedRowIndices = React$35.useMemo(() => {
 		if (!open) return [];
 		const allRows = table.getRowModel().rows;
 		const indices = [];
 		for (let i = 0; i < allRows.length; i++) if (allRows[i].getIsSelected()) indices.push(i);
 		return indices;
 	}, [open, table]);
-	React$33.useEffect(() => {
+	React$35.useEffect(() => {
 		if (open && selectedRowIndices.length === 0) onOpenChange(false);
 	}, [
 		open,
 		selectedRowIndices.length,
 		onOpenChange
 	]);
-	const onApply = React$33.useCallback((updates) => {
+	const onApply = React$35.useCallback((updates) => {
 		table.options.meta?.onDataUpdate?.(updates);
 		onOpenChange(false);
 	}, [table, onOpenChange]);
-	const onCancel = React$33.useCallback(() => {
+	const onCancel = React$35.useCallback(() => {
 		onOpenChange(false);
 	}, [onOpenChange]);
-	const onOpenAutoFocus = React$33.useCallback((e) => {
+	const onOpenAutoFocus = React$35.useCallback((e) => {
 		e.preventDefault();
 	}, []);
 	const editorProps = {
@@ -3357,7 +3363,7 @@ function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }
 		onApply,
 		onCancel
 	};
-	const editor = React$33.useMemo(() => {
+	const editor = React$35.useMemo(() => {
 		switch (cell.variant) {
 			case "short-text": return /* @__PURE__ */ jsx(BulkEditShortText, { ...editorProps });
 			case "long-text": return /* @__PURE__ */ jsx(BulkEditLongText, { ...editorProps });
@@ -3435,8 +3441,8 @@ function getColumnVariant(variant) {
 	}
 }
 function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
-	const [open, setOpen] = React$32.useState(false);
-	const [bulkEditOpen, setBulkEditOpen] = React$32.useState(false);
+	const [open, setOpen] = React$34.useState(false);
+	const [bulkEditOpen, setBulkEditOpen] = React$34.useState(false);
 	const column = header.column;
 	const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
 	const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
@@ -3445,13 +3451,13 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 	const enableBulkEdit = column.columnDef.meta?.enableBulkEdit ?? false;
 	const selectedRowCount = Object.keys(table.getState().rowSelection).length;
 	const showBulkEdit = enableBulkEdit && selectedRowCount > 1 && cellVariant != null && EditableCellVariantsSet.has(cellVariant?.variant);
-	React$32.useEffect(() => {
+	React$34.useEffect(() => {
 		if (!showBulkEdit) setBulkEditOpen(false);
 	}, [showBulkEdit]);
 	const pinnedPosition = column.getIsPinned();
 	const isPinnedLeft = pinnedPosition === "left";
 	const isPinnedRight = pinnedPosition === "right";
-	const onSortingChange = React$32.useCallback((direction) => {
+	const onSortingChange = React$34.useCallback((direction) => {
 		table.setSorting((prev) => {
 			const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
 			const newSort = {
@@ -3465,19 +3471,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 			} else return [...prev, newSort];
 		});
 	}, [column.id, table]);
-	const onSortRemove = React$32.useCallback(() => {
+	const onSortRemove = React$34.useCallback(() => {
 		table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
 	}, [column.id, table]);
-	const onLeftPin = React$32.useCallback(() => {
+	const onLeftPin = React$34.useCallback(() => {
 		column.pin("left");
 	}, [column]);
-	const onRightPin = React$32.useCallback(() => {
+	const onRightPin = React$34.useCallback(() => {
 		column.pin("right");
 	}, [column]);
-	const onUnpin = React$32.useCallback(() => {
+	const onUnpin = React$34.useCallback(() => {
 		column.pin(false);
 	}, [column]);
-	const onTriggerPointerDown = React$32.useCallback((event) => {
+	const onTriggerPointerDown = React$34.useCallback((event) => {
 		onPointerDown?.(event);
 		if (event.defaultPrevented) return;
 		if (event.button !== 0) return;
@@ -3604,7 +3610,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 		})
 	] });
 }
-const DataGridColumnResizer = React$32.memo(DataGridColumnResizerImpl, (prev, next) => {
+const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, next) => {
 	const prevColumn = prev.header.column;
 	const nextColumn = next.header.column;
 	if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) return false;
@@ -3613,7 +3619,7 @@ const DataGridColumnResizer = React$32.memo(DataGridColumnResizerImpl, (prev, ne
 });
 function DataGridColumnResizerImpl({ header, table, label }) {
 	const defaultColumnDef = table._getDefaultColumnDef();
-	const onDoubleClick = React$32.useCallback(() => {
+	const onDoubleClick = React$34.useCallback(() => {
 		header.column.resetSize();
 	}, [header.column]);
 	return /* @__PURE__ */ jsx("div", {
@@ -3722,7 +3728,7 @@ function DataGridContextMenu({ table }) {
 		onRowsDelete
 	});
 }
-const ContextMenu$1 = React$31.memo(ContextMenuImpl, (prev, next) => {
+const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
 	if (prev.contextMenu.open !== next.contextMenu.open) return false;
 	if (!next.contextMenu.open) return true;
 	if (prev.contextMenu.x !== next.contextMenu.x) return false;
@@ -3733,7 +3739,7 @@ const ContextMenu$1 = React$31.memo(ContextMenuImpl, (prev, next) => {
 	return true;
 });
 function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
-	const triggerStyle = React$31.useMemo(() => ({
+	const triggerStyle = React$33.useMemo(() => ({
 		position: "fixed",
 		left: `${contextMenu.x}px`,
 		top: `${contextMenu.y}px`,
@@ -3746,11 +3752,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		pointerEvents: "none",
 		opacity: 0
 	}), [contextMenu.x, contextMenu.y]);
-	const onCloseAutoFocus = React$31.useCallback((event) => {
+	const onCloseAutoFocus = React$33.useCallback((event) => {
 		event.preventDefault();
 		dataGridRef?.current?.focus();
 	}, [dataGridRef]);
-	const onCopy = React$31.useCallback(async () => {
+	const onCopy = React$33.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rows = table.getRowModel().rows;
 		const columnIds = [];
@@ -3789,7 +3795,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		await navigator.clipboard.writeText(tsvData);
 		toast$1.success(`${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? "s" : ""} copied`);
 	}, [table, selectionState]);
-	const canClear = React$31.useMemo(() => {
+	const canClear = React$33.useMemo(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
 		const visibleCols = table.getVisibleLeafColumns();
 		const rows = table.getRowModel().rows;
@@ -3806,7 +3812,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		}
 		return true;
 	}, [selectionState, table]);
-	const onClear = React$31.useCallback(() => {
+	const onClear = React$33.useCallback(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		if (!canClear) return;
 		const updates = [];
@@ -3825,7 +3831,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		selectionState,
 		canClear
 	]);
-	const onDelete = React$31.useCallback(async () => {
+	const onDelete = React$33.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rowIndices = new Set();
 		for (const cellKey of selectionState.selectedCells) {
@@ -3902,12 +3908,12 @@ function composeRefs(...refs) {
 * Accepts callback refs and RefObject(s)
 */
 function useComposedRefs(...refs) {
-	return React$30.useCallback(composeRefs(...refs), refs);
+	return React$32.useCallback(composeRefs(...refs), refs);
 }
 
 //#endregion
 //#region src/data-grid/data-grid-row.tsx
-const DataGridRow = React$29.memo(DataGridRowImpl, (prev, next) => {
+const DataGridRow = React$31.memo(DataGridRowImpl, (prev, next) => {
 	if (prev.row.id !== next.row.id) return false;
 	if (prev.row.original !== next.row.original) return false;
 	const prevRowIndex = prev.virtualRowIndex;
@@ -3926,11 +3932,12 @@ const DataGridRow = React$29.memo(DataGridRowImpl, (prev, next) => {
 	}
 	if (prev.selectionSize !== next.selectionSize) return false;
 	if (prev.visibleColumnIds !== next.visibleColumnIds) return false;
+	if (prev.columnPinningKey !== next.columnPinningKey) return false;
 	if (prev.isHighlighted !== next.isHighlighted) return false;
 	if (prev.columnDefsVersion !== next.columnDefsVersion) return false;
 	return true;
 });
-function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, columnDefsVersion: _columnDefsVersion, isHighlighted = false, onRowClick, ref, className,...props }) {
+function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, columnPinningKey: _columnPinningKey, columnDefsVersion: _columnDefsVersion, isHighlighted = false, onRowClick, ref, className,...props }) {
 	const rowRef = useComposedRefs(ref, (node) => {
 		if (node && typeof virtualRowIndex !== "undefined") {
 			rowVirtualizer.measureElement(node);
@@ -3938,7 +3945,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 		}
 	});
 	const isRowSelected = row.getIsSelected();
-	const handleRowClick = React$29.useCallback((event) => {
+	const handleRowClick = React$31.useCallback((event) => {
 		const target = event.target;
 		if (target.closest("input, button, [role=\"checkbox\"]")) return;
 		if (event.detail === 1) onRowClick?.(virtualRowIndex);
@@ -3988,20 +3995,20 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 * prop or avoid re-executing effects when passed as a dependency
 */
 function useCallbackRef(callback) {
-	const callbackRef = React$28.useRef(callback);
-	React$28.useEffect(() => {
+	const callbackRef = React$30.useRef(callback);
+	React$30.useEffect(() => {
 		callbackRef.current = callback;
 	});
-	return React$28.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+	return React$30.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
 //#endregion
 //#region src/hooks/use-debounced-callback.ts
 function useDebouncedCallback(callback, delay) {
 	const handleCallback = useCallbackRef(callback);
-	const debounceTimerRef = React$27.useRef(0);
-	React$27.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	const setValue = React$27.useCallback((...args) => {
+	const debounceTimerRef = React$29.useRef(0);
+	React$29.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+	const setValue = React$29.useCallback((...args) => {
 		window.clearTimeout(debounceTimerRef.current);
 		debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
 	}, [handleCallback, delay]);
@@ -4010,7 +4017,7 @@ function useDebouncedCallback(callback, delay) {
 
 //#endregion
 //#region src/data-grid/data-grid-search.tsx
-const DataGridSearch = React$26.memo(DataGridSearchImpl, (prev, next) => {
+const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
 	if (prev.searchOpen !== next.searchOpen) return false;
 	if (!next.searchOpen) return true;
 	if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) return false;
@@ -4024,13 +4031,13 @@ const DataGridSearch = React$26.memo(DataGridSearchImpl, (prev, next) => {
 	return true;
 });
 function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
-	const inputRef = React$26.useRef(null);
-	React$26.useEffect(() => {
+	const inputRef = React$28.useRef(null);
+	React$28.useEffect(() => {
 		if (searchOpen) requestAnimationFrame(() => {
 			inputRef.current?.focus();
 		});
 	}, [searchOpen]);
-	React$26.useEffect(() => {
+	React$28.useEffect(() => {
 		if (!searchOpen) return;
 		function onEscape(event) {
 			if (event.key === "Escape") {
@@ -4041,7 +4048,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 		document.addEventListener("keydown", onEscape);
 		return () => document.removeEventListener("keydown", onEscape);
 	}, [searchOpen, onSearchOpenChange]);
-	const onKeyDown = React$26.useCallback((event) => {
+	const onKeyDown = React$28.useCallback((event) => {
 		event.stopPropagation();
 		if (event.key === "Enter") {
 			event.preventDefault();
@@ -4052,20 +4059,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 	const debouncedSearch = useDebouncedCallback((query) => {
 		onSearch(query);
 	}, 150);
-	const onChange = React$26.useCallback((event) => {
+	const onChange = React$28.useCallback((event) => {
 		const value = event.target.value;
 		onSearchQueryChange(value);
 		debouncedSearch(value);
 	}, [onSearchQueryChange, debouncedSearch]);
-	const onTriggerPointerDown = React$26.useCallback((event) => {
+	const onTriggerPointerDown = React$28.useCallback((event) => {
 		const target = event.target;
 		if (!(target instanceof HTMLElement)) return;
 		if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
 		if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) event.preventDefault();
 	}, []);
-	const onPrevMatchPointerDown = React$26.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onNextMatchPointerDown = React$26.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onClose = React$26.useCallback(() => {
+	const onPrevMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onNextMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onClose = React$28.useCallback(() => {
 		onSearchOpenChange(false);
 	}, [onSearchOpenChange]);
 	if (!searchOpen) return null;
@@ -4144,15 +4151,17 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 	const onRowClick = meta?.onRowClick;
 	const columnDefsVersion = meta?.columnDefsVersion ?? 0;
 	const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
-	const prevVisibleColumnIdsRef = React$25.useRef(visibleColumnIds);
+	const pinningState = table.getState().columnPinning;
+	const columnPinningKey = `${(pinningState.left ?? []).join(",")}|${(pinningState.right ?? []).join(",")}`;
+	const prevVisibleColumnIdsRef = React$27.useRef(visibleColumnIds);
 	if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
 		rowMapRef.current.clear();
 		prevVisibleColumnIdsRef.current = visibleColumnIds;
 	}
-	const onGridContextMenu = React$25.useCallback((event) => {
+	const onGridContextMenu = React$27.useCallback((event) => {
 		event.preventDefault();
 	}, []);
-	const onAddRowKeyDown = React$25.useCallback(async (event) => {
+	const onAddRowKeyDown = React$27.useCallback(async (event) => {
 		if (!onRowAdd) return;
 		if (event.key === "Enter" || event.key === "") {
 			event.preventDefault();
@@ -4255,6 +4264,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 								editingCell,
 								selectionSize,
 								visibleColumnIds,
+								columnPinningKey,
 								columnDefsVersion,
 								isHighlighted: highlightedRowIndex === virtualItem.index,
 								onRowClick
@@ -4303,17 +4313,17 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
 	const cellValue = cell.getValue();
 	const cellValueAsBoolean = Boolean(cellValue);
-	const [value, setValue] = React$24.useState(cellValueAsBoolean);
-	const containerRef = React$24.useRef(null);
+	const [value, setValue] = React$26.useState(cellValueAsBoolean);
+	const containerRef = React$26.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
-	const editableResolver = React$24.useMemo(() => {
+	const editableResolver = React$26.useMemo(() => {
 		const v = colMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colMeta?.editable]);
 	const isEditable = editableResolver(cell.row.original);
-	const onCheckedChange = React$24.useCallback((checked) => {
+	const onCheckedChange = React$26.useCallback((checked) => {
 		setValue(checked);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -4325,7 +4335,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		rowIndex,
 		columnId
 	]);
-	const onWrapperKeyDown = React$24.useCallback((event) => {
+	const onWrapperKeyDown = React$26.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused && (event.key === "" || event.key === "Enter")) {
 			event.preventDefault();
@@ -4338,17 +4348,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	React$24.useEffect(() => {
+	React$26.useEffect(() => {
 		setValue(cellValueAsBoolean);
 	}, [cellValueAsBoolean]);
-	React$24.useEffect(() => {
+	React$26.useEffect(() => {
 		if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
 		meta?.searchOpen,
 		meta?.isScrolling
 	]);
-	const onWrapperClick = React$24.useCallback((event) => {
+	const onWrapperClick = React$26.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused) {
 			event.preventDefault();
@@ -4361,13 +4371,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	const onCheckboxClick = React$24.useCallback((event) => {
+	const onCheckboxClick = React$26.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxMouseDown = React$24.useCallback((event) => {
+	const onCheckboxMouseDown = React$26.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxDoubleClick = React$24.useCallback((event) => {
+	const onCheckboxDoubleClick = React$26.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
 	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
@@ -4422,20 +4432,20 @@ function formatDateToISOString(date) {
 }
 function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$23.useState(parseToLocalDate(initialValue));
-	const [open, setOpen] = React$23.useState(false);
-	const containerRef = React$23.useRef(null);
-	const hasStoppedRef = React$23.useRef(false);
+	const [value, setValue] = React$25.useState(parseToLocalDate(initialValue));
+	const [open, setOpen] = React$25.useState(false);
+	const containerRef = React$25.useRef(null);
+	const hasStoppedRef = React$25.useRef(false);
 	const meta = table.options.meta;
-	const prevInitialValueRef = React$23.useRef(initialValue);
+	const prevInitialValueRef = React$25.useRef(initialValue);
 	if (initialValue !== prevInitialValueRef.current) {
 		prevInitialValueRef.current = initialValue;
 		setValue(parseToLocalDate(initialValue));
 	}
-	React$23.useEffect(() => {
+	React$25.useEffect(() => {
 		if (isEditing) hasStoppedRef.current = false;
 	}, [isEditing]);
-	const onDateSelect = React$23.useCallback((date) => {
+	const onDateSelect = React$25.useCallback((date) => {
 		if (!date) return;
 		setValue(date);
 		meta?.onDataUpdate?.({
@@ -4451,14 +4461,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$23.useCallback((isOpen) => {
+	const onOpenChange = React$25.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen && isEditing && !hasStoppedRef.current) {
 			hasStoppedRef.current = true;
 			meta?.onCellEditingStop?.();
 		}
 	}, [isEditing, meta]);
-	const onWrapperKeyDown = React$23.useCallback((event) => {
+	const onWrapperKeyDown = React$25.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -4478,10 +4488,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		initialValue,
 		meta
 	]);
-	React$23.useEffect(() => {
+	React$25.useEffect(() => {
 		setOpen(isEditing);
 	}, [isEditing]);
-	React$23.useEffect(() => {
+	React$25.useEffect(() => {
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
@@ -4533,7 +4543,7 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 //#region src/data-grid/cell-variants/gantt-cell.tsx
 function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const containerRef = React$22.useRef(null);
+	const containerRef = React$24.useRef(null);
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
 	const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
@@ -4572,19 +4582,19 @@ function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSe
 //#region src/data-grid/cell-variants/long-text-cell.tsx
 function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$21.useState(initialValue ?? "");
-	const [open, setOpen] = React$21.useState(false);
-	const textareaRef = React$21.useRef(null);
-	const containerRef = React$21.useRef(null);
-	const hasSubmittedRef = React$21.useRef(false);
+	const [value, setValue] = React$23.useState(initialValue ?? "");
+	const [open, setOpen] = React$23.useState(false);
+	const textareaRef = React$23.useRef(null);
+	const containerRef = React$23.useRef(null);
+	const hasSubmittedRef = React$23.useRef(false);
 	const meta = table.options.meta;
 	const sideOffset = -(containerRef.current?.clientHeight ?? 0);
-	const prevInitialValueRef = React$21.useRef(initialValue);
+	const prevInitialValueRef = React$23.useRef(initialValue);
 	if (initialValue !== prevInitialValueRef.current) {
 		prevInitialValueRef.current = initialValue;
 		setValue(initialValue ?? "");
 	}
-	React$21.useEffect(() => {
+	React$23.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
 	const debouncedSave = useDebouncedCallback((newValue) => {
@@ -4594,7 +4604,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 			value: newValue
 		});
 	}, 300);
-	const onSave = React$21.useCallback(() => {
+	const onSave = React$23.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		if (value !== initialValue) meta?.onDataUpdate?.({
@@ -4611,7 +4621,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onCancel = React$21.useCallback(() => {
+	const onCancel = React$23.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		setValue(initialValue ?? "");
@@ -4628,12 +4638,12 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onChange = React$21.useCallback((event) => {
+	const onChange = React$23.useCallback((event) => {
 		const newValue = event.target.value;
 		setValue(newValue);
 		debouncedSave(newValue);
 	}, [debouncedSave]);
-	const onOpenChange = React$21.useCallback((isOpen) => {
+	const onOpenChange = React$23.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen && !hasSubmittedRef.current) {
 			hasSubmittedRef.current = true;
@@ -4651,7 +4661,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onOpenAutoFocus = React$21.useCallback((event) => {
+	const onOpenAutoFocus = React$23.useCallback((event) => {
 		event.preventDefault();
 		if (textareaRef.current) {
 			textareaRef.current.focus();
@@ -4659,7 +4669,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 			textareaRef.current.setSelectionRange(length, length);
 		}
 	}, []);
-	const onWrapperKeyDown = React$21.useCallback((event) => {
+	const onWrapperKeyDown = React$23.useCallback((event) => {
 		if (isEditing && !open) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -4685,7 +4695,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onTextareaKeyDown = React$21.useCallback((event) => {
+	const onTextareaKeyDown = React$23.useCallback((event) => {
 		if (event.key === "Escape") {
 			event.preventDefault();
 			onCancel();
@@ -4695,7 +4705,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		}
 		event.stopPropagation();
 	}, [onCancel, onSave]);
-	const onTextareaBlur = React$21.useCallback(() => {
+	const onTextareaBlur = React$23.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		if (value !== initialValue) meta?.onDataUpdate?.({
@@ -4712,7 +4722,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	React$21.useEffect(() => {
+	React$23.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -4765,26 +4775,26 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 //#endregion
 //#region src/data-grid/cell-variants/multi-select-cell.tsx
 function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
-	const cellValue = React$20.useMemo(() => cell.getValue() ?? [], [cell]);
+	const cellValue = React$22.useMemo(() => cell.getValue() ?? [], [cell]);
 	const cellId = `${rowIndex}-${columnId}`;
-	const prevCellIdRef = React$20.useRef(cellId);
-	const [selectedValues, setSelectedValues] = React$20.useState(cellValue);
-	const [open, setOpen] = React$20.useState(false);
-	const [searchValue, setSearchValue] = React$20.useState("");
-	const containerRef = React$20.useRef(null);
-	const inputRef = React$20.useRef(null);
+	const prevCellIdRef = React$22.useRef(cellId);
+	const [selectedValues, setSelectedValues] = React$22.useState(cellValue);
+	const [open, setOpen] = React$22.useState(false);
+	const [searchValue, setSearchValue] = React$22.useState("");
+	const containerRef = React$22.useRef(null);
+	const inputRef = React$22.useRef(null);
 	const meta = table.options.meta;
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const sideOffset = -(containerRef.current?.clientHeight ?? 0);
 	const arrayOptions = cellOpts?.variant === "multi-select" ? cellOpts.options : void 0;
 	const optionsMap = cellOpts?.variant === "multi-select" ? cellOpts.optionsMap : void 0;
-	const arrayOptionsLabelMap = React$20.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
-	const getLabel = React$20.useCallback((val) => {
+	const arrayOptionsLabelMap = React$22.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
+	const getLabel = React$22.useCallback((val) => {
 		if (optionsMap) return optionsMap.get(val) ?? val;
 		if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(val) ?? val;
 		return val;
 	}, [optionsMap, arrayOptionsLabelMap]);
-	const options = React$20.useMemo(() => {
+	const options = React$22.useMemo(() => {
 		if (!isEditing) return [];
 		if (arrayOptions) return arrayOptions;
 		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
@@ -4803,10 +4813,10 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		setOpen(false);
 		setSearchValue("");
 	}
-	React$20.useEffect(() => {
+	React$22.useEffect(() => {
 		setSelectedValues(cellValue);
 	}, [cellValue]);
-	const onValueChange = React$20.useCallback((value) => {
+	const onValueChange = React$22.useCallback((value) => {
 		const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
 		setSelectedValues(newValues);
 		meta?.onDataUpdate?.({
@@ -4822,7 +4832,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const removeValue = React$20.useCallback((valueToRemove, event) => {
+	const removeValue = React$22.useCallback((valueToRemove, event) => {
 		event?.stopPropagation();
 		event?.preventDefault();
 		const newValues = selectedValues.filter((v) => v !== valueToRemove);
@@ -4839,7 +4849,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const clearAll = React$20.useCallback(() => {
+	const clearAll = React$22.useCallback(() => {
 		setSelectedValues([]);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -4852,18 +4862,18 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$20.useCallback((isOpen) => {
+	const onOpenChange = React$22.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) {
 			setSearchValue("");
 			meta?.onCellEditingStop?.();
 		}
 	}, [meta]);
-	const onOpenAutoFocus = React$20.useCallback((event) => {
+	const onOpenAutoFocus = React$22.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$20.useCallback((event) => {
+	const onWrapperKeyDown = React$22.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -4883,7 +4893,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		cellValue,
 		meta
 	]);
-	const onInputKeyDown = React$20.useCallback((event) => {
+	const onInputKeyDown = React$22.useCallback((event) => {
 		if (event.key === "Backspace" && searchValue === "" && selectedValues.length > 0) {
 			event.preventDefault();
 			const lastValue = selectedValues.at(-1);
@@ -4895,7 +4905,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		selectedValues,
 		removeValue
 	]);
-	React$20.useEffect(() => {
+	React$22.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -4905,7 +4915,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		meta?.searchOpen,
 		meta?.isScrolling
 	]);
-	React$20.useEffect(() => {
+	React$22.useEffect(() => {
 		if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 0);
 	}, [open]);
 	const displayLabels = selectedValues.map(getLabel).filter(Boolean);
@@ -5006,19 +5016,19 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 //#region src/data-grid/cell-variants/number-cell.tsx
 function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const inputRef = React$19.useRef(null);
-	const containerRef = React$19.useRef(null);
+	const inputRef = React$21.useRef(null);
+	const containerRef = React$21.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
 	const cellOptions = colMeta?.cell;
-	const editableResolver = React$19.useMemo(() => {
+	const editableResolver = React$21.useMemo(() => {
 		const v = colMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colMeta?.editable]);
 	const isEditable = editableResolver(cell.row.original);
 	const { min, max, step, prefix, suffix, fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
-	const resolvedPrefix = React$19.useMemo(() => {
+	const resolvedPrefix = React$21.useMemo(() => {
 		if (typeof prefix === "function") return prefix(cell.row.original, initialValue);
 		return prefix ?? null;
 	}, [
@@ -5026,7 +5036,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		cell.row.original,
 		initialValue
 	]);
-	const resolvedSuffix = React$19.useMemo(() => {
+	const resolvedSuffix = React$21.useMemo(() => {
 		if (typeof suffix === "function") return suffix(cell.row.original, initialValue);
 		return suffix ?? null;
 	}, [
@@ -5034,12 +5044,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		cell.row.original,
 		initialValue
 	]);
-	const [editValue, setEditValue] = React$19.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
-	const hasSubmittedRef = React$19.useRef(false);
-	React$19.useEffect(() => {
+	const [editValue, setEditValue] = React$21.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
+	const hasSubmittedRef = React$21.useRef(false);
+	React$21.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
-	const onBlur = React$19.useCallback(() => {
+	const onBlur = React$21.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		const numValue = editValue === "" ? null : Number(editValue);
 		if (numValue !== initialValue) meta?.onDataUpdate?.({
@@ -5055,13 +5065,13 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		editValue
 	]);
-	const onChange = React$19.useCallback((event) => {
+	const onChange = React$21.useCallback((event) => {
 		setEditValue(event.target.value);
 	}, []);
-	const parseNumValue = React$19.useCallback(() => {
+	const parseNumValue = React$21.useCallback(() => {
 		return editValue === "" ? null : Number(editValue);
 	}, [editValue]);
-	const saveAndStop = React$19.useCallback((options) => {
+	const saveAndStop = React$21.useCallback((options) => {
 		hasSubmittedRef.current = true;
 		const numValue = parseNumValue();
 		meta?.onDataUpdate?.({
@@ -5076,7 +5086,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		rowIndex,
 		columnId
 	]);
-	const handleEditingKeyDown = React$19.useCallback((event) => {
+	const handleEditingKeyDown = React$21.useCallback((event) => {
 		if (event.key === "Enter") {
 			event.preventDefault();
 			saveAndStop({ moveToNextRow: true });
@@ -5095,12 +5105,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		meta
 	]);
-	const handleFocusedKeyDown = React$19.useCallback((event) => {
+	const handleFocusedKeyDown = React$21.useCallback((event) => {
 		if (!isEditable) return;
 		if (event.key === "Backspace") setEditValue("");
 		else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) setEditValue(event.key);
 	}, [isEditable]);
-	const onWrapperKeyDown = React$19.useCallback((event) => {
+	const onWrapperKeyDown = React$21.useCallback((event) => {
 		if (isEditing) handleEditingKeyDown(event);
 		else if (isFocused) handleFocusedKeyDown(event);
 	}, [
@@ -5109,10 +5119,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		handleEditingKeyDown,
 		handleFocusedKeyDown
 	]);
-	React$19.useEffect(() => {
+	React$21.useEffect(() => {
 		setEditValue(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
 	}, [initialValue]);
-	React$19.useEffect(() => {
+	React$21.useEffect(() => {
 		if (isEditing && inputRef.current) {
 			inputRef.current.focus();
 			inputRef.current.select();
@@ -5159,7 +5169,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 //#endregion
 //#region src/data-grid/cell-variants/react-node-cell.tsx
 function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected, isEditing }) {
-	const containerRef = React$18.useRef(null);
+	const containerRef = React$20.useRef(null);
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const renderFn = cellOpts?.variant === "react-node" ? cellOpts.render : void 0;
 	const children = renderFn ? renderFn({
@@ -5189,17 +5199,17 @@ function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected,
 //#region src/data-grid/cell-variants/select-cell.tsx
 function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$17.useState(initialValue);
-	const [open, setOpen] = React$17.useState(false);
-	const containerRef = React$17.useRef(null);
-	const inputRef = React$17.useRef(null);
+	const [value, setValue] = React$19.useState(initialValue);
+	const [open, setOpen] = React$19.useState(false);
+	const containerRef = React$19.useRef(null);
+	const inputRef = React$19.useRef(null);
 	const meta = table.options.meta;
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const hasSearch = (cellOpts?.variant === "select" && cellOpts?.hasSearch) ?? false;
 	const sideOffset = -(inputRef.current?.clientHeight ?? 0);
 	const { options: arrayOptions, optionsMap, optionsRenderer } = cellOpts?.variant === "select" ? cellOpts : {};
-	const arrayOptionsLabelMap = React$17.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
-	const displayLabel = React$17.useMemo(() => {
+	const arrayOptionsLabelMap = React$19.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
+	const displayLabel = React$19.useMemo(() => {
 		if (optionsMap) {
 			const data = optionsMap.get(value ?? "");
 			if (optionsRenderer) return optionsRenderer(data, "cell");
@@ -5213,7 +5223,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		arrayOptionsLabelMap,
 		optionsRenderer
 	]);
-	const options = React$17.useMemo(() => {
+	const options = React$19.useMemo(() => {
 		if (!isEditing) return [];
 		if (arrayOptions) return arrayOptions.map((opt) => ({
 			value: opt.value,
@@ -5229,7 +5239,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		arrayOptions,
 		optionsMap
 	]);
-	const onValueChange = React$17.useCallback((newValue) => {
+	const onValueChange = React$19.useCallback((newValue) => {
 		setValue(newValue);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -5242,15 +5252,15 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$17.useCallback((isOpen) => {
+	const onOpenChange = React$19.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) meta?.onCellEditingStop?.();
 	}, [meta]);
-	const onOpenAutoFocus = React$17.useCallback((event) => {
+	const onOpenAutoFocus = React$19.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$17.useCallback((event) => {
+	const onWrapperKeyDown = React$19.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -5268,10 +5278,10 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		meta
 	]);
-	React$17.useEffect(() => {
+	React$19.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$17.useEffect(() => {
+	React$19.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -5356,22 +5366,22 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 //#region src/data-grid/cell-variants/short-text-cell.tsx
 function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$16.useState(initialValue);
-	const inputRef = React$16.useRef(null);
-	const containerRef = React$16.useRef(null);
-	const hasSubmittedRef = React$16.useRef(false);
+	const [value, setValue] = React$18.useState(initialValue);
+	const inputRef = React$18.useRef(null);
+	const containerRef = React$18.useRef(null);
+	const hasSubmittedRef = React$18.useRef(false);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
-	const editableResolver = React$16.useMemo(() => {
+	const editableResolver = React$18.useMemo(() => {
 		const v = colMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colMeta?.editable]);
 	const isEditable = editableResolver(cell.row.original);
-	React$16.useEffect(() => {
+	React$18.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
-	const onBlur = React$16.useCallback(() => {
+	const onBlur = React$18.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		const currentValue = inputRef.current?.value ?? "";
 		const normalizedInitial = initialValue ?? "";
@@ -5387,10 +5397,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		columnId,
 		initialValue
 	]);
-	const onChange = React$16.useCallback((event) => {
+	const onChange = React$18.useCallback((event) => {
 		setValue(event.target.value);
 	}, []);
-	const handleEditingKeyDown = React$16.useCallback((event) => {
+	const handleEditingKeyDown = React$18.useCallback((event) => {
 		if (event.key === "Enter") {
 			event.preventDefault();
 			hasSubmittedRef.current = true;
@@ -5424,13 +5434,13 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		rowIndex,
 		columnId
 	]);
-	const handleFocusedKeyDown = React$16.useCallback((event) => {
+	const handleFocusedKeyDown = React$18.useCallback((event) => {
 		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
 			if (!isEditable) return;
 			setValue(event.key);
 		}
 	}, [isEditable]);
-	const onWrapperKeyDown = React$16.useCallback((event) => {
+	const onWrapperKeyDown = React$18.useCallback((event) => {
 		if (isEditing) handleEditingKeyDown(event);
 		else if (isFocused) handleFocusedKeyDown(event);
 	}, [
@@ -5439,10 +5449,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		handleEditingKeyDown,
 		handleFocusedKeyDown
 	]);
-	React$16.useEffect(() => {
+	React$18.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$16.useEffect(() => {
+	React$18.useEffect(() => {
 		if (isEditing && inputRef.current) {
 			inputRef.current.focus();
 			inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
@@ -5598,7 +5608,7 @@ function DataGridCell({ cell, table }) {
 
 //#endregion
 //#region src/separator/separator.tsx
-const Separator = React$15.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+const Separator = React$17.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
 	ref,
 	decorative,
 	orientation,
@@ -5610,22 +5620,22 @@ Separator.displayName = SeparatorPrimitive.Root.displayName;
 //#endregion
 //#region src/data-grid/data-grid-view-menu.tsx
 function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAdmin, onApplyView, onSaveView, onUpdateView, onRenameView, onDeleteView, onClearView,...props }) {
-	const viewableColumns = React$14.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
-	const [order, setOrder] = React$14.useState(() => {
+	const viewableColumns = React$16.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
+	const [order, setOrder] = React$16.useState(() => {
 		const stateOrder = table.getState().columnOrder ?? [];
 		if (stateOrder && stateOrder.length > 0) return stateOrder;
 		return table.getAllColumns().map((c) => c.id);
 	});
-	const [searchQuery, setSearchQuery] = React$14.useState("");
-	const [isDragging, setIsDragging] = React$14.useState(false);
-	const [insertionIndex, setInsertionIndex] = React$14.useState(null);
-	const [isCreating, setIsCreating] = React$14.useState(false);
-	const [newViewName, setNewViewName] = React$14.useState("");
-	const [newViewGlobal, setNewViewGlobal] = React$14.useState(false);
-	const [renamingViewId, setRenamingViewId] = React$14.useState(null);
-	const [renameValue, setRenameValue] = React$14.useState("");
-	const [deletingViewId, setDeletingViewId] = React$14.useState(null);
-	const [updatingViewId, setUpdatingViewId] = React$14.useState(null);
+	const [searchQuery, setSearchQuery] = React$16.useState("");
+	const [isDragging, setIsDragging] = React$16.useState(false);
+	const [insertionIndex, setInsertionIndex] = React$16.useState(null);
+	const [isCreating, setIsCreating] = React$16.useState(false);
+	const [newViewName, setNewViewName] = React$16.useState("");
+	const [newViewGlobal, setNewViewGlobal] = React$16.useState(false);
+	const [renamingViewId, setRenamingViewId] = React$16.useState(null);
+	const [renameValue, setRenameValue] = React$16.useState("");
+	const [deletingViewId, setDeletingViewId] = React$16.useState(null);
+	const [updatingViewId, setUpdatingViewId] = React$16.useState(null);
 	function resetAllStates() {
 		setIsCreating(false);
 		setNewViewName("");
@@ -5633,9 +5643,10 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		setRenameValue("");
 		setDeletingViewId(null);
 		setUpdatingViewId(null);
+		setSearchQuery("");
 	}
 	const tableColumnOrder = table.getState().columnOrder;
-	React$14.useEffect(() => {
+	React$16.useEffect(() => {
 		const stateOrder = tableColumnOrder ?? [];
 		if (stateOrder && stateOrder.length > 0) {
 			setOrder(stateOrder);
@@ -5643,8 +5654,8 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		}
 		setOrder(table.getAllColumns().map((c) => c.id));
 	}, [table, tableColumnOrder]);
-	const visibleSet = React$14.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
-	const orderedColumns = React$14.useMemo(() => {
+	const visibleSet = React$16.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
+	const orderedColumns = React$16.useMemo(() => {
 		const ordered = [];
 		for (const id of order) {
 			const col = viewableColumns.find((c) => c.id === id);
@@ -5657,12 +5668,12 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		viewableColumns,
 		table
 	]);
-	const draggingRef = React$14.useRef(null);
-	const groupRef = React$14.useRef(null);
-	const getBaseOrder = React$14.useCallback(() => {
+	const draggingRef = React$16.useRef(null);
+	const groupRef = React$16.useRef(null);
+	const getBaseOrder = React$16.useCallback(() => {
 		return table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
 	}, [table]);
-	const computeInsertionIndex = React$14.useCallback((clientY) => {
+	const computeInsertionIndex = React$16.useCallback((clientY) => {
 		const baseOrder = getBaseOrder();
 		const el = groupRef.current;
 		if (!el) return baseOrder.length;
@@ -5684,7 +5695,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		setIsDragging(false);
 		setInsertionIndex(null);
 	}
-	const doDrop = React$14.useCallback((dragId, toIndex) => {
+	const doDrop = React$16.useCallback((dragId, toIndex) => {
 		const baseOrder = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
 		const fromIndex = baseOrder.indexOf(dragId);
 		if (fromIndex === -1) {
@@ -5701,7 +5712,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		setOrder(copy.filter((id) => visibleSet.has(id)));
 		onDragEnd();
 	}, [table, visibleSet]);
-	const startPointerDrag = React$14.useCallback((e, id) => {
+	const startPointerDrag = React$16.useCallback((e, id) => {
 		e.preventDefault();
 		draggingRef.current = id;
 		setIsDragging(true);
@@ -5734,7 +5745,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		if (fromIndex < targetIndex) insertAt = targetIndex - 1;
 		return insertAt === fromIndex;
 	}
-	const dragFromHandle = React$14.useRef(false);
+	const dragFromHandle = React$16.useRef(false);
 	function resetTableView() {
 		const defaultOrder = table.getAllColumns().map((c) => c.id);
 		try {
@@ -5757,7 +5768,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 			} catch (_) {}
 		}
 	}
-	const sortedViews = React$14.useMemo(() => {
+	const sortedViews = React$16.useMemo(() => {
 		if (!savedViews || savedViews.length === 0) return savedViews;
 		return [...savedViews].sort((a, b) => {
 			if (a.isGlobal !== b.isGlobal) return a.isGlobal ? -1 : 1;
@@ -6005,6 +6016,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 					isCreating ? /* @__PURE__ */ jsxs("div", {
 						className: "px-2 pb-2 space-y-1",
 						children: [/* @__PURE__ */ jsx(Input, {
+							variant: "simple",
 							value: newViewName,
 							onChange: (e) => setNewViewName(e.target.value),
 							onKeyDown: (e) => {
@@ -6027,7 +6039,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 									"Share with all users"
 								]
 							}), /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-1",
+								className: "ml-auto flex items-center gap-1 py-1",
 								children: [/* @__PURE__ */ jsx(Button, {
 									variant: "ghost",
 									size: "sm",
@@ -6072,7 +6084,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 							const currentBase = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
 							const pos = currentBase.indexOf(column.id);
 							const isHideable = column.getCanHide();
-							return /* @__PURE__ */ jsxs(React$14.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
+							return /* @__PURE__ */ jsxs(React$16.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
 								value: column.id,
 								"data-col-id": column.id,
 								className: cn("flex items-center gap-2 px-2 py-1 rounded", !isDragging ? "data-[selected=true]:bg-accent" : "data-[selected=true]:bg-transparent cursor-grabbing", draggingRef.current === column.id && isDragging && "bg-accent data-[selected=true]:bg-accent"),
@@ -6098,7 +6110,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 									}),
 									/* @__PURE__ */ jsx("span", {
 										className: "truncate",
-										children: column.columnDef.meta?.label ?? column.id
+										children: column.columnDef.meta?.label ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id)
 									}),
 									/* @__PURE__ */ jsx(CheckIcon$1, { className: cn(
 										"ml-auto size-4 shrink-0",
@@ -6194,30 +6206,30 @@ const MIN_COLUMN_SIZE = 60;
 const MAX_COLUMN_SIZE = 800;
 const SEARCH_SHORTCUT_KEY = "f";
 const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$13.useLayoutEffect : React$13.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$15.useLayoutEffect : React$15.useEffect;
 function useLazyRef(fn) {
-	const ref = React$13.useRef(null);
+	const ref = React$15.useRef(null);
 	if (ref.current === null) ref.current = fn();
 	return ref;
 }
 function useAsRef(data) {
-	const ref = React$13.useRef(data);
+	const ref = React$15.useRef(data);
 	useIsomorphicLayoutEffect(() => {
 		ref.current = data;
 	});
 	return ref;
 }
 function useStore(store, selector) {
-	const getSnapshot = React$13.useCallback(() => selector(store.getState()), [store, selector]);
-	return React$13.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+	const getSnapshot = React$15.useCallback(() => selector(store.getState()), [store, selector]);
+	return React$15.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
 function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount, persistColumnState = false,...dataGridProps }) {
-	const dataGridRef = React$13.useRef(null);
-	const tableRef = React$13.useRef(null);
-	const rowVirtualizerRef = React$13.useRef(null);
-	const headerRef = React$13.useRef(null);
-	const rowMapRef = React$13.useRef(new Map());
-	const footerRef = React$13.useRef(null);
+	const dataGridRef = React$15.useRef(null);
+	const tableRef = React$15.useRef(null);
+	const rowVirtualizerRef = React$15.useRef(null);
+	const headerRef = React$15.useRef(null);
+	const rowMapRef = React$15.useRef(new Map());
+	const footerRef = React$15.useRef(null);
 	const dataGridPropsRef = useAsRef(dataGridProps);
 	const listenersRef = useLazyRef(() => new Set());
 	const stateRef = useLazyRef(() => {
@@ -6245,7 +6257,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isScrolling: false
 		};
 	});
-	const store = React$13.useMemo(() => {
+	const store = React$15.useMemo(() => {
 		let isBatching = false;
 		let pendingNotification = false;
 		return {
@@ -6289,7 +6301,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			}
 		};
 	}, [listenersRef, stateRef]);
-	React$13.useEffect(() => {
+	React$15.useEffect(() => {
 		store.setState("rowHeight", rowHeightProp);
 	}, [rowHeightProp, store]);
 	const focusedCell = useStore(store, (state) => state.focusedCell);
@@ -6305,27 +6317,27 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 	const rowHeight = useStore(store, (state) => state.rowHeight);
 	const isScrolling = useStore(store, (state) => state.isScrolling);
 	const rowHeightValue = getRowHeightValue(rowHeight);
-	const columnIds = React$13.useMemo(() => {
+	const columnIds = React$15.useMemo(() => {
 		return columns.map((c) => {
 			if (c.id) return c.id;
 			if ("accessorKey" in c) return c.accessorKey;
 			return void 0;
 		}).filter((id) => Boolean(id));
 	}, [columns]);
-	const columnDefsVersionRef = React$13.useRef(0);
-	const prevColumnsRef = React$13.useRef(columns);
+	const columnDefsVersionRef = React$15.useRef(0);
+	const prevColumnsRef = React$15.useRef(columns);
 	if (prevColumnsRef.current !== columns) {
 		prevColumnsRef.current = columns;
 		columnDefsVersionRef.current += 1;
 	}
 	const columnDefsVersion = columnDefsVersionRef.current;
-	const storageKey = React$13.useMemo(() => {
+	const storageKey = React$15.useMemo(() => {
 		if (!persistColumnState || typeof window === "undefined") return void 0;
 		const path = globalThis.location?.pathname ?? "unknown";
 		const cols = columnIds.join("|");
 		return `pxl.dataGrid:${path}:${cols}`;
 	}, [columnIds, persistColumnState]);
-	const persistedState = React$13.useMemo(() => {
+	const persistedState = React$15.useMemo(() => {
 		if (!storageKey) return void 0;
 		try {
 			const raw = localStorage.getItem(storageKey);
@@ -6336,7 +6348,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			return void 0;
 		}
 	}, [storageKey]);
-	const mergedInitialState = React$13.useMemo(() => {
+	const mergedInitialState = React$15.useMemo(() => {
 		const base = { ...initialState ?? {} };
 		if (persistedState) try {
 			if (persistedState.columnOrder) base.columnOrder = persistedState.columnOrder;
@@ -6345,12 +6357,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		} catch (_) {}
 		return base;
 	}, [initialState, persistedState]);
-	const getNavigableColumnIds = React$13.useCallback(() => {
+	const getNavigableColumnIds = React$15.useCallback(() => {
 		const t = tableRef.current;
 		if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
 		return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
 	}, [columnIds]);
-	const onDataUpdate = React$13.useCallback((updates) => {
+	const onDataUpdate = React$15.useCallback((updates) => {
 		const updateArray = Array.isArray(updates) ? updates : [updates];
 		if (updateArray.length === 0) return;
 		const currentTable = tableRef.current;
@@ -6398,10 +6410,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		onDataChange?.(newData);
 	}, [data, onDataChange]);
-	const getIsCellSelected = React$13.useCallback((rowIndex, columnId) => {
+	const getIsCellSelected = React$15.useCallback((rowIndex, columnId) => {
 		return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
 	}, [selectionState.selectedCells]);
-	const clearSelection = React$13.useCallback(() => {
+	const clearSelection = React$15.useCallback(() => {
 		store.batch(() => {
 			store.setState("selectionState", {
 				selectedCells: new Set(),
@@ -6411,7 +6423,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("rowSelection", {});
 		});
 	}, [store]);
-	const selectAll = React$13.useCallback(() => {
+	const selectAll = React$15.useCallback(() => {
 		const allCells = new Set();
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows ?? [];
@@ -6438,7 +6450,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		data.length,
 		store
 	]);
-	const selectColumn = React$13.useCallback((columnId) => {
+	const selectColumn = React$15.useCallback((columnId) => {
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows ?? [];
 		const rowCount = rows.length ?? data.length;
@@ -6460,7 +6472,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isSelecting: false
 		});
 	}, [data.length, store]);
-	const selectRange = React$13.useCallback((start, end, isSelecting = false) => {
+	const selectRange = React$15.useCallback((start, end, isSelecting = false) => {
 		const visibleCols = getNavigableColumnIds();
 		const startColIndex = visibleCols.indexOf(start.columnId);
 		const endColIndex = visibleCols.indexOf(end.columnId);
@@ -6482,7 +6494,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isSelecting
 		});
 	}, [getNavigableColumnIds, store]);
-	const focusCell = React$13.useCallback((rowIndex, columnId) => {
+	const focusCell = React$15.useCallback((rowIndex, columnId) => {
 		store.batch(() => {
 			store.setState("focusedCell", {
 				rowIndex,
@@ -6498,7 +6510,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		if (currentState.searchOpen) return;
 		if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
 	}, [store, onCellFocusProp]);
-	const onRowsDelete = React$13.useCallback(async (rowIndices) => {
+	const onRowsDelete = React$15.useCallback(async (rowIndices) => {
 		if (!onRowsDeleteProp || rowIndices.length === 0) return;
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows;
@@ -6550,7 +6562,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 	const debouncedRowClick = useDebouncedCallback((rowIndex) => {
 		onRowClickProp?.(rowIndex);
 	}, 300);
-	const navigateCell = React$13.useCallback((direction) => {
+	const navigateCell = React$15.useCallback((direction) => {
 		const currentState = store.getState();
 		if (!currentState.focusedCell) return;
 		const { rowIndex, columnId } = currentState.focusedCell;
@@ -6680,7 +6692,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		onRowClickProp,
 		debouncedRowClick
 	]);
-	const onCellEditingStart = React$13.useCallback((rowIndex, columnId) => {
+	const onCellEditingStart = React$15.useCallback((rowIndex, columnId) => {
 		const col = tableRef.current?.getColumn(columnId);
 		const editable = col?.columnDef?.meta?.editable;
 		if (editable === false) return;
@@ -6699,7 +6711,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		});
 	}, [store]);
-	const onCellEditingStop = React$13.useCallback((opts) => {
+	const onCellEditingStop = React$15.useCallback((opts) => {
 		const currentState = store.getState();
 		const currentEditing = currentState.editingCell;
 		store.setState("editingCell", null);
@@ -6725,7 +6737,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		focusCell,
 		navigateCell
 	]);
-	const onSearchOpenChange = React$13.useCallback((open) => {
+	const onSearchOpenChange = React$15.useCallback((open) => {
 		if (open) {
 			store.setState("searchOpen", true);
 			return;
@@ -6744,7 +6756,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
 	}, [store]);
-	const onSearch = React$13.useCallback((query) => {
+	const onSearch = React$15.useCallback((query) => {
 		if (!query.trim()) {
 			store.batch(() => {
 				store.setState("searchMatches", []);
@@ -6779,8 +6791,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, { align: "center" });
 		}
 	}, [columnIds, store]);
-	const onSearchQueryChange = React$13.useCallback((query) => store.setState("searchQuery", query), [store]);
-	const onNavigateToPrevMatch = React$13.useCallback(() => {
+	const onSearchQueryChange = React$15.useCallback((query) => store.setState("searchQuery", query), [store]);
+	const onNavigateToPrevMatch = React$15.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.searchMatches.length === 0) return;
 		const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
@@ -6795,7 +6807,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store, focusCell]);
-	const onNavigateToNextMatch = React$13.useCallback(() => {
+	const onNavigateToNextMatch = React$15.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.searchMatches.length === 0) return;
 		const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
@@ -6810,15 +6822,15 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store, focusCell]);
-	const getIsSearchMatch = React$13.useCallback((rowIndex, columnId) => {
+	const getIsSearchMatch = React$15.useCallback((rowIndex, columnId) => {
 		return searchMatches.some((match) => match.rowIndex === rowIndex && match.columnId === columnId);
 	}, [searchMatches]);
-	const getIsActiveSearchMatch = React$13.useCallback((rowIndex, columnId) => {
+	const getIsActiveSearchMatch = React$15.useCallback((rowIndex, columnId) => {
 		if (matchIndex < 0) return false;
 		const currentMatch = searchMatches[matchIndex];
 		return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
 	}, [searchMatches, matchIndex]);
-	const blurCell = React$13.useCallback(() => {
+	const blurCell = React$15.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.editingCell && document.activeElement instanceof HTMLElement) document.activeElement.blur();
 		store.batch(() => {
@@ -6826,7 +6838,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("editingCell", null);
 		});
 	}, [store]);
-	const onCellClick = React$13.useCallback((rowIndex, columnId, event) => {
+	const onCellClick = React$15.useCallback((rowIndex, columnId, event) => {
 		if (event?.button === 2) return;
 		const currentState = store.getState();
 		const currentFocused = currentState.focusedCell;
@@ -6874,11 +6886,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectRange,
 		clearSelection
 	]);
-	const onCellDoubleClick = React$13.useCallback((rowIndex, columnId, event) => {
+	const onCellDoubleClick = React$15.useCallback((rowIndex, columnId, event) => {
 		if (event?.defaultPrevented) return;
 		onCellEditingStart(rowIndex, columnId);
 	}, [onCellEditingStart]);
-	const onCellMouseDown = React$13.useCallback((rowIndex, columnId, event) => {
+	const onCellMouseDown = React$15.useCallback((rowIndex, columnId, event) => {
 		if (event.button === 2) return;
 		event.preventDefault();
 		if (!event.ctrlKey && !event.metaKey && !event.shiftKey) store.batch(() => {
@@ -6899,7 +6911,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("rowSelection", {});
 		});
 	}, [store]);
-	const onCellMouseEnter = React$13.useCallback((rowIndex, columnId, _event) => {
+	const onCellMouseEnter = React$15.useCallback((rowIndex, columnId, _event) => {
 		const currentState = store.getState();
 		if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
 			const start = currentState.selectionState.selectionRange.start;
@@ -6915,14 +6927,14 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectRange,
 		focusCell
 	]);
-	const onCellMouseUp = React$13.useCallback(() => {
+	const onCellMouseUp = React$15.useCallback(() => {
 		const currentState = store.getState();
 		store.setState("selectionState", {
 			...currentState.selectionState,
 			isSelecting: false
 		});
 	}, [store]);
-	const onCellContextMenu = React$13.useCallback((rowIndex, columnId, event) => {
+	const onCellContextMenu = React$15.useCallback((rowIndex, columnId, event) => {
 		event.preventDefault();
 		event.stopPropagation();
 		const currentState = store.getState();
@@ -6954,7 +6966,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			y: event.clientY
 		});
 	}, [store]);
-	const onContextMenuOpenChange = React$13.useCallback((open) => {
+	const onContextMenuOpenChange = React$15.useCallback((open) => {
 		if (!open) {
 			const currentMenu = store.getState().contextMenu;
 			store.setState("contextMenu", {
@@ -6964,7 +6976,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store]);
-	const onDataGridKeyDown = React$13.useCallback((event) => {
+	const onDataGridKeyDown = React$15.useCallback((event) => {
 		const currentState = store.getState();
 		const { key, ctrlKey, metaKey, shiftKey } = event;
 		const isCtrlPressed = ctrlKey || metaKey;
@@ -7123,7 +7135,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		enableSearch,
 		onCellEditingStart
 	]);
-	const onSortingChange = React$13.useCallback((updater) => {
+	const onSortingChange = React$15.useCallback((updater) => {
 		if (manualSorting && externalOnSortingChange) externalOnSortingChange(updater);
 		else {
 			const currentState = store.getState();
@@ -7135,7 +7147,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		manualSorting,
 		externalOnSortingChange
 	]);
-	const onRowSelectionChange = React$13.useCallback((updater) => {
+	const onRowSelectionChange = React$15.useCallback((updater) => {
 		const currentState = store.getState();
 		const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
 		const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
@@ -7157,7 +7169,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("editingCell", null);
 		});
 	}, [store, columnIds]);
-	const onRowSelect = React$13.useCallback((rowIndex, selected, shiftKey) => {
+	const onRowSelect = React$15.useCallback((rowIndex, selected, shiftKey) => {
 		const currentState = store.getState();
 		const rows = tableRef.current?.getRowModel().rows ?? [];
 		const currentRow = rows[rowIndex];
@@ -7177,12 +7189,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		store.setState("lastClickedRowIndex", rowIndex);
 	}, [store, onRowSelectionChange]);
-	const onRowHeightChange = React$13.useCallback((updater) => {
+	const onRowHeightChange = React$15.useCallback((updater) => {
 		const currentState = store.getState();
 		const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
 		store.setState("rowHeight", newRowHeight);
 	}, [store]);
-	const onColumnClick = React$13.useCallback((columnId) => {
+	const onColumnClick = React$15.useCallback((columnId) => {
 		if (!enableColumnSelection) {
 			clearSelection();
 			return;
@@ -7193,13 +7205,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectColumn,
 		clearSelection
 	]);
-	const defaultColumn = React$13.useMemo(() => ({
+	const defaultColumn = React$15.useMemo(() => ({
 		cell: DataGridCell,
 		minSize: MIN_COLUMN_SIZE,
 		maxSize: MAX_COLUMN_SIZE
 	}), []);
 	const effectiveSorting = manualSorting && externalSorting ? externalSorting : sorting;
-	const tableOptions = React$13.useMemo(() => ({
+	const tableOptions = React$15.useMemo(() => ({
 		...dataGridPropsRef.current,
 		data,
 		columns,
@@ -7291,7 +7303,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 	if (!tableRef.current) tableRef.current = table;
 	const columnSizing = table.getState().columnSizing;
 	const columnVisibility = table.getState().columnVisibility;
-	const columnSizeVars = React$13.useMemo(() => {
+	const columnSizeVars = React$15.useMemo(() => {
 		const headers = table.getFlatHeaders();
 		const colSizes = {};
 		for (const header of headers) {
@@ -7333,7 +7345,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		}
 	});
 	if (!rowVirtualizerRef.current) rowVirtualizerRef.current = rowVirtualizer;
-	const onScrollToRow = React$13.useCallback((opts) => {
+	const onScrollToRow = React$15.useCallback((opts) => {
 		const rowIndex = opts?.rowIndex ?? 0;
 		const columnId = opts?.columnId;
 		rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
@@ -7357,7 +7369,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		getNavigableColumnIds,
 		store
 	]);
-	const onRowAdd = React$13.useCallback(async (event) => {
+	const onRowAdd = React$15.useCallback(async (event) => {
 		if (!onRowAddProp) return;
 		const result = await onRowAddProp(event);
 		if (event?.defaultPrevented || result === null) return;
@@ -7390,7 +7402,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		table.getState().columnVisibility,
 		table.getState().columnPinning
 	]);
-	const searchState = React$13.useMemo(() => {
+	const searchState = React$15.useMemo(() => {
 		if (!enableSearch) return void 0;
 		return {
 			searchMatches,
@@ -7415,7 +7427,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		onNavigateToNextMatch,
 		onNavigateToPrevMatch
 	]);
-	React$13.useEffect(() => {
+	React$15.useEffect(() => {
 		const dataGridElement = dataGridRef.current;
 		if (!dataGridElement) return;
 		dataGridElement.addEventListener("keydown", onDataGridKeyDown);
@@ -7423,7 +7435,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
 		};
 	}, [onDataGridKeyDown]);
-	React$13.useEffect(() => {
+	React$15.useEffect(() => {
 		function onGlobalKeyDown(event) {
 			const dataGridElement = dataGridRef.current;
 			if (!dataGridElement) return;
@@ -7467,7 +7479,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		store,
 		clearSelection
 	]);
-	React$13.useEffect(() => {
+	React$15.useEffect(() => {
 		const currentState = store.getState();
 		if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
 			const _nav = getNavigableColumnIds();
@@ -7493,7 +7505,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		getNavigableColumnIds,
 		focusCell
 	]);
-	React$13.useEffect(() => {
+	React$15.useEffect(() => {
 		function onOutsideClick(event) {
 			if (event.button === 2) return;
 			if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
@@ -7515,7 +7527,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		blurCell,
 		clearSelection
 	]);
-	React$13.useEffect(() => {
+	React$15.useEffect(() => {
 		function onCleanup() {
 			document.removeEventListener("selectstart", preventSelection);
 			document.removeEventListener("contextmenu", preventContextMenu);
@@ -7575,7 +7587,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 //#endregion
 //#region src/date-picker/date-picker.tsx
 function DatePickerDemo() {
-	const [date, setDate] = React$12.useState();
+	const [date, setDate] = React$14.useState();
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(Button, {
@@ -7605,13 +7617,13 @@ Drawer.displayName = "Drawer";
 const DrawerTrigger = Drawer$1.Trigger;
 const DrawerPortal = Drawer$1.Portal;
 const DrawerClose = Drawer$1.Close;
-const DrawerOverlay = React$11.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
+const DrawerOverlay = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
 	ref,
 	className: cn("fixed inset-0 z-50 bg-black/80", className),
 	...props
 }));
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
-const DrawerContent = React$11.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
+const DrawerContent = React$13.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
 	ref,
 	className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className),
 	...props,
@@ -7628,13 +7640,13 @@ const DrawerFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 	...props
 });
 DrawerFooter.displayName = "DrawerFooter";
-const DrawerTitle = React$11.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
+const DrawerTitle = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
 	ref,
 	className: cn("text-lg font-semibold leading-none tracking-tight", className),
 	...props
 }));
 DrawerTitle.displayName = Drawer$1.Title.displayName;
-const DrawerDescription = React$11.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
+const DrawerDescription = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
@@ -7692,10 +7704,10 @@ const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:tex
 	defaultVariants: { orientation: "vertical" }
 });
 function Field({ className, orientation = "vertical",...props }) {
-	return /* @__PURE__ */ jsx("fieldset", {
+	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "field",
 		"data-orientation": orientation,
-		className: cn(fieldVariants({ orientation }), "border-0 p-0 m-0", className),
+		className: cn(fieldVariants({ orientation }), className),
 		...props
 	});
 }
@@ -7764,8 +7776,8 @@ function FieldError({ className, children, errors,...props }) {
 //#endregion
 //#region src/hooks/use-is-mobile.ts
 function useIsMobile(mobileBreakpoint = 768) {
-	const [isMobile, setIsMobile] = React$10.useState(false);
-	React$10.useEffect(() => {
+	const [isMobile, setIsMobile] = React$12.useState(false);
+	React$12.useEffect(() => {
 		const mql = globalThis.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
 		const onChange = () => {
 			setIsMobile(globalThis.innerWidth < mobileBreakpoint);
@@ -7839,6 +7851,611 @@ const InfoCard = ({ variant, title, message, showHomeButton = false, children })
 	});
 };
 
+//#endregion
+//#region src/kanban/kanban.tsx
+const directions = [
+	KeyboardCode.Down,
+	KeyboardCode.Right,
+	KeyboardCode.Up,
+	KeyboardCode.Left
+];
+const coordinateGetter = (event, { context }) => {
+	const { active, droppableRects, droppableContainers, collisionRect } = context;
+	if (directions.includes(event.code)) {
+		event.preventDefault();
+		if (!active || !collisionRect) return;
+		const filteredContainers = [];
+		for (const entry of droppableContainers.getEnabled()) {
+			if (!entry || entry?.disabled) return;
+			const rect = droppableRects.get(entry.id);
+			if (!rect) return;
+			const data = entry.data.current;
+			if (data) {
+				const { type, children } = data;
+				if (type === "container" && children?.length > 0) {
+					if (active.data.current?.type !== "container") return;
+				}
+			}
+			switch (event.code) {
+				case KeyboardCode.Down:
+					if (collisionRect.top < rect.top) filteredContainers.push(entry);
+					break;
+				case KeyboardCode.Up:
+					if (collisionRect.top > rect.top) filteredContainers.push(entry);
+					break;
+				case KeyboardCode.Left:
+					if (collisionRect.left >= rect.left + rect.width) filteredContainers.push(entry);
+					break;
+				case KeyboardCode.Right:
+					if (collisionRect.left + collisionRect.width <= rect.left) filteredContainers.push(entry);
+					break;
+			}
+		}
+		const collisions = closestCorners({
+			active,
+			collisionRect,
+			droppableRects,
+			droppableContainers: filteredContainers,
+			pointerCoordinates: null
+		});
+		const closestId = getFirstCollision(collisions, "id");
+		if (closestId != null) {
+			const newDroppable = droppableContainers.get(closestId);
+			const newNode = newDroppable?.node.current;
+			const newRect = newDroppable?.rect.current;
+			if (newNode && newRect) {
+				if (newDroppable.id === "placeholder") return {
+					x: newRect.left + (newRect.width - collisionRect.width) / 2,
+					y: newRect.top + (newRect.height - collisionRect.height) / 2
+				};
+				if (newDroppable.data.current?.type === "container") return {
+					x: newRect.left + 20,
+					y: newRect.top + 74
+				};
+				return {
+					x: newRect.left,
+					y: newRect.top
+				};
+			}
+		}
+	}
+	return void 0;
+};
+const ROOT_NAME = "Kanban";
+const BOARD_NAME = "KanbanBoard";
+const COLUMN_NAME = "KanbanColumn";
+const COLUMN_HANDLE_NAME = "KanbanColumnHandle";
+const ITEM_NAME = "KanbanItem";
+const ITEM_HANDLE_NAME = "KanbanItemHandle";
+const OVERLAY_NAME = "KanbanOverlay";
+const KanbanContext = React$11.createContext(null);
+function useKanbanContext(consumerName) {
+	const context = React$11.useContext(KanbanContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function KanbanRoot(props) {
+	const { value, onValueChange, modifiers, strategy = verticalListSortingStrategy, orientation = "horizontal", onMove, getItemValue: getItemValueProp, accessibility, flatCursor = false,...kanbanProps } = props;
+	const id = React$11.useId();
+	const [activeId, setActiveId] = React$11.useState(null);
+	const lastOverIdRef = React$11.useRef(null);
+	const hasMovedRef = React$11.useRef(false);
+	const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter }));
+	const getItemValue = React$11.useCallback((item) => {
+		if (typeof item === "object" && !getItemValueProp) throw new Error("`getItemValue` is required when using array of objects");
+		return getItemValueProp ? getItemValueProp(item) : item;
+	}, [getItemValueProp]);
+	const getColumn = React$11.useCallback((id$1) => {
+		if (id$1 in value) return id$1;
+		for (const [columnId, items] of Object.entries(value)) if (items.some((item) => getItemValue(item) === id$1)) return columnId;
+		return null;
+	}, [value, getItemValue]);
+	const collisionDetection = React$11.useCallback((args) => {
+		if (activeId && activeId in value) return closestCenter({
+			...args,
+			droppableContainers: args.droppableContainers.filter((container) => container.id in value)
+		});
+		const pointerIntersections = pointerWithin(args);
+		const intersections = pointerIntersections.length > 0 ? pointerIntersections : rectIntersection(args);
+		let overId = getFirstCollision(intersections, "id");
+		if (!overId) {
+			if (hasMovedRef.current) lastOverIdRef.current = activeId;
+			return lastOverIdRef.current ? [{ id: lastOverIdRef.current }] : [];
+		}
+		if (overId in value) {
+			const containerItems = value[overId];
+			if (containerItems && containerItems.length > 0) {
+				const closestItem = closestCenter({
+					...args,
+					droppableContainers: args.droppableContainers.filter((container) => container.id !== overId && containerItems.some((item) => getItemValue(item) === container.id))
+				});
+				if (closestItem.length > 0) overId = closestItem[0]?.id ?? overId;
+			}
+		}
+		lastOverIdRef.current = overId;
+		return [{ id: overId }];
+	}, [
+		activeId,
+		value,
+		getItemValue
+	]);
+	const onDragStart = React$11.useCallback((event) => {
+		kanbanProps.onDragStart?.(event);
+		if (event.activatorEvent.defaultPrevented) return;
+		setActiveId(event.active.id);
+	}, [kanbanProps]);
+	const onDragOver = React$11.useCallback((event) => {
+		kanbanProps.onDragOver?.(event);
+		if (event.activatorEvent.defaultPrevented) return;
+		const { active, over } = event;
+		if (!over) return;
+		const activeColumn = getColumn(active.id);
+		const overColumn = getColumn(over.id);
+		if (!activeColumn || !overColumn) return;
+		if (activeColumn === overColumn) {
+			const items = value[activeColumn];
+			if (!items) return;
+			const activeIndex = items.findIndex((item) => getItemValue(item) === active.id);
+			const overIndex = items.findIndex((item) => getItemValue(item) === over.id);
+			if (activeIndex !== overIndex) {
+				const newColumns = { ...value };
+				newColumns[activeColumn] = arrayMove(items, activeIndex, overIndex);
+				onValueChange?.(newColumns);
+			}
+		} else {
+			const activeItems = value[activeColumn];
+			const overItems = value[overColumn];
+			if (!activeItems || !overItems) return;
+			const activeIndex = activeItems.findIndex((item) => getItemValue(item) === active.id);
+			if (activeIndex === -1) return;
+			const activeItem = activeItems[activeIndex];
+			if (!activeItem) return;
+			const updatedItems = {
+				...value,
+				[activeColumn]: activeItems.filter((item) => getItemValue(item) !== active.id),
+				[overColumn]: [...overItems, activeItem]
+			};
+			onValueChange?.(updatedItems);
+			hasMovedRef.current = true;
+		}
+	}, [
+		kanbanProps,
+		getColumn,
+		value,
+		getItemValue,
+		onValueChange
+	]);
+	const onDragEnd = React$11.useCallback((event) => {
+		kanbanProps.onDragEnd?.(event);
+		if (event.activatorEvent.defaultPrevented) return;
+		const { active, over } = event;
+		if (!over) {
+			setActiveId(null);
+			return;
+		}
+		if (active.id in value && over.id in value) {
+			const activeIndex = Object.keys(value).indexOf(active.id);
+			const overIndex = Object.keys(value).indexOf(over.id);
+			if (activeIndex !== overIndex) {
+				const orderedColumns = Object.keys(value);
+				const newOrder = arrayMove(orderedColumns, activeIndex, overIndex);
+				const newColumns = {};
+				for (const key of newOrder) {
+					const items = value[key];
+					if (items) newColumns[key] = items;
+				}
+				if (onMove) onMove({
+					...event,
+					activeIndex,
+					overIndex
+				});
+				else onValueChange?.(newColumns);
+			}
+		} else {
+			const activeColumn = getColumn(active.id);
+			const overColumn = getColumn(over.id);
+			if (!activeColumn || !overColumn) {
+				setActiveId(null);
+				return;
+			}
+			if (activeColumn === overColumn) {
+				const items = value[activeColumn];
+				if (!items) {
+					setActiveId(null);
+					return;
+				}
+				const activeIndex = items.findIndex((item) => getItemValue(item) === active.id);
+				const overIndex = items.findIndex((item) => getItemValue(item) === over.id);
+				if (activeIndex !== overIndex) {
+					const newColumns = { ...value };
+					newColumns[activeColumn] = arrayMove(items, activeIndex, overIndex);
+					if (onMove) onMove({
+						...event,
+						activeIndex,
+						overIndex
+					});
+					else onValueChange?.(newColumns);
+				}
+			}
+		}
+		setActiveId(null);
+		hasMovedRef.current = false;
+	}, [
+		kanbanProps,
+		value,
+		onMove,
+		onValueChange,
+		getColumn,
+		getItemValue
+	]);
+	const onDragCancel = React$11.useCallback((event) => {
+		kanbanProps.onDragCancel?.(event);
+		if (event.activatorEvent.defaultPrevented) return;
+		setActiveId(null);
+		hasMovedRef.current = false;
+	}, [kanbanProps]);
+	const announcements = React$11.useMemo(() => ({
+		onDragStart({ active }) {
+			const isColumn = active.id in value;
+			const itemType = isColumn ? "column" : "item";
+			const position = isColumn ? Object.keys(value).indexOf(active.id) + 1 : (() => {
+				const column = getColumn(active.id);
+				if (!column || !value[column]) return 1;
+				return value[column].findIndex((item) => getItemValue(item) === active.id) + 1;
+			})();
+			const total = isColumn ? Object.keys(value).length : (() => {
+				const column = getColumn(active.id);
+				return column ? value[column]?.length ?? 0 : 0;
+			})();
+			return `Picked up ${itemType} at position ${position} of ${total}`;
+		},
+		onDragOver({ active, over }) {
+			if (!over) return;
+			const isColumn = active.id in value;
+			const itemType = isColumn ? "column" : "item";
+			const position = isColumn ? Object.keys(value).indexOf(over.id) + 1 : (() => {
+				const column = getColumn(over.id);
+				if (!column || !value[column]) return 1;
+				return value[column].findIndex((item) => getItemValue(item) === over.id) + 1;
+			})();
+			const total = isColumn ? Object.keys(value).length : (() => {
+				const column = getColumn(over.id);
+				return column ? value[column]?.length ?? 0 : 0;
+			})();
+			const overColumn = getColumn(over.id);
+			const activeColumn = getColumn(active.id);
+			if (isColumn) return `${itemType} is now at position ${position} of ${total}`;
+			if (activeColumn !== overColumn) return `${itemType} is now at position ${position} of ${total} in ${overColumn}`;
+			return `${itemType} is now at position ${position} of ${total}`;
+		},
+		onDragEnd({ active, over }) {
+			if (!over) return;
+			const isColumn = active.id in value;
+			const itemType = isColumn ? "column" : "item";
+			const position = isColumn ? Object.keys(value).indexOf(over.id) + 1 : (() => {
+				const column = getColumn(over.id);
+				if (!column || !value[column]) return 1;
+				return value[column].findIndex((item) => getItemValue(item) === over.id) + 1;
+			})();
+			const total = isColumn ? Object.keys(value).length : (() => {
+				const column = getColumn(over.id);
+				return column ? value[column]?.length ?? 0 : 0;
+			})();
+			const overColumn = getColumn(over.id);
+			const activeColumn = getColumn(active.id);
+			if (isColumn) return `${itemType} was dropped at position ${position} of ${total}`;
+			if (activeColumn !== overColumn) return `${itemType} was dropped at position ${position} of ${total} in ${overColumn}`;
+			return `${itemType} was dropped at position ${position} of ${total}`;
+		},
+		onDragCancel({ active }) {
+			const isColumn = active.id in value;
+			const itemType = isColumn ? "column" : "item";
+			return `Dragging was cancelled. ${itemType} was dropped.`;
+		}
+	}), [
+		value,
+		getColumn,
+		getItemValue
+	]);
+	const contextValue = React$11.useMemo(() => ({
+		id,
+		items: value,
+		modifiers,
+		strategy,
+		orientation,
+		activeId,
+		setActiveId,
+		getItemValue,
+		flatCursor
+	}), [
+		id,
+		value,
+		activeId,
+		modifiers,
+		strategy,
+		orientation,
+		getItemValue,
+		flatCursor
+	]);
+	return /* @__PURE__ */ jsx(KanbanContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(DndContext, {
+			collisionDetection,
+			modifiers,
+			sensors,
+			...kanbanProps,
+			id,
+			measuring: { droppable: { strategy: MeasuringStrategy.Always } },
+			onDragStart,
+			onDragOver,
+			onDragEnd,
+			onDragCancel,
+			accessibility: {
+				announcements,
+				screenReaderInstructions: { draggable: `
+            To pick up a kanban item or column, press space or enter.
+            While dragging, use the arrow keys to move the item.
+            Press space or enter again to drop the item in its new position, or press escape to cancel.
+          ` },
+				...accessibility
+			}
+		})
+	});
+}
+const KanbanBoardContext = React$11.createContext(false);
+function KanbanBoard(props) {
+	const { asChild, className, ref,...boardProps } = props;
+	const context = useKanbanContext(BOARD_NAME);
+	const columns = React$11.useMemo(() => {
+		return Object.keys(context.items);
+	}, [context.items]);
+	const BoardPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(KanbanBoardContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: columns,
+			strategy: context.orientation === "horizontal" ? horizontalListSortingStrategy : verticalListSortingStrategy,
+			children: /* @__PURE__ */ jsx(BoardPrimitive, {
+				"aria-orientation": context.orientation,
+				"data-orientation": context.orientation,
+				"data-slot": "kanban-board",
+				...boardProps,
+				ref,
+				className: cn("flex size-full gap-4", context.orientation === "horizontal" ? "flex-row" : "flex-col", className)
+			})
+		})
+	});
+}
+const KanbanColumnContext = React$11.createContext(null);
+function useKanbanColumnContext(consumerName) {
+	const context = React$11.useContext(KanbanColumnContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${COLUMN_NAME}\``);
+	return context;
+}
+const animateLayoutChanges = (args) => defaultAnimateLayoutChanges({
+	...args,
+	wasDragging: true
+});
+function KanbanColumn(props) {
+	const { value, asChild, asHandle, disabled, className, style, ref,...columnProps } = props;
+	const id = React$11.useId();
+	const context = useKanbanContext(COLUMN_NAME);
+	const inBoard = React$11.useContext(KanbanBoardContext);
+	const inOverlay = React$11.useContext(KanbanOverlayContext);
+	if (!inBoard && !inOverlay) throw new Error(`\`${COLUMN_NAME}\` must be used within \`${BOARD_NAME}\` or \`${OVERLAY_NAME}\``);
+	if (value === "") throw new Error(`\`${COLUMN_NAME}\` value cannot be an empty string`);
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+		id: value,
+		disabled,
+		animateLayoutChanges
+	});
+	const composedRef = useComposedRefs(ref, (node) => {
+		if (disabled) return;
+		setNodeRef(node);
+	});
+	const composedStyle = React$11.useMemo(() => {
+		return {
+			transform: CSS.Transform.toString(transform),
+			transition,
+			...style
+		};
+	}, [
+		transform,
+		transition,
+		style
+	]);
+	const items = React$11.useMemo(() => {
+		const items$1 = context.items[value] ?? [];
+		return items$1.map((item) => context.getItemValue(item));
+	}, [context, value]);
+	const columnContext = React$11.useMemo(() => ({
+		id,
+		attributes,
+		listeners,
+		setActivatorNodeRef,
+		isDragging,
+		disabled
+	}), [
+		id,
+		attributes,
+		listeners,
+		setActivatorNodeRef,
+		isDragging,
+		disabled
+	]);
+	const ColumnPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(KanbanColumnContext.Provider, {
+		value: columnContext,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items,
+			strategy: context.orientation === "horizontal" ? horizontalListSortingStrategy : verticalListSortingStrategy,
+			children: /* @__PURE__ */ jsx(ColumnPrimitive, {
+				id,
+				"data-disabled": disabled,
+				"data-dragging": isDragging ? "" : void 0,
+				"data-slot": "kanban-column",
+				...columnProps,
+				...asHandle && !disabled ? attributes : {},
+				...asHandle && !disabled ? listeners : {},
+				ref: composedRef,
+				style: composedStyle,
+				className: cn("flex size-full flex-col gap-2 rounded-lg border bg-zinc-100 p-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:bg-zinc-900", {
+					"touch-none select-none": asHandle,
+					"cursor-default": context.flatCursor,
+					"data-dragging:cursor-grabbing": !context.flatCursor,
+					"cursor-grab": !isDragging && asHandle && !context.flatCursor,
+					"opacity-50": isDragging,
+					"pointer-events-none opacity-50": disabled
+				}, className)
+			})
+		})
+	});
+}
+function KanbanColumnHandle(props) {
+	const { asChild, disabled, className, ref,...columnHandleProps } = props;
+	const context = useKanbanContext(COLUMN_NAME);
+	const columnContext = useKanbanColumnContext(COLUMN_HANDLE_NAME);
+	const isDisabled = disabled ?? columnContext.disabled;
+	const composedRef = useComposedRefs(ref, (node) => {
+		if (isDisabled) return;
+		columnContext.setActivatorNodeRef(node);
+	});
+	const HandlePrimitive = asChild ? Slot : "button";
+	return /* @__PURE__ */ jsx(HandlePrimitive, {
+		type: "button",
+		"aria-controls": columnContext.id,
+		"data-disabled": isDisabled,
+		"data-dragging": columnContext.isDragging ? "" : void 0,
+		"data-slot": "kanban-column-handle",
+		...columnHandleProps,
+		...isDisabled ? {} : columnContext.attributes,
+		...isDisabled ? {} : columnContext.listeners,
+		ref: composedRef,
+		className: cn("select-none disabled:pointer-events-none disabled:opacity-50", context.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing", className),
+		disabled: isDisabled
+	});
+}
+const KanbanItemContext = React$11.createContext(null);
+function useKanbanItemContext(consumerName) {
+	const context = React$11.useContext(KanbanItemContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+	return context;
+}
+function KanbanItem(props) {
+	const { value, style, asHandle, asChild, disabled, className, ref,...itemProps } = props;
+	const id = React$11.useId();
+	const context = useKanbanContext(ITEM_NAME);
+	const inBoard = React$11.useContext(KanbanBoardContext);
+	const inOverlay = React$11.useContext(KanbanOverlayContext);
+	if (!inBoard && !inOverlay) throw new Error(`\`${ITEM_NAME}\` must be used within \`${BOARD_NAME}\``);
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+		id: value,
+		disabled
+	});
+	if (value === "") throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
+	const composedRef = useComposedRefs(ref, (node) => {
+		if (disabled) return;
+		setNodeRef(node);
+	});
+	const composedStyle = React$11.useMemo(() => {
+		return {
+			transform: CSS.Transform.toString(transform),
+			transition,
+			...style
+		};
+	}, [
+		transform,
+		transition,
+		style
+	]);
+	const itemContext = React$11.useMemo(() => ({
+		id,
+		attributes,
+		listeners,
+		setActivatorNodeRef,
+		isDragging,
+		disabled
+	}), [
+		id,
+		attributes,
+		listeners,
+		setActivatorNodeRef,
+		isDragging,
+		disabled
+	]);
+	const ItemPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(KanbanItemContext.Provider, {
+		value: itemContext,
+		children: /* @__PURE__ */ jsx(ItemPrimitive, {
+			id,
+			"data-disabled": disabled,
+			"data-dragging": isDragging ? "" : void 0,
+			"data-slot": "kanban-item",
+			...itemProps,
+			...asHandle && !disabled ? attributes : {},
+			...asHandle && !disabled ? listeners : {},
+			ref: composedRef,
+			style: composedStyle,
+			className: cn("focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1", {
+				"touch-none select-none": asHandle,
+				"cursor-default": context.flatCursor,
+				"data-dragging:cursor-grabbing": !context.flatCursor,
+				"cursor-grab": !isDragging && asHandle && !context.flatCursor,
+				"opacity-50": isDragging,
+				"pointer-events-none opacity-50": disabled
+			}, className)
+		})
+	});
+}
+function KanbanItemHandle(props) {
+	const { asChild, disabled, className, ref,...itemHandleProps } = props;
+	const context = useKanbanContext(ITEM_HANDLE_NAME);
+	const itemContext = useKanbanItemContext(ITEM_HANDLE_NAME);
+	const isDisabled = disabled ?? itemContext.disabled;
+	const composedRef = useComposedRefs(ref, (node) => {
+		if (isDisabled) return;
+		itemContext.setActivatorNodeRef(node);
+	});
+	const HandlePrimitive = asChild ? Slot : "button";
+	return /* @__PURE__ */ jsx(HandlePrimitive, {
+		type: "button",
+		"aria-controls": itemContext.id,
+		"data-disabled": isDisabled,
+		"data-dragging": itemContext.isDragging ? "" : void 0,
+		"data-slot": "kanban-item-handle",
+		...itemHandleProps,
+		...isDisabled ? {} : itemContext.attributes,
+		...isDisabled ? {} : itemContext.listeners,
+		ref: composedRef,
+		className: cn("select-none disabled:pointer-events-none disabled:opacity-50", context.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing", className),
+		disabled: isDisabled
+	});
+}
+const KanbanOverlayContext = React$11.createContext(false);
+const dropAnimation = { sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4" } } }) };
+function KanbanOverlay(props) {
+	const { container: containerProp, children,...overlayProps } = props;
+	const context = useKanbanContext(OVERLAY_NAME);
+	const [mounted, setMounted] = React$11.useState(false);
+	React$11.useLayoutEffect(() => setMounted(true), []);
+	const container = containerProp ?? (mounted ? globalThis.document?.body : null);
+	if (!container) return null;
+	const variant = context.activeId && context.activeId in context.items ? "column" : "item";
+	return ReactDOM.createPortal(/* @__PURE__ */ jsx(DragOverlay, {
+		dropAnimation,
+		modifiers: context.modifiers,
+		className: cn(!context.flatCursor && "cursor-grabbing"),
+		...overlayProps,
+		children: /* @__PURE__ */ jsx(KanbanOverlayContext.Provider, {
+			value: true,
+			children: context.activeId && children ? typeof children === "function" ? children({
+				value: context.activeId,
+				variant
+			}) : children : null
+		})
+	}), container);
+}
+
 //#endregion
 //#region src/input/deferred-input.tsx
 /**
@@ -7956,32 +8573,32 @@ const MenubarGroup = MenubarPrimitive.Group;
 const MenubarPortal = MenubarPrimitive.Portal;
 const MenubarSub = MenubarPrimitive.Sub;
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
-const Menubar = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
+const Menubar = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
 	ref,
 	className: cn("flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm", className),
 	...props
 }));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-const MenubarTrigger = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
+const MenubarTrigger = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
 	ref,
 	className: cn("flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className),
 	...props
 }));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-const MenubarSubTrigger = React$9.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.SubTrigger, {
+const MenubarSubTrigger = React$10.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.SubTrigger, {
 	ref,
 	className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
 }));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-const MenubarSubContent = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
+const MenubarSubContent = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
 	ref,
 	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
 	...props
 }));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-const MenubarContent = React$9.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
+const MenubarContent = React$10.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
 	ref,
 	align,
 	alignOffset,
@@ -7990,13 +8607,13 @@ const MenubarContent = React$9.forwardRef(({ className, align = "start", alignOf
 	...props
 }) }));
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-const MenubarItem = React$9.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
+const MenubarItem = React$10.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
 	...props
 }));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-const MenubarCheckboxItem = React$9.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.CheckboxItem, {
+const MenubarCheckboxItem = React$10.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.CheckboxItem, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	checked,
@@ -8007,7 +8624,7 @@ const MenubarCheckboxItem = React$9.forwardRef(({ className, children, checked,.
 	}), children]
 }));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-const MenubarRadioItem = React$9.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.RadioItem, {
+const MenubarRadioItem = React$10.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.RadioItem, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	...props,
@@ -8017,13 +8634,13 @@ const MenubarRadioItem = React$9.forwardRef(({ className, children,...props }, r
 	}), children]
 }));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-const MenubarLabel = React$9.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Label, {
+const MenubarLabel = React$10.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Label, {
 	ref,
 	className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
 	...props
 }));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-const MenubarSeparator = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
+const MenubarSeparator = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
 	ref,
 	className: cn("-mx-1 my-1 h-px bg-muted", className),
 	...props
@@ -8160,13 +8777,13 @@ const Pagination = ({ className,...props }) => /* @__PURE__ */ jsx("nav", {
 	...props
 });
 Pagination.displayName = "Pagination";
-const PaginationContent = React$8.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ul", {
+const PaginationContent = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ul", {
 	ref,
 	className: cn("flex flex-row items-center gap-1", className),
 	...props
 }));
 PaginationContent.displayName = "PaginationContent";
-const PaginationItem = React$8.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
+const PaginationItem = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
 	ref,
 	className: cn("", className),
 	...props
@@ -8288,7 +8905,7 @@ const ResizableHandle = ({ withHandle, className,...props }) => /* @__PURE__ */
 
 //#endregion
 //#region src/scroll-area/scroll-area.tsx
-const ScrollArea = React$7.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+const ScrollArea = React$8.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
 	ref,
 	className: cn("relative overflow-hidden", className),
 	...props,
@@ -8302,7 +8919,7 @@ const ScrollArea = React$7.forwardRef(({ className, children,...props }, ref) =>
 	]
 }));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React$7.forwardRef(({ className, orientation = "vertical",...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+const ScrollBar = React$8.forwardRef(({ className, orientation = "vertical",...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
 	ref,
 	orientation,
 	className: cn("flex touch-none select-none transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className),
@@ -8317,7 +8934,7 @@ const Sheet = SheetPrimitive.Root;
 const SheetTrigger = SheetPrimitive.Trigger;
 const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
-const SheetOverlay = React$6.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+const SheetOverlay = React$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
 	className: cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
 	...props,
 	ref
@@ -8332,7 +8949,7 @@ const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
 	} },
 	defaultVariants: { side: "right" }
 });
-const SheetContent = React$6.forwardRef(({ side = "right", className, children, __e2e_test_id__,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+const SheetContent = React$7.forwardRef(({ side = "right", className, children, __e2e_test_id__,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
 	ref,
 	className: cn(sheetVariants({ side }), className),
 	"data-test-id": __e2e_test_id__,
@@ -8357,13 +8974,13 @@ const SheetFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 	...props
 });
 SheetFooter.displayName = "SheetFooter";
-const SheetTitle = React$6.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
+const SheetTitle = React$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
 	ref,
 	className: cn("text-lg font-semibold text-foreground", className),
 	...props
 }));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-const SheetDescription = React$6.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+const SheetDescription = React$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
@@ -8378,32 +8995,32 @@ const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_MAX_WIDTH = 600;
-const SidebarContext = React$5.createContext(null);
-const SidebarResizeContext = React$5.createContext(null);
+const SidebarContext = React$6.createContext(null);
+const SidebarResizeContext = React$6.createContext(null);
 function useSidebar() {
-	const context = React$5.useContext(SidebarContext);
+	const context = React$6.useContext(SidebarContext);
 	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
 	return context;
 }
 function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, width: widthProp, onWidthChange, minWidth = SIDEBAR_MIN_WIDTH, maxWidth = SIDEBAR_MAX_WIDTH, className, style, children,...props }) {
 	const isMobile = useIsMobile();
-	const [openMobile, setOpenMobile] = React$5.useState(false);
-	const [isResizing, setIsResizing] = React$5.useState(false);
-	const [_open, _setOpen] = React$5.useState(defaultOpen);
+	const [openMobile, setOpenMobile] = React$6.useState(false);
+	const [isResizing, setIsResizing] = React$6.useState(false);
+	const [_open, _setOpen] = React$6.useState(defaultOpen);
 	const open = openProp ?? _open;
-	const setOpen = React$5.useCallback((value) => {
+	const setOpen = React$6.useCallback((value) => {
 		const openState = typeof value === "function" ? value(open) : value;
 		if (setOpenProp) setOpenProp(openState);
 		else _setOpen(openState);
 	}, [setOpenProp, open]);
-	const toggleSidebar = React$5.useCallback(() => {
+	const toggleSidebar = React$6.useCallback(() => {
 		return isMobile ? setOpenMobile((open$1) => !open$1) : setOpen((open$1) => !open$1);
 	}, [
 		isMobile,
 		setOpen,
 		setOpenMobile
 	]);
-	React$5.useEffect(() => {
+	React$6.useEffect(() => {
 		const handleKeyDown = (event) => {
 			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
 				event.preventDefault();
@@ -8414,7 +9031,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		return () => globalThis.removeEventListener("keydown", handleKeyDown);
 	}, [toggleSidebar]);
 	const state = open ? "expanded" : "collapsed";
-	const contextValue = React$5.useMemo(() => ({
+	const contextValue = React$6.useMemo(() => ({
 		state,
 		open,
 		setOpen,
@@ -8542,11 +9159,11 @@ function SidebarTrigger({ className, onClick,...props }) {
 }
 function SidebarRail({ className,...props }) {
 	const { toggleSidebar } = useSidebar();
-	const resizeCtx = React$5.useContext(SidebarResizeContext);
-	const startXRef = React$5.useRef(0);
-	const hasDraggedRef = React$5.useRef(false);
+	const resizeCtx = React$6.useContext(SidebarResizeContext);
+	const startXRef = React$6.useRef(0);
+	const hasDraggedRef = React$6.useRef(false);
 	const isResizable = !!resizeCtx?.onWidthChange;
-	const handleMouseDown = React$5.useCallback((e) => {
+	const handleMouseDown = React$6.useCallback((e) => {
 		if (!isResizable || !resizeCtx) return;
 		e.preventDefault();
 		startXRef.current = e.clientX;
@@ -8576,7 +9193,7 @@ function SidebarRail({ className,...props }) {
 		document.body.style.cursor = "col-resize";
 		document.body.style.userSelect = "none";
 	}, [isResizable, resizeCtx]);
-	const handleClick = React$5.useCallback(() => {
+	const handleClick = React$6.useCallback(() => {
 		if (hasDraggedRef.current) return;
 		toggleSidebar();
 	}, [toggleSidebar]);
@@ -9093,7 +9710,7 @@ const knobVariants = cva("bg-background block size-4 shrink-0 rounded-full borde
 	defaultVariants: { knobVariant: "default" }
 });
 function Slider({ className, defaultValue, value, min = 0, max = 100, sliderVariant, knobVariant, knobSize,...props }) {
-	const _values = React$4.useMemo(() => {
+	const _values = React$5.useMemo(() => {
 		if (Array.isArray(value)) return value;
 		else if (Array.isArray(defaultValue)) return defaultValue;
 		return [min, max];
@@ -9128,7 +9745,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, sliderVari
 
 //#endregion
 //#region src/switch/switch.tsx
-const Switch = React$3.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
+const Switch = React$4.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
 	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className),
 	...props,
 	ref,
@@ -9252,7 +9869,7 @@ const toggleVariants = cva("inline-flex items-center justify-center rounded-md t
 		size: "default"
 	}
 });
-const Toggle = React$2.forwardRef(({ className, variant, size,...props }, ref) => /* @__PURE__ */ jsx(TogglePrimitive.Root, {
+const Toggle = React$3.forwardRef(({ className, variant, size,...props }, ref) => /* @__PURE__ */ jsx(TogglePrimitive.Root, {
 	ref,
 	className: cn(toggleVariants({
 		variant,
@@ -9265,11 +9882,11 @@ Toggle.displayName = TogglePrimitive.Root.displayName;
 
 //#endregion
 //#region src/toggle-group/toggle-group.tsx
-const ToggleGroupContext = React$1.createContext({
+const ToggleGroupContext = React$2.createContext({
 	size: "default",
 	variant: "default"
 });
-const ToggleGroup = React$1.forwardRef(({ className, variant, size, children,...props }, ref) => {
+const ToggleGroup = React$2.forwardRef(({ className, variant, size, children,...props }, ref) => {
 	const memoizedValue = useMemo(() => ({
 		variant,
 		size
@@ -9285,8 +9902,8 @@ const ToggleGroup = React$1.forwardRef(({ className, variant, size, children,...
 	});
 });
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-const ToggleGroupItem = React$1.forwardRef(({ className, children, variant, size,...props }, ref) => {
-	const context = React$1.useContext(ToggleGroupContext);
+const ToggleGroupItem = React$2.forwardRef(({ className, children, variant, size,...props }, ref) => {
+	const context = React$2.useContext(ToggleGroupContext);
 	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
 		ref,
 		className: cn(toggleVariants({
@@ -9300,5 +9917,115 @@ const ToggleGroupItem = React$1.forwardRef(({ className, children, variant, size
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
+//#region src/tree-view/tree-view.tsx
+const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, isLast = false, parentIsLast = [], defaultExpandedIds = [], selectedId }) => {
+	const isGroup = node.type === "group";
+	const hasChildren = node.children && node.children.length > 0;
+	if (!isGroup) return /* @__PURE__ */ jsxs("div", {
+		"data-test-id": `tree-node-${node.id}`,
+		className: cn("relative flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }),
+		style: { marginLeft: `${level * 24}px` },
+		onClick: () => onNodeSelect?.(node),
+		children: [
+			node.icon,
+			/* @__PURE__ */ jsx("span", {
+				className: "text-sm select-none truncate",
+				children: node.name
+			}),
+			node.trailing
+		]
+	});
+	return /* @__PURE__ */ jsxs(AccordionItem, {
+		value: node.id,
+		className: "border-0",
+		"data-test-id": `tree-group-${node.id}`,
+		children: [/* @__PURE__ */ jsxs(AccordionTrigger, {
+			style: { "--margin-left": `calc(${level * 24 + 16}px - 16px)` },
+			className: cn("flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) hover:bg-accent hover:text-accent-foreground hover:no-underline transition-colors border border-transparent hover:border hover:border-(--discreet-border)", "[&>svg:last-child]:hidden", { "bg-primary text-primary-foreground": selectedId === node.id }),
+			children: [
+				/* @__PURE__ */ jsx(PlusIcon, {
+					"data-test-id": `tree-expand-${node.id}`,
+					className: "size-4 shrink-0 hidden [[data-state=closed]>&]:block hover:border rounded",
+					onClick: () => {
+						onToggleGroup?.({
+							isExpanded: true,
+							node
+						});
+					}
+				}),
+				/* @__PURE__ */ jsx(MinusIcon, {
+					"data-test-id": `tree-collapse-${node.id}`,
+					className: "size-4 shrink-0 hidden [[data-state=open]>&]:block hover:border rounded",
+					onClick: () => {
+						onToggleGroup?.({
+							isExpanded: false,
+							node
+						});
+					}
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-test-id": `tree-group-label-${node.id}`,
+					className: "flex w-[calc(100%-16px)] gap-2",
+					onClick: (e) => {
+						e.stopPropagation();
+						onGroupSelect?.(node);
+					},
+					children: [
+						node.icon,
+						/* @__PURE__ */ jsx("span", {
+							className: "text-sm select-none truncate text-left",
+							children: node.name
+						}),
+						node.trailing
+					]
+				})
+			]
+		}), hasChildren && /* @__PURE__ */ jsxs(AccordionContent, {
+			className: "pb-0 pt-0 relative",
+			children: [/* @__PURE__ */ jsx("div", {
+				style: { "--left-offset": `calc(${level * 24 + 32}px - 16px)` },
+				className: "before:absolute before:top-0 before:start-(--left-offset) before:w-0.5 before:-ms-px before:h-full before:bg-sidebar-ring dark:before:bg-sidebar-ring"
+			}), /* @__PURE__ */ jsx(Accordion, {
+				type: "multiple",
+				value: defaultExpandedIds,
+				children: node.children?.map((child, index) => /* @__PURE__ */ jsx(TreeBranch, {
+					node: child,
+					level: level + 1,
+					onNodeSelect,
+					onGroupSelect,
+					onToggleGroup,
+					isLast: index === node.children.length - 1,
+					parentIsLast: [...parentIsLast, isLast],
+					defaultExpandedIds,
+					selectedId
+				}, child.id))
+			})]
+		})]
+	});
+};
+const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onToggleGroup, className, defaultExpandedIds = [], selectedId }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("w-full select-none", className),
+		children: /* @__PURE__ */ jsx(Accordion, {
+			type: "multiple",
+			value: defaultExpandedIds,
+			children: data.map((node, index) => /* @__PURE__ */ jsx(TreeBranch, {
+				node,
+				level: 0,
+				onNodeSelect,
+				onGroupSelect,
+				onToggleGroup,
+				isLast: index === data.length - 1,
+				parentIsLast: [],
+				defaultExpandedIds,
+				selectedId
+			}, node.id))
+		})
+	});
+});
+TreeView.displayName = "TreeView";
+
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
 //# sourceMappingURL=index.js.map