pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,147 +32,130 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var dnd_1 = require("@hello-pangea/dnd");
-var lucide_react_1 = require("lucide-react");
-var react_window_1 = require("react-window");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var usePreferences_1 = require("../../Hooks/usePreferences");
-var AccountCard_1 = __importDefault(require("./AccountCard"));
-var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
-var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
-var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
-var Button_1 = __importDefault(require("../Button/Button"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const dnd_1 = require("@hello-pangea/dnd");
+const lucide_react_1 = require("lucide-react");
+const react_window_1 = require("react-window");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const usePreferences_1 = require("../../Hooks/usePreferences");
+const AccountCard_1 = __importDefault(require("./AccountCard"));
+const HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
+const MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
+const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
+const Button_1 = __importDefault(require("../Button/Button"));
 /** Narrow rail width when a column is horizontally collapsed. */
-var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
-var KANBAN_CARD_GAP = 12;
+const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
+const KANBAN_CARD_GAP = 12;
 // Top buffer above the first card so its border + hover lift aren't clipped by the
 // scroll/virtualized list's top edge.
-var KANBAN_LIST_TOP_PAD = 6;
-var KanbanRow = react_1.default.memo(function (_a) {
-    var index = _a.index, style = _a.style, data = _a.data;
-    var items = data.items, colId = data.colId, canDrag = data.canDrag, expanded = data.expanded, onDelete = data.onDelete, onOpen = data.onOpen, canDelete = data.canDelete, setSize = data.setSize, toggleExpand = data.toggleExpand;
-    var account = items[index];
+const KANBAN_LIST_TOP_PAD = 6;
+const KanbanRow = react_1.default.memo(({ index, style, data }) => {
+    const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
+    const account = items[index];
     if (!account) {
-        return react_1.default.createElement("div", { style: style });
+        return (0, jsx_runtime_1.jsx)("div", { style: style });
     }
-    return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 } },
-            react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
-                react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
-                    var _a;
-                    return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
-                            return toggleExpand(account.id, colId, index);
-                        }, isDeletable: canDelete }))));
-                })))));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(MeasuredItem_1.default, { index: index, setSize: (i, h) => setSize(i, h, colId), children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (provided) => {
+                        var _a;
+                        return ((0, jsx_runtime_1.jsx)("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style, children: (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete }, account.id)) }));
+                    } }, account.id) }) }) }));
 });
