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

package/dist/Components/NavigationBar/NavigationBar.js

@@ -5,9 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const lucide_react_1 = require("lucide-react");
 function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Shared rounded pill affordance for the bar's icon controls.
     const iconButtonStyle = {
@@ -17,13 +18,20 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         justifyContent: "center",
         borderRadius: "md",
         cursor: "pointer",
+        border: "none",
+        bg: "transparent",
         transition: "background 0.15s",
         _hover: { bg: "blackAlpha.50" },
     };
+    // For a near-neutral brand (e.g. zinc), `primary[50]` is itself a pale near-white tint — on
+    // the menu's own near-white surface that measured as low as ~1.02:1, an invisible hover.
+    const menuHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[50], (_d = (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.light) !== null && _b !== void 0 ? _b : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : accentText_1.DEFAULT_CANVAS);
     // Light elevated pill item.
     const menuItemStyle = {
         bg: "transparent",
-        borderRadius: "7px",
+        borderRadius: "lg",
+        // Chakra's MenuItem is width:100%, so mx added 12px and forced a horizontal scrollbar.
+        w: "calc(100% - 0.75rem)",
         mx: "0.375rem",
         px: "0.625rem",
         py: "0.5rem",
@@ -32,23 +40,25 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         color: "gray.700",
         gap: theme.space["2"],
         transition: "background 0.12s",
-        _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
-        _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
-        _active: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+        _hover: { bg: menuHoverBg, color: theme.colors.primary[700] },
+        _focus: { bg: menuHoverBg, color: theme.colors.primary[700] },
+        _active: { bg: menuHoverBg, color: theme.colors.primary[700] },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", ...iconButtonStyle, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary, (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.backgroundColor) === null || _e === void 0 ? void 0 : _e.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, 
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)((_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.secondary, (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.backgroundColor) === null || _j === void 0 ? void 0 : _j.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+                                        // Without a cap one long title stretches the whole dropdown; titles truncate instead.
+                                        maxW: "18rem", bg: theme.colors.backgroundColor.light, 
                                         // Chakra's MenuItem renders `background: var(--menu-bg)` at rest; its MenuList
                                         // baseStyle hardcodes that var to "#fff" (gated behind `_dark`, which this theme-swap
                                         // app never triggers). The `bg` prop above only recolors the list itself, not the
                                         // inherited var, so items fall back to white until hover/focus — set the var too.
-                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: "gray.800", isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: "gray.500", isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
-                                                        var _a, _b, _c;
-                                                        return ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.Box, { children: menu.title })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
+                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                                        var _a, _b, _c, _d;
+                                                        return ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
                                                     }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: "red.500",
                                                         _hover: { bg: "red.50", color: "red.600" },
                                                         _focus: { bg: "red.50", color: "red.600" },
                                                         _active: { bg: "red.50", color: "red.600" },
-                                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { children: logoutText })] })] }) })] })] }) })] }) }));
+                                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { minW: 0, isTruncated: true, title: String(logoutText !== null && logoutText !== void 0 ? logoutText : ""), children: logoutText })] })] }) })] })] }) })] }) }));
 }

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 export type NavbarProps = {
-    userAvathar: string;
+    userAvathar?: string;
     userName: string;
     userRole?: string;
     navMenu: MenuProps[];
@@ -28,4 +28,3 @@ export type MenuProps = {
     url: string;
     icon?: ReactNode;
 };
-//# sourceMappingURL=NavigationBarProps.d.ts.map

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -1,3 +1,2 @@
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
 export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=NoteTextArea.d.ts.map

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -16,4 +16,3 @@ export type NoteTextAreaProps = {
     customPlaceholder?: string;
     cancelButtonHide?: boolean;
 };
-//# sourceMappingURL=NoteTextAreaProps.d.ts.map

package/dist/Components/Notification/Notification.d.ts

@@ -1,4 +1,3 @@
 import { NotificationProps } from "./NotificationProps";
 declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, colors, }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 export default Notification;
-//# sourceMappingURL=Notification.d.ts.map

package/dist/Components/Notification/NotificationProps.d.ts

@@ -27,4 +27,3 @@ export type NotificationColor = {
     errorColor?: string;
     successColor?: string;
 };
-//# sourceMappingURL=NotificationProps.d.ts.map

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

@@ -1,3 +1,17 @@
-import { NumberInputProps } from "./NumberInputProps";
-export default function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width, minW, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=NumberInput.d.ts.map
+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"> & {
+    NumberIncrementStepperBg?: string;
+    NumberIncrementStepperActive?: import("./NumberInputProps").ActiveStyle;
+    NumberIncrementStepperChildren?: string;
+    NumberDecrementStepperBg?: string;
+    NumberDecrementStepperChildren?: string;
+    NumberDecrementStepperActive?: import("./NumberInputProps").ActiveStyle;
+    label?: string;
+    isInformation?: boolean;
+    informationMessage?: string;
+    isRequired?: boolean;
+    id?: string;
+    width?: string;
+    minW?: string;
+    maxW?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default NumberInput;

package/dist/Components/NumberInput/NumberInput.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = NumberInput;
 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");
