pixelize-design-library 2.4.1 → 2.4.2-beta.0

package/dist/Components/KanbanBoard/AccountCard.js

@@ -44,17 +44,17 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const AccountRow_1 = __importDefault(require("./AccountRow"));
 const excludeKeys = ["id", "details"];
 const AccountCard = react_1.default.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const keys = (0, react_1.useMemo)(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
     const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     const handleToggle = () => {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "0.625rem", background: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", border: `0.063rem solid ${(_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, boxShadow: "0 0.063rem 0.125rem rgba(0,0,0,0.04)", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
-            borderColor: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[300],
-            boxShadow: "0 0.25rem 0.75rem rgba(0,0,0,0.08)",
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "lg", background: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], border: `0.063rem solid ${(_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]}`, boxShadow: "sm", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
+            borderColor: (_e = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _e === void 0 ? void 0 : _e[300],
+            boxShadow: "md",
             transform: "translateY(-0.063rem)",
-        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[700], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[600], fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[50], color: (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[600] }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[50], color: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[600] }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[700], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: (_g = colors === null || colors === void 0 ? void 0 : colors.text) === null || _g === void 0 ? void 0 : _g[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[600], fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_l = colors === null || colors === void 0 ? void 0 : colors.red) === null || _l === void 0 ? void 0 : _l[50], color: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[600] }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_p = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _p === void 0 ? void 0 : _p[50], color: (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[600] }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));
 });
 exports.default = AccountCard;

package/dist/Components/KanbanBoard/AccountRow.d.ts

@@ -3,4 +3,3 @@ declare const AccountRow: ({ label, value }: {
     value: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default AccountRow;
-//# sourceMappingURL=AccountRow.d.ts.map

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.d.ts

@@ -6,4 +6,3 @@ declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate, }: {
     onCreate?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default KanbanActions;
-//# sourceMappingURL=KanbanActions.d.ts.map

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -1,4 +1,3 @@
 import { KanbanBoardProps } from "./KanbanBoardProps";
 declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, }: KanbanBoardProps) => import("react/jsx-runtime").JSX.Element | null;
 export default KanbanBoard;
-//# sourceMappingURL=KanbanBoard.d.ts.map

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -49,6 +49,7 @@ 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"));
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 /** Narrow rail width when a column is horizontally collapsed. */
 const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
 const KANBAN_CARD_GAP = 12;
@@ -288,9 +289,11 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
             }
         };
         calculateDimensions();
-        window.addEventListener("resize", calculateDimensions);
+        const onResize = (0, rafThrottle_1.rafThrottle)(calculateDimensions);
+        window.addEventListener("resize", onResize);
         return () => {
-            window.removeEventListener("resize", calculateDimensions);
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
         };
     }, [isBoardLoading]);
     // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
@@ -396,14 +399,14 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
                 }, 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
+            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: provided.innerRef, ...provided.droppableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "xl", 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 &&
+                                        }, 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: "full", 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: "full", 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 &&
@@ -418,13 +421,13 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
                             },
                             "&::-webkit-scrollbar-track": {
                                 background: "gray.100",
-                                borderRadius: "3px",
+                                borderRadius: "base",
                                 marginTop: "4px",
                                 marginBottom: "4px",
                             },
                             "&::-webkit-scrollbar-thumb": {
                                 background: "gray.300",
-                                borderRadius: "3px",
+                                borderRadius: "base",
                                 border: "1px solid",
                                 borderColor: "gray.100",
                             },
