pixelize-design-library 2.2.199 → 2.3.1-beta.10

package/dist/Components/Table/settings/TableSettings.js

@@ -0,0 +1,165 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
+var ManageColumns_1 = __importDefault(require("./ManageColumns"));
+var Button_1 = __importDefault(require("../../Button/Button"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
+var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
+var DENSITY_OPTIONS = [
+    { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
+    { value: "normal", label: "Normal", desc: "Balanced default spacing" },
+    { value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
+];
+var TableSettings = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var columns = _a.columns, onSave = _a.onSave, _p = _a.density, density = _p === void 0 ? "normal" : _p, onDensityChange = _a.onDensityChange, groupBy = _a.groupBy;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var childInputMethodsRef = (0, react_2.useRef)({});
+    var _q = (0, react_2.useState)(false), settingsOpen = _q[0], setSettingsOpen = _q[1];
+    var _r = (0, react_2.useState)(0), selectedIndex = _r[0], setSelectedIndex = _r[1];
+    var _s = (0, react_2.useState)(columns), items = _s[0], setItems = _s[1];
+    // Group selection is applied on Save (not live), per "click Apply to group".
+    var _t = (0, react_2.useState)(groupBy), selectedGroup = _t[0], setSelectedGroup = _t[1];
+    var handleSave = (0, react_2.useCallback)(function () {
+        onSave(items, selectedGroup);
+        setSettingsOpen(false);
+    }, [onSave, items, selectedGroup]);
+    var handleOpen = (0, react_2.useCallback)(function () {
+        setItems(columns);
+        setSelectedGroup(groupBy);
+        setSettingsOpen(true);
+    }, [columns, groupBy]);
+    var tabStyle = {
+        fontSize: "13px",
+        fontWeight: 500,
+        px: 4,
+        py: 2,
+        borderBottom: "2px solid transparent",
+        color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[400],
+        _selected: {
+            borderBottom: "2px solid ".concat(theme.colors.primary[600]),
+            color: theme.colors.primary[600],
+            fontWeight: 600,
+        },
+        _hover: { color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[600] },
+    };
+    return (react_2.default.createElement(react_1.Box, null,
+        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", _hover: { transform: "scale(1.1)" } },
+            react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem", color: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.text) === null || _g === void 0 ? void 0 : _g[500] })),
+        react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
+            react_2.default.createElement(react_1.ModalOverlay, null),
+            react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], overflow: "hidden" },
+                react_2.default.createElement(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }),
+                react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0 },
+                    react_2.default.createElement(react_1.Box, { pt: 4, px: 4 },
+                        react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3 }, "Table Settings"),
+                        react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border) === null || _l === void 0 ? void 0 : _l[200] },
+                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Density"),
+                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Manage Columns"),
+                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Group"))),
+                    react_2.default.createElement(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
+                            "&::-webkit-scrollbar": { width: "3px", height: "3px" },
+                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "2px" },
+                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "2px" },
+                            "&::-webkit-scrollbar-thumb:hover": { background: theme.colors.gray[500] },
+                            scrollbarWidth: "thin",
+                            scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+                        } },
+                        react_2.default.createElement(react_1.TabPanels, null,
+                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 1 },
+                                react_2.default.createElement(react_1.Flex, { direction: "column", gap: 2 }, DENSITY_OPTIONS.map(function (opt) {
+                                    var _a;
+                                    var selected = density === opt.value;
+                                    return (react_2.default.createElement(react_1.Flex, { as: "button", type: "button", key: opt.value, align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: function () { return onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value); } },
+                                        react_2.default.createElement(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, selected && react_2.default.createElement(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 })),
+                                        react_2.default.createElement(react_1.Box, { textAlign: "left" },
+                                            react_2.default.createElement(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700] }, opt.label),
+                                            react_2.default.createElement(react_1.Text, { fontSize: "11px", color: theme.colors.gray[500] }, opt.desc))));
+                                }))),
+                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
+                                react_2.default.createElement(react_1.Box, { sx: {
+                                        "& [role='listitem'], & > div > div": {
+                                            py: "4px !important",
+                                            minHeight: "unset !important",
+                                        },
+                                        "& label": { fontSize: "13px !important" },
+                                        "& .chakra-checkbox": { gap: "8px !important" },
+                                        "& .chakra-checkbox__label": { fontSize: "13px !important" },
+                                        "& [draggable]": { py: "5px !important" },
+                                    } },
+                                    react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))),
+                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 1 },
+                                react_2.default.createElement(react_1.Text, { fontSize: "12px", color: theme.colors.gray[500], mb: 2 }, "Group rows by a column. Click Save to apply."),
+                                react_2.default.createElement(react_1.Flex, { direction: "column", gap: 2 }, __spreadArray([{ id: undefined, label: "None (no grouping)" }], columns
+                                    .filter(function (c) { return !!c.columnType && !c.isHidden; })
+                                    .map(function (c) { return ({ id: c.id, label: String(c.label) }); }), true).map(function (opt) {
+                                    var _a, _b;
+                                    var selected = selectedGroup === opt.id;
+                                    return (react_2.default.createElement(react_1.Flex, { as: "button", type: "button", key: String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__"), align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: function () { return setSelectedGroup(opt.id); } },
+                                        react_2.default.createElement(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, selected && react_2.default.createElement(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 })),
+                                        react_2.default.createElement(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left" }, opt.label)));
+                                })))))),
+                react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.border) === null || _o === void 0 ? void 0 : _o[200], pt: 3, pb: 3, px: 4 },
+                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "red" }),
+                    react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
+};
+exports.default = TableSettings;

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TimelineProps } from "./TimelineProps";
-declare const Timeline: ({ timelineEvents }: TimelineProps) => React.JSX.Element;
+declare const Timeline: ({ timelineEvents, onEventClick }: TimelineProps) => React.JSX.Element;
 export default Timeline;

