pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.45

package/dist/esm/Components/NotificationBell/NotificationItem.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Icon, Text } from "../Primitives/Primitives.js";
+import Avatar from "../Avatar/Avatar.js";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { resolveSoftTone, toneInk, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { formatRelativeTime } from "./notificationHelpers.js";
+const TILE_SIZE = "1.75rem";
+/** One notification row; used by NotificationList and reusable standalone under a `renderItem` override. */
+const NotificationItem = ({ item, onClick, actions, actionsAlwaysVisible = false, preview, trailing, unreadIndicator = "bar", groupCount, onExpandGroup, }) => {
+    var _a, _b, _c;
+    const theme = useCustomTheme();
+    const { colors } = theme;
+    const tone = (_a = item.tone) !== null && _a !== void 0 ? _a : "neutral";
+    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
+    const tile = resolveStatusTone(toneScale(colors, tone), mode);
+    const ink = toneInk(colors, tone);
+    const unread = !item.isRead;
+    const rowTint = unreadIndicator === "tint" && unread ? resolveSoftTone(colors, toneScale(colors, tone)).bg : undefined;
+    const rowShadow = unreadIndicator === "bar" && unread ? `inset 2px 0 0 ${ink}` : undefined;
+    const hasTile = Boolean(item.icon) || Boolean(item.actor);
+    // Never nested inside the row's own clickable button — a real <button> can't contain another.
+    const tileAndText = (_jsxs(Flex, { align: "flex-start", gap: 3, flex: "1", minW: 0, textAlign: "left", children: [hasTile ? (_jsxs(Box, { position: "relative", flexShrink: 0, boxSize: TILE_SIZE, children: [_jsx(Flex, { boxSize: TILE_SIZE, align: "center", justify: "center", borderRadius: "lg", bg: tile.bg, border: "1px solid", borderColor: tile.border, children: item.icon ? _jsx(Icon, { as: item.icon, boxSize: "0.875rem", color: tile.fg, "aria-hidden": true }) : null }), item.actor ? (_jsx(Box, { position: "absolute", bottom: "-2px", right: "-2px", borderRadius: "full", border: "2px solid", borderColor: colors.background[50], children: _jsx(Avatar, { name: (_b = item.actor.name) !== null && _b !== void 0 ? _b : "?", src: (_c = item.actor.avatarUrl) !== null && _c !== void 0 ? _c : undefined, size: "2xs" }) })) : null] })) : null, _jsxs(Box, { flex: "1", minW: 0, children: [item.eyebrow ? (_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, color: colors.text[500], textTransform: "uppercase", children: item.eyebrow })) : null, _jsxs(Flex, { align: "center", gap: 1.5, children: [unreadIndicator === "dot" && unread ? _jsx(Box, { boxSize: "0.375rem", borderRadius: "full", bg: ink, flexShrink: 0 }) : null, _jsx(Text, { fontSize: "0.875rem", fontWeight: unread ? 700 : 500, color: colors.header[900], noOfLines: 2, children: item.title })] }), item.body ? (_jsx(Text, { mt: 0.5, fontSize: "0.8125rem", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, _jsx(Text, { mt: 1, fontSize: "0.75rem", color: colors.text[500], children: formatRelativeTime(item.timestamp) })] })] }));
+    return (_jsxs(Flex, { role: "group", position: "relative", align: "flex-start", gap: 2, px: 3, py: 2.5, bg: rowTint, boxShadow: rowShadow, _hover: { bg: rowTint !== null && rowTint !== void 0 ? rowTint : colors.backgroundColor.secondary }, children: [_jsxs(Box, { flex: "1", minW: 0, children: [onClick ? (_jsx(Box, { as: "button", type: "button", onClick: onClick, display: "flex", w: "100%", textAlign: "left", borderRadius: "md", sx: focusVisibleStyles(colors), children: tileAndText })) : (tileAndText), groupCount && groupCount > 1 ? (_jsx(Button, { label: `Show ${groupCount} updates`, variant: "link", size: "xs", colorScheme: "primary", mt: 1, pl: hasTile ? `calc(${TILE_SIZE} + 0.75rem)` : 0, onClick: onExpandGroup })) : null] }), trailing, actions ? (_jsx(Box, { opacity: actionsAlwaysVisible ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, flexShrink: 0, children: actions })) : null] }));
+};
+export default NotificationItem;

package/dist/esm/Components/NotificationBell/NotificationList.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text } from "../Primitives/Primitives.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import NotificationItem from "./NotificationItem.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_DAY_LABELS, groupConsecutive, sectionizeByDay } from "./notificationHelpers.js";
+/** Day sections + consecutive groupKey runs over NotificationItem rows. Generic over the caller's row type. */
+function NotificationList({ items, toItem, groupBy = "day", collapseGroups = false, dayLabels = DEFAULT_DAY_LABELS, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator = "bar", actionsAlwaysVisible = false, "aria-label": ariaLabel, }) {
+    const { colors } = useCustomTheme();
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    if (!items.length) {
+        return _jsx(EmptyState, { title: "No notifications yet", description: "You're all caught up.", size: "sm" });
+    }
+    const sections = groupBy === "day" ? sectionizeByDay(items, (row) => toItem(row).timestamp, dayLabels) : [{ label: "", rows: items }];
+    return (_jsx(Box, { "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, children: sections.map((section, sectionIndex) => {
+            const groups = groupConsecutive(section.rows, (row) => (collapseGroups ? toItem(row).groupKey : undefined));
+            return (_jsxs(Box, { children: [section.label ? (renderSectionHeader ? (renderSectionHeader(section.label)) : (_jsx(Text, { position: "sticky", top: 0, zIndex: 1, px: 3, py: 1.5, fontSize: "0.6875rem", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: colors.text[500], bg: colors.backgroundColor.main, children: section.label }))) : null, groups.map((group, groupIndex) => {
+                        var _a;
+                        const groupId = `${section.label}-${(_a = group.key) !== null && _a !== void 0 ? _a : `__row${groupIndex}`}`;
+                        const isCollapsedRun = collapseGroups && group.rows.length > 1 && !expandedGroups.has(groupId);
+                        const rowsToRender = isCollapsedRun ? group.rows.slice(0, 1) : group.rows;
+                        return (_jsx(Box, { children: rowsToRender.map((row, rowIndex) => {
+                                const model = toItem(row);
+                                if (renderItem)
+                                    return _jsx(Box, { children: renderItem(row, model) }, model.id);
+                                return (_jsx(NotificationItem, { item: model, onClick: onItemClick ? () => onItemClick(row) : undefined, actions: itemActions === null || itemActions === void 0 ? void 0 : itemActions(row), actionsAlwaysVisible: actionsAlwaysVisible, unreadIndicator: unreadIndicator, groupCount: isCollapsedRun && rowIndex === 0 ? group.rows.length : undefined, onExpandGroup: () => setExpandedGroups((prev) => {
+                                        const next = new Set(prev);
+                                        next.add(groupId);
+                                        return next;
+                                    }) }, model.id));
+                            }) }, groupId));
+                    })] }, section.label || sectionIndex));
+        }) }));
+}
+export default NotificationList;

