pixelize-design-library 2.3.1-beta.1 → 2.3.1-beta.3

package/.claude/settings.local.json

@@ -18,7 +18,9 @@
       "Bash(echo \"exit=$?\")",
       "Read(//tmp/**)",
       "Bash(git mv *)",
-      "Bash(git rm *)"
+      "Bash(git rm *)",
+      "Bash(node -e \"console.log\\(require\\('@emotion/react/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\('jodit-react', require\\('jodit-react/package.json'\\).version\\); try{console.log\\('jodit', require\\('jodit/package.json'\\).version\\)}catch\\(e\\){}\")"
     ]
   }
 }

package/dist/Components/Accordion/Accordion.js

@@ -27,14 +27,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var Accordion = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var allowMultiple = _a.allowMultiple, allowToggle = _a.allowToggle, index = _a.index, onChange = _a.onChange, reduceMotion = _a.reduceMotion, items = _a.items, rest = __rest(_a, ["allowMultiple", "allowToggle", "index", "onChange", "reduceMotion", "items"]);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
+    var border = (_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];
+    var headingColor = (_g = (_f = c.text) === null || _f === void 0 ? void 0 : _f[800]) !== null && _g !== void 0 ? _g : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[800];
+    var bodyColor = (_k = (_j = c.text) === null || _j === void 0 ? void 0 : _j[600]) !== null && _k !== void 0 ? _k : (_l = c.gray) === null || _l === void 0 ? void 0 : _l[600];
+    var softHover = (_p = (_o = (_m = c.table) === null || _m === void 0 ? void 0 : _m.hover) === null || _o === void 0 ? void 0 : _o[100]) !== null && _p !== void 0 ? _p : (_q = c.gray) === null || _q === void 0 ? void 0 : _q[50];
+    var expandedBg = (_t = (_s = (_r = c.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[8]) !== null && _t !== void 0 ? _t : (_u = c.gray) === null || _u === void 0 ? void 0 : _u[50];
     return (react_1.default.createElement(react_2.Accordion, __assign({ allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion }, rest), items.map(function (item, idx) {
-        var _a, _b, _c, _d;
-        return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx }, item.itemProps, { sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle }),
-            react_1.default.createElement("h2", null,
-                react_1.default.createElement(react_2.AccordionButton, __assign({}, item.buttonProps, { sx: __assign(__assign({}, (_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle), { '&:hover': __assign({}, (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle) }) }), item.header)),
-            react_1.default.createElement(react_2.AccordionPanel, __assign({}, item.panelProps, { sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.panelStyle }), item.content)));
+        var _a, _b, _c, _d, _e;
+        return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx, border: "0.063rem solid ".concat(border), borderRadius: "0.625rem", bg: (_a = c.white) !== null && _a !== void 0 ? _a : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[400]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[300] } }, item.itemProps, { sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.itemStyle }), function (_a) {
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var isExpanded = _a.isExpanded;
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("h2", null,
+                    react_1.default.createElement(react_2.AccordionButton, __assign({ px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
+                            boxShadow: "none",
+                            outline: "0.125rem solid ".concat((_c = (_b = c.primary) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[300]),
+                            outlineOffset: "-0.125rem",
+                        } }, item.buttonProps, { sx: __assign(__assign({}, (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.buttonStyle), { "&:hover": __assign({}, (_f = item.customStyles) === null || _f === void 0 ? void 0 : _f.hoverbuttonStyle) }) }),
+                        react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, item.header),
+                        react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_h = (_g = c.primary) === null || _g === void 0 ? void 0 : _g[600]) !== null && _h !== void 0 ? _h : headingColor) : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[500], bg: isExpanded ? ((_m = (_l = (_k = c.primary) === null || _k === void 0 ? void 0 : _k.opacity) === null || _l === void 0 ? void 0 : _l[16]) !== null && _m !== void 0 ? _m : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease" },
+                            react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })))),
+                react_1.default.createElement(react_2.AccordionPanel, __assign({ px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor }, item.panelProps, { sx: (_o = item.customStyles) === null || _o === void 0 ? void 0 : _o.panelStyle }), item.content)));
+        }));
     })));
 };
 exports.default = Accordion;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -57,11 +57,11 @@ function NavBar(_a) {
                 (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, __assign({}, iconButtonStyle, { display: "flex", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } }),
                     react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
                 (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
-            react_1.default.createElement(react_2.Flex, null,
-                react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 7 },
+            react_1.default.createElement(react_2.Flex, { minW: 0, flexShrink: 1 },
+                react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0 },
+                    moreIcon && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", minW: 0 }, moreIcon)),
                     react_1.default.createElement(react_2.Menu, null,
-                        moreIcon && react_1.default.createElement(react_2.Box, __assign({}, iconButtonStyle, { display: "flex" }), moreIcon),
-                        react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
+                        react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0 },
                             react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
                         react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", overflow: "hidden" },
                             react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", maxH: "90vh" },

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
-export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, }: ProfilePhotoViewerProps): React.JSX.Element;
+export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): React.JSX.Element;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -50,10 +50,12 @@ var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function ProfilePhotoViewer(_a) {
-    var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText;
-    var _m = (0, react_1.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _z = _a.imageWidth, imageWidth = _z === void 0 ? "100px" : _z, _0 = _a.imageAlt, imageAlt = _0 === void 0 ? "Profile Photo" : _0, _1 = _a.imageObjectFit, imageObjectFit = _1 === void 0 ? "cover" : _1, _2 = _a.imageBorderRadius, imageBorderRadius = _2 === void 0 ? "full" : _2, _3 = _a.editIconSize, editIconSize = _3 === void 0 ? "sm" : _3, _4 = _a.editIconPositionRight, editIconPositionRight = _4 === void 0 ? "0px" : _4, _5 = _a.editIconPositionBottom, editIconPositionBottom = _5 === void 0 ? "0px" : _5, _6 = _a.isRound, isRound = _6 === void 0 ? true : _6, boxStyle = _a.boxStyle, _7 = _a.isEditable, isEditable = _7 === void 0 ? false : _7, _8 = _a.isView, isView = _8 === void 0 ? false : _8, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText, _9 = _a.revealOnHover, revealOnHover = _9 === void 0 ? true : _9;
+    var _10 = (0, react_1.useState)(photoUrl), photo = _10[0], setPhoto = _10[1];
     var fileInputRef = (0, react_1.useRef)(null);
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
     var handlePhotoChange = function (event) {
         var _a;
         if (!isEditable)
@@ -76,31 +78,47 @@ function ProfilePhotoViewer(_a) {
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     var isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
-    return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, sx: {
-            "&:hover .icon-button": {
-                opacity: 1,
+    var border = (_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];
+    // Shared modern frame for whichever media we render (photo / pdf / fallback).
+    var mediaFrame = {
+        boxSize: imageWidth,
+        borderRadius: imageBorderRadius,
+        border: "0.063rem solid ".concat(border),
+        boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.sm,
+    };
+    var renderMedia = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (photo) {
+            return isPdf ? (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { bg: (_b = (_a = c.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "gray.100", color: (_c = c.gray) === null || _c === void 0 ? void 0 : _c[500], display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }),
+                react_1.default.createElement(lucide_react_1.FileText, { size: "45%" }))) : (react_1.default.createElement(react_2.Image, __assign({ src: photo, alt: imageAlt, objectFit: imageObjectFit }, mediaFrame)));
+        }
+        // Fallback: branded tinted avatar (initials or user glyph).
+        return (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { display: "flex", alignItems: "center", justifyContent: "center", bg: (_f = (_e = (_d = c.primary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[16]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[100], color: (_j = (_h = c.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[500] }), fallbackText ? (react_1.default.createElement(react_2.Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1" }, fallbackText)) : (react_1.default.createElement(lucide_react_1.User, { size: "48%" }))));
+    };
+    var hasActions = isEditable || isView;
+    return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
+            "&:hover .ppv-overlay": { opacity: 1 },
+            "&:hover .ppv-actions": { opacity: 1 },
+            "&:hover .ppv-media": {
+                boxShadow: "0 0 0 0.1875rem ".concat((_j = (_h = (_g = c.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[24]) !== null && _j !== void 0 ? _j : "transparent"),
             },
         } },
-        photo ? (isPdf ? (react_1.default.createElement(react_2.Box, { width: imageWidth, height: imageWidth, borderRadius: imageBorderRadius, bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" },
-            react_1.default.createElement(lucide_react_1.FileText, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
-            react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold" }, fallbackText))) : (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
-            react_1.default.createElement(lucide_react_1.User, { size: "50%" }))),
-        (isEditable || isView) && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Box, { className: "icon-button", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-25%, -25%)", sx: {
-                    opacity: 0,
-                    transition: "opacity 0.3s",
-                } },
-                isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md, marginRight: "3px" }), _hover: {
+        react_1.default.createElement(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease" }, renderMedia()),
+        hasActions && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }),
+            react_1.default.createElement(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease" },
+                isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true },
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: (_k = c.primary) === null || _k === void 0 ? void 0 : _k[500], color: (_l = c.white) !== null && _l !== void 0 ? _l : "#fff", border: "0.125rem solid ".concat((_m = c.white) !== null && _m !== void 0 ? _m : "#fff"), boxShadow: (_o = theme.shadows) === null || _o === void 0 ? void 0 : _o.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                            bg: (_p = c.primary) === null || _p === void 0 ? void 0 : _p[600],
                             transform: "scale(1.1)",
-                            color: theme.colors.white,
-                            boxShadow: theme.shadows.lg,
-                        } }))),
-                isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md }), _hover: {
+                            boxShadow: (_q = theme.shadows) === null || _q === void 0 ? void 0 : _q.lg,
+                        }, _active: { bg: (_r = c.primary) === null || _r === void 0 ? void 0 : _r[700] } }))),
+                isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true },
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: (_s = c.white) !== null && _s !== void 0 ? _s : "#fff", color: (_t = c.gray) === null || _t === void 0 ? void 0 : _t[700], border: "0.063rem solid ".concat(border), boxShadow: (_u = theme.shadows) === null || _u === void 0 ? void 0 : _u.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                            bg: (_v = c.gray) === null || _v === void 0 ? void 0 : _v[50],
+                            color: (_w = c.primary) === null || _w === void 0 ? void 0 : _w[600],
                             transform: "scale(1.1)",
