pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/NotificationBell/NotificationPanel.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationPanelProps } from "./NotificationBellProps";
+/** The panel shell: header, zone/filter row, scroll body with loading/empty/error, footer. */
+declare function NotificationPanel<T>({ items, toItem, zones, activeZone, onZoneChange, filters, activeFilter, onFilterChange, isLoading, error, onRetry, empty, header, headerAction, footer, variant, maxH, onLoadMore, hasMore, isLoadingMore, panelRef, groupBy, collapseGroups, dayLabels, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator, actionsAlwaysVisible, "aria-label": ariaLabel, }: NotificationPanelProps<T>): import("react/jsx-runtime").JSX.Element;
+export default NotificationPanel;

package/dist/Components/NotificationBell/NotificationPanel.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../Primitives/Primitives");
+const Button_1 = __importDefault(require("../Button/Button"));
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const NotificationList_1 = __importDefault(require("./NotificationList"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const notificationHelpers_1 = require("./notificationHelpers");
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const internalRef = (0, react_1.useRef)(null);
+    const ref = panelRef !== null && panelRef !== void 0 ? panelRef : internalRef;
+    const isPopover = variant === "popover";
+    const measuredHeight = (0, notificationHelpers_1.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 ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { ref: ref, direction: "column", w: "100%", maxH: isPopover ? resolvedMaxH : undefined, overflow: isPopover ? "hidden" : "visible", bg: colors.surfaceRaised, borderRadius: "xl", children: [(0, jsx_runtime_1.jsxs)(Primitives_1.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 : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontWeight: 700, fontSize: "0.9375rem", color: colors.header[900], children: "Notifications" })), headerAction] }), zones && zones.length ? ((0, jsx_runtime_1.jsx)(Primitives_1.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} (${(0, notificationHelpers_1.formatCount)(zone.count)})` : zone.label;
+                    return ((0, jsx_runtime_1.jsx)(Button_1.default, { 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 ? ((0, jsx_runtime_1.jsx)(Primitives_1.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} (${(0, notificationHelpers_1.formatCount)(filter.count)})` : filter.label;
+                    return ((0, jsx_runtime_1.jsx)(Button_1.default, { 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, (0, jsx_runtime_1.jsx)(Primitives_1.Box, { flex: "1", minH: 0, overflowY: isPopover ? "auto" : "visible", children: (activeZoneConfig === null || activeZoneConfig === void 0 ? void 0 : activeZoneConfig.render) ? (activeZoneConfig.render()) : isLoading ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { p: 4, role: "status", "aria-live": "polite", "aria-label": "Loading notifications", children: [0, 1, 2, 3].map((rowIndex) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { gap: 3, mt: rowIndex ? 4 : 0, align: "center", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "circle", size: "7" }), (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "70%" }), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.625rem", width: "45%" }) })] })] }, rowIndex))) })) : error ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { title: "Couldn't load notifications", description: error instanceof Error ? error.message : "Something went wrong. Try again.", icon: lucide_react_1.AlertCircle, colorScheme: "error", size: "sm", action: onRetry ? (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Retry", size: "sm", variant: "outline", colorScheme: "red", onClick: onRetry }) : undefined })) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { ...(empty !== null && empty !== void 0 ? empty : DEFAULT_EMPTY) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NotificationList_1.default, { 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 ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { justify: "center", py: 3, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Load more", size: "sm", variant: "ghost", colorScheme: "primary", isLoading: isLoadingMore, onClick: onLoadMore }) })) : null] })) }), footer ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { px: 4, py: 2.5, borderTop: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: footer })) : null] }));
+}
+exports.default = NotificationPanel;

package/dist/Components/NotificationBell/index.d.ts

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

package/dist/Components/NotificationBell/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = void 0;
+var NotificationBell_1 = require("./NotificationBell");
+Object.defineProperty(exports, "NotificationBell", { enumerable: true, get: function () { return __importDefault(NotificationBell_1).default; } });
+var NotificationPanel_1 = require("./NotificationPanel");
+Object.defineProperty(exports, "NotificationPanel", { enumerable: true, get: function () { return __importDefault(NotificationPanel_1).default; } });
+var NotificationList_1 = require("./NotificationList");
+Object.defineProperty(exports, "NotificationList", { enumerable: true, get: function () { return __importDefault(NotificationList_1).default; } });
+var NotificationItem_1 = require("./NotificationItem");
+Object.defineProperty(exports, "NotificationItem", { enumerable: true, get: function () { return __importDefault(NotificationItem_1).default; } });
+__exportStar(require("./NotificationBellProps"), exports);
+__exportStar(require("./notificationHelpers"), exports);

package/dist/Components/NotificationBell/notificationHelpers.d.ts

@@ -0,0 +1,32 @@
+import { type RefObject } from "react";
+export interface DaySection<T> {
+    label: string;
+    rows: T[];
+}
+export interface ConsecutiveGroup<T> {
+    key: string | null;
+    rows: T[];
+}
+export interface DaySectionLabels {
+    today: string;
+    yesterday: string;
+    earlier: string;
+}
+export declare const DEFAULT_DAY_LABELS: DaySectionLabels;
+/**
+ * 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 declare function sectionizeByDay<T>(rows: T[], getTime: (row: T) => number | string | Date, labels?: DaySectionLabels, now?: number | Date): DaySection<T>[];
+/** Merges only adjacent rows sharing a key; a null/undefined key never merges with anything. */
+export declare function groupConsecutive<T>(rows: T[], getKey: (row: T) => string | null | undefined): ConsecutiveGroup<T>[];
+/** 5 -> "5"; 150 with max 99 -> "99+". Negative/NaN input is clamped to 0. */
+export declare function formatCount(value: number, max?: number): string;
+/** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
+export declare function formatRelativeTime(value: number | string | Date, now?: number | Date): string;
+export interface AnchoredPanelHeightOptions {
+    min?: number;
+    gutter?: number;
+}
+/** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */
+export declare function useAnchoredPanelHeight(ref: RefObject<HTMLElement>, options?: AnchoredPanelHeightOptions): number;

package/dist/Components/NotificationBell/notificationHelpers.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DAY_LABELS = void 0;
+exports.sectionizeByDay = sectionizeByDay;
+exports.groupConsecutive = groupConsecutive;
+exports.formatCount = formatCount;
+exports.formatRelativeTime = formatRelativeTime;
+exports.useAnchoredPanelHeight = useAnchoredPanelHeight;
+const react_1 = require("react");
+exports.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.
+ */
+function sectionizeByDay(rows, getTime, labels = exports.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. */
+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. */
+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. */
+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. */
+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] = (0, react_1.useState)(min);
+    (0, react_1.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/Components/NumberInput/NumberInput.d.ts

@@ -1,4 +1,5 @@
-declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").NumberInputProps, "maxW" | "defaultValue" | "onBlur" | "onChange" | "size" | "max" | "min" | "step" | "name" | "value" | "precision" | "clampValueOnBlur" | "keepWithinRange" | "allowMouseWheel"> & {
+/** Labelled numeric field with the shared helper/error row; `isRequired` propagates natively via `FormControl`. */
+declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").NumberInputProps, "maxW" | "max" | "min" | "size" | "defaultValue" | "onBlur" | "onChange" | "step" | "isDisabled" | "name" | "value" | "isReadOnly" | "precision" | "clampValueOnBlur" | "keepWithinRange" | "allowMouseWheel"> & {
     NumberIncrementStepperBg?: string;
     NumberIncrementStepperActive?: import("./NumberInputProps").ActiveStyle;
     NumberIncrementStepperChildren?: string;
@@ -10,6 +11,10 @@ declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<import
     informationMessage?: string;
     isRequired?: boolean;
     id?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    placeholder?: string;
     width?: string;
     minW?: string;
     maxW?: string;

package/dist/Components/NumberInput/NumberInput.js

@@ -1,10 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = require("react");
 const FormLabel_1 = require("../Common/FormLabel");
-const NumberInput = (0, react_2.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) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_1.NumberInput, { 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: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, { ref: ref }), (0, jsx_runtime_1.jsxs)(react_1.NumberInputStepper, { children: [(0, jsx_runtime_1.jsx)(react_1.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, children: NumberIncrementStepperChildren }), (0, jsx_runtime_1.jsx)(react_1.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, children: NumberDecrementStepperChildren })] })] })] }));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+/** Labelled numeric field with the shared helper/error row; `isRequired` propagates natively via `FormControl`. */
+const NumberInput = (0, react_2.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 = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, isRequired: isRequired, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_1.NumberInput, { 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: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, { ref: ref, placeholder: placeholder }), (0, jsx_runtime_1.jsxs)(react_1.NumberInputStepper, { children: [(0, jsx_runtime_1.jsx)(react_1.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, sx: { flex: "none" }, children: NumberIncrementStepperChildren }), (0, jsx_runtime_1.jsx)(react_1.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, sx: { flex: "none" }, children: NumberDecrementStepperChildren })] })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 exports.default = NumberInput;

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