-var NoItemsTemplate = react_1.default.memo(function (_a) {
-    var _b;
-    var column = _a.column, noItems = _a.noItems, colors = _a.colors;
-    return (react_1.default.createElement(react_2.Box, null,
-        react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[600], textAlign: "center", mt: 4 }, (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column"),
-            !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && (react_1.default.createElement(Button_1.default, { onClick: function () { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs" }, (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item")))));
+const NoItemsTemplate = react_1.default.memo(({ column, noItems, colors }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[600], textAlign: "center", mt: 4, children: (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column" }), !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs", children: (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item" }))] }) }));
 });
 function reorderColumnEntries(entries, startIndex, endIndex) {
-    var result = Array.from(entries);
-    var removed = result.splice(startIndex, 1)[0];
+    const result = Array.from(entries);
+    const [removed] = result.splice(startIndex, 1);
     result.splice(endIndex, 0, removed);
     return result;
 }
-var KanbanBoard = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    var data = _a.data, customColumns = _a.customColumns, customizeColumn = _a.customizeColumn, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _u = _a.isLoading, isLoading = _u === void 0 ? false : _u, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems, _v = _a.enableColumnCollapse, enableColumnCollapse = _v === void 0 ? false : _v, defaultCollapsedColumns = _a.collapsedColumns, onColumnCollapseChange = _a.onColumnCollapseChange, _w = _a.enableColumnReorder, enableColumnReorder = _w === void 0 ? false : _w, onColumnReorder = _a.onColumnReorder, _x = _a.preferences, preferences = _x === void 0 ? {
-        baseurl: "",
-        token: "",
-        key: "",
-        name: "",
-        page: "",
-        orgId: "",
-    } : _x;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
-    var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
-    var canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
-    var canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
-    var mergedColumns = (0, react_1.useMemo)(function () { return (__assign(__assign({}, data), (customColumns !== null && customColumns !== void 0 ? customColumns : {}))); }, [data, customColumns]);
-    var _y = (0, usePreferences_1.useGetPreferences)({
+const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
+    baseurl: "",
+    token: "",
+    key: "",
+    name: "",
+    page: "",
+    orgId: "",
+}, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
+    const canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
+    const canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
+    const canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
+    const mergedColumns = (0, react_1.useMemo)(() => ({ ...data, ...(customColumns !== null && customColumns !== void 0 ? customColumns : {}) }), [data, customColumns]);
+    const { preferences: kanbanPreferencesData, loading: preferencesLoading } = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.baseurl,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), kanbanPreferencesData = _y.preferences, preferencesLoading = _y.loading;
-    var savePreferences = (0, usePreferences_1.useSavePreferences)({
+    });
+    const { savePreferences } = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.baseurl,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }).savePreferences;
-    var kanbanPreferencesJson = (0, react_1.useMemo)(function () {
+    });
+    const kanbanPreferencesJson = (0, react_1.useMemo)(() => {
         if (kanbanPreferencesData === null || kanbanPreferencesData === void 0 ? void 0 : kanbanPreferencesData.length) {
             return kanbanPreferencesData[0].json;
         }
         return {};
     }, [kanbanPreferencesData]);
-    var kanbanPreferencesJsonRef = (0, react_1.useRef)(kanbanPreferencesJson);
+    const kanbanPreferencesJsonRef = (0, react_1.useRef)(kanbanPreferencesJson);
     kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
-    var isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
-    var _z = (0, react_1.useState)(mergedColumns), columns = _z[0], setColumns = _z[1];
-    var _0 = (0, react_1.useState)(600), containerHeight = _0[0], setContainerHeight = _0[1];
-    var _1 = (0, react_1.useState)(null), hoveredColumn = _1[0], setHoveredColumn = _1[1];
-    (0, react_1.useEffect)(function () {
+    const isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
+    const [columns, setColumns] = (0, react_1.useState)(mergedColumns);
+    const [containerHeight, setContainerHeight] = (0, react_1.useState)(600);
+    const [hoveredColumn, setHoveredColumn] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
         setColumns(mergedColumns);
     }, [mergedColumns]);
     // Responsive column width
-    var columnWidth = (0, react_2.useBreakpointValue)({
+    const columnWidth = (0, react_2.useBreakpointValue)({
         base: "16rem",
         md: "17.5rem",
         lg: "19rem",
     });
     // track expanded cards
-    var _2 = (0, react_1.useState)({}), expanded = _2[0], setExpanded = _2[1];
+    const [expanded, setExpanded] = (0, react_1.useState)({});
     /** When true, column id maps to collapsed (body hidden). */
-    var _3 = (0, react_1.useState)(function () { return (__assign({}, defaultCollapsedColumns)); }), collapsedColumns = _3[0], setCollapsedColumns = _3[1];
-    (0, react_1.useEffect)(function () {
+    const [collapsedColumns, setCollapsedColumns] = (0, react_1.useState)(() => ({ ...defaultCollapsedColumns }));
+    (0, react_1.useEffect)(() => {
         if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
             return;
         }
         if (!("collapsedColumns" in kanbanPreferencesJson)) {
             return;
         }
-        var saved = kanbanPreferencesJson.collapsedColumns;
+        const saved = kanbanPreferencesJson.collapsedColumns;
         if (saved === null ||
             typeof saved !== "object" ||
             Array.isArray(saved)) {
             return;
         }
-        var validIds = new Set(Object.keys(mergedColumns));
-        var next = {};
-        for (var _i = 0, _a = Object.entries(saved); _i < _a.length; _i++) {
-            var _b = _a[_i], k = _b[0], v = _b[1];
+        const validIds = new Set(Object.keys(mergedColumns));
+        const next = {};
+        for (const [k, v] of Object.entries(saved)) {
             if (validIds.has(k) && typeof v === "boolean") {
                 next[k] = v;
             }
         }
-        setCollapsedColumns(__assign(__assign({}, defaultCollapsedColumns), next));
+        setCollapsedColumns({
+            ...defaultCollapsedColumns,
+            ...next,
+        });
     }, [
         enableColumnCollapse,
         preferences.baseurl,
@@ -192,18 +164,20 @@ var KanbanBoard = function (_a) {
         mergedColumns,
         defaultCollapsedColumns,
     ]);
-    var toggleColumnCollapsed = (0, react_1.useCallback)(function (colId) {
-        setCollapsedColumns(function (prev) {
-            var _a;
-            var collapsed = !prev[colId];
-            var next = __assign(__assign({}, prev), (_a = {}, _a[colId] = collapsed, _a));
+    const toggleColumnCollapsed = (0, react_1.useCallback)((colId) => {
+        setCollapsedColumns((prev) => {
+            const collapsed = !prev[colId];
+            const next = { ...prev, [colId]: collapsed };
             onColumnCollapseChange === null || onColumnCollapseChange === void 0 ? void 0 : onColumnCollapseChange({
-                colId: colId,
-                collapsed: collapsed,
+                colId,
+                collapsed,
                 collapsedColumns: next,
             });
             if (preferences.baseurl && enableColumnCollapse) {
-                savePreferences(__assign(__assign({}, kanbanPreferencesJsonRef.current), { collapsedColumns: next }));
+                savePreferences({
+                    ...kanbanPreferencesJsonRef.current,
+                    collapsedColumns: next,
+                });
             }
             return next;
         });
@@ -214,33 +188,31 @@ var KanbanBoard = function (_a) {
         savePreferences,
     ]);
     /** Rotated collapsed summaries paint outside layout; reserve space so they are not clipped under the rail header. */
-    var COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
+    const COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
     // ref for lists
-    var listRefs = (0, react_1.useRef)({});
-    var containerRef = (0, react_1.useRef)(null);
+    const listRefs = (0, react_1.useRef)({});
+    const containerRef = (0, react_1.useRef)(null);
     // store measured heights
-    var _4 = (0, react_1.useState)({}), sizes = _4[0], setSizes = _4[1];
-    var hasMountedSizes = (0, react_1.useRef)(false);
+    const [sizes, setSizes] = (0, react_1.useState)({});
+    const hasMountedSizes = (0, react_1.useRef)(false);
     // Prune stale size entries when columns change (skip first render)
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!hasMountedSizes.current) {
             hasMountedSizes.current = true;
             return;
         }
-        setSizes(function (prev) {
+        setSizes((prev) => {
             if (Object.keys(prev).length === 0)
                 return prev;
-            var validKeys = new Set();
-            for (var _i = 0, _a = Object.entries(columns); _i < _a.length; _i++) {
-                var _b = _a[_i], colId = _b[0], col = _b[1];
-                for (var i = 0; i < col.items.length; i++) {
-                    validKeys.add("".concat(colId, "-").concat(i));
+            const validKeys = new Set();
+            for (const [colId, col] of Object.entries(columns)) {
+                for (let i = 0; i < col.items.length; i++) {
+                    validKeys.add(`${colId}-${i}`);
                 }
             }
-            var pruned = {};
-            var changed = false;
-            for (var _c = 0, _d = Object.keys(prev); _c < _d.length; _c++) {
-                var key = _d[_c];
+            const pruned = {};
+            let changed = false;
+            for (const key of Object.keys(prev)) {
                 if (validKeys.has(key)) {
                     pruned[key] = prev[key];
                 }
@@ -252,45 +224,43 @@ var KanbanBoard = function (_a) {
         });
     }, [columns]);
     // AccountCard's minHeight floor — kept tight so unmeasured rows don't reserve excess space; KANBAN_CARD_GAP is added below.
-    var DEFAULT_ITEM_HEIGHT = 80;
+    const DEFAULT_ITEM_HEIGHT = 80;
     // update height for an item
-    var setSize = (0, react_1.useCallback)(function (index, size, colId) {
-        var key = "".concat(colId, "-").concat(index);
-        setSizes(function (prev) {
-            var _a;
+    const setSize = (0, react_1.useCallback)((index, size, colId) => {
+        const key = `${colId}-${index}`;
+        setSizes((prev) => {
             if (prev[key] === size)
                 return prev;
-            return __assign(__assign({}, prev), (_a = {}, _a[key] = size, _a));
+            return { ...prev, [key]: size };
         });
         // Only recompute from the row that changed downward (cheaper than resetting all).
         if (listRefs.current[colId]) {
             listRefs.current[colId].resetAfterIndex(index);
         }
     }, []);
-    var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
-        var key = "".concat(colId, "-").concat(index);
+    const getItemSize = (0, react_1.useCallback)((index, _items, colId) => {
+        const key = `${colId}-${index}`;
         return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP + (index === 0 ? KANBAN_LIST_TOP_PAD : 0);
     }, [sizes]);
     // Calculate container height
-    (0, react_1.useEffect)(function () {
-        var calculateDimensions = function () {
+    (0, react_1.useEffect)(() => {
+        const calculateDimensions = () => {
             if (containerRef.current) {
-                var availableHeight = window.innerHeight - 100;
+                const availableHeight = window.innerHeight - 100;
                 setContainerHeight(Math.max(500, availableHeight));
             }
         };
         calculateDimensions();
         window.addEventListener("resize", calculateDimensions);
-        return function () {
+        return () => {
             window.removeEventListener("resize", calculateDimensions);
         };
     }, [isBoardLoading]);
     // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
     // every render (which would re-render every virtualized row).
-    var toggleExpand = (0, react_1.useCallback)(function (id, colId, index) {
-        setExpanded(function (prev) {
-            var _a;
-            var newExpanded = __assign(__assign({}, prev), (_a = {}, _a[id] = !prev[id], _a));
+    const toggleExpand = (0, react_1.useCallback)((id, colId, index) => {
+        setExpanded((prev) => {
+            const newExpanded = { ...prev, [id]: !prev[id] };
             if (listRefs.current[colId]) {
                 listRefs.current[colId].resetAfterIndex(index);
             }
@@ -298,31 +268,33 @@ var KanbanBoard = function (_a) {
         });
     }, []);
     // drag handler
-    var onDragEnd = (0, react_1.useCallback)(function (result) {
-        var _a, _b;
-        var source = result.source, destination = result.destination, type = result.type;
+    const onDragEnd = (0, react_1.useCallback)((result) => {
+        const { source, destination, type } = result;
         if (!destination)
             return;
         if (type === "COLUMN") {
             if (source.index === destination.index)
                 return;
-            var entries = Object.entries(columns);
-            var reordered = reorderColumnEntries(entries, source.index, destination.index);
-            var nextColumns = Object.fromEntries(reordered);
+            const entries = Object.entries(columns);
+            const reordered = reorderColumnEntries(entries, source.index, destination.index);
+            const nextColumns = Object.fromEntries(reordered);
             setColumns(nextColumns);
             onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(nextColumns);
             return;
         }
-        var sourceCol = columns[source.droppableId];
-        var destCol = columns[destination.droppableId];
-        var draggedItem = sourceCol === null || sourceCol === void 0 ? void 0 : sourceCol.items[source.index];
+        const sourceCol = columns[source.droppableId];
+        const destCol = columns[destination.droppableId];
+        const draggedItem = sourceCol === null || sourceCol === void 0 ? void 0 : sourceCol.items[source.index];
         if (!draggedItem || !sourceCol || !destCol)
             return;
         if (source.droppableId === destination.droppableId) {
-            var copiedItems = __spreadArray([], sourceCol.items, true);
+            const copiedItems = [...sourceCol.items];
             copiedItems.splice(source.index, 1);
             copiedItems.splice(destination.index, 0, draggedItem);
-            var nextColumns = __assign(__assign({}, columns), (_a = {}, _a[source.droppableId] = __assign(__assign({}, sourceCol), { items: copiedItems }), _a));
+            const nextColumns = {
+                ...columns,
+                [source.droppableId]: { ...sourceCol, items: copiedItems },
+            };
             setColumns(nextColumns);
             onDrag === null || onDrag === void 0 ? void 0 : onDrag({
                 from: source.droppableId,
@@ -334,11 +306,15 @@ var KanbanBoard = function (_a) {
             });
         }
         else {
-            var sourceItems = __spreadArray([], sourceCol.items, true);
-            var destItems = __spreadArray([], destCol.items, true);
+            const sourceItems = [...sourceCol.items];
+            const destItems = [...destCol.items];
             sourceItems.splice(source.index, 1);
             destItems.splice(destination.index, 0, draggedItem);
-            var nextColumns = __assign(__assign({}, columns), (_b = {}, _b[source.droppableId] = __assign(__assign({}, sourceCol), { items: sourceItems }), _b[destination.droppableId] = __assign(__assign({}, destCol), { items: destItems }), _b));
+            const nextColumns = {
+                ...columns,
+                [source.droppableId]: { ...sourceCol, items: sourceItems },
+                [destination.droppableId]: { ...destCol, items: destItems },
+            };
             setColumns(nextColumns);
             onDrag === null || onDrag === void 0 ? void 0 : onDrag({
                 from: source.droppableId,
@@ -350,179 +326,126 @@ var KanbanBoard = function (_a) {
             });
         }
     }, [columns, onDrag, onColumnReorder]);
-    var handleColumnDelete = (0, react_1.useCallback)(function (colId) {
+    const handleColumnDelete = (0, react_1.useCallback)((colId) => {
         var _a, _b;
-        var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
+        const columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map((item) => item.id)) || [];
         onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
     }, [columns, onColumnDelete]);
-    var rowBaseProps = (0, react_1.useMemo)(function () { return ({
-        canDrag: canDrag,
-        expanded: expanded,
-        onDelete: onDelete,
-        onOpen: onOpen,
-        canDelete: canDelete,
-        setSize: setSize,
-        toggleExpand: toggleExpand,
-    }); }, [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
+    const rowBaseProps = (0, react_1.useMemo)(() => ({
+        canDrag,
+        expanded,
+        onDelete,
+        onOpen,
+        canDelete,
+        setSize,
+        toggleExpand,
+    }), [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
     // Stable per-column itemData so unrelated board re-renders (e.g. column hover)
     // don't change the reference react-window hands to every row → no row re-renders.
-    var itemDataByCol = (0, react_1.useMemo)(function () {
-        var map = {};
-        for (var _i = 0, _a = Object.entries(columns); _i < _a.length; _i++) {
-            var _b = _a[_i], colId = _b[0], column = _b[1];
-            map[colId] = __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId });
+    const itemDataByCol = (0, react_1.useMemo)(() => {
+        const map = {};
+        for (const [colId, column] of Object.entries(columns)) {
+            map[colId] = { ...rowBaseProps, items: column.items, colId };
         }
         return map;
     }, [columns, rowBaseProps]);
-    var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
+    const renderColumnDroppable = (colId, column, columnDragHandleProps, isColCollapsed) => ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: colId, mode: virtualization ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
             var _a;
-            var item = column.items[rubric.source.index];
-            return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, paddingBottom: KANBAN_CARD_GAP }) }), (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : (react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
-                    return toggleExpand(item.id, colId, rubric.source.index);
-                }, isDeletable: canDelete }))));
-        } }, function (provided, snapshot) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
-        return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.75rem", background: snapshot.isDraggingOver
-                ? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
-                : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "0.063rem ".concat(snapshot.isDraggingOver ? "dashed" : "solid", " ").concat(snapshot.isDraggingOver
-                ? (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300]
-                : (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]), transition: "background 0.15s ease, border-color 0.15s ease, width 0.2s ease", display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
-            isColCollapsed ? (react_1.default.createElement(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative" },
-                react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_g = column.color) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500], bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 1 },
-                    enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
-                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[400] }))) : null,
-                    enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_l = colors === null || colors === void 0 ? void 0 : colors.background) === null || _l === void 0 ? void 0 : _l[100], position: "relative", zIndex: 3 },
-                        react_1.default.createElement(react_2.IconButton, { "aria-label": "Expand column", icon: react_1.default.createElement(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: function () { return toggleColumnCollapsed(colId); } }))),
-                    react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[700], sx: {
-                            writingMode: "vertical-rl",
-                            textOrientation: "mixed",
-                        }, maxH: "".concat(Math.max(120, containerHeight - 200), "px"), overflow: "hidden", lineHeight: "1.2", title: column.title }, column.title),
-                    react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[300], display: "flex", backgroundColor: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], alignItems: "center", justifyContent: "center", color: (_q = colors === null || colors === void 0 ? void 0 : colors.text) === null || _q === void 0 ? void 0 : _q[900], fontWeight: 600, fontSize: "10px" }, (_r = column === null || column === void 0 ? void 0 : column.items) === null || _r === void 0 ? void 0 : _r.length)),
-                column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_s = colors === null || colors === void 0 ? void 0 : colors.background) === null || _s === void 0 ? void 0 : _s[100], "aria-hidden": true })) : null,
-                column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_t = colors === null || colors === void 0 ? void 0 : colors.background) === null || _t === void 0 ? void 0 : _t[100], position: "relative", zIndex: 2 },
-                    react_1.default.createElement(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem' },
-                        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_u = colors === null || colors === void 0 ? void 0 : colors.text) === null || _u === void 0 ? void 0 : _u[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_v = column.customNode) === null || _v === void 0 ? void 0 : _v.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_w = column.customNode) === null || _w === void 0 ? void 0 : _w.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: "0.063rem solid ".concat((_y = (_x = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _x === void 0 ? void 0 : _x[100]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[100]) },
-                react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1" },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
-                        react_1.default.createElement(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_0 = column.color) !== null && _0 !== void 0 ? _0 : (_1 = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _1 === void 0 ? void 0 : _1[500], flexShrink: 0 }),
-                        enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
-                            react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_2 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _2 === void 0 ? void 0 : _2[400] }))) : null,
-                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_3 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _3 === void 0 ? void 0 : _3[700], noOfLines: 1, minW: 0 },
-                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title))),
-                    !!((_4 = column.customNode) === null || _4 === void 0 ? void 0 : _4.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: (_5 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _5 === void 0 ? void 0 : _5[600] }, column.customNode())) : null),
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                    react_1.default.createElement(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "999px", backgroundColor: (_6 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _6 === void 0 ? void 0 : _6[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_7 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _7 === void 0 ? void 0 : _7[700], fontWeight: 600, fontSize: "0.625rem" }, (_8 = column === null || column === void 0 ? void 0 : column.items) === null || _8 === void 0 ? void 0 : _8.length),
-                    enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),
-                    canDelete &&
-                        hoveredColumn === colId &&
-                        column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_9 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _9 === void 0 ? void 0 : _9[600], _hover: { color: (_10 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _10 === void 0 ? void 0 : _10[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
-                    !(canDelete &&
-                        hoveredColumn === colId &&
-                        column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })))),
-            !isColCollapsed && (react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
-                    overflowY: "auto",
-                    overflowX: "hidden",
-                    scrollbarWidth: "thin",
-                    scrollbarColor: "var(--chakra-colors-gray-300) transparent",
-                    "&::-webkit-scrollbar": {
-                        width: "6px !important",
-                        height: "6px !important",
-                    },
-                    "&::-webkit-scrollbar-track": {
-                        background: "gray.100",
-                        borderRadius: "3px",
-                        marginTop: "4px",
-                        marginBottom: "4px",
-                    },
-                    "&::-webkit-scrollbar-thumb": {
-                        background: "gray.300",
-                        borderRadius: "3px",
-                        border: "1px solid",
-                        borderColor: "gray.100",
-                    },
-                    "&::-webkit-scrollbar-thumb:hover": {
-                        background: "gray.400",
-                    },
-                    "&": {
-                        scrollbarGutter: "stable both-edges",
-                    },
-                    cursor: canDrag ? "grab" : "not-allowed",
-                } },
-                (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })),
-                virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
-                        if (el)
-                            listRefs.current[colId] = el;
-                    }, height: containerHeight - 150, itemCount: column.items.length +
-                        (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
-                        return getItemSize(index, column.items, colId);
-                    }, width: "100%", itemData: itemDataByCol[colId] }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
-                    column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 } },
-                        react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
-                            var _a;
-                            return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
-                                    return toggleExpand(account.id, colId, index);
-                                }, isDeletable: canDelete }))));
-                        }))); }),
-                    provided.placeholder))))));
-    })); };
+            const item = column.items[rubric.source.index];
+            return ((0, jsx_runtime_1.jsx)("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
+                    ...provided.draggableProps.style,
+                    width: columnWidth,
+                    paddingBottom: KANBAN_CARD_GAP,
+                }, children: (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: () => toggleExpand(item.id, colId, rubric.source.index), isDeletable: canDelete }, item.id)) }));
+        }, children: (provided, snapshot) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: provided.innerRef, ...provided.droppableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.75rem", background: snapshot.isDraggingOver
+                    ? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
+                    : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: `0.063rem ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
+                    ? (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300]
+                    : (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, transition: "background 0.15s ease, border-color 0.15s ease, width 0.2s ease", display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: `${containerHeight - 60}px`, onMouseEnter: () => setHoveredColumn(colId), onMouseLeave: () => setHoveredColumn(null), children: [isColCollapsed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_g = column.color) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500], bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 1, children: [enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[400] }) })) : null, enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_l = colors === null || colors === void 0 ? void 0 : colors.background) === null || _l === void 0 ? void 0 : _l[100], position: "relative", zIndex: 3, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Expand column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[700], sx: {
+                                            writingMode: "vertical-rl",
+                                            textOrientation: "mixed",
+                                        }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[300], display: "flex", backgroundColor: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], alignItems: "center", justifyContent: "center", color: (_q = colors === null || colors === void 0 ? void 0 : colors.text) === null || _q === void 0 ? void 0 : _q[900], fontWeight: 600, fontSize: "10px", children: (_r = column === null || column === void 0 ? void 0 : column.items) === null || _r === void 0 ? void 0 : _r.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_s = colors === null || colors === void 0 ? void 0 : colors.background) === null || _s === void 0 ? void 0 : _s[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_t = colors === null || colors === void 0 ? void 0 : colors.background) === null || _t === void 0 ? void 0 : _t[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_u = colors === null || colors === void 0 ? void 0 : colors.text) === null || _u === void 0 ? void 0 : _u[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_v = column.customNode) === null || _v === void 0 ? void 0 : _v.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_w = column.customNode) === null || _w === void 0 ? void 0 : _w.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `0.063rem solid ${(_y = (_x = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _x === void 0 ? void 0 : _x[100]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[100]}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_0 = column.color) !== null && _0 !== void 0 ? _0 : (_1 = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _1 === void 0 ? void 0 : _1[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_2 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _2 === void 0 ? void 0 : _2[400] }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_3 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _3 === void 0 ? void 0 : _3[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: (_4 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _4 === void 0 ? void 0 : _4[600], children: (_5 = column.customNode) === null || _5 === void 0 ? void 0 : _5.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "999px", backgroundColor: (_6 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _6 === void 0 ? void 0 : _6[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_7 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _7 === void 0 ? void 0 : _7[700], fontWeight: 600, fontSize: "0.625rem", children: (_8 = column === null || column === void 0 ? void 0 : column.items) === null || _8 === void 0 ? void 0 : _8.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete &&
+                                        hoveredColumn === colId &&
+                                        column.items.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_9 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _9 === void 0 ? void 0 : _9[600], _hover: { color: (_10 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _10 === void 0 ? void 0 : _10[600] }, onClick: () => handleColumnDelete(colId), transition: "color 0.2s ease", flexShrink: 0 })), !(canDelete &&
+                                        hoveredColumn === colId &&
+                                        column.items.length > 0) && (0, jsx_runtime_1.jsx)(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })] })] })), !isColCollapsed && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                            overflowY: "auto",
+                            overflowX: "hidden",
+                            scrollbarWidth: "thin",
+                            scrollbarColor: "var(--chakra-colors-gray-300) transparent",
+                            "&::-webkit-scrollbar": {
+                                width: "6px !important",
+                                height: "6px !important",
+                            },
+                            "&::-webkit-scrollbar-track": {
+                                background: "gray.100",
+                                borderRadius: "3px",
+                                marginTop: "4px",
+                                marginBottom: "4px",
+                            },
+                            "&::-webkit-scrollbar-thumb": {
+                                background: "gray.300",
+                                borderRadius: "3px",
+                                border: "1px solid",
+                                borderColor: "gray.100",
+                            },
+                            "&::-webkit-scrollbar-thumb:hover": {
+                                background: "gray.400",
+                            },
+                            "&": {
+                                scrollbarGutter: "stable both-edges",
+                            },
+                            cursor: canDrag ? "grab" : "not-allowed",
+                        }, children: [(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && ((0, jsx_runtime_1.jsx)(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), virtualization ? ((0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { ref: (el) => {
+                                    if (el)
+                                        listRefs.current[colId] = el;
+                                }, height: containerHeight - 150, itemCount: column.items.length +
+                                    (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: (index) => getItemSize(index, column.items, colId), width: "100%", itemData: itemDataByCol[colId], children: KanbanRow })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [column.items.map((account, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => {
+                                                var _a;
+                                                return ((0, jsx_runtime_1.jsx)("div", { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, style: dragProvided.draggableProps.style, children: (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete })) }));
+                                            } }, account.id) }, account.id))), provided.placeholder] }))] }))] }));
+        } }, colId));
     if (!canView)
         return null;
