varminer-app-header 2.6.1 → 2.6.3

package/dist/AppHeader.js

@@ -0,0 +1,506 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
+import MailIcon from "@mui/icons-material/Mail";
+import MenuIcon from "@mui/icons-material/Menu";
+import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import MoreIcon from "@mui/icons-material/MoreVert";
+import NotificationsActiveOutlined from "@mui/icons-material/NotificationsActiveOutlined";
+import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import { AppBar, Avatar, Badge, Box, Divider, IconButton, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, Menu, MenuItem, styled, Toolbar, Typography, } from "@mui/material";
+import { deepOrange } from "@mui/material/colors";
+import React from "react";
+import { useDrawer } from "./DrawerContext";
+import { getUserDataFromStorage, getNotificationCountFromStorage, getMessageCountFromStorage, getI18nLocaleFromStorage, setI18nLocaleToStorage, getAllDataFromStorage, fetchProfilePictureAsBlobUrl, getAccessTokenForRequest } from "./utils/localStorage";
+import { getTranslations } from "./utils/translations";
+import LanguageSelector from "./LanguageSelector";
+import "./styles/Header.scss";
+const DEFAULT_ROUTES = {
+    settings: "/account/overview",
+    profile: "/user/profile",
+    logout: "/user/login",
+};
+const AppHeader = ({ language: languageProp, accessToken: accessTokenProp, objectStoreUrl }) => {
+    // Get initial language from props, URL, localStorage, or default to 'en'
+    const getInitialLanguage = () => {
+        // Priority 1: Props
+        if (languageProp) {
+            setI18nLocaleToStorage(languageProp);
+            return languageProp;
+        }
+        // Priority 2: URL path - pattern is /:locale/base-name/...
+        const currentPath = window.location.pathname;
+        const localePattern = /^\/(en|es)(\/|$)/;
+        const localeMatch = currentPath.match(localePattern);
+        if (localeMatch && localeMatch[1]) {
+            const urlLocale = localeMatch[1];
+            setI18nLocaleToStorage(urlLocale);
+            return urlLocale;
+        }
+        // Priority 3: localStorage
+        const storedLocale = getI18nLocaleFromStorage();
+        if (storedLocale && (storedLocale === 'en' || storedLocale === 'es')) {
+            return storedLocale;
+        }
+        // Default
+        return 'en';
+    };
+    const [currentLanguage, setCurrentLanguage] = React.useState(getInitialLanguage);
+    const t = getTranslations(currentLanguage);
+    const { isDrawerOpen, toggleDrawer } = useDrawer();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
+    const [user, setUser] = React.useState(() => {
+        const allData = getAllDataFromStorage();
+        let userName = "";
+        let userEmail = "";
+        let userRole = "";
+        const buildNameFromFirstLast = (obj) => {
+            if (!obj || typeof obj !== "object")
+                return "";
+            const first = (obj.firstName ?? obj.given_name ?? obj.first_name);
+            const last = (obj.lastName ?? obj.family_name ?? obj.last_name);
+            return [first, last].filter(Boolean).join(" ").trim();
+        };
+        // Prefer getUserDataFromStorage first (IAM firstName+lastName or persist:userdb name)
+        const storedUser = getUserDataFromStorage();
+        if (storedUser) {
+            userName = storedUser.name || "";
+            userEmail = userEmail || storedUser.email || "";
+            userRole = userRole || storedUser.role || "";
+        }
+        // Then enrich from decoded token (email from sub; name only if token has name/given_name/family_name, never use sub as name)
+        if (allData.decodedToken) {
+            const token = allData.decodedToken;
+            userEmail = userEmail || token.sub || token.email || "";
+            const tokenName = token.name || buildNameFromFirstLast(token);
+            userName = userName || (tokenName || "");
+            userRole = userRole || token.role || "";
+        }
+        if (allData.auth) {
+            const auth = allData.auth;
+            userEmail = userEmail || auth.email || auth.sub || "";
+            userName = userName || auth.name || buildNameFromFirstLast(auth) || "";
+            userRole = userRole || auth.role || auth.activeRole || "";
+        }
+        if (allData.userDetails) {
+            const userDetails = allData.userDetails.user
+                || allData.userDetails.data
+                || allData.userDetails;
+            const details = userDetails;
+            if (details) {
+                userEmail = userEmail || details.email || details.emailAddress || "";
+                userName = userName || details.name || details.fullName || buildNameFromFirstLast(details) || "";
+                userRole = userRole || details.role || details.userRole || "";
+            }
+        }
+        if (allData.user) {
+            const u = allData.user.user
+                || allData.user.data
+                || allData.user.currentUser
+                || allData.user;
+            const userData = u;
+            if (userData) {
+                userEmail = userEmail || userData.email || userData.emailAddress || "";
+                userName = userName || userData.name || userData.fullName || buildNameFromFirstLast(userData) || "";
+                userRole = userRole || userData.role || userData.userRole || "";
+            }
+        }
+        if (allData.profile) {
+            const p = allData.profile.user
+                || allData.profile.data
+                || allData.profile;
+            const profileData = p;
+            if (profileData) {
+                userEmail = userEmail || profileData.email || profileData.emailAddress || "";
+                userName = userName || profileData.name || profileData.fullName || buildNameFromFirstLast(profileData) || "";
+                userRole = userRole || profileData.role || profileData.userRole || "";
+            }
+        }
+        const avatarSrc = storedUser?.avatar ??
+            allData.auth?.avatar ??
+            allData.profile?.avatar;
+        const initialsVal = storedUser?.initials ??
+            allData.auth?.initials ??
+            allData.profile?.initials;
+        return {
+            name: userName || "",
+            email: userEmail || "",
+            role: userRole || "",
+            avatar: typeof avatarSrc === "string" ? avatarSrc : undefined,
+            initials: typeof initialsVal === "string" ? initialsVal : undefined,
+        };
+    });
+    const [notificationCount, setNotificationCount] = React.useState(() => {
+        const count = getNotificationCountFromStorage();
+        return count !== null && count !== undefined ? count : 0;
+    });
+    const [messageCount, setMessageCount] = React.useState(() => {
+        return getMessageCountFromStorage() ?? undefined;
+    });
+    // State for profile picture blob URL
+    const [profilePictureBlobUrl, setProfilePictureBlobUrl] = React.useState(null);
+    // Fetch profile picture from API when component mounts or user data changes
+    React.useEffect(() => {
+        const fetchProfilePicture = async () => {
+            const token = accessTokenProp ?? getAccessTokenForRequest();
+            const blobUrl = await fetchProfilePictureAsBlobUrl(objectStoreUrl ?? undefined, token ?? undefined);
+            if (blobUrl) {
+                // Clean up previous blob URL if it exists
+                setProfilePictureBlobUrl((prevUrl) => {
+                    if (prevUrl) {
+                        URL.revokeObjectURL(prevUrl);
+                    }
+                    return blobUrl;
+                });
+            }
+        };
+        fetchProfilePicture();
+        // Cleanup function to revoke blob URL when component unmounts or effect re-runs
+        return () => {
+            setProfilePictureBlobUrl((prevUrl) => {
+                if (prevUrl) {
+                    URL.revokeObjectURL(prevUrl);
+                }
+                return null;
+            });
+        };
+    }, [accessTokenProp, objectStoreUrl]); // Refetch when accessToken or objectStoreUrl changes (e.g. after login or env switch)
+    React.useEffect(() => {
+        const allData = getAllDataFromStorage();
+        let userName = "";
+        let userEmail = "";
+        let userRole = "";
+        let userAvatar;
+        let userInitials;
+        const buildNameFromFirstLast = (obj) => {
+            if (!obj || typeof obj !== "object")
+                return "";
+            const first = (obj.firstName ?? obj.given_name ?? obj.first_name);
+            const last = (obj.lastName ?? obj.family_name ?? obj.last_name);
+            return [first, last].filter(Boolean).join(" ").trim();
+        };
+        const storedUser = getUserDataFromStorage();
+        if (storedUser) {
+            userName = storedUser.name || "";
+            userEmail = userEmail || storedUser.email || "";
+            userRole = userRole || storedUser.role || "";
+            userAvatar = storedUser.avatar;
+            userInitials = storedUser.initials;
+        }
+        if (allData.decodedToken) {
+            const token = allData.decodedToken;
+            userEmail = userEmail || token.sub || token.email || "";
+            const tokenName = token.name || buildNameFromFirstLast(token);
+            userName = userName || (tokenName || "");
+            userRole = userRole || token.role || "";
+        }
+        if (allData.auth) {
+            const auth = allData.auth;
+            userEmail = userEmail || auth.email || auth.sub || "";
+            userName = userName || auth.name || buildNameFromFirstLast(auth) || "";
+            userRole = userRole || auth.role || auth.activeRole || "";
+            userAvatar = userAvatar || auth.avatar || undefined;
+            userInitials = userInitials || auth.initials || undefined;
+        }
+        if (allData.userDetails) {
+            const userDetails = allData.userDetails.user
+                || allData.userDetails.data
+                || allData.userDetails;
+            const details = userDetails;
+            if (details) {
+                userEmail = userEmail || details.email || details.emailAddress || "";
+                userName = userName || details.name || details.fullName || buildNameFromFirstLast(details) || "";
+                userRole = userRole || details.role || details.userRole || "";
+                userAvatar = userAvatar || details.avatar || details.profilePicture || undefined;
+                userInitials = userInitials || details.initials || undefined;
+            }
+        }
+        if (allData.user) {
+            const u = allData.user.user
+                || allData.user.data
+                || allData.user.currentUser
+                || allData.user;
+            const userData = u;
+            if (userData) {
+                userEmail = userEmail || userData.email || userData.emailAddress || "";
+                userName = userName || userData.name || userData.fullName || buildNameFromFirstLast(userData) || "";
+                userRole = userRole || userData.role || userData.userRole || "";
+                userAvatar = userAvatar || userData.avatar || userData.profilePicture || undefined;
+                userInitials = userInitials || userData.initials || undefined;
+            }
+        }
+        if (allData.profile) {
+            const p = allData.profile.user
+                || allData.profile.data
+                || allData.profile;
+            const profileData = p;
+            if (profileData) {
+                userEmail = userEmail || profileData.email || profileData.emailAddress || "";
+                userName = userName || profileData.name || profileData.fullName || buildNameFromFirstLast(profileData) || "";
+                userRole = userRole || profileData.role || profileData.userRole || "";
+                userAvatar = userAvatar || profileData.avatar || profileData.profilePicture || undefined;
+                userInitials = userInitials || profileData.initials || undefined;
+            }
+        }
+        setUser({
+            name: userName || "",
+            email: userEmail || "",
+            role: userRole || "",
+            avatar: profilePictureBlobUrl || userAvatar,
+            initials: userInitials,
+        });
+        // Update online status
+        if (allData.auth?.isOnline !== undefined) {
+            setIsOnlineStatus(allData.auth.isOnline);
+        }
+        else if (allData.userDetails?.isOnline !== undefined) {
+            setIsOnlineStatus(allData.userDetails.isOnline);
+        }
+        else if (allData.user?.isOnline !== undefined) {
+            setIsOnlineStatus(allData.user.isOnline);
+        }
+        else if (allData.profile?.isOnline !== undefined) {
+            setIsOnlineStatus(allData.profile.isOnline);
+        }
+        const notifCount = getNotificationCountFromStorage();
+        setNotificationCount(notifCount !== null && notifCount !== undefined ? notifCount : 0);
+        const msgCount = getMessageCountFromStorage();
+        setMessageCount(msgCount ?? undefined);
+        // Initialize language from props if provided
+        if (languageProp && languageProp !== currentLanguage) {
+            setCurrentLanguage(languageProp);
+            setI18nLocaleToStorage(languageProp);
+        }
+    }, [languageProp, profilePictureBlobUrl]); // Also update when profile picture is fetched
+    const finalRoutes = DEFAULT_ROUTES;
+    // Get online status from localStorage dynamically
+    const [isOnlineStatus, setIsOnlineStatus] = React.useState(() => {
+        const allData = getAllDataFromStorage();
+        if (allData.auth?.isOnline !== undefined) {
+            return allData.auth.isOnline;
+        }
+        if (allData.userDetails?.isOnline !== undefined) {
+            return allData.userDetails.isOnline;
+        }
+        if (allData.user?.isOnline !== undefined) {
+            return allData.user.isOnline;
+        }
+        if (allData.profile?.isOnline !== undefined) {
+            return allData.profile.isOnline;
+        }
+        // Default to true if not specified (for backward compatibility)
+        return true;
+    });
+    const notificationCountValue = notificationCount;
+    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+    const OnlineBadge = styled(Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "var(--color-status-online, #44b700)",
+            color: "var(--color-status-online, #44b700)",
+            boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+            width: 12,
+            height: 12,
+            borderRadius: "50%",
+        },
+    }));
+    const OfflineBadge = styled(Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "var(--color-status-offline, #808080)",
+            color: "var(--color-status-offline, #808080)",
+            boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+            width: 12,
+            height: 12,
+            borderRadius: "50%",
+        },
+    }));
+    const handleProfileMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMobileMenuClose = () => {
+        setMobileMoreAnchorEl(null);
+    };
+    const handleMobileMenuOpen = (event) => {
+        setMobileMoreAnchorEl(event.currentTarget);
+    };
+    const open = Boolean(anchorEl);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSettingsClick = () => {
+        handleClose();
+        const path = finalRoutes.settings.startsWith('/')
+            ? finalRoutes.settings
+            : `/${finalRoutes.settings}`;
+        window.location.href = path;
+    };
+    const handleProfileClick = () => {
+        handleClose();
+        const path = finalRoutes.profile.startsWith('/')
+            ? finalRoutes.profile
+            : `/${finalRoutes.profile}`;
+        window.location.href = path;
+    };
+    const handleSignOutClick = () => {
+        handleClose();
+        try {
+            localStorage.clear();
+            sessionStorage.clear();
+        }
+        catch (e) {
+            console.warn("Clear storage on logout:", e);
+        }
+        const path = finalRoutes.logout.startsWith('/')
+            ? finalRoutes.logout
+            : `/${finalRoutes.logout}`;
+        window.location.href = path;
+    };
+    const menuId = "primary-account-menu";
+    const getInitials = () => {
+        if (user.initials)
+            return user.initials;
+        return user.name
+            .split(" ")
+            .map((n) => n[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2);
+    };
+    // Check if user has permission to see settings (Account Owner, Account Admin, or Global Admin)
+    const canViewSettings = React.useMemo(() => {
+        const allData = getAllDataFromStorage();
+        let userRole = "";
+        // Get role from decoded token
+        if (allData.decodedToken?.role) {
+            userRole = allData.decodedToken.role;
+        }
+        // Get role from auth data
+        else if (allData.auth?.role) {
+            userRole = allData.auth.role;
+        }
+        // Get role from user data
+        else if (user.role) {
+            userRole = user.role;
+        }
+        // Get role from userDetails
+        else if (allData.userDetails) {
+            const userDetails = allData.userDetails.user || allData.userDetails.data || allData.userDetails;
+            userRole = userDetails?.role || userDetails?.userRole || "";
+        }
+        // Get role from user
+        else if (allData.user) {
+            const userData = allData.user.user || allData.user.data || allData.user.currentUser || allData.user;
+            userRole = userData?.role || userData?.userRole || "";
+        }
+        // Normalize role for comparison (case-insensitive, handle spaces/underscores/hyphens)
+        const normalizedRole = userRole.toLowerCase().trim().replace(/[_\s-]+/g, " ");
+        const allowedRoles = [
+            "account owner",
+            "account admin",
+            "global admin"
+        ];
+        // Check for exact match or if role starts with allowed role
+        // This handles variations like "Account Owner", "ACCOUNT_OWNER", "Account-Owner", "Account Owner - Manager"
+        return allowedRoles.some(allowedRole => {
+            return normalizedRole === allowedRole || normalizedRole.startsWith(allowedRole + " ");
+        });
+    }, [user.role]);
+    const profileList = (_jsx(List, { className: "profile-menu-section", sx: {
+            width: "100%",
+            maxWidth: 360,
+            pointerEvents: "none",
+        }, component: "div", "aria-hidden": "true", tabIndex: -1, children: _jsxs(ListItem, { alignItems: "flex-start", className: "profile-menu-item", children: [_jsx(ListItemAvatar, { children: isOnlineStatus ? (_jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.online, "aria-label": `${t.online} status badge`, "data-testid": "online-badge", children: _jsx(Avatar, { sx: { bgcolor: deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) : (_jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.offline, "aria-label": `${t.offline} status badge`, "data-testid": "offline-badge", children: _jsx(Avatar, { sx: { bgcolor: deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) }), _jsx(ListItemText, { primary: _jsx(Typography, { className: "profile-name", component: "span", children: user.name || user.email }), secondary: _jsxs(React.Fragment, { children: [user.name && user.email ? (_jsx(Typography, { className: "profile-email", component: "p", children: user.email })) : null, _jsxs(Typography, { className: "profile-role", component: "p", children: [t.role, ": ", user.role] })] }) })] }) }));
+    const renderMenu = (_jsxs(Menu, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, slotProps: {
+            paper: {
+                elevation: 0,
+                sx: {
+                    overflow: "visible",
+                    filter: "drop-shadow(0px 2px 8px var(--color-menu-shadow, rgba(0,0,0,0.32)))",
+                    mt: 1.5,
+                    "& .MuiAvatar-root": {
+                        width: 32,
+                        height: 32,
+                        ml: -0.5,
+                        mr: 1,
+                    },
+                    "&::before": {
+                        content: '""',
+                        display: "block",
+                        position: "absolute",
+                        top: 0,
+                        right: 14,
+                        width: 10,
+                        height: 10,
+                        bgcolor: "background.paper",
+                        transform: "translateY(-50%) rotate(45deg)",
+                        zIndex: 0,
+                    },
+                },
+            },
+        }, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, children: [profileList, _jsx(Divider, {}), _jsxs(MenuItem, { onClick: handleProfileClick, children: [_jsx(ListItemIcon, { children: _jsx(PersonOutlineOutlinedIcon, { fontSize: "small" }) }), t.profile] }), canViewSettings && (_jsxs(MenuItem, { onClick: handleSettingsClick, children: [_jsx(ListItemIcon, { children: _jsx(SettingsOutlinedIcon, { fontSize: "small" }) }), t.accountSettings] })), _jsxs(MenuItem, { onClick: handleSignOutClick, children: [_jsx(ListItemIcon, { children: _jsx(LogoutOutlinedIcon, { fontSize: "small" }) }), t.signOut] })] }));
+    const mobileMenuId = "primary-account-menu-mobile";
+    const renderMobileMenu = (_jsxs(Menu, { anchorEl: mobileMoreAnchorEl, anchorOrigin: {
+            vertical: "top",
+            horizontal: "right",
+        }, id: mobileMenuId, keepMounted: true, transformOrigin: {
+            vertical: "top",
+            horizontal: "right",
+        }, open: isMobileMenuOpen, onClose: handleMobileMenuClose, children: [messageCount !== undefined && (_jsxs(MenuItem, { children: [_jsx(IconButton, { size: "large", "aria-label": `show ${messageCount} new mails`, sx: { color: 'var(--color-brand-primary, #1e2f97)' }, children: _jsx(Badge, { badgeContent: messageCount, color: "error", children: _jsx(MailIcon, {}) }) }), _jsx("p", { children: t.messages })] })), notificationCountValue > 0 && (_jsxs(MenuItem, { children: [_jsx(IconButton, { size: "large", "aria-label": `show ${notificationCountValue} new notifications`, sx: { color: 'var(--color-brand-primary, #1e2f97)' }, children: _jsx(Badge, { badgeContent: notificationCount, color: "error", children: _jsx(NotificationsActiveOutlined, {}) }) }), _jsx("p", { children: t.notifications })] })), _jsxs(MenuItem, { onClick: handleProfileMenuOpen, children: [_jsx(IconButton, { size: "large", "aria-label": "account of current user", "aria-controls": "primary-account-menu", "aria-haspopup": "true", sx: { color: 'var(--color-brand-primary, #1e2f97)' }, children: isOnlineStatus ? (_jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.online, "aria-label": `${t.online} status badge`, "data-testid": "online-badge", children: _jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) })) : (_jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.offline, "aria-label": `${t.offline} status badge`, "data-testid": "offline-badge", children: _jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) })) }), _jsx("p", { children: t.profile })] })] }));
+    return (_jsxs(Box, { sx: { height: 'var(--size-header-height, 65px)', flexShrink: 0 }, className: "app-header", children: [_jsx(AppBar, { elevation: 0, sx: {
+                    backgroundColor: "var(--color-header-bg, #ffffff)",
+                    boxShadow: 'none !important',
+                    position: 'fixed',
+                    zIndex: 'var(--size-header-zindex, 200)',
+                    height: 'var(--size-header-height, 65px)',
+                }, children: _jsxs(Toolbar, { sx: { minHeight: 'var(--size-header-height, 65px) !important', height: 'var(--size-header-height, 65px)' }, children: [_jsx(IconButton, { size: "large", "aria-label": "open drawer", sx: {
+                                mr: '10px !important',
+                                color: 'var(--color-brand-primary, #1e2f97)',
+                                padding: 0,
+                                '&:hover': {
+                                    backgroundColor: 'var(--color-brand-primary-hover-bg, rgba(30, 47, 151, 0.04))',
+                                }
+                            }, onClick: () => {
+                                toggleDrawer();
+                            }, children: isDrawerOpen ? (_jsx(MenuOpenIcon, { fontSize: "large" })) : (_jsx(MenuIcon, { fontSize: "large" })) }), _jsx(Box, { component: "div", sx: {
+                                display: { xs: "none", sm: "flex" },
+                                alignItems: 'center',
+                                height: 'var(--size-header-height, 65px)',
+                            }, "data-testid": "impactomics-logo-wrapper", children: _jsx(Box, { sx: {
+                                    width: '134px',
+                                    height: '23px',
+                                    backgroundImage: 'var(--image-logo-svg)',
+                                    backgroundSize: 'contain',
+                                    backgroundRepeat: 'no-repeat',
+                                    backgroundPosition: 'left center',
+                                }, role: "img", "aria-label": "Impactomics" }) }), _jsx(Box, { sx: { flexGrow: 1 } }), _jsxs(Box, { sx: { display: { xs: "none", md: "flex" }, alignItems: "center", gap: "4px" }, children: [_jsx(LanguageSelector, { currentLanguage: currentLanguage, onLanguageChange: (lang) => {
+                                        setCurrentLanguage(lang);
+                                        // The LanguageSelector component handles URL and localStorage updates
+                                    } }), _jsx(IconButton, { size: "large", "aria-label": notificationCountValue > 0 ? `show ${notificationCountValue} new notifications` : "show notifications", sx: {
+                                        color: 'var(--color-brand-primary, #1e2f97)',
+                                        '&:hover': {
+                                            backgroundColor: 'var(--color-brand-primary-hover-bg, rgba(30, 47, 151, 0.04))',
+                                        }
+                                    }, children: _jsx(Badge, { badgeContent: notificationCountValue > 0 ? notificationCountValue : 0, color: "error", children: _jsx(NotificationsActiveOutlined, {}) }) }), _jsx(IconButton, { size: "large", edge: "end", "aria-label": "account of current user", "aria-controls": menuId, "aria-haspopup": "true", onClick: handleProfileMenuOpen, sx: {
+                                        color: 'var(--color-brand-primary, #1e2f97)',
+                                        '&:hover': {
+                                            backgroundColor: 'var(--color-brand-primary-hover-bg, rgba(30, 47, 151, 0.04))',
+                                        }
+                                    }, children: isOnlineStatus ? (_jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.online, "aria-label": `${t.online} status badge`, "data-testid": "online-badge", children: _jsx(Avatar, { sx: {
+                                                bgcolor: deepOrange[500],
+                                                width: 20,
+                                                height: 20,
+                                                p: 1,
+                                            }, alt: user.name, title: user.name, src: user.avatar, sizes: "large", children: getInitials() }) })) : (_jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.offline, "aria-label": `${t.offline} status badge`, "data-testid": "offline-badge", children: _jsx(Avatar, { sx: {
+                                                bgcolor: deepOrange[500],
+                                                width: 20,
+                                                height: 20,
+                                                p: 1,
+                                            }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) })] }), _jsx(Box, { sx: { display: { xs: "flex", md: "none" } }, children: _jsx(IconButton, { size: "large", "aria-label": "show more", "aria-controls": mobileMenuId, "aria-haspopup": "true", onClick: handleMobileMenuOpen, sx: {
+                                    color: 'var(--color-brand-primary, #1e2f97)',
+                                    '&:hover': {
+                                        backgroundColor: 'var(--color-brand-primary-hover-bg, rgba(30, 47, 151, 0.04))',
+                                    }
+                                }, children: _jsx(MoreIcon, {}) }) })] }) }), renderMobileMenu, renderMenu] }));
+};
+export default AppHeader;

