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

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -10,6 +10,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 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 +24,7 @@ const DEFAULT_LABELS = {
     setAsDefault: "Set as Default",
     settingDefault: "Setting...",
     default: "Default",
+    owner: "Owner",
     pending: "Pending",
     accept: "Accept",
     accepting: "Accepting...",
@@ -30,6 +32,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 +50,99 @@ 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, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     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 border = (_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];
+    const surface = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : colors === null || colors === void 0 ? void 0 : colors.white;
+    const muted = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500];
+    const subtle = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[600];
+    const heading = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[800];
+    const pageBg = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[50];
+    const primary50 = (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[50];
+    const primary100 = (_l = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _l === void 0 ? void 0 : _l[100];
+    const primary500 = (_m = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _m === void 0 ? void 0 : _m[500];
+    const primary600 = (_o = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _o === void 0 ? void 0 : _o[600];
     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, _e, _f, _g, _h;
         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: (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[50],
+                color: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[600],
+            }, 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: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[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: primary600, 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: 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 })] })), 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: primary600, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
+                                        ? ((_g = item.deleteDisabledReason) !== null && _g !== void 0 ? _g : 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: (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[600], 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;
+        var _a, _b;
         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: (_a = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _a === void 0 ? void 0 : _a[100], color: (_b = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _b === void 0 ? void 0 : _b[600], 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 +155,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: "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: (_p = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _p === void 0 ? void 0 : _p[500] }), (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.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: "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/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>;
+}

package/dist/Components/PlanBadge/PlanBadgeProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/PlanPill/PlanPill.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PlanPillProps } from "./PlanPillProps";
+declare const PlanPill: React.FC<PlanPillProps>;
+export default PlanPill;

package/dist/Components/PlanPill/PlanPill.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 planPillGradient_1 = require("./planPillGradient");
+const TONE_ICON = {
+    normal: lucide_react_1.Sparkles,
+    warning: lucide_react_1.Clock,
+    danger: lucide_react_1.AlertCircle,
+};
+const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient, maxLabelWidth = "150px", ariaLabel, onClick, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const c = theme.colors;
+    const toneGradient = {
+        normal: planPillGradient_1.ACCENT_GRADIENT,
+        warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
+        danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
+    };
+    const resolved = gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone];
+    const ink = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);
+    // The chip is a translucent inset of the pill itself, so it tints with whichever
+    // ink won — a white wash under black text would wash the chip out entirely.
+    const onDark = ink === c.white;
+    const Icon = icon === undefined ? TONE_ICON[tone] : icon;
+    const hasMobile = !!mobileLabel && mobileLabel !== label;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`, color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
+            transform: "translateY(-1px)",
+            boxShadow: `0 6px 18px ${resolved.from}59`,
+        }, _focusVisible: {
+            outline: "none",
+            boxShadow: `0 0 0 3px ${resolved.from}55`,
+        }, sx: {
+            "@media (prefers-reduced-motion: reduce)": {
+                transition: "none",
+                _hover: { transform: "none" },
+            },
+        }, children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: onDark ? "rgba(255,255,255,0.22)" : "rgba(0,0,0,0.12)", border: "1px solid", borderColor: onDark ? "rgba(255,255,255,0.28)" : "rgba(0,0,0,0.08)", fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
+};
+exports.default = PlanPill;

package/dist/Components/PlanPill/PlanPillProps.d.ts

@@ -0,0 +1,27 @@
+import { ElementType } from "react";
+/**
+ * Urgency of the plan state. Drives the gradient and the leading icon, so the
+ * badge reads as healthy / expiring soon / expired before the text is read.
+ */
+export type PlanPillTone = "normal" | "warning" | "danger";
+export interface PlanPillProps {
+    /** Primary label, e.g. the plan name or an upgrade prompt. */
+    label: string;
+    /** Compact label for small screens. Defaults to `label`. */
+    mobileLabel?: string;
+    /** Remaining time, e.g. `3mo left`. Rendered as an inset chip; omitted when empty. */
+    status?: string;
+    tone?: PlanPillTone;
+    /** Leading icon. Defaults to a tone-appropriate lucide icon. Pass null to hide. */
+    icon?: ElementType | null;
+    /** Explicit gradient stops. Overrides the tone's theme gradient. */
+    gradient?: {
+        from: string;
+        to: string;
+    };
+    /** Truncate the label beyond this width. */
+    maxLabelWidth?: string;
+    /** Accessible label (falls back to `label — status`). */
+    ariaLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/dist/Components/PlanPill/PlanPillProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/PlanPill/planPillGradient.d.ts

@@ -0,0 +1,21 @@
+export type Gradient = {
+    from: string;
+    to: string;
+};
+/**
+ * The plan badge's `normal` tone is a single fixed accent — not brand-driven, and
+ * not mode-dependent.
+ *
+ * Its tone carries meaning (normal / warning / danger), and a brand gradient can
+ * collide with that: rosewood's `#c74962 → #ea0727` is red, so a healthy plan
+ * rendered as if it had expired. Greyscale brands failed the other way, sinking
+ * the badge into the header chrome.
+ *
+ * One accent for both color modes is deliberate: a lighter dark-mode variant was
+ * tried and flipped `onGradient`'s ink to black, which read as a washed-out candy
+ * pill on dark chrome. These stops keep white ink in both modes, so the badge looks
+ * like the same component everywhere. Verified at AA (>= 4.5:1) on both stops.
+ *
+ * Consumers who genuinely want another colour still pass `gradient`.
+ */
+export declare const ACCENT_GRADIENT: Gradient;

