pixelize-design-library 3.0.1-beta.1 → 3.1.1

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

@@ -0,0 +1,61 @@
+import { type ChartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
+/** One organization in the switcher's list; `id` is matched against `value` to find the active one. */
+export interface OrgOption {
+    /** Unique key; compared with `value` to mark the active organization and passed to `onChange`. */
+    id: string | number;
+    /** Organization display name. */
+    name: string;
+    /** Optional subtitle, e.g. the user's role/designation in that org. */
+    role?: string;
+    /** Optional logo image URL. Falls back to an initial-based avatar. */
+    logoUrl?: string;
+}
+/** Trigger size; looked up in a fixed sizeMap for height, avatar and font sizing. */
+export type OrgSwitcherSize = "sm" | "md" | "lg";
+/** Trigger layout: avatar + name + chevron ("full"), avatar + chevron only ("avatar"), or "auto" to switch at the `md` breakpoint. */
+export type OrgSwitcherDisplay = "full" | "avatar" | "auto";
+/** Session-scoped org switcher (trigger+popover) — not an admin screen; see OrganizationDetails for create/rename/delete/default. Closed prop list, no ...rest/ref on the trigger button. */
+export interface OrgSwitcherProps {
+    /** Organizations to choose from. */
+    organizations: OrgOption[];
+    /** id of the currently active organization. */
+    value?: string | number;
+    /** Not fired when the clicked org already matches value — only on an actual change. */
+    onChange: (id: string | number, org: OrgOption) => void;
+    /** Shows an inline spinner and disables interaction (e.g. while switching). */
+    isLoading?: boolean;
+    /** Force the search box on/off. Auto-enabled when there are many orgs. */
+    isSearchable?: boolean;
+    /** Org count at/above which search auto-appears. Default 6. */
+    searchThreshold?: number;
+    /** Trigger styling. "ghost" suits a navbar; "outline"/"subtle" for forms. */
+    triggerVariant?: "ghost" | "outline" | "subtle";
+    /** Default "md". */
+    size?: OrgSwitcherSize;
+    /** Max width of the trigger label before truncation. */
+    maxWidth?: string;
+    /** Min width of the dropdown panel. */
+    menuMinWidth?: string;
+    /** Shown when no org is selected. */
+    placeholder?: string;
+    /** Names the trigger; the shown organization (or placeholder) is appended, so the name always holds the visible text. */
+    ariaLabel?: string;
+    /** Show the role subtitle inside the dropdown rows. Default true. */
+    showRole?: boolean;
+    /** "avatar" shows only the org avatar and a small chevron, name moves to the accessible name and a tooltip; "auto" is avatar below `md`, full from `md` up. Default "full". */
+    display?: OrgSwitcherDisplay;
+}
+export declare const AVATAR_COLORS: readonly string[];
+/** Chart hues are tuned to sit apart from each other, not to carry a label. */
+export declare const AVATAR_INK: string;
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
+export declare const avatarColor: (seed: string, mode?: ChartMode) => string;
+/**
+ * Fallback-avatar initials, up to 2 characters. A single letter reads well for one
+ * org but collides constantly across a real list — two orgs both starting with
+ * "P" render the identical circle, distinguishable only by the hashed color.
+ * A multi-word name takes one letter each word ("pixelize default" -> "PD"); a
+ * single word takes its own first two letters ("Default1" -> "DE") so a
+ * one-word org still gets a distinct-looking mark instead of falling back to one.
+ */
+export declare const orgInitial: (name: string) => string;

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orgInitial = exports.avatarColor = exports.AVATAR_INK = exports.AVATAR_COLORS = void 0;
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
+exports.AVATAR_COLORS = [
+    ...chartColorsFromTheme_1.CATEGORICAL_SERIES.light,
+    ...chartColorsFromTheme_1.CATEGORICAL_SERIES.dark,
+];
+/** Chart hues are tuned to sit apart from each other, not to carry a label. */
+exports.AVATAR_INK = neutrals_1.neutralTokens.white;
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
+const avatarColor = (seed, mode = "light") => {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i += 1) {
+        hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const ramp = chartColorsFromTheme_1.CATEGORICAL_SERIES[mode];
+    const hue = ramp[Math.abs(hash) % ramp.length];
+    return (0, statusTone_1.resolveAvatarFill)(hue);
+};
+exports.avatarColor = avatarColor;
+/**
+ * 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

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

package/dist/Components/OrganizationDetails/CreateOrgModal.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const Button_1 = __importDefault(require("../Button/Button"));
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const EMPTY = {
+    company_name: "",
+    company_address: "",
+    phone: "",
+};
+const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [values, setValues] = (0, react_1.useState)(EMPTY);
+    const [errors, setErrors] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            setValues(EMPTY);
+            setErrors({});
+        }
+    }, [isOpen]);
+    const setField = (key, value) => {
+        setValues((prev) => ({ ...prev, [key]: value }));
+        if (errors[key])
+            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 = (_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 && (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: (_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.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), 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

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

package/dist/Components/OrganizationDetails/DeleteOrgModal.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const ConfirmDialog_1 = __importDefault(require("../ConfirmDialog/ConfirmDialog"));
+const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    return ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }) }));
+};
+exports.default = DeleteOrgModal;

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { OrganizationDetailsProps } from "./OrganizationDetailsProps";
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher. */
+declare const OrganizationDetails: React.FC<OrganizationDetailsProps>;
+export default OrganizationDetails;

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -0,0 +1,181 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const 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 planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
+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 activationKey_1 = require("../Common/activationKey");
+const DEFAULT_LABELS = {
+    greeting: "Hello, User!",
+    manageSubtitle: "Manage your organizations",
+    organizationDetails: "Organization Details",
+    createNewOrganization: "Create New Organization",
+    createOrganization: "Create Organization",
+    activeOrganizations: "Active Organizations",
+    invitedOrganizations: "Invited Organizations",
+    setAsDefault: "Set as Default",
+    settingDefault: "Setting...",
+    default: "Default",
+    owner: "Owner",
+    pending: "Pending",
+    accept: "Accept",
+    accepting: "Accepting...",
+    decline: "Decline",
+    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",
+    companyAddress: "Company Address",
+    phone: "Phone",
+    cancel: "Cancel",
+    submit: "Submit",
+    requiredField: "This field is required",
+    invalidPhone: "Phone number must be at least 8 digits",
+    confirmDeletion: "Confirm Deletion",
+    deleteConfirmText: "Are you sure you want to delete this Organization?",
+    copyright: "Pixelize Corp. All rights reserved.",
+    termsOfService: "Terms of Service",
+};
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher. */
+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);
+    // --- 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 errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    const warningTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.warning);
+    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 primarySolid = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const primaryTile = (0, planeStep_1.bandOn)(primary50, surface);
+    const onPrimaryTile = (0, accentText_1.accentTextOnCanvas)(colors.primary, primaryTile);
+    const cardSx = {
+        backgroundColor: surface,
+        borderRadius: "xl",
+        border: "1px solid",
+        borderColor: border,
+        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;
+        const isSwitching = switchingOrgIds.includes(item.orgId);
+        // 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: (0, motion_1.transitionFor)(["border-color", "box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)(), _hover: {
+                borderColor: colors.primary[300],
+                boxShadow: "lg",
+                transform: "translateY(-3px)",
+            }, 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: primaryTile, color: onPrimaryTile, 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: (0, motion_1.transitionFor)(["color", "gap"]), sx: (0, motion_2.reducedMotionSx)(), role: "button", tabIndex: 0, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: (0, activationKey_1.onActivationKey)(() => 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: onPrimaryTile, bg: primaryTile }, 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) => {
+        const isResponding = respondingOrgIds.includes(item.orgId);
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: (0, motion_1.transitionFor)(["box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)(), _hover: {
+                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: 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",
+        gridTemplateColumns: {
+            base: "1fr",
+            md: "repeat(2, 1fr)",
+            lg: "repeat(3, 1fr)",
+        },
+        gap: 3,
+        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: primarySolid.fill, color: primarySolid.color, 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 }), userName ? (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "xs", name: userName, src: userAvatarUrl }) : null] }), (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 () => {
+                    if (deleteOrgId !== null) {
+                        await (onDeleteOrganization === null || onDeleteOrganization === void 0 ? void 0 : onDeleteOrganization(deleteOrgId));
+                    }
+                    setDeleteOrgId(null);
+                }, labels: labels })] }));
+};
+exports.default = OrganizationDetails;

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

