pixelize-design-library 2.4.2-beta.62 → 2.4.2-beta.63

package/dist/Components/StatCard/StatCard.js

@@ -8,6 +8,7 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tone_1 = require("../../Theme/tokens/builders/tone");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
@@ -38,7 +39,7 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, spar
         px: 5,
         py: 4,
     };
-    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: value }), sparkline && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: typography_1.NUMERIC_TEXT, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
+    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: value }), sparkline && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: typography_1.NUMERIC_TEXT, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: (0, planeStep_1.cardRule)(colors), "data-testid": "stat-footer", children: footer }))] }));
     if (!isInteractive) {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...rest, ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
     }

package/dist/Components/Table/Table.js

@@ -13,6 +13,7 @@ const LeftFilterPane_1 = __importDefault(require("./filters/LeftFilterPane"));
 const variants_1 = require("./variants");
 const TableVariantContext_1 = require("./variants/TableVariantContext");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const Pagination_1 = __importDefault(require("./components/Pagination"));
 const TableHeader_1 = __importDefault(require("./components/TableHeader"));
@@ -38,6 +39,8 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const lucide_react_1 = require("lucide-react");
 const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
+// NOTE: MOTION_EASE as framer bezier points; the motion tokens have no points form yet.
+const PANE_EASE = [0.2, 0, 0, 1];
 /** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
 function Table({ data, columns, onSelection, isLoading, isCheckbox = false, freezedBgColor, freezedTextColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
     url: "",
@@ -49,6 +52,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
 }, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
     var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const prefersReducedMotion = (0, motion_2.usePrefersReducedMotion)();
     const clearFiltersTone = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.semantic.error, theme.colors), [theme.colors]);
     const variantTokens = (0, react_1.useMemo)(() => variants_1.TABLE_VARIANTS[variant](theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
@@ -388,7 +392,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { "data-testid": "filter-sidebar-pane", initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: theme.colors.boxborder[200], style: { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${rowMetrics_1.TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [[
+      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { "data-testid": "filter-sidebar-pane", initial: false, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", ease: PANE_EASE, duration: prefersReducedMotion ? 0 : motion_1.MOTION_MS.base / 1000 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: (0, planeStep_1.cardRule)(theme.colors), style: { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${rowMetrics_1.TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${(0, planeStep_1.cardRule)(theme.colors)}`, children: [[
                                                 filterSidebar && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Filter", "aria-haspopup": filterMode === "modal" ? "dialog" : undefined, "aria-expanded": filterMode === "modal"
                                                                     ? isFilterModalOpen
                                                                     : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
@@ -452,5 +456,5 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${(0, planeStep_1.cardRule)(theme.colors)}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

package/dist/Components/Table/components/TableActions.js

@@ -38,6 +38,7 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
 const assignRef = (ref, value) => {
     if (typeof ref === "function")
         ref(value);
@@ -88,11 +89,11 @@ const TableActions = react_1.default.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { ref: triggerRef, id: `popover-trigger-${popoverId}`, "aria-label": "Actions", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": `popover-content-${popoverId}`, color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(TriggerAnchor, { target: triggerRef }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { ref: triggerRef, id: `popover-trigger-${popoverId}`, "aria-label": "Actions", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": `popover-content-${popoverId}`, color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(TriggerAnchor, { target: triggerRef }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, borderRadius: 0, gap: 2, onClick: () => {
                                                 var _a;
                                                 (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
                                                 handleClose();
-                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, borderRadius: 0, onClick: () => {
                                                 var _a;
                                                 (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
                                                 handleClose();

package/dist/Components/Table/filters/CompactSelect.js

@@ -5,6 +5,7 @@ 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 surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
 const optionRowSizes_1 = require("../../../Theme/tokens/primitives/optionRowSizes");
 const optionRowInk_1 = require("../../Select/optionRowInk");
@@ -56,7 +57,7 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                             e.preventDefault();
                                             focusOption(0);
                                         }
-                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
                                             const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
                                             const isActive = i === activeIndex;
                                             const rowBg = selected

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

@@ -10,13 +10,17 @@ const framer_motion_1 = require("framer-motion");
 const ManageColumns_1 = __importDefault(require("./ManageColumns"));
 const Button_1 = __importDefault(require("../../Button/Button"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../../Theme/chakra/motion");
 const MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
+const SHEET_ENTER = (0, motion_1.motionTransition)("enter", "out");
+const SHEET_EXIT = (0, motion_1.motionTransition)("exit", "in");
 const DENSITY_OPTIONS = [
     { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
     { value: "normal", label: "Normal", desc: "Balanced default spacing" },
@@ -24,6 +28,7 @@ const DENSITY_OPTIONS = [
 ];
 const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const sheetOffset = (0, motion_2.usePrefersReducedMotion)() ? 0 : "-100%";
     const rowBackgrounds = (0, react_2.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const childInputMethodsRef = (0, react_2.useRef)({});
     const [settingsOpen, setSettingsOpen] = (0, react_2.useState)(false);
@@ -57,7 +62,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table Settings", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Table settings", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: (0, motion_1.transitionFor)(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
                         color: theme.colors.accentText
-                    } }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { pt: 4, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), (0, jsx_runtime_1.jsxs)(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Density" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Manage Columns" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Group" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 1, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                    } }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: sheetOffset, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: sheetOffset, opacity: 0, transition: SHEET_EXIT }, transition: SHEET_ENTER, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { pt: 4, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), (0, jsx_runtime_1.jsxs)(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Density" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Manage Columns" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Group" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 1, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
                                                             return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), (0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
@@ -78,6 +83,6 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
                                                                 return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
-                                                            }) })] })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+                                                            }) })] })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), pt: 3, pb: 3, px: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 exports.default = TableSettings;

package/dist/Components/Table/variants/classic.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.classicPreset = void 0;
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
 const tableRowHoverStyle_1 = require("../components/tableRowHoverStyle");
 const stripe_1 = require("./stripe");
 /**
@@ -19,14 +20,14 @@ const classicPreset = (colors, isDark) => {
             textTransform: "capitalize",
             letterSpacing: "normal",
             height: "45px",
-            ruleColor: colors.boxborder[200],
+            ruleColor: (0, planeStep_1.cardRule)(colors),
             showColumnRule: true,
             actions: "always",
         },
         row: {
             hoverBg: (0, tableRowHoverStyle_1.getTableRowHoverStyle)(colors, isDark).backgroundColor,
             hoverScope: "cell",
-            ruleColor: colors.boxborder[200],
+            ruleColor: (0, planeStep_1.cardRule)(colors),
             frozenRuleColor: colors.boxborder[300],
             selectedBg: colors.primary.opacity[16],
             selectedBarColor: colors.primary[500],

package/dist/Components/Timeline/Timeline.js

@@ -9,6 +9,7 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
@@ -157,12 +158,14 @@ const NoteItem = react_2.default.memo(function NoteItem({ note, event, index, co
     var _a, _b;
     const isEditing = activeEditNoteId === note.log_note_id;
     const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
+    const noteChip = (0, planeStep_1.bandOn)(colors.primary[50], colors.gray[50]);
+    const noteChipInk = (0, accentText_1.accentTextOnCanvas)(colors.primary, noteChip);
     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", zIndex: 1, bg: colors.gray[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} 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: typography_1.fontSizes["xs-minus"], 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: REVEAL_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), 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", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), 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]),
+                                            bg: noteChip,
+                                            color: noteChipInk,
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             setActiveEditNoteId(note.log_note_id);
@@ -172,7 +175,7 @@ const NoteItem = react_2.default.memo(function NoteItem({ note, event, index, co
                                         }, 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: typography_1.fontSizes["xs-minus"], 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: MIN_TEXT, 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: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(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: typography_1.fontSizes["xs-minus"], 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: noteChip, color: noteChipInk, fontSize: MIN_TEXT, 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: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(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).
@@ -182,6 +185,7 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
     const changes = (0, react_3.useMemo)(() => parseChanges(event.changes), [event.changes]);
     const clickable = typeof onEventClick === "function";
     const actor = formatName(event.action_by);
+    const addNoteHover = (0, planeStep_1.bandOn)(colors.primary[50], colors.background[50]);
     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, { position: "relative", zIndex: 1, bg: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, 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, ...(clickable && {
                     transition: CARD_TRANSITION,
                     _hover: {
@@ -194,7 +198,10 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
                                     e.stopPropagation();
                                     setActiveNoteEventIndex(isActiveNote ? null : index);
                                 }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, px: 2, py: 1, borderRadius: "md", fontSize: typography_1.fontSizes.xs, fontWeight: 600, color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
-                                    bg: colors.primary[50],
+                                    bg: addNoteHover,
+                                    color: addNoteHover === colors.primary[50]
+                                        ? undefined
+                                        : (0, accentText_1.accentTextOnCanvas)(colors.primary, addNoteHover),
                                 }, 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: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, 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));

package/dist/Components/Toaster/Toaster.js

@@ -17,6 +17,7 @@ const motion_1 = require("../../Theme/chakra/motion");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tone_1 = require("../../Theme/tokens/builders/tone");
+const color_1 = require("../../Theme/tokens/builders/color");
 const ToasterContext = (0, react_1.createContext)(undefined);
 const shrink = (0, react_3.keyframes) `
   from { transform: scaleX(1); }
@@ -24,11 +25,13 @@ const shrink = (0, react_3.keyframes) `
 `;
 // One-shot ring pulse on the status icon — a subtle "just happened" beat.
 const iconPulse = (0, react_3.keyframes) `
-  0%   { box-shadow: 0 0 0 0 var(--toast-pulse-color); }
-  70%  { box-shadow: 0 0 0 0.5rem transparent; }
-  100% { box-shadow: 0 0 0 0 transparent; }
+  0%   { transform: scale(1); opacity: 1; }
+  70%  { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1.5); opacity: 0; }
 `;
 const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
+const TOAST_ENTER = (0, motion_2.motionTransition)("enter", "out");
+const TOAST_EXIT = (0, motion_2.motionTransition)("exit", "in");
 // Presentational toast card — owns hover state so auto-dismiss pauses while the pointer is over it.
 function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, isUrgent, }) {
     const [paused, setPaused] = (0, react_1.useState)(false);
@@ -40,15 +43,23 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         , { 
             // The single live-region root: an explicit aria-live here, on the card's own
             // root, keeps errors from being announced a second time by a duplicate wrapper.
-            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, 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", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
                 isolation: "isolate",
                 transition: (0, motion_2.transitionFor)(["box-shadow"]),
                 _hover: { boxShadow: "lg" },
                 ...(0, motion_1.reducedMotionSx)(),
-            }, 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`,
-                                ...(0, motion_1.reducedMotionSx)(),
+            }, 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", position: "relative", bg: (0, color_1.compositeOver)(tone.bg, c.surfaceRaised), color: tone.fg, sx: {
+                                "&::after": {
+                                    content: '""',
+                                    position: "absolute",
+                                    inset: 0,
+                                    borderRadius: "full",
+                                    bg: tone.border,
+                                    zIndex: -1,
+                                    opacity: 0,
+                                    animation: `${iconPulse} 900ms ease-out 1`,
+                                    ...(0, motion_1.reducedMotionSx)(),
+                                },
                             }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.VisuallyHidden, { children: [meta.label, ":"] }), (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],

package/dist/Components/Toggle/TableToggle.js

@@ -13,9 +13,12 @@ const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const useSlidingPill_1 = require("../SegmentedControl/useSlidingPill");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
 const MODES = ["grid", "list"];
 const TRACK_HEIGHT = controlSizes_1.BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
+const INK_TRANSITION = (0, motion_1.transitionFor)(["color"], "base");
+const PILL_TRANSITION = (0, motion_1.transitionFor)(["transform", "width"], "base", "out");
 /** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
 const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -76,10 +79,10 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
                         ? colors.accentText
                         : hoverInk,
             },
-            transition: "color 0.2s ease-in-out",
+            transition: INK_TRANSITION,
         }),
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", bottom: `-${borderWidths_1.BORDER_WIDTHS.hairline}`, left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", bottom: `-${borderWidths_1.BORDER_WIDTHS.hairline}`, left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
                         refs.current[0] = node;
                     }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "List View", placement: "top", fontSize: "xs", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
                         refs.current[1] = node;

package/dist/Components/UserDetails/AddUserModal.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
@@ -80,7 +81,7 @@ 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.surfaceRaised, borderRadius: "xl", 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) => ({
+    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.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), 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: (_a = values.role) !== null && _a !== void 0 ? _a : undefined, onSelect: (option) => {

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
@@ -36,7 +37,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: colors.surfaceRaised, borderRadius: "xl", 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) => ({
+    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.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), 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/UserDetails.js

@@ -44,6 +44,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
@@ -98,6 +99,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const [actionUserId, setActionUserId] = (0, react_1.useState)(null);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
+    const detailTile = (0, planeStep_1.bandOn)(colors.primary[50], surface);
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
@@ -138,7 +140,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
                                                 return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: {
                                                                 bg: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
-                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: colors.primary[50], borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, detailTile), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

package/dist/Theme/chakra/Card.styles.d.ts

@@ -67,10 +67,16 @@ export declare const Card: {
                 [$shadow.variable]: string;
             };
         };
+        elevated: {
+            container: {
+                [$border.variable]: string;
+                [$shadow.variable]: string;
+            };
+        };
     } | undefined;
     defaultProps?: {
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "outline" | undefined;
+        variant?: "elevated" | "outline" | undefined;
         colorScheme?: string | undefined;
     } | undefined;
     parts: ("header" | "container" | "body" | "footer")[];

package/dist/Theme/chakra/Card.styles.js

@@ -39,10 +39,13 @@ const variants = {
     outline: definePartsStyle({
         container: { [$border.variable]: "1px", [$shadow.variable]: "none" },
     }),
+    elevated: definePartsStyle({
+        container: { [$border.variable]: "0", [$shadow.variable]: "shadows.card" },
+    }),
 };
 exports.Card = defineMultiStyleConfig({
     baseStyle,
     sizes,
     variants,
-    defaultProps: { variant: "outline", size: "md" },
+    defaultProps: { variant: "elevated", size: "md" },
 });

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -1,8 +1,4 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
 declare const $itemBg: {
     variable: string;
     reference: string;
@@ -10,7 +6,8 @@ declare const $itemBg: {
 export declare const Menu: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         list: {
-            [$bg.variable]: string;
+            borderRadius: "xl";
+            boxShadow: "md";
             bg: string;
             color: string;
             borderWidth: string;
@@ -22,6 +19,7 @@ export declare const Menu: {
             px: string;
             py: string;
             mx: string;
+            width: string;
             fontSize: string;
             borderRadius: "md";
             bg: string;

package/dist/Theme/chakra/Menu.styles.js

@@ -6,6 +6,7 @@ const anatomy_1 = require("@chakra-ui/anatomy");
 const rowStates_1 = require("../tokens/builders/rowStates");
 const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
+const overlay_styles_1 = require("./overlay.styles");
 const itemRowSpec = optionRowSizes_1.OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
@@ -24,12 +25,14 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...overlay_styles_1.POPUP_SURFACE,
         },
         item: {
             minH: itemRowSpec.minH,
             px: itemRowSpec.px,
             py: itemRowSpec.py,
             mx: itemRowSpec.mx,
+            width: `calc(100% - 2 * ${itemRowSpec.mx})`,
             fontSize: itemRowSpec.fontSize,
             borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS,
             bg: "transparent",

package/dist/Theme/chakra/Popover.styles.d.ts

@@ -1,17 +1,9 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $popperBg: {
-    variable: string;
-    reference: string;
-};
-declare const $arrowShadowColor: {
-    variable: string;
-    reference: string;
-};
 export declare const Popover: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         content: {
-            [$popperBg.variable]: string;
-            [$arrowShadowColor.variable]: string;
+            borderRadius: "xl";
+            boxShadow: "md";
             bg: string;
             color: string;
             borderWidth: string;
@@ -36,4 +28,3 @@ export declare const Popover: {
     } | undefined;
     parts: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
 };
-export {};

package/dist/Theme/chakra/Popover.styles.js

@@ -4,6 +4,7 @@ exports.Popover = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const paletteFromTheme_1 = require("./paletteFromTheme");
+const overlay_styles_1 = require("./overlay.styles");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.popoverAnatomy.keys);
 const $popperBg = (0, react_1.cssVar)("popper-bg");
 const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
@@ -19,6 +20,7 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...overlay_styles_1.POPUP_SURFACE,
         },
     };
 });