-    var showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
-    var hasAnyColumns = Object.keys(columns).length > 0;
-    var flexScrollSx = {
+    const showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
+    const hasAnyColumns = Object.keys(columns).length > 0;
+    const flexScrollSx = {
         "&::-webkit-scrollbar": {
             height: "6px",
         },
         "&::-webkit-scrollbar-track": {
-            background: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[100],
+            background: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[100],
             borderRadius: "3px",
             margin: "0 4px",
         },
         "&::-webkit-scrollbar-thumb": {
-            background: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[400],
+            background: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[400],
             borderRadius: "3px",
-            border: "1px solid ".concat((_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[100]),
+            border: `1px solid ${(_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100]}`,
         },
         "&::-webkit-scrollbar-thumb:hover": {
-            background: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500],
+            background: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[500],
         },
         scrollbarWidth: "thin",
-        scrollbarColor: "".concat((_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[400], " ").concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100]),
+        scrollbarColor: `${(_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[400]} ${(_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[100]}`,
     };
-    var addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && (react_1.default.createElement(react_2.Box, { width: columnWidth, borderRadius: "0.5rem", border: "0.125rem dashed ".concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[300]), bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], flexShrink: 0, height: "".concat(containerHeight - 60, "px"), display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[500] }, onClick: function () { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); } },
-        react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", gap: 2 },
-            react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_l = colors === null || colors === void 0 ? void 0 : colors.text) === null || _l === void 0 ? void 0 : _l[700] }),
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column"))));
-    var columnsList = Object.entries(columns).map(function (_a, colIndex) {
-        var colId = _a[0], column = _a[1];
-        var isColCollapsed = enableColumnCollapse && Boolean(collapsedColumns[colId]);
+    const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "0.5rem", border: `0.125rem dashed ${(_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[300]}`, bg: (_h = colors === null || colors === void 0 ? void 0 : colors.background) === null || _h === void 0 ? void 0 : _h[100], flexShrink: 0, height: `${containerHeight - 60}px`, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: (_l = colors === null || colors === void 0 ? void 0 : colors.text) === null || _l === void 0 ? void 0 : _l[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
+    const columnsList = Object.entries(columns).map(([colId, column], colIndex) => {
+        const isColCollapsed = enableColumnCollapse && Boolean(collapsedColumns[colId]);
         if (enableColumnReorder) {
-            return (react_1.default.createElement(dnd_1.Draggable, { draggableId: colId, index: colIndex, key: colId }, function (dragProvided) {
-                var _a;
-                return (react_1.default.createElement(react_2.Box, __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: "width 0.2s ease", overflow: isColCollapsed ? "visible" : "hidden" }), renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed)));
-            }));
+            return ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: colId, index: colIndex, children: (dragProvided) => {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: "width 0.2s ease", overflow: isColCollapsed ? "visible" : "hidden", children: renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed) }));
+                } }, colId));
         }
         return renderColumnDroppable(colId, column, null, isColCollapsed);
     });