-function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, ...props }) {
-    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, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, ...props, children: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, {}), (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 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 })] })] })] }));
+});
+exports.default = NumberInput;

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

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const NumberInput: ComponentStyleConfig;
-//# sourceMappingURL=NumberInput.styles.d.ts.map

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

@@ -9,7 +9,7 @@ exports.NumberInput = {
             letterSpacing: "0.044rem",
             pt: "0.813rem",
             pb: "0.813rem",
-            borderRadius: "0.5rem",
+            borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
                 fontStyle: "italic",

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

@@ -1,5 +1,5 @@
 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"> & {
+export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel" | "onBlur" | "name"> & {
     NumberIncrementStepperBg?: string;
     NumberIncrementStepperActive?: ActiveStyle;
     NumberIncrementStepperChildren?: string;
@@ -18,4 +18,3 @@ export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "mi
 export type ActiveStyle = {
     bg: string;
 };
-//# sourceMappingURL=NumberInputProps.d.ts.map

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

@@ -2,4 +2,3 @@ import React from "react";
 import { OrgSwitcherProps } from "./OrgSwitcherProps";
 declare const OrgSwitcher: React.FC<OrgSwitcherProps>;
 export default OrgSwitcher;
-//# sourceMappingURL=OrgSwitcher.d.ts.map

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -5,6 +5,9 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
 const sizeMap = {
     sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
@@ -12,10 +15,13 @@ const sizeMap = {
     lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
 const Avatar = ({ org, boxSize, fontSize, }) => {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (org.logoUrl) {
-        return ((0, jsx_runtime_1.jsx)(react_2.Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "8px", objectFit: "cover", flexShrink: 0 }));
+        return ((0, jsx_runtime_1.jsx)(react_2.Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0 }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "8px", flexShrink: 0, bg: (0, OrgSwitcherProps_1.avatarColor)(org.name), color: "white", fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
+    const fill = (0, OrgSwitcherProps_1.avatarColor)(org.name, (0, chartColorsFromTheme_1.chartMode)(colors));
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: (0, accentText_1.onFilled)(fill, (_a = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _a !== void 0 ? _a : accentText_1.DEFAULT_WHITE, (_b = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_BLACK), fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
 };
 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, _b, _c;
@@ -24,6 +30,9 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const [query, setQuery] = (0, react_1.useState)("");
     const searchRef = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const optionRefs = (0, react_1.useRef)([]);
+    const firstOptionRef = (0, react_1.useRef)(null);
     const selected = (0, react_1.useMemo)(() => organizations.find((o) => o.id === value), [organizations, value]);
     const showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : organizations.length >= searchThreshold;
     const filtered = (0, react_1.useMemo)(() => {
@@ -32,6 +41,31 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         const q = query.toLowerCase();
         return organizations.filter((o) => o.name.toLowerCase().includes(q));
     }, [organizations, query]);
+    (0, react_1.useEffect)(() => setActiveIndex(0), [query, isOpen]);
+    const focusOption = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    // Roving tabindex: only the active row is a tab stop, arrow keys move focus between
+    // options — mirrors CompactSelect's established listbox keyboard pattern in this repo.
+    const handleListKeyDown = (0, react_1.useCallback)((e) => {
+        if (filtered.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filtered.length) % filtered.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filtered.length - 1);
+        }
+    }, [activeIndex, filtered.length, focusOption]);
     // boxborder[800], 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.
@@ -40,6 +74,11 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         : triggerVariant === "subtle"
             ? { bg: theme.colors.gray[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.
+    const triggerHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.backgroundColor.light);
     const handleSelect = (org) => {
         onClose();
         setQuery("");
@@ -49,14 +88,30 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : undefined, 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: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? theme.colors.gray[100] : 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: "8px", bg: theme.colors.gray[100], color: theme.colors.gray[400], 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: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.gray[400], flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
+        }, 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: theme.colors.gray[400], 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: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.gray[400], 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: "12px", 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.gray[400] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "8px" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { maxH: "320px", overflowY: "auto", py: 1, children: [filtered.map((org) => {
+                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.gray[400] }) }), (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;
-                                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "10px", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: isActive ? theme.colors.primary[50] : theme.colors.gray[50] }, 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.primary[500], flexShrink: 0 }))] }, org.id));
+                                    // 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);
+                                    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: theme.colors.primary[500], 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" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

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

