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

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -1,25 +1,38 @@
 "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_INK = exports.AVATAR_COLORS = void 0;
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+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) => {
+/** Chart hues are tuned to sit apart from each other, not to carry a label. */
+exports.AVATAR_INK = "#ffffff";
+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];
+    const hue = ramp[Math.abs(hash) % ramp.length];
+    return (0, statusTone_1.resolveAvatarFill)(hue);
 };
 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

@@ -15,7 +15,6 @@ const EMPTY = {
     phone: "",
 };
 const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
-    var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [values, setValues] = (0, react_1.useState)(EMPTY);
     const [errors, setErrors] = (0, react_1.useState)({});
@@ -31,30 +30,32 @@ 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 })] })] })] })] }));
+    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 })] })] })] })] }));
 };
 exports.default = CreateOrgModal;

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

@@ -7,10 +7,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     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 }) })] })] })] })] }));
+    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.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: colors.textMuted, 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

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -8,8 +8,11 @@ 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 statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Tag_1 = __importDefault(require("../Tag/Tag"));
 const CreateOrgModal_1 = __importDefault(require("./CreateOrgModal"));
 const DeleteOrgModal_1 = __importDefault(require("./DeleteOrgModal"));
 const DEFAULT_LABELS = {
@@ -23,6 +26,7 @@ const DEFAULT_LABELS = {
     setAsDefault: "Set as Default",
     settingDefault: "Setting...",
     default: "Default",
+    owner: "Owner",
     pending: "Pending",
     accept: "Accept",
     accepting: "Accepting...",
@@ -30,6 +34,10 @@ const DEFAULT_LABELS = {
     deleteOrganization: "Delete Organization",
     protectedOrganization: "Protected organization",
     delete: "Delete",
+    editOrganization: "Edit organization name",
+    save: "Save",
+    saving: "Saving...",
+    emptyNameError: "Organization name cannot be empty",
     noOrganizationsTitle: "No organizations found",
     noOrganizationsDescription: "Get started by creating your first organization or wait for an invitation",
     companyName: "Company Name",
@@ -44,50 +52,100 @@ const DEFAULT_LABELS = {
     copyright: "Pixelize Corp. All rights reserved.",
     termsOfService: "Terms of Service",
 };
-const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onCreateOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [isCreateOpen, setCreateOpen] = (0, react_1.useState)(false);
     const [deleteOrgId, setDeleteOrgId] = (0, react_1.useState)(null);
-    const border = (_d = (_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]) !== null && _d !== void 0 ? _d : "#E2E8F0";
-    const surface = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : colors === null || colors === void 0 ? void 0 : colors.white) !== null && _g !== void 0 ? _g : "#FFFFFF";
-    const muted = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : "#64748B";
-    const subtle = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : "#475569";
-    const heading = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[800]) !== null && _o !== void 0 ? _o : "#1E293B";
-    const pageBg = (_q = (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[50]) !== null && _q !== void 0 ? _q : "#F8FAFC";
-    const primary50 = (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : "#EEF2FF";
-    const primary100 = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _t === void 0 ? void 0 : _t[100]) !== null && _u !== void 0 ? _u : "#E0E7FF";
-    const primary500 = (_w = (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[500]) !== null && _w !== void 0 ? _w : "#6366F1";
-    const primary600 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _x === void 0 ? void 0 : _x[600]) !== null && _y !== void 0 ? _y : "#4F46E5";
+    // --- Inline "edit organization name" state ---
+    const [editingOrgId, setEditingOrgId] = (0, react_1.useState)(null);
+    const [editValue, setEditValue] = (0, react_1.useState)("");
+    const [editError, setEditError] = (0, react_1.useState)("");
+    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
+    const warningTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.warning, mode);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const subtle = colors.text[600];
+    const heading = colors.text[900];
+    const pageBg = colors.backgroundColor.main;
+    const primary50 = colors.primary[50];
+    const primary100 = colors.primary[100];
+    const primary500 = colors.primary[500];
+    const onPrimary50 = (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]);
     const cardSx = {
         backgroundColor: surface,
         borderRadius: "xl",
         border: "1px solid",
         borderColor: border,
-        boxShadow: "0 1px 2px rgba(16,24,40,0.05)",
+        boxShadow: "sm",
     };
     const sectionBadge = (count, scheme) => ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: scheme, variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", children: count }));
