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

package/dist/Components/Tag/Tag.styles.js

@@ -5,7 +5,12 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 // Resolve a colorScheme key to a numeric swatch from the theme. All supported
 // colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
 // gray so an unknown/missing key can never throw at render time.
-const swatch = (theme, colorScheme = "primary") => { var _a, _b, _c, _d; return (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {}; };
+const SCALE_KEYS = [
+    "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
+    "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const isScaleKey = (key) => SCALE_KEYS.includes(key);
+const swatch = (theme, colorScheme = "primary") => isScaleKey(colorScheme) ? theme.colors[colorScheme] : theme.colors.gray;
 // Chakra Tag is a multipart component (container / label / closeButton); styling
 // is keyed under those parts, so it needs a multi-style config with `parts`.
 exports.Tag = {
@@ -36,10 +41,8 @@ exports.Tag = {
     },
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            var _a, _b, _c, _d;
             const c = swatch(theme, colorScheme);
-            const white = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_WHITE;
-            const black = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.black) !== null && _d !== void 0 ? _d : accentText_1.DEFAULT_BLACK;
+            const { white, black } = theme.colors;
             const fill = c[500];
             const hoverFill = c[600];
             const activeFill = c[700];
@@ -69,9 +72,8 @@ exports.Tag = {
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
-            var _a, _b, _c;
             const c = swatch(theme, colorScheme);
-            const canvas = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : accentText_1.DEFAULT_CANVAS;
+            const canvas = theme.colors.backgroundColor.main;
             return {
                 container: {
                     border: "0.094rem solid",

package/dist/Components/Timeline/Timeline.js

@@ -23,8 +23,6 @@ const TIME_FMT = new Intl.DateTimeFormat("en-US", {
     minute: "2-digit",
     hour12: true,
 });
-// Stable identity, so a theme without a palette does not invalidate every memoised card.
-const EMPTY_COLORS = {};
 const formatTimestamp = (timestamp, type) => {
     if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
         const date = new Date(timestamp);
@@ -54,15 +52,14 @@ const formatTimestamp = (timestamp, type) => {
 };
 // A semantic color scale chosen by the action title (created / updated / delete).
 const getEventScale = (colors, 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;
+            return colors.semantic.success;
         case "updated":
-            return (_d = (_c = colors.semantic) === null || _c === void 0 ? void 0 : _c.warning) !== null && _d !== void 0 ? _d : colors.orange;
+            return colors.semantic.warning;
         case "delete":
         case "deleted":
-            return (_f = (_e = colors.semantic) === null || _e === void 0 ? void 0 : _e.error) !== null && _f !== void 0 ? _f : colors.red;
+            return colors.semantic.error;
         default:
             return colors.primary;
     }
@@ -143,50 +140,44 @@ const OFFSCREEN_SKIP = {
 // swapping to an inline NoteTextArea while editing.
 // Declared at module scope: inside Timeline's body it remounts every note on each render.
 const NoteItem = react_2.default.memo(function NoteItem({ note, event, index, colors, activeEditNoteId, setActiveEditNoteId, editNoteLoading, deletingNoteId, onEditNote, onDeleteNote, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+    var _a, _b;
     const isEditing = activeEditNoteId === note.log_note_id;
     const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
     if (isEditing) {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { isEditable: true, value: (_a = note.note) !== null && _a !== void 0 ? _a : "", title: (_b = note.title) !== null && _b !== void 0 ? _b : "", saveButtonLoading: editNoteLoading, handleSubmit: (n, t, f) => onEditNote === null || onEditNote === void 0 ? void 0 : onEditNote(note.log_note_id, n, t, f, event, index), handleCancel: () => setActiveEditNoteId(null) }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", bg: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[50], border: `0.063rem solid ${(_e = (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_g = colors.primary) === null || _g === void 0 ? void 0 : _g[500], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.StickyNote, { size: 12 }) }), note.title && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", fontWeight: 700, color: (_j = (_h = colors.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && ((0, jsx_runtime_1.jsx)(react_1.Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: "opacity 0.15s ease", children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", color: (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[500] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onEditNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Edit note", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[500], bg: "transparent", cursor: "pointer", _hover: {
-                                            bg: (_o = colors.primary) === null || _o === void 0 ? void 0 : _o[50],
-                                            color: (_p = colors.primary) === null || _p === void 0 ? void 0 : _p[600],
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", bg: colors.gray[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.gray[50]), display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.StickyNote, { size: 12 }) }), note.title && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && ((0, jsx_runtime_1.jsx)(react_1.Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: "opacity 0.15s ease", children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", color: colors.textMuted })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onEditNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Edit note", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+                                            bg: colors.primary[50],
+                                            color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]),
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             setActiveEditNoteId(note.log_note_id);
-                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }) }) })), onDeleteNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Delete", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Delete note", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], bg: "transparent", cursor: "pointer", _hover: {
-                                            bg: (_t = (_s = (_r = colors.semantic) === null || _r === void 0 ? void 0 : _r.error) === null || _s === void 0 ? void 0 : _s[50]) !== null && _t !== void 0 ? _t : (_u = colors.red) === null || _u === void 0 ? void 0 : _u[50],
-                                            color: (_x = (_w = (_v = colors.semantic) === null || _v === void 0 ? void 0 : _v.error) === null || _w === void 0 ? void 0 : _w[600]) !== null && _x !== void 0 ? _x : (_y = colors.red) === null || _y === void 0 ? void 0 : _y[600],
+                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }) }) })), onDeleteNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Delete", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Delete note", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+                                            bg: colors.semantic.error[50],
+                                            color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.error, colors.semantic.error[50]),
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             onDeleteNote === null || onDeleteNote === void 0 ? void 0 : onDeleteNote(note.log_note_id, event, index);
-                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }) }) }))] })) }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_0 = (_z = colors.text) === null || _z === void 0 ? void 0 : _z[700]) !== null && _0 !== void 0 ? _0 : (_1 = colors.gray) === null || _1 === void 0 ? void 0 : _1[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => {
-                    var _a, _b, _c;
-                    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: (_a = colors.primary) === null || _a === void 0 ? void 0 : _a[50], color: (_b = colors.primary) === null || _b === void 0 ? void 0 : _b[700], fontSize: "0.625rem", maxW: "100%", _hover: { bg: (_c = colors.primary) === null || _c === void 0 ? void 0 : _c[100] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 10 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex));
-                }) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.625rem", color: (_2 = colors.gray) === null || _2 === void 0 ? void 0 : _2[500], mt: 1, children: [note.created_by ? (0, functions_1.toWords)(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
+                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }) }) }))] })) }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: colors.primary[50], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]), fontSize: "0.625rem", maxW: "100%", _hover: { bg: colors.primary[100] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 10 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.625rem", color: colors.textMuted, mt: 1, children: [note.created_by ? (0, functions_1.toWords)(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
 });
 // 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).
 // Declared at module scope: inside Timeline's body it remounts every card on each render.
 const EventCard = react_2.default.memo(function EventCard({ event, index, accent, colors, theme, isActiveNote, setActiveNoteEventIndex, activeEditNoteId, setActiveEditNoteId, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, onEventClick, onAddNote, onEditNote, onDeleteNote, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+    var _a;
     const scale = getEventScale(colors, event.title);
     const changes = (0, react_3.useMemo)(() => parseChanges(event.changes), [event.changes]);
     const clickable = typeof onEventClick === "function";
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: clickable ? "button" : undefined, type: clickable ? "button" : undefined, display: clickable ? "block" : undefined, w: clickable ? "100%" : undefined, textAlign: clickable ? "start" : undefined, position: "relative", zIndex: 1, bg: (_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : (_c = colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.light, border: `0.063rem solid ${(_e = (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[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: "xl", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
-                    borderColor: (_g = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300],
-                    boxShadow: (_j = theme.shadows) === null || _j === void 0 ? void 0 : _j.md,
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: clickable ? "button" : undefined, type: clickable ? "button" : undefined, display: clickable ? "block" : undefined, w: clickable ? "100%" : undefined, textAlign: clickable ? "start" : undefined, position: "relative", zIndex: 1, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[300]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
+                    borderColor: scale[300],
+                    boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.md,
                     transform: clickable ? "translateY(-1px)" : undefined,
-                }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_l = (_k = colors.text) === null || _k === void 0 ? void 0 : _k[800]) !== null && _l !== void 0 ? _l : (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (0, accentText_1.accentTextOnCanvas)(scale, (_o = scale === null || scale === void 0 ? void 0 : scale[50]) !== null && _o !== void 0 ? _o : accentText_1.DEFAULT_CANVAS), bg: scale === null || scale === void 0 ? void 0 : scale[50], border: `0.063rem solid ${(_p = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _p !== void 0 ? _p : (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[500], whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-                            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.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], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.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: "base", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(((_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) !== null && _h !== void 0 ? _h : colors.green), ((_l = (_k = (_j = colors.semantic) === null || _j === void 0 ? void 0 : _j.success) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : (_m = colors.green) === null || _m === void 0 ? void 0 : _m[50])), bg: (_q = (_p = (_o = colors.semantic) === null || _o === void 0 ? void 0 : _o.success) === null || _p === void 0 ? void 0 : _p[50]) !== null && _q !== void 0 ? _q : (_r = colors.green) === null || _r === void 0 ? void 0 : _r[50], borderRadius: "base", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`));
-                        }) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_u = (_t = (_s = colors.primary) === null || _s === void 0 ? void 0 : _s.opacity) === null || _t === void 0 ? void 0 : _t[16]) !== null && _u !== void 0 ? _u : (_v = colors.primary) === null || _v === void 0 ? void 0 : _v[50], color: (_w = colors.primary) === null || _w === void 0 ? void 0 : _w[600], fontSize: "0.5625rem", fontWeight: 700, children: initials((0, functions_1.toWords)(event.action_by)) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: (_x = colors.gray) === null || _x === void 0 ? void 0 : _x[500], children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_z = (_y = colors.text) === null || _y === void 0 ? void 0 : _y[700]) !== null && _z !== void 0 ? _z : (_0 = colors.gray) === null || _0 === void 0 ? void 0 : _0[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] }), showAddNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
+                }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), bg: scale[50], border: `0.063rem solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[700], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, bg: colors.gray[50], borderRadius: "base", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "base", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: colors.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), fontSize: "0.5625rem", fontWeight: 700, children: initials((0, functions_1.toWords)(event.action_by)) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: colors.textMuted, children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.text[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] }), showAddNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     setActiveNoteEventIndex(isActiveNote ? null : index);
-                                }, opacity: isActiveNote ? 1 : 0, transition: "opacity 0.15s ease", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 600, color: (_1 = colors.primary) === null || _1 === void 0 ? void 0 : _1[700], bg: "transparent", cursor: "pointer", _hover: {
-                                    bg: (_2 = colors.primary) === null || _2 === void 0 ? void 0 : _2[50],
-                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${(_4 = (_3 = colors.gray) === null || _3 === void 0 ? void 0 : _3[100]) !== null && _4 !== void 0 ? _4 : (_5 = colors.boxborder) === null || _5 === void 0 ? void 0 : _5[200]}`, children: event.notes.map((note, noteIndex) => {
+                                }, opacity: isActiveNote ? 1 : 0, transition: "opacity 0.15s ease", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 600, color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
+                                    bg: colors.primary[50],
+                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${colors.gray[100]}`, children: event.notes.map((note, noteIndex) => {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(NoteItem, { note: note, event: event, index: index, colors: colors, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEditNote: onEditNote, onDeleteNote: onDeleteNote }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));
                         }) }))] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { saveButtonLoading: addNoteLoading, handleSubmit: (note, title, files) => {
@@ -198,9 +189,8 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
                     }, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
 });
 const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote = false, addNoteLoading, editNoteLoading, deletingNoteId, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const colors = (_a = theme.colors) !== null && _a !== void 0 ? _a : EMPTY_COLORS;