package/dist/esm/Components/NotificationBell/NotificationPanel.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { AlertCircle } from "lucide-react";
+import { Box, Flex, Text } from "../Primitives/Primitives.js";
+import Button from "../Button/Button.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import NotificationList from "./NotificationList.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { formatCount, useAnchoredPanelHeight } from "./notificationHelpers.js";
+const DEFAULT_EMPTY = { title: "No notifications yet", description: "You're all caught up.", size: "sm" };
+/** The panel shell: header, zone/filter row, scroll body with loading/empty/error, footer. */
+function NotificationPanel({ items, toItem, zones, activeZone, onZoneChange, filters, activeFilter, onFilterChange, isLoading = false, error, onRetry, empty, header, headerAction, footer, variant = "popover", maxH, onLoadMore, hasMore = false, isLoadingMore = false, panelRef, groupBy, collapseGroups, dayLabels, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator, actionsAlwaysVisible, "aria-label": ariaLabel, }) {
+    const { colors } = useCustomTheme();
+    const internalRef = useRef(null);
+    const ref = panelRef !== null && panelRef !== void 0 ? panelRef : internalRef;
+    const isPopover = variant === "popover";
+    const measuredHeight = useAnchoredPanelHeight(ref);
+    const resolvedMaxH = maxH !== null && maxH !== void 0 ? maxH : (isPopover ? measuredHeight : undefined);
+    const activeZoneConfig = zones === null || zones === void 0 ? void 0 : zones.find((zone) => zone.id === activeZone);
+    return (_jsxs(Flex, { ref: ref, direction: "column", w: "100%", maxH: isPopover ? resolvedMaxH : undefined, overflow: isPopover ? "hidden" : "visible", bg: colors.surfaceRaised, borderRadius: "xl", children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 3, borderBottom: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: [header !== null && header !== void 0 ? header : (_jsx(Text, { fontWeight: 700, fontSize: "0.9375rem", color: colors.header[900], children: "Notifications" })), headerAction] }), zones && zones.length ? (_jsx(Flex, { role: "group", "aria-label": "Notification zones", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: zones.map((zone) => {
+                    const isActive = zone.id === activeZone;
+                    const label = zone.count ? `${zone.label} (${formatCount(zone.count)})` : zone.label;
+                    return (_jsx(Button, { label: label, size: "xs", variant: isActive ? "solid" : "ghost", colorScheme: "primary", "aria-pressed": isActive, onClick: () => onZoneChange === null || onZoneChange === void 0 ? void 0 : onZoneChange(zone.id) }, zone.id));
+                }) })) : null, filters && filters.length ? (_jsx(Flex, { role: "group", "aria-label": "Notification filters", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: filters.map((filter) => {
+                    const isActive = filter.id === activeFilter;
+                    const label = typeof filter.count === "number" ? `${filter.label} (${formatCount(filter.count)})` : filter.label;
+                    return (_jsx(Button, { label: label, size: "xs", variant: isActive ? "solid" : "ghost", colorScheme: "secondary", "aria-pressed": isActive, onClick: () => onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(filter.id) }, filter.id));
+                }) })) : null, _jsx(Box, { flex: "1", minH: 0, overflowY: isPopover ? "auto" : "visible", children: (activeZoneConfig === null || activeZoneConfig === void 0 ? void 0 : activeZoneConfig.render) ? (activeZoneConfig.render()) : isLoading ? (_jsx(Box, { p: 4, role: "status", "aria-live": "polite", "aria-label": "Loading notifications", children: [0, 1, 2, 3].map((rowIndex) => (_jsxs(Flex, { gap: 3, mt: rowIndex ? 4 : 0, align: "center", children: [_jsx(Skeletons, { type: "circle", size: "7" }), _jsxs(Box, { flex: "1", children: [_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: "70%" }), _jsx(Box, { mt: 1.5, children: _jsx(Skeletons, { type: "skeleton", height: "0.625rem", width: "45%" }) })] })] }, rowIndex))) })) : error ? (_jsx(EmptyState, { title: "Couldn't load notifications", description: error instanceof Error ? error.message : "Something went wrong. Try again.", icon: AlertCircle, colorScheme: "error", size: "sm", action: onRetry ? _jsx(Button, { label: "Retry", size: "sm", variant: "outline", colorScheme: "red", onClick: onRetry }) : undefined })) : items.length === 0 ? (_jsx(EmptyState, { ...(empty !== null && empty !== void 0 ? empty : DEFAULT_EMPTY) })) : (_jsxs(_Fragment, { children: [_jsx(NotificationList, { items: items, toItem: toItem, groupBy: groupBy, collapseGroups: collapseGroups, dayLabels: dayLabels, onItemClick: onItemClick, itemActions: itemActions, renderItem: renderItem, renderSectionHeader: renderSectionHeader, unreadIndicator: unreadIndicator, actionsAlwaysVisible: actionsAlwaysVisible, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Notifications" }), hasMore ? (_jsx(Flex, { justify: "center", py: 3, children: _jsx(Button, { label: "Load more", size: "sm", variant: "ghost", colorScheme: "primary", isLoading: isLoadingMore, onClick: onLoadMore }) })) : null] })) }), footer ? (_jsx(Box, { px: 4, py: 2.5, borderTop: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: footer })) : null] }));
+}
+export default NotificationPanel;

package/dist/esm/Components/NotificationBell/index.js

@@ -0,0 +1,6 @@
+export { default as NotificationBell } from "./NotificationBell.js";
+export { default as NotificationPanel } from "./NotificationPanel.js";
+export { default as NotificationList } from "./NotificationList.js";
+export { default as NotificationItem } from "./NotificationItem.js";
+export * from "./NotificationBellProps.js";
+export * from "./notificationHelpers.js";

package/dist/esm/Components/NotificationBell/notificationHelpers.js

@@ -0,0 +1,107 @@
+import { useLayoutEffect, useState } from "react";
+export const DEFAULT_DAY_LABELS = {
+    today: "Today",
+    yesterday: "Yesterday",
+    earlier: "Earlier",
+};
+// Accepts epoch ms, an ISO string, or a numeric-string epoch — the three shapes seen across consumers.
+const toDate = (value) => {
+    if (value instanceof Date)
+        return value;
+    if (typeof value === "number")
+        return new Date(value);
+    return new Date(/^-?\d+$/.test(value) ? Number(value) : value);
+};
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+// NOTE: calendar arithmetic, not -24h — a DST shift makes the day shorter or longer.
+const startOfPrevDay = (dayStart) => {
+    const d = new Date(dayStart);
+    d.setDate(d.getDate() - 1);
+    return startOfDay(d);
+};
+/**
+ * Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket.
+ * `now` defaults to the wall clock; pass it to pin "today" in tests or a fixed-date view.
+ */
+export function sectionizeByDay(rows, getTime, labels = DEFAULT_DAY_LABELS, now = Date.now()) {
+    const todayStart = startOfDay(toDate(now));
+    const yesterdayStart = startOfPrevDay(todayStart);
+    const today = [];
+    const yesterday = [];
+    const earlier = [];
+    for (const row of rows) {
+        const dayStart = startOfDay(toDate(getTime(row)));
+        if (dayStart === todayStart)
+            today.push(row);
+        else if (dayStart === yesterdayStart)
+            yesterday.push(row);
+        else
+            earlier.push(row);
+    }
+    const sections = [];
+    if (today.length)
+        sections.push({ label: labels.today, rows: today });
+    if (yesterday.length)
+        sections.push({ label: labels.yesterday, rows: yesterday });
+    if (earlier.length)
+        sections.push({ label: labels.earlier, rows: earlier });
+    return sections;
+}
+/** Merges only adjacent rows sharing a key; a null/undefined key never merges with anything. */
+export function groupConsecutive(rows, getKey) {
+    var _a;
+    const groups = [];
+    for (const row of rows) {
+        const key = (_a = getKey(row)) !== null && _a !== void 0 ? _a : null;
+        const last = groups[groups.length - 1];
+        if (key !== null && last && last.key === key) {
+            last.rows.push(row);
+        }
+        else {
+            groups.push({ key, rows: [row] });
+        }
+    }
+    return groups;
+}
+/** 5 -> "5"; 150 with max 99 -> "99+". Negative/NaN input is clamped to 0. */
+export function formatCount(value, max = 99) {
+    const safe = Number.isFinite(value) && value > 0 ? Math.floor(value) : 0;
+    return safe > max ? `${max}+` : String(safe);
+}
+const MINUTE = 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const WEEK = DAY * 7;
+/** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
+export function formatRelativeTime(value, now = Date.now()) {
+    const then = toDate(value);
+    const nowMs = typeof now === "number" ? now : now.getTime();
+    const diffSec = Math.max(0, Math.round((nowMs - then.getTime()) / 1000));
+    if (diffSec < MINUTE)
+        return "Just now";
+    if (diffSec < HOUR)
+        return `${Math.floor(diffSec / MINUTE)}m ago`;
+    if (diffSec < DAY)
+        return `${Math.floor(diffSec / HOUR)}h ago`;
+    if (diffSec < WEEK)
+        return `${Math.floor(diffSec / DAY)}d ago`;
+    return then.toLocaleDateString("en-US", { day: "2-digit", month: "short" });
+}
+/** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */
+export function useAnchoredPanelHeight(ref, options) {
+    var _a, _b;
+    const min = (_a = options === null || options === void 0 ? void 0 : options.min) !== null && _a !== void 0 ? _a : 280;
+    const gutter = (_b = options === null || options === void 0 ? void 0 : options.gutter) !== null && _b !== void 0 ? _b : 24;
+    const [height, setHeight] = useState(min);
+    useLayoutEffect(() => {
+        const measure = () => {
+            var _a, _b;
+            const top = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) !== null && _b !== void 0 ? _b : 0;
+            setHeight(Math.max(min, window.innerHeight - top - gutter));
+        };
+        measure();
+        window.addEventListener("resize", measure);
+        return () => window.removeEventListener("resize", measure);
+    }, [ref, min, gutter]);
+    return height;
+}

package/dist/esm/Components/NumberInput/NumberInput.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NumberDecrementStepper, NumberIncrementStepper, NumberInput as ChakraNumberInput, NumberInputField, NumberInputStepper, FormControl, } from "@chakra-ui/react";
-import { forwardRef, useId } from "react";
+import { forwardRef } from "react";
 import { TextLabel } from "../Common/FormLabel.js";
-/** Labelled numeric field; unlike most fields here, `isRequired` propagates natively via `FormControl`, not just the label asterisk. */
-const NumberInput = forwardRef(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, ...props }, ref) {
-    const generatedId = useId();
-    const resolvedId = id !== null && id !== void 0 ? id : generatedId;
-    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, id: resolvedId, isRequired: isRequired, children: [label && (_jsx(TextLabel, { label: label, id: resolvedId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(ChakraNumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, ...props, children: [_jsx(NumberInputField, { ref: ref }), _jsxs(NumberInputStepper, { children: [_jsx(NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, children: NumberIncrementStepperChildren }), _jsx(NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, children: NumberDecrementStepperChildren })] })] })] }));
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+/** Labelled numeric field with the shared helper/error row; `isRequired` propagates natively via `FormControl`. */
+const NumberInput = forwardRef(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, error, errorMessage, helperText, placeholder, isDisabled, isReadOnly, ...props }, ref) {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, isRequired: isRequired, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(ChakraNumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, id: ids.inputId, isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, "aria-describedby": ids.describedBy, ...props, children: [_jsx(NumberInputField, { ref: ref, placeholder: placeholder }), _jsxs(NumberInputStepper, { children: [_jsx(NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, sx: { flex: "none" }, children: NumberIncrementStepperChildren }), _jsx(NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, sx: { flex: "none" }, children: NumberDecrementStepperChildren })] })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 export default NumberInput;

package/dist/esm/Components/NumberInput/NumberInput.styles.js

@@ -1,85 +1,26 @@
-import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
-export const NumberInput = {
-    baseStyle: ({ theme }) => ({
-        field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            pt: "0.813rem",
-            pb: "0.813rem",
-            borderRadius: "lg",
-            transition: "border-color 0.2s, box-shadow 0.2s",
-            _placeholder: {
-                color: placeholderInk(theme.colors),
-            },
-        },
-    }),
-    sizes: {
-        md: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.875rem",
-            },
+import { fieldPartStyles, fieldSizes } from "../Input/TextInput.styles.js";
+import { CONTROL_SIZES, CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+const stepperSizes = Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => {
+    const half = `calc(${CONTROL_SIZES[size].height} / 2)`;
+    return [
+        size,
+        {
+            stepperGroup: { width: "1.5rem", height: CONTROL_SIZES[size].height },
+            stepper: { height: half, fontSize: "0.5rem", boxSizing: "border-box" },
         },
-    },
+    ];
+}));
+const numberInputSizes = fieldSizes("field");
+for (const size of CONTROL_SIZE_NAMES) {
+    Object.assign(numberInputSizes[size], stepperSizes[size]);
+}
+export const NumberInput = {
+    sizes: numberInputSizes,
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
-            return {
-                field: {
-                    bg: theme.colors.background[50],
-                    border: "0.063rem solid",
-                    borderColor,
-                    _placeholder: {
-                        color: placeholderInk(theme.colors),
-                    },
-                    _hover: {
-                        borderColor: primary,
-                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        _hover: {
-                            borderColor: errorColor,
-                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                    },
-                    _readOnly: {
-                        boxShadow: 'inherit',
-                    },
-                    _disabled: {
-                        bg: theme.colors.background[100],
-                        opacity: 1,
-                        cursor: "not-allowed",
-                        _hover: {
-                            border: "0.063rem solid",
-                            borderColor,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: fieldPartStyles(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -71,18 +71,13 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    // boxborder[500], not raw gray[200]: this styles a real `<button>` (Flex as="button" below),
-    // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named surface up
-    // to `muted` (lightest); gray[200] fails there in dark mode.
+    // NOTE: boxborder[500] not gray[200] — this styles a real button, WCAG 1.4.11 needs >=3:1; gray[200] fails in dark.
     const triggerStyles = triggerVariant === "outline"
         ? { border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
             ? { bg: theme.colors.background[50] }
             : { bg: "transparent" };
-    // `gray[100]` hover on a "transparent" trigger reads against whatever's actually behind it —
-    // this control lives in a navbar-like shell, so `backgroundColor.light` is that surface. For a
-    // near-neutral brand (zinc) the two measured near-1.0: an invisible hover, same bug shape as
-    // NavigationBar's menu items.
+    // NOTE: hover reads against backgroundColor.light (the navbar shell) — for zinc the two measured near-1.0, invisible.
     const triggerHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.backgroundColor.light);
     const handleSelect = (org) => {
         onClose();
@@ -94,11 +89,8 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             onClose();
             setQuery("");
         }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) })), _jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), _jsx(PopoverContent, { minW: menuMinWidth, w: "auto", 
-                // Chakra's PopoverContent baseStyle defaults bg to var(--popper-bg), which is hardcoded
-                // to colors.white and only repointed under Chakra's own `_dark` — dead code here since
-                // this app toggles dark mode by swapping the palette, not Chakra's colorMode. Without an
-                // explicit bg the panel always rendered white regardless of the active theme.
-                bg: theme.colors.backgroundColor.light, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
+                bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {
                                                 e.preventDefault();
                                                 focusOption(0);

package/dist/esm/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -1,11 +1,12 @@
 import { CATEGORICAL_SERIES } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveAvatarFill } from "../../Theme/tokens/builders/statusTone.js";
+import { neutralTokens } from "../../Theme/tokens/brands/neutrals.js";
 export const AVATAR_COLORS = [
     ...CATEGORICAL_SERIES.light,
     ...CATEGORICAL_SERIES.dark,
 ];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
-export const AVATAR_INK = "#ffffff";
+export const AVATAR_INK = neutralTokens.white;
 /** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 export const avatarColor = (seed, mode = "light") => {
     let hash = 0;

package/dist/esm/Components/OrganizationDetails/CreateOrgModal.js

@@ -51,6 +51,6 @@ const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
             phone: (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.trim(),
         });
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), _jsx(TextInput, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), _jsx(TextInput, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), _jsxs(HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), _jsx(Button, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), _jsx(TextInput, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), _jsx(TextInput, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), _jsxs(HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), _jsx(Button, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
 };
 export default CreateOrgModal;

package/dist/esm/Components/OrganizationDetails/DeleteOrgModal.js

@@ -1,14 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
-import { AlertTriangle, Trash2 } from "lucide-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+import { Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
-import Button from "../Button/Button.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import ConfirmDialog from "../ConfirmDialog/ConfirmDialog.js";
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
     const { colors } = useCustomTheme();
-    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    return (_jsx(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: _jsx(Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: _jsx(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }) }));
 };
 export default DeleteOrgModal;

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js

@@ -3,9 +3,11 @@ import { useMemo, useState } from "react";
 import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import Tag from "../Tag/Tag.js";
@@ -58,9 +60,8 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const [editingOrgId, setEditingOrgId] = useState(null);
     const [editValue, setEditValue] = useState("");
     const [editError, setEditError] = useState("");
-    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
-    const warningTone = resolveStatusTone(colors.semantic.warning, mode);
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    const warningTone = resolveSoftTone(colors, colors.semantic.warning);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
     const muted = colors.textMuted;
@@ -120,11 +121,11 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
             }, onClick: () => onDeleteRequest
                 ? onDeleteRequest(item.orgId)
                 : setDeleteOrgId(item.orgId) }));
-        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: transitionFor(["border-color", "box-shadow", "transform"]), sx: reducedMotionSx(), _hover: {
                 borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? (_jsx(Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 1, children: [_jsx(Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
@@ -139,7 +140,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     };
     const renderInvitedCard = (item) => {
         const isResponding = respondingOrgIds.includes(item.orgId);
-        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: transitionFor(["box-shadow", "transform"]), sx: reducedMotionSx(), _hover: {
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
             }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: warningTone.bg, color: warningTone.fg, children: _jsx(Building2, { size: 18 }) }), _jsx(Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && (_jsxs(Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [_jsx(Globe, { size: 13 }), _jsx(Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), _jsxs(HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [_jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), _jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));

package/dist/esm/Components/PageHeader/PageHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
+const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), _jsxs(Flex, { justify: "space-between", align: { base: "flex-start", md: "center" }, direction: { base: "column", md: "row" }, gap: 3, children: [_jsxs(Flex, { gap: 3, align: "center", minW: 0, children: [leading && _jsx(Box, { flexShrink: 0, children: leading }), _jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Heading, { as: "h1", fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em", color: colors.header[900], children: title }), titleAddon] }), subtitle && (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && (_jsx(Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && (_jsx(Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: 0, children: actions }))] }), tabs && _jsx(Box, { children: tabs })] }));
+};
+export default PageHeader;

package/dist/esm/Components/PageHeader/PageHeaderProps.js

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

package/dist/esm/Components/PdfViewer/PdfViewer.js

@@ -11,6 +11,6 @@ const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showTo
     const toolbarSurface = theme.colors.background[50];
     const iconHoverInk = accentTextOnCanvas(theme.colors.primary, toolbarSurface);
     const iconHoverBg = listRowBackgrounds(theme.colors).active;
-    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": `Open ${fileName} in a new tab`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, "aria-label": `Download ${fileName}`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 export default PdfViewer;

package/dist/esm/Components/PersonChip/PersonChip.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Icon, Text } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import Avatar from "../Avatar/Avatar.js";
+const NAME_SIZE = {
+    sm: "0.8125rem", md: "0.875rem", lg: "1rem", xl: "1.125rem",
+};
+const SECONDARY_SIZE = {
+    sm: "0.75rem", md: "0.75rem", lg: "0.8125rem", xl: "0.875rem",
+};
+const REMOVE_ICON_SIZE = {
+    sm: 12, md: 14, lg: 14, xl: 16,
+};
+// The remove button is a sibling of the clickable region, never nested in it — a <button> can't contain another.
+const PersonChip = ({ name, imageUrl, secondary, size = "md", orientation = "horizontal", status, onClick, onRemove, removeLabel, isTruncated = true, maxW, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const isInteractive = Boolean(onClick);
+    const isVertical = orientation === "vertical";
+    const removeButton = onRemove ? (_jsx(Box, { as: "button", type: "button", "aria-label": removeLabel !== null && removeLabel !== void 0 ? removeLabel : `Remove ${name}`, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, borderRadius: "full", p: 1, color: colors.textMuted, transition: transitionFor(["opacity", "color"]), _hover: { opacity: 0.8, color: colors.header[900] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+        }, children: _jsx(Icon, { as: X, boxSize: `${REMOVE_ICON_SIZE[size]}px` }) })) : null;
+    const content = (_jsxs(_Fragment, { children: [_jsx(Avatar, { name: name, src: imageUrl, size: size, status: status }), _jsxs(Box, { minW: 0, maxW: maxW, children: [_jsx(Text, { fontSize: NAME_SIZE[size], fontWeight: 600, color: colors.header[900], isTruncated: isTruncated, children: name }), secondary ? (_jsx(Text, { fontSize: SECONDARY_SIZE[size], color: colors.textMuted, isTruncated: isTruncated, children: secondary })) : null] })] }));
+    const identityStyle = {
+        direction: isVertical ? "column" : "row",
+        align: "center",
+        gap: isVertical ? 1.5 : 2.5,
+        minW: 0,
+        flex: isVertical ? undefined : "1",
+        textAlign: isVertical ? "center" : "left",
+        borderRadius: "lg",
+    };
+    const identity = isInteractive ? (_jsx(Flex, { as: "button", type: "button", onClick: onClick, ...identityStyle, cursor: "pointer", transition: transitionFor(["background-color"]), _hover: { bg: colors.backgroundColor.secondary }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, "data-testid": onRemove ? undefined : testId, children: content })) : (_jsx(Flex, { ...identityStyle, "data-testid": onRemove ? undefined : testId, children: content }));
+    if (!removeButton)
+        return identity;
+    return (_jsxs(Flex, { direction: isVertical ? "column" : "row", align: "center", gap: isVertical ? 1 : 0, minW: 0, "data-testid": testId, children: [identity, removeButton] }));
+};
+export default PersonChip;

package/dist/esm/Components/PersonChip/PersonChipProps.js

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