package/dist/Components/Timeline/Timeline.js

@@ -9,13 +9,14 @@ var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var functions_1 = require("../../Utils/functions");
 var Timeline = function (_a) {
-    var _b, _c, _d, _e;
-    var timelineEvents = _a.timelineEvents;
+    var _b, _c, _d, _e, _f, _g, _h;
+    var timelineEvents = _a.timelineEvents, onEventClick = _a.onEventClick;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var colors = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
     var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
     var formatTimestamp = function (timestamp, type) {
         var parsedTimestamp;
-        if (typeof timestamp === 'string' && !timestamp.match(/^\d+$/)) {
+        if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
             var date_1 = new Date(timestamp);
             if (!isNaN(date_1.getTime())) {
                 if (type === "date") {
@@ -57,16 +58,47 @@ var Timeline = function (_a) {
         }
         return date.toLocaleString();
     };
-    var getIcon = function (event) {
+    // A semantic color scale chosen by the action title (created / updated / delete).
+    var getEventScale = function (title) {
+        var _a, _b, _c, _d, _e, _f;
+        switch ((title || "").toLowerCase()) {
+            case "created":
+                return (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.success) !== null && _b !== void 0 ? _b : colors.green;
+            case "updated":
+                return (_d = (_c = colors.semantic) === null || _c === void 0 ? void 0 : _c.warning) !== null && _d !== void 0 ? _d : colors.orange;
+            case "delete":
+            case "deleted":
+                return (_f = (_e = colors.semantic) === null || _e === void 0 ? void 0 : _e.error) !== null && _f !== void 0 ? _f : colors.red;
+            default:
+                return colors.primary;
+        }
+    };
+    // Action-title icon (what happened); falls back to the source icon below.
+    var getActionIcon = function (title, size) {
+        switch ((title || "").toLowerCase()) {
+            case "created":
+                return react_1.default.createElement(lucide_react_1.Plus, { size: size });
+            case "updated":
+                return react_1.default.createElement(lucide_react_1.PencilLine, { size: size });
+            case "delete":
+            case "deleted":
+                return react_1.default.createElement(lucide_react_1.Trash2, { size: size });
+            default:
+                return null;
+        }
+    };
+    // Source icon (where it came from) — preserves the original mapping.
+    var getSourceIcon = function (event, size) {
         switch (event.action_from) {
             case "Accounts":
-                return react_1.default.createElement(lucide_react_1.IndianRupee, { size: isMobile ? 14 : 17 });
+                return react_1.default.createElement(lucide_react_1.IndianRupee, { size: size });
             case "Notes":
-                return react_1.default.createElement(lucide_react_1.FileText, { size: isMobile ? 14 : 17 });
+                return react_1.default.createElement(lucide_react_1.FileText, { size: size });
             default:
-                return react_1.default.createElement(lucide_react_1.Volleyball, { size: isMobile ? 14 : 17 });
+                return react_1.default.createElement(lucide_react_1.Volleyball, { size: size });
         }
     };
+    var getIcon = function (event, size) { var _a; return (_a = getActionIcon(event.title, size)) !== null && _a !== void 0 ? _a : getSourceIcon(event, size); };
     var groupEventsByDate = function (events) {
         return events.reduce(function (groups, event) {
             var date = formatTimestamp(event.created_at, "date");
@@ -79,91 +111,126 @@ var Timeline = function (_a) {
         }, {});
     };
     var groupedEvents = groupEventsByDate(timelineEvents);
-    var formatChanges = function (changes) {
+    var parseChanges = function (changes) {
         if (!changes || changes === "null")
-            return "No Changes";
+            return [];
         try {
-            var parsedChanges = JSON.parse(changes);
-            if (typeof parsedChanges !== 'object' || parsedChanges === null) {
-                return "No Changes";
-            }
-            return Object.entries(parsedChanges)
-                .map(function (_a) {
+            var parsed = typeof changes === "string" ? JSON.parse(changes) : changes;
+            if (typeof parsed !== "object" || parsed === null)
+                return [];
+            return Object.entries(parsed).map(function (_a) {
+                var _b;
                 var key = _a[0], value = _a[1];
-                var changeRecord = value;
-                if (changeRecord.original === null || changeRecord.original === undefined) {
-                    return "".concat(key, " changed from null to ").concat(changeRecord.updated);
-                }
-                else {
-                    return "".concat(key, " updated from ").concat(changeRecord.original, " to ").concat(changeRecord.updated);
-                }
-            })
-                .join("\n");
+                var record = value;
+                return {
+                    field: key,
+                    from: (_b = record === null || record === void 0 ? void 0 : record.original) !== null && _b !== void 0 ? _b : null,
+                    to: record === null || record === void 0 ? void 0 : record.updated,
+                };
+            });
         }
         catch (error) {
             console.error("Error parsing changes:", error);
-            return "Error parsing changes";
+            return [];
         }
     };
-    var getEventBgColor = function (title) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        switch (title.toLowerCase()) {
-            case "created":
-                return (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.green) === null || _b === void 0 ? void 0 : _b[50];
-            case "updated":
-                return (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.yellow) === null || _d === void 0 ? void 0 : _d[50];
-            case "delete":
-                return (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[50];
-            default:
-                return (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.white;
-        }
+    var initials = function (name) {
+        return (name || "")
+            .trim()
+            .split(/\s+/)
+            .map(function (p) { return p[0]; })
+            .slice(0, 2)
+            .join("")
+            .toUpperCase() || "?";
     };
     if (!timelineEvents || timelineEvents.length === 0) {
-        return (react_1.default.createElement(react_2.Box, { textAlign: "center", py: 8, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray) === null || _c === void 0 ? void 0 : _c[500] },
-            react_1.default.createElement(react_2.Text, null, "No timeline events to display")));
+        return (react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[500] },
+            react_1.default.createElement(react_2.Box, { boxSize: "2.75rem", borderRadius: "full", bg: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[400] },
+                react_1.default.createElement(lucide_react_1.Volleyball, { size: 20 })),
+            react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: 500 }, "No timeline events to display")));
+    }
+    // The colored event card (shared by both the desktop "tree" and mobile rail).
+    // `accent` decides which edge carries the colored bar (pointing toward the spine).
+    var EventCard = function (_a) {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+        var event = _a.event, index = _a.index, accent = _a.accent;
+        var scale = getEventScale(event.title);
+        var changes = parseChanges(event.changes);
+        var clickable = typeof onEventClick === "function";
+        return (react_1.default.createElement(react_2.Box, { position: "relative", zIndex: 1, bg: (_b = colors.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderRadius: "0.625rem", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? function () { return onEventClick(event, index); } : undefined, _hover: {
+                borderColor: (_f = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[300],
+                boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.md,
+                transform: clickable ? "translateY(-1px)" : undefined,
+            } },
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap" },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_k = (_j = colors.text) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[800], noOfLines: 1 }, event.action_from),
+                    react_1.default.createElement(react_2.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (_m = scale === null || scale === void 0 ? void 0 : scale[700]) !== null && _m !== void 0 ? _m : scale === null || scale === void 0 ? void 0 : scale[600], bg: scale === null || scale === void 0 ? void 0 : scale[50], border: "0.063rem solid ".concat((_o = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _o !== void 0 ? _o : (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[200]), borderRadius: "full", px: 2, py: 1 }, event.title)),
+                react_1.default.createElement(react_2.Text, { fontSize: "0.6875rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], whiteSpace: "nowrap" }, formatTimestamp(event.created_at, "time"))),
+            changes.length > 0 && (react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: 2 }, changes.map(function (c, i) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                return (react_1.default.createElement(react_2.Flex, { key: "".concat(c.field, "-").concat(i), align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap" },
+                    react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_b = (_a = colors.text) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[700] }, (0, functions_1.toWords)(c.field)),
+                    c.from !== null && c.from !== undefined && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(react_2.Box, { as: "span", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[500], bg: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "0.25rem", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, String(c.from)),
+                        react_1.default.createElement(react_2.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex" },
+                            react_1.default.createElement(lucide_react_1.ArrowRight, { size: 11 })))),
+                    react_1.default.createElement(react_2.Box, { as: "span", color: (_j = (_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) === null || _h === void 0 ? void 0 : _h[700]) !== null && _j !== void 0 ? _j : (_k = colors.green) === null || _k === void 0 ? void 0 : _k[700], bg: (_o = (_m = (_l = colors.semantic) === null || _l === void 0 ? void 0 : _l.success) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : (_p = colors.green) === null || _p === void 0 ? void 0 : _p[50], borderRadius: "0.25rem", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, String(c.to))));
+            }))),
+            react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mt: 2 },
+                react_1.default.createElement(react_2.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true },
+                    react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_t = (_s = (_r = colors.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[16]) !== null && _t !== void 0 ? _t : (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[50], color: (_v = colors.primary) === null || _v === void 0 ? void 0 : _v[600], fontSize: "0.5625rem", fontWeight: 700 }, initials((0, functions_1.toWords)(event.action_by)))),
+                react_1.default.createElement(react_2.Text, { fontSize: "0.6875rem", color: (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[500] },
+                    "by",
+                    " ",
+                    react_1.default.createElement(react_2.Box, { as: "span", color: (_y = (_x = colors.text) === null || _x === void 0 ? void 0 : _x[700]) !== null && _y !== void 0 ? _y : (_z = colors.gray) === null || _z === void 0 ? void 0 : _z[700], fontWeight: 500 }, (0, functions_1.toWords)(event.action_by))))));
+    };
+    var NODE = "1.875rem"; // 30px node, centered on the spine
+    var NODE_RADIUS = "0.9375rem";
+    var SPINE_GAP = "1.75rem"; // gap between spine and card edge
+    // -------------------------------------------------------------------------
+    // Mobile: single left rail (alternating doesn't read well on narrow widths)
+    // -------------------------------------------------------------------------
+    if (isMobile) {
+        return (react_1.default.createElement(react_2.Box, { maxW: "100%", px: 2, py: 2 }, Object.keys(groupedEvents).map(function (date) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            return (react_1.default.createElement(react_2.Box, { key: date, mb: 2 },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, mb: 4, mt: 2 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[500], bg: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[50], border: "0.063rem solid ".concat((_d = (_c = 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]), borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap" }, date),
+                    react_1.default.createElement(react_2.Box, { flex: "1", h: "0.063rem", bg: (_g = (_f = colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[200] })),
+                react_1.default.createElement(react_2.Box, { position: "relative" },
+                    react_1.default.createElement(react_2.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (_k = (_j = colors.gray) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = colors.boxborder) === null || _l === void 0 ? void 0 : _l[400], transform: "translateX(-50%)" }),
+                    groupedEvents[date].map(function (event, index) {
+                        var _a, _b, _c, _d;
+                        var scale = getEventScale(event.title);
+                        return (react_1.default.createElement(react_2.Flex, { key: "".concat((_a = event.logs_id) !== null && _a !== void 0 ? _a : date, "-").concat(index), align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3 },
+                            react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: "0.125rem solid ".concat((_b = colors.white) !== null && _b !== void 0 ? _b : "#fff"), boxShadow: "0 0 0 0.063rem ".concat((_c = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]), zIndex: 1 }, getIcon(event, 14)),
+                            react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                                react_1.default.createElement(EventCard, { event: event, index: index, accent: "left" }))));
+                    }))));
+        })));
     }