@@ -0,0 +1,188 @@
+import { ReactNode } from "react";
+/** One organization row — active or invited — rendered as a card in OrganizationDetails' grid. */
+export type OrganizationItem = {
+    /** Unique per card (React key); passed to every per-organization callback and matched against the `*OrgIds` spinner arrays. */
+    orgId: number;
+    /** Card title; seeds the inline rename field, and renames are sent trimmed through `onEditOrganization`. */
+    company_name: string;
+    /** Invited cards only: shown as a line with a globe icon; ignored on active cards. */
+    company_url?: string;
+    /** 1 when this org is the user's default org. */
+    default: number;
+    /** @deprecated Ignored; kept so existing callers still compile. Active vs. invited comes from which array the item is in. */
+    uiInvite?: number;
+    /** Distinct from `default` above — only gates delete-protection, not the Default badge/set-default flow. */
+    defaultOrg: number;
+    /** Shown as a tag on active cards; "Super Admin" is what `canRename` and `canDelete` default to allowing. */
+    roleName?: string;
+    /** True when the current user owns this org; the app computes ownership. */
+    isOwner?: boolean;
+    /** Overrides the role-name check for rename; omitted, defaults to roleName === "Super Admin". */
+    canRename?: boolean;
+    /** Same default-if-omitted as canRename; defaultOrg === 1 still blocks delete regardless. */
+    canDelete?: boolean;
+    /**
+     * Why delete is unavailable for this organization, shown on the disabled
+     * control. Falls back to `labels.protectedOrganization` when not supplied.
+     */
+    deleteDisabledReason?: string;
+};
+/** Local form state for CreateOrgModal — the shape onSubmit receives when the create form is confirmed. */
+export type CreateOrgFormValues = {
+    /** Organization name entered in the create form; required, and trimmed before submit. */
+    company_name: string;
+    /** Address entered in the create form; required, and trimmed before submit. */
+    company_address: string;
+    /** Trimmed phone; the built-in form requires it with at least 8 digits even though it is typed optional. */
+    phone?: string;
+    /** @deprecated Dead — never populated by the built-in CreateOrgModal, no known consumer usage. */
+    default?: number;
+    /** @deprecated Dead — never populated by the built-in CreateOrgModal, no known consumer usage. */
+    defaultOrg?: number;
+};
+/** All copy in OrganizationDetails is overridable here; unset fields fall back to its built-in DEFAULT_LABELS. */
+export type OrganizationDetailsLabels = {
+    /** Header title, default "Hello, User!"; when `userName` is set, "User" is replaced by that name. */
+    greeting?: string;
+    /** Header subtitle under the greeting. Default "Manage your organizations". */
+    manageSubtitle?: string;
+    /** Not rendered by the current UI. */
+    organizationDetails?: string;
+    /** Header button that opens the create modal. Default "Create New Organization". */
+    createNewOrganization?: string;
+    /** Create modal title and the empty-state button. Default "Create Organization". */
+    createOrganization?: string;
+    /** Heading of the active organizations section. Default "Active Organizations". */
+    activeOrganizations?: string;
+    /** Heading of the invitations section. Default "Invited Organizations". */
+    invitedOrganizations?: string;
+    /** Link on a non-default active card that calls `onSetDefault`. Default "Set as Default". */
+    setAsDefault?: string;
+    /** Text beside the spinner while the card's id is in `switchingOrgIds`. Default "Setting...". */
+    settingDefault?: string;
+    /** Badge on the card where `default` is 1. Default "Default". */
+    default?: string;
+    /** Tag shown when `isOwner` is true. Default "Owner". */
+    owner?: string;
+    /** Badge on invited cards. Default "Pending". */
+    pending?: string;
+    /** Accept button on invited cards. Default "Accept". */
+    accept?: string;
+    /** Accept button text while the id is in `respondingOrgIds`. Default "Accepting...". */
+    accepting?: string;
+    /** Decline button on invited cards. Default "Decline". */
+    decline?: string;
+    /** Accessible name of the delete icon, and its tooltip on an unprotected card. Default "Delete Organization". */
+    deleteOrganization?: string;
+    /** Tooltip on a disabled delete icon when `deleteDisabledReason` is not set. Default "Protected organization". */
+    protectedOrganization?: string;
+    /** Confirm button in the delete modal. Default "Delete". */
+    delete?: string;
+    /** Accessible name and tooltip of the rename pencil. Default "Edit organization name". */
+    editOrganization?: string;
+    /** Accessible name of the inline rename save button. Default "Save". */
+    save?: string;
+    /** Not rendered by the current UI. */
+    saving?: string;
+    /** Error shown when a rename is saved blank. Default "Organization name cannot be empty". */
+    emptyNameError?: string;
+    /** Empty-state title when there are no active or invited organizations. Default "No organizations found". */
+    noOrganizationsTitle?: string;
+    /** Empty-state description under the title. */
+    noOrganizationsDescription?: string;
+    /** Create form field label. Default "Company Name". */
+    companyName?: string;
+    /** Create form field label. Default "Company Address". */
+    companyAddress?: string;
+    /** Create form field label. Default "Phone". */
+    phone?: string;
+    /** Cancel button in the create and delete modals and the rename cancel button. Default "Cancel". */
+    cancel?: string;
+    /** Submit button of the create form. Default "Submit". */
+    submit?: string;
+    /** Create form error for an empty required field. Default "This field is required". */
+    requiredField?: string;
+    /** Create form error for a phone with fewer than 8 digits. */
+    invalidPhone?: string;
+    /** Delete modal title. Default "Confirm Deletion". */
+    confirmDeletion?: string;
+    /** Delete modal body question. */
+    deleteConfirmText?: string;
+    /** Not rendered by the built-in UI; put footer text in `footerSlot`. */
+    copyright?: string;
+    /** Not rendered by the built-in UI; put footer links in `footerSlot`. */
+    termsOfService?: string;
+};
+/** Payload for the public onCreateOrganization callback — company_address/phone optional here, unlike CreateOrgFormValues. */
+export interface CreateOrganizationValues {
+    /** Organization name, trimmed; required by the built-in form. */
+    company_name: string;
+    /** Address, trimmed; the built-in form requires it. */
+    company_address?: string;
+    /** Trimmed phone; the built-in form requires 8 or more digits. */
+    phone?: string;
+}
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher (see OrgSwitcher for picking the active org). */
+export interface OrganizationDetailsProps {
+    /** Organizations the user belongs to; each renders a card with rename, delete and set-default controls. */
+    activeOrganizations: OrganizationItem[];
+    /** Pending invitations; each renders a card with Accept and Decline buttons. */
+    invitedOrganizations: OrganizationItem[];
+    /** Replaces both sections with six skeleton cards while true. Defaults to false. */
+    isLoading?: boolean;
+    /** Puts the create modal's submit button into its loading state. Defaults to false. */
+    isCreating?: boolean;
+    /** orgIds currently switching to default (shows a spinner on that card) */
+    switchingOrgIds?: number[];
+    /** orgIds currently accepting/declining an invite (shows a spinner on that card) */
+    respondingOrgIds?: number[];
+    /** orgIds currently saving a renamed organization (shows a spinner on that card) */
+    editingOrgIds?: number[];
+    /** Greets the signed-in user in the header and names their avatar; no avatar renders without it. */
+    userName?: string;
+    /** Avatar photo; initials from `userName` show when it is missing or fails to load. */
+    userAvatarUrl?: string;
+    /** Not awaited internally despite the Promise signature — drive switchingOrgIds yourself. */
+    onSetDefault?: (orgId: number) => void | Promise<void>;
+    /** Same as onSetDefault — not awaited internally; respondingOrgIds is entirely consumer-managed. */
+    onAcceptInvite?: (orgId: number) => void | Promise<void>;
+    /** Fires with the invitation's orgId on Decline; the button has no built-in loading state. */
+    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>;
+    /**
+     * 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>;
+    /** Rejecting/throwing here leaves the modal open with no built-in error UI — same for onDeleteOrganization/onEditOrganization; show your own toast. */
+    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>;
+    /** Back icon renders only when this is provided, not merely disabled when omitted. */
+    onBack?: () => void;
+    /** Rendered below the sections, above the modals; use it for copyright or terms links. */
+    footerSlot?: ReactNode;
+    /** Partial copy overrides; unset keys keep the English defaults. */
+    labels?: OrganizationDetailsLabels;
+}
+/** Props for the internal create-org modal; `labels` needs only the subset of OrganizationDetailsLabels it renders. */
+export interface CreateOrgModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    isLoading?: boolean;
+    onSubmit: (values: CreateOrgFormValues) => void | Promise<void>;
+    labels: Required<Pick<OrganizationDetailsLabels, "createOrganization" | "companyName" | "companyAddress" | "phone" | "cancel" | "submit" | "requiredField" | "invalidPhone">>;
+}
+/** Props for the internal delete-confirm modal; same narrowed-labels pattern as CreateOrgModalProps. */
+export interface DeleteOrgModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    isLoading?: boolean;
+    onConfirm: () => void;
+    labels: Required<Pick<OrganizationDetailsLabels, "confirmDeletion" | "deleteConfirmText" | "cancel" | "delete">>;
+}