-                            color: theme.colors.white,
-                            boxShadow: theme.shadows.lg,
-                        } })))),
+                            boxShadow: (_x = theme.shadows) === null || _x === void 0 ? void 0 : _x.lg,
+                        }, _active: { bg: (_y = c.gray) === null || _y === void 0 ? void 0 : _y[100] } })))),
             isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
 }

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -15,4 +15,6 @@ export type ProfilePhotoViewerProps = {
     style?: React.CSSProperties;
     handleIsView?: () => void;
     fallbackText?: string;
+    /** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
+    revealOnHover?: boolean;
 };

package/dist/Components/Table/{Components → components}/TableHeader.js

@@ -59,8 +59,8 @@ var TableHeader = function (_a) {
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
     var RenderCheckbox = (0, react_2.useCallback)(function () {
-        var _a, _b, _c, _d;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9 }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
+        var _a, _b, _c, _d, _e;
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
     }, [
         checked,
         freezedTextColor,
@@ -72,15 +72,11 @@ var TableHeader = function (_a) {
     ]);
     var RenderConent = (0, react_2.useCallback)(function () {
         var _a, _b, _c;
-        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
+        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors]);
     var RenderView = (0, react_2.useCallback)(function () {
-        var _a, _b;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], 
-            // borderY={
-            //   noBorders ? "none" : `0.063rem solid ${theme.colors?.gray[300]}`
-            // }
-            position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
+        var _a, _b, _c;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors, isActionFreeze]);
     return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),

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" }))));
                 })));
         })));
 };