-    return (react_1.default.createElement(react_2.Box, { position: "relative", px: { base: 3, md: 6 }, maxW: { base: "100%", md: "50rem" }, mx: "auto" },
-        react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.5rem", md: "50%" }, top: 0, bottom: 0, w: "0.125rem", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300], transform: { md: "translateX(-50%)" } }),
+    // -------------------------------------------------------------------------
+    // Desktop: center spine with cards alternating left / right (the "tree")
+    // -------------------------------------------------------------------------
+    return (react_1.default.createElement(react_2.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2 },
+        react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[300]) !== null && _g !== void 0 ? _g : (_h = colors.boxborder) === null || _h === void 0 ? void 0 : _h[400], transform: "translateX(-50%)" }),
         Object.keys(groupedEvents).map(function (date) {
-            var _a, _b, _c, _d, _e;
-            return (react_1.default.createElement(react_2.Box, { key: date, mb: 4 },
-                react_1.default.createElement(react_2.Flex, { justify: "center", mb: 4 },
-                    react_1.default.createElement(react_2.Box, { fontSize: { base: "0.875rem", md: "1rem" }, fontWeight: "400", color: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.black, bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]), borderRadius: "0.313rem", px: { base: 2, md: 6 }, py: 1, textAlign: "center", zIndex: 1 }, date)),
+            var _a, _b, _c, _d, _e, _f;
+            return (react_1.default.createElement(react_2.Box, { key: date, mb: 2 },
+                react_1.default.createElement(react_2.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[600], bg: (_b = colors.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap" }, date)),
                 groupedEvents[date].map(function (event, index) {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+                    var _a, _b, _c, _d, _e, _f;
                     var isLeft = index % 2 === 0;
-                    return (react_1.default.createElement(react_2.Box, { key: "".concat(date, "-").concat(index), mb: 4, position: "relative" }, isMobile ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 3 },
-                        react_1.default.createElement(react_2.Box, { w: "1.5rem", h: "1.5rem", bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray) === null || _b === void 0 ? void 0 : _b[50], borderRadius: "full", border: "0.063rem solid ".concat((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) === null || _d === void 0 ? void 0 : _d[300]), display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, mt: 0.5 }, getIcon(event)),
-                        react_1.default.createElement(react_2.Box, { flex: "1" },
-                            react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: 1 },
-                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[500], minW: "3.5rem" }, formatTimestamp(event.created_at, "time")),
-                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: "medium", color: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray) === null || _h === void 0 ? void 0 : _h[700] },
-                                    event.action_from,
-                                    " ",
-                                    event.title),
-                                react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
-                                    react_1.default.createElement(react_2.Box, { cursor: "pointer" },
-                                        react_1.default.createElement(lucide_react_1.Info, { size: 12 })))),
-                            react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[500] },
-                                "by ",
-                                (0, functions_1.toWords)(event.action_by))))) : (
-                    // Desktop Layout
-                    react_1.default.createElement(react_2.Flex, { justify: isLeft ? "flex-start" : "flex-end", align: "flex-start", position: "relative" },
-                        react_1.default.createElement(react_2.Box, { position: "absolute", left: isLeft ? "auto" : "calc(50% + 0.938rem)", right: isLeft ? "calc(50% + 0.938rem)" : "auto", top: "0.938rem", width: isLeft ? "calc(50% - 4rem)" : "calc(50% - 4rem)", height: "0.125rem", bg: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300], zIndex: 0 }),
-                        react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", transform: "translateX(-50%)", w: "1.875rem", h: "1.875rem", bg: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[50], borderRadius: "full", border: "0.063rem solid ".concat((_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray) === null || _r === void 0 ? void 0 : _r[300]), display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }, getIcon(event)),
-                        react_1.default.createElement(react_2.Box, { bg: getEventBgColor(event.title), border: "0.063rem solid ".concat((_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.gray) === null || _t === void 0 ? void 0 : _t[300]), borderRadius: "0.5rem", px: 4, py: 2, maxW: "16rem", boxShadow: "sm", zIndex: 1, ml: isLeft ? 0 : "50%", mr: isLeft ? "50%" : 0, width: "calc(50% - 2rem)", position: "relative" },
-                            react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", mb: 1 },
-                                react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: "medium" },
-                                    event.action_from,
-                                    " ",
-                                    event.title),
-                                react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
-                                    react_1.default.createElement(react_2.Box, { ml: 1, cursor: "pointer" },
-                                        react_1.default.createElement(lucide_react_1.Info, { size: 14 })))),
-                            react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray) === null || _v === void 0 ? void 0 : _v[500] },
-                                "by ",
-                                (0, functions_1.toWords)(event.action_by)),
-                            react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.gray) === null || _x === void 0 ? void 0 : _x[500] }, formatTimestamp(event.created_at, "time")))))));
+                    var scale = getEventScale(event.title);
+                    return (react_1.default.createElement(react_2.Box, { key: "".concat((_a = event.logs_id) !== null && _a !== void 0 ? _a : date, "-").concat(index), position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE },
+                        react_1.default.createElement(react_2.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: (_b = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300], left: isLeft
+                                ? "calc(50% - ".concat(SPINE_GAP, ")")
+                                : "calc(50% + ".concat(NODE_RADIUS, ")"), zIndex: 0 }),
+                        react_1.default.createElement(react_2.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: "0.125rem solid ".concat((_d = colors.white) !== null && _d !== void 0 ? _d : "#fff"), boxShadow: "0 0 0 0.063rem ".concat((_e = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]), zIndex: 2 }, getIcon(event, 15)),
+                        react_1.default.createElement(react_2.Box, { position: "relative", zIndex: 1, w: "calc(50% - ".concat(SPINE_GAP, ")"), ml: isLeft ? 0 : "calc(50% + ".concat(SPINE_GAP, ")") },
+                            react_1.default.createElement(EventCard, { event: event, index: index, accent: isLeft ? "right" : "left" }))));
                 })));
         })));
 };