package/dist/Components/OrganizationDetails/OrganizationDetailsProps.js

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

package/dist/Components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,4 @@
+import type { PageHeaderProps } from "./PageHeaderProps";
+/** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
+declare const PageHeader: ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize, actionsLayout, "data-testid": testId, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default PageHeader;

package/dist/Components/PageHeader/PageHeader.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const TITLE_STYLES = {
+    md: { fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em" },
+    lg: { fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.2 },
+    xl: { fontSize: { base: "2xl", md: "3xl" }, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.2 },
+};
+/** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
+const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize = "md", actionsLayout = "auto", "data-testid": testId, ...rest }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const wraps = actionsLayout === "auto";
+    const stacked = actionsLayout === "stacked";
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { ...rest, direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", align: stacked ? "flex-start" : { base: "flex-start", md: "center" }, direction: stacked ? "column" : { base: "column", md: "row" }, wrap: wraps ? "wrap" : "nowrap", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "center", minW: 0, flex: wraps ? { base: "0 1 auto", md: "1 1 16rem" } : undefined, children: [leading && (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, children: leading }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h1", ...TITLE_STYLES[titleSize], color: colors.header[900], children: title }), titleAddon] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && ((0, jsx_runtime_1.jsx)(react_1.Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: wraps ? undefined : 0, children: actions }))] }), tabs && (0, jsx_runtime_1.jsx)(react_1.Box, { children: tabs })] }));
+};
+exports.default = PageHeader;