pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Components/KanbanBoard/AccountRow.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text, Tooltip, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { toWords } from "../../Utils/functions";
+const AccountRow = ({ label, value }) => {
+    var _a, _b;
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { w: "full", gap: 1, children: [_jsx(Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: _jsx(Text, { color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: toWords(label) }) }), _jsx(Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), _jsx(Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: _jsx(Text, { fontWeight: 600, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));
+};
+export default AccountRow;

package/dist/esm/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import Select from "../../Select/Select";
+import { CirclePlus, SquarePen } from "lucide-react";
+import VeritcalDivider from "../../Divider/Divider";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import Button from "../../Button/Button";
+const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
+    var _a, _b;
+    const { colors } = useCustomTheme();
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20, color: (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500] }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+};
+export default KanbanActions;

package/dist/esm/Components/KanbanBoard/KanbanBoard.js

@@ -0,0 +1,453 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useState, useCallback, useEffect, useMemo, } from "react";
+import { Box, Flex, Text, Skeleton, SkeletonText, useBreakpointValue, Badge, IconButton, VStack, } from "@chakra-ui/react";
+import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
+import { Plus, Trash2, GripVertical, ChevronLeft, ChevronRight } from "lucide-react";
+import { VariableSizeList as List, } from "react-window";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences";
+import AccountCard from "./AccountCard";
+import HeaderActions from "../Header/HeaderActions";
+import MeasuredItem from "./MeasuredItem";
+import OverflowTooltipText from "../SideBar/components/OverflowTooltipText";
+import Button from "../Button/Button";
+import { rafThrottle } from "../../Utils/rafThrottle";
+/** Narrow rail width when a column is horizontally collapsed. */
+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.
+const KANBAN_LIST_TOP_PAD = 6;
+const KanbanRow = React.memo(({ index, style, data }) => {
+    const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
+    const account = items[index];
+    if (!account) {
+        return _jsx("div", { style: style });
+    }
+    return (_jsx("div", { style: style, children: _jsx("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: _jsx(MeasuredItem, { index: index, setSize: (i, h) => setSize(i, h, colId), children: _jsx(Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (provided) => {
+                        var _a;
+                        return (_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) : (_jsx(AccountCard, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete }, account.id)) }));
+                    } }, account.id) }) }) }));
+});
+const NoItemsTemplate = React.memo(({ column, noItems, colors }) => {
+    var _a;
+    return (_jsx(Box, { children: _jsxs(Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, children: [_jsx(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) && (_jsx(Button, { 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) {
+    const result = Array.from(entries);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+}
+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 } = 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 = useMemo(() => ({ ...data, ...(customColumns !== null && customColumns !== void 0 ? customColumns : {}) }), [data, customColumns]);
+    const { preferences: kanbanPreferencesData, loading: preferencesLoading } = useGetPreferences({
+        baseUrl: preferences.baseurl,
+        page: preferences.page,
+        key: preferences.key,
+        name: preferences.name,
+        authToken: preferences.token,
+        orgId: preferences.orgId,
+    });
+    const { savePreferences } = useSavePreferences({
+        baseUrl: preferences.baseurl,
+        page: preferences.page,
+        key: preferences.key,
+        name: preferences.name,
+        authToken: preferences.token,
+        orgId: preferences.orgId,
+    });
+    const kanbanPreferencesJson = useMemo(() => {
+        if (kanbanPreferencesData === null || kanbanPreferencesData === void 0 ? void 0 : kanbanPreferencesData.length) {
+            return kanbanPreferencesData[0].json;
+        }
+        return {};
+    }, [kanbanPreferencesData]);
+    const kanbanPreferencesJsonRef = useRef(kanbanPreferencesJson);
+    kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
+    const isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
+    const [columns, setColumns] = useState(mergedColumns);
+    const [containerHeight, setContainerHeight] = useState(600);
+    const [hoveredColumn, setHoveredColumn] = useState(null);
+    useEffect(() => {
+        setColumns(mergedColumns);
+    }, [mergedColumns]);
+    // Responsive column width
+    const columnWidth = useBreakpointValue({
+        base: "16rem",
+        md: "17.5rem",
+        lg: "19rem",
+    });
+    // track expanded cards
+    const [expanded, setExpanded] = useState({});
+    /** When true, column id maps to collapsed (body hidden). */
+    const [collapsedColumns, setCollapsedColumns] = useState(() => ({ ...defaultCollapsedColumns }));
+    const hasHydratedCollapsedFromPrefs = useRef(false);
+    useEffect(() => {
+        hasHydratedCollapsedFromPrefs.current = false;
+    }, [
+        preferences.baseurl,
+        preferences.page,
+        preferences.key,
+        preferences.name,
+    ]);
+    useEffect(() => {
+        if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
+            return;
+        }
+        if (hasHydratedCollapsedFromPrefs.current) {
+            return;
+        }
+        const validIds = new Set(Object.keys(mergedColumns));
+        if (validIds.size === 0) {
+            return;
+        }
+        if (!("collapsedColumns" in kanbanPreferencesJson)) {
+            hasHydratedCollapsedFromPrefs.current = true;
+            return;
+        }
+        const saved = kanbanPreferencesJson.collapsedColumns;
+        if (saved === null ||
+            typeof saved !== "object" ||
+            Array.isArray(saved)) {
+            hasHydratedCollapsedFromPrefs.current = true;
+            return;
+        }
+        const next = {};
+        for (const [k, v] of Object.entries(saved)) {
+            if (validIds.has(k) && typeof v === "boolean") {
+                next[k] = v;
+            }
+        }
+        setCollapsedColumns({
+            ...defaultCollapsedColumns,
+            ...next,
+        });
+        hasHydratedCollapsedFromPrefs.current = true;
+    }, [
+        enableColumnCollapse,
+        preferences.baseurl,
+        preferencesLoading,
+        kanbanPreferencesJson,
+        mergedColumns,
+        defaultCollapsedColumns,
+    ]);
+    useEffect(() => {
+        if (!enableColumnCollapse) {
+            return;
+        }
+        const validIds = new Set(Object.keys(mergedColumns));
+        setCollapsedColumns((prev) => {
+            const hasStale = Object.keys(prev).some((k) => !validIds.has(k));
+            if (!hasStale) {
+                return prev;
+            }
+            const pruned = {};
+            for (const [k, v] of Object.entries(prev)) {
+                if (validIds.has(k)) {
+                    pruned[k] = v;
+                }
+            }
+            return pruned;
+        });
+    }, [mergedColumns, enableColumnCollapse]);
+    const toggleColumnCollapsed = useCallback((colId) => {
+        setCollapsedColumns((prev) => {
+            const collapsed = !prev[colId];
+            const next = { ...prev, [colId]: collapsed };
+            onColumnCollapseChange === null || onColumnCollapseChange === void 0 ? void 0 : onColumnCollapseChange({
+                colId,
+                collapsed,
+                collapsedColumns: next,
+            });
+            if (preferences.baseurl && enableColumnCollapse) {
+                savePreferences({
+                    ...kanbanPreferencesJsonRef.current,
+                    collapsedColumns: next,
+                });
+            }
+            return next;
+        });
+    }, [
+        onColumnCollapseChange,
+        preferences.baseurl,
+        enableColumnCollapse,
+        savePreferences,
+    ]);
+    /** Rotated collapsed summaries paint outside layout; reserve space so they are not clipped under the rail header. */
+    const COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
+    // ref for lists
+    const listRefs = useRef({});
+    const containerRef = useRef(null);
+    // store measured heights
+    const [sizes, setSizes] = useState({});
+    const hasMountedSizes = useRef(false);
+    // Prune stale size entries when columns change (skip first render)
+    useEffect(() => {
+        if (!hasMountedSizes.current) {
+            hasMountedSizes.current = true;
+            return;
+        }
+        setSizes((prev) => {
+            if (Object.keys(prev).length === 0)
+                return prev;
+            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}`);
+                }
+            }
+            const pruned = {};
+            let changed = false;
+            for (const key of Object.keys(prev)) {
+                if (validKeys.has(key)) {
+                    pruned[key] = prev[key];
+                }
+                else {
+                    changed = true;
+                }
+            }
+            return changed ? pruned : prev;
+        });
+    }, [columns]);
+    // AccountCard's minHeight floor — kept tight so unmeasured rows don't reserve excess space; KANBAN_CARD_GAP is added below.
+    const DEFAULT_ITEM_HEIGHT = 80;
+    // update height for an item
+    const setSize = useCallback((index, size, colId) => {
+        const key = `${colId}-${index}`;
+        setSizes((prev) => {
+            if (prev[key] === size)
+                return prev;
+            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);
+        }
+    }, []);
+    const getItemSize = 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
+    useEffect(() => {
+        const calculateDimensions = () => {
+            if (containerRef.current) {
+                const availableHeight = window.innerHeight - 100;
+                setContainerHeight(Math.max(500, availableHeight));
+            }
+        };
+        calculateDimensions();
+        const onResize = rafThrottle(calculateDimensions);
+        window.addEventListener("resize", onResize);
+        return () => {
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
+        };
+    }, [isBoardLoading]);
+    // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
+    // every render (which would re-render every virtualized row).
+    const toggleExpand = useCallback((id, colId, index) => {
+        setExpanded((prev) => {
+            const newExpanded = { ...prev, [id]: !prev[id] };
+            if (listRefs.current[colId]) {
+                listRefs.current[colId].resetAfterIndex(index);
+            }
+            return newExpanded;
+        });
+    }, []);
+    // drag handler
+    const onDragEnd = useCallback((result) => {
+        const { source, destination, type } = result;
+        if (!destination)
+            return;
+        if (type === "COLUMN") {
+            if (source.index === destination.index)
+                return;
+            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;
+        }
+        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) {
+            const copiedItems = [...sourceCol.items];
+            copiedItems.splice(source.index, 1);
+            copiedItems.splice(destination.index, 0, draggedItem);
+            const nextColumns = {
+                ...columns,
+                [source.droppableId]: { ...sourceCol, items: copiedItems },
+            };
+            setColumns(nextColumns);
+            onDrag === null || onDrag === void 0 ? void 0 : onDrag({
+                from: source.droppableId,
+                to: destination.droppableId,
+                item: draggedItem,
+                columns: nextColumns,
+                fromIndex: source.index,
+                toIndex: destination.index,
+            });
+        }
+        else {
+            const sourceItems = [...sourceCol.items];
+            const destItems = [...destCol.items];
+            sourceItems.splice(source.index, 1);
+            destItems.splice(destination.index, 0, draggedItem);
+            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,
+                to: destination.droppableId,
+                item: draggedItem,
+                columns: nextColumns,
+                fromIndex: source.index,
+                toIndex: destination.index,
+            });
+        }
+    }, [columns, onDrag, onColumnReorder]);
+    const handleColumnDelete = useCallback((colId) => {
+        var _a, _b;
+        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]);
+    const rowBaseProps = 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.
+    const itemDataByCol = useMemo(() => {
+        const map = {};
+        for (const [colId, column] of Object.entries(columns)) {
+            map[colId] = { ...rowBaseProps, items: column.items, colId };
+        }
+        return map;
+    }, [columns, rowBaseProps]);
+    const renderColumnDroppable = (colId, column, columnDragHandleProps, isColCollapsed) => (_jsx(Droppable, { droppableId: colId, mode: virtualization ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
+            var _a;
+            const item = column.items[rubric.source.index];
+            return (_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) : (_jsx(AccountCard, { 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 (_jsxs(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 ? (_jsxs(Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [_jsxs(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 ? (_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: _jsx(Box, { as: GripVertical, size: 14, color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[400] }) })) : null, enableColumnCollapse && (_jsx(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: _jsx(IconButton, { "aria-label": "Expand column", icon: _jsx(ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), _jsx(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 }), _jsx(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 ? (_jsx(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 ? (_jsx(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: _jsx(Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: _jsx(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() }) }) })) : (_jsx(Box, { flex: "1", minH: 0 }))] })) : (_jsxs(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: [_jsxs(Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(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 ? (_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: _jsx(Box, { as: GripVertical, size: 14, color: (_2 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _2 === void 0 ? void 0 : _2[400] }) })) : null, _jsx(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: _jsx(OverflowTooltipText, { placement: "top", children: column.title }) })] }), column.customNode ? (_jsx(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] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(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 && (_jsx(IconButton, { "aria-label": "Collapse column", icon: _jsx(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 && (_jsx(Box, { as: 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) && _jsx(Box, { width: "16px", height: "16px", flexShrink: 0 })] })] })), !isColCollapsed && (_jsxs(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 && (_jsx(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), virtualization ? (_jsx(List, { 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 })) : (_jsxs(Box, { children: [column.items.map((account, index) => (_jsx("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: _jsx(Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => {
+                                                var _a;
+                                                return (_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) : (_jsx(AccountCard, { 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;
+    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: (_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: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[400],
+            borderRadius: "3px",
+            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: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[500],
+        },
+        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 && (_jsx(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: _jsxs(Flex, { direction: "column", align: "center", gap: 2, children: [_jsx(Box, { as: Plus, size: 20, color: (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[700] }), _jsx(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 (_jsx(Draggable, { draggableId: colId, index: colIndex, children: (dragProvided) => {
+                    var _a;
+                    return (_jsx(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);
+    });
+    const loadingSkeletonRow = Array.from({ length: 5 }).map((_, idx) => {
+        var _a, _b;
+        return (_jsxs(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: [_jsx(Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }), _jsx(SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })] }, idx));
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(HeaderActions, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsxs(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 && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: _jsxs(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: [_jsx(Box, { as: Plus, size: 20, color: (_r = colors === null || colors === void 0 ? void 0 : colors.text) === null || _r === void 0 ? void 0 : _r[700] }), _jsx(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 ? (_jsx(Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? (_jsx(Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => (_jsxs(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] })) })) : (_jsxs(Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
+};
+export default KanbanBoard;

package/dist/esm/Components/KanbanBoard/KanbanBoardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/KanbanBoard/MeasuredItem.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useLayoutEffect, useEffect } from "react";
+const MeasuredItem = ({ index, setSize, children, }) => {
+    const ref = useRef(null);
+    const prevHeight = useRef(null);
+    // Stable ref to the latest setSize so we don't tear down the ResizeObserver on every render.
+    const setSizeRef = useRef(setSize);
+    setSizeRef.current = setSize;
+    const indexRef = useRef(index);
+    indexRef.current = index;
+    const measure = () => {
+        if (ref.current) {
+            // offsetHeight is the integer border-box layout height — more reliable than getBoundingClientRect for our purposes.
+            const height = ref.current.offsetHeight;
+            if (height > 0 && prevHeight.current !== height) {
+                prevHeight.current = height;
+                setSizeRef.current(indexRef.current, height);
+            }
+        }
+    };
+    useLayoutEffect(() => {
+        const element = ref.current;
+        measure();
+        // A second measure after paint catches any layout that finishes after the synchronous tick (font loads, async CSS, etc).
+        const raf = requestAnimationFrame(measure);
+        let ro;
+        if (typeof ResizeObserver !== "undefined" && element) {
+            ro = new ResizeObserver(() => {
+                measure();
+            });
+            ro.observe(element);
+        }
+        else {
+            window.addEventListener("resize", measure);
+        }
+        return () => {
+            cancelAnimationFrame(raf);
+            // 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);
+        };
+    }, []);
+    // If index changes for the same DOM node (item shuffled), re-report the cached size under the new index.
+    useEffect(() => {
+        if (prevHeight.current != null) {
+            setSizeRef.current(indexRef.current, prevHeight.current);
+        }
+    }, [index]);
+    return _jsx("div", { ref: ref, children: children });
+};
+export default MeasuredItem;

package/dist/esm/Components/LazyWrapper/LazyWrapper.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { Box, Spinner } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const DefaultFallback = ({ minHeight }) => {
+    const theme = useCustomTheme();
+    return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: _jsx(Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: theme.colors.gray[100], color: theme.colors.primary[500] }) }));
+};
+const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => (_jsx(Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : _jsx(DefaultFallback, { minHeight: minHeight }), children: children }));
+export default LazyWrapper;

package/dist/esm/Components/LimitReachedModal/LimitReachedModal.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Flex, HStack, Icon, List, ListIcon, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, } from "@chakra-ui/react";
+import { CheckCircle, Crown, Users } from "lucide-react";
+import Button from "../Button/Button";
+import UpgradeButton from "../UpgradeButton/UpgradeButton";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { onGradient } from "../../Theme/tokens/builders/accentText";
+import { formatLimitUsage, resolveLimitCopy } from "./limitReachedCopy";
+const KIND_ICON = {
+    record: Crown,
+    automation: Crown,
+    custom_modules: Crown,
+    user: Users,
+    projects: Crown,
+    tickets: 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 } = useCustomTheme();
+    const copy = resolveLimitCopy(kind, canManageBilling);
+    const usage = 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 : "#1a202c",
+        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 : "#000000",
+    };
+    // 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 = onGradient(gradient.from, gradient.to, (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#ffffff", (_g = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _g !== void 0 ? _g : "#000000");
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [_jsx(ModalOverlay, { backdropFilter: "blur(5px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", boxShadow: "2xl", mx: 4, children: [_jsxs(Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [_jsx(ModalHeader, { pb: 4, children: _jsxs(Flex, { align: "center", children: [_jsx(Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), _jsx(Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), _jsx(ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), _jsxs(ModalBody, { py: 6, children: [_jsx(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 && (_jsx(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 && (_jsx(List, { spacing: 2, mt: 5, children: features.map((feature) => {
+                                    var _a, _b, _c, _d, _e, _f, _g;
+                                    return (_jsxs(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: [_jsx(ListIcon, { as: 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));
+                                }) }))] }), _jsx(Divider, {}), _jsx(ModalFooter, { children: _jsxs(HStack, { spacing: 3, children: [_jsx(Button, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && (_jsx(UpgradeButton, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
+};
+export default LimitReachedModal;

package/dist/esm/Components/LimitReachedModal/LimitReachedModalProps.js

@@ -0,0 +1 @@
+export {};