@postxl/ui-components 1.4.2 → 1.5.0

package/dist/index.js

@@ -2,6 +2,13 @@ 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$59 from "react";
+import * as React$58 from "react";
+import * as React$57 from "react";
+import * as React$56 from "react";
+import * as React$55 from "react";
+import * as React$54 from "react";
+import * as React$53 from "react";
 import * as React$52 from "react";
 import * as React$51 from "react";
 import * as React$50 from "react";
@@ -63,7 +70,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import useEmblaCarousel from "embla-carousel-react";
-import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
+import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, Check, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PanelRightIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
 import * as CollapsePrimitive from "@radix-ui/react-collapsible";
 import { Command as Command$1 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -90,6 +97,7 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as ResizablePrimitive from "react-resizable-panels";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import { useDirection } from "@radix-ui/react-direction";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
@@ -118,13 +126,13 @@ function testId(baseId, suffix) {
 //#endregion
 //#region src/accordion/accordion.tsx
 const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React$52.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+const AccordionItem = React$59.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
 	ref,
 	className: cn("border-b", className),
 	...props
 }));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React$52.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+const AccordionTrigger = React$59.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
 		ref,
@@ -134,7 +142,7 @@ const AccordionTrigger = React$52.forwardRef(({ className, children,...props },
 	})
 }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React$52.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+const AccordionContent = React$59.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,
@@ -154,21 +162,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Alert = React$51.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Alert = React$58.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	role: "alert",
 	className: cn(alertVariants({ variant }), className),
 	...props
 }));
 Alert.displayName = "Alert";
-const AlertTitle = React$51.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
+const AlertTitle = React$58.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$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const AlertDescription = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("text-sm [&_p]:leading-relaxed", className),
 	...props
@@ -228,13 +236,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$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
+const AlertDialogOverlay = React$57.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$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
+const AlertDialogContent = React$57.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
@@ -250,25 +258,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
 	...props
 });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-const AlertDialogTitle = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
+const AlertDialogTitle = React$57.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$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
+const AlertDialogDescription = React$57.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$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
+const AlertDialogAction = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
 	ref,
 	className: cn(buttonVariants(), className),
 	...props
 }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
+const AlertDialogCancel = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
 	ref,
 	className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
 	...props
@@ -277,19 +285,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 //#endregion
 //#region src/avatar/avatar.tsx
-const Avatar = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+const Avatar = React$56.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$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+const AvatarImage = React$56.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$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+const AvatarFallback = React$56.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
@@ -335,25 +343,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
 
 //#endregion
 //#region src/breadcrumb/breadcrumb.tsx
-const Breadcrumb = React$48.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+const Breadcrumb = React$55.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
 	ref,
 	"aria-label": "breadcrumb",
 	...props
 }));
 Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