-    var loadingSkeletonRow = Array.from({ length: 5 }).map(function (_, idx) {
+    const loadingSkeletonRow = Array.from({ length: 5 }).map((_, idx) => {
         var _a, _b;
-        return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
-            react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
-            react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: `0.125rem solid ${(_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]}`, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })] }, idx));
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
-        react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
-            react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
-                showAddColumn && !isBoardLoading && !hasAnyColumns && (react_1.default.createElement(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1 },
-                    react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "0.5rem", bg: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], border: "0.125rem dashed ".concat((_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[300]), _hover: { borderColor: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[500] }, onClick: function () { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); } },
-                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[700] }),
-                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_t = colors === null || colors === void 0 ? void 0 : colors.text) === null || _t === void 0 ? void 0 : _t[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column")))),
-                isBoardLoading ? (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx }, loadingSkeletonRow)) : enableColumnReorder ? (react_1.default.createElement(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN" }, function (colReorderProvided) { return (react_1.default.createElement(react_2.Flex, __assign({ ref: colReorderProvided.innerRef }, colReorderProvided.droppableProps, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx }),
-                    columnsList,
-                    colReorderProvided.placeholder,
-                    addColumnBox)); })) : (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx },
-                    columnsList,
-                    addColumnBox))))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: onDragEnd, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, bg: (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[50], minH: `${containerHeight}px`, position: "relative", overflow: "hidden", mt: 2, children: [showAddColumn && !isBoardLoading && !hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "0.5rem", bg: (_o = colors === null || colors === void 0 ? void 0 : colors.background) === null || _o === void 0 ? void 0 : _o[100], border: `0.125rem dashed ${(_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[300]}`, _hover: { borderColor: (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_r = colors === null || colors === void 0 ? void 0 : colors.text) === null || _r === void 0 ? void 0 : _r[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) })), isBoardLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: colReorderProvided.innerRef, ...colReorderProvided.droppableProps, gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, colReorderProvided.placeholder, addColumnBox] })) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
 };
 exports.default = KanbanBoard;