package/dist/Components/Toaster/Toaster.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -37,50 +41,65 @@ exports.useToaster = void 0;
 exports.default = ToasterProvider;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+var react_3 = require("@emotion/react");
+var lucide_react_1 = require("lucide-react");
 var ToasterContext = (0, react_1.createContext)(undefined);
+var shrink = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: scaleX(1); }\n  to { transform: scaleX(0); }\n"], ["\n  from { transform: scaleX(1); }\n  to { transform: scaleX(0); }\n"])));
 function ToasterProvider(_a) {
+    var _b;
     var children = _a.children;
     var toast = (0, react_2.useToast)();
     var theme = (0, react_2.useTheme)();
+    var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
     var showToast = function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var title = _a.title, description = _a.description, _m = _a.status, status = _m === void 0 ? "info" : _m, _o = _a.duration, duration = _o === void 0 ? 5000 : _o, _p = _a.isClosable, isClosable = _p === void 0 ? true : _p, _q = _a.position, position = _q === void 0 ? "top-right" : _q, onClose = _a.onClose;
-        var statusColors = {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var title = _a.title, description = _a.description, _t = _a.status, status = _t === void 0 ? "info" : _t, _u = _a.duration, duration = _u === void 0 ? 5000 : _u, _v = _a.isClosable, isClosable = _v === void 0 ? true : _v, _w = _a.position, position = _w === void 0 ? "top-right" : _w, onClose = _a.onClose;
+        // Status → semantic color scale + icon (falls back to legacy palettes).
+        var statusConfig = {
             success: {
-                bg: (_b = theme.colors.green) === null || _b === void 0 ? void 0 : _b[50],
-                border: (_c = theme.colors.green) === null || _c === void 0 ? void 0 : _c[300],
+                scale: (_c = (_b = c.semantic) === null || _b === void 0 ? void 0 : _b.success) !== null && _c !== void 0 ? _c : c.green,
+                icon: react_1.default.createElement(lucide_react_1.CheckCircle2, { size: 18 }),
             },
             error: {
-                bg: (_d = theme.colors.red) === null || _d === void 0 ? void 0 : _d[50],
-                border: (_e = theme.colors.red) === null || _e === void 0 ? void 0 : _e[300],
+                scale: (_e = (_d = c.semantic) === null || _d === void 0 ? void 0 : _d.error) !== null && _e !== void 0 ? _e : c.red,
+                icon: react_1.default.createElement(lucide_react_1.XCircle, { size: 18 }),
             },
             warning: {
-                bg: (_f = theme.colors.yellow) === null || _f === void 0 ? void 0 : _f[50],
-                border: (_g = theme.colors.yellow) === null || _g === void 0 ? void 0 : _g[300],
+                scale: (_h = (_g = (_f = c.semantic) === null || _f === void 0 ? void 0 : _f.warning) !== null && _g !== void 0 ? _g : c.yellow) !== null && _h !== void 0 ? _h : c.orange,
+                icon: react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 }),
             },
             info: {
-                bg: (_h = theme.colors.blue) === null || _h === void 0 ? void 0 : _h[50],
-                border: (_j = theme.colors.blue) === null || _j === void 0 ? void 0 : _j[300],
+                scale: (_k = (_j = c.semantic) === null || _j === void 0 ? void 0 : _j.info) !== null && _k !== void 0 ? _k : c.blue,
+                icon: react_1.default.createElement(lucide_react_1.Info, { size: 18 }),
             },
             loading: {
-                bg: (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[50],
-                border: (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[300],
+                scale: (_l = c.primary) !== null && _l !== void 0 ? _l : c.gray,
+                icon: react_1.default.createElement(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
             },
         };
-        var colors = statusColors[status];
+        var _x = (_m = statusConfig[status]) !== null && _m !== void 0 ? _m : statusConfig.info, scale = _x.scale, icon = _x.icon;
+        var solid = (_o = scale === null || scale === void 0 ? void 0 : scale[500]) !== null && _o !== void 0 ? _o : (_p = c.gray) === null || _p === void 0 ? void 0 : _p[500];
+        var soft = (_q = scale === null || scale === void 0 ? void 0 : scale[50]) !== null && _q !== void 0 ? _q : (_r = c.gray) === null || _r === void 0 ? void 0 : _r[50];
+        var accent = (_s = scale === null || scale === void 0 ? void 0 : scale[600]) !== null && _s !== void 0 ? _s : solid;
+        var showProgress = typeof duration === "number" && duration > 0;
         toast({
             duration: duration,
             isClosable: isClosable,
             position: position,
             onCloseComplete: onClose,
             render: function (_a) {
+                var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
                 var onClose = _a.onClose;
-                return (react_1.default.createElement(react_2.Box, { bg: colors.bg, border: "0.063rem solid", borderColor: colors.border, boxShadow: "md", borderRadius: "md", p: 4, minW: "22.5rem" },
-                    react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "flex-start" },
-                        react_1.default.createElement(react_2.Box, null,
-                            react_1.default.createElement(react_2.Text, { fontWeight: "semibold", mb: "0.25rem" }, title),
-                            react_1.default.createElement(react_2.Text, { fontSize: "sm" }, description)),
-                        isClosable && (react_1.default.createElement(react_2.CloseButton, { onClick: onClose, size: "sm", mt: 1, ml: 4 })))));
+                return (react_1.default.createElement(react_2.Box, { position: "relative", bg: (_b = c.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: (_g = (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.lg) !== null && _g !== void 0 ? _g : "lg", borderRadius: "0.75rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem" },
+                    react_1.default.createElement(react_2.Flex, { p: 3.5, gap: 3, align: "center" },
+                        react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent }, icon),
+                        react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                            title && (react_1.default.createElement(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_j = (_h = c.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[800] }, title)),
+                            description && (react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_m = (_l = c.gray) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : (_o = c.text) === null || _o === void 0 ? void 0 : _o[600], mt: title ? "0.125rem" : 0 }, description))),
+                        isClosable && (react_1.default.createElement(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_p = c.gray) === null || _p === void 0 ? void 0 : _p[500], borderRadius: "md", _hover: { bg: (_q = c.gray) === null || _q === void 0 ? void 0 : _q[100], color: (_r = c.gray) === null || _r === void 0 ? void 0 : _r[700] } }))),
+                    showProgress && (react_1.default.createElement(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, transformOrigin: "left", sx: {
+                            animation: "".concat(shrink, " ").concat(duration, "ms linear forwards"),
+                        } }))));
             },
         });
     };
@@ -94,3 +113,4 @@ var useToaster = function () {
     return context;
 };
 exports.useToaster = useToaster;
+var templateObject_1;

package/dist/Theme/Default/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;

package/dist/Theme/Default/palette.js

@@ -281,7 +281,10 @@ var disabled = {
     800: "#625d75",
     900: "#4b4759",
 };
+// Two-tone brand gradient (violet → pink). Each theme overrides with its own pair.
+var gradient = { from: "#8B3FC8", to: "#EC4899" };
 var palette = {
+    gradient: gradient,
     primary: primary,
     secondary: secondary,
     tertiary: tertiary,

package/dist/Theme/Emerald/palette.d.ts

@@ -1,4 +1,8 @@
 declare const palette: {
+    gradient: {
+        from: string;
+        to: string;
+    };
     primary: {
         50: string;
         100: string;