package/dist/DrawerContext.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const DrawerContext = React.createContext({
+    isDrawerOpen: false,
+    openDrawer: () => { },
+    closeDrawer: () => { },
+    toggleDrawer: () => { },
+});
+export const DrawerProvider = ({ children }) => {
+    const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+    const openDrawer = () => {
+        setIsDrawerOpen(true);
+    };
+    const closeDrawer = () => {
+        setIsDrawerOpen(false);
+    };
+    const toggleDrawer = () => {
+        setIsDrawerOpen((prev) => !prev);
+    };
+    return (_jsx(DrawerContext.Provider, { value: { isDrawerOpen, openDrawer, closeDrawer, toggleDrawer }, children: children }));
+};
+export const useDrawer = () => React.useContext(DrawerContext);

package/dist/LanguageSelector.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Button, Menu, MenuItem, ListItemIcon, ListItemText, Box, } from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { setI18nLocaleToStorage } from "./utils/localStorage";
+import GBFlag from "./asset/flags/gb.png";
+import ESFlag from "./asset/flags/es.png";
+const languages = [
+    { code: "en", name: "English", flag: GBFlag },
+    { code: "es", name: "Spanish", flag: ESFlag },
+];
+const LanguageSelector = ({ currentLanguage, onLanguageChange: _onLanguageChange, // reserved for parent callback; we reload the page on select
+ }) => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const currentLang = languages.find((lang) => lang.code === currentLanguage) || languages[0];
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleLanguageSelect = (languageCode) => {
+        // Update localStorage
+        setI18nLocaleToStorage(languageCode);
+        // Get current path
+        const currentPath = window.location.pathname;
+        const search = window.location.search;
+        const hash = window.location.hash;
+        // Find and replace existing locale /:locale/ with new locale
+        const newPath = currentPath.replace(/\/(en|es)\//, `/${languageCode}/`);
+        // Construct full URL and reload the page to apply translations
+        const fullUrl = newPath + search + hash;
+        window.location.href = fullUrl;
+        handleClose();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { onClick: handleClick, sx: {
+                    color: "var(--color-brand-primary, #1e2f97)",
+                    textTransform: "none",
+                    padding: "4px 8px",
+                    minWidth: "auto",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    "&:hover": {
+                        backgroundColor: "var(--color-brand-primary-hover-bg, rgba(30, 47, 151, 0.04))",
+                    },
+                }, "aria-label": "Select language", "aria-controls": open ? "language-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, children: [_jsx(Box, { component: "img", src: currentLang.flag, alt: currentLang.name, sx: {
+                            width: "20px",
+                            height: "15px",
+                            objectFit: "cover",
+                            borderRadius: "2px",
+                        } }), _jsx(Box, { component: "span", sx: {
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            marginLeft: "4px",
+                        }, children: currentLang.code.toUpperCase() }), _jsx(ArrowDropDownIcon, { sx: {
+                            fontSize: "20px",
+                            marginLeft: "2px",
+                            display: "flex",
+                            alignSelf: "center",
+                        } })] }), _jsx(Menu, { id: "language-menu", anchorEl: anchorEl, open: open, onClose: handleClose, anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "right",
+                }, transformOrigin: {
+                    vertical: "top",
+                    horizontal: "right",
+                }, slotProps: {
+                    paper: {
+                        sx: {
+                            mt: 1,
+                            minWidth: 150,
+                        },
+                    },
+                }, children: languages.map((language) => (_jsxs(MenuItem, { onClick: () => handleLanguageSelect(language.code), selected: language.code === currentLanguage, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "img", src: language.flag, alt: language.name, sx: {
+                                    width: "24px",
+                                    height: "18px",
+                                    objectFit: "cover",
+                                    borderRadius: "2px",
+                                } }) }), _jsx(ListItemText, { primary: language.name })] }, language.code))) })] }));
+};
+export default LanguageSelector;