+    const colors = theme.colors;
     const isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
     const [activeNoteEventIndex, setActiveNoteEventIndex] = (0, react_3.useState)(null);
     const [activeEditNoteId, setActiveEditNoteId] = (0, react_3.useState)(null);
@@ -222,33 +212,30 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     }, [editNoteLoading]);
     const groupedEvents = (0, react_3.useMemo)(() => groupEventsByDate(timelineEvents !== null && timelineEvents !== void 0 ? timelineEvents : []), [timelineEvents]);
     if (!timelineEvents || timelineEvents.length === 0) {
-        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[500], children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "2.75rem", borderRadius: "full", bg: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[400], children: (0, jsx_runtime_1.jsx)(lucide_react_1.Volleyball, { size: 20 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", fontWeight: 500, children: "No timeline events to display" })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[100]), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Volleyball, { size: 20 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", fontWeight: 500, children: "No timeline events to display" })] }));
     }
     // -------------------------------------------------------------------------
     // Mobile: single left rail (alternating doesn't read well on narrow widths)
     // -------------------------------------------------------------------------
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.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 ${(_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", children: date }), (0, jsx_runtime_1.jsx)(react_1.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] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.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(({ event, globalIndex }, index) => {
-                                    var _a, _b, _c, _d, _e, _f;
-                                    const scale = getEventScale(colors, event.title);
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [(0, jsx_runtime_1.jsx)(react_1.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 ${(_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : (_c = colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.light}`, boxShadow: `0 0 0 0.063rem ${(_d = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, theme: theme, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_f = event.logs_id) !== null && _f !== void 0 ? _f : date}-${index}`));
-                                })] })] }, date));
-            }) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", h: "0.063rem", bg: colors.boxborder[200] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: colors.gray[300], transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+                                var _a;
+                                const scale = getEventScale(colors, event.title);
+                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale[50], color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, theme: theme, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
+                            })] })] }, date))) }));
     }
     // -------------------------------------------------------------------------
     // Desktop: center spine with cards alternating left / right (the "tree")
     // -------------------------------------------------------------------------
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (_f = (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[300]) !== null && _f !== void 0 ? _f : (_g = colors.boxborder) === null || _g === void 0 ? void 0 : _g[400], transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[600], bg: (_c = (_b = colors.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : (_d = colors.backgroundColor) === null || _d === void 0 ? void 0 : _d.light, border: `0.063rem solid ${(_f = (_e = colors.boxborder) === null || _e === void 0 ? void 0 : _e[300]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[200]}`, boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: colors.gray[300], transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => {
+                var _a;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[300]}`, boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+                            var _a;
                             const isLeft = index % 2 === 0;
                             const scale = getEventScale(colors, event.title);
-                            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, sx: OFFSCREEN_SKIP, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: (_a = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _a !== void 0 ? _a : (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[300], left: isLeft
+                            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, sx: OFFSCREEN_SKIP, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: scale[300], left: isLeft
                                             ? `calc(50% - ${SPINE_GAP})`
-                                            : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.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 ${(_d = (_c = colors.background) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : (_e = colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.light}`, boxShadow: `0 0 0 0.063rem ${(_f = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left", colors: colors, theme: theme, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_h = event.logs_id) !== null && _h !== void 0 ? _h : date}-${index}`));
+                                            : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale[50], color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left", colors: colors, theme: theme, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
                         })] }, date));
             })] }));
 };