@@ -1,87 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
-exports.NumberInput = {
-    baseStyle: {
-        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: {
-                fontStyle: "italic",
-            },
-        },
-    },
-    sizes: {
-        md: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.875rem",
-            },
+const TextInput_styles_1 = require("../Input/TextInput.styles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const stepperSizes = Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => {
+    const half = `calc(${controlSizes_1.CONTROL_SIZES[size].height} / 2)`;
+    return [
+        size,
+        {
+            stepperGroup: { width: "1.5rem", height: controlSizes_1.CONTROL_SIZES[size].height },
+            stepper: { height: half, fontSize: "0.5rem", boxSizing: "border-box" },
         },
-    },
+    ];
+}));
+const numberInputSizes = (0, TextInput_styles_1.fieldSizes)("field");
+for (const size of controlSizes_1.CONTROL_SIZE_NAMES) {
+    Object.assign(numberInputSizes[size], stepperSizes[size]);
+}
+exports.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.gray[50],
-                    border: "0.063rem solid",
-                    borderColor,
-                    _placeholder: {
-                        color: theme.colors.textMuted,
-                    },
-                    _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.gray[100],
-                        opacity: 1,
-                        cursor: "not-allowed",
-                        _hover: {
-                            border: "0.063rem solid",
-                            borderColor,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: (0, TextInput_styles_1.fieldPartStyles)(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: controlSizes_1.DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/Components/NumberInput/NumberInputProps.d.ts

@@ -1,20 +1,42 @@
 import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
-export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel" | "onBlur" | "name"> & {
+/** Picks a safe subset of Chakra's NumberInput props and adds label/stepper-color props of its own. */
+export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel" | "onBlur" | "name" | "isDisabled" | "isReadOnly"> & {
+    /** NumberIncrementStepperChildren/NumberDecrementStepperChildren accept only a string, not an icon — omit them to keep Chakra's default chevrons. */
     NumberIncrementStepperBg?: string;
+    /** Background of the increment button while pressed. */
     NumberIncrementStepperActive?: ActiveStyle;
+    /** Replaces the increment chevron with this text. */
     NumberIncrementStepperChildren?: string;
+    /** Background of the decrement button; defaults to Chakra's stepper style. */
     NumberDecrementStepperBg?: string;
+    /** Replaces the decrement chevron with this text. */
     NumberDecrementStepperChildren?: string;
+    /** Background of the decrement button while pressed. */
     NumberDecrementStepperActive?: ActiveStyle;
     label?: string;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Shows the label asterisk and sets native `required` via FormControl. */
     isRequired?: boolean;
     id?: string;
+    /** Marks the field invalid (error border + `aria-invalid`) and swaps the helper for `errorMessage`. */
+    error?: boolean;
+    /** Shown under the field while `error` is true; falls back to "Error". */
+    errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
+    helperText?: string;
+    /** Hint text inside the empty field. */
+    placeholder?: string;
+    /** Width of the whole field; defaults to `"100%"`. */
     width?: string;
+    /** Applied to the whole field wrapper. */
     minW?: string;
+    /** Applied to both the field wrapper and the number input. */
     maxW?: string;
 };
+/** Background applied to a stepper button's `_active` (pressed) state. */
 export type ActiveStyle = {
     bg: string;
 };

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -8,6 +8,8 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
 const sizeMap = {
     sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
@@ -25,8 +27,14 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
 const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const handlePopoverOpen = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
     const [query, setQuery] = (0, react_1.useState)("");
     const searchRef = (0, react_1.useRef)(null);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
@@ -65,18 +73,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.gray[50] }
+            ? { 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 = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.backgroundColor.light);
     const handleSelect = (org) => {
         onClose();
@@ -84,33 +87,26 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         if (org.id !== value)
             onChange(org.id, org);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
         }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.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);
                                             }
                                         }, borderRadius: "lg" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
                                     const isActive = org.id === value;