+const BreadcrumbList = React$55.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$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
+const BreadcrumbItem = React$55.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$48.forwardRef(({ asChild, className,...props }, ref) => {
+const BreadcrumbLink = React$55.forwardRef(({ asChild, className,...props }, ref) => {
 	const Comp = asChild ? Slot : "a";
 	return /* @__PURE__ */ jsx(Comp, {
 		ref,
@@ -362,7 +370,7 @@ const BreadcrumbLink = React$48.forwardRef(({ asChild, className,...props }, ref
 	});
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
+const BreadcrumbPage = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
 	ref,
 	"aria-disabled": "true",
 	"aria-current": "page",
@@ -392,8 +400,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$47.useState("from");
-	const handleDayClick = React$47.useCallback((day, modifiers, e) => {
+	const [rangeSelectionStep, setRangeSelectionStep] = React$54.useState("from");
+	const handleDayClick = React$54.useCallback((day, modifiers, e) => {
 		if (props.mode === "range") {
 			const range = props.selected;
 			if (rangeSelectionStep === "from") {
@@ -423,8 +431,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$47.useState(props.defaultMonth ?? props.month ?? new Date());
-	React$47.useEffect(() => {
+	const [currentMonth, setCurrentMonth] = React$54.useState(props.defaultMonth ?? props.month ?? new Date());
+	React$54.useEffect(() => {
 		if (props.month) setCurrentMonth(props.month);
 	}, [props.month]);
 	const addMonths = (date, months) => {
@@ -568,8 +576,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 }
 function CalendarDayButton({ className, day, modifiers,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const ref = React$47.useRef(null);
-	React$47.useEffect(() => {
+	const ref = React$54.useRef(null);
+	React$54.useEffect(() => {
 		if (modifiers.focused) ref.current?.focus();
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
@@ -588,38 +596,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
 
 //#endregion
 //#region src/card/card.tsx
-const Card = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Card = React$53.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$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardHeader = React$53.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$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
+const CardTitle = React$53.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$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
+const CardDescription = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 CardDescription.displayName = "CardDescription";
-const CardContent = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardContent = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("p-6 pt-0", className),
 	...props
 }));
 CardContent.displayName = "CardContent";
-const CardFooter = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardFooter = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex items-center p-6 pt-0", className),
 	...props
@@ -630,7 +638,7 @@ CardFooter.displayName = "CardFooter";
 //#region src/card-hover/card-hover.tsx
 const HoverCard = HoverCardPrimitive.Root;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
-const HoverCardContent = React$45.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+const HoverCardContent = React$52.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
 	ref,
 	align,
 	sideOffset,
@@ -641,31 +649,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 //#endregion
 //#region src/carousel/carousel.tsx
-const CarouselContext = React$44.createContext(null);
+const CarouselContext = React$51.createContext(null);
 function useCarousel() {
-	const context = React$44.useContext(CarouselContext);
+	const context = React$51.useContext(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
 	return context;
 }
-const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
+const Carousel = React$51.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$44.useState(false);
-	const [canScrollNext, setCanScrollNext] = React$44.useState(false);
-	const onSelect = React$44.useCallback(() => {
+	const [canScrollPrev, setCanScrollPrev] = React$51.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$51.useState(false);
+	const onSelect = React$51.useCallback(() => {
 		if (!api) return;
 		setCanScrollPrev(api.canScrollPrev());
 		setCanScrollNext(api.canScrollNext());
 	}, [api]);
-	const scrollPrev = React$44.useCallback(() => {
+	const scrollPrev = React$51.useCallback(() => {
 		api?.scrollPrev();
 	}, [api]);
-	const scrollNext = React$44.useCallback(() => {
+	const scrollNext = React$51.useCallback(() => {
 		api?.scrollNext();
 	}, [api]);
-	const handleKeyDown = React$44.useCallback((event) => {
+	const handleKeyDown = React$51.useCallback((event) => {
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			scrollPrev();
@@ -674,11 +682,11 @@ const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi
 			scrollNext();
 		}
 	}, [scrollPrev, scrollNext]);
-	React$44.useEffect(() => {
+	React$51.useEffect(() => {
 		if (!api || !setApi) return;
 		setApi(api);
 	}, [api, setApi]);
-	React$44.useEffect(() => {
+	React$51.useEffect(() => {
 		if (!api) return;
 		onSelect();
 		api.on("reInit", onSelect);
@@ -719,7 +727,7 @@ const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi
 	});
 });
 Carousel.displayName = "Carousel";
-const CarouselContent = React$44.forwardRef(({ className,...props }, ref) => {
+const CarouselContent = React$51.forwardRef(({ className,...props }, ref) => {
 	const { carouselRef, orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref: carouselRef,
@@ -732,7 +740,7 @@ const CarouselContent = React$44.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselContent.displayName = "CarouselContent";
-const CarouselItem = React$44.forwardRef(({ className,...props }, ref) => {
+const CarouselItem = React$51.forwardRef(({ className,...props }, ref) => {
 	const { orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -742,7 +750,7 @@ const CarouselItem = React$44.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React$44.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselPrevious = React$51.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -759,7 +767,7 @@ const CarouselPrevious = React$44.forwardRef(({ className, variant = "outline",
 	});
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React$44.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselNext = React$51.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -1209,7 +1217,7 @@ function DialogDescription({ className,...props }) {
 
 //#endregion
 //#region src/command-palette/command-palette.tsx
-const CommandPalette = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+const CommandPalette = React$50.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
@@ -1227,7 +1235,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
 		})
 	});
 };
-const CommandPaletteInput = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const CommandPaletteInput = React$50.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, {
@@ -1237,31 +1245,31 @@ const CommandPaletteInput = React$43.forwardRef(({ className,...props }, ref) =>
 	})]
 }));
 CommandPaletteInput.displayName = Command$1.Input.displayName;
-const CommandPaletteList = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+const CommandPaletteList = React$50.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$43.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+const CommandPaletteEmpty = React$50.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$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+const CommandPaletteGroup = React$50.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$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+const CommandPaletteSeparator = React$50.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$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+const CommandPaletteItem = React$50.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
@@ -1337,8 +1345,8 @@ const frameworks = [
 	}
 ];
 function ComboboxDemo() {
-	const [open, setOpen] = React$42.useState(false);
-	const [value, setValue] = React$42.useState("");
+	const [open, setOpen] = React$49.useState(false);
+	const [value, setValue] = React$49.useState("");
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -1578,32 +1586,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-const ContextMenuSubTrigger = React$41.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
+const ContextMenuSubTrigger = React$48.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$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
+const ContextMenuSubContent = React$48.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$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
+const ContextMenuContent = React$48.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$41.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
+const ContextMenuItem = React$48.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$41.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
+const ContextMenuCheckboxItem = React$48.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,
@@ -1614,7 +1622,7 @@ const ContextMenuCheckboxItem = React$41.forwardRef(({ className, children, chec
 	}), children]
 }));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-const ContextMenuRadioItem = React$41.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
+const ContextMenuRadioItem = React$48.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,
@@ -1624,13 +1632,13 @@ const ContextMenuRadioItem = React$41.forwardRef(({ className, children,...props
 	}), children]
 }));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-const ContextMenuLabel = React$41.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
+const ContextMenuLabel = React$48.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$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
+const ContextMenuSeparator = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
 	ref,
 	className: cn("-mx-1 my-1 h-px bg-border", className),
 	...props
@@ -1775,7 +1783,7 @@ function DropdownMenuSubContent({ className,...props }) {
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React$40.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+const TooltipContent = React$47.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),
@@ -2260,7 +2268,7 @@ const inputVariants = cva("file:text-foreground placeholder:text-muted-foregroun
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Input = React$39.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
+const Input = React$46.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
 	const input = /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
@@ -2342,10 +2350,10 @@ const numberInputWrapperVariants = cva("border-input bg-background grid grid-col
 	} },
 	defaultVariants: { variant: "default" }
 });
-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(() => {
+const NumberInput = React$45.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
+	const [isFocused, setIsFocused] = React$45.useState(false);
+	const [inputString, setInputString] = React$45.useState("");
+	const intlFormatter = React$45.useMemo(() => {
 		if (!format$1 || typeof format$1 === "function") return void 0;
 		return new Intl.NumberFormat(format$1.locale, format$1.options);
 	}, [format$1]);
@@ -2392,7 +2400,7 @@ const NumberInput = React$38.forwardRef(({ className, wrapperClassName, prefix,
 		setInputString("");
 		props.onBlur?.(e);
 	};
-	const displayValue = React$38.useMemo(() => {
+	const displayValue = React$45.useMemo(() => {
 		if (isFocused && format$1) {
 			if (inputString !== "") return inputString;
 			if (controlledValue !== void 0) {
@@ -2469,20 +2477,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$37.useMemo(() => {
+	const editableResolver = React$44.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$37.useMemo(() => {
+	const classNameResolver = React$44.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$37.useCallback((event) => {
+	const onClick = React$44.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			onClickProp?.(event);
@@ -2495,7 +2503,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		onClickProp
 	]);
-	const onContextMenu = React$37.useCallback((event) => {
+	const onContextMenu = React$44.useCallback((event) => {
 		if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2503,7 +2511,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseDown = React$37.useCallback((event) => {
+	const onMouseDown = React$44.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2511,7 +2519,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseEnter = React$37.useCallback((event) => {
+	const onMouseEnter = React$44.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2519,10 +2527,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseUp = React$37.useCallback(() => {
+	const onMouseUp = React$44.useCallback(() => {
 		if (!isEditing) meta?.onCellMouseUp?.();
 	}, [meta, isEditing]);
-	const onDoubleClick = React$37.useCallback((event) => {
+	const onDoubleClick = React$44.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
@@ -2534,7 +2542,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		isEditable
 	]);
-	const onKeyDown = React$37.useCallback((event) => {
+	const onKeyDown = React$44.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;
@@ -2748,22 +2756,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$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 [value, setValue] = React$43.useState(initialValue);
+	const [open, setOpen] = React$43.useState(false);
+	const [searchValue, setSearchValue] = React$43.useState("");
+	const containerRef = React$43.useRef(null);
+	const inputRef = React$43.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$36.useState(() => getInitialExpandedIds(options, initialValue));
-	const labelMap = React$36.useMemo(() => buildLabelMap(options), [options]);
-	const displayLabel = React$36.useMemo(() => {
+	const [expandedIds, setExpandedIds] = React$43.useState(() => getInitialExpandedIds(options, initialValue));
+	const labelMap = React$43.useMemo(() => buildLabelMap(options), [options]);
+	const displayLabel = React$43.useMemo(() => {
 		if (!value) return "";
 		return labelMap.get(value) ?? value;
 	}, [value, labelMap]);
-	const toggleExpand = React$36.useCallback((id) => {
+	const toggleExpand = React$43.useCallback((id) => {
 		setExpandedIds((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
@@ -2771,7 +2779,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 			return next;
 		});
 	}, []);
-	const onOptionSelect = React$36.useCallback((option) => {
+	const onOptionSelect = React$43.useCallback((option) => {
 		const newValue = option.id;
 		setValue(newValue);
 		meta?.onDataUpdate?.({
@@ -2786,18 +2794,18 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$36.useCallback((isOpen) => {
+	const onOpenChange = React$43.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) {
 			setSearchValue("");
 			meta?.onCellEditingStop?.();
 		}
 	}, [meta]);
-	const onOpenAutoFocus = React$36.useCallback((event) => {
+	const onOpenAutoFocus = React$43.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$36.useCallback((event) => {
+	const onWrapperKeyDown = React$43.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -2817,10 +2825,10 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 		initialValue,
 		meta
 	]);
-	React$36.useEffect(() => {
+	React$43.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$36.useEffect(() => {
+	React$43.useEffect(() => {
 		if (value) {
 			const ancestors = getAncestorIds(options, value);
 			if (ancestors && ancestors.length > 0) setExpandedIds((prev) => {
@@ -2830,7 +2838,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 			});
 		}
 	}, [value, options]);
-	React$36.useEffect(() => {
+	React$43.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -2928,9 +2936,9 @@ function EditorFooter({ count, onApply, onCancel }) {
 	});
 }
 function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$35.useState("");
-	const inputRef = React$35.useRef(null);
-	const handleApply = React$35.useCallback(() => {
+	const [value, setValue] = React$42.useState("");
+	const inputRef = React$42.useRef(null);
+	const handleApply = React$42.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -2942,14 +2950,14 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
 		value,
 		onApply
 	]);
-	const onKeyDown = React$35.useCallback((e) => {
+	const onKeyDown = React$42.useCallback((e) => {
 		stopGridKeys(e);
 		if (e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$35.useEffect(() => {
+	React$42.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -2971,9 +2979,9 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
 	});
 }
 function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$35.useState("");
-	const textareaRef = React$35.useRef(null);
-	const handleApply = React$35.useCallback(() => {
+	const [value, setValue] = React$42.useState("");
+	const textareaRef = React$42.useRef(null);
+	const handleApply = React$42.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -2985,14 +2993,14 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
 		value,
 		onApply
 	]);
-	const onKeyDown = React$35.useCallback((e) => {
+	const onKeyDown = React$42.useCallback((e) => {
 		stopGridKeys(e);
 		if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$35.useEffect(() => {
+	React$42.useEffect(() => {
 		textareaRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3015,12 +3023,12 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
 	});
 }
 function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$35.useState(void 0);
-	const inputRef = React$35.useRef(null);
+	const [value, setValue] = React$42.useState(void 0);
+	const inputRef = React$42.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$35.useCallback(() => {
+	const handleApply = React$42.useCallback(() => {
 		const numValue = value ?? null;
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
@@ -3033,14 +3041,14 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
 		value,
 		onApply
 	]);
-	const onKeyDown = React$35.useCallback((e) => {
+	const onKeyDown = React$42.useCallback((e) => {
 		stopGridKeys(e);
 		if (e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$35.useEffect(() => {
+	React$42.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3069,8 +3077,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$35.useRef(null);
-	const options = React$35.useMemo(() => {
+	const inputRef = React$42.useRef(null);
+	const options = React$42.useMemo(() => {
 		if (arrayOptions) return arrayOptions.map((opt) => ({
 			value: opt.value,
 			data: opt.label
@@ -3081,7 +3089,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
 		}));
 		return [];
 	}, [arrayOptions, optionsMap]);
-	const handleSelect = React$35.useCallback((newValue) => {
+	const handleSelect = React$42.useCallback((newValue) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3092,7 +3100,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
 		columnId,
 		onApply
 	]);
-	React$35.useEffect(() => {
+	React$42.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3116,10 +3124,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$35.useState([]);
-	const [searchValue, setSearchValue] = React$35.useState("");
-	const inputRef = React$35.useRef(null);
-	const options = React$35.useMemo(() => {
+	const [selectedValues, setSelectedValues] = React$42.useState([]);
+	const [searchValue, setSearchValue] = React$42.useState("");
+	const inputRef = React$42.useRef(null);
+	const options = React$42.useMemo(() => {
 		if (arrayOptions) return arrayOptions;
 		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
 			value: id,
@@ -3127,12 +3135,12 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 		}));
 		return [];
 	}, [arrayOptions, optionsMap]);
-	const toggleValue = React$35.useCallback((value) => {
+	const toggleValue = React$42.useCallback((value) => {
 		setSelectedValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
 		setSearchValue("");
 		queueMicrotask(() => inputRef.current?.focus());
 	}, []);
-	const handleApply = React$35.useCallback(() => {
+	const handleApply = React$42.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3144,7 +3152,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 		selectedValues,
 		onApply
 	]);
-	React$35.useEffect(() => {
+	React$42.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3210,7 +3218,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 	});
 }
 function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const setAll = React$35.useCallback((val) => {
+	const setAll = React$42.useCallback((val) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3247,10 +3255,10 @@ function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
 }
 function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
 	const options = cell.variant === "hierarchy" ? cell.options : [];
-	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) => {
+	const inputRef = React$42.useRef(null);
+	const [searchValue, setSearchValue] = React$42.useState("");
+	const [expandedIds, setExpandedIds] = React$42.useState(() => getInitialExpandedIds(options, null));
+	const toggleExpand = React$42.useCallback((id) => {
 		setExpandedIds((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
@@ -3258,7 +3266,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 			return next;
 		});
 	}, []);
-	const handleSelect = React$35.useCallback((option) => {
+	const handleSelect = React$42.useCallback((option) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3269,7 +3277,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 		columnId,
 		onApply
 	]);
-	React$35.useEffect(() => {
+	React$42.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3300,7 +3308,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 	});
 }
 function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const onDateSelect = React$35.useCallback((date) => {
+	const onDateSelect = React$42.useCallback((date) => {
 		if (!date) return;
 		const year = date.getFullYear();
 		const month = String(date.getMonth() + 1).padStart(2, "0");
@@ -3332,28 +3340,28 @@ function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
 	});
 }
 function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }) {
-	const selectedRowIndices = React$35.useMemo(() => {
+	const selectedRowIndices = React$42.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$35.useEffect(() => {
+	React$42.useEffect(() => {
 		if (open && selectedRowIndices.length === 0) onOpenChange(false);
 	}, [
 		open,
 		selectedRowIndices.length,
 		onOpenChange
 	]);
-	const onApply = React$35.useCallback((updates) => {
+	const onApply = React$42.useCallback((updates) => {
 		table.options.meta?.onDataUpdate?.(updates);
 		onOpenChange(false);
 	}, [table, onOpenChange]);
-	const onCancel = React$35.useCallback(() => {
+	const onCancel = React$42.useCallback(() => {
 		onOpenChange(false);
 	}, [onOpenChange]);
-	const onOpenAutoFocus = React$35.useCallback((e) => {
+	const onOpenAutoFocus = React$42.useCallback((e) => {
 		e.preventDefault();
 	}, []);
 	const editorProps = {
@@ -3363,7 +3371,7 @@ function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }
 		onApply,
 		onCancel
 	};
-	const editor = React$35.useMemo(() => {
+	const editor = React$42.useMemo(() => {
 		switch (cell.variant) {
 			case "short-text": return /* @__PURE__ */ jsx(BulkEditShortText, { ...editorProps });
 			case "long-text": return /* @__PURE__ */ jsx(BulkEditLongText, { ...editorProps });
@@ -3441,8 +3449,8 @@ function getColumnVariant(variant) {
 	}
 }
 function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
-	const [open, setOpen] = React$34.useState(false);
-	const [bulkEditOpen, setBulkEditOpen] = React$34.useState(false);
+	const [open, setOpen] = React$41.useState(false);
+	const [bulkEditOpen, setBulkEditOpen] = React$41.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;
@@ -3451,13 +3459,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$34.useEffect(() => {
+	React$41.useEffect(() => {
 		if (!showBulkEdit) setBulkEditOpen(false);
 	}, [showBulkEdit]);
 	const pinnedPosition = column.getIsPinned();
 	const isPinnedLeft = pinnedPosition === "left";
 	const isPinnedRight = pinnedPosition === "right";
-	const onSortingChange = React$34.useCallback((direction) => {
+	const onSortingChange = React$41.useCallback((direction) => {
 		table.setSorting((prev) => {
 			const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
 			const newSort = {
@@ -3471,19 +3479,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 			} else return [...prev, newSort];
 		});
 	}, [column.id, table]);
-	const onSortRemove = React$34.useCallback(() => {
+	const onSortRemove = React$41.useCallback(() => {
 		table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
 	}, [column.id, table]);
-	const onLeftPin = React$34.useCallback(() => {
+	const onLeftPin = React$41.useCallback(() => {
 		column.pin("left");
 	}, [column]);
-	const onRightPin = React$34.useCallback(() => {
+	const onRightPin = React$41.useCallback(() => {
 		column.pin("right");
 	}, [column]);
-	const onUnpin = React$34.useCallback(() => {
+	const onUnpin = React$41.useCallback(() => {
 		column.pin(false);
 	}, [column]);
-	const onTriggerPointerDown = React$34.useCallback((event) => {
+	const onTriggerPointerDown = React$41.useCallback((event) => {
 		onPointerDown?.(event);
 		if (event.defaultPrevented) return;
 		if (event.button !== 0) return;
@@ -3610,7 +3618,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 		})
 	] });
 }
-const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, next) => {
+const DataGridColumnResizer = React$41.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;
@@ -3619,7 +3627,7 @@ const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, ne
 });
 function DataGridColumnResizerImpl({ header, table, label }) {
 	const defaultColumnDef = table._getDefaultColumnDef();
-	const onDoubleClick = React$34.useCallback(() => {
+	const onDoubleClick = React$41.useCallback(() => {
 		header.column.resetSize();
 	}, [header.column]);
 	return /* @__PURE__ */ jsx("div", {
@@ -3728,7 +3736,7 @@ function DataGridContextMenu({ table }) {
 		onRowsDelete
 	});
 }
-const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
+const ContextMenu$1 = React$40.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;
@@ -3739,7 +3747,7 @@ const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
 	return true;
 });
 function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
-	const triggerStyle = React$33.useMemo(() => ({
+	const triggerStyle = React$40.useMemo(() => ({
 		position: "fixed",
 		left: `${contextMenu.x}px`,
 		top: `${contextMenu.y}px`,
@@ -3752,11 +3760,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		pointerEvents: "none",
 		opacity: 0
 	}), [contextMenu.x, contextMenu.y]);
-	const onCloseAutoFocus = React$33.useCallback((event) => {
+	const onCloseAutoFocus = React$40.useCallback((event) => {
 		event.preventDefault();
 		dataGridRef?.current?.focus();
 	}, [dataGridRef]);
-	const onCopy = React$33.useCallback(async () => {
+	const onCopy = React$40.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rows = table.getRowModel().rows;
 		const columnIds = [];
@@ -3795,7 +3803,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$33.useMemo(() => {
+	const canClear = React$40.useMemo(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
 		const visibleCols = table.getVisibleLeafColumns();
 		const rows = table.getRowModel().rows;
@@ -3812,7 +3820,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		}
 		return true;
 	}, [selectionState, table]);
-	const onClear = React$33.useCallback(() => {
+	const onClear = React$40.useCallback(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		if (!canClear) return;
 		const updates = [];
@@ -3831,7 +3839,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		selectionState,
 		canClear
 	]);
-	const onDelete = React$33.useCallback(async () => {
+	const onDelete = React$40.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rowIndices = new Set();
 		for (const cellKey of selectionState.selectedCells) {
@@ -3908,12 +3916,12 @@ function composeRefs(...refs) {
 * Accepts callback refs and RefObject(s)
 */
 function useComposedRefs(...refs) {
-	return React$32.useCallback(composeRefs(...refs), refs);
+	return React$39.useCallback(composeRefs(...refs), refs);
 }
 
 //#endregion
 //#region src/data-grid/data-grid-row.tsx
-const DataGridRow = React$31.memo(DataGridRowImpl, (prev, next) => {
+const DataGridRow = React$38.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;
@@ -3945,7 +3953,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 		}
 	});
 	const isRowSelected = row.getIsSelected();
-	const handleRowClick = React$31.useCallback((event) => {
+	const handleRowClick = React$38.useCallback((event) => {
 		const target = event.target;
 		if (target.closest("input, button, [role=\"checkbox\"]")) return;
 		if (event.detail === 1) onRowClick?.(virtualRowIndex);
@@ -3974,7 +3982,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 				"data-highlighted": isCellFocused ? "" : void 0,
 				"data-slot": "grid-cell",
 				tabIndex: -1,
-				className: cn({ "border-r": cell.column.id !== "select" }),
+				className: cn("shrink-0 overflow-hidden", { "border-r": cell.column.id !== "select" }),
 				style: {
 					...getCommonPinningStyles({ column: cell.column }),
 					width: `calc(var(--col-${cell.column.id}-size) * 1px)`
@@ -3995,20 +4003,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$30.useRef(callback);
-	React$30.useEffect(() => {
+	const callbackRef = React$37.useRef(callback);
+	React$37.useEffect(() => {
 		callbackRef.current = callback;
 	});
-	return React$30.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+	return React$37.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
 //#endregion
 //#region src/hooks/use-debounced-callback.ts
 function useDebouncedCallback(callback, delay) {
 	const handleCallback = useCallbackRef(callback);
-	const debounceTimerRef = React$29.useRef(0);
-	React$29.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	const setValue = React$29.useCallback((...args) => {
+	const debounceTimerRef = React$36.useRef(0);
+	React$36.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+	const setValue = React$36.useCallback((...args) => {
 		window.clearTimeout(debounceTimerRef.current);
 		debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
 	}, [handleCallback, delay]);
@@ -4017,7 +4025,7 @@ function useDebouncedCallback(callback, delay) {
 
 //#endregion
 //#region src/data-grid/data-grid-search.tsx
-const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
+const DataGridSearch = React$35.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;
@@ -4031,13 +4039,13 @@ const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
 	return true;
 });
 function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
-	const inputRef = React$28.useRef(null);
-	React$28.useEffect(() => {
+	const inputRef = React$35.useRef(null);
+	React$35.useEffect(() => {
 		if (searchOpen) requestAnimationFrame(() => {
 			inputRef.current?.focus();
 		});
 	}, [searchOpen]);
-	React$28.useEffect(() => {
+	React$35.useEffect(() => {
 		if (!searchOpen) return;
 		function onEscape(event) {
 			if (event.key === "Escape") {
@@ -4048,7 +4056,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 		document.addEventListener("keydown", onEscape);
 		return () => document.removeEventListener("keydown", onEscape);
 	}, [searchOpen, onSearchOpenChange]);
-	const onKeyDown = React$28.useCallback((event) => {
+	const onKeyDown = React$35.useCallback((event) => {
 		event.stopPropagation();
 		if (event.key === "Enter") {
 			event.preventDefault();
@@ -4059,20 +4067,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 	const debouncedSearch = useDebouncedCallback((query) => {
 		onSearch(query);
 	}, 150);
-	const onChange = React$28.useCallback((event) => {
+	const onChange = React$35.useCallback((event) => {
 		const value = event.target.value;
 		onSearchQueryChange(value);
 		debouncedSearch(value);
 	}, [onSearchQueryChange, debouncedSearch]);
-	const onTriggerPointerDown = React$28.useCallback((event) => {
+	const onTriggerPointerDown = React$35.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$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onNextMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onClose = React$28.useCallback(() => {
+	const onPrevMatchPointerDown = React$35.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onNextMatchPointerDown = React$35.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onClose = React$35.useCallback(() => {
 		onSearchOpenChange(false);
 	}, [onSearchOpenChange]);
 	if (!searchOpen) return null;
@@ -4153,15 +4161,15 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 	const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
 	const pinningState = table.getState().columnPinning;
 	const columnPinningKey = `${(pinningState.left ?? []).join(",")}|${(pinningState.right ?? []).join(",")}`;
-	const prevVisibleColumnIdsRef = React$27.useRef(visibleColumnIds);
+	const prevVisibleColumnIdsRef = React$34.useRef(visibleColumnIds);
 	if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
 		rowMapRef.current.clear();
 		prevVisibleColumnIdsRef.current = visibleColumnIds;
 	}
-	const onGridContextMenu = React$27.useCallback((event) => {
+	const onGridContextMenu = React$34.useCallback((event) => {
 		event.preventDefault();
 	}, []);
-	const onAddRowKeyDown = React$27.useCallback(async (event) => {
+	const onAddRowKeyDown = React$34.useCallback(async (event) => {
 		if (!onRowAdd) return;
 		if (event.key === "Enter" || event.key === "") {
 			event.preventDefault();
@@ -4218,7 +4226,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 									"aria-sort": currentSort?.desc === false ? "ascending" : currentSort?.desc === true ? "descending" : isSortable ? "none" : void 0,
 									"data-slot": "grid-header-cell",
 									tabIndex: -1,
-									className: cn("relative", { "border-r": header.column.id !== "select" }),
+									className: cn("relative shrink-0", { "border-r": header.column.id !== "select" }),
 									style: {
 										...getCommonPinningStyles({ column: header.column }),
 										width: `calc(var(--header-${header.id}-size) * 1px)`
@@ -4248,7 +4256,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 									transform: `translateY(${virtualItem.start}px)`
 								},
 								children: table.getVisibleLeafColumns().map((col) => /* @__PURE__ */ jsx("div", {
-									className: "px-3",
+									className: "shrink-0 px-3",
 									style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
 									children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
 								}, col.id))
@@ -4313,17 +4321,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$26.useState(cellValueAsBoolean);
-	const containerRef = React$26.useRef(null);
+	const [value, setValue] = React$33.useState(cellValueAsBoolean);
+	const containerRef = React$33.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
-	const editableResolver = React$26.useMemo(() => {
+	const editableResolver = React$33.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$26.useCallback((checked) => {
+	const onCheckedChange = React$33.useCallback((checked) => {
 		setValue(checked);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -4335,7 +4343,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		rowIndex,
 		columnId
 	]);
-	const onWrapperKeyDown = React$26.useCallback((event) => {
+	const onWrapperKeyDown = React$33.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused && (event.key === "" || event.key === "Enter")) {
 			event.preventDefault();
@@ -4348,17 +4356,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	React$26.useEffect(() => {
+	React$33.useEffect(() => {
 		setValue(cellValueAsBoolean);
 	}, [cellValueAsBoolean]);
-	React$26.useEffect(() => {
+	React$33.useEffect(() => {
 		if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
 		meta?.searchOpen,
 		meta?.isScrolling
 	]);
-	const onWrapperClick = React$26.useCallback((event) => {
+	const onWrapperClick = React$33.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused) {
 			event.preventDefault();
@@ -4371,13 +4379,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	const onCheckboxClick = React$26.useCallback((event) => {
+	const onCheckboxClick = React$33.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxMouseDown = React$26.useCallback((event) => {
+	const onCheckboxMouseDown = React$33.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxDoubleClick = React$26.useCallback((event) => {
+	const onCheckboxDoubleClick = React$33.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
 	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
@@ -4432,20 +4440,20 @@ function formatDateToISOString(date) {
 }
 function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	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 [value, setValue] = React$32.useState(parseToLocalDate(initialValue));
+	const [open, setOpen] = React$32.useState(false);
+	const containerRef = React$32.useRef(null);
+	const hasStoppedRef = React$32.useRef(false);
 	const meta = table.options.meta;
-	const prevInitialValueRef = React$25.useRef(initialValue);
+	const prevInitialValueRef = React$32.useRef(initialValue);
 	if (initialValue !== prevInitialValueRef.current) {
 		prevInitialValueRef.current = initialValue;
 		setValue(parseToLocalDate(initialValue));
 	}
-	React$25.useEffect(() => {
+	React$32.useEffect(() => {
 		if (isEditing) hasStoppedRef.current = false;
 	}, [isEditing]);
-	const onDateSelect = React$25.useCallback((date) => {
+	const onDateSelect = React$32.useCallback((date) => {
 		if (!date) return;
 		setValue(date);
 		meta?.onDataUpdate?.({
@@ -4461,14 +4469,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$25.useCallback((isOpen) => {
+	const onOpenChange = React$32.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen && isEditing && !hasStoppedRef.current) {
 			hasStoppedRef.current = true;
 			meta?.onCellEditingStop?.();
 		}
 	}, [isEditing, meta]);
-	const onWrapperKeyDown = React$25.useCallback((event) => {
+	const onWrapperKeyDown = React$32.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -4488,10 +4496,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		initialValue,
 		meta
 	]);
-	React$25.useEffect(() => {
+	React$32.useEffect(() => {
 		setOpen(isEditing);
 	}, [isEditing]);
-	React$25.useEffect(() => {
+	React$32.useEffect(() => {
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
@@ -4543,7 +4551,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$24.useRef(null);
+	const containerRef = React$31.useRef(null);
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
 	const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
@@ -4582,19 +4590,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$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 [value, setValue] = React$30.useState(initialValue ?? "");
+	const [open, setOpen] = React$30.useState(false);
+	const textareaRef = React$30.useRef(null);
+	const containerRef = React$30.useRef(null);
+	const hasSubmittedRef = React$30.useRef(false);
 	const meta = table.options.meta;
 	const sideOffset = -(containerRef.current?.clientHeight ?? 0);
-	const prevInitialValueRef = React$23.useRef(initialValue);
+	const prevInitialValueRef = React$30.useRef(initialValue);
 	if (initialValue !== prevInitialValueRef.current) {
 		prevInitialValueRef.current = initialValue;
 		setValue(initialValue ?? "");
 	}
-	React$23.useEffect(() => {
+	React$30.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
 	const debouncedSave = useDebouncedCallback((newValue) => {
@@ -4604,7 +4612,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 			value: newValue
 		});
 	}, 300);
-	const onSave = React$23.useCallback(() => {
+	const onSave = React$30.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		if (value !== initialValue) meta?.onDataUpdate?.({
@@ -4621,7 +4629,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onCancel = React$23.useCallback(() => {
+	const onCancel = React$30.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		setValue(initialValue ?? "");
@@ -4638,12 +4646,12 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onChange = React$23.useCallback((event) => {
+	const onChange = React$30.useCallback((event) => {
 		const newValue = event.target.value;
 		setValue(newValue);
 		debouncedSave(newValue);
 	}, [debouncedSave]);
-	const onOpenChange = React$23.useCallback((isOpen) => {
+	const onOpenChange = React$30.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen && !hasSubmittedRef.current) {
 			hasSubmittedRef.current = true;
@@ -4661,7 +4669,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onOpenAutoFocus = React$23.useCallback((event) => {
+	const onOpenAutoFocus = React$30.useCallback((event) => {
 		event.preventDefault();
 		if (textareaRef.current) {
 			textareaRef.current.focus();
@@ -4669,7 +4677,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 			textareaRef.current.setSelectionRange(length, length);
 		}
 	}, []);
-	const onWrapperKeyDown = React$23.useCallback((event) => {
+	const onWrapperKeyDown = React$30.useCallback((event) => {
 		if (isEditing && !open) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -4695,7 +4703,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onTextareaKeyDown = React$23.useCallback((event) => {
+	const onTextareaKeyDown = React$30.useCallback((event) => {
 		if (event.key === "Escape") {
 			event.preventDefault();
 			onCancel();
@@ -4705,7 +4713,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		}
 		event.stopPropagation();
 	}, [onCancel, onSave]);
-	const onTextareaBlur = React$23.useCallback(() => {
+	const onTextareaBlur = React$30.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		if (value !== initialValue) meta?.onDataUpdate?.({
@@ -4722,7 +4730,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	React$23.useEffect(() => {
+	React$30.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -4775,26 +4783,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$22.useMemo(() => cell.getValue() ?? [], [cell]);
+	const cellValue = React$29.useMemo(() => cell.getValue() ?? [], [cell]);
 	const cellId = `${rowIndex}-${columnId}`;
-	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 prevCellIdRef = React$29.useRef(cellId);
+	const [selectedValues, setSelectedValues] = React$29.useState(cellValue);
+	const [open, setOpen] = React$29.useState(false);
+	const [searchValue, setSearchValue] = React$29.useState("");
+	const containerRef = React$29.useRef(null);
+	const inputRef = React$29.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$22.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
-	const getLabel = React$22.useCallback((val) => {
+	const arrayOptionsLabelMap = React$29.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
+	const getLabel = React$29.useCallback((val) => {
 		if (optionsMap) return optionsMap.get(val) ?? val;
 		if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(val) ?? val;
 		return val;
 	}, [optionsMap, arrayOptionsLabelMap]);
-	const options = React$22.useMemo(() => {
+	const options = React$29.useMemo(() => {
 		if (!isEditing) return [];
 		if (arrayOptions) return arrayOptions;
 		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
@@ -4813,10 +4821,10 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		setOpen(false);
 		setSearchValue("");
 	}
-	React$22.useEffect(() => {
+	React$29.useEffect(() => {
 		setSelectedValues(cellValue);
 	}, [cellValue]);
-	const onValueChange = React$22.useCallback((value) => {
+	const onValueChange = React$29.useCallback((value) => {
 		const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
 		setSelectedValues(newValues);
 		meta?.onDataUpdate?.({
@@ -4832,7 +4840,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const removeValue = React$22.useCallback((valueToRemove, event) => {
+	const removeValue = React$29.useCallback((valueToRemove, event) => {
 		event?.stopPropagation();
 		event?.preventDefault();
 		const newValues = selectedValues.filter((v) => v !== valueToRemove);
@@ -4849,7 +4857,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const clearAll = React$22.useCallback(() => {
+	const clearAll = React$29.useCallback(() => {
 		setSelectedValues([]);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -4862,18 +4870,18 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$22.useCallback((isOpen) => {
+	const onOpenChange = React$29.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) {
 			setSearchValue("");
 			meta?.onCellEditingStop?.();
 		}
 	}, [meta]);
-	const onOpenAutoFocus = React$22.useCallback((event) => {
+	const onOpenAutoFocus = React$29.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$22.useCallback((event) => {
+	const onWrapperKeyDown = React$29.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -4893,7 +4901,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		cellValue,
 		meta
 	]);
-	const onInputKeyDown = React$22.useCallback((event) => {
+	const onInputKeyDown = React$29.useCallback((event) => {
 		if (event.key === "Backspace" && searchValue === "" && selectedValues.length > 0) {
 			event.preventDefault();
 			const lastValue = selectedValues.at(-1);
@@ -4905,7 +4913,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		selectedValues,
 		removeValue
 	]);
-	React$22.useEffect(() => {
+	React$29.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -4915,7 +4923,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		meta?.searchOpen,
 		meta?.isScrolling
 	]);
-	React$22.useEffect(() => {
+	React$29.useEffect(() => {
 		if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 0);
 	}, [open]);
 	const displayLabels = selectedValues.map(getLabel).filter(Boolean);
@@ -5016,19 +5024,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$21.useRef(null);
-	const containerRef = React$21.useRef(null);
+	const inputRef = React$28.useRef(null);
+	const containerRef = React$28.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
 	const cellOptions = colMeta?.cell;
-	const editableResolver = React$21.useMemo(() => {
+	const editableResolver = React$28.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$21.useMemo(() => {
+	const resolvedPrefix = React$28.useMemo(() => {
 		if (typeof prefix === "function") return prefix(cell.row.original, initialValue);
 		return prefix ?? null;
 	}, [
@@ -5036,7 +5044,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		cell.row.original,
 		initialValue
 	]);
-	const resolvedSuffix = React$21.useMemo(() => {
+	const resolvedSuffix = React$28.useMemo(() => {
 		if (typeof suffix === "function") return suffix(cell.row.original, initialValue);
 		return suffix ?? null;
 	}, [
@@ -5044,12 +5052,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		cell.row.original,
 		initialValue
 	]);
-	const [editValue, setEditValue] = React$21.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
-	const hasSubmittedRef = React$21.useRef(false);
-	React$21.useEffect(() => {
+	const [editValue, setEditValue] = React$28.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
+	const hasSubmittedRef = React$28.useRef(false);
+	React$28.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
-	const onBlur = React$21.useCallback(() => {
+	const onBlur = React$28.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		const numValue = editValue === "" ? null : Number(editValue);
 		if (numValue !== initialValue) meta?.onDataUpdate?.({
@@ -5065,13 +5073,13 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		editValue
 	]);
-	const onChange = React$21.useCallback((event) => {
+	const onChange = React$28.useCallback((event) => {
 		setEditValue(event.target.value);
 	}, []);
-	const parseNumValue = React$21.useCallback(() => {
+	const parseNumValue = React$28.useCallback(() => {
 		return editValue === "" ? null : Number(editValue);
 	}, [editValue]);
-	const saveAndStop = React$21.useCallback((options) => {
+	const saveAndStop = React$28.useCallback((options) => {
 		hasSubmittedRef.current = true;
 		const numValue = parseNumValue();
 		meta?.onDataUpdate?.({
@@ -5086,7 +5094,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		rowIndex,
 		columnId
 	]);
-	const handleEditingKeyDown = React$21.useCallback((event) => {
+	const handleEditingKeyDown = React$28.useCallback((event) => {
 		if (event.key === "Enter") {
 			event.preventDefault();
 			saveAndStop({ moveToNextRow: true });
@@ -5105,12 +5113,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		meta
 	]);
-	const handleFocusedKeyDown = React$21.useCallback((event) => {
+	const handleFocusedKeyDown = React$28.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$21.useCallback((event) => {
+	const onWrapperKeyDown = React$28.useCallback((event) => {
 		if (isEditing) handleEditingKeyDown(event);
 		else if (isFocused) handleFocusedKeyDown(event);
 	}, [
@@ -5119,10 +5127,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		handleEditingKeyDown,
 		handleFocusedKeyDown
 	]);
-	React$21.useEffect(() => {
+	React$28.useEffect(() => {
 		setEditValue(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
 	}, [initialValue]);
-	React$21.useEffect(() => {
+	React$28.useEffect(() => {
 		if (isEditing && inputRef.current) {
 			inputRef.current.focus();
 			inputRef.current.select();
@@ -5169,7 +5177,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$20.useRef(null);
+	const containerRef = React$27.useRef(null);
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const renderFn = cellOpts?.variant === "react-node" ? cellOpts.render : void 0;
 	const children = renderFn ? renderFn({
@@ -5199,17 +5207,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$19.useState(initialValue);
-	const [open, setOpen] = React$19.useState(false);
-	const containerRef = React$19.useRef(null);
-	const inputRef = React$19.useRef(null);
+	const [value, setValue] = React$26.useState(initialValue);
+	const [open, setOpen] = React$26.useState(false);
+	const containerRef = React$26.useRef(null);
+	const inputRef = React$26.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$19.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
-	const displayLabel = React$19.useMemo(() => {
+	const arrayOptionsLabelMap = React$26.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
+	const displayLabel = React$26.useMemo(() => {
 		if (optionsMap) {
 			const data = optionsMap.get(value ?? "");
 			if (optionsRenderer) return optionsRenderer(data, "cell");
@@ -5223,7 +5231,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		arrayOptionsLabelMap,
 		optionsRenderer
 	]);
-	const options = React$19.useMemo(() => {
+	const options = React$26.useMemo(() => {
 		if (!isEditing) return [];
 		if (arrayOptions) return arrayOptions.map((opt) => ({
 			value: opt.value,
@@ -5239,7 +5247,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		arrayOptions,
 		optionsMap
 	]);
-	const onValueChange = React$19.useCallback((newValue) => {
+	const onValueChange = React$26.useCallback((newValue) => {
 		setValue(newValue);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -5252,15 +5260,15 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$19.useCallback((isOpen) => {
+	const onOpenChange = React$26.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) meta?.onCellEditingStop?.();
 	}, [meta]);
-	const onOpenAutoFocus = React$19.useCallback((event) => {
+	const onOpenAutoFocus = React$26.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$19.useCallback((event) => {
+	const onWrapperKeyDown = React$26.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -5278,10 +5286,10 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		meta
 	]);
-	React$19.useEffect(() => {
+	React$26.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$19.useEffect(() => {
+	React$26.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -5366,22 +5374,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$18.useState(initialValue);
-	const inputRef = React$18.useRef(null);
-	const containerRef = React$18.useRef(null);
-	const hasSubmittedRef = React$18.useRef(false);
+	const [value, setValue] = React$25.useState(initialValue);
+	const inputRef = React$25.useRef(null);
+	const containerRef = React$25.useRef(null);
+	const hasSubmittedRef = React$25.useRef(false);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
-	const editableResolver = React$18.useMemo(() => {
+	const editableResolver = React$25.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$18.useEffect(() => {
+	React$25.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
-	const onBlur = React$18.useCallback(() => {
+	const onBlur = React$25.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		const currentValue = inputRef.current?.value ?? "";
 		const normalizedInitial = initialValue ?? "";
@@ -5397,10 +5405,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		columnId,
 		initialValue
 	]);
-	const onChange = React$18.useCallback((event) => {
+	const onChange = React$25.useCallback((event) => {
 		setValue(event.target.value);
 	}, []);
-	const handleEditingKeyDown = React$18.useCallback((event) => {
+	const handleEditingKeyDown = React$25.useCallback((event) => {
 		if (event.key === "Enter") {
 			event.preventDefault();
 			hasSubmittedRef.current = true;
@@ -5434,13 +5442,13 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		rowIndex,
 		columnId
 	]);
-	const handleFocusedKeyDown = React$18.useCallback((event) => {
+	const handleFocusedKeyDown = React$25.useCallback((event) => {
 		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
 			if (!isEditable) return;
 			setValue(event.key);
 		}
 	}, [isEditable]);
-	const onWrapperKeyDown = React$18.useCallback((event) => {
+	const onWrapperKeyDown = React$25.useCallback((event) => {
 		if (isEditing) handleEditingKeyDown(event);
 		else if (isFocused) handleFocusedKeyDown(event);
 	}, [
@@ -5449,10 +5457,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		handleEditingKeyDown,
 		handleFocusedKeyDown
 	]);
-	React$18.useEffect(() => {
+	React$25.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$18.useEffect(() => {
+	React$25.useEffect(() => {
 		if (isEditing && inputRef.current) {
 			inputRef.current.focus();
 			inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
@@ -5608,7 +5616,7 @@ function DataGridCell({ cell, table }) {
 
 //#endregion
 //#region src/separator/separator.tsx
-const Separator = React$17.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+const Separator = React$24.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
 	ref,
 	decorative,
 	orientation,
@@ -5620,22 +5628,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$16.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
-	const [order, setOrder] = React$16.useState(() => {
+	const viewableColumns = React$23.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
+	const [order, setOrder] = React$23.useState(() => {
 		const stateOrder = table.getState().columnOrder ?? [];
 		if (stateOrder && stateOrder.length > 0) return stateOrder;
 		return table.getAllColumns().map((c) => c.id);
 	});
-	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);
+	const [searchQuery, setSearchQuery] = React$23.useState("");
+	const [isDragging, setIsDragging] = React$23.useState(false);
+	const [insertionIndex, setInsertionIndex] = React$23.useState(null);
+	const [isCreating, setIsCreating] = React$23.useState(false);
+	const [newViewName, setNewViewName] = React$23.useState("");
+	const [newViewGlobal, setNewViewGlobal] = React$23.useState(false);
+	const [renamingViewId, setRenamingViewId] = React$23.useState(null);
+	const [renameValue, setRenameValue] = React$23.useState("");
+	const [deletingViewId, setDeletingViewId] = React$23.useState(null);
+	const [updatingViewId, setUpdatingViewId] = React$23.useState(null);
 	function resetAllStates() {
 		setIsCreating(false);
 		setNewViewName("");
@@ -5646,7 +5654,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		setSearchQuery("");
 	}
 	const tableColumnOrder = table.getState().columnOrder;
-	React$16.useEffect(() => {
+	React$23.useEffect(() => {
 		const stateOrder = tableColumnOrder ?? [];
 		if (stateOrder && stateOrder.length > 0) {
 			setOrder(stateOrder);
@@ -5654,8 +5662,8 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		}
 		setOrder(table.getAllColumns().map((c) => c.id));
 	}, [table, tableColumnOrder]);
-	const visibleSet = React$16.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
-	const orderedColumns = React$16.useMemo(() => {
+	const visibleSet = React$23.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
+	const orderedColumns = React$23.useMemo(() => {
 		const ordered = [];
 		for (const id of order) {
 			const col = viewableColumns.find((c) => c.id === id);
@@ -5668,12 +5676,12 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		viewableColumns,
 		table
 	]);
-	const draggingRef = React$16.useRef(null);
-	const groupRef = React$16.useRef(null);
-	const getBaseOrder = React$16.useCallback(() => {
+	const draggingRef = React$23.useRef(null);
+	const groupRef = React$23.useRef(null);
+	const getBaseOrder = React$23.useCallback(() => {
 		return table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
 	}, [table]);
-	const computeInsertionIndex = React$16.useCallback((clientY) => {
+	const computeInsertionIndex = React$23.useCallback((clientY) => {
 		const baseOrder = getBaseOrder();
 		const el = groupRef.current;
 		if (!el) return baseOrder.length;
@@ -5695,7 +5703,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		setIsDragging(false);
 		setInsertionIndex(null);
 	}
-	const doDrop = React$16.useCallback((dragId, toIndex) => {
+	const doDrop = React$23.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) {
@@ -5712,7 +5720,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		setOrder(copy.filter((id) => visibleSet.has(id)));
 		onDragEnd();
 	}, [table, visibleSet]);
-	const startPointerDrag = React$16.useCallback((e, id) => {
+	const startPointerDrag = React$23.useCallback((e, id) => {
 		e.preventDefault();
 		draggingRef.current = id;
 		setIsDragging(true);
@@ -5745,7 +5753,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 		if (fromIndex < targetIndex) insertAt = targetIndex - 1;
 		return insertAt === fromIndex;
 	}
-	const dragFromHandle = React$16.useRef(false);
+	const dragFromHandle = React$23.useRef(false);
 	function resetTableView() {
 		const defaultOrder = table.getAllColumns().map((c) => c.id);
 		try {
@@ -5768,7 +5776,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
 			} catch (_) {}
 		}
 	}
-	const sortedViews = React$16.useMemo(() => {
+	const sortedViews = React$23.useMemo(() => {
 		if (!savedViews || savedViews.length === 0) return savedViews;
 		return [...savedViews].sort((a, b) => {
 			if (a.isGlobal !== b.isGlobal) return a.isGlobal ? -1 : 1;
@@ -6084,7 +6092,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$16.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
+							return /* @__PURE__ */ jsxs(React$23.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"),
@@ -6206,33 +6214,33 @@ 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$15.useLayoutEffect : React$15.useEffect;
-function useLazyRef(fn) {
-	const ref = React$15.useRef(null);
+const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React$22.useLayoutEffect : React$22.useEffect;
+function useLazyRef$1(fn) {
+	const ref = React$22.useRef(null);
 	if (ref.current === null) ref.current = fn();
 	return ref;
 }
-function useAsRef(data) {
-	const ref = React$15.useRef(data);
-	useIsomorphicLayoutEffect(() => {
+function useAsRef$1(data) {
+	const ref = React$22.useRef(data);
+	useIsomorphicLayoutEffect$1(() => {
 		ref.current = data;
 	});
 	return ref;
 }
-function useStore(store, selector) {
-	const getSnapshot = React$15.useCallback(() => selector(store.getState()), [store, selector]);
-	return React$15.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+function useStore$1(store, selector) {
+	const getSnapshot = React$22.useCallback(() => selector(store.getState()), [store, selector]);
+	return React$22.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$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(() => {
+	const dataGridRef = React$22.useRef(null);
+	const tableRef = React$22.useRef(null);
+	const rowVirtualizerRef = React$22.useRef(null);
+	const headerRef = React$22.useRef(null);
+	const rowMapRef = React$22.useRef(new Map());
+	const footerRef = React$22.useRef(null);
+	const dataGridPropsRef = useAsRef$1(dataGridProps);
+	const listenersRef = useLazyRef$1(() => new Set());
+	const stateRef = useLazyRef$1(() => {
 		return {
 			sorting: initialState?.sorting ?? [],
 			rowHeight: rowHeightProp,
@@ -6257,7 +6265,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isScrolling: false
 		};
 	});
-	const store = React$15.useMemo(() => {
+	const store = React$22.useMemo(() => {
 		let isBatching = false;
 		let pendingNotification = false;
 		return {
@@ -6301,43 +6309,43 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			}
 		};
 	}, [listenersRef, stateRef]);
-	React$15.useEffect(() => {
+	React$22.useEffect(() => {
 		store.setState("rowHeight", rowHeightProp);
 	}, [rowHeightProp, store]);
-	const focusedCell = useStore(store, (state) => state.focusedCell);
-	const editingCell = useStore(store, (state) => state.editingCell);
-	const selectionState = useStore(store, (state) => state.selectionState);
-	const searchQuery = useStore(store, (state) => state.searchQuery);
-	const searchMatches = useStore(store, (state) => state.searchMatches);
-	const matchIndex = useStore(store, (state) => state.matchIndex);
-	const searchOpen = useStore(store, (state) => state.searchOpen);
-	const sorting = useStore(store, (state) => state.sorting);
-	const rowSelection = useStore(store, (state) => state.rowSelection);
-	const contextMenu = useStore(store, (state) => state.contextMenu);
-	const rowHeight = useStore(store, (state) => state.rowHeight);
-	const isScrolling = useStore(store, (state) => state.isScrolling);
+	const focusedCell = useStore$1(store, (state) => state.focusedCell);
+	const editingCell = useStore$1(store, (state) => state.editingCell);
+	const selectionState = useStore$1(store, (state) => state.selectionState);
+	const searchQuery = useStore$1(store, (state) => state.searchQuery);
+	const searchMatches = useStore$1(store, (state) => state.searchMatches);
+	const matchIndex = useStore$1(store, (state) => state.matchIndex);
+	const searchOpen = useStore$1(store, (state) => state.searchOpen);
+	const sorting = useStore$1(store, (state) => state.sorting);
+	const rowSelection = useStore$1(store, (state) => state.rowSelection);
+	const contextMenu = useStore$1(store, (state) => state.contextMenu);
+	const rowHeight = useStore$1(store, (state) => state.rowHeight);
+	const isScrolling = useStore$1(store, (state) => state.isScrolling);
 	const rowHeightValue = getRowHeightValue(rowHeight);
-	const columnIds = React$15.useMemo(() => {
+	const columnIds = React$22.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$15.useRef(0);
-	const prevColumnsRef = React$15.useRef(columns);
+	const columnDefsVersionRef = React$22.useRef(0);
+	const prevColumnsRef = React$22.useRef(columns);
 	if (prevColumnsRef.current !== columns) {
 		prevColumnsRef.current = columns;
 		columnDefsVersionRef.current += 1;
 	}
 	const columnDefsVersion = columnDefsVersionRef.current;
-	const storageKey = React$15.useMemo(() => {
+	const storageKey = React$22.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$15.useMemo(() => {
+	const persistedState = React$22.useMemo(() => {
 		if (!storageKey) return void 0;
 		try {
 			const raw = localStorage.getItem(storageKey);
@@ -6348,7 +6356,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			return void 0;
 		}
 	}, [storageKey]);
-	const mergedInitialState = React$15.useMemo(() => {
+	const mergedInitialState = React$22.useMemo(() => {
 		const base = { ...initialState ?? {} };
 		if (persistedState) try {
 			if (persistedState.columnOrder) base.columnOrder = persistedState.columnOrder;
@@ -6357,12 +6365,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		} catch (_) {}
 		return base;
 	}, [initialState, persistedState]);
-	const getNavigableColumnIds = React$15.useCallback(() => {
+	const getNavigableColumnIds = React$22.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$15.useCallback((updates) => {
+	const onDataUpdate = React$22.useCallback((updates) => {
 		const updateArray = Array.isArray(updates) ? updates : [updates];
 		if (updateArray.length === 0) return;
 		const currentTable = tableRef.current;
@@ -6410,10 +6418,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		onDataChange?.(newData);
 	}, [data, onDataChange]);
-	const getIsCellSelected = React$15.useCallback((rowIndex, columnId) => {
+	const getIsCellSelected = React$22.useCallback((rowIndex, columnId) => {
 		return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
 	}, [selectionState.selectedCells]);
-	const clearSelection = React$15.useCallback(() => {
+	const clearSelection = React$22.useCallback(() => {
 		store.batch(() => {
 			store.setState("selectionState", {
 				selectedCells: new Set(),
@@ -6423,7 +6431,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("rowSelection", {});
 		});
 	}, [store]);
-	const selectAll = React$15.useCallback(() => {
+	const selectAll = React$22.useCallback(() => {
 		const allCells = new Set();
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows ?? [];
@@ -6450,7 +6458,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		data.length,
 		store
 	]);
-	const selectColumn = React$15.useCallback((columnId) => {
+	const selectColumn = React$22.useCallback((columnId) => {
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows ?? [];
 		const rowCount = rows.length ?? data.length;
@@ -6472,7 +6480,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isSelecting: false
 		});
 	}, [data.length, store]);
-	const selectRange = React$15.useCallback((start, end, isSelecting = false) => {
+	const selectRange = React$22.useCallback((start, end, isSelecting = false) => {
 		const visibleCols = getNavigableColumnIds();
 		const startColIndex = visibleCols.indexOf(start.columnId);
 		const endColIndex = visibleCols.indexOf(end.columnId);
@@ -6494,7 +6502,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isSelecting
 		});
 	}, [getNavigableColumnIds, store]);
-	const focusCell = React$15.useCallback((rowIndex, columnId) => {
+	const focusCell = React$22.useCallback((rowIndex, columnId) => {
 		store.batch(() => {
 			store.setState("focusedCell", {
 				rowIndex,
@@ -6510,7 +6518,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$15.useCallback(async (rowIndices) => {
+	const onRowsDelete = React$22.useCallback(async (rowIndices) => {
 		if (!onRowsDeleteProp || rowIndices.length === 0) return;
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows;
@@ -6562,7 +6570,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 	const debouncedRowClick = useDebouncedCallback((rowIndex) => {
 		onRowClickProp?.(rowIndex);
 	}, 300);
-	const navigateCell = React$15.useCallback((direction) => {
+	const navigateCell = React$22.useCallback((direction) => {
 		const currentState = store.getState();
 		if (!currentState.focusedCell) return;
 		const { rowIndex, columnId } = currentState.focusedCell;
@@ -6692,7 +6700,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		onRowClickProp,
 		debouncedRowClick
 	]);
-	const onCellEditingStart = React$15.useCallback((rowIndex, columnId) => {
+	const onCellEditingStart = React$22.useCallback((rowIndex, columnId) => {
 		const col = tableRef.current?.getColumn(columnId);
 		const editable = col?.columnDef?.meta?.editable;
 		if (editable === false) return;
@@ -6711,7 +6719,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		});
 	}, [store]);
-	const onCellEditingStop = React$15.useCallback((opts) => {
+	const onCellEditingStop = React$22.useCallback((opts) => {
 		const currentState = store.getState();
 		const currentEditing = currentState.editingCell;
 		store.setState("editingCell", null);
@@ -6737,7 +6745,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		focusCell,
 		navigateCell
 	]);
-	const onSearchOpenChange = React$15.useCallback((open) => {
+	const onSearchOpenChange = React$22.useCallback((open) => {
 		if (open) {
 			store.setState("searchOpen", true);
 			return;
@@ -6756,7 +6764,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
 	}, [store]);
-	const onSearch = React$15.useCallback((query) => {
+	const onSearch = React$22.useCallback((query) => {
 		if (!query.trim()) {
 			store.batch(() => {
 				store.setState("searchMatches", []);
@@ -6791,8 +6799,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, { align: "center" });
 		}
 	}, [columnIds, store]);
-	const onSearchQueryChange = React$15.useCallback((query) => store.setState("searchQuery", query), [store]);
-	const onNavigateToPrevMatch = React$15.useCallback(() => {
+	const onSearchQueryChange = React$22.useCallback((query) => store.setState("searchQuery", query), [store]);
+	const onNavigateToPrevMatch = React$22.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.searchMatches.length === 0) return;
 		const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
@@ -6807,7 +6815,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store, focusCell]);
-	const onNavigateToNextMatch = React$15.useCallback(() => {
+	const onNavigateToNextMatch = React$22.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.searchMatches.length === 0) return;
 		const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
@@ -6822,15 +6830,15 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store, focusCell]);
-	const getIsSearchMatch = React$15.useCallback((rowIndex, columnId) => {
+	const getIsSearchMatch = React$22.useCallback((rowIndex, columnId) => {
 		return searchMatches.some((match) => match.rowIndex === rowIndex && match.columnId === columnId);
 	}, [searchMatches]);
-	const getIsActiveSearchMatch = React$15.useCallback((rowIndex, columnId) => {
+	const getIsActiveSearchMatch = React$22.useCallback((rowIndex, columnId) => {
 		if (matchIndex < 0) return false;
 		const currentMatch = searchMatches[matchIndex];
 		return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
 	}, [searchMatches, matchIndex]);
-	const blurCell = React$15.useCallback(() => {
+	const blurCell = React$22.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.editingCell && document.activeElement instanceof HTMLElement) document.activeElement.blur();
 		store.batch(() => {
@@ -6838,7 +6846,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("editingCell", null);
 		});
 	}, [store]);
-	const onCellClick = React$15.useCallback((rowIndex, columnId, event) => {
+	const onCellClick = React$22.useCallback((rowIndex, columnId, event) => {
 		if (event?.button === 2) return;
 		const currentState = store.getState();
 		const currentFocused = currentState.focusedCell;
@@ -6886,11 +6894,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectRange,
 		clearSelection
 	]);
-	const onCellDoubleClick = React$15.useCallback((rowIndex, columnId, event) => {
+	const onCellDoubleClick = React$22.useCallback((rowIndex, columnId, event) => {
 		if (event?.defaultPrevented) return;
 		onCellEditingStart(rowIndex, columnId);
 	}, [onCellEditingStart]);
-	const onCellMouseDown = React$15.useCallback((rowIndex, columnId, event) => {
+	const onCellMouseDown = React$22.useCallback((rowIndex, columnId, event) => {
 		if (event.button === 2) return;
 		event.preventDefault();
 		if (!event.ctrlKey && !event.metaKey && !event.shiftKey) store.batch(() => {
@@ -6911,7 +6919,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("rowSelection", {});
 		});
 	}, [store]);
-	const onCellMouseEnter = React$15.useCallback((rowIndex, columnId, _event) => {
+	const onCellMouseEnter = React$22.useCallback((rowIndex, columnId, _event) => {
 		const currentState = store.getState();
 		if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
 			const start = currentState.selectionState.selectionRange.start;
@@ -6927,14 +6935,14 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectRange,
 		focusCell
 	]);
-	const onCellMouseUp = React$15.useCallback(() => {
+	const onCellMouseUp = React$22.useCallback(() => {
 		const currentState = store.getState();
 		store.setState("selectionState", {
 			...currentState.selectionState,
 			isSelecting: false
 		});
 	}, [store]);
-	const onCellContextMenu = React$15.useCallback((rowIndex, columnId, event) => {
+	const onCellContextMenu = React$22.useCallback((rowIndex, columnId, event) => {
 		event.preventDefault();
 		event.stopPropagation();
 		const currentState = store.getState();
@@ -6966,7 +6974,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			y: event.clientY
 		});
 	}, [store]);
-	const onContextMenuOpenChange = React$15.useCallback((open) => {
+	const onContextMenuOpenChange = React$22.useCallback((open) => {
 		if (!open) {
 			const currentMenu = store.getState().contextMenu;
 			store.setState("contextMenu", {
@@ -6976,7 +6984,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store]);
-	const onDataGridKeyDown = React$15.useCallback((event) => {
+	const onDataGridKeyDown = React$22.useCallback((event) => {
 		const currentState = store.getState();
 		const { key, ctrlKey, metaKey, shiftKey } = event;
 		const isCtrlPressed = ctrlKey || metaKey;
@@ -7135,7 +7143,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		enableSearch,
 		onCellEditingStart
 	]);
-	const onSortingChange = React$15.useCallback((updater) => {
+	const onSortingChange = React$22.useCallback((updater) => {
 		if (manualSorting && externalOnSortingChange) externalOnSortingChange(updater);
 		else {
 			const currentState = store.getState();
@@ -7147,7 +7155,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		manualSorting,
 		externalOnSortingChange
 	]);
-	const onRowSelectionChange = React$15.useCallback((updater) => {
+	const onRowSelectionChange = React$22.useCallback((updater) => {
 		const currentState = store.getState();
 		const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
 		const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
@@ -7169,7 +7177,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("editingCell", null);
 		});
 	}, [store, columnIds]);
-	const onRowSelect = React$15.useCallback((rowIndex, selected, shiftKey) => {
+	const onRowSelect = React$22.useCallback((rowIndex, selected, shiftKey) => {
 		const currentState = store.getState();
 		const rows = tableRef.current?.getRowModel().rows ?? [];
 		const currentRow = rows[rowIndex];
@@ -7189,12 +7197,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		store.setState("lastClickedRowIndex", rowIndex);
 	}, [store, onRowSelectionChange]);
-	const onRowHeightChange = React$15.useCallback((updater) => {
+	const onRowHeightChange = React$22.useCallback((updater) => {
 		const currentState = store.getState();
 		const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
 		store.setState("rowHeight", newRowHeight);
 	}, [store]);
-	const onColumnClick = React$15.useCallback((columnId) => {
+	const onColumnClick = React$22.useCallback((columnId) => {
 		if (!enableColumnSelection) {
 			clearSelection();
 			return;
@@ -7205,13 +7213,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectColumn,
 		clearSelection
 	]);
-	const defaultColumn = React$15.useMemo(() => ({
+	const defaultColumn = React$22.useMemo(() => ({
 		cell: DataGridCell,
 		minSize: MIN_COLUMN_SIZE,
 		maxSize: MAX_COLUMN_SIZE
 	}), []);
 	const effectiveSorting = manualSorting && externalSorting ? externalSorting : sorting;
-	const tableOptions = React$15.useMemo(() => ({
+	const tableOptions = React$22.useMemo(() => ({
 		...dataGridPropsRef.current,
 		data,
 		columns,
@@ -7303,7 +7311,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$15.useMemo(() => {
+	const columnSizeVars = React$22.useMemo(() => {
 		const headers = table.getFlatHeaders();
 		const colSizes = {};
 		for (const header of headers) {
@@ -7345,7 +7353,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		}
 	});
 	if (!rowVirtualizerRef.current) rowVirtualizerRef.current = rowVirtualizer;
-	const onScrollToRow = React$15.useCallback((opts) => {
+	const onScrollToRow = React$22.useCallback((opts) => {
 		const rowIndex = opts?.rowIndex ?? 0;
 		const columnId = opts?.columnId;
 		rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
@@ -7369,7 +7377,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		getNavigableColumnIds,
 		store
 	]);
-	const onRowAdd = React$15.useCallback(async (event) => {
+	const onRowAdd = React$22.useCallback(async (event) => {
 		if (!onRowAddProp) return;
 		const result = await onRowAddProp(event);
 		if (event?.defaultPrevented || result === null) return;
@@ -7385,7 +7393,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		}
 		onScrollToRow({ rowIndex: rows.length });
 	}, [onRowAddProp, onScrollToRow]);
-	useIsomorphicLayoutEffect(() => {
+	useIsomorphicLayoutEffect$1(() => {
 		if (!storageKey) return;
 		try {
 			const state = table.getState();
@@ -7402,7 +7410,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		table.getState().columnVisibility,
 		table.getState().columnPinning
 	]);
-	const searchState = React$15.useMemo(() => {
+	const searchState = React$22.useMemo(() => {
 		if (!enableSearch) return void 0;
 		return {
 			searchMatches,
@@ -7427,7 +7435,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		onNavigateToNextMatch,
 		onNavigateToPrevMatch
 	]);
-	React$15.useEffect(() => {
+	React$22.useEffect(() => {
 		const dataGridElement = dataGridRef.current;
 		if (!dataGridElement) return;
 		dataGridElement.addEventListener("keydown", onDataGridKeyDown);
@@ -7435,7 +7443,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
 		};
 	}, [onDataGridKeyDown]);
-	React$15.useEffect(() => {
+	React$22.useEffect(() => {
 		function onGlobalKeyDown(event) {
 			const dataGridElement = dataGridRef.current;
 			if (!dataGridElement) return;
@@ -7479,7 +7487,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		store,
 		clearSelection
 	]);
-	React$15.useEffect(() => {
+	React$22.useEffect(() => {
 		const currentState = store.getState();
 		if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
 			const _nav = getNavigableColumnIds();
@@ -7505,7 +7513,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		getNavigableColumnIds,
 		focusCell
 	]);
-	React$15.useEffect(() => {
+	React$22.useEffect(() => {
 		function onOutsideClick(event) {
 			if (event.button === 2) return;
 			if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
@@ -7527,7 +7535,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		blurCell,
 		clearSelection
 	]);
-	React$15.useEffect(() => {
+	React$22.useEffect(() => {
 		function onCleanup() {
 			document.removeEventListener("selectstart", preventSelection);
 			document.removeEventListener("contextmenu", preventContextMenu);
@@ -7552,7 +7560,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			onUnsubscribe();
 		};
 	}, [store]);
-	useIsomorphicLayoutEffect(() => {
+	useIsomorphicLayoutEffect$1(() => {
 		const rafId = requestAnimationFrame(() => {
 			rowVirtualizer.measure();
 		});
@@ -7587,7 +7595,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 //#endregion
 //#region src/date-picker/date-picker.tsx
 function DatePickerDemo() {
-	const [date, setDate] = React$14.useState();
+	const [date, setDate] = React$21.useState();
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(Button, {
@@ -7617,13 +7625,13 @@ Drawer.displayName = "Drawer";
 const DrawerTrigger = Drawer$1.Trigger;
 const DrawerPortal = Drawer$1.Portal;
 const DrawerClose = Drawer$1.Close;
-const DrawerOverlay = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
+const DrawerOverlay = React$20.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$13.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
+const DrawerContent = React$20.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,
@@ -7640,13 +7648,13 @@ const DrawerFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 	...props
 });
 DrawerFooter.displayName = "DrawerFooter";
-const DrawerTitle = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
+const DrawerTitle = React$20.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$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
+const DrawerDescription = React$20.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
@@ -7776,8 +7784,8 @@ function FieldError({ className, children, errors,...props }) {
 //#endregion
 //#region src/hooks/use-is-mobile.ts
 function useIsMobile(mobileBreakpoint = 768) {
-	const [isMobile, setIsMobile] = React$12.useState(false);
-	React$12.useEffect(() => {
+	const [isMobile, setIsMobile] = React$19.useState(false);
+	React$19.useEffect(() => {
 		const mql = globalThis.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
 		const onChange = () => {
 			setIsMobile(globalThis.innerWidth < mobileBreakpoint);
@@ -7921,36 +7929,36 @@ const coordinateGetter = (event, { context }) => {
 	}
 	return void 0;
 };
-const ROOT_NAME = "Kanban";
+const ROOT_NAME$1 = "Kanban";
 const BOARD_NAME = "KanbanBoard";
 const COLUMN_NAME = "KanbanColumn";
 const COLUMN_HANDLE_NAME = "KanbanColumnHandle";
-const ITEM_NAME = "KanbanItem";
+const ITEM_NAME$1 = "KanbanItem";
 const ITEM_HANDLE_NAME = "KanbanItemHandle";
 const OVERLAY_NAME = "KanbanOverlay";
-const KanbanContext = React$11.createContext(null);
+const KanbanContext = React$18.createContext(null);
 function useKanbanContext(consumerName) {
-	const context = React$11.useContext(KanbanContext);
-	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	const context = React$18.useContext(KanbanContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME$1}\``);
 	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 id = React$18.useId();
+	const [activeId, setActiveId] = React$18.useState(null);
+	const lastOverIdRef = React$18.useRef(null);
+	const hasMovedRef = React$18.useRef(false);
 	const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter }));
-	const getItemValue = React$11.useCallback((item) => {
+	const getItemValue = React$18.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) => {
+	const getColumn = React$18.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) => {
+	const collisionDetection = React$18.useCallback((args) => {
 		if (activeId && activeId in value) return closestCenter({
 			...args,
 			droppableContainers: args.droppableContainers.filter((container) => container.id in value)
@@ -7979,12 +7987,12 @@ function KanbanRoot(props) {
 		value,
 		getItemValue
 	]);
-	const onDragStart = React$11.useCallback((event) => {
+	const onDragStart = React$18.useCallback((event) => {
 		kanbanProps.onDragStart?.(event);
 		if (event.activatorEvent.defaultPrevented) return;
 		setActiveId(event.active.id);
 	}, [kanbanProps]);
-	const onDragOver = React$11.useCallback((event) => {
+	const onDragOver = React$18.useCallback((event) => {
 		kanbanProps.onDragOver?.(event);
 		if (event.activatorEvent.defaultPrevented) return;
 		const { active, over } = event;
@@ -8025,7 +8033,7 @@ function KanbanRoot(props) {
 		getItemValue,
 		onValueChange
 	]);
-	const onDragEnd = React$11.useCallback((event) => {
+	const onDragEnd = React$18.useCallback((event) => {
 		kanbanProps.onDragEnd?.(event);
 		if (event.activatorEvent.defaultPrevented) return;
 		const { active, over } = event;
@@ -8088,13 +8096,13 @@ function KanbanRoot(props) {
 		getColumn,
 		getItemValue
 	]);
-	const onDragCancel = React$11.useCallback((event) => {
+	const onDragCancel = React$18.useCallback((event) => {
 		kanbanProps.onDragCancel?.(event);
 		if (event.activatorEvent.defaultPrevented) return;
 		setActiveId(null);
 		hasMovedRef.current = false;
 	}, [kanbanProps]);
-	const announcements = React$11.useMemo(() => ({
+	const announcements = React$18.useMemo(() => ({
 		onDragStart({ active }) {
 			const isColumn = active.id in value;
 			const itemType = isColumn ? "column" : "item";
@@ -8157,7 +8165,7 @@ function KanbanRoot(props) {
 		getColumn,
 		getItemValue
 	]);
-	const contextValue = React$11.useMemo(() => ({
+	const contextValue = React$18.useMemo(() => ({
 		id,
 		items: value,
 		modifiers,
@@ -8202,11 +8210,11 @@ function KanbanRoot(props) {
 		})
 	});
 }
-const KanbanBoardContext = React$11.createContext(false);
+const KanbanBoardContext = React$18.createContext(false);
 function KanbanBoard(props) {
 	const { asChild, className, ref,...boardProps } = props;
 	const context = useKanbanContext(BOARD_NAME);
-	const columns = React$11.useMemo(() => {
+	const columns = React$18.useMemo(() => {
 		return Object.keys(context.items);
 	}, [context.items]);
 	const BoardPrimitive = asChild ? Slot : "div";
@@ -8226,9 +8234,9 @@ function KanbanBoard(props) {
 		})
 	});
 }
-const KanbanColumnContext = React$11.createContext(null);
+const KanbanColumnContext = React$18.createContext(null);
 function useKanbanColumnContext(consumerName) {
-	const context = React$11.useContext(KanbanColumnContext);
+	const context = React$18.useContext(KanbanColumnContext);
 	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${COLUMN_NAME}\``);
 	return context;
 }
@@ -8238,10 +8246,10 @@ const animateLayoutChanges = (args) => defaultAnimateLayoutChanges({
 });
 function KanbanColumn(props) {
 	const { value, asChild, asHandle, disabled, className, style, ref,...columnProps } = props;
-	const id = React$11.useId();
+	const id = React$18.useId();
 	const context = useKanbanContext(COLUMN_NAME);
-	const inBoard = React$11.useContext(KanbanBoardContext);
-	const inOverlay = React$11.useContext(KanbanOverlayContext);
+	const inBoard = React$18.useContext(KanbanBoardContext);
+	const inOverlay = React$18.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({
@@ -8253,7 +8261,7 @@ function KanbanColumn(props) {
 		if (disabled) return;
 		setNodeRef(node);
 	});
-	const composedStyle = React$11.useMemo(() => {
+	const composedStyle = React$18.useMemo(() => {
 		return {
 			transform: CSS.Transform.toString(transform),
 			transition,
@@ -8264,11 +8272,11 @@ function KanbanColumn(props) {
 		transition,
 		style
 	]);
-	const items = React$11.useMemo(() => {
+	const items = React$18.useMemo(() => {
 		const items$1 = context.items[value] ?? [];
 		return items$1.map((item) => context.getItemValue(item));
 	}, [context, value]);
-	const columnContext = React$11.useMemo(() => ({
+	const columnContext = React$18.useMemo(() => ({
 		id,
 		attributes,
 		listeners,
@@ -8335,29 +8343,29 @@ function KanbanColumnHandle(props) {
 		disabled: isDisabled
 	});
 }
-const KanbanItemContext = React$11.createContext(null);
+const KanbanItemContext = React$18.createContext(null);
 function useKanbanItemContext(consumerName) {
-	const context = React$11.useContext(KanbanItemContext);
-	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+	const context = React$18.useContext(KanbanItemContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME$1}\``);
 	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 id = React$18.useId();
+	const context = useKanbanContext(ITEM_NAME$1);
+	const inBoard = React$18.useContext(KanbanBoardContext);
+	const inOverlay = React$18.useContext(KanbanOverlayContext);
+	if (!inBoard && !inOverlay) throw new Error(`\`${ITEM_NAME$1}\` 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`);
+	if (value === "") throw new Error(`\`${ITEM_NAME$1}\` value cannot be an empty string`);
 	const composedRef = useComposedRefs(ref, (node) => {
 		if (disabled) return;
 		setNodeRef(node);
 	});
-	const composedStyle = React$11.useMemo(() => {
+	const composedStyle = React$18.useMemo(() => {
 		return {
 			transform: CSS.Transform.toString(transform),
 			transition,
@@ -8368,7 +8376,7 @@ function KanbanItem(props) {
 		transition,
 		style
 	]);
-	const itemContext = React$11.useMemo(() => ({
+	const itemContext = React$18.useMemo(() => ({
 		id,
 		attributes,
 		listeners,
@@ -8431,13 +8439,13 @@ function KanbanItemHandle(props) {
 		disabled: isDisabled
 	});
 }
-const KanbanOverlayContext = React$11.createContext(false);
+const KanbanOverlayContext = React$18.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 [mounted, setMounted] = React$18.useState(false);
+	React$18.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";
@@ -8573,32 +8581,32 @@ const MenubarGroup = MenubarPrimitive.Group;
 const MenubarPortal = MenubarPrimitive.Portal;
 const MenubarSub = MenubarPrimitive.Sub;
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
-const Menubar = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
+const Menubar = React$17.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$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
+const MenubarTrigger = React$17.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$10.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.SubTrigger, {
+const MenubarSubTrigger = React$17.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$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
+const MenubarSubContent = React$17.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$10.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
+const MenubarContent = React$17.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
 	ref,
 	align,
 	alignOffset,
@@ -8607,13 +8615,13 @@ const MenubarContent = React$10.forwardRef(({ className, align = "start", alignO
 	...props
 }) }));
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-const MenubarItem = React$10.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
+const MenubarItem = React$17.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$10.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.CheckboxItem, {
+const MenubarCheckboxItem = React$17.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,
@@ -8624,7 +8632,7 @@ const MenubarCheckboxItem = React$10.forwardRef(({ className, children, checked,
 	}), children]
 }));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-const MenubarRadioItem = React$10.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.RadioItem, {
+const MenubarRadioItem = React$17.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,
@@ -8634,13 +8642,13 @@ const MenubarRadioItem = React$10.forwardRef(({ className, children,...props },
 	}), children]
 }));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-const MenubarLabel = React$10.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Label, {
+const MenubarLabel = React$17.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$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
+const MenubarSeparator = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
 	ref,
 	className: cn("-mx-1 my-1 h-px bg-muted", className),
 	...props
@@ -8789,13 +8797,13 @@ const Pagination = ({ className,...props }) => /* @__PURE__ */ jsx("nav", {
 	...props
 });
 Pagination.displayName = "Pagination";
-const PaginationContent = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ul", {
+const PaginationContent = React$16.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$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
+const PaginationItem = React$16.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
 	ref,
 	className: cn("", className),
 	...props
@@ -8917,7 +8925,7 @@ const ResizableHandle = ({ withHandle, className,...props }) => /* @__PURE__ */
 
 //#endregion
 //#region src/scroll-area/scroll-area.tsx
-const ScrollArea = React$8.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+const ScrollArea = React$15.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
 	ref,
 	className: cn("relative overflow-hidden", className),
 	...props,
@@ -8931,7 +8939,7 @@ const ScrollArea = React$8.forwardRef(({ className, children,...props }, ref) =>
 	]
 }));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React$8.forwardRef(({ className, orientation = "vertical",...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+const ScrollBar = React$15.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),
@@ -8946,7 +8954,7 @@ const Sheet = SheetPrimitive.Root;
 const SheetTrigger = SheetPrimitive.Trigger;
 const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
-const SheetOverlay = React$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+const SheetOverlay = React$14.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
@@ -8961,7 +8969,7 @@ const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
 	} },
 	defaultVariants: { side: "right" }
 });
-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, {
+const SheetContent = React$14.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__,
@@ -8986,13 +8994,13 @@ const SheetFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 	...props
 });
 SheetFooter.displayName = "SheetFooter";
-const SheetTitle = React$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
+const SheetTitle = React$14.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$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+const SheetDescription = React$14.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
@@ -9000,105 +9008,295 @@ const SheetDescription = React$7.forwardRef(({ className,...props }, ref) => /*
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 //#endregion
-//#region src/sidebar/sidebar.tsx
+//#region src/sidebar/sidebar-context-provider.tsx
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ".";
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_MAX_WIDTH = 600;
-const SidebarContext = React$6.createContext(null);
-const SidebarResizeContext = React$6.createContext(null);
-function useSidebar() {
-	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$6.useState(false);
-	const [isResizing, setIsResizing] = React$6.useState(false);
-	const [_open, _setOpen] = React$6.useState(defaultOpen);
-	const open = openProp ?? _open;
-	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$6.useCallback(() => {
-		return isMobile ? setOpenMobile((open$1) => !open$1) : setOpen((open$1) => !open$1);
-	}, [
-		isMobile,
-		setOpen,
-		setOpenMobile
-	]);
-	React$6.useEffect(() => {
-		const handleKeyDown = (event) => {
-			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-				toggleSidebar();
-			}
-		};
-		globalThis.addEventListener("keydown", handleKeyDown);
-		return () => globalThis.removeEventListener("keydown", handleKeyDown);
-	}, [toggleSidebar]);
+/**
+* Internal store context. Exported for use by `Sidebar` component in the same
+* package to build per-sidebar resize contexts.
+*/
+const SidebarStoreContext = React$13.createContext(null);
+/**
+* Context that identifies which sidebar a component belongs to.
+* Set by `<Sidebar sidebarId="...">`, consumed by `useSidebar()`.
+*/
+const SidebarIdContext = React$13.createContext("default");
+const SidebarResizeContext = React$13.createContext(null);
+/**
+* Returns the state and controls for a specific sidebar.
+*
+* @param sidebarId - Optional explicit sidebar ID. Falls back to the nearest
+*   `SidebarIdContext` (set by the parent `<Sidebar>`), then to `"default"`.
+*/
+function useSidebar(sidebarId) {
+	const store = React$13.useContext(SidebarStoreContext);
+	const ctxId = React$13.useContext(SidebarIdContext);
+	const id = sidebarId ?? ctxId;
+	if (!store) throw new Error("useSidebar must be used within a SidebarProvider.");
+	const open = store.openStates[id] ?? store.defaultOpen;
+	const openMobile = store.mobileStates[id] ?? false;
+	const width = store.widthStates[id];
+	const { isMobile, isResizing } = store;
+	const setOpen = React$13.useCallback((value) => store.setOpen(id, value), [store.setOpen, id]);
+	const setOpenMobile = React$13.useCallback((value) => store.setOpenMobile(id, value), [store.setOpenMobile, id]);
+	const setWidth = React$13.useCallback((value) => store.setWidth(id, value), [store.setWidth, id]);
+	const toggleSidebar = React$13.useCallback(() => {
+		if (store.isMobile) store.setOpenMobile(id, !(store.mobileStates[id] ?? false));
+		else store.setOpen(id, !(store.openStates[id] ?? store.defaultOpen));
+	}, [store, id]);
 	const state = open ? "expanded" : "collapsed";
-	const contextValue = React$6.useMemo(() => ({
+	return React$13.useMemo(() => ({
 		state,
 		open,
 		setOpen,
-		isMobile,
 		openMobile,
 		setOpenMobile,
+		isMobile,
 		toggleSidebar,
-		width: widthProp,
+		width,
+		setWidth,
 		isResizing
 	}), [
 		state,
 		open,
 		setOpen,
-		isMobile,
 		openMobile,
 		setOpenMobile,
+		isMobile,
 		toggleSidebar,
-		widthProp,
+		width,
+		setWidth,
 		isResizing
 	]);
-	const sidebarWidthValue = widthProp ? `${widthProp}px` : SIDEBAR_WIDTH;
-	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(SidebarResizeContext.Provider, {
-			value: {
-				onWidthChange,
-				minWidth,
-				maxWidth,
-				isResizing,
-				setIsResizing
-			},
-			children: /* @__PURE__ */ jsx(TooltipProvider, {
-				delayDuration: 0,
-				children: /* @__PURE__ */ jsx("div", {
-					"data-slot": "sidebar-wrapper",
-					style: {
-						"--sidebar-width": sidebarWidthValue,
-						"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-						...style
-					},
-					className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
-					...props,
-					children
-				})
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, width: widthProp, onWidthChange, minWidth = SIDEBAR_MIN_WIDTH, maxWidth = SIDEBAR_MAX_WIDTH, storageKey, defaultOpenSidebars, defaultWidths, keyboardShortcuts, className, style, children,...props }) {
+	const isMobile = useIsMobile();
+	const [isResizing, setIsResizing] = React$13.useState(false);
+	const storedRef = React$13.useRef(null);
+	if (storedRef.current === null && storageKey) try {
+		storedRef.current = JSON.parse(localStorage.getItem(storageKey) ?? "{}");
+	} catch {
+		storedRef.current = {};
+	}
+	const [openStates, setOpenStates] = React$13.useState(() => {
+		const states = { default: defaultOpen };
+		if (defaultOpenSidebars) Object.assign(states, defaultOpenSidebars);
+		if (storedRef.current) {
+			for (const [id, data] of Object.entries(storedRef.current)) if (data && typeof data === "object" && "open" in data) states[id] = data.open;
+		}
+		return states;
+	});
+	const [mobileStates, setMobileStates] = React$13.useState({});
+	React$13.useEffect(() => {
+		if (openProp !== void 0) setOpenStates((prev) => prev["default"] === openProp ? prev : {
+			...prev,
+			default: openProp
+		});
+	}, [openProp]);
+	const effectiveOpenStates = React$13.useMemo(() => {
+		if (openProp !== void 0) return {
+			...openStates,
+			default: openProp
+		};
+		return openStates;
+	}, [openStates, openProp]);
+	const [widthStates, setWidthStates] = React$13.useState(() => {
+		const states = {};
+		if (widthProp !== void 0) states["default"] = widthProp;
+		if (defaultWidths) Object.assign(states, defaultWidths);
+		if (storedRef.current) {
+			for (const [id, data] of Object.entries(storedRef.current)) if (data && typeof data === "object" && typeof data.width === "number") states[id] = data.width;
+		}
+		return states;
+	});
+	React$13.useEffect(() => {
+		if (widthProp !== void 0) setWidthStates((prev) => prev["default"] === widthProp ? prev : {
+			...prev,
+			default: widthProp
+		});
+	}, [widthProp]);
+	const effectiveWidthStates = React$13.useMemo(() => {
+		if (widthProp !== void 0) return {
+			...widthStates,
+			default: widthProp
+		};
+		return widthStates;
+	}, [widthStates, widthProp]);
+	React$13.useEffect(() => {
+		if (!storageKey) return;
+		const toStore = {};
+		const allIds = new Set([...Object.keys(openStates), ...Object.keys(widthStates)]);
+		for (const id of allIds) toStore[id] = {
+			open: openStates[id] ?? defaultOpen,
+			...widthStates[id] === void 0 ? {} : { width: widthStates[id] }
+		};
+		localStorage.setItem(storageKey, JSON.stringify(toStore));
+	}, [
+		storageKey,
+		openStates,
+		widthStates,
+		defaultOpen
+	]);
+	const setOpen = React$13.useCallback((id, open) => {
+		if (id === "default" && setOpenProp) setOpenProp(open);
+		setOpenStates((prev) => ({
+			...prev,
+			[id]: open
+		}));
+	}, [setOpenProp]);
+	const setOpenMobile = React$13.useCallback((id, open) => {
+		setMobileStates((prev) => ({
+			...prev,
+			[id]: open
+		}));
+	}, []);
+	const setWidth = React$13.useCallback((id, width) => {
+		if (id === "default" && onWidthChange) onWidthChange(width);
+		setWidthStates((prev) => ({
+			...prev,
+			[id]: width
+		}));
+	}, [onWidthChange]);
+	const [sideMap, setSideMap] = React$13.useState({});
+	const registerSide = React$13.useCallback((id, side) => {
+		setSideMap((prev) => prev[id] === side ? prev : {
+			...prev,
+			[id]: side
+		});
+	}, []);
+	const effectiveOpenStatesRef = React$13.useRef(effectiveOpenStates);
+	effectiveOpenStatesRef.current = effectiveOpenStates;
+	const resolvedShortcuts = React$13.useMemo(() => {
+		if (keyboardShortcuts === false) return {};
+		return keyboardShortcuts ?? { [SIDEBAR_KEYBOARD_SHORTCUT]: "default" };
+	}, [keyboardShortcuts]);
+	React$13.useEffect(() => {
+		const entries = Object.entries(resolvedShortcuts);
+		if (entries.length === 0) return;
+		const handleKeyDown = (event) => {
+			if (!(event.metaKey || event.ctrlKey)) return;
+			for (const [key, sidebarId] of entries) if (event.key === key) {
+				event.preventDefault();
+				if (isMobile) setMobileStates((prev) => ({
+					...prev,
+					[sidebarId]: !(prev[sidebarId] ?? false)
+				}));
+				else {
+					const currentOpen = effectiveOpenStatesRef.current[sidebarId] ?? defaultOpen;
+					setOpen(sidebarId, !currentOpen);
+				}
+				return;
+			}
+		};
+		globalThis.addEventListener("keydown", handleKeyDown);
+		return () => globalThis.removeEventListener("keydown", handleKeyDown);
+	}, [
+		resolvedShortcuts,
+		isMobile,
+		defaultOpen,
+		setOpen
+	]);
+	const storeValue = React$13.useMemo(() => ({
+		openStates: effectiveOpenStates,
+		mobileStates,
+		widthStates: effectiveWidthStates,
+		sideMap,
+		setOpen,
+		setOpenMobile,
+		setWidth,
+		registerSide,
+		isMobile,
+		defaultOpen,
+		isResizing,
+		setIsResizing,
+		providerMinWidth: minWidth,
+		providerMaxWidth: maxWidth
+	}), [
+		effectiveOpenStates,
+		mobileStates,
+		effectiveWidthStates,
+		sideMap,
+		setOpen,
+		setOpenMobile,
+		setWidth,
+		registerSide,
+		isMobile,
+		defaultOpen,
+		isResizing,
+		minWidth,
+		maxWidth
+	]);
+	const defaultWidth = effectiveWidthStates["default"];
+	const sidebarWidthValue = defaultWidth ? `${defaultWidth}px` : SIDEBAR_WIDTH;
+	return /* @__PURE__ */ jsx(SidebarStoreContext.Provider, {
+		value: storeValue,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "sidebar-wrapper",
+				style: {
+					"--sidebar-width": sidebarWidthValue,
+					"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+					...style
+				},
+				className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
+				...props,
+				children
 			})
 		})
 	});
 }
-function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children,...props }) {
-	const { isMobile, state, openMobile, setOpenMobile, isResizing } = useSidebar();
+
+//#endregion
+//#region src/sidebar/sidebar.tsx
+function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", sidebarId = "default", minWidth, maxWidth, className, children,...props }) {
+	const { isMobile, state, openMobile, setOpenMobile, width, setWidth, isResizing } = useSidebar(sidebarId);
+	const store = React$12.useContext(SidebarStoreContext);
+	React$12.useEffect(() => {
+		store?.registerSide(sidebarId, side);
+	}, [
+		store,
+		sidebarId,
+		side
+	]);
+	const effectiveMinWidth = minWidth ?? store?.providerMinWidth ?? SIDEBAR_MIN_WIDTH;
+	const effectiveMaxWidth = maxWidth ?? store?.providerMaxWidth ?? SIDEBAR_MAX_WIDTH;
+	const resizeContextValue = React$12.useMemo(() => ({
+		onWidthChange: setWidth,
+		minWidth: effectiveMinWidth,
+		maxWidth: effectiveMaxWidth,
+		isResizing,
+		setIsResizing: store?.setIsResizing ?? (() => {})
+	}), [
+		setWidth,
+		effectiveMinWidth,
+		effectiveMaxWidth,
+		isResizing,
+		store?.setIsResizing
+	]);
+	const sidebarWidthValue = width ? `${width}px` : SIDEBAR_WIDTH;
+	const sidebarStyle = {
+		"--sidebar-width": sidebarWidthValue,
+		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON
+	};
+	const wrappedChildren = /* @__PURE__ */ jsx(SidebarIdContext.Provider, {
+		value: sidebarId,
+		children: /* @__PURE__ */ jsx(SidebarResizeContext.Provider, {
+			value: resizeContextValue,
+			children
+		})
+	});
 	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar",
+		style: sidebarStyle,
 		className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
 		...props,
-		children
+		children: wrappedChildren
 	});
 	if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
 		open: openMobile,
@@ -9116,12 +9314,13 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 				children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "flex h-full w-full flex-col",
-				children
+				children: wrappedChildren
 			})]
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "group peer text-sidebar-foreground hidden md:block",
+		style: sidebarStyle,
 		"data-state": state,
 		"data-collapsible": state === "collapsed" ? collapsible : "",
 		"data-variant": variant,
@@ -9145,14 +9344,19 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 				"data-sidebar": "sidebar",
 				"data-slot": "sidebar-inner",
 				className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
-				children
+				children: wrappedChildren
 			})
 		})]
 	});
 }
-function SidebarTrigger({ className, onClick,...props }) {
-	const { toggleSidebar } = useSidebar();
-	return /* @__PURE__ */ jsxs(Button, {
+function SidebarTrigger({ className, onClick, sidebarId, children,...props }) {
+	const { toggleSidebar } = useSidebar(sidebarId);
+	const store = React$12.useContext(SidebarStoreContext);
+	const ctxId = React$12.useContext(SidebarIdContext);
+	const resolvedId = sidebarId ?? ctxId;
+	const side = store?.sideMap[resolvedId];
+	const Icon = side === "right" ? PanelRightIcon : PanelLeftIcon;
+	return /* @__PURE__ */ jsx(Button, {
 		"data-sidebar": "trigger",
 		"data-slot": "sidebar-trigger",
 		variant: "ghost",
@@ -9163,19 +9367,19 @@ function SidebarTrigger({ className, onClick,...props }) {
 			toggleSidebar();
 		},
 		...props,
-		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Toggle Sidebar"
-		})]
+		})] })
 	});
 }
 function SidebarRail({ className,...props }) {
 	const { toggleSidebar } = useSidebar();
-	const resizeCtx = React$6.useContext(SidebarResizeContext);
-	const startXRef = React$6.useRef(0);
-	const hasDraggedRef = React$6.useRef(false);
+	const resizeCtx = React$12.useContext(SidebarResizeContext);
+	const startXRef = React$12.useRef(0);
+	const hasDraggedRef = React$12.useRef(false);
 	const isResizable = !!resizeCtx?.onWidthChange;
-	const handleMouseDown = React$6.useCallback((e) => {
+	const handleMouseDown = React$12.useCallback((e) => {
 		if (!isResizable || !resizeCtx) return;
 		e.preventDefault();
 		startXRef.current = e.clientX;
@@ -9205,7 +9409,7 @@ function SidebarRail({ className,...props }) {
 		document.body.style.cursor = "col-resize";
 		document.body.style.userSelect = "none";
 	}, [isResizable, resizeCtx]);
-	const handleClick = React$6.useCallback(() => {
+	const handleClick = React$12.useCallback(() => {
 		if (hasDraggedRef.current) return;
 		toggleSidebar();
 	}, [toggleSidebar]);
@@ -9440,6 +9644,283 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
 	});
 }
 
+//#endregion
+//#region src/sidebar/sidebar-tab-context-provider.tsx
+const SidebarTabsContext = React$11.createContext(null);
+function SidebarTabsProvider({ children }) {
+	const [tabsMap, setTabsMap] = React$11.useState({
+		left: new Map(),
+		right: new Map()
+	});
+	const [activeTab, setActiveTabState] = React$11.useState({
+		left: null,
+		right: null
+	});
+	const register = React$11.useCallback((side, tab) => {
+		setTabsMap((prev) => {
+			const next = new Map(prev[side]);
+			next.set(tab.id, tab);
+			return {
+				...prev,
+				[side]: next
+			};
+		});
+		setActiveTabState((prev) => {
+			if (prev[side] === null) return {
+				...prev,
+				[side]: tab.id
+			};
+			return prev;
+		});
+	}, []);
+	const unregister = React$11.useCallback((side, tabId) => {
+		setTabsMap((prev) => {
+			const next = new Map(prev[side]);
+			next.delete(tabId);
+			return {
+				...prev,
+				[side]: next
+			};
+		});
+		setActiveTabState((prev) => {
+			if (prev[side] === tabId) return {
+				...prev,
+				[side]: null
+			};
+			return prev;
+		});
+	}, []);
+	const setActiveTab = React$11.useCallback((side, tabId) => {
+		setActiveTabState((prev) => {
+			if (prev[side] === tabId) return prev;
+			return {
+				...prev,
+				[side]: tabId
+			};
+		});
+	}, []);
+	const sortedTabs = React$11.useMemo(() => {
+		const sort = (map) => [...map.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+		return {
+			left: sort(tabsMap.left),
+			right: sort(tabsMap.right)
+		};
+	}, [tabsMap]);
+	const value = React$11.useMemo(() => ({
+		tabs: sortedTabs,
+		activeTab,
+		register,
+		unregister,
+		setActiveTab
+	}), [
+		sortedTabs,
+		activeTab,
+		register,
+		unregister,
+		setActiveTab
+	]);
+	return /* @__PURE__ */ jsx(SidebarTabsContext.Provider, {
+		value,
+		children
+	});
+}
+function useSidebarTabs(side) {
+	const ctx = React$11.useContext(SidebarTabsContext);
+	if (!ctx) throw new Error("useSidebarTabs must be used within a SidebarTabsProvider.");
+	const boundSetActiveTab = React$11.useCallback((tabId) => {
+		if (side) ctx.setActiveTab(side, tabId);
+	}, [ctx.setActiveTab, side]);
+	const boundResult = React$11.useMemo(() => side ? {
+		tabs: ctx.tabs[side],
+		activeTab: ctx.activeTab[side],
+		setActiveTab: boundSetActiveTab
+	} : null, [
+		side,
+		ctx.tabs,
+		ctx.activeTab,
+		boundSetActiveTab
+	]);
+	if (side) return boundResult;
+	return ctx;
+}
+
+//#endregion
+//#region src/sidebar/sidebar-tab.tsx
+function SidebarTab({ side, id, icon, label, render, order }) {
+	const ctx = React$10.useContext(SidebarTabsContext);
+	if (!ctx) throw new Error("SidebarTab must be used within a SidebarTabsProvider.");
+	const { register, unregister } = ctx;
+	const renderRef = React$10.useRef(render);
+	renderRef.current = render;
+	const iconRef = React$10.useRef(icon);
+	iconRef.current = icon;
+	const stableRender = React$10.useCallback(() => renderRef.current(), []);
+	React$10.useEffect(() => {
+		register(side, {
+			id,
+			icon: iconRef.current,
+			label,
+			render: stableRender,
+			order
+		});
+		return () => unregister(side, id);
+	}, [
+		side,
+		id,
+		label,
+		order,
+		register,
+		unregister,
+		stableRender
+	]);
+	return null;
+}
+function DynamicTabbedSidebar({ side, sidebarId, orientation = "horizontal", collapsible = "offcanvas", className,...sidebarProps }) {
+	const ctx = React$10.useContext(SidebarTabsContext);
+	if (!ctx) throw new Error("DynamicTabbedSidebar must be used within a SidebarTabsProvider.");
+	const { setActiveTab } = ctx;
+	const tabs = ctx.tabs[side];
+	const activeTabId = ctx.activeTab[side];
+	const activeTab = tabs.find((t) => t.id === activeTabId);
+	React$10.useEffect(() => {
+		if (tabs.length > 0 && tabs[0] && !activeTab) setActiveTab(side, tabs[0].id);
+	}, [
+		tabs,
+		activeTab,
+		side,
+		setActiveTab
+	]);
+	const effectiveSidebarId = sidebarId ?? side;
+	const isVertical = orientation === "vertical";
+	const effectiveCollapsible = isVertical && collapsible === "offcanvas" ? "icon" : collapsible;
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		side,
+		sidebarId: effectiveSidebarId,
+		collapsible: effectiveCollapsible,
+		className,
+		...sidebarProps,
+		children: [/* @__PURE__ */ jsx(TabbedSidebarContent, {
+			side,
+			tabs,
+			activeTabId,
+			activeTab,
+			isVertical,
+			sidebarId: effectiveSidebarId,
+			collapsible: effectiveCollapsible
+		}), /* @__PURE__ */ jsx(SidebarRail, {})]
+	});
+}
+function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical, sidebarId, collapsible }) {
+	const { state } = useSidebar(sidebarId);
+	const isCollapsed = state === "collapsed";
+	const isIconCollapsible = collapsible === "icon";
+	if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full flex-col",
+		children: /* @__PURE__ */ jsx(VerticalTabBar, {
+			side,
+			tabs,
+			activeTabId,
+			sidebarId
+		})
+	});
+	if (isVertical) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-row",
+		children: [/* @__PURE__ */ jsx(VerticalTabBar, {
+			side,
+			tabs,
+			activeTabId,
+			sidebarId
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col",
+		children: [
+			/* @__PURE__ */ jsx(HorizontalTabBar, {
+				side,
+				tabs,
+				activeTabId,
+				sidebarId
+			}),
+			tabs.length > 0 && /* @__PURE__ */ jsx(SidebarSeparator, {}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
+			})
+		]
+	});
+}
+function HorizontalTabBar({ side, tabs, activeTabId, sidebarId }) {
+	const ctx = React$10.useContext(SidebarTabsContext);
+	const { state, toggleSidebar } = useSidebar(sidebarId ?? side);
+	if (tabs.length === 0) return null;
+	const handleTabClick = (tabId) => {
+		if (state === "collapsed") {
+			ctx.setActiveTab(side, tabId);
+			toggleSidebar();
+		} else if (tabId === activeTabId) toggleSidebar();
+		else ctx.setActiveTab(side, tabId);
+	};
+	return /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx("div", {
+		className: "flex w-full items-center gap-0.5 rounded-md bg-muted p-1",
+		role: "tablist",
+		children: tabs.map((tab) => {
+			const Icon = tab.icon;
+			const isActive = tab.id === activeTabId;
+			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					role: "tab",
+					"aria-selected": isActive,
+					className: cn("flex flex-1 items-center justify-center rounded-sm p-1.5 transition-colors", isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+					onClick: () => handleTabClick(tab.id),
+					children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				children: tab.label
+			})] }, tab.id);
+		})
+	}) });
+}
+function VerticalTabBar({ side, tabs, activeTabId, sidebarId }) {
+	const ctx = React$10.useContext(SidebarTabsContext);
+	const { state, toggleSidebar } = useSidebar(sidebarId ?? side);
+	const isCollapsed = state === "collapsed";
+	if (tabs.length === 0) return null;
+	const handleTabClick = (tabId) => {
+		if (isCollapsed) {
+			ctx.setActiveTab(side, tabId);
+			toggleSidebar();
+		} else if (tabId === activeTabId) toggleSidebar();
+		else ctx.setActiveTab(side, tabId);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-1 border-r border-sidebar-border p-1",
+		role: "tablist",
+		children: tabs.map((tab) => {
+			const Icon = tab.icon;
+			const isActive = tab.id === activeTabId;
+			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					role: "tab",
+					"aria-selected": isActive,
+					className: cn("size-9 flex items-center justify-center rounded-md transition-colors", isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"),
+					onClick: () => handleTabClick(tab.id),
+					children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: side === "left" ? "right" : "left",
+				hidden: state === "expanded",
+				children: tab.label
+			})] }, tab.id);
+		})
+	});
+}
+
 //#endregion
 //#region src/slicer/slicer.tsx
 /**
@@ -9722,7 +10203,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$5.useMemo(() => {
+	const _values = React$9.useMemo(() => {
 		if (Array.isArray(value)) return value;
 		else if (Array.isArray(defaultValue)) return defaultValue;
 		return [min, max];
@@ -9755,6 +10236,785 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, sliderVari
 	});
 }
 
+//#endregion
+//#region src/hooks/use-isomorphic-layout-effect.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$8.useLayoutEffect : React$8.useEffect;
+
+//#endregion
+//#region src/hooks/use-as-ref.ts
+function useAsRef(props) {
+	const ref = React$7.useRef(props);
+	useIsomorphicLayoutEffect(() => {
+		ref.current = props;
+	});
+	return ref;
+}
+
+//#endregion
+//#region src/hooks/use-lazy-ref.ts
+function useLazyRef(fn) {
+	const ref = React$6.useRef(null);
+	if (ref.current === null) ref.current = fn();
+	return ref;
+}
+
+//#endregion
+//#region src/stepper/stepper.tsx
+const ROOT_NAME = "Stepper";
+const LIST_NAME = "StepperList";
+const ITEM_NAME = "StepperItem";
+const TRIGGER_NAME = "StepperTrigger";
+const INDICATOR_NAME = "StepperIndicator";
+const SEPARATOR_NAME = "StepperSeparator";
+const TITLE_NAME = "StepperTitle";
+const DESCRIPTION_NAME = "StepperDescription";
+const CONTENT_NAME = "StepperContent";
+const PREV_NAME = "StepperPrev";
+const NEXT_NAME = "StepperNext";
+const ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
+const EVENT_OPTIONS = {
+	bubbles: false,
+	cancelable: true
+};
+const ARROW_KEYS = [
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+];
+function getId(id, variant, value) {
+	return `${id}-${variant}-${value}`;
+}
+const MAP_KEY_TO_FOCUS_INTENT = {
+	ArrowLeft: "prev",
+	ArrowUp: "prev",
+	ArrowRight: "next",
+	ArrowDown: "next",
+	PageUp: "first",
+	Home: "first",
+	PageDown: "last",
+	End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+	if (dir !== "rtl") return key;
+	return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, dir, orientation) {
+	const key = getDirectionAwareKey(event.key, dir);
+	if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+	if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+	return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst(candidates, preventScroll = false) {
+	const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+	for (const candidateRef of candidates) {
+		const candidate = candidateRef.current;
+		if (!candidate) continue;
+		if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+		candidate.focus({ preventScroll });
+		if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+	}
+}
+function wrapArray(array, startIndex) {
+	return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getDataState(value, itemValue, stepState, steps, variant = "item") {
+	const stepKeys = Array.from(steps.keys());
+	const currentIndex = stepKeys.indexOf(itemValue);
+	if (stepState?.completed) return "completed";
+	if (value === itemValue) return variant === "separator" ? "inactive" : "active";
+	if (value) {
+		const activeIndex = stepKeys.indexOf(value);
+		if (activeIndex > currentIndex) return "completed";
+	}
+	return "inactive";
+}
+const StoreContext = React$5.createContext(null);
+function useStoreContext(consumerName) {
+	const context = React$5.useContext(StoreContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function useStore(selector) {
+	const store = useStoreContext("useStore");
+	const getSnapshot = React$5.useCallback(() => selector(store.getState()), [store, selector]);
+	return React$5.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const StepperContext = React$5.createContext(null);
+function useStepperContext(consumerName) {
+	const context = React$5.useContext(StepperContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function Stepper(props) {
+	const { value, defaultValue, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate, dir: dirProp, orientation = "horizontal", activationMode = "automatic", asChild, disabled = false, nonInteractive = false, loop = false, className, id,...rootProps } = props;
+	const listenersRef = useLazyRef(() => new Set());
+	const stateRef = useLazyRef(() => ({
+		steps: new Map(),
+		value: value ?? defaultValue ?? ""
+	}));
+	const propsRef = useAsRef({
+		onValueChange,
+		onValueComplete,
+		onValueAdd,
+		onValueRemove,
+		onValidate
+	});
+	const store = React$5.useMemo(() => {
+		return {
+			subscribe: (cb) => {
+				listenersRef.current.add(cb);
+				return () => listenersRef.current.delete(cb);
+			},
+			getState: () => stateRef.current,
+			setState: (key, value$1) => {
+				if (Object.is(stateRef.current[key], value$1)) return;
+				if (key === "value" && typeof value$1 === "string") {
+					stateRef.current.value = value$1;
+					propsRef.current.onValueChange?.(value$1);
+				} else stateRef.current[key] = value$1;
+				store.notify();
+			},
+			setStateWithValidation: async (value$1, direction) => {
+				if (!propsRef.current.onValidate) {
+					store.setState("value", value$1);
+					return true;
+				}
+				try {
+					const isValid = await propsRef.current.onValidate(value$1, direction);
+					if (isValid) store.setState("value", value$1);
+					return isValid;
+				} catch {
+					return false;
+				}
+			},
+			hasValidation: () => !!propsRef.current.onValidate,
+			addStep: (value$1, completed, disabled$1) => {
+				const newStep = {
+					value: value$1,
+					completed,
+					disabled: disabled$1
+				};
+				stateRef.current.steps.set(value$1, newStep);
+				propsRef.current.onValueAdd?.(value$1);
+				store.notify();
+			},
+			removeStep: (value$1) => {
+				stateRef.current.steps.delete(value$1);
+				propsRef.current.onValueRemove?.(value$1);
+				store.notify();
+			},
+			setStep: (value$1, completed, disabled$1) => {
+				const step = stateRef.current.steps.get(value$1);
+				if (step) {
+					const updatedStep = {
+						...step,
+						completed,
+						disabled: disabled$1
+					};
+					stateRef.current.steps.set(value$1, updatedStep);
+					if (completed !== step.completed) propsRef.current.onValueComplete?.(value$1, completed);
+					store.notify();
+				}
+			},
+			notify: () => {
+				for (const cb of listenersRef.current) cb();
+			}
+		};
+	}, [
+		listenersRef,
+		stateRef,
+		propsRef
+	]);
+	useIsomorphicLayoutEffect(() => {
+		if (value !== void 0) store.setState("value", value);
+	}, [value]);
+	const dir = useDirection(dirProp);
+	const instanceId = React$5.useId();
+	const rootId = id ?? instanceId;
+	const contextValue = React$5.useMemo(() => ({
+		rootId,
+		dir,
+		orientation,
+		activationMode,
+		disabled,
+		nonInteractive,
+		loop
+	}), [
+		rootId,
+		dir,
+		orientation,
+		activationMode,
+		disabled,
+		nonInteractive,
+		loop
+	]);
+	const RootPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(StoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(StepperContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsx(RootPrimitive, {
+				id: rootId,
+				"data-disabled": disabled ? "" : void 0,
+				"data-orientation": orientation,
+				"data-slot": "stepper",
+				dir,
+				...rootProps,
+				className: cn("flex gap-6", orientation === "horizontal" ? "w-full flex-col" : "flex-row", className)
+			})
+		})
+	});
+}
+const FocusContext = React$5.createContext(null);
+function useFocusContext(consumerName) {
+	const context = React$5.useContext(FocusContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
+	return context;
+}
+function StepperList(props) {
+	const { asChild, onBlur: onBlurProp, onFocus: onFocusProp, onMouseDown: onMouseDownProp, className, children, ref,...listProps } = props;
+	const context = useStepperContext(LIST_NAME);
+	const orientation = context.orientation;
+	const currentValue = useStore((state) => state.value);
+	const propsRef = useAsRef({
+		onBlur: onBlurProp,
+		onFocus: onFocusProp,
+		onMouseDown: onMouseDownProp
+	});
+	const [tabStopId, setTabStopId] = React$5.useState(null);
+	const [isTabbingBackOut, setIsTabbingBackOut] = React$5.useState(false);
+	const [focusableItemCount, setFocusableItemCount] = React$5.useState(0);
+	const isClickFocusRef = React$5.useRef(false);
+	const itemsRef = React$5.useRef(new Map());
+	const listRef = React$5.useRef(null);
+	const composedRef = useComposedRefs(ref, listRef);
+	const onItemFocus = React$5.useCallback((tabStopId$1) => {
+		setTabStopId(tabStopId$1);
+	}, []);
+	const onItemShiftTab = React$5.useCallback(() => {
+		setIsTabbingBackOut(true);
+	}, []);
+	const onFocusableItemAdd = React$5.useCallback(() => {
+		setFocusableItemCount((prevCount) => prevCount + 1);
+	}, []);
+	const onFocusableItemRemove = React$5.useCallback(() => {
+		setFocusableItemCount((prevCount) => prevCount - 1);
+	}, []);
+	const onItemRegister = React$5.useCallback((item) => {
+		itemsRef.current.set(item.id, item);
+	}, []);
+	const onItemUnregister = React$5.useCallback((id) => {
+		itemsRef.current.delete(id);
+	}, []);
+	const getItems = React$5.useCallback(() => {
+		return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
+			const elementA = a.ref.current;
+			const elementB = b.ref.current;
+			if (!elementA || !elementB) return 0;
+			const position = elementA.compareDocumentPosition(elementB);
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+			if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+			return 0;
+		});
+	}, []);
+	const onBlur = React$5.useCallback((event) => {
+		propsRef.current.onBlur?.(event);
+		if (event.defaultPrevented) return;
+		setIsTabbingBackOut(false);
+	}, [propsRef]);
+	const onFocus = React$5.useCallback((event) => {
+		propsRef.current.onFocus?.(event);
+		if (event.defaultPrevented) return;
+		const isKeyboardFocus = !isClickFocusRef.current;
+		if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+			const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+			event.currentTarget.dispatchEvent(entryFocusEvent);
+			if (!entryFocusEvent.defaultPrevented) {
+				const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
+				const selectedItem = currentValue ? items.find((item) => item.value === currentValue) : void 0;
+				const activeItem = items.find((item) => item.active);
+				const currentItem = items.find((item) => item.id === tabStopId);
+				const candidateItems = [
+					selectedItem,
+					activeItem,
+					currentItem,
+					...items
+				].filter(Boolean);
+				const candidateRefs = candidateItems.map((item) => item.ref);
+				focusFirst(candidateRefs, false);
+			}
+		}
+		isClickFocusRef.current = false;
+	}, [
+		propsRef,
+		isTabbingBackOut,
+		currentValue,
+		tabStopId
+	]);
+	const onMouseDown = React$5.useCallback((event) => {
+		propsRef.current.onMouseDown?.(event);
+		if (event.defaultPrevented) return;
+		isClickFocusRef.current = true;
+	}, [propsRef]);
+	const focusContextValue = React$5.useMemo(() => ({
+		tabStopId,
+		onItemFocus,
+		onItemShiftTab,
+		onFocusableItemAdd,
+		onFocusableItemRemove,
+		onItemRegister,
+		onItemUnregister,
+		getItems
+	}), [
+		tabStopId,
+		onItemFocus,
+		onItemShiftTab,
+		onFocusableItemAdd,
+		onFocusableItemRemove,
+		onItemRegister,
+		onItemUnregister,
+		getItems
+	]);
+	const ListPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(FocusContext.Provider, {
+		value: focusContextValue,
+		children: /* @__PURE__ */ jsx(ListPrimitive, {
+			role: "tablist",
+			"aria-orientation": orientation,
+			"data-orientation": orientation,
+			"data-slot": "stepper-list",
+			dir: context.dir,
+			tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
+			...listProps,
+			ref: composedRef,
+			className: cn("flex outline-none", orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start", className),
+			onBlur,
+			onFocus,
+			onMouseDown,
+			children
+		})
+	});
+}
+const StepperItemContext = React$5.createContext(null);
+function useStepperItemContext(consumerName) {
+	const context = React$5.useContext(StepperItemContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+	return context;
+}
+function StepperItem(props) {
+	const { value: itemValue, completed = false, disabled = false, asChild, className, children, ref,...itemProps } = props;
+	const context = useStepperContext(ITEM_NAME);
+	const store = useStoreContext(ITEM_NAME);
+	const orientation = context.orientation;
+	const value = useStore((state) => state.value);
+	useIsomorphicLayoutEffect(() => {
+		store.addStep(itemValue, completed, disabled);
+		return () => {
+			store.removeStep(itemValue);
+		};
+	}, [
+		itemValue,
+		completed,
+		disabled
+	]);
+	useIsomorphicLayoutEffect(() => {
+		store.setStep(itemValue, completed, disabled);
+	}, [
+		itemValue,
+		completed,
+		disabled
+	]);
+	const stepState = useStore((state) => state.steps.get(itemValue));
+	const steps = useStore((state) => state.steps);
+	const dataState = getDataState(value, itemValue, stepState, steps);
+	const itemContextValue = React$5.useMemo(() => ({
+		value: itemValue,
+		stepState
+	}), [itemValue, stepState]);
+	const ItemPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
+		value: itemContextValue,
+		children: /* @__PURE__ */ jsx(ItemPrimitive, {
+			"data-disabled": stepState?.disabled ? "" : void 0,
+			"data-orientation": orientation,
+			"data-state": dataState,
+			"data-slot": "stepper-item",
+			dir: context.dir,
+			...itemProps,
+			ref,
+			className: cn("relative flex not-last:flex-1 items-center", orientation === "horizontal" ? "flex-row" : "flex-col", className),
+			children
+		})
+	});
+}
+function StepperTrigger(props) {
+	const { asChild, onClick: onClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, onMouseDown: onMouseDownProp, disabled, className, ref,...triggerProps } = props;
+	const context = useStepperContext(TRIGGER_NAME);
+	const itemContext = useStepperItemContext(TRIGGER_NAME);
+	const itemValue = itemContext.value;
+	const store = useStoreContext(TRIGGER_NAME);
+	const focusContext = useFocusContext(TRIGGER_NAME);
+	const value = useStore((state) => state.value);
+	const steps = useStore((state) => state.steps);
+	const stepState = useStore((state) => state.steps.get(itemValue));
+	const propsRef = useAsRef({
+		onClick: onClickProp,
+		onFocus: onFocusProp,
+		onKeyDown: onKeyDownProp,
+		onMouseDown: onMouseDownProp
+	});
+	const activationMode = context.activationMode;
+	const orientation = context.orientation;
+	const loop = context.loop;
+	const stepIndex = Array.from(steps.keys()).indexOf(itemValue);
+	const stepPosition = stepIndex + 1;
+	const stepCount = steps.size;
+	const triggerId = getId(context.rootId, "trigger", itemValue);
+	const contentId = getId(context.rootId, "content", itemValue);
+	const titleId = getId(context.rootId, "title", itemValue);
+	const descriptionId = getId(context.rootId, "description", itemValue);
+	const isDisabled = disabled || stepState?.disabled || context.disabled;
+	const isActive = value === itemValue;
+	const isTabStop = focusContext.tabStopId === triggerId;
+	const dataState = getDataState(value, itemValue, stepState, steps);
+	const triggerRef = React$5.useRef(null);
+	const composedRef = useComposedRefs(ref, triggerRef);
+	const isArrowKeyPressedRef = React$5.useRef(false);
+	const isMouseClickRef = React$5.useRef(false);
+	React$5.useEffect(() => {
+		function onKeyDown$1(event) {
+			if (ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
+		}
+		function onKeyUp() {
+			isArrowKeyPressedRef.current = false;
+		}
+		document.addEventListener("keydown", onKeyDown$1);
+		document.addEventListener("keyup", onKeyUp);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown$1);
+			document.removeEventListener("keyup", onKeyUp);
+		};
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		focusContext.onItemRegister({
+			id: triggerId,
+			ref: triggerRef,
+			value: itemValue,
+			active: isTabStop,
+			disabled: !!isDisabled
+		});
+		if (!isDisabled) focusContext.onFocusableItemAdd();
+		return () => {
+			focusContext.onItemUnregister(triggerId);
+			if (!isDisabled) focusContext.onFocusableItemRemove();
+		};
+	}, [
+		focusContext,
+		triggerId,
+		itemValue,
+		isTabStop,
+		isDisabled
+	]);
+	const onClick = React$5.useCallback(async (event) => {
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (!isDisabled && !context.nonInteractive) {
+			const currentStepIndex = Array.from(steps.keys()).indexOf(value ?? "");
+			const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
+			const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+			await store.setStateWithValidation(itemValue, direction);
+		}
+	}, [
+		isDisabled,
+		context.nonInteractive,
+		store,
+		itemValue,
+		value,
+		steps,
+		propsRef
+	]);
+	const onFocus = React$5.useCallback(async (event) => {
+		propsRef.current.onFocus?.(event);
+		if (event.defaultPrevented) return;
+		focusContext.onItemFocus(triggerId);
+		const isKeyboardFocus = !isMouseClickRef.current;
+		if (!isActive && !isDisabled && activationMode !== "manual" && !context.nonInteractive && isKeyboardFocus) {
+			const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
+			const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
+			const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+			await store.setStateWithValidation(itemValue, direction);
+		}
+		isMouseClickRef.current = false;
+	}, [
+		focusContext,
+		triggerId,
+		activationMode,
+		isActive,
+		isDisabled,
+		context.nonInteractive,
+		store,
+		itemValue,
+		value,
+		steps,
+		propsRef
+	]);
+	const onKeyDown = React$5.useCallback(async (event) => {
+		propsRef.current.onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Enter" && context.nonInteractive) {
+			event.preventDefault();
+			return;
+		}
+		if ((event.key === "Enter" || event.key === " ") && activationMode === "manual" && !context.nonInteractive) {
+			event.preventDefault();
+			if (!isDisabled && triggerRef.current) triggerRef.current.click();
+			return;
+		}
+		if (event.key === "Tab" && event.shiftKey) {
+			focusContext.onItemShiftTab();
+			return;
+		}
+		if (event.target !== event.currentTarget) return;
+		const focusIntent = getFocusIntent(event, context.dir, orientation);
+		if (focusIntent !== void 0) {
+			if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+			event.preventDefault();
+			const items = focusContext.getItems().filter((item) => !item.disabled);
+			let candidateRefs = items.map((item) => item.ref);
+			if (focusIntent === "last") candidateRefs.reverse();
+			else if (focusIntent === "prev" || focusIntent === "next") {
+				if (focusIntent === "prev") candidateRefs.reverse();
+				const currentIndex = candidateRefs.findIndex((ref$1) => ref$1.current === event.currentTarget);
+				candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
+			}
+			if (store.hasValidation() && candidateRefs.length > 0) {
+				const nextRef = candidateRefs[0];
+				const nextElement = nextRef?.current;
+				const nextItem = items.find((item) => item.ref.current === nextElement);
+				if (nextItem && nextItem.value !== itemValue) {
+					const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
+					const targetStepIndex = Array.from(steps.keys()).indexOf(nextItem.value);
+					const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+					if (direction === "next") {
+						const isValid = await store.setStateWithValidation(nextItem.value, direction);
+						if (!isValid) return;
+					} else store.setState("value", nextItem.value);
+					queueMicrotask(() => nextElement?.focus());
+					return;
+				}
+			}
+			queueMicrotask(() => focusFirst(candidateRefs));
+		}
+	}, [
+		focusContext,
+		context.nonInteractive,
+		context.dir,
+		activationMode,
+		orientation,
+		loop,
+		isDisabled,
+		store,
+		propsRef,
+		itemValue,
+		value,
+		steps
+	]);
+	const onMouseDown = React$5.useCallback((event) => {
+		propsRef.current.onMouseDown?.(event);
+		if (event.defaultPrevented) return;
+		isMouseClickRef.current = true;
+		if (isDisabled) event.preventDefault();
+		else focusContext.onItemFocus(triggerId);
+	}, [
+		focusContext,
+		triggerId,
+		isDisabled,
+		propsRef
+	]);
+	const TriggerPrimitive = asChild ? Slot : "button";
+	return /* @__PURE__ */ jsx(TriggerPrimitive, {
+		id: triggerId,
+		role: "tab",
+		type: "button",
+		"aria-controls": contentId,
+		"aria-current": isActive ? "step" : void 0,
+		"aria-describedby": `${titleId} ${descriptionId}`,
+		"aria-posinset": stepPosition,
+		"aria-selected": isActive,
+		"aria-setsize": stepCount,
+		"data-disabled": isDisabled ? "" : void 0,
+		"data-state": dataState,
+		"data-slot": "stepper-trigger",
+		disabled: isDisabled,
+		tabIndex: isTabStop ? 0 : -1,
+		...triggerProps,
+		ref: composedRef,
+		className: cn("inline-flex items-center justify-center gap-3 rounded-md text-left outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full", className),
+		onClick,
+		onFocus,
+		onKeyDown,
+		onMouseDown
+	});
+}
+function StepperIndicator(props) {
+	const { className, children, asChild, ref,...indicatorProps } = props;
+	const context = useStepperContext(INDICATOR_NAME);
+	const itemContext = useStepperItemContext(INDICATOR_NAME);
+	const value = useStore((state) => state.value);
+	const itemValue = itemContext.value;
+	const stepState = useStore((state) => state.steps.get(itemValue));
+	const steps = useStore((state) => state.steps);
+	const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
+	const dataState = getDataState(value, itemValue, stepState, steps);
+	const IndicatorPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(IndicatorPrimitive, {
+		"data-state": dataState,
+		"data-slot": "stepper-indicator",
+		dir: context.dir,
+		...indicatorProps,
+		ref,
+		className: cn("flex size-7 shrink-0 items-center justify-center rounded-full border-2 border-muted bg-background font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=completed]:border-primary data-[state=active]:bg-primary data-[state=completed]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:text-primary-foreground", className),
+		children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : stepPosition
+	});
+}
+function StepperSeparator(props) {
+	const { className, asChild, forceMount = false, ref,...separatorProps } = props;
+	const context = useStepperContext(SEPARATOR_NAME);
+	const itemContext = useStepperItemContext(SEPARATOR_NAME);
+	const value = useStore((state) => state.value);
+	const steps = useStore((state) => state.steps);
+	const orientation = context.orientation;
+	const stepIndex = Array.from(steps.keys()).indexOf(itemContext.value);
+	const isLastStep = stepIndex === steps.size - 1;
+	if (isLastStep && !forceMount) return null;
+	const dataState = getDataState(value, itemContext.value, itemContext.stepState, steps, "separator");
+	const SeparatorPrimitive$1 = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(SeparatorPrimitive$1, {
+		role: "separator",
+		"aria-hidden": "true",
+		"aria-orientation": orientation,
+		"data-orientation": orientation,
+		"data-state": dataState,
+		"data-slot": "stepper-separator",
+		dir: context.dir,
+		...separatorProps,
+		ref,
+		className: cn("bg-border transition-colors data-[state=active]:bg-primary data-[state=completed]:bg-primary", orientation === "horizontal" ? "h-px flex-1" : "h-10 w-px", className)
+	});
+}
+function StepperTitle(props) {
+	const { className, asChild, ref,...titleProps } = props;
+	const context = useStepperContext(TITLE_NAME);
+	const itemContext = useStepperItemContext(TITLE_NAME);
+	const titleId = getId(context.rootId, "title", itemContext.value);
+	const TitlePrimitive = asChild ? Slot : "span";
+	return /* @__PURE__ */ jsx(TitlePrimitive, {
+		id: titleId,
+		"data-slot": "title",
+		dir: context.dir,
+		...titleProps,
+		ref,
+		className: cn("font-medium text-sm", className)
+	});
+}
+function StepperDescription(props) {
+	const { className, asChild, ref,...descriptionProps } = props;
+	const context = useStepperContext(DESCRIPTION_NAME);
+	const itemContext = useStepperItemContext(DESCRIPTION_NAME);
+	const descriptionId = getId(context.rootId, "description", itemContext.value);
+	const DescriptionPrimitive = asChild ? Slot : "span";
+	return /* @__PURE__ */ jsx(DescriptionPrimitive, {
+		id: descriptionId,
+		"data-slot": "description",
+		dir: context.dir,
+		...descriptionProps,
+		ref,
+		className: cn("text-muted-foreground text-xs", className)
+	});
+}
+function StepperContent(props) {
+	const { value: valueProp, asChild, forceMount = false, ref, className,...contentProps } = props;
+	const context = useStepperContext(CONTENT_NAME);
+	const value = useStore((state) => state.value);
+	const contentId = getId(context.rootId, "content", valueProp);
+	const triggerId = getId(context.rootId, "trigger", valueProp);
+	if (valueProp !== value && !forceMount) return null;
+	const ContentPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(ContentPrimitive, {
+		id: contentId,
+		role: "tabpanel",
+		"aria-labelledby": triggerId,
+		"data-slot": "stepper-content",
+		dir: context.dir,
+		...contentProps,
+		ref,
+		className: cn("flex-1 outline-none", className)
+	});
+}
+function StepperPrev(props) {
+	const { asChild, onClick: onClickProp, disabled,...prevProps } = props;
+	const store = useStoreContext(PREV_NAME);
+	const value = useStore((state) => state.value);
+	const steps = useStore((state) => state.steps);
+	const propsRef = useAsRef({ onClick: onClickProp });
+	const stepKeys = Array.from(steps.keys());
+	const currentIndex = value ? stepKeys.indexOf(value) : -1;
+	const isDisabled = disabled || currentIndex <= 0;
+	const onClick = React$5.useCallback((event) => {
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented || isDisabled) return;
+		const prevIndex = Math.max(currentIndex - 1, 0);
+		const prevStepValue = stepKeys[prevIndex];
+		if (prevStepValue) store.setState("value", prevStepValue);
+	}, [
+		propsRef,
+		isDisabled,
+		currentIndex,
+		stepKeys,
+		store
+	]);
+	const PrevPrimitive = asChild ? Slot : "button";
+	return /* @__PURE__ */ jsx(PrevPrimitive, {
+		type: "button",
+		"data-slot": "stepper-prev",
+		disabled: isDisabled,
+		...prevProps,
+		onClick
+	});
+}
+function StepperNext(props) {
+	const { asChild, onClick: onClickProp, disabled,...nextProps } = props;
+	const store = useStoreContext(NEXT_NAME);
+	const value = useStore((state) => state.value);
+	const steps = useStore((state) => state.steps);
+	const propsRef = useAsRef({ onClick: onClickProp });
+	const stepKeys = Array.from(steps.keys());
+	const currentIndex = value ? stepKeys.indexOf(value) : -1;
+	const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
+	const onClick = React$5.useCallback(async (event) => {
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented || isDisabled) return;
+		const nextIndex = Math.min(currentIndex + 1, stepKeys.length - 1);
+		const nextStepValue = stepKeys[nextIndex];
+		if (nextStepValue) await store.setStateWithValidation(nextStepValue, "next");
+	}, [
+		propsRef,
+		isDisabled,
+		currentIndex,
+		stepKeys,
+		store
+	]);
+	const NextPrimitive = asChild ? Slot : "button";
+	return /* @__PURE__ */ jsx(NextPrimitive, {
+		type: "button",
+		"data-slot": "stepper-next",
+		disabled: isDisabled,
+		...nextProps,
+		onClick
+	});
+}
+
 //#endregion
 //#region src/switch/switch.tsx
 const Switch = React$4.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
@@ -10039,5 +11299,5 @@ const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onTogg
 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 };
+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, DynamicTabbedSidebar, 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, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, 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, SidebarIdContext, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarResizeContext, SidebarSeparator, SidebarStoreContext, SidebarTab, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperSeparator, StepperTitle, StepperTrigger, 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, useSidebarTabs, useStore as useStepper };
 //# sourceMappingURL=index.js.map