package/dist/autoInjectTenantFallbackCss.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=autoInjectTenantFallbackCss.d.ts.map

package/dist/autoInjectTenantFallbackCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoInjectTenantFallbackCss.d.ts","sourceRoot":"","sources":["../src/autoInjectTenantFallbackCss.ts"],"names":[],"mappings":""}

package/dist/generatedTenantFallbackCss.d.ts

@@ -0,0 +1,3 @@
+declare const tenantFallbackCss = "/* ================================================================\r\n   TENANT MODULE CSS \u2014 varminer-app-header-npm-fe\r\n   Auto-generated by generate-tenant-css.js\r\n   Branch scanned: Development\r\n   Covers: CSS var() references, SCSS $variables, and hardcoded\r\n   brand values detected in component files.\r\n   ================================================================ */\r\n\r\n\r\n\n/* \u00E2\u201D\u20AC\u00E2\u201D\u20AC FONT FACES: local dev fallback (generate-tenant-css) \u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC\u00E2\u201D\u20AC */\n/* @font-face rules for local dev fallback.  In production the CDN\n   tenant.css @font-face declarations (built by generate-tenant-all.js)\n   load via injectTenantCss() and override these automatically.\n   To change the local font path, update LOCAL_FONT_BASE_URL above. */\n@font-face {\n  font-family: \"OpenSans-Light\";\n  src: url(\"/asset/font/OpenSans-Light.ttf\") format(\"truetype\");\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-LightItalic\";\n  src: url(\"/asset/font/OpenSans-LightItalic.ttf\") format(\"truetype\");\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-Regular\";\n  src: url(\"/asset/font/OpenSans-Regular.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-Italic\";\n  src: url(\"/asset/font/OpenSans-Italic.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-Medium\";\n  src: url(\"/asset/font/OpenSans-Medium.ttf\") format(\"truetype\");\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-MediumItalic\";\n  src: url(\"/asset/font/OpenSans-MediumItalic.ttf\") format(\"truetype\");\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-SemiBold\";\n  src: url(\"/asset/font/OpenSans-SemiBold.ttf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-SemiBoldItalic\";\n  src: url(\"/asset/font/OpenSans-SemiBoldItalic.ttf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-Bold\";\n  src: url(\"/asset/font/OpenSans-Bold.ttf\") format(\"truetype\");\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-BoldItalic\";\n  src: url(\"/asset/font/OpenSans-BoldItalic.ttf\") format(\"truetype\");\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-ExtraBold\";\n  src: url(\"/asset/font/OpenSans-ExtraBold.ttf\") format(\"truetype\");\n  font-weight: 800;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-ExtraBoldItalic\";\n  src: url(\"/asset/font/OpenSans-ExtraBoldItalic.ttf\") format(\"truetype\");\n  font-weight: 800;\n  font-style: italic;\n  font-display: swap;\n}\n/* \u00E2\u201D\u20AC\u00E2\u201D\u20AC END FONT FACES \u00E2\u201D\u20AC\u00E2\u201D\u20AC */\n\n/* \u2500\u2500 FONT FACES: local dev fallback (generate-tenant-css) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* @font-face rules for local dev fallback.  In production the CDN\r\n   tenant.css @font-face declarations (built by generate-tenant-all.js)\r\n   load via injectTenantCss() and override these automatically.\r\n   To change the local font path, update LOCAL_FONT_BASE_URL above. */\r\n@font-face {\r\n  font-family: \"OpenSans-Light\";\r\n  src: url(\"/asset/font/OpenSans-Light.ttf\") format(\"truetype\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-LightItalic\";\r\n  src: url(\"/asset/font/OpenSans-LightItalic.ttf\") format(\"truetype\");\r\n  font-weight: 300;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-Regular\";\r\n  src: url(\"/asset/font/OpenSans-Regular.ttf\") format(\"truetype\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-Italic\";\r\n  src: url(\"/asset/font/OpenSans-Italic.ttf\") format(\"truetype\");\r\n  font-weight: 400;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-Medium\";\r\n  src: url(\"/asset/font/OpenSans-Medium.ttf\") format(\"truetype\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-MediumItalic\";\r\n  src: url(\"/asset/font/OpenSans-MediumItalic.ttf\") format(\"truetype\");\r\n  font-weight: 500;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-SemiBold\";\r\n  src: url(\"/asset/font/OpenSans-SemiBold.ttf\") format(\"truetype\");\r\n  font-weight: 600;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-SemiBoldItalic\";\r\n  src: url(\"/asset/font/OpenSans-SemiBoldItalic.ttf\") format(\"truetype\");\r\n  font-weight: 600;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-Bold\";\r\n  src: url(\"/asset/font/OpenSans-Bold.ttf\") format(\"truetype\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-BoldItalic\";\r\n  src: url(\"/asset/font/OpenSans-BoldItalic.ttf\") format(\"truetype\");\r\n  font-weight: 700;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-ExtraBold\";\r\n  src: url(\"/asset/font/OpenSans-ExtraBold.ttf\") format(\"truetype\");\r\n  font-weight: 800;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-ExtraBoldItalic\";\r\n  src: url(\"/asset/font/OpenSans-ExtraBoldItalic.ttf\") format(\"truetype\");\r\n  font-weight: 800;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n/* \u2500\u2500 END FONT FACES \u2500\u2500 */\r\n\r\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   MODULE: app-header (varminer-app-header-npm-fe)\r\n   CSS custom-properties consumed by this micro-frontend.\r\n   These are default / fallback values overridden by tenant.css.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\r\n:root {\r\n  --color-border-header: #e5e9eb;\r\n  --color-brand-accent: #1aa7ee;\r\n  --color-brand-deep-navy: #0f1e75;\r\n  --color-brand-primary: #1e2f97;\r\n  --color-brand-primary-hover-bg: rgba(30, 47, 151, 0.04);\r\n  --color-header-bg: #ffffff;\r\n  --color-menu-bg-gradient: linear-gradient(180deg, #fff, #ddf7ff, #ddf7ff);\r\n  --color-menu-bg-gradient-end: #ddf7ff;\r\n  --color-menu-shadow: rgba(0,0,0,0.32);\r\n  --color-menu-text: #000;\r\n  --color-profile-email: rgba(0, 0, 0, 0.6);\r\n  --color-profile-name: #1e2f97;\r\n  --color-profile-role: rgba(0, 0, 0, 0.38);\r\n  --color-status-offline: #808080;\r\n  --color-status-online: #44b700;\r\n  --font-brand-regular: OpenSans-Regular, Roboto, sans-serif;\r\n  --font-brand-semibold: OpenSans-SemiBold, Roboto, sans-serif;\r\n  --image-logo-svg: url(\"asset/logo.svg\");\r\n  --size-header-height: 65px;\r\n  --size-header-zindex: 200;\r\n  --size-menu-width: 280px;\r\n\n  /* \u00E2\u201D\u20AC\u00E2\u201D\u20AC Auto-discovered on 2026-03-17 \u00E2\u201D\u20AC\u00E2\u201D\u20AC */\n  --color-white: #fff;\n  --color-hex-aacccc: #acc;\n  --color-selected-row: #ddf7ff;\n  --color-black: #000;\n  --color-text-secondary-alpha: rgba(0, 0, 0, 0.6);\n  --color-text-muted-alpha: rgba(0, 0, 0, 0.38);\n  --color-brand-primary-dark: #0b1659;\n  --color-primary-dark: #111c56;\n  --color-brand-navy-header: #13257b;\n  --color-brand-accent-hover: #0a8bcc;\n  --color-brand-switch: #657bfd;\n  --color-brand-secondary: #3f8cff;\n  --color-igv-gradient-start: #1e3c72;\n  --color-igv-gradient-end: #2a5298;\n  --color-bg-page: #f5f9ff;\n  --color-bg-title-section: #e6f2ff;\n  --color-bg-dialog: #f7fbff;\n  --color-bg-panel: #e3f4fd;\n  --color-bg-side-menu-hover: #e3f2fd;\n  --color-bg-subtle: #f5f5f5;\n  --color-bg-scrollbar-track: #f1f1f1;\n  --Grey-50: #ebeff5;\n  --color-border-blue: #b5e6ff;\n  --color-border-default: #dadada;\n  --color-border-sky-blue-300: #4fc4ff;\n  --color-border-light: #e4e4e4;\n  --color-border-chip: #bdbdbd;\n  --color-text-heading: #27323d;\n  --color-text-dark: #0f172a;\n  --color-text-input: #0a0a0a;\n  --color-text-muted-slate: #64748b;\n  --Grey-600: #586d81;\n  --Grey-400: #7c8fa3;\n  --color-status-success: #4caf50;\n  --color-status-success-dark: #2e7d32;\n  --color-status-warning: #ef6c00;\n  --color-status-error: #d32f2f;\n  --color-scrollbar-thumb: #1976d2;\n  --color-scrollbar-track: #e3edf7;\n  --color-side-menu-active-bg: #1565c0;\n  --color-column-rows-even: #edfbff;\n  --color-bg-error-row: #fcefef;\n  --color-bg-error-row-hover: #f9e0e0;\n  --color-border-error-row: #e78e8e;\n  --color-bg-warning-row: #fff5ed;\n  --color-bg-warning-row-hover: #ffe8d6;\n  --color-border-warning-row: #e8a87c;\n  --color-bg-success-row: #eff5ef;\n  --color-bg-success-row-hover: #e5ede5;\n  --color-shadow-dark: #b3b3b3;\n  --color-bg-success-toast: #edf7ed;\n  --color-bg-error-toast: #ffebee;\n  --color-text-success-toast: #1e4620;\n  --color-text-error-toast: #c62828;\n  --color-gene-type-uncertain: #5034ee;\n  --color-gene-type-candidate: #ff9800;\n  --color-gene-type-known: #2196f3;\n  --color-border-disabled: #ccc;\n  --color-scrollbar-handle: #888;\n  --color-text-placeholder: #666;\n  --color-scrollbar-handle-dark: #555;\n  --color-text-dark-secondary: #333;\n  --color-text-near-black: #222;\n  --color-hex-e0e0e0: #e0e0e0;\n  --color-hex-c0c0c0: #c0c0c0;\n  --color-hex-f8f9fa: #f8f9fa;\n  --color-brand-primary-active-bg: rgba(30, 47, 151, 0.08);\n  --color-chip-background: rgba(30, 47, 151, 0.12);\n  --color-border-brand-muted: rgba(30, 47, 151, 0.23);\n  --color-accent-hover-subtle: rgba(26, 167, 238, 0.04);\n  --color-accent-hover-bg: rgba(26, 167, 238, 0.08);\n  --color-accent-selected: rgba(26, 167, 238, 0.12);\n  --color-accent-selected-dark: rgba(26, 167, 238, 0.16);\n  --color-accent-light: rgba(26, 167, 238, 0.34);\n  --color-accent-border: rgba(26, 167, 238, 0.54);\n  --color-shadow-dialog: rgba(8, 37, 68, 0.18);\n  --color-shadow-card: rgba(10, 33, 62, 0.08);\n  --color-shadow-card-hover: rgba(10, 33, 62, 0.16);\n  --color-deep-navy-hover-bg: rgba(15, 30, 117, 0.08);\n  --color-shadow-body: rgba(15, 23, 42, 0.08);\n  --color-white-overlay: rgba(255, 255, 255, 0.1);\n  --color-action-hover-bg: rgba(0, 0, 0, 0.04);\n  --color-overlay-subtle: rgba(0, 0, 0, 0.10);\n  --color-divider: rgba(0, 0, 0, 0.12);\n  --color-overlay-medium: rgba(0, 0, 0, 0.14);\n  --color-shadow-light: rgba(0, 0, 0, 0.15);\n  --color-shadow-medium: rgba(0, 0, 0, 0.20);\n  --color-border-outline: rgba(0, 0, 0, 0.26);\n  --color-border-medium: rgba(0, 0, 0, 0.5);\n  --color-icon-default: rgba(0, 0, 0, 0.54);\n  --color-action-active: rgba(0, 0, 0, 0.56);\n  --color-border-dark: rgba(0, 0, 0, 0.7);\n  --color-text-primary-alpha: rgba(0, 0, 0, 0.87);\n\n  /* \u00E2\u201D\u20AC\u00E2\u201D\u20AC Auto-discovered on 2026-03-17 \u00E2\u201D\u20AC\u00E2\u201D\u20AC */\n  --color-header-accent: #aacccc;\n  --color-error-pink: #dc004e;\n  --color-text-disabled: #999999;\n  --color-overlay-40: rgba(0, 0, 0, 0.4);\n  --color-white-70: rgba(255, 255, 255, 0.7);\n  --color-white-90: rgba(255, 255, 255, 0.9);\n  --color-white-95: rgba(255, 255, 255, 0.95);\n  --color-success-90: rgba(76, 175, 80, 0.9);\n  --color-error-solid: rgba(211, 47, 47, 1);\n  --color-error-50: rgba(211, 47, 47, 0.5);\n  --color-rgba-000000: rgb(0,0,0);\n}\n";
+export default tenantFallbackCss;
+//# sourceMappingURL=generatedTenantFallbackCss.d.ts.map