+    const startEditing = (item) => {
+        setEditingOrgId(item.orgId);
+        setEditValue(item.company_name);
+        setEditError("");
+    };
+    const cancelEditing = () => {
+        setEditingOrgId(null);
+        setEditValue("");
+        setEditError("");
+    };
+    const submitEditing = async (item) => {
+        const trimmed = editValue.trim();
+        if (!trimmed) {
+            setEditError(labels.emptyNameError);
+            return;
+        }
+        if (trimmed === item.company_name) {
+            cancelEditing();
+            return;
+        }
+        await (onEditOrganization === null || onEditOrganization === void 0 ? void 0 : onEditOrganization(item.orgId, trimmed));
+        setEditingOrgId(null);
+        setEditValue("");
+        setEditError("");
+    };
     const renderActiveCard = (item) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         const isSwitching = switchingOrgIds.includes(item.orgId);
-        const isProtected = item.defaultOrg === 1;
+        // Role name is a display value, not a permission — apps pass the real rule.
+        const canEdit = (_a = item.canRename) !== null && _a !== void 0 ? _a : item.roleName === "Super Admin";
+        const canProtect = !((_b = item.canDelete) !== null && _b !== void 0 ? _b : item.roleName === "Super Admin");
+        const isProtected = item.defaultOrg === 1 || canProtect;
+        const isEditingThis = canEdit && editingOrgId === item.orgId;
+        const isSavingThis = editingOrgIds.includes(item.orgId);
+        const roleLabel = (_c = item.roleName) === null || _c === void 0 ? void 0 : _c.trim();
+        const deleteButton = ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.deleteOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }), size: "xs", variant: "ghost", borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
+                bg: errorTone.bg,
+                color: errorTone.fg,
+            }, onClick: () => onDeleteRequest
+                ? onDeleteRequest(item.orgId)
+                : setDeleteOrgId(item.orgId) }));
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
-                borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#A5B4FC",
-                boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
+                borderColor: colors.primary[300],
+                boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: primary600, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { mr: "2rem", children: item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: primary500, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: primary600, fontWeight: 600, cursor: "pointer", _hover: { color: primary500, gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })) })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected ? labels.protectedOrganization : labels.deleteOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.deleteOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 14 }), size: "xs", variant: "ghost", position: "absolute", top: 2, right: 2, borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
-                            bg: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.red) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#FEF2F2",
-                            color: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[600]) !== null && _f !== void 0 ? _f : "#DC2626",
-                        }, onClick: () => setDeleteOrgId(item.orgId) }) })] }, item.orgId));
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
+                                        ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
+                                        : labels.deleteOrganization, hasArrow: true, children: isProtected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: editValue, onChange: (e) => {
+                                        setEditValue(e.target.value);
+                                        if (editError)
+                                            setEditError("");
+                                    }, size: "sm", fontSize: "sm", fontWeight: 700, autoFocus: true, isDisabled: isSavingThis, onKeyDown: (e) => {
+                                        if (e.key === "Enter")
+                                            submitEditing(item);
+                                        if (e.key === "Escape")
+                                            cancelEditing();
+                                    } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.save, icon: isSavingThis ? (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item), variant: "ghost" }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.cancel, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.7rem", color: colors.semanticText.error, mt: 1, children: editError }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (item.isOwner || roleLabel) && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, mt: 1, children: [item.isOwner && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: labels.owner, icon: lucide_react_1.Crown, colorScheme: "primary", variant: "subtle", size: "xs" })), roleLabel && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: roleLabel, colorScheme: "gray", variant: "subtle", size: "xs" }))] }))] }))] }, item.orgId));
     };
     const renderInvitedCard = (item) => {
-        var _a, _b, _c, _d;
         const isResponding = respondingOrgIds.includes(item.orgId);
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
-                boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
+                boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#FEF9C3", color: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#CA8A04", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Globe, { size: 13 }), (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: warningTone.bg, color: warningTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Globe, { size: 13 }), (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
     };
     const gridSx = {
         display: "grid",
@@ -100,7 +158,9 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         width: "100%",
     };
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: "white", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 700, children: userName ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim() : labels.greeting }), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 16, color: primary500 }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, color: (_0 = (_z = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _z === void 0 ? void 0 : _z[500]) !== null && _0 !== void 0 ? _0 : "#EAB308" }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, (0, jsx_runtime_1.jsx)(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: (0, accentText_1.onFilled)(primary500, colors.white, colors.black), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+                                                    ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
+                                                    : labels.greeting }), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 16, color: colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, color: colors.semanticText.warning }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, (0, jsx_runtime_1.jsx)(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));
                     setCreateOpen(false);
                 }, labels: labels }), (0, jsx_runtime_1.jsx)(DeleteOrgModal_1.default, { isOpen: deleteOrgId !== null, onClose: () => setDeleteOrgId(null), onConfirm: async () => {

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

@@ -2,23 +2,33 @@ import { ReactNode } from "react";
 export type OrganizationItem = {
     orgId: number;
     company_name: string;
-    company_url: string;
+    company_url?: string;
     /** 1 when this org is the user's default org. */
     default: number;
     /** 1 = active/accepted, 0 = pending invite. */
     uiInvite: number;
     /** 1 when the org is protected and cannot be deleted. */
     defaultOrg: number;
+    roleName?: string;
+    /** True when the current user owns this org; the app computes ownership. */
+    isOwner?: boolean;
+    /** Overrides the role-name check for the rename control. */
+    canRename?: boolean;
+    /** Overrides the role-name check for the delete control. */
+    canDelete?: boolean;
+    /**
+     * Why delete is unavailable for this organization, shown on the disabled
+     * control. Falls back to `labels.protectedOrganization` when not supplied.
+     */
+    deleteDisabledReason?: string;
 };
 export type CreateOrgFormValues = {
     company_name: string;
     company_address: string;
-    phone: string;
+    phone?: string;
+    default?: number;
+    defaultOrg?: number;
 };
-/**
- * All user-facing strings. Provide translated values from the host app; every
- * key has a sensible English default so the component works standalone.
- */
 export type OrganizationDetailsLabels = {
     greeting?: string;
     manageSubtitle?: string;
@@ -30,6 +40,7 @@ export type OrganizationDetailsLabels = {
     setAsDefault?: string;
     settingDefault?: string;
     default?: string;
+    owner?: string;
     pending?: string;
     accept?: string;
     accepting?: string;
@@ -37,6 +48,10 @@ export type OrganizationDetailsLabels = {
     deleteOrganization?: string;
     protectedOrganization?: string;
     delete?: string;
+    editOrganization?: string;
+    save?: string;
+    saving?: string;
+    emptyNameError?: string;
     noOrganizationsTitle?: string;
     noOrganizationsDescription?: string;
     companyName?: string;
@@ -51,23 +66,41 @@ export type OrganizationDetailsLabels = {
     copyright?: string;
     termsOfService?: string;
 };
+export interface CreateOrganizationValues {
+    company_name: string;
+    company_address?: string;
+    phone?: string;
+}
 export interface OrganizationDetailsProps {
     activeOrganizations: OrganizationItem[];
     invitedOrganizations: OrganizationItem[];
     isLoading?: boolean;
-    /** Org ids currently being switched to default. */
+    isCreating?: boolean;
+    /** orgIds currently switching to default (shows a spinner on that card) */
     switchingOrgIds?: number[];
-    /** Org ids currently responding to an invite. */
+    /** orgIds currently accepting/declining an invite (shows a spinner on that card) */
     respondingOrgIds?: number[];
-    isCreating?: boolean;
-    createError?: string;
+    /** orgIds currently saving a renamed organization (shows a spinner on that card) */
+    editingOrgIds?: number[];
     userName?: string;
     userAvatarUrl?: string;
-    onSetDefault?: (orgId: number) => void;
-    onAcceptInvite?: (orgId: number) => void;
-    onDeclineInvite?: (orgId: number) => void;
+    onSetDefault?: (orgId: number) => void | Promise<void>;
+    onAcceptInvite?: (orgId: number) => void | Promise<void>;
+    onDeclineInvite?: (orgId: number) => void | Promise<void>;
+    /**
+     * Called once the built-in confirm modal is accepted. Never called when
+     * `onDeleteRequest` is supplied — that app owns the whole delete.
+     */
     onDeleteOrganization?: (orgId: number) => void | Promise<void>;
-    onCreateOrganization?: (values: CreateOrgFormValues) => void | Promise<void>;
+    /**
+     * Called on trash-click *instead of* opening the built-in confirm modal, so
+     * the app can run its own preview and confirmation. Supplying it suppresses
+     * both the modal and `onDeleteOrganization`; omit it to keep the built-in flow.
+     */
+    onDeleteRequest?: (orgId: number) => void | Promise<void>;
+    onCreateOrganization?: (values: CreateOrganizationValues) => void | Promise<void>;
+    /** Called when the user confirms a new name for an organization */
+    onEditOrganization?: (orgId: number, newName: string) => void | Promise<void>;
     onBack?: () => void;
     footerSlot?: ReactNode;
     labels?: OrganizationDetailsLabels;
@@ -86,4 +119,3 @@ export interface DeleteOrgModalProps {
     onConfirm: () => void;
     labels: Required<Pick<OrganizationDetailsLabels, "confirmDeletion" | "deleteConfirmText" | "cancel" | "delete">>;
 }
-//# sourceMappingURL=OrganizationDetailsProps.d.ts.map

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -13,4 +13,3 @@ export interface PdfViewerProps {
 }
 declare const PdfViewer: React.FC<PdfViewerProps>;
 export default PdfViewer;
-//# sourceMappingURL=PdfViewer.d.ts.map

package/dist/Components/PdfViewer/PdfViewer.js

@@ -8,8 +8,8 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "12px", }) => {
+const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.gray[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.primary[500] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "8px", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "8px", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.gray[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 exports.default = PdfViewer;

package/dist/Components/PinInput/PinInput.d.ts

@@ -1,3 +1,2 @@
 import { ChakraPinInputProps } from "./PinInputProps";
 export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, id, isRequired, isInformation, informationMessage, }: ChakraPinInputProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PinInput.d.ts.map

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -11,4 +11,3 @@ export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultV
     isInformation?: boolean;
     informationMessage?: string;
 };
-//# sourceMappingURL=PinInputProps.d.ts.map

package/dist/Components/PinInputs/PinInputs.d.ts

@@ -1,4 +1,3 @@
 import { PinInputsProps } from "./PinInputsProps";
 declare const PinInputs: ({ length, label, error, onChange, onComplete, mask, placeholder, }: PinInputsProps) => import("react/jsx-runtime").JSX.Element;
 export default PinInputs;
-//# sourceMappingURL=PinInputs.d.ts.map

package/dist/Components/PinInputs/PinInputs.js

@@ -8,21 +8,16 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const Label_1 = __importDefault(require("../Common/Label"));
 const ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
-    var _a, _b, _c, _d, _e;
-    const theme = (0, react_2.useTheme)();
-    const { colors } = theme;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [values, setValues] = (0, react_1.useState)(Array(length).fill(""));
     const inputsRef = (0, react_1.useRef)([]);
-    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
-    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
     const borderColor = error
-        ? (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]
-        : (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[800];
-    const focusRing = error ? (_d = colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error : (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary;
-    const focusShadow = focusRing
-        ? `0 0 0 0.125rem ${focusRing}`
-        : undefined;
+        ? colors.semanticText.error
+        : colors.boxborder[500];
+    const focusRing = error ? colors.boxShadow.error : colors.boxShadow.primary;
+    const focusShadow = `0 0 0 0.125rem ${focusRing}`;
     const handleChange = (index, value) => {
         var _a;
         if (!/^[0-9]?$/.test(value))
@@ -46,8 +41,6 @@ const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = fals
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { label: label }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: (el) => {
                         inputsRef.current[index] = el;
-                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: focusShadow
-                        ? { boxShadow: focusShadow, outline: "none" }
-                        : { outline: "none" } }, index))) }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
+                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: { boxShadow: focusShadow, outline: "none" } }, index))) }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
 };
 exports.default = PinInputs;