@@ -454,12 +457,12 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         },
         "&::-webkit-scrollbar-track": {
             background: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[100],
-            borderRadius: "3px",
+            borderRadius: "base",
             margin: "0 4px",
         },
         "&::-webkit-scrollbar-thumb": {
             background: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[400],
-            borderRadius: "3px",
+            borderRadius: "base",
             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": {
@@ -468,7 +471,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         scrollbarWidth: "thin",
         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]}`,
     };
-    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 addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "lg", 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) {
@@ -481,8 +484,8 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     });
     const loadingSkeletonRow = Array.from({ length: 5 }).map((_, idx) => {
         var _a, _b;
-        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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: columnWidth, p: 4, borderRadius: "lg", 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: "base" }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })] }, idx));
     });
-    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] }))] }) })] }));
+    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: "lg", 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;

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -107,4 +107,3 @@ export type KanbanBoardProps = {
         orgId?: string;
     };
 };
-//# sourceMappingURL=KanbanBoardProps.d.ts.map

package/dist/Components/KanbanBoard/MeasuredItem.d.ts

@@ -6,4 +6,3 @@ type MeasuredItemProps = {
 };
 declare const MeasuredItem: React.FC<MeasuredItemProps>;
 export default MeasuredItem;
-//# sourceMappingURL=MeasuredItem.d.ts.map

package/dist/Components/KanbanBoard/MeasuredItem.js

@@ -37,8 +37,10 @@ const MeasuredItem = ({ index, setSize, children, }) => {
         }
         return () => {
             cancelAnimationFrame(raf);
-            if (ro && element)
-                ro.unobserve(element);
+            // disconnect, not unobserve — the observer itself has to be released, or a board that
+            // remounts cards as it scrolls leaves one behind per card.
+            if (ro)
+                ro.disconnect();
             if (!ro)
                 window.removeEventListener("resize", measure);
         };

package/dist/Components/LazyWrapper/LazyWrapper.d.ts

@@ -8,4 +8,3 @@ export interface LazyWrapperProps {
 }
 declare const LazyWrapper: React.FC<LazyWrapperProps>;
 export default LazyWrapper;
-//# sourceMappingURL=LazyWrapper.d.ts.map

package/dist/Components/LimitReachedModal/LimitReachedModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LimitReachedModalProps } from "./LimitReachedModalProps";
+declare const LimitReachedModal: React.FC<LimitReachedModalProps>;
+export default LimitReachedModal;

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const UpgradeButton_1 = __importDefault(require("../UpgradeButton/UpgradeButton"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const limitReachedCopy_1 = require("./limitReachedCopy");
+const KIND_ICON = {
+    record: lucide_react_1.Crown,
+    automation: lucide_react_1.Crown,
+    custom_modules: lucide_react_1.Crown,
+    user: lucide_react_1.Users,
+    projects: lucide_react_1.Crown,
+    tickets: lucide_react_1.Crown,
+};
+const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, canManageBilling, onUpgrade, title, message, features, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = (0, limitReachedCopy_1.resolveLimitCopy)(kind, canManageBilling);
+    const usage = (0, limitReachedCopy_1.formatLimitUsage)(kind, used, limit);
+    const KindIcon = KIND_ICON[kind];
+    // Unlike every other color read in this file, these three were unguarded — a
+    // theme missing `primary`/`white`/`black` (a bare ChakraProvider, or a future
+    // palette shape change) threw here instead of falling back like the rest of
+    // the component does, so the header specifically went from possible-wrong-tint
+    // to fully unrendered.
+    const gradient = (_a = colors === null || colors === void 0 ? void 0 : colors.gradient) !== null && _a !== void 0 ? _a : {
+        from: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : accentText_1.DEFAULT_BLACK,
+        to: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[700]) !== null && _e !== void 0 ? _e : accentText_1.DEFAULT_BLACK,
+    };
+    // Header banner uses the brand gradient (not a fixed blue/purple) so it reads correctly
+    // across all 9 brand themes, with ink picked for AA against whichever stop is lighter.
+    const ink = (0, accentText_1.onGradient)(gradient.from, gradient.to, (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : accentText_1.DEFAULT_WHITE, (_g = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _g !== void 0 ? _g : accentText_1.DEFAULT_BLACK);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(5px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "xl", overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { pb: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[700]) !== null && _j !== void 0 ? _j : (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.text) === null || _o === void 0 ? void 0 : _o[500], mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => {
+                                    var _a, _b, _c, _d, _e, _f, _g;
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[600]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: (_f = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _d === void 0 ? void 0 : _d.success) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.green) === null || _g === void 0 ? void 0 : _g[500] }), feature] }, feature));
+                                }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
+};
+exports.default = LimitReachedModal;

package/dist/Components/LimitReachedModal/LimitReachedModalProps.d.ts

@@ -0,0 +1,15 @@
+export type LimitKind = "record" | "automation" | "custom_modules" | "user" | "projects" | "tickets";
+export interface LimitReachedModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    kind: LimitKind;
+    /** Plan limit for `kind`. Pass with `used` to show an inline usage line. */
+    limit?: number | null;
+    used?: number | null;
+    /** false hides the upgrade CTA and swaps in "contact your administrator" copy. */
+    canManageBilling: boolean;
+    onUpgrade?: () => void;
+    title?: string;
+    message?: string;
+    features?: string[];
+}

package/dist/Components/LimitReachedModal/LimitReachedModalProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/LimitReachedModal/limitReachedCopy.d.ts

@@ -0,0 +1,6 @@
+import { LimitKind } from "./LimitReachedModalProps";
+export declare function resolveLimitCopy(kind: LimitKind, canManageBilling: boolean): {
+    title: string;
+    message: string;
+};
+export declare function formatLimitUsage(kind: LimitKind, used?: number | null, limit?: number | null): string | null;

package/dist/Components/LimitReachedModal/limitReachedCopy.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveLimitCopy = resolveLimitCopy;
+exports.formatLimitUsage = formatLimitUsage;
+// Canonical strings ported from crm-frontend's orgPlanLimits.ts / orgRecordLimit.ts and
+// account-frontend's useSeatLimitGate.ts, kept verbatim so the promoted modal reads exactly
+// like the copies it replaces. `projects`/`tickets` are new — matched to the same voice.
+const COPY = {
+    record: {
+        title: "Record limit reached",
+        unit: "records",
+        admin: "You have reached your plan record limit. Upgrade to add more records.",
+        member: "Your organization has reached its record limit. Contact your organization administrator to upgrade the plan.",
+    },
+    automation: {
+        title: "Automation limit reached",
+        unit: "automations",
+        admin: "You have reached your plan automation limit. Upgrade to create more workflows and cadences.",
+        member: "Your organization has reached its automation limit. Contact your organization administrator to upgrade the plan.",
+    },
+    custom_modules: {
+        title: "Custom module limit reached",
+        unit: "custom modules",
+        admin: "You have reached your plan custom module limit. Upgrade to add more custom modules.",
+        member: "Your organization has reached its custom module limit. Contact your organization administrator to upgrade the plan.",
+    },
+    user: {
+        title: "Seat limit reached",
+        unit: "users",
+        admin: "You have reached the number of users included on your plan. Upgrade to add more.",
+        member: "Your organization has reached its user limit. Contact your organization administrator to upgrade the plan.",
+    },
+    projects: {
+        title: "Project limit reached",
+        unit: "projects",
+        admin: "You have reached your plan project limit. Upgrade to create more projects.",
+        member: "Your organization has reached its project limit. Contact your organization administrator to upgrade the plan.",
+    },
+    tickets: {
+        title: "Ticket limit reached",
+        unit: "tickets",
+        admin: "You have reached your plan ticket limit. Upgrade to create more tickets.",
+        member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan.",
+    },
+};
+function resolveLimitCopy(kind, canManageBilling) {
+    const c = COPY[kind];
+    return { title: c.title, message: canManageBilling ? c.admin : c.member };
+}
+function formatLimitUsage(kind, used, limit) {
+    if (used == null || limit == null)
+        return null;
+    return `${used} of ${limit} ${COPY[kind].unit} used`;
+}

package/dist/Components/Loading/Loading.d.ts

@@ -1,3 +1,2 @@
 import { LoadingProps } from "./LoadingProps";
-export default function Loading({ text, isLoading, onlytext }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=Loading.d.ts.map
+export default function Loading({ text, isLoading, onlytext, container }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/Loading/Loading.js

@@ -16,12 +16,12 @@ const colorTransition = (0, react_2.keyframes) `
     color: black;
   }
 `;
-function Loading({ text, isLoading, onlytext }) {
+function Loading({ text, isLoading, onlytext, container }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!isLoading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: "blackAlpha.600", backdropFilter: "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: "9999", children: (0, jsx_runtime_1.jsx)(react_1.Center, { height: "100vh", children: !onlytext ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.primary[500], size: "xl" }), (0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", children: text })] })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_2.css) `
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: (0, jsx_runtime_1.jsx)(react_1.Center, { height: container ? "100%" : "100vh", children: !onlytext ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.primary[500], size: "xl" }), (0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", children: text })] })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_2.css) `
               animation: ${colorTransition} 2s infinite;
             `, children: text })) }) }));
 }

package/dist/Components/Loading/LoadingProps.d.ts

@@ -2,5 +2,6 @@ export type LoadingProps = {
     text?: string;
     isLoading: boolean;
     onlytext?: boolean;
+    /** Scope the overlay to the nearest positioned ancestor with a MUI-style scrim, instead of full-viewport. */
+    container?: boolean;
 };
-//# sourceMappingURL=LoadingProps.d.ts.map

package/dist/Components/Modal/Modal.d.ts

@@ -10,4 +10,3 @@ export declare const ModalFooter: React.FC<{
     children: React.ReactNode;
 }>;
 export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Modal.d.ts.map

package/dist/Components/Modal/Modal.js

@@ -8,7 +8,6 @@ exports.default = Modal;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ModalHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -22,8 +21,6 @@ const ModalFooter = ({ children }) => {
 };
 exports.ModalFooter = ModalFooter;
 function Modal({ size, isOpen = false, onClose, overlaybg = "blackAlpha.300", overlaybackdropFilter = "blur(10px) hue-rotate(90deg)", overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }) {
-    var _a;
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (!isOpen)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     const isReactElement = (child) => {
@@ -32,7 +29,7 @@ function Modal({ size, isOpen = false, onClose, overlaybg = "blackAlpha.300", ov
     const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalHeader);
     const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalBody);
     const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalFooter);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsx)(react_2.ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsx)(react_2.ModalContent, { children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: {
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center",

package/dist/Components/Modal/ModalProps.d.ts

@@ -8,4 +8,3 @@ export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFoc
     children?: React.ReactNode;
     isLoading?: boolean;
 };
-//# sourceMappingURL=ModalProps.d.ts.map

package/dist/Components/MoreItems/MoreItems.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { MoreItemsProps } from "./MoreItemsProps";
 declare const MoreItems: React.FC<MoreItemsProps>;
 export default MoreItems;
-//# sourceMappingURL=MoreItems.d.ts.map

package/dist/Components/MoreItems/MoreItems.js

@@ -9,10 +9,10 @@ const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = fa
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: triggerText }) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: (_a = theme.colors.primary[600]) !== null && _a !== void 0 ? _a : theme.colors.primary[500], bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: (_b = theme.colors.primary[100]) !== null && _b !== void 0 ? _b : theme.colors.primary[50] }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "12px", 
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: (_a = theme.colors.primary[600]) !== null && _a !== void 0 ? _a : theme.colors.primary[500], bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: (_b = theme.colors.primary[100]) !== null && _b !== void 0 ? _b : theme.colors.primary[50] }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
                 // Chakra defaults this surface to `colors.gray.700` in dark, which against the
                 // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
-                bg: theme.colors.background[50], boxShadow: "0 8px 24px rgba(0,0,0,0.12)", _focus: { outline: "none", boxShadow: "0 8px 24px rgba(0,0,0,0.12)" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.background[50] }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                bg: theme.colors.background[50], boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.background[50] }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
                                 var _a, _b, _c;
                                 const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : theme.colors.gray[400];
                                 return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", 

package/dist/Components/MoreItems/MoreItemsProps.d.ts

@@ -27,4 +27,3 @@ export interface MoreItemsProps {
     /** Popover placement. */
     placement?: "bottom-start" | "bottom-end" | "bottom" | "top" | "right" | "left";
 }
-//# sourceMappingURL=MoreItemsProps.d.ts.map

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,2 @@
 import { MultiSelectProps } from "./MultiSelectProps";
 export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/Components/MultiSelect/MultiSelect.js

@@ -62,7 +62,7 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
                 // surface up to `muted` (lightest); [500] fails there, [800] clears all with margin.
                 borderColor: error || localError
                     ? theme.colors.semantic.error[500]
-                    : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800], borderRadius: "0.5rem", bg: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
+                    : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800], borderRadius: "lg", bg: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
                     borderColor: error || localError
                         ? theme.colors.semantic.error[500]
                         : theme.colors.primary[500],

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -21,4 +21,3 @@ export type MultiSelctOPtions = {
     id: string;
     label: string;
 };
-//# sourceMappingURL=MultiSelectProps.d.ts.map

package/dist/Components/NavigationBar/NavigationBar.d.ts

@@ -1,3 +1,2 @@
 import { NavbarProps } from "./NavigationBarProps";
 export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=NavigationBar.d.ts.map