@ikatec/nebula-react 1.4.1-beta.1 → 1.4.1-beta.3

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React35 from 'react';
-import React35__default, { createContext, forwardRef, useMemo, useState, useEffect, useCallback, useContext, useRef, useId } from 'react';
+import * as React31 from 'react';
+import React31__default, { createContext, forwardRef, useMemo, useState, useEffect, useCallback, useContext, useRef, useId } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { extendTailwindMerge } from 'tailwind-merge';
@@ -29,7 +29,7 @@ import { ptBR, enUS, es } from 'react-day-picker/locale';
 import { useMask } from '@react-input/mask';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { defaultDropAnimationSideEffects, MeasuringStrategy, useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, DndContext, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { defaultDropAnimationSideEffects, MeasuringStrategy, useDndContext, useDroppable, useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, pointerWithin, rectIntersection, DndContext, DragOverlay } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy, useSortable, defaultAnimateLayoutChanges, sortableKeyboardCoordinates, arrayMove, horizontalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -78,11 +78,11 @@ function cn(...inputs) {
   return customTwMerge(nebulaClass, clsx(inputs));
 }
 var processChildren = (children) => {
-  return React35__default.Children.map(children, (child) => {
+  return React31__default.Children.map(children, (child) => {
     if (typeof child === "string") {
       return /* @__PURE__ */ jsx("span", { className: "nebula-ds px-2", children: child });
     }
-    if (React35__default.isValidElement(child) && child.type === React35__default.Fragment) {
+    if (React31__default.isValidElement(child) && child.type === React31__default.Fragment) {
       return processChildren(child.props.children);
     }
     return child;
@@ -174,7 +174,7 @@ var buttonVariantsConfig = cva(
     }
   }
 );
-var Button = React35.forwardRef(
+var Button = React31.forwardRef(
   ({
     className,
     variant: variant3,
@@ -239,7 +239,7 @@ var badgeVariantsConfig = cva(
     }
   }
 );
-var Badge = React35.forwardRef(
+var Badge = React31.forwardRef(
   ({ className, variant: variant3, size: size4, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -323,7 +323,7 @@ var alertVariantsConfig = cva(
   }
 );
 var alertVariants = extractVariants(variants);
-var Alert = React35.forwardRef(
+var Alert = React31.forwardRef(
   ({ className, variant: variant3, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -335,7 +335,7 @@ var Alert = React35.forwardRef(
   )
 );
 Alert.displayName = "Alert";
-var AlertTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h5",
   {
     ref,
@@ -344,7 +344,7 @@ var AlertTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDescription = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -353,7 +353,7 @@ var AlertDescription = React35.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDescription.displayName = "AlertDescription";
-var AlertButton = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertButton = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "button",
   {
     ref,
@@ -364,9 +364,9 @@ var AlertButton = React35.forwardRef(({ className, ...props }, ref) => /* @__PUR
 AlertButton.displayName = "AlertButton";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React35.forwardRef(
+var PopoverContent = React31.forwardRef(
   ({ className, align = "center", sideOffset = 4, portal = false, ...props }, ref) => {
-    const Comp = portal ? PopoverPrimitive.Portal : React35.Fragment;
+    const Comp = portal ? PopoverPrimitive.Portal : React31.Fragment;
     return /* @__PURE__ */ jsx(Comp, { children: /* @__PURE__ */ jsx(
       PopoverPrimitive.Content,
       {
@@ -394,7 +394,7 @@ var PopoverContent = React35.forwardRef(
   }
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Label = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -406,7 +406,7 @@ var Label = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var Table = React35.forwardRef(({ className, noCardWrapper = false, ...props }, ref) => {
+var Table = React31.forwardRef(({ className, noCardWrapper = false, ...props }, ref) => {
   if (noCardWrapper) {
     return /* @__PURE__ */ jsx(
       "table",
@@ -427,9 +427,9 @@ var Table = React35.forwardRef(({ className, noCardWrapper = false, ...props },
   ) });
 });
 Table.displayName = "Table";
-var TableHeader = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -438,7 +438,7 @@ var TableBody = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -469,7 +469,7 @@ var tableRowVariantsConfig = cva(
     }
   }
 );
-var TableRow = React35.forwardRef(
+var TableRow = React31.forwardRef(
   ({ className, variant: variant3 = "first", ...props }, ref) => /* @__PURE__ */ jsx(
     "tr",
     {
@@ -480,7 +480,7 @@ var TableRow = React35.forwardRef(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -492,7 +492,7 @@ var TableHead = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -504,14 +504,14 @@ var TableCell = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 text-sm", className), ...props }));
+var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 text-sm", className), ...props }));
 TableCaption.displayName = "TableCaption";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React35.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React31.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -543,8 +543,8 @@ var DropdownMenuSubTrigger = React35.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React35.forwardRef(({ className, portal = false, ...props }, ref) => {
-  const Comp = portal ? DropdownMenuPrimitive.Portal : React35.Fragment;
+var DropdownMenuSubContent = React31.forwardRef(({ className, portal = false, ...props }, ref) => {
+  const Comp = portal ? DropdownMenuPrimitive.Portal : React31.Fragment;
   return /* @__PURE__ */ jsx(Comp, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.SubContent,
     {
@@ -569,8 +569,8 @@ var DropdownMenuSubContent = React35.forwardRef(({ className, portal = false, ..
   ) });
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React35.forwardRef(({ className, sideOffset = 4, portal = false, ...props }, ref) => {
-  const Comp = portal ? DropdownMenuPrimitive.Portal : React35.Fragment;
+var DropdownMenuContent = React31.forwardRef(({ className, sideOffset = 4, portal = false, ...props }, ref) => {
+  const Comp = portal ? DropdownMenuPrimitive.Portal : React31.Fragment;
   return /* @__PURE__ */ jsx(Comp, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
     {
@@ -598,7 +598,7 @@ var DropdownMenuContent = React35.forwardRef(({ className, sideOffset = 4, porta
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React35.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React31.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -631,7 +631,7 @@ var DropdownMenuItem = React35.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React35.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React31.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -669,7 +669,7 @@ var DropdownMenuCheckboxItem = React35.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React31.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -705,7 +705,7 @@ var DropdownMenuRadioItem = React35.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React35.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React31.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -725,7 +725,7 @@ var DropdownMenuLabel = React35.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -775,7 +775,7 @@ var separatorVariantsConfig = cva("shrink-0 bg-separator-border-default", {
   }
 });
 var separatorVariants = extractVariants(variants3);
-var Separator2 = React35.forwardRef(
+var Separator2 = React31.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       SeparatorPrimitive.Root,
@@ -824,7 +824,7 @@ var spaceVariantsConfig = cva("flex items-start justify-start", {
     direction: "row"
   }
 });
-var Space = React35__default.forwardRef(
+var Space = React31__default.forwardRef(
   ({ size: size4, direction: direction2, className, children }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2076,7 +2076,7 @@ var tagVariantsConfig = cva("w-2 h-2 block rounded-sm", {
     color
   }
 });
-var Tag = React35.forwardRef(
+var Tag = React31.forwardRef(
   ({ className, color: color2, children, onDelete, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -2231,12 +2231,12 @@ var StyledAsyncCreatable = createStyledSelect(
   AsyncCreatable,
   "AsyncCreatable"
 );
-var InputText = React35.forwardRef(
+var InputText = React31.forwardRef(
   ({ className, isError = false, onClean, disabled, suffix, ...props }, ref) => {
     const icon = "icon" in props ? props.icon : null;
     const iconPlacement = "iconPlacement" in props || props.type !== "password" ? props.iconPlacement || "start" : null;
     const initialInputType = props.type || "text";
-    const [type, setType] = React35.useState(initialInputType);
+    const [type, setType] = React31.useState(initialInputType);
     const iconClass = {
       "text-inputText-icon-danger": isError,
       "text-inputText-icon-default focus:text-inputText-icon-focus": !isError && !props.value,
@@ -2344,7 +2344,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2363,9 +2363,9 @@ var DialogOverlay = React35.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React35.forwardRef(
+var DialogContent = React31.forwardRef(
   ({ className, children, portal = false, showClose = true, ...props }, ref) => {
-    const Comp = portal ? DialogPortal : React35.Fragment;
+    const Comp = portal ? DialogPortal : React31.Fragment;
     return /* @__PURE__ */ jsxs(Comp, { children: [
       /* @__PURE__ */ jsx(DialogOverlay, {}),
       /* @__PURE__ */ jsxs(
@@ -2444,7 +2444,7 @@ var DialogFooter = ({
   ...props
 }) => /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), ...props });
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -2456,7 +2456,7 @@ var DialogTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -2468,7 +2468,7 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -2480,8 +2480,8 @@ var AlertDialogOverlay = React35.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React35.forwardRef(({ className, portal = false, ...props }, ref) => {
-  const Comp = portal ? AlertDialogPortal : React35.Fragment;
+var AlertDialogContent = React31.forwardRef(({ className, portal = false, ...props }, ref) => {
+  const Comp = portal ? AlertDialogPortal : React31.Fragment;
   return /* @__PURE__ */ jsxs(Comp, { children: [
     /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx(
@@ -2517,7 +2517,7 @@ var AlertDialogFooter = ({
   ...props
 }) => /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), ...props });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -2529,7 +2529,7 @@ var AlertDialogTitle = React35.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -2538,7 +2538,7 @@ var AlertDialogDescription = React35.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React35.forwardRef(({ children, className, variant: variant3, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React31.forwardRef(({ children, className, variant: variant3, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -2548,7 +2548,7 @@ var AlertDialogAction = React35.forwardRef(({ children, className, variant: vari
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React35.forwardRef(({ children, className, variant: variant3 = "secondary", ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React31.forwardRef(({ children, className, variant: variant3 = "secondary", ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -2558,7 +2558,7 @@ var AlertDialogCancel = React35.forwardRef(({ children, className, variant: vari
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-var Checkbox = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "nebula-ds relative", children: /* @__PURE__ */ jsx("div", { className: "nebula-ds relative", children: /* @__PURE__ */ jsx(
+var Checkbox = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "nebula-ds relative", children: /* @__PURE__ */ jsx("div", { className: "nebula-ds relative", children: /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -2613,7 +2613,7 @@ var Drawer = DialogPrimitive.Root;
 var DrawerTrigger = DialogPrimitive.Trigger;
 var DrawerClose = DialogPrimitive.Close;
 var DrawerPortal = DialogPrimitive.Portal;
-var DrawerOverlay = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerOverlay = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     className: cn(
@@ -2638,8 +2638,8 @@ var DrawerVariants = cva("fixed flex flex-col z-50 shadow-lg", {
     side: "right"
   }
 });
-var DrawerContent = React35.forwardRef(({ side = "right", className, portal = false, children, ...props }, ref) => {
-  const Comp = portal ? DrawerPortal : React35.Fragment;
+var DrawerContent = React31.forwardRef(({ side = "right", className, portal = false, children, ...props }, ref) => {
+  const Comp = portal ? DrawerPortal : React31.Fragment;
   return /* @__PURE__ */ jsxs(Comp, { children: [
     /* @__PURE__ */ jsx(DrawerOverlay, {}),
     /* @__PURE__ */ jsx(
@@ -2705,7 +2705,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -2717,7 +2717,7 @@ var DrawerTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = DialogPrimitive.Title.displayName;
-var DrawerDescription = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerDescription = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -2726,9 +2726,9 @@ var DrawerDescription = React35.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DrawerDescription.displayName = DialogPrimitive.Description.displayName;
-var Breadcrumb = React35.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+var Breadcrumb = React31.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbList = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ol",
   {
     ref,
@@ -2740,7 +2740,7 @@ var BreadcrumbList = React35.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbItem = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "li",
   {
     ref,
@@ -2752,7 +2752,7 @@ var BreadcrumbItem = React35.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React35.forwardRef(({ asChild, className, ...props }, ref) => {
+var BreadcrumbLink = React31.forwardRef(({ asChild, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -2767,7 +2767,7 @@ var BreadcrumbLink = React35.forwardRef(({ asChild, className, ...props }, ref)
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbPage = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "span",
   {
     ref,
@@ -2814,7 +2814,7 @@ var BreadcrumbEllipsis = ({
   }
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-var Switch = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -2873,7 +2873,7 @@ var Switch = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
-var Tooltip = React35.forwardRef(
+var Tooltip = React31.forwardRef(
   ({
     children,
     content: content2,
@@ -2884,7 +2884,7 @@ var Tooltip = React35.forwardRef(
     className,
     ...props
   }, ref) => {
-    const Comp = portal ? TooltipPrimitive.Portal : React35.Fragment;
+    const Comp = portal ? TooltipPrimitive.Portal : React31.Fragment;
     return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [
       /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { type: "button", children }),
       /* @__PURE__ */ jsx(Comp, { children: /* @__PURE__ */ jsxs(
@@ -3031,11 +3031,11 @@ AccordionContent.displayName = "AccordionContent";
 AccordionTrigger.displayName = "AccordionTrigger";
 AccordionTitle.displayName = "AccordionTitle";
 AccordionDescription.displayName = "AccordionDescription";
-var TabsContext = React35.createContext({});
-var Tabs = React35.forwardRef(({ isFitted, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { isFitted }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children }) }));
+var TabsContext = React31.createContext({});
+var Tabs = React31.forwardRef(({ isFitted, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { isFitted }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children }) }));
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React35.forwardRef(({ className, ...props }, ref) => {
-  const { isFitted } = React35.useContext(TabsContext);
+var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
+  const { isFitted } = React31.useContext(TabsContext);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
@@ -3056,8 +3056,8 @@ var TabsList = React35.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React35.forwardRef(({ className, ...props }, ref) => {
-  const { isFitted } = React35.useContext(TabsContext);
+var TabsTrigger = React31.forwardRef(({ className, ...props }, ref) => {
+  const { isFitted } = React31.useContext(TabsContext);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
     {
@@ -3096,7 +3096,7 @@ var TabsTrigger = React35.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -3160,7 +3160,7 @@ function ToastComponent({
   options,
   t
 }) {
-  const CustomIcon = React35__default.isValidElement(options?.icon) ? React35__default.cloneElement(options.icon, {
+  const CustomIcon = React31__default.isValidElement(options?.icon) ? React31__default.cloneElement(options.icon, {
     className: cn("text-toast-icon-default", options.icon.props.className),
     size: 20
   }) : null;
@@ -3286,15 +3286,15 @@ var toast = {
   custom,
   promise
 };
-var ActionBar = React35.forwardRef(({ ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { modal: false, ...props }));
+var ActionBar = React31.forwardRef(({ ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { modal: false, ...props }));
 ActionBar.displayName = "ActionBar";
-var ActionBarTrigger = React35.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...props }));
+var ActionBarTrigger = React31.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...props }));
 ActionBarTrigger.displayName = "ActionBarTrigger";
 var ActionBarPortal = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Portal, { ...props });
 ActionBarPortal.displayName = "ActionBarPortal";
-var ActionBarClose = React35.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, ...props }));
+var ActionBarClose = React31.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, ...props }));
 ActionBarClose.displayName = "ActionBarClose";
-var ActionBarButton = React35.forwardRef(
+var ActionBarButton = React31.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Button,
@@ -3309,7 +3309,7 @@ var ActionBarButton = React35.forwardRef(
   }
 );
 ActionBarButton.displayName = "ActionBarButton";
-var ActionBarDivider = React35.forwardRef(({ className, ...props }, ref) => {
+var ActionBarDivider = React31.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Separator2,
     {
@@ -3321,8 +3321,8 @@ var ActionBarDivider = React35.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ActionBarDivider.displayName = "ActionBarDivider";
-var ActionBarContent = React35.forwardRef(({ className, children, portal = false, ...props }, ref) => {
-  const Comp = portal ? ActionBarPortal : React35.Fragment;
+var ActionBarContent = React31.forwardRef(({ className, children, portal = false, ...props }, ref) => {
+  const Comp = portal ? ActionBarPortal : React31.Fragment;
   return /* @__PURE__ */ jsx(Comp, { children: /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
     {
@@ -3370,7 +3370,7 @@ var Heading = forwardRef(
       [level]
     );
     if (!element) return null;
-    return React35__default.createElement(element, {
+    return React31__default.createElement(element, {
       ...rest,
       ref,
       className: cn(headingStyles, className)
@@ -3470,7 +3470,7 @@ var FlagComponent = ({ country, countryName }) => {
   const Flag = flags[country];
   return /* @__PURE__ */ jsx("span", { className: "nebula-ds w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ jsx(Flag, { title: countryName }) : /* @__PURE__ */ jsx(PhoneIcon, { size: 16, "aria-hidden": "true" }) });
 };
-var PhoneInput = React35__default.forwardRef(({ className, ...props }, ref) => {
+var PhoneInput = React31__default.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex items-center justify-center rounded-e-[20px] w-full", children: [
     /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[1px] h-5 z-10" }),
     /* @__PURE__ */ jsx(
@@ -3561,7 +3561,7 @@ function InputPhone({
     }
   );
 }
-var Skeleton = React35__default.forwardRef(
+var Skeleton = React31__default.forwardRef(
   ({ className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -5053,7 +5053,7 @@ function FileUpload({
   ] });
 }
 FileUpload.displayName = "FileUpload";
-var TextArea = React35.forwardRef(
+var TextArea = React31.forwardRef(
   ({
     className,
     isError = false,
@@ -5065,14 +5065,14 @@ var TextArea = React35.forwardRef(
     asInput,
     ...props
   }, ref) => {
-    const innerRef = React35.useRef(
+    const innerRef = React31.useRef(
       null
     );
-    const [count, setCount] = React35.useState(String(props.value ?? "").length);
+    const [count, setCount] = React31.useState(String(props.value ?? "").length);
     const countParts = [count, maxLength].filter(
       (part) => typeof part === "number"
     );
-    React35.useEffect(() => {
+    React31.useEffect(() => {
       const textarea = innerRef.current;
       if (!textarea || !autoResize) return;
       const adjustHeight = () => {
@@ -5085,7 +5085,7 @@ var TextArea = React35.forwardRef(
         textarea.removeEventListener("input", adjustHeight);
       };
     }, [asInput, autoResize, props.value]);
-    React35.useImperativeHandle(ref, () => innerRef.current);
+    React31.useImperativeHandle(ref, () => innerRef.current);
     return /* @__PURE__ */ jsxs("div", { className: "nebula-ds relative w-full", children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -5850,10 +5850,10 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const [internalValues, setInternalValues] = React35.useState(
+  const [internalValues, setInternalValues] = React31.useState(
     Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]
   );
-  React35.useEffect(() => {
+  React31.useEffect(() => {
     if (value !== void 0) {
       setInternalValues(Array.isArray(value) ? value : [value]);
     }
@@ -5906,7 +5906,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: internalValues.length }, (_, index) => /* @__PURE__ */ jsx(React35.Fragment, { children: renderThumb() }, index))
+        Array.from({ length: internalValues.length }, (_, index) => /* @__PURE__ */ jsx(React31.Fragment, { children: renderThumb() }, index))
       ]
     }
   );
@@ -6440,8 +6440,8 @@ function Stepper({
   className,
   ...props
 }) {
-  const [activeStep, setInternalStep] = React35.useState(defaultValue);
-  const setActiveStep = React35.useCallback(
+  const [activeStep, setInternalStep] = React31.useState(defaultValue);
+  const setActiveStep = React31.useCallback(
     (step) => {
       if (value === void 0) {
         setInternalStep(step);
@@ -6532,7 +6532,7 @@ function StepperTrigger({
 }) {
   const { setActiveStep } = useStepper();
   const { step, isDisabled } = useStepItem();
-  const handleClick = React35.useCallback(
+  const handleClick = React31.useCallback(
     (e) => {
       if (isClickable) {
         setActiveStep(step);
@@ -6907,18 +6907,45 @@ var DEFAULT_MEASURING = {
 };
 var DEFAULT_VIRTUAL_CARD_HEIGHT = 96;
 var DEFAULT_LOAD_MORE_OFFSET = 120;
-var KanbanColumnContext = React35.createContext(null);
-var KanbanColumn = React35.forwardRef(
+var KanbanColumnContext = React31.createContext(null);
+var KanbanColumn = React31.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("min-h-[320px]", className), ...props });
   }
 );
 KanbanColumn.displayName = "KanbanColumn";
-var KanbanColumnHeader = React35.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex", className), ...props });
+var KanbanColumnHeader = React31.forwardRef(({ className, ...props }, ref) => {
+  const context = React31.useContext(KanbanColumnContext);
+  const reactId = React31.useId();
+  const { active } = useDndContext();
+  const droppableId = context ? `${context.columnId}-header-droppable` : `kanban-column-header-${reactId}`;
+  const isCardDragActive = active?.data.current?.type === "card";
+  const { setNodeRef } = useDroppable({
+    id: droppableId,
+    data: {
+      type: "column-droppable",
+      columnId: context?.columnId ?? droppableId,
+      ordering: context?.ordering ?? "manual",
+      allowDrop: context?.allowDrop ?? false,
+      location: "header"
+    },
+    disabled: !context || context.allowDrop === false || !isCardDragActive
+  });
+  const mergedRef = React31.useCallback(
+    (node) => {
+      setNodeRef(node);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref, setNodeRef]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: mergedRef, className: cn("flex", className), ...props });
 });
 KanbanColumnHeader.displayName = "KanbanColumnHeader";
-var KanbanColumnTitle = React35.forwardRef(({ className, ...props }, ref) => {
+var KanbanColumnTitle = React31.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "h3",
     {
@@ -6929,11 +6956,38 @@ var KanbanColumnTitle = React35.forwardRef(({ className, ...props }, ref) => {
   );
 });
 KanbanColumnTitle.displayName = "KanbanColumnTitle";
-var KanbanColumnFooter = React35.forwardRef(({ className, ...props }, ref) => {
+var KanbanColumnFooter = React31.forwardRef(({ className, ...props }, ref) => {
+  const context = React31.useContext(KanbanColumnContext);
+  const reactId = React31.useId();
+  const { active } = useDndContext();
+  const droppableId = context ? `${context.columnId}-footer-droppable` : `kanban-column-footer-${reactId}`;
+  const isCardDragActive = active?.data.current?.type === "card";
+  const { setNodeRef } = useDroppable({
+    id: droppableId,
+    data: {
+      type: "column-droppable",
+      columnId: context?.columnId ?? droppableId,
+      ordering: context?.ordering ?? "manual",
+      allowDrop: context?.allowDrop ?? false,
+      location: "footer"
+    },
+    disabled: !context || context.allowDrop === false || !isCardDragActive
+  });
+  const mergedRef = React31.useCallback(
+    (node) => {
+      setNodeRef(node);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref, setNodeRef]
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      ref: mergedRef,
       className: cn(
         "border-t border-box-border px-5 py-4 text-xs text-neutral-500",
         className
@@ -6943,16 +6997,16 @@ var KanbanColumnFooter = React35.forwardRef(({ className, ...props }, ref) => {
   );
 });
 KanbanColumnFooter.displayName = "KanbanColumnFooter";
-var KanbanCard = React35.forwardRef(
+var KanbanCard = React31.forwardRef(
   ({ className, isDragging, isOverlay, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(
-          "group relative rounded-2xl border border-box-border/80 bg-box-background-primary px-5 py-4 text-left shadow-[0_12px_30px_-20px_rgba(16,24,40,0.28)] transition-all duration-150 hover:-translate-y-[1px] hover:shadow-[0_18px_42px_-22px_rgba(16,24,40,0.35)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-button-primary-border-focus",
-          isDragging && "ring-2 ring-button-primary-border-focus shadow-[0_24px_52px_-22px_rgba(16,24,40,0.45)]",
-          isOverlay && "ring-4 ring-button-primary-border-focus/60 shadow-[0_26px_56px_-20px_rgba(16,24,40,0.5)]",
+          "group relative rounded-2xl border border-box-border/80 bg-box-background-primary px-5 py-4 text-left transition-all duration-150 hover:-translate-y-[1px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-button-primary-border-focus",
+          isDragging && "ring-2 ring-button-primary-border-focus",
+          isOverlay && "ring-4 ring-button-primary-border-focus/60",
           className
         ),
         ...props
@@ -6961,14 +7015,14 @@ var KanbanCard = React35.forwardRef(
   }
 );
 KanbanCard.displayName = "KanbanCard";
-var KanbanColumnDragHandle = React35.forwardRef(({ className, children, ...props }, ref) => {
-  const context = React35.useContext(KanbanColumnContext);
+var KanbanColumnDragHandle = React31.forwardRef(({ className, children, ...props }, ref) => {
+  const context = React31.useContext(KanbanColumnContext);
   if (!context) {
     throw new Error(
       "KanbanColumnDragHandle must be used inside a KanbanBoard column"
     );
   }
-  const mergedRef = React35.useCallback(
+  const mergedRef = React31.useCallback(
     (node) => {
       context.setActivatorNodeRef(node);
       if (typeof ref === "function") {
@@ -7021,30 +7075,6 @@ function getCardSortDisabled(card, column) {
     droppable: disableDroppable
   };
 }
-function calculateManualInsertionIndex({
-  overData,
-  fromColumnId,
-  targetColumnId,
-  columns
-}) {
-  const targetColumn = columns.find((column) => column.id === targetColumnId);
-  if (!targetColumn) {
-    return null;
-  }
-  if (overData.type === "column-droppable") {
-    const activeIsSameColumn2 = targetColumnId === fromColumnId;
-    if (activeIsSameColumn2) {
-      return targetColumn.cards.length - 1;
-    }
-    return targetColumn.cards.length;
-  }
-  const activeIsSameColumn = targetColumnId === fromColumnId;
-  const overIndex = overData.index;
-  if (activeIsSameColumn) {
-    return clampInsertIndex(overIndex, targetColumn.cards.length - 1);
-  }
-  return clampInsertIndex(overIndex, targetColumn.cards.length);
-}
 function moveCardBetweenColumns({
   columns,
   card,
@@ -7179,7 +7209,7 @@ function KanbanSortableCard({
     transition,
     isDragging
   } = sortable;
-  const composedRef = React35.useCallback(
+  const composedRef = React31.useCallback(
     (node) => {
       setNodeRef(node);
       if (virtualizationEnabled && node) {
@@ -7243,8 +7273,8 @@ var KanbanColumnBodyInner = ({
   isManualOrdering,
   isDropTarget
 }, ref) => {
-  const scrollRef = React35.useRef(null);
-  const combinedRef = React35.useCallback(
+  const scrollRef = React31.useRef(null);
+  const combinedRef = React31.useCallback(
     (node) => {
       scrollRef.current = node;
       if (typeof ref === "function") {
@@ -7257,7 +7287,7 @@ var KanbanColumnBodyInner = ({
   );
   const virtualization = column.virtualization;
   const virtualizationEnabled = Boolean(virtualization?.enabled);
-  const cardIds = React35.useMemo(
+  const cardIds = React31.useMemo(
     () => column.cards.map((card) => getCardId(card)),
     [column.cards, getCardId]
   );
@@ -7269,7 +7299,7 @@ var KanbanColumnBodyInner = ({
     enabled: virtualizationEnabled
   });
   const { onLoadMore, hasMore, isLoadingMore, loadMoreOffset } = column;
-  React35.useEffect(() => {
+  React31.useEffect(() => {
     if (!onLoadMore || !hasMore || isLoadingMore) {
       return;
     }
@@ -7290,7 +7320,7 @@ var KanbanColumnBodyInner = ({
     };
   }, [hasMore, isLoadingMore, loadMoreOffset, onLoadMore]);
   const columnBodyClasses = cn(
-    "flex-1 overflow-y-auto px-4 pb-4 pt-1",
+    "flex-1 overflow-y-auto px-2 pb-4 pt-2",
     column.cards.length === 0 && "flex items-center justify-center"
   );
   const emptyState = renderEmptyState?.(columnContext) ?? column.emptyState ?? defaultRenderEmptyState();
@@ -7341,7 +7371,7 @@ var KanbanColumnBodyInner = ({
           );
         })
       }
-    ) : /* @__PURE__ */ jsx("div", { className: "nebula-ds flex flex-col gap-4", children: column.cards.map((card, index) => /* @__PURE__ */ jsx(
+    ) : /* @__PURE__ */ jsx("div", { className: "nebula-ds flex flex-col gap-2", children: column.cards.map((card, index) => /* @__PURE__ */ jsx(
       KanbanSortableCard,
       {
         card,
@@ -7359,7 +7389,7 @@ var KanbanColumnBodyInner = ({
     column.hasMore && column.isLoadingMore ? /* @__PURE__ */ jsx("div", { className: "nebula-ds mt-3 flex justify-center text-xs text-neutral-500", children: "..." }) : null
   ] }) });
 };
-var KanbanColumnBodyBase = React35.forwardRef(KanbanColumnBodyInner);
+var KanbanColumnBodyBase = React31.forwardRef(KanbanColumnBodyInner);
 KanbanColumnBodyBase.displayName = "KanbanColumnBody";
 var KanbanColumnBody = KanbanColumnBodyBase;
 var KANBAN_COLUMN_BASE_CLASSNAME = "flex h-full w-full min-w-[360px] max-w-[360px] flex-col rounded-2xl box-content border bg-table-background transition-[box-shadow,transform,background-color]";
@@ -7400,13 +7430,27 @@ function KanbanSortableColumn({
       type: "column-droppable",
       columnId: column.id,
       ordering: column.ordering ?? "manual",
-      allowDrop: column.allowDrop !== false
+      allowDrop: column.allowDrop !== false,
+      location: "body"
     },
     disabled: column.allowDrop === false
   });
-  const columnContextValue = React35.useMemo(
+  const { setNodeRef: setFooterDropzoneRef } = useDroppable({
+    id: `${column.id}-footer-dropzone`,
+    data: {
+      type: "column-droppable",
+      columnId: column.id,
+      ordering: column.ordering ?? "manual",
+      allowDrop: column.allowDrop !== false,
+      location: "footer"
+    },
+    disabled: column.allowDrop === false
+  });
+  const columnContextValue = React31.useMemo(
     () => ({
       columnId: column.id,
+      ordering: column.ordering ?? "manual",
+      allowDrop: column.allowDrop !== false,
       setActivatorNodeRef,
       listeners,
       attributes,
@@ -7415,8 +7459,10 @@ function KanbanSortableColumn({
     }),
     [
       attributes,
+      column.allowDrop,
       column.canDrag,
       column.id,
+      column.ordering,
       isDragging,
       listeners,
       setActivatorNodeRef
@@ -7460,7 +7506,7 @@ function KanbanSortableColumn({
             isDropTarget: columnContext.isDropTarget
           }
         ),
-        column.footer || renderColumnFooter ? renderColumnFooter ? renderColumnFooter(columnContext) : /* @__PURE__ */ jsx(KanbanColumnFooter, { children: column.footer }) : null
+        column.footer || renderColumnFooter ? renderColumnFooter ? /* @__PURE__ */ jsx("div", { ref: setFooterDropzoneRef, children: renderColumnFooter(columnContext) }) : /* @__PURE__ */ jsx(KanbanColumnFooter, { children: column.footer }) : null
       ]
     }
   ) });
@@ -7507,6 +7553,8 @@ function renderColumnOverlay({
   const computedColumnClassName = typeof columnClassName === "function" ? columnClassName(columnContext) : columnClassName;
   const overlayColumnContext = {
     columnId: activeColumn.id,
+    ordering: "manual",
+    allowDrop: false,
     setActivatorNodeRef: () => {
     },
     listeners: void 0,
@@ -7551,7 +7599,23 @@ function KanbanBoard({
   sensors: sensorsProp,
   measuring
 }) {
-  const getCardId = React35.useCallback(
+  const resolveHeaderFooterDropzone = React31.useCallback(
+    (event) => {
+      const collisions = event.collisions;
+      if (!collisions) {
+        return null;
+      }
+      for (const collision of collisions) {
+        const droppableData = collision.data?.droppableContainer?.data?.current;
+        if (droppableData?.type === "column-droppable" && (droppableData.location === "header" || droppableData.location === "footer")) {
+          return droppableData;
+        }
+      }
+      return null;
+    },
+    []
+  );
+  const getCardId = React31.useCallback(
     (card) => getCardIdProp ? getCardIdProp(card) : card.id,
     [getCardIdProp]
   );
@@ -7573,22 +7637,22 @@ function KanbanBoard({
   );
   const sensors = sensorsProp ?? defaultSensors;
   const measuringConfig = measuring ?? DEFAULT_MEASURING;
-  const columnMap = React35.useMemo(
+  const columnMap = React31.useMemo(
     () => new Map(columns.map((column) => [column.id, column])),
     [columns]
   );
-  const manualDropPosition = React35.useRef(null);
-  const [activeCard, setActiveCard] = React35.useState(null);
-  const [activeColumn, setActiveColumn] = React35.useState(null);
-  const [hoveredColumnId, setHoveredColumnId] = React35.useState(null);
-  const [projectedColumns, setProjectedColumns] = React35.useState(null);
+  const manualDropPosition = React31.useRef(null);
+  const [activeCard, setActiveCard] = React31.useState(null);
+  const [activeColumn, setActiveColumn] = React31.useState(null);
+  const [hoveredColumnId, setHoveredColumnId] = React31.useState(null);
+  const [projectedColumns, setProjectedColumns] = React31.useState(null);
   const sanitizedColumns = projectedColumns ?? columns;
-  React35.useEffect(() => {
+  React31.useEffect(() => {
     if (!activeCard && !activeColumn) {
       setProjectedColumns(null);
     }
   }, [columns, activeCard, activeColumn]);
-  const handleDragStart = React35.useCallback(
+  const handleDragStart = React31.useCallback(
     (event) => {
       const data = event.active.data.current;
       if (!data) {
@@ -7612,7 +7676,7 @@ function KanbanBoard({
     },
     [getCardId]
   );
-  const handleDragOver = React35.useCallback(
+  const handleDragOver = React31.useCallback(
     (event) => {
       const { active, over } = event;
       if (!over) {
@@ -7629,7 +7693,6 @@ function KanbanBoard({
           return;
         }
         const fromColumnId = activeCard.columnId;
-        const activeCardId = getCardId(activeData.card);
         const baseColumns = projectedColumns ?? columns;
         if (overData?.type === "card" || overData?.type === "column-droppable") {
           const targetColumnId = overData.columnId;
@@ -7641,12 +7704,36 @@ function KanbanBoard({
           const ordering = targetColumn.ordering ?? "manual";
           setHoveredColumnId(targetColumnId);
           if (ordering === "manual") {
-            const nextIndex = calculateManualInsertionIndex({
-              overData,
-              fromColumnId,
-              targetColumnId,
-              columns: baseColumns
-            });
+            const originalTargetColumn = columns.find(
+              (column) => column.id === targetColumnId
+            );
+            const projectedTargetColumn = baseColumns.find(
+              (column) => column.id === targetColumnId
+            );
+            if (!originalTargetColumn) return;
+            const originalLength = originalTargetColumn.cards.length;
+            const activeCardId = getCardId(activeData.card);
+            let nextIndex = null;
+            if (overData.type === "column-droppable") {
+              if (overData.location === "header") {
+                nextIndex = 0;
+              } else if (fromColumnId === targetColumnId) {
+                nextIndex = originalLength - 1;
+              } else {
+                nextIndex = originalLength;
+              }
+            } else if (overData.type === "card") {
+              if (fromColumnId === targetColumnId) {
+                nextIndex = clampInsertIndex(overData.index, originalLength - 1);
+              } else {
+                const overCardId = getCardId(overData.card);
+                const projectedOverIndex = projectedTargetColumn?.cards.findIndex(
+                  (card) => getCardId(card) === overCardId
+                ) ?? -1;
+                const resolvedOverIndex = projectedOverIndex !== -1 ? projectedOverIndex : overData.index;
+                nextIndex = clampInsertIndex(resolvedOverIndex, originalLength);
+              }
+            }
             if (nextIndex === null) {
               return;
             }
@@ -7711,14 +7798,14 @@ function KanbanBoard({
     },
     [activeCard, activeColumn, columns, columnMap, getCardId, projectedColumns]
   );
-  const resetDragState = React35.useCallback(() => {
+  const resetDragState = React31.useCallback(() => {
     setActiveCard(null);
     setActiveColumn(null);
     setHoveredColumnId(null);
     setProjectedColumns(null);
     manualDropPosition.current = null;
   }, []);
-  const handleDragEnd = React35.useCallback(
+  const handleDragEnd = React31.useCallback(
     (event) => {
       const { active, over } = event;
       const activeData = active.data.current;
@@ -7734,12 +7821,14 @@ function KanbanBoard({
           resetDragState();
           return;
         }
-        if (overData.type !== "card" && overData.type !== "column-droppable") {
+        const resolvedDropzone = resolveHeaderFooterDropzone(event);
+        const resolvedOverData = resolvedDropzone ?? overData;
+        if (resolvedOverData.type !== "card" && resolvedOverData.type !== "column-droppable") {
           resetDragState();
           return;
         }
         const fromColumnId = activeCard.columnId;
-        const toColumnId = overData.columnId;
+        const toColumnId = pendingManualPosition?.columnId ?? resolvedOverData.columnId;
         const ordering = columnMap.get(toColumnId)?.ordering ?? "manual";
         const sourceColumn = columns.find(
           (column) => column.id === fromColumnId
@@ -7749,23 +7838,49 @@ function KanbanBoard({
         ) ?? 0;
         let toIndex = null;
         if (ordering === "manual") {
-          if (pendingManualPosition && pendingManualPosition.columnId === toColumnId) {
-            toIndex = pendingManualPosition.index;
-          } else {
+          const isExplicitHeaderFooterDrop = resolvedOverData.type === "column-droppable" && (resolvedOverData.location === "header" || resolvedOverData.location === "footer");
+          if (isExplicitHeaderFooterDrop) {
             const targetColumn = columns.find(
               (column) => column.id === toColumnId
             );
-            if (targetColumn && overData.type === "card") {
-              toIndex = targetColumn.cards.findIndex(
-                (card) => getCardId(card) === getCardId(overData.card)
-              );
-            } else if (targetColumn && overData.type === "column-droppable") {
+            if (!targetColumn) {
+              toIndex = null;
+            } else if (resolvedOverData.location === "header") {
+              toIndex = 0;
+            } else if (resolvedOverData.location === "footer") {
               if (fromColumnId === toColumnId) {
                 toIndex = targetColumn.cards.length - 1;
               } else {
                 toIndex = targetColumn.cards.length;
               }
             }
+          } else {
+            if (pendingManualPosition && pendingManualPosition.columnId === toColumnId) {
+              toIndex = pendingManualPosition.index;
+            } else {
+              const targetColumn = columns.find(
+                (column) => column.id === toColumnId
+              );
+              if (targetColumn && resolvedOverData.type === "card") {
+                toIndex = targetColumn.cards.findIndex(
+                  (card) => getCardId(card) === getCardId(resolvedOverData.card)
+                );
+              } else if (targetColumn && resolvedOverData.type === "column-droppable") {
+                if (resolvedOverData.location === "header") {
+                  toIndex = 0;
+                } else if (resolvedOverData.location === "footer") {
+                  if (fromColumnId === toColumnId) {
+                    toIndex = targetColumn.cards.length - 1;
+                  } else {
+                    toIndex = targetColumn.cards.length;
+                  }
+                } else if (fromColumnId === toColumnId) {
+                  toIndex = targetColumn.cards.length - 1;
+                } else {
+                  toIndex = targetColumn.cards.length;
+                }
+              }
+            }
           }
         }
         if (ordering === "external") {
@@ -7836,13 +7951,35 @@ function KanbanBoard({
       onCardDrop,
       onColumnDrop,
       projectedColumns,
-      resetDragState
+      resetDragState,
+      resolveHeaderFooterDropzone
     ]
   );
+  const collisionDetectionStrategy = React31.useCallback(
+    (args) => {
+      const baseCollisionDetection = collisionDetection ?? rectIntersection;
+      const pointerCollisions = pointerWithin(args);
+      const preferredCollision = pointerCollisions.find((collision) => {
+        const droppableData = collision.data?.droppableContainer?.data?.current;
+        return droppableData?.type === "column-droppable" && (droppableData.location === "header" || droppableData.location === "footer");
+      });
+      const baseCollisions = baseCollisionDetection(args);
+      if (!preferredCollision) {
+        return baseCollisions;
+      }
+      return [
+        preferredCollision,
+        ...baseCollisions.filter(
+          (collision) => collision.id !== preferredCollision.id
+        )
+      ];
+    },
+    [collisionDetection]
+  );
   return /* @__PURE__ */ jsxs(
     DndContext,
     {
-      collisionDetection,
+      collisionDetection: collisionDetectionStrategy,
       modifiers,
       sensors,
       measuring: measuringConfig,
@@ -7860,7 +7997,7 @@ function KanbanBoard({
               "div",
               {
                 className: cn(
-                  "flex h-full w-full gap-4 overflow-x-auto p-1",
+                  "relative flex h-full w-full gap-4 overflow-x-auto p-1",
                   className
                 ),
                 children: sanitizedColumns.map((column, index) => {