package/dist/Components/PinInputs/PinInputsProps.d.ts

@@ -7,4 +7,3 @@ export type PinInputsProps = {
     onChange?: (value: string) => void;
     onComplete?: (value: string) => void;
 };
-//# sourceMappingURL=PinInputsProps.d.ts.map

package/dist/Components/PlanBadge/PlanBadge.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { PlanBadgeProps } from "./PlanBadgeProps";
+/**
+ * The top-bar plan badge: resolves an org's plan state into a `PlanPill`, or
+ * renders nothing when there is nothing to say (or nobody who can act on it).
+ *
+ * Use this when the app has the plan state to hand; drop to `PlanPill` directly
+ * for a badge whose copy is decided elsewhere.
+ */
+declare const PlanBadge: React.FC<PlanBadgeProps>;
+export default PlanBadge;

package/dist/Components/PlanBadge/PlanBadge.js

@@ -0,0 +1,22 @@
+"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 planBadge_1 = require("../../Utils/planBadge");
+const PlanPill_1 = __importDefault(require("../PlanPill/PlanPill"));
+/**
+ * The top-bar plan badge: resolves an org's plan state into a `PlanPill`, or
+ * renders nothing when there is nothing to say (or nobody who can act on it).
+ *
+ * Use this when the app has the plan state to hand; drop to `PlanPill` directly
+ * for a badge whose copy is decided elsewhere.
+ */
+const PlanBadge = ({ input, maxLabelWidth, ariaLabel, onClick, }) => {
+    const { visible, label, mobileLabel, subtitle, tone } = (0, planBadge_1.resolvePlanBadge)(input);
+    if (!visible)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(PlanPill_1.default, { label: label, mobileLabel: mobileLabel, status: subtitle, tone: tone, maxLabelWidth: maxLabelWidth, ariaLabel: ariaLabel, onClick: onClick }));
+};
+exports.default = PlanBadge;

package/dist/Components/PlanBadge/PlanBadgeProps.d.ts

@@ -0,0 +1,10 @@
+import { PlanBadgeInput } from "../../Utils/planBadge";
+export interface PlanBadgeProps {
+    /** The org's plan state. Resolved into label, tone and chip text internally. */
+    input: PlanBadgeInput;
+    /** Truncate the label beyond this width. */
+    maxLabelWidth?: string;
+    /** Accessible label (falls back to `label — status`). */
+    ariaLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}