@@ -1,3 +1,4 @@
+import { type ChartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
 export interface OrgOption {
     id: string | number;
     /** Organization display name. */
@@ -35,8 +36,14 @@ export interface OrgSwitcherProps {
     /** Show the role subtitle inside the dropdown rows. Default true. */
     showRole?: boolean;
 }
-/** Deterministically pick an avatar color from an org name. */
-export declare const avatarColor: (seed: string) => string;
-/** First letter (uppercased) of an org name, for the fallback avatar. */
+export declare const AVATAR_COLORS: readonly string[];
+export declare const avatarColor: (seed: string, mode?: ChartMode) => string;
+/**
+ * Fallback-avatar initials, up to 2 characters. A single letter reads well for one
+ * org but collides constantly across a real list — two orgs both starting with
+ * "P" render the identical circle, distinguishable only by the hashed color.
+ * A multi-word name takes one letter each word ("pixelize default" -> "PD"); a
+ * single word takes its own first two letters ("Default1" -> "DE") so a
+ * one-word org still gets a distinct-looking mark instead of falling back to one.
+ */
 export declare const orgInitial: (name: string) => string;
-//# sourceMappingURL=OrgSwitcherProps.d.ts.map

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -1,25 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.orgInitial = exports.avatarColor = void 0;
-const AVATAR_COLORS = [
-    "#6366F1",
-    "#0EA5E9",
-    "#10B981",
-    "#F59E0B",
-    "#EF4444",
-    "#EC4899",
-    "#8B5CF6",
-    "#14B8A6",
+exports.orgInitial = exports.avatarColor = exports.AVATAR_COLORS = void 0;
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+exports.AVATAR_COLORS = [
+    ...chartColorsFromTheme_1.CATEGORICAL_SERIES.light,
+    ...chartColorsFromTheme_1.CATEGORICAL_SERIES.dark,
 ];
-/** Deterministically pick an avatar color from an org name. */
-const avatarColor = (seed) => {
+const avatarColor = (seed, mode = "light") => {
     let hash = 0;
     for (let i = 0; i < seed.length; i += 1) {
         hash = seed.charCodeAt(i) + ((hash << 5) - hash);
     }
-    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+    const ramp = chartColorsFromTheme_1.CATEGORICAL_SERIES[mode];
+    return ramp[Math.abs(hash) % ramp.length];
 };
 exports.avatarColor = avatarColor;
-/** First letter (uppercased) of an org name, for the fallback avatar. */
-const orgInitial = (name) => { var _a, _b; return ((_b = (_a = name === null || name === void 0 ? void 0 : name.trim()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "?").toUpperCase(); };
+/**
+ * Fallback-avatar initials, up to 2 characters. A single letter reads well for one
+ * org but collides constantly across a real list — two orgs both starting with
+ * "P" render the identical circle, distinguishable only by the hashed color.
+ * A multi-word name takes one letter each word ("pixelize default" -> "PD"); a
+ * single word takes its own first two letters ("Default1" -> "DE") so a
+ * one-word org still gets a distinct-looking mark instead of falling back to one.
+ */
+const orgInitial = (name) => {
+    const words = (name !== null && name !== void 0 ? name : "").trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return "?";
+    if (words.length === 1)
+        return words[0].slice(0, 2).toUpperCase();
+    return (words[0][0] + words[1][0]).toUpperCase();
+};
 exports.orgInitial = orgInitial;

package/dist/Components/OrganizationDetails/CreateOrgModal.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { CreateOrgModalProps } from "./OrganizationDetailsProps";
 declare const CreateOrgModal: React.FC<CreateOrgModalProps>;
 export default CreateOrgModal;
-//# sourceMappingURL=CreateOrgModal.d.ts.map

package/dist/Components/OrganizationDetails/CreateOrgModal.js

@@ -31,28 +31,30 @@ const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
             setErrors((prev) => ({ ...prev, [key]: undefined }));
     };
     const validate = () => {
+        var _a, _b;
         const next = {};
         if (!values.company_name.trim())
             next.company_name = labels.requiredField;
         if (!values.company_address.trim())
             next.company_address = labels.requiredField;
-        const digits = values.phone.replace(/\D/g, "");
-        if (!values.phone.trim()) {
+        const digits = (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.replace(/\D/g, "");
+        if (!((_b = values === null || values === void 0 ? void 0 : values.phone) === null || _b === void 0 ? void 0 : _b.trim())) {
             next.phone = labels.requiredField;
         }
-        else if (digits.length < 8) {
+        else if (digits && (digits === null || digits === void 0 ? void 0 : digits.length) < 8) {
             next.phone = labels.invalidPhone;
         }
         setErrors(next);
         return Object.keys(next).length === 0;
     };
     const handleSubmit = () => {
+        var _a;
         if (!validate())
             return;
         onSubmit({
             company_name: values.company_name.trim(),
             company_address: values.company_address.trim(),
-            phone: values.phone.trim(),
+            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: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], 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 })] })] })] })] }));

package/dist/Components/OrganizationDetails/DeleteOrgModal.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { DeleteOrgModalProps } from "./OrganizationDetailsProps";
 declare const DeleteOrgModal: React.FC<DeleteOrgModalProps>;
 export default DeleteOrgModal;
-//# sourceMappingURL=DeleteOrgModal.d.ts.map

package/dist/Components/OrganizationDetails/DeleteOrgModal.js

@@ -9,8 +9,8 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FEF2F2", color: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#EF4444", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { color: (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[600], fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50], color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[600], fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
 };
 exports.default = DeleteOrgModal;

package/dist/Components/OrganizationDetails/OrganizationDetails.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { OrganizationDetailsProps } from "./OrganizationDetailsProps";
 declare const OrganizationDetails: React.FC<OrganizationDetailsProps>;
 export default OrganizationDetails;
-//# sourceMappingURL=OrganizationDetails.d.ts.map