package/dist/Components/Toaster/Toaster.js

@@ -8,6 +8,9 @@ const react_2 = require("@chakra-ui/react");
 const react_3 = require("@emotion/react");
 const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const ToasterContext = (0, react_1.createContext)(undefined);
 const shrink = (0, react_3.keyframes) `
   from { transform: scaleX(1); }
@@ -26,12 +29,9 @@ const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
  * action without the toast vanishing mid-reach.
  */
 function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, shadowLg, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     const [paused, setPaused] = (0, react_1.useState)(false);
-    const solid = (_b = (_a = meta.scale) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = c === null || c === void 0 ? void 0 : c.gray) === null || _c === void 0 ? void 0 : _c[500];
-    const soft = (_e = (_d = meta.scale) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : (_f = c === null || c === void 0 ? void 0 : c.gray) === null || _f === void 0 ? void 0 : _f[50];
-    const accent = (_h = (_g = meta.scale) === null || _g === void 0 ? void 0 : _g[600]) !== null && _h !== void 0 ? _h : solid;
-    const ringTint = (_k = (_j = meta.scale) === null || _j === void 0 ? void 0 : _j[200]) !== null && _k !== void 0 ? _k : soft;
+    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
+    const tone = (0, statusTone_1.resolveStatusTone)(meta.scale, mode);
     const showProgress = typeof duration === "number" && duration > 0;
     return ((0, jsx_runtime_1.jsxs)(MotionBox
     // Refined entrance — slides in from the right and settles, never a hard pop.
@@ -50,54 +50,53 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", 
         // Surface token, not `colors.white`: `white` is a foreground token and stays
         // white in dark mode. `background[50]` is #ffffff in light, near-black in dark.
-        bg: (_l = c === null || c === void 0 ? void 0 : c.background) === null || _l === void 0 ? void 0 : _l[50], border: `0.063rem solid ${(_o = (_m = c === null || c === void 0 ? void 0 : c.boxborder) === null || _m === void 0 ? void 0 : _m[300]) !== null && _o !== void 0 ? _o : (_p = c === null || c === void 0 ? void 0 : c.gray) === null || _p === void 0 ? void 0 : _p[200]}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "2xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
+        bg: c.background[50], border: `0.063rem solid ${c.boxborder[300]}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "2xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
             transition: "box-shadow 0.18s ease",
             _hover: { boxShadow: "xl" },
-        }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent, sx: {
-                            ["--toast-pulse-color"]: ringTint,
+        }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: tone.bg, color: tone.fg, sx: {
+                            ["--toast-pulse-color"]: tone.border,
                             animation: `${iconPulse} 900ms ease-out 1`,
-                        }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_r = (_q = c === null || c === void 0 ? void 0 : c.text) === null || _q === void 0 ? void 0 : _q[800]) !== null && _r !== void 0 ? _r : (_s = c === null || c === void 0 ? void 0 : c.gray) === null || _s === void 0 ? void 0 : _s[800], children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_u = (_t = c === null || c === void 0 ? void 0 : c.gray) === null || _t === void 0 ? void 0 : _t[600]) !== null && _u !== void 0 ? _u : (_v = c === null || c === void 0 ? void 0 : c.text) === null || _v === void 0 ? void 0 : _v[600], mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_w = c === null || c === void 0 ? void 0 : c.gray) === null || _w === void 0 ? void 0 : _w[400], borderRadius: "md", alignSelf: "flex-start", _hover: {
-                            bg: (_x = c === null || c === void 0 ? void 0 : c.gray) === null || _x === void 0 ? void 0 : _x[100],
-                            color: (_y = c === null || c === void 0 ? void 0 : c.gray) === null || _y === void 0 ? void 0 : _y[700],
-                        } }))] }), showProgress && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, opacity: 0.85, transformOrigin: "left", sx: {
+                        }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: c.text[800], children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
+                            bg: c.gray[100],
+                            color: c.text[700],
+                        } }))] }), showProgress && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: meta.ink, opacity: 0.85, transformOrigin: "left", sx: {
                     animation: `${shrink} ${duration}ms linear forwards`,
                     animationPlayState: paused ? "paused" : "running",
                 } }))] }));
 }
 function ToasterProvider({ children }) {
-    var _a;
     const toast = (0, react_2.useToast)();
-    const theme = (0, react_2.useTheme)();
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const colors = theme.colors;
-    const shadowLg = (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg;
-    // Keyed off `theme.colors`, not the `?? {}` fallback: dark mode swaps the palette object, so
-    // this must re-derive per mode or a toast fired after a switch paints the old mode's colors.
-    const statusConfig = (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const c = colors !== null && colors !== void 0 ? colors : {};
-        return {
-            success: {
-                scale: (_b = (_a = c.semantic) === null || _a === void 0 ? void 0 : _a.success) !== null && _b !== void 0 ? _b : c.green,
-                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 18 }),
-            },
-            error: {
-                scale: (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.error) !== null && _d !== void 0 ? _d : c.red,
-                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.XCircle, { size: 18 }),
-            },
-            warning: {
-                scale: (_g = (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.warning) !== null && _f !== void 0 ? _f : c.yellow) !== null && _g !== void 0 ? _g : c.orange,
-                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }),
-            },
-            info: {
-                scale: (_j = (_h = c.semantic) === null || _h === void 0 ? void 0 : _h.info) !== null && _j !== void 0 ? _j : c.blue,
-                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 18 }),
-            },
-            loading: {
-                scale: ((_k = c.primary) !== null && _k !== void 0 ? _k : c.gray),
-                icon: (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
-            },
-        };
-    }, [colors]);
+    const shadowLg = theme.shadows.lg;
+    // Dark mode swaps the palette object, so this must re-derive per mode.
+    const statusConfig = (0, react_1.useMemo)(() => ({
+        success: {
+            scale: colors.semantic.success,
+            ink: colors.semanticText.success,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 18 }),
+        },
+        error: {
+            scale: colors.semantic.error,
+            ink: colors.semanticText.error,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.XCircle, { size: 18 }),
+        },
+        warning: {
+            scale: colors.semantic.warning,
+            ink: colors.semanticText.warning,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }),
+        },
+        info: {
+            scale: colors.semantic.info,
+            ink: colors.semanticText.info,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 18 }),
+        },
+        loading: {
+            scale: colors.primary,
+            ink: colors.accentText,
+            icon: (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
+        },
+    }), [colors]);
     const showToast = (0, react_1.useCallback)(({ title, description, status = "info", duration = 5000, isClosable = true, position = "top-right", onClose, actions, }) => {
         var _a;
         const meta = (_a = statusConfig[status]) !== null && _a !== void 0 ? _a : statusConfig.info;
@@ -106,7 +105,7 @@ function ToasterProvider({ children }) {
             isClosable,
             position,
             onCloseComplete: onClose,
-            render: ({ onClose }) => ((0, jsx_runtime_1.jsx)(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: meta, colors: colors !== null && colors !== void 0 ? colors : {}, shadowLg: shadowLg })),
+            render: ({ onClose }) => ((0, jsx_runtime_1.jsx)(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: meta, colors: colors, shadowLg: shadowLg })),
         });
     }, [toast, statusConfig, colors, shadowLg]);
     // Memoized because this provider wraps the whole app: an unstable value re-renders every

package/dist/Components/ToolTip/ToolTip.js

@@ -7,12 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const useIsTruncated_1 = require("../../Hooks/useIsTruncated");
 const mergeRefs_1 = require("../../Utils/mergeRefs");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-// Surface used when no Pixelize palette is in context — a bare `ChakraProvider`, or no
-// provider at all (Chakra's `useTheme()` yields `{}` there rather than throwing). Keeps
-// tooltips outside the Pixelize theme rendering exactly as they did before theming.
-const FALLBACK_SURFACE = "#12161B";
 function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color = "white", isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
-    var _a, _b, _c, _d;
     // Measure the child for `overflowOnly`. The hook is always called (Rules of
     // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,
     // no ResizeObserver, no re-renders for ordinary tooltips. Measurement never
@@ -23,7 +18,7 @@ function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize
     // un-inverted, so it stays near-black in dark mode and the white label stays legible —
     // every other surface ramp flips light and would render the label invisible.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const surface = (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : FALLBACK_SURFACE;
+    const surface = theme.colors.sidebar.background[500];
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && (0, react_1.isValidElement)(children)) {

package/dist/Components/Trail/EditableCell.js

@@ -5,7 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const cellRef = (0, react_1.useRef)(null);
     (0, react_2.useOutsideClick)({
         ref: cellRef,
@@ -20,7 +23,7 @@ const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChan
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "50%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
         }
         else if (column.label === "priority") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: "teal.50", color: "teal.900", _hover: { bg: "teal.100" }, _active: { bg: "teal.200" }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: "teal.100" }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: "teal.100" }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: "teal.100" }, children: "High" })] })] }) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: colors.teal[100] }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: colors.teal[100] }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: colors.teal[100] }, children: "High" })] })] }) }));
         }
         else {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));

package/dist/Components/Trail/TrailWorks.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const TrailWorks = () => {
-    var _a, _b, _c;
-    const theme = (0, react_1.useTheme)();
-    const cellBorder = (_b = (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const cellBorder = colors.border[500];
     const data = [
         {
             contact: "John Doe",

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -17,11 +17,9 @@ const sizeMap = {
     lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "full" },
 };
 const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Sparkles, iconColor, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
-    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
-    // Only reachable if a consumer hand-builds a palette without `gradient`; every shipped brand sets it.
-    const themeGradient = (_a = c.gradient) !== null && _a !== void 0 ? _a : { from: c.primary[500], to: c.primary[700] };
+    const themeGradient = c.gradient;
     // `primary`/`secondary` at [500]->[700] / [400]->[600] sit in the mid-luminance band where
     // neither white nor black ink clears AA at both ends at once (measured worst-case as low as
     // 2.72:1 across brands — no ink choice fixes a gradient with no readable ink at all). One rung
@@ -37,7 +35,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
         info: { from: c.semantic.info[400], to: c.semantic.info[600] },
     };
-    const resolved = (_b = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _b !== void 0 ? _b : themeGradient;
+    const resolved = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant];
     // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
     // across brands) — the label/subtitle share this computed ink instead.
     const ink = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);

package/dist/Components/UserDetails/AddUserModal.js

@@ -18,7 +18,7 @@ const emptyValues = {
     role: null,
 };
 const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAddRoleClick, upgradeNotice, labels, }) => {
-    var _a, _b, _c, _d;
+    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [values, setValues] = (0, react_1.useState)(emptyValues);
     const [errors, setErrors] = (0, react_1.useState)({});
@@ -80,10 +80,10 @@ const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAdd
             type: "email",
         },
     ];
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
-                                        })), value: (_d = values.role) !== null && _d !== void 0 ? _d : undefined, onSelect: (option) => {
+                                        })), value: (_a = values.role) !== null && _a !== void 0 ? _a : undefined, onSelect: (option) => {
                                             if (!option) {
                                                 setValues((prev) => ({ ...prev, role: null }));
                                             }

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -11,7 +11,7 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
 const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOptions, isLoading, onSubmit, onAddRoleClick, labels, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [selectedRole, setSelectedRole] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -36,7 +36,7 @@ const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOpti
             return;
         await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200], children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -7,13 +7,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", 
-                                // `red` reverses in dark (50 → deep red); `semantic.error` does not, so it would
-                                // leave this disc pale pink on a near-black modal. Identical values in light.
-                                bg: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50], color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[800], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _j === void 0 ? void 0 : _j[200]) !== null && _k !== void 0 ? _k : (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[600], fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
+    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.gray[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
 };
 exports.default = DeactivateConfirmModal;