package/dist/Components/PlanPill/planPillGradient.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACCENT_GRADIENT = void 0;
+/**
+ * The plan badge's `normal` tone is a single fixed accent — not brand-driven, and
+ * not mode-dependent.
+ *
+ * Its tone carries meaning (normal / warning / danger), and a brand gradient can
+ * collide with that: rosewood's `#c74962 → #ea0727` is red, so a healthy plan
+ * rendered as if it had expired. Greyscale brands failed the other way, sinking
+ * the badge into the header chrome.
+ *
+ * One accent for both color modes is deliberate: a lighter dark-mode variant was
+ * tried and flipped `onGradient`'s ink to black, which read as a washed-out candy
+ * pill on dark chrome. These stops keep white ink in both modes, so the badge looks
+ * like the same component everywhere. Verified at AA (>= 4.5:1) on both stops.
+ *
+ * Consumers who genuinely want another colour still pass `gradient`.
+ */
+exports.ACCENT_GRADIENT = { from: "#8B3FC8", to: "#df187a" };

package/dist/Components/ProductCard/ProductCard.d.ts

@@ -1,4 +1,3 @@
 import { ProductCardProps } from "./ProductCardProps";
 declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, notifyMe, isQtyEditable, displayRating, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductCard;
-//# sourceMappingURL=ProductCard.d.ts.map

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -45,4 +45,3 @@ export type productImage = {
     order: number;
     isImage?: boolean;
 };
-//# sourceMappingURL=ProductCardProps.d.ts.map

package/dist/Components/ProductCard/ProductLabel.d.ts

@@ -5,4 +5,3 @@ declare const ProductLabel: ({ label, description, size }: {
     size: SizeType;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ProductLabel;
-//# sourceMappingURL=ProductLabel.d.ts.map

package/dist/Components/ProductCard/ProductPrice.d.ts

@@ -8,4 +8,3 @@ type ProductPriceProps = {
 };
 declare const ProductPrice: ({ options, size, onSelect, rightSlot }: ProductPriceProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductPrice;
-//# sourceMappingURL=ProductPrice.d.ts.map

package/dist/Components/ProductCard/ProductPrice.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 const sizeConfig = {
     xs: {
         font: "xs",
@@ -77,14 +78,19 @@ const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
                 });
             }
         };
-        if (isOpen) {
-            updatePosition();
-            window.addEventListener("resize", updatePosition);
-            window.addEventListener("scroll", updatePosition, true); // listen to scroll on every scrollable ancestor
-        }
+        if (!isOpen)
+            return;
+        updatePosition();
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updatePosition);
+        window.addEventListener("resize", onReposition);
+        window.addEventListener("scroll", onReposition, {
+            capture: true, // every scrollable ancestor, not just the window
+            passive: true,
+        });
         return () => {
-            window.removeEventListener("resize", updatePosition);
-            window.removeEventListener("scroll", updatePosition, true);
+            onReposition.cancel();
+            window.removeEventListener("resize", onReposition);
+            window.removeEventListener("scroll", onReposition, true);
         };
     }, [isOpen]);
     (0, react_1.useEffect)(() => {

package/dist/Components/ProductCard/ProductReview.d.ts

@@ -5,4 +5,3 @@ type ProductReviewProps = {
 };
 declare const ProductReview: ({ rating, reviewCount, mb }: ProductReviewProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductReview;
-//# sourceMappingURL=ProductReview.d.ts.map