-                                    // Active row's hover repeated its own resting `primary[50]` fill — a zero-delta
-                                    // hover, invisible by construction. `resolveHoverTint` walks a fill away from a
-                                    // backdrop until distinguishable, so handing it its own resting bg as the backdrop
-                                    // is enough to make hover read as a real state change on both active and inactive rows.
                                     const rowHoverBg = isActive
-                                        ? (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[50], theme.colors.primary[50])
-                                        : (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.backgroundColor.light);
+                                        ? rowBackgrounds.selectedActive
+                                        : rowBackgrounds.active;
                                     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[50]), flexShrink: 0 }))] }, org.id));
-                                }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -1,4 +1,5 @@
 import { type ChartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
+/** One organization in the switcher's list; `id` is matched against `value` to find the active one. */
 export interface OrgOption {
     id: string | number;
     /** Organization display name. */
@@ -8,13 +9,15 @@ export interface OrgOption {
     /** Optional logo image URL. Falls back to an initial-based avatar. */
     logoUrl?: string;
 }
+/** Trigger size; looked up in a fixed sizeMap for height, avatar and font sizing. */
 export type OrgSwitcherSize = "sm" | "md" | "lg";
+/** Session-scoped org switcher (trigger+popover) — not an admin screen; see OrganizationDetails for create/rename/delete/default. Closed prop list, no ...rest/ref on the trigger button. */
 export interface OrgSwitcherProps {
     /** Organizations to choose from. */
     organizations: OrgOption[];
     /** id of the currently active organization. */
     value?: string | number;
-    /** Fired when a different organization is picked. */
+    /** Not fired when the clicked org already matches value — only on an actual change. */
     onChange: (id: string | number, org: OrgOption) => void;
     /** Shows an inline spinner and disables interaction (e.g. while switching). */
     isLoading?: boolean;
@@ -24,6 +27,7 @@ export interface OrgSwitcherProps {
     searchThreshold?: number;
     /** Trigger styling. "ghost" suits a navbar; "outline"/"subtle" for forms. */
     triggerVariant?: "ghost" | "outline" | "subtle";
+    /** Default "md". */
     size?: OrgSwitcherSize;
     /** Max width of the trigger label before truncation. */
     maxWidth?: string;
@@ -38,7 +42,8 @@ export interface OrgSwitcherProps {
 }
 export declare const AVATAR_COLORS: readonly string[];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
-export declare const AVATAR_INK = "#ffffff";
+export declare const AVATAR_INK: string;
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 export declare const avatarColor: (seed: string, mode?: ChartMode) => string;
 /**
  * Fallback-avatar initials, up to 2 characters. A single letter reads well for one

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.orgInitial = exports.avatarColor = exports.AVATAR_INK = exports.AVATAR_COLORS = void 0;
 const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
 exports.AVATAR_COLORS = [
     ...chartColorsFromTheme_1.CATEGORICAL_SERIES.light,
     ...chartColorsFromTheme_1.CATEGORICAL_SERIES.dark,
 ];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
-exports.AVATAR_INK = "#ffffff";
+exports.AVATAR_INK = neutrals_1.neutralTokens.white;
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 const avatarColor = (seed, mode = "light") => {
     let hash = 0;
     for (let i = 0; i < seed.length; i += 1) {

package/dist/Components/OrganizationDetails/CreateOrgModal.js

@@ -56,6 +56,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 ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, 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], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
 };
 exports.default = CreateOrgModal;