@serhii.olishevskyi/docs 1.2.22 → 1.2.24

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
   TranslateText,
   TranslationDialog,
   TranslationEditProvider,
-  UserPopoverComponent_default,
+  UserPopoverComponent,
   UserRoleChipComponent,
   UserSettingsProvider,
   UserStatusChipComponent,
@@ -43,7 +43,7 @@ import {
   useTranslationEdit,
   useTranslationNamespace,
   useUserSettings
-} from "./chunk-4NEOJ5KZ.mjs";
+} from "./chunk-VFNVP7VE.mjs";
 
 // src/UI/components/inputs/TextFieldComponent.tsx
 import { useState } from "react";
@@ -477,208 +477,9 @@ var NumberInputComponent = ({
   );
 };
 
-// src/UI/components/inputs/UrlComponent.tsx
-import { useState as useState3 } from "react";
-import {
-  TextField as TextField2,
-  InputAdornment as InputAdornment3,
-  IconButton as IconButton3,
-  Tooltip as Tooltip2,
-  Popover,
-  Box as Box3,
-  Typography,
-  Button
-} from "@mui/material";
-import LinkIcon from "@mui/icons-material/Link";
-import LaunchIcon from "@mui/icons-material/Launch";
-import ContentCopyIcon2 from "@mui/icons-material/ContentCopy";
-import CheckIcon2 from "@mui/icons-material/Check";
-import EditNoteIcon from "@mui/icons-material/EditNote";
-import LockIcon2 from "@mui/icons-material/Lock";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function UrlComponent({
-  overrideNamespace,
-  label,
-  value,
-  onChange,
-  disabled = false,
-  readOnly = false,
-  required = false,
-  error = false,
-  helperText = "",
-  description = "",
-  fullWidth = true,
-  openInNewTab = true,
-  showLock = true,
-  lockTooltip = "Field is not editable",
-  sx
-}) {
-  const [copied, setCopied] = useState3(false);
-  const [anchorEl, setAnchorEl] = useState3(null);
-  const isViewMode = disabled || readOnly;
-  const currentUrl = typeof value === "object" && value !== null ? value.url || "" : value || "";
-  const currentTitle = typeof value === "object" && value !== null ? value.title || "" : "";
-  const getFormattedUrl = (val) => {
-    if (!val) return "";
-    const trimmed = val.trim();
-    if (trimmed.match(/^[a-zA-Z]+:\/\//)) {
-      return trimmed;
-    }
-    return `https://${trimmed}`;
-  };
-  const finalUrl = getFormattedUrl(currentUrl);
-  const targetAttribute = openInNewTab ? "_blank" : "_self";
-  const displayLabelText = currentTitle.trim() || currentUrl;
-  const handleUrlChange = (newUrl) => {
-    onChange?.({ url: newUrl, title: currentTitle });
-  };
-  const handleTitleChange = (newTitle) => {
-    onChange?.({ url: currentUrl, title: newTitle });
-  };
-  const handleCopy = (e) => {
-    e.stopPropagation();
-    if (!finalUrl) return;
-    navigator.clipboard.writeText(finalUrl);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  };
-  const handleOpenLink = (e) => {
-    e.stopPropagation();
-    if (finalUrl) {
-      window.open(finalUrl, targetAttribute, openInNewTab ? "noopener,noreferrer" : void 0);
-    }
-  };
-  const handleInputClick = (e) => {
-    if (isViewMode && finalUrl) {
-      handleOpenLink(e);
-    }
-  };
-  const handleOpenTitleMenu = (e) => {
-    e.stopPropagation();
-    setAnchorEl(e.currentTarget);
-  };
-  const handleCloseTitleMenu = () => {
-    setAnchorEl(null);
-  };
-  const isTitlePopoverOpen = Boolean(anchorEl);
-  const displayHelperText = error ? helperText : description || helperText;
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx3(
-      TextField2,
-      {
-        label: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace, children: label }),
-        type: isViewMode ? "text" : "url",
-        value: isViewMode ? displayLabelText : currentUrl,
-        onChange: (e) => handleUrlChange(e.target.value),
-        required,
-        error,
-        disabled,
-        margin: "dense",
-        helperText: displayHelperText,
-        fullWidth,
-        placeholder: "example.com",
-        sx: {
-          "& .MuiInputLabel-asterisk": {
-            color: "red",
-            fontSize: "1.5rem"
-          },
-          "& .MuiInputBase-input": {
-            color: isViewMode && finalUrl ? "primary.main" : void 0,
-            textDecoration: isViewMode && finalUrl ? "underline" : "none",
-            cursor: isViewMode && finalUrl ? "pointer" : void 0,
-            fontWeight: isViewMode && finalUrl ? 500 : void 0
-          },
-          ...sx
-        },
-        slotProps: {
-          htmlInput: {
-            readOnly,
-            onClick: handleInputClick
-          },
-          input: {
-            startAdornment: /* @__PURE__ */ jsx3(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx3(LinkIcon, { fontSize: "small", color: isViewMode && finalUrl ? "primary" : "action" }) }),
-            endAdornment: /* @__PURE__ */ jsxs3(InputAdornment3, { position: "end", sx: { gap: 0.5 }, children: [
-              !isViewMode && /* @__PURE__ */ jsx3(Tooltip2, { title: currentTitle ? `Title: "${currentTitle}"` : /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set link title" }), children: /* @__PURE__ */ jsx3(
-                IconButton3,
-                {
-                  size: "small",
-                  onClick: handleOpenTitleMenu,
-                  color: currentTitle ? "primary" : "default",
-                  children: /* @__PURE__ */ jsx3(EditNoteIcon, { fontSize: "small" })
-                }
-              ) }),
-              finalUrl && /* @__PURE__ */ jsx3(Tooltip2, { title: copied ? /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copied!" }) : /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copy link" }), children: /* @__PURE__ */ jsx3(IconButton3, { size: "small", onClick: handleCopy, color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ jsx3(CheckIcon2, { fontSize: "small" }) : /* @__PURE__ */ jsx3(ContentCopyIcon2, { fontSize: "small" }) }) }),
-              isViewMode && showLock && /* @__PURE__ */ jsx3(Tooltip2, { title: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ jsx3(
-                IconButton3,
-                {
-                  size: "small",
-                  disabled: true,
-                  edge: "end",
-                  "aria-label": "locked input",
-                  sx: {
-                    "&.Mui-disabled": {
-                      color: "text.secondary"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx3(LockIcon2, { fontSize: "small" })
-                }
-              ) }),
-              finalUrl && /* @__PURE__ */ jsx3(Tooltip2, { title: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Open link" }), children: /* @__PURE__ */ jsx3(IconButton3, { size: "small", onClick: handleOpenLink, children: /* @__PURE__ */ jsx3(LaunchIcon, { fontSize: "small", color: isViewMode ? "primary" : "action" }) }) })
-            ] })
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      Popover,
-      {
-        open: isTitlePopoverOpen,
-        anchorEl,
-        onClose: handleCloseTitleMenu,
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
-        },
-        slotProps: {
-          paper: { sx: { p: 2, width: 280 } }
-        },
-        children: [
-          /* @__PURE__ */ jsx3(Typography, { variant: "subtitle2", sx: { mb: 1, fontWeight: "bold" }, children: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Link Title (Anchor)" }) }),
-          /* @__PURE__ */ jsxs3(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: [
-            /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Specify the text to display instead of the URL address" }),
-            ":"
-          ] }),
-          /* @__PURE__ */ jsx3(
-            TextField2,
-            {
-              size: "small",
-              fullWidth: true,
-              placeholder: "e.g. Instruction",
-              value: currentTitle,
-              onChange: (e) => handleTitleChange(e.target.value),
-              autoFocus: true,
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  handleCloseTitleMenu();
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3(Box3, { sx: { display: "flex", justifyContent: "flex-end", mt: 1.5 }, children: /* @__PURE__ */ jsx3(Button, { size: "small", variant: "contained", onClick: handleCloseTitleMenu, children: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" }) }) })
-        ]
-      }
-    )
-  ] });
-}
-
 // src/UI/components/inputs/EmailInputComponent.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var EmailInputComponent = ({
   value = "",
@@ -691,7 +492,7 @@ var EmailInputComponent = ({
   onValidationChange,
   ...props
 }) => {
-  const [internalError, setInternalError] = useState4(null);
+  const [internalError, setInternalError] = useState3(null);
   const validateEmail = (val) => {
     if (disableValidation) return true;
     const stringVal = String(val ?? "").trim();
@@ -707,561 +508,48 @@ var EmailInputComponent = ({
     return isValid;
   };
   const handleChange = (e) => {
-    const newValue = e.target.value;
-    if (internalError) {
-      validateEmail(newValue);
-    }
-    if (onChange) {
-      onChange(e);
-    }
-  };
-  const handleBlur = (e) => {
-    validateEmail(e.target.value);
-    if (onBlur) {
-      onBlur(e);
-    }
-  };
-  const hasError = Boolean(externalError || internalError);
-  const displayHelperText = externalHelperText || internalError || void 0;
-  return /* @__PURE__ */ jsx4(
-    TextFieldComponent,
-    {
-      type: "email",
-      value,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      error: hasError,
-      helperText: displayHelperText,
-      ...props
-    }
-  );
-};
-
-// src/UI/components/data.display/UserAvatarComponent.tsx
-import { useState as useState5, useEffect as useEffect2, lazy, Suspense } from "react";
-import { Avatar, Tooltip as Tooltip3, Typography as Typography2 } from "@mui/material";
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var LazyUserPopover = lazy(() => import("./UserPopoverComponent-RAEPOSIE.mjs"));
-var getInitials = (name) => {
-  if (!name) return "?";
-  const parts = name.trim().split(" ");
-  if (parts.length >= 2) {
-    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
-  }
-  return name[0].toUpperCase();
-};
-var UserAvatarComponent = ({
-  userId = "",
-  avatarUrl = "",
-  displayName = "",
-  employeePost = "",
-  size = 40,
-  disableBorder = false,
-  disableShadow = false,
-  disablePopover = false,
-  disableTooltip = false,
-  sx = {}
-}) => {
-  const supabase = useSupabase();
-  const [anchorEl, setAnchorEl] = useState5(null);
-  const [hasInteracted, setHasInteracted] = useState5(false);
-  const [resolvedAvatarUrl, setResolvedAvatarUrl] = useState5(null);
-  const canShowPopover = !disablePopover && Boolean(userId);
-  useEffect2(() => {
-    let isMounted = true;
-    const resolveAvatar = async () => {
-      if (!avatarUrl) {
-        if (isMounted) setResolvedAvatarUrl(null);
-        return;
-      }
-      if (!avatarUrl.startsWith("http") && !avatarUrl.startsWith("data:")) {
-        try {
-          const { data } = await supabase.storage.from("user-media").createSignedUrl(avatarUrl, 3600);
-          if (isMounted) {
-            setResolvedAvatarUrl(data?.signedUrl || null);
-          }
-        } catch (err) {
-          console.error("Error resolving signed url for avatar:", err);
-          if (isMounted) setResolvedAvatarUrl(null);
-        }
-      } else {
-        if (isMounted) setResolvedAvatarUrl(avatarUrl);
-      }
-    };
-    resolveAvatar();
-    return () => {
-      isMounted = false;
-    };
-  }, [avatarUrl]);
-  const handleClick = (event) => {
-    event.stopPropagation();
-    event.preventDefault();
-    if (canShowPopover) {
-      setAnchorEl(event.currentTarget);
-      if (!hasInteracted) {
-        setHasInteracted(true);
-      }
-    }
-  };
-  const handleClose = (event) => {
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    setAnchorEl(null);
-  };
-  const isPopoverOpen = Boolean(anchorEl);
-  const initials = getInitials(displayName || "");
-  const getTooltip = /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(Typography2, { component: "div", variant: "caption", children: displayName }),
-    displayName && employeePost && /* @__PURE__ */ jsx5(Typography2, { component: "div", variant: "caption", children: employeePost })
-  ] });
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(Tooltip3, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ jsx5(
-      Avatar,
-      {
-        src: resolvedAvatarUrl || void 0,
-        alt: displayName || "User Avatar",
-        onClick: handleClick,
-        sx: {
-          width: size,
-          height: size,
-          fontSize: size * 0.4,
-          fontWeight: 600,
-          bgcolor: "primary.main",
-          color: "primary.contrastText",
-          cursor: canShowPopover ? "pointer" : void 0,
-          transition: "transform 0.2s ease, box-shadow 0.2s ease",
-          border: disableBorder ? "none" : "2px solid",
-          borderColor: "background.paper",
-          boxShadow: disableShadow ? "none" : 2,
-          "&:hover": {
-            transform: canShowPopover ? "scale(1.05)" : "none"
-          },
-          ...sx
-        },
-        children: !resolvedAvatarUrl && initials
-      }
-    ) }),
-    canShowPopover && hasInteracted && /* @__PURE__ */ jsx5(Suspense, { fallback: null, children: /* @__PURE__ */ jsx5(
-      LazyUserPopover,
-      {
-        userId,
-        anchorEl,
-        open: isPopoverOpen,
-        onClose: handleClose
-      }
-    ) })
-  ] });
-};
-
-// src/UI/components/data.display/MyAvatarComponent.tsx
-import { useState as useState6 } from "react";
-import { Avatar as Avatar2, Box as Box4, Popover as Popover2, Typography as Typography3, Skeleton } from "@mui/material";
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var getInitials2 = (name) => {
-  if (!name) return "?";
-  const parts = name.trim().split(" ");
-  if (parts.length >= 2) {
-    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
-  }
-  return name[0].toUpperCase();
-};
-var MyAvatarComponent = ({
-  size = 40,
-  disableBorder = false,
-  disableShadow = false,
-  disablePopover = false,
-  sx = {}
-}) => {
-  const { profile: userProfile, loading: isLoading } = useAuth();
-  const [anchorEl, setAnchorEl] = useState6(null);
-  const handlePopoverOpen = (event) => {
-    if (!disablePopover) {
-      setAnchorEl(event.currentTarget);
-    }
-  };
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
-  const isPopoverOpen = Boolean(anchorEl);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx6(
-      Skeleton,
-      {
-        variant: "circular",
-        width: size,
-        height: size,
-        sx: { display: "inline-block", flexShrink: 0, ...sx }
-      }
-    );
-  }
-  const initials = getInitials2(userProfile?.display_name || "");
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsx6(
-      Avatar2,
-      {
-        src: userProfile?.avatar_url || void 0,
-        alt: userProfile?.display_name || "User Avatar",
-        onMouseEnter: handlePopoverOpen,
-        onMouseLeave: handlePopoverClose,
-        sx: {
-          width: size,
-          height: size,
-          fontSize: size * 0.4,
-          fontWeight: 600,
-          bgcolor: "primary.main",
-          color: "primary.contrastText",
-          cursor: disablePopover ? void 0 : "pointer",
-          transition: "transform 0.2s ease, box-shadow 0.2s ease",
-          border: disableBorder ? "none" : "2px solid",
-          borderColor: "background.paper",
-          boxShadow: disableShadow ? "none" : 2,
-          "&:hover": {
-            transform: disablePopover ? "none" : "scale(1.05)"
-          },
-          ...sx
-        },
-        children: !userProfile?.avatar_url && initials
-      }
-    ),
-    !disablePopover && /* @__PURE__ */ jsx6(
-      Popover2,
-      {
-        id: `avatar-popover-${userProfile?.id}`,
-        open: isPopoverOpen,
-        anchorEl,
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "center"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "center"
-        },
-        onClose: handlePopoverClose,
-        disableRestoreFocus: true,
-        disableAutoFocus: true,
-        disableEnforceFocus: true,
-        sx: {
-          pointerEvents: "none",
-          mt: 1
-        },
-        slotProps: {
-          paper: {
-            sx: {
-              p: 1.5,
-              borderRadius: 2,
-              boxShadow: 3
-            }
-          }
-        },
-        children: /* @__PURE__ */ jsxs5(Box4, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx6(Typography3, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
-          userProfile?.email && /* @__PURE__ */ jsx6(Typography3, { variant: "caption", color: "text.secondary", children: userProfile.email })
-        ] })
-      }
-    )
-  ] });
-};
-
-// src/i18n/LanguageSelector.tsx
-import { useEffect as useEffect3, useState as useState7 } from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import {
-  Box as Box5,
-  Typography as Typography4,
-  CircularProgress,
-  IconButton as IconButton4,
-  Menu,
-  MenuItem,
-  Tooltip as Tooltip4
-} from "@mui/material";
-import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var LanguageSelector = () => {
-  const supabase = useSupabase();
-  const { i18n } = useTranslation2();
-  const [languages, setLanguages] = useState7([]);
-  const [loading, setLoading] = useState7(true);
-  const { changeLanguage } = useLocalization();
-  const { settings: userSettings, setLanguage } = useUserSettings();
-  const [anchorEl, setAnchorEl] = useState7(null);
-  const open = Boolean(anchorEl);
-  useEffect3(() => {
-    const fetchLanguages = async () => {
-      try {
-        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
-        if (error) throw error;
-        setLanguages(data || []);
-        if (userSettings.language) changeLanguage(userSettings.language);
-      } catch (err) {
-        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchLanguages();
-  }, []);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const handleSelectLanguage = (langCode) => {
-    changeLanguage(langCode);
-    setLanguage(langCode);
-    handleClose();
-  };
-  if (loading) {
-    return /* @__PURE__ */ jsx7(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
-  }
-  const rawCurrentLang = i18n.language || "uk";
-  const currentLangCode = rawCurrentLang.split("-")[0];
-  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx7(Tooltip4, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx7(
-      IconButton4,
-      {
-        onClick: handleClick,
-        size: "small",
-        "aria-controls": open ? "language-menu" : void 0,
-        "aria-haspopup": "true",
-        "aria-expanded": open ? "true" : void 0,
-        sx: {
-          p: 1,
-          borderRadius: 2,
-          transition: "background-color 0.2s",
-          "&:hover": {
-            backgroundColor: "action.hover"
-          }
-        },
-        children: currentLang?.svg_flag && /* @__PURE__ */ jsx7(
-          Box5,
-          {
-            sx: {
-              width: 24,
-              height: 16,
-              borderRadius: "3px",
-              overflow: "hidden",
-              flexShrink: 0,
-              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
-            },
-            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
-          }
-        )
-      }
-    ) }),
-    /* @__PURE__ */ jsx7(
-      Menu,
-      {
-        id: "language-menu",
-        anchorEl,
-        open,
-        onClose: handleClose,
-        slotProps: {
-          paper: {
-            elevation: 3,
-            sx: {
-              mt: 1,
-              minWidth: 150,
-              borderRadius: 2
-            }
-          }
-        },
-        transformOrigin: { horizontal: "right", vertical: "top" },
-        anchorOrigin: { horizontal: "right", vertical: "bottom" },
-        children: languages.map((lang) => {
-          const isSelected = lang.code === currentLangCode;
-          return /* @__PURE__ */ jsxs6(
-            MenuItem,
-            {
-              selected: isSelected,
-              onClick: () => handleSelectLanguage(lang.code),
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 1.5,
-                py: 1,
-                px: 2
-              },
-              children: [
-                /* @__PURE__ */ jsx7(
-                  Box5,
-                  {
-                    sx: {
-                      width: 22,
-                      height: 15,
-                      borderRadius: "2px",
-                      overflow: "hidden",
-                      flexShrink: 0,
-                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
-                      "& svg": { width: "100%", height: "100%", display: "block" }
-                    },
-                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
-                  }
-                ),
-                /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
-              ]
-            },
-            lang.code
-          );
-        })
-      }
-    )
-  ] });
-};
-var PublicLanguageSelector = () => {
-  const supabase = useSupabase();
-  const { i18n } = useTranslation2();
-  const { changeLanguage } = useLocalization();
-  const [languages, setLanguages] = useState7([]);
-  const [loading, setLoading] = useState7(true);
-  const [anchorEl, setAnchorEl] = useState7(null);
-  const open = Boolean(anchorEl);
-  useEffect3(() => {
-    const fetchLanguages = async () => {
-      try {
-        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
-        if (error) throw error;
-        setLanguages(data || []);
-      } catch (err) {
-        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchLanguages();
-  }, []);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const handleSelectLanguage = (langCode) => {
-    changeLanguage(langCode);
-    handleClose();
-  };
-  if (loading) {
-    return /* @__PURE__ */ jsx7(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
-  }
-  const rawCurrentLang = i18n.language || "uk";
-  const currentLangCode = rawCurrentLang.split("-")[0];
-  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx7(Tooltip4, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx7(
-      IconButton4,
-      {
-        onClick: handleClick,
-        size: "small",
-        "aria-controls": open ? "language-menu" : void 0,
-        "aria-haspopup": "true",
-        "aria-expanded": open ? "true" : void 0,
-        sx: {
-          p: 1,
-          borderRadius: 2,
-          transition: "background-color 0.2s",
-          "&:hover": {
-            backgroundColor: "action.hover"
-          }
-        },
-        children: currentLang?.svg_flag && /* @__PURE__ */ jsx7(
-          Box5,
-          {
-            sx: {
-              width: 24,
-              height: 16,
-              borderRadius: "3px",
-              overflow: "hidden",
-              flexShrink: 0,
-              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
-            },
-            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
-          }
-        )
-      }
-    ) }),
-    /* @__PURE__ */ jsx7(
-      Menu,
-      {
-        id: "language-menu",
-        anchorEl,
-        open,
-        onClose: handleClose,
-        slotProps: {
-          paper: {
-            elevation: 3,
-            sx: {
-              mt: 1,
-              minWidth: 150,
-              borderRadius: 2
-            }
-          }
-        },
-        transformOrigin: { horizontal: "right", vertical: "top" },
-        anchorOrigin: { horizontal: "right", vertical: "bottom" },
-        children: languages.map((lang) => {
-          const isSelected = lang.code === currentLangCode;
-          return /* @__PURE__ */ jsxs6(
-            MenuItem,
-            {
-              selected: isSelected,
-              onClick: () => handleSelectLanguage(lang.code),
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 1.5,
-                py: 1,
-                px: 2
-              },
-              children: [
-                /* @__PURE__ */ jsx7(
-                  Box5,
-                  {
-                    sx: {
-                      width: 22,
-                      height: 15,
-                      borderRadius: "2px",
-                      overflow: "hidden",
-                      flexShrink: 0,
-                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
-                      "& svg": { width: "100%", height: "100%", display: "block" }
-                    },
-                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
-                  }
-                ),
-                /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
-              ]
-            },
-            lang.code
-          );
-        })
-      }
-    )
-  ] });
+    const newValue = e.target.value;
+    if (internalError) {
+      validateEmail(newValue);
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  const handleBlur = (e) => {
+    validateEmail(e.target.value);
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const hasError = Boolean(externalError || internalError);
+  const displayHelperText = externalHelperText || internalError || void 0;
+  return /* @__PURE__ */ jsx3(
+    TextFieldComponent,
+    {
+      type: "email",
+      value,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      error: hasError,
+      helperText: displayHelperText,
+      ...props
+    }
+  );
 };
 
 // src/UI/components/inputs/SearchComponent.tsx
-import { useState as useState9, useEffect as useEffect5 } from "react";
-import { useTranslation as useTranslation3 } from "react-i18next";
-import { TextField as TextField3, InputAdornment as InputAdornment4, IconButton as IconButton5, Tooltip as Tooltip5 } from "@mui/material";
+import { useState as useState5, useEffect as useEffect3 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { TextField as TextField2, InputAdornment as InputAdornment3, IconButton as IconButton3, Tooltip as Tooltip2 } from "@mui/material";
 import TranslateIcon2 from "@mui/icons-material/Translate";
 import ClearIcon2 from "@mui/icons-material/Clear";
 
 // src/hooks/useDebounce.ts
-import { useEffect as useEffect4, useState as useState8 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = useState8(value);
-  useEffect4(() => {
+  const [debouncedValue, setDebouncedValue] = useState4(value);
+  useEffect2(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -1273,7 +561,7 @@ function useDebounce(value, delay = 500) {
 }
 
 // src/UI/components/inputs/SearchComponent.tsx
-import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var SearchComponent = ({
   overrideNamespace,
   label = "",
@@ -1289,15 +577,15 @@ var SearchComponent = ({
 }) => {
   const supabase = useSupabase();
   const namespace = useTranslationNamespace();
-  const { t, i18n } = useTranslation3(namespace);
+  const { t, i18n } = useTranslation2(namespace);
   const { isTranslationMode } = useTranslationEdit();
-  const [isDialogOpen, setIsDialogOpen] = useState9(false);
-  const [localValue, setLocalValue] = useState9(String(value ?? ""));
+  const [isDialogOpen, setIsDialogOpen] = useState5(false);
+  const [localValue, setLocalValue] = useState5(String(value ?? ""));
   const debouncedValue = useDebounce(localValue, debounceDelay);
-  useEffect5(() => {
+  useEffect3(() => {
     setLocalValue(String(value ?? ""));
   }, [value]);
-  useEffect5(() => {
+  useEffect3(() => {
     if (onDebounceChange) {
       onDebounceChange(debouncedValue);
     }
@@ -1355,21 +643,21 @@ var SearchComponent = ({
     if (!hasValue && (!isTranslationMode || !placeholderKey)) {
       return existingEndAdornment;
     }
-    return /* @__PURE__ */ jsxs7(Fragment7, { children: [
+    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
       existingEndAdornment,
-      /* @__PURE__ */ jsxs7(InputAdornment4, { position: "end", children: [
-        hasValue && /* @__PURE__ */ jsx8(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ jsx8(
-          IconButton5,
+      /* @__PURE__ */ jsxs3(InputAdornment3, { position: "end", children: [
+        hasValue && /* @__PURE__ */ jsx4(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx4(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ jsx4(
+          IconButton3,
           {
             size: "small",
             onClick: handleClear,
             edge: "end",
             "aria-label": "clear input",
-            children: /* @__PURE__ */ jsx8(ClearIcon2, { fontSize: "small" })
+            children: /* @__PURE__ */ jsx4(ClearIcon2, { fontSize: "small" })
           }
         ) }),
-        isTranslationMode && placeholderKey && /* @__PURE__ */ jsx8(Tooltip5, { title: `Translate placeholder: "${placeholderKey}"`, children: /* @__PURE__ */ jsx8(
-          IconButton5,
+        isTranslationMode && placeholderKey && /* @__PURE__ */ jsx4(Tooltip2, { title: `Translate placeholder: "${placeholderKey}"`, children: /* @__PURE__ */ jsx4(
+          IconButton3,
           {
             size: "small",
             onClick: (e) => {
@@ -1387,18 +675,18 @@ var SearchComponent = ({
                 backgroundColor: "#fef08a"
               }
             },
-            children: /* @__PURE__ */ jsx8(TranslateIcon2, { fontSize: "small" })
+            children: /* @__PURE__ */ jsx4(TranslateIcon2, { fontSize: "small" })
           }
         ) })
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
-    /* @__PURE__ */ jsx8(
-      TextField3,
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx4(
+      TextField2,
       {
         ...restProps,
-        label: typeof label === "string" ? /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: label }) : label,
+        label: typeof label === "string" ? /* @__PURE__ */ jsx4(TranslateText, { overrideNamespace, children: label }) : label,
         value: localValue,
         onChange: handleChange,
         placeholder: translatedPlaceholder,
@@ -1411,7 +699,7 @@ var SearchComponent = ({
         }
       }
     ),
-    placeholderKey && /* @__PURE__ */ jsx8(
+    placeholderKey && /* @__PURE__ */ jsx4(
       TranslationDialog,
       {
         open: isDialogOpen,
@@ -1429,16 +717,16 @@ import {
   FormControl,
   InputLabel,
   Select,
-  MenuItem as MenuItem2,
+  MenuItem,
   Checkbox,
   ListItemText,
-  IconButton as IconButton6,
-  InputAdornment as InputAdornment5,
-  Tooltip as Tooltip6,
+  IconButton as IconButton4,
+  InputAdornment as InputAdornment4,
+  Tooltip as Tooltip3,
   FormHelperText
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var SelectComponent = ({
   overrideNamespace,
   label,
@@ -1499,331 +787,128 @@ var SelectComponent = ({
     return visibleLabels.join(", ");
   };
   const isSmall = size === "small";
-  return /* @__PURE__ */ jsx9(
-    Tooltip6,
+  return /* @__PURE__ */ jsx5(
+    Tooltip3,
     {
       title: multiple ? Array.isArray(value) ? options.filter((opt) => value.includes(opt.value)).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value)).join(", ") : "" : options.find((opt) => opt.value === value)?.label ?? String(value ?? ""),
-      children: /* @__PURE__ */ jsxs8(FormControl, { fullWidth, size, sx: { mt: 1 }, children: [
-        /* @__PURE__ */ jsx9(InputLabel, { id: labelId, size: isSmall ? "small" : "medium", children: typeof label === "string" ? /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: label }) : label }),
-        /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsxs4(FormControl, { fullWidth, size, sx: { mt: 1 }, children: [
+        /* @__PURE__ */ jsx5(InputLabel, { id: labelId, size: isSmall ? "small" : "medium", children: typeof label === "string" ? /* @__PURE__ */ jsx5(TranslateText, { overrideNamespace, children: label }) : label }),
+        /* @__PURE__ */ jsx5(
           Select,
           {
             labelId,
             id,
             value: safeValue,
-            label: typeof label === "string" ? /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: label }) : label,
+            label: typeof label === "string" ? /* @__PURE__ */ jsx5(TranslateText, { overrideNamespace, children: label }) : label,
             size,
             multiple,
             disabled,
             onChange: handleChange,
             renderValue: multiple ? renderValueHandler : void 0,
             ...restProps,
-            endAdornment: clearable && hasValue && !disabled ? /* @__PURE__ */ jsx9(InputAdornment5, { position: "end", sx: { mr: 1 }, children: /* @__PURE__ */ jsx9(
-              IconButton6,
+            endAdornment: clearable && hasValue && !disabled ? /* @__PURE__ */ jsx5(InputAdornment4, { position: "end", sx: { mr: 1 }, children: /* @__PURE__ */ jsx5(
+              IconButton4,
               {
                 size: "small",
                 onClick: handleClear,
                 "aria-label": "clear selection",
                 edge: "end",
                 sx: { p: 0.5 },
-                children: /* @__PURE__ */ jsx9(CloseIcon, { fontSize: "small" })
+                children: /* @__PURE__ */ jsx5(CloseIcon, { fontSize: "small" })
               }
             ) }) : null,
             sx: {
               // 1. Задаем фиксированную высоту для всего контейнера инпута
               height: isSmall ? "40px" : "56px",
               minHeight: isSmall ? "40px" : "56px",
-              // 2. Выравниваем внутренний класс текстового поля
-              "& .MuiSelect-select": {
-                display: "flex",
-                alignItems: "center",
-                boxSizing: "border-box",
-                height: "100%",
-                minHeight: "100% !important",
-                py: 0,
-                lineHeight: "normal",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                paddingRight: clearable && hasValue ? "64px !important" : "32px !important"
-              },
-              // 3. Корректируем иконку стрелки выпадающего списка
-              "& .MuiSelect-icon": {
-                top: "calc(50% - 12px)"
-              },
-              // 4. Корректируем расположение иконки очистки
-              "& .MuiInputAdornment-root": {
-                maxHeight: "100%",
-                height: "100%",
-                alignItems: "center"
-              },
-              ...sx
-            },
-            children: options.map((option) => {
-              const isSelected = multiple && selectedArray.includes(option.value);
-              const isDisabled = Boolean(isLimitReached && !isSelected);
-              return /* @__PURE__ */ jsxs8(
-                MenuItem2,
-                {
-                  value: option.value,
-                  disabled: isDisabled,
-                  children: [
-                    multiple && withCheckboxes && /* @__PURE__ */ jsx9(Checkbox, { checked: isSelected, size, disabled: isDisabled }),
-                    /* @__PURE__ */ jsx9(
-                      ListItemText,
-                      {
-                        primary: option.isItalic ? /* @__PURE__ */ jsx9("em", { children: option.label }) : option.label
-                      }
-                    )
-                  ]
-                },
-                String(option.value)
-              );
-            })
-          }
-        ),
-        helperText && /* @__PURE__ */ jsx9(FormHelperText, { children: helperText })
-      ] })
-    }
-  );
-};
-
-// src/UI/components/data.display/ExpandableNoteComponent.tsx
-import { useState as useState10 } from "react";
-import { Typography as Typography5, Link } from "@mui/material";
-import { Fragment as Fragment8, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var ExpandableNoteComponent = ({
-  overrideNamespace,
-  text,
-  maxLength = 100,
-  label,
-  sx,
-  ...restProps
-}) => {
-  const [isExpanded, setIsExpanded] = useState10(false);
-  if (!text) return null;
-  const isLong = text.length > maxLength;
-  const displayedText = isExpanded || !isLong ? text : `${text.slice(0, maxLength).trim()}...`;
-  const toggleExpand = (e) => {
-    e.stopPropagation();
-    setIsExpanded((prev) => !prev);
-  };
-  return /* @__PURE__ */ jsxs9(
-    Typography5,
-    {
-      variant: "caption",
-      sx: {
-        color: "text.secondary",
-        fontStyle: "italic",
-        display: "inline-block",
-        ...sx
-      },
-      ...restProps,
-      children: [
-        label !== void 0 ? label : /* @__PURE__ */ jsxs9(Fragment8, { children: [
-          /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
-          ": "
-        ] }),
-        " ",
-        displayedText,
-        " ",
-        isLong && /* @__PURE__ */ jsx10(
-          Link,
-          {
-            component: "button",
-            type: "button",
-            variant: "caption",
-            underline: "hover",
-            onClick: toggleExpand,
-            sx: {
-              fontStyle: "normal",
-              fontWeight: "bold",
-              ml: 0.5,
-              cursor: "pointer",
-              verticalAlign: "baseline"
-            },
-            children: isExpanded ? /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ jsxs9(Fragment8, { children: [
-              /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
-              "..."
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/UI/widgets/page/PageLinkWidget.tsx
-import { ArrowRight, Settings } from "@mui/icons-material";
-import {
-  Button as Button2,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  Divider,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText as ListItemText2,
-  Typography as Typography6,
-  Link as MuiLink
-} from "@mui/material";
-import React10 from "react";
-import { Link as RouterLink, useNavigate } from "react-router-dom";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var PageLinkWidget = ({
-  overrideNamespace,
-  title,
-  subheader,
-  description,
-  icon,
-  links,
-  actionButtonText,
-  onActionButtonClick,
-  bgcolor
-}) => {
-  const navigate = useNavigate();
-  return /* @__PURE__ */ jsxs10(
-    Card,
-    {
-      sx: (theme) => ({
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        boxShadow: 3,
-        bgcolor,
-        color: bgcolor ? typeof bgcolor === "string" && bgcolor.includes(".") ? theme.palette.getContrastText(
-          bgcolor.split(".").reduce((acc, key) => acc[key], theme.palette)
-        ) : typeof bgcolor === "function" ? theme.palette.getContrastText(bgcolor(theme)) : theme.palette.getContrastText(bgcolor) : "text.primary"
-      }),
-      children: [
-        /* @__PURE__ */ jsx11(
-          CardHeader,
-          {
-            avatar: icon ? React10.cloneElement(icon, {
-              sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
-            }) : /* @__PURE__ */ jsx11(Settings, { color: bgcolor ? "inherit" : "primary" }),
-            title: /* @__PURE__ */ jsx11(Typography6, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: title }) : title }),
-            subheader: subheader && /* @__PURE__ */ jsx11(Typography6, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: subheader }) : subheader })
-          }
-        ),
-        /* @__PURE__ */ jsx11(Divider, { sx: { borderColor: "inherit", opacity: 0.2 } }),
-        /* @__PURE__ */ jsxs10(CardContent, { sx: { flexGrow: 1 }, children: [
-          /* @__PURE__ */ jsx11(Typography6, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: description }) : description }),
-          links && links.length > 0 && /* @__PURE__ */ jsx11(List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ jsxs10(
-            ListItem,
-            {
-              disablePadding: true,
-              sx: {
-                mt: 1,
-                // Запрещаем ListItem менять цвет фона при наведении
-                "&:hover": {
-                  backgroundColor: "transparent"
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx11(
-                  ListItemIcon,
-                  {
-                    sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
-                    onClick: () => {
-                      if (link?.href) navigate(link.href);
-                    },
-                    children: /* @__PURE__ */ jsx11(ArrowRight, { fontSize: "small", color: "inherit" })
-                  }
-                ),
-                /* @__PURE__ */ jsx11(ListItemText2, { children: link.onClick ? /* @__PURE__ */ jsx11(
-                  Button2,
-                  {
-                    size: "small",
-                    variant: "text",
-                    color: bgcolor ? "inherit" : "primary",
-                    onClick: link.onClick,
-                    sx: {
-                      fontWeight: 500,
-                      textTransform: "none",
-                      // Отключает автоматические заглавные буквы (UPPERCASE)
-                      padding: 0,
-                      minWidth: "auto",
-                      justifyContent: "flex-start",
-                      textAlign: "left",
-                      transition: "opacity 0.2s ease-in-out",
-                      "&:hover": {
-                        opacity: 0.75,
-                        backgroundColor: "transparent",
-                        // Убирает стандартную серую подложку при ховере кнопки
-                        textDecoration: "underline"
-                        // Эффект подчеркивания, как у ссылки
-                      }
-                    },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: link.text }) : link.text
-                  }
-                ) : link.href ? /* @__PURE__ */ jsx11(
-                  MuiLink,
-                  {
-                    component: RouterLink,
-                    to: link.href,
-                    target: link.external ? "_blank" : "_self",
-                    rel: link.external ? "noopener noreferrer" : "",
-                    underline: "hover",
-                    color: bgcolor ? "inherit" : "primary",
-                    sx: {
-                      fontWeight: 500,
-                      display: "inline-block",
-                      transition: "opacity 0.2s ease-in-out",
-                      "&:hover": {
-                        opacity: 0.75,
-                        backgroundColor: "transparent"
-                      }
-                    },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: link.text }) : link.text
-                  }
-                ) : /* @__PURE__ */ jsx11(Typography6, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
-              ]
+              // 2. Выравниваем внутренний класс текстового поля
+              "& .MuiSelect-select": {
+                display: "flex",
+                alignItems: "center",
+                boxSizing: "border-box",
+                height: "100%",
+                minHeight: "100% !important",
+                py: 0,
+                lineHeight: "normal",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                paddingRight: clearable && hasValue ? "64px !important" : "32px !important"
+              },
+              // 3. Корректируем иконку стрелки выпадающего списка
+              "& .MuiSelect-icon": {
+                top: "calc(50% - 12px)"
+              },
+              // 4. Корректируем расположение иконки очистки
+              "& .MuiInputAdornment-root": {
+                maxHeight: "100%",
+                height: "100%",
+                alignItems: "center"
+              },
+              ...sx
             },
-            index
-          )) })
-        ] }),
-        actionButtonText && onActionButtonClick && /* @__PURE__ */ jsx11(CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ jsx11(Button2, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
-      ]
+            children: options.map((option) => {
+              const isSelected = multiple && selectedArray.includes(option.value);
+              const isDisabled = Boolean(isLimitReached && !isSelected);
+              return /* @__PURE__ */ jsxs4(
+                MenuItem,
+                {
+                  value: option.value,
+                  disabled: isDisabled,
+                  children: [
+                    multiple && withCheckboxes && /* @__PURE__ */ jsx5(Checkbox, { checked: isSelected, size, disabled: isDisabled }),
+                    /* @__PURE__ */ jsx5(
+                      ListItemText,
+                      {
+                        primary: option.isItalic ? /* @__PURE__ */ jsx5("em", { children: option.label }) : option.label
+                      }
+                    )
+                  ]
+                },
+                String(option.value)
+              );
+            })
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx5(FormHelperText, { children: helperText })
+      ] })
     }
   );
 };
 
-// src/UI/components/inputs/SwitchComponent.tsx
+// src/UI/components/inputs/CheckboxComponent.tsx
 import {
   FormControlLabel,
-  Box as Box6,
-  Switch
+  Checkbox as Checkbox2,
+  Box as Box3
 } from "@mui/material";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var SwitchComponent = ({
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CheckboxComponent = ({
   checked = false,
   onChange,
   label,
   checkedLabel,
   uncheckedLabel,
   overrideNamespace,
-  switchProps,
+  checkboxProps,
   ...props
 }) => {
   const currentLabel = label ?? (checked ? checkedLabel : uncheckedLabel);
   const renderLabel = (node) => {
     if (typeof node === "string") {
-      return /* @__PURE__ */ jsx12(TranslateText, { overrideNamespace, children: node });
+      return /* @__PURE__ */ jsx6(TranslateText, { overrideNamespace, children: node });
     }
     return node;
   };
-  return /* @__PURE__ */ jsx12(Box6, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx6(Box3, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx6(
     FormControlLabel,
     {
-      control: /* @__PURE__ */ jsx12(
-        Switch,
+      control: /* @__PURE__ */ jsx6(
+        Checkbox2,
         {
           checked,
           onChange,
-          ...switchProps
+          ...checkboxProps
         }
       ),
       label: renderLabel(currentLabel),
@@ -1832,39 +917,39 @@ var SwitchComponent = ({
   ) });
 };
 
-// src/UI/components/inputs/CheckboxComponent.tsx
+// src/UI/components/inputs/SwitchComponent.tsx
 import {
   FormControlLabel as FormControlLabel2,
-  Checkbox as Checkbox2,
-  Box as Box7
+  Box as Box4,
+  Switch
 } from "@mui/material";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var CheckboxComponent = ({
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SwitchComponent = ({
   checked = false,
   onChange,
   label,
   checkedLabel,
   uncheckedLabel,
   overrideNamespace,
-  checkboxProps,
+  switchProps,
   ...props
 }) => {
   const currentLabel = label ?? (checked ? checkedLabel : uncheckedLabel);
   const renderLabel = (node) => {
     if (typeof node === "string") {
-      return /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace, children: node });
+      return /* @__PURE__ */ jsx7(TranslateText, { overrideNamespace, children: node });
     }
     return node;
   };
-  return /* @__PURE__ */ jsx13(Box7, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx7(Box4, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx7(
     FormControlLabel2,
     {
-      control: /* @__PURE__ */ jsx13(
-        Checkbox2,
+      control: /* @__PURE__ */ jsx7(
+        Switch,
         {
           checked,
           onChange,
-          ...checkboxProps
+          ...switchProps
         }
       ),
       label: renderLabel(currentLabel),
@@ -1873,83 +958,233 @@ var CheckboxComponent = ({
   ) });
 };
 
-// src/UI/widgets/page/CollapsedWidgetContainer.tsx
-import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
-import { Avatar as Avatar3, Box as Box8, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider2, IconButton as IconButton7, styled, Tooltip as Tooltip7, Typography as Typography7 } from "@mui/material";
-import { useState as useState11 } from "react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var ExpandMore = styled((props) => {
-  const { expand, ...other } = props;
-  return /* @__PURE__ */ jsx14(IconButton7, { size: "small", ...other, children: /* @__PURE__ */ jsx14(ExpandMoreIcon, {}) });
-})(({ theme, expand }) => ({
-  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
-  transition: theme.transitions.create("transform", {
-    duration: theme.transitions.duration.shortest
-  }),
-  backgroundColor: expand ? theme.palette.primary.main : "transparent",
-  color: expand ? theme.palette.common.white : theme.palette.text.secondary,
-  border: `1px solid ${expand ? theme.palette.primary.main : theme.palette.divider}`,
-  "&:hover": {
-    backgroundColor: expand ? theme.palette.primary.dark : theme.palette.action.hover
-  }
-}));
-var CollapsedWidgetContainer = (props) => {
-  const { displayState } = useAppTheme();
-  const [expanded, setExpanded] = useState11(props.expanded === void 0 ? false : props.expanded);
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-    props.onExpanded && props.onExpanded(!expanded);
+// src/UI/components/inputs/UrlComponent.tsx
+import { useState as useState6 } from "react";
+import {
+  TextField as TextField3,
+  InputAdornment as InputAdornment5,
+  IconButton as IconButton5,
+  Tooltip as Tooltip4,
+  Popover,
+  Box as Box5,
+  Typography,
+  Button
+} from "@mui/material";
+import LinkIcon from "@mui/icons-material/Link";
+import LaunchIcon from "@mui/icons-material/Launch";
+import ContentCopyIcon2 from "@mui/icons-material/ContentCopy";
+import CheckIcon2 from "@mui/icons-material/Check";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import LockIcon2 from "@mui/icons-material/Lock";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function UrlComponent({
+  overrideNamespace,
+  label,
+  value,
+  onChange,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  error = false,
+  helperText = "",
+  description = "",
+  fullWidth = true,
+  openInNewTab = true,
+  showLock = true,
+  lockTooltip = "Field is not editable",
+  sx
+}) {
+  const [copied, setCopied] = useState6(false);
+  const [anchorEl, setAnchorEl] = useState6(null);
+  const isViewMode = disabled || readOnly;
+  const currentUrl = typeof value === "object" && value !== null ? value.url || "" : value || "";
+  const currentTitle = typeof value === "object" && value !== null ? value.title || "" : "";
+  const getFormattedUrl = (val) => {
+    if (!val) return "";
+    const trimmed = val.trim();
+    if (trimmed.match(/^[a-zA-Z]+:\/\//)) {
+      return trimmed;
+    }
+    return `https://${trimmed}`;
+  };
+  const finalUrl = getFormattedUrl(currentUrl);
+  const targetAttribute = openInNewTab ? "_blank" : "_self";
+  const displayLabelText = currentTitle.trim() || currentUrl;
+  const handleUrlChange = (newUrl) => {
+    onChange?.({ url: newUrl, title: currentTitle });
+  };
+  const handleTitleChange = (newTitle) => {
+    onChange?.({ url: currentUrl, title: newTitle });
+  };
+  const handleCopy = (e) => {
+    e.stopPropagation();
+    if (!finalUrl) return;
+    navigator.clipboard.writeText(finalUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const handleOpenLink = (e) => {
+    e.stopPropagation();
+    if (finalUrl) {
+      window.open(finalUrl, targetAttribute, openInNewTab ? "noopener,noreferrer" : void 0);
+    }
+  };
+  const handleInputClick = (e) => {
+    if (isViewMode && finalUrl) {
+      handleOpenLink(e);
+    }
   };
-  return /* @__PURE__ */ jsxs11(Card2, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
-    /* @__PURE__ */ jsxs11(
-      Box8,
+  const handleOpenTitleMenu = (e) => {
+    e.stopPropagation();
+    setAnchorEl(e.currentTarget);
+  };
+  const handleCloseTitleMenu = () => {
+    setAnchorEl(null);
+  };
+  const isTitlePopoverOpen = Boolean(anchorEl);
+  const displayHelperText = error ? helperText : description || helperText;
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx8(
+      TextField3,
       {
-        onClick: () => handleExpandClick(),
+        label: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: label }),
+        type: isViewMode ? "text" : "url",
+        value: isViewMode ? displayLabelText : currentUrl,
+        onChange: (e) => handleUrlChange(e.target.value),
+        required,
+        error,
+        disabled,
+        margin: "dense",
+        helperText: displayHelperText,
+        fullWidth,
+        placeholder: "example.com",
         sx: {
-          cursor: "pointer",
-          "&:hover": { bgcolor: "rgba(0,0,0,0.02)" },
-          display: "flex",
-          alignItems: "center",
-          pr: 2
+          "& .MuiInputLabel-asterisk": {
+            color: "red",
+            fontSize: "1.5rem"
+          },
+          "& .MuiInputBase-input": {
+            color: isViewMode && finalUrl ? "primary.main" : void 0,
+            textDecoration: isViewMode && finalUrl ? "underline" : "none",
+            cursor: isViewMode && finalUrl ? "pointer" : void 0,
+            fontWeight: isViewMode && finalUrl ? 500 : void 0
+          },
+          ...sx
+        },
+        slotProps: {
+          htmlInput: {
+            readOnly,
+            onClick: handleInputClick
+          },
+          input: {
+            startAdornment: /* @__PURE__ */ jsx8(InputAdornment5, { position: "start", children: /* @__PURE__ */ jsx8(LinkIcon, { fontSize: "small", color: isViewMode && finalUrl ? "primary" : "action" }) }),
+            endAdornment: /* @__PURE__ */ jsxs5(InputAdornment5, { position: "end", sx: { gap: 0.5 }, children: [
+              !isViewMode && /* @__PURE__ */ jsx8(Tooltip4, { title: currentTitle ? `Title: "${currentTitle}"` : /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set link title" }), children: /* @__PURE__ */ jsx8(
+                IconButton5,
+                {
+                  size: "small",
+                  onClick: handleOpenTitleMenu,
+                  color: currentTitle ? "primary" : "default",
+                  children: /* @__PURE__ */ jsx8(EditNoteIcon, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ jsx8(Tooltip4, { title: copied ? /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copied!" }) : /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copy link" }), children: /* @__PURE__ */ jsx8(IconButton5, { size: "small", onClick: handleCopy, color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ jsx8(CheckIcon2, { fontSize: "small" }) : /* @__PURE__ */ jsx8(ContentCopyIcon2, { fontSize: "small" }) }) }),
+              isViewMode && showLock && /* @__PURE__ */ jsx8(Tooltip4, { title: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ jsx8(
+                IconButton5,
+                {
+                  size: "small",
+                  disabled: true,
+                  edge: "end",
+                  "aria-label": "locked input",
+                  sx: {
+                    "&.Mui-disabled": {
+                      color: "text.secondary"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx8(LockIcon2, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ jsx8(Tooltip4, { title: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Open link" }), children: /* @__PURE__ */ jsx8(IconButton5, { size: "small", onClick: handleOpenLink, children: /* @__PURE__ */ jsx8(LaunchIcon, { fontSize: "small", color: isViewMode ? "primary" : "action" }) }) })
+            ] })
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      Popover,
+      {
+        open: isTitlePopoverOpen,
+        anchorEl,
+        onClose: handleCloseTitleMenu,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        slotProps: {
+          paper: { sx: { p: 2, width: 280 } }
         },
         children: [
-          /* @__PURE__ */ jsx14(
-            CardHeader2,
+          /* @__PURE__ */ jsx8(Typography, { variant: "subtitle2", sx: { mb: 1, fontWeight: "bold" }, children: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Link Title (Anchor)" }) }),
+          /* @__PURE__ */ jsxs5(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: [
+            /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Specify the text to display instead of the URL address" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx8(
+            TextField3,
             {
-              sx: { flexGrow: 1 },
-              avatar: /* @__PURE__ */ jsx14(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
-              title: typeof props.title === "string" ? /* @__PURE__ */ jsx14(Typography7, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
-              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+              size: "small",
+              fullWidth: true,
+              placeholder: "e.g. Instruction",
+              value: currentTitle,
+              onChange: (e) => handleTitleChange(e.target.value),
+              autoFocus: true,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleCloseTitleMenu();
+                }
+              }
             }
           ),
-          /* @__PURE__ */ jsx14(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx14(Box8, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx14(
-            ExpandMore,
-            {
-              expand: expanded,
-              onClick: handleExpandClick,
-              "aria-expanded": expanded
-            }
-          ) }) })
+          /* @__PURE__ */ jsx8(Box5, { sx: { display: "flex", justifyContent: "flex-end", mt: 1.5 }, children: /* @__PURE__ */ jsx8(Button, { size: "small", variant: "contained", onClick: handleCloseTitleMenu, children: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" }) }) })
         ]
       }
-    ),
-    /* @__PURE__ */ jsxs11(Collapse, { in: expanded, timeout: "auto", children: [
-      /* @__PURE__ */ jsx14(Divider2, { variant: "middle" }),
-      /* @__PURE__ */ jsx14(CardContent2, { children: props.children })
-    ] })
+    )
   ] });
-};
+}
+
+// src/UI/components/buttons/ButtonComponent.tsx
+import { forwardRef } from "react";
+import { Button as Button2 } from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ButtonComponent = forwardRef(
+  ({ label, children, overrideNamespace, ...props }, ref) => {
+    const renderContent = (content) => {
+      if (typeof content === "string") {
+        return /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: content });
+      }
+      return content;
+    };
+    const contentToRender = label !== void 0 ? label : children;
+    return /* @__PURE__ */ jsx9(Button2, { ref, ...props, children: renderContent(contentToRender) });
+  }
+);
+ButtonComponent.displayName = "ButtonComponent";
 
 // src/UI/components/buttons/RefreshButtonComponent.tsx
-import { useState as useState12 } from "react";
+import { useState as useState7 } from "react";
 import {
   Button as Button3,
   Fab,
-  styled as styled2
+  styled
 } from "@mui/material";
 import RefreshIconMui from "@mui/icons-material/Refresh";
-import { Fragment as Fragment9, jsx as jsx15 } from "react/jsx-runtime";
-var AnimatedRefreshIcon = styled2(RefreshIconMui, {
+import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
+var AnimatedRefreshIcon = styled(RefreshIconMui, {
   shouldForwardProp: (prop) => prop !== "isSpinning"
 })(({ isSpinning }) => ({
   animation: isSpinning ? "spin 1s linear infinite" : "none",
@@ -1976,7 +1211,7 @@ var RefreshButtonComponent = ({
   hideTooltipOnDesktop
 }) => {
   const { displayState } = useAppTheme();
-  const [internalLoading, setInternalLoading] = useState12(false);
+  const [internalLoading, setInternalLoading] = useState7(false);
   const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
   const handleClick = async (event) => {
     if (!onClick || isLoading || disabled) return;
@@ -1987,9 +1222,9 @@ var RefreshButtonComponent = ({
       setInternalLoading(false);
     }
   };
-  const renderIcon = () => /* @__PURE__ */ jsx15(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  const renderIcon = () => /* @__PURE__ */ jsx10(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
   if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
-    return /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ jsx15(Fragment9, {}) : tooltip || /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15("span", { children: /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx10(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ jsx10(Fragment5, {}) : tooltip || /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(
       Fab,
       {
         size,
@@ -2001,31 +1236,324 @@ var RefreshButtonComponent = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ jsx15(Fragment9, {}) : tooltip || /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx10(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ jsx10(Fragment5, {}) : tooltip || /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx10(
     Button3,
     {
-      variant: "contained",
-      color: "inherit",
-      size,
-      onClick: handleClick,
-      disabled: disabled || isLoading,
-      fullWidth,
-      startIcon: renderIcon(),
-      children: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+      variant: "contained",
+      color: "inherit",
+      size,
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      fullWidth,
+      startIcon: renderIcon(),
+      children: /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+    }
+  ) });
+};
+
+// src/UI/components/data.display/UserAvatarComponent.tsx
+import { useState as useState8, useEffect as useEffect4, lazy, Suspense } from "react";
+import { Avatar, Tooltip as Tooltip5, Typography as Typography2 } from "@mui/material";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var LazyUserPopover = lazy(() => import("./UserPopoverComponent-VFSZ5ZO2.mjs"));
+var getInitials = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name[0].toUpperCase();
+};
+var UserAvatarComponent = ({
+  userId = "",
+  avatarUrl = "",
+  displayName = "",
+  employeePost = "",
+  size = 40,
+  disableBorder = false,
+  disableShadow = false,
+  disablePopover = false,
+  disableTooltip = false,
+  sx = {}
+}) => {
+  const supabase = useSupabase();
+  const [anchorEl, setAnchorEl] = useState8(null);
+  const [hasInteracted, setHasInteracted] = useState8(false);
+  const [resolvedAvatarUrl, setResolvedAvatarUrl] = useState8(null);
+  const canShowPopover = !disablePopover && Boolean(userId);
+  useEffect4(() => {
+    let isMounted = true;
+    const resolveAvatar = async () => {
+      if (!avatarUrl) {
+        if (isMounted) setResolvedAvatarUrl(null);
+        return;
+      }
+      if (!avatarUrl.startsWith("http") && !avatarUrl.startsWith("data:")) {
+        try {
+          const { data } = await supabase.storage.from("user-media").createSignedUrl(avatarUrl, 3600);
+          if (isMounted) {
+            setResolvedAvatarUrl(data?.signedUrl || null);
+          }
+        } catch (err) {
+          console.error("Error resolving signed url for avatar:", err);
+          if (isMounted) setResolvedAvatarUrl(null);
+        }
+      } else {
+        if (isMounted) setResolvedAvatarUrl(avatarUrl);
+      }
+    };
+    resolveAvatar();
+    return () => {
+      isMounted = false;
+    };
+  }, [avatarUrl]);
+  const handleClick = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (canShowPopover) {
+      setAnchorEl(event.currentTarget);
+      if (!hasInteracted) {
+        setHasInteracted(true);
+      }
+    }
+  };
+  const handleClose = (event) => {
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  const initials = getInitials(displayName || "");
+  const getTooltip = /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx11(Typography2, { component: "div", variant: "caption", children: displayName }),
+    displayName && employeePost && /* @__PURE__ */ jsx11(Typography2, { component: "div", variant: "caption", children: employeePost })
+  ] });
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx11(Tooltip5, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ jsx11(
+      Avatar,
+      {
+        src: resolvedAvatarUrl || void 0,
+        alt: displayName || "User Avatar",
+        onClick: handleClick,
+        sx: {
+          width: size,
+          height: size,
+          fontSize: size * 0.4,
+          fontWeight: 600,
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
+          cursor: canShowPopover ? "pointer" : void 0,
+          transition: "transform 0.2s ease, box-shadow 0.2s ease",
+          border: disableBorder ? "none" : "2px solid",
+          borderColor: "background.paper",
+          boxShadow: disableShadow ? "none" : 2,
+          "&:hover": {
+            transform: canShowPopover ? "scale(1.05)" : "none"
+          },
+          ...sx
+        },
+        children: !resolvedAvatarUrl && initials
+      }
+    ) }),
+    canShowPopover && hasInteracted && /* @__PURE__ */ jsx11(Suspense, { fallback: null, children: /* @__PURE__ */ jsx11(
+      LazyUserPopover,
+      {
+        userId,
+        anchorEl,
+        open: isPopoverOpen,
+        onClose: handleClose
+      }
+    ) })
+  ] });
+};
+
+// src/UI/components/data.display/MyAvatarComponent.tsx
+import { useState as useState9 } from "react";
+import { Avatar as Avatar2, Box as Box6, Popover as Popover2, Typography as Typography3, Skeleton } from "@mui/material";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var getInitials2 = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name[0].toUpperCase();
+};
+var MyAvatarComponent = ({
+  size = 40,
+  disableBorder = false,
+  disableShadow = false,
+  disablePopover = false,
+  sx = {}
+}) => {
+  const { profile: userProfile, loading: isLoading } = useAuth();
+  const [anchorEl, setAnchorEl] = useState9(null);
+  const handlePopoverOpen = (event) => {
+    if (!disablePopover) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx12(
+      Skeleton,
+      {
+        variant: "circular",
+        width: size,
+        height: size,
+        sx: { display: "inline-block", flexShrink: 0, ...sx }
+      }
+    );
+  }
+  const initials = getInitials2(userProfile?.display_name || "");
+  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
+    /* @__PURE__ */ jsx12(
+      Avatar2,
+      {
+        src: userProfile?.avatar_url || void 0,
+        alt: userProfile?.display_name || "User Avatar",
+        onMouseEnter: handlePopoverOpen,
+        onMouseLeave: handlePopoverClose,
+        sx: {
+          width: size,
+          height: size,
+          fontSize: size * 0.4,
+          fontWeight: 600,
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
+          cursor: disablePopover ? void 0 : "pointer",
+          transition: "transform 0.2s ease, box-shadow 0.2s ease",
+          border: disableBorder ? "none" : "2px solid",
+          borderColor: "background.paper",
+          boxShadow: disableShadow ? "none" : 2,
+          "&:hover": {
+            transform: disablePopover ? "none" : "scale(1.05)"
+          },
+          ...sx
+        },
+        children: !userProfile?.avatar_url && initials
+      }
+    ),
+    !disablePopover && /* @__PURE__ */ jsx12(
+      Popover2,
+      {
+        id: `avatar-popover-${userProfile?.id}`,
+        open: isPopoverOpen,
+        anchorEl,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        onClose: handlePopoverClose,
+        disableRestoreFocus: true,
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        sx: {
+          pointerEvents: "none",
+          mt: 1
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              p: 1.5,
+              borderRadius: 2,
+              boxShadow: 3
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs7(Box6, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx12(Typography3, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ jsx12(Typography3, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/UI/components/data.display/ExpandableNoteComponent.tsx
+import { useState as useState10 } from "react";
+import { Typography as Typography4, Link } from "@mui/material";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var ExpandableNoteComponent = ({
+  overrideNamespace,
+  text,
+  maxLength = 100,
+  label,
+  sx,
+  ...restProps
+}) => {
+  const [isExpanded, setIsExpanded] = useState10(false);
+  if (!text) return null;
+  const isLong = text.length > maxLength;
+  const displayedText = isExpanded || !isLong ? text : `${text.slice(0, maxLength).trim()}...`;
+  const toggleExpand = (e) => {
+    e.stopPropagation();
+    setIsExpanded((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsxs8(
+    Typography4,
+    {
+      variant: "caption",
+      sx: {
+        color: "text.secondary",
+        fontStyle: "italic",
+        display: "inline-block",
+        ...sx
+      },
+      ...restProps,
+      children: [
+        label !== void 0 ? label : /* @__PURE__ */ jsxs8(Fragment8, { children: [
+          /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
+          ": "
+        ] }),
+        " ",
+        displayedText,
+        " ",
+        isLong && /* @__PURE__ */ jsx13(
+          Link,
+          {
+            component: "button",
+            type: "button",
+            variant: "caption",
+            underline: "hover",
+            onClick: toggleExpand,
+            sx: {
+              fontStyle: "normal",
+              fontWeight: "bold",
+              ml: 0.5,
+              cursor: "pointer",
+              verticalAlign: "baseline"
+            },
+            children: isExpanded ? /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ jsxs8(Fragment8, { children: [
+              /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
+              "..."
+            ] })
+          }
+        )
+      ]
     }
-  ) });
+  );
 };
 
-// src/UI/widgets/misc/ErrorAlertWidget.tsx
-import { Alert, Box as Box9, Button as Button4, Typography as Typography8, useTheme } from "@mui/material";
+// src/UI/components/data.display/ErrorAlertComponent.tsx
+import { Alert, Box as Box7, Button as Button4, Typography as Typography5, useTheme } from "@mui/material";
 import ReplayIcon from "@mui/icons-material/Replay";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var ErrorIllustration = ({ size = 64 }) => {
   const theme = useTheme();
   const mainColor = theme.palette.error.main;
   const lightColor = theme.palette.error.light;
-  return /* @__PURE__ */ jsx16(
-    Box9,
+  return /* @__PURE__ */ jsx14(
+    Box7,
     {
       sx: {
         display: "flex",
@@ -2033,7 +1561,7 @@ var ErrorIllustration = ({ size = 64 }) => {
         justifyContent: "center",
         flexShrink: 0
       },
-      children: /* @__PURE__ */ jsxs12(
+      children: /* @__PURE__ */ jsxs9(
         "svg",
         {
           width: size,
@@ -2042,7 +1570,7 @@ var ErrorIllustration = ({ size = 64 }) => {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ jsxs12(
+            /* @__PURE__ */ jsxs9(
               "circle",
               {
                 cx: "50",
@@ -2051,7 +1579,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                 fill: lightColor,
                 fillOpacity: "0.25",
                 children: [
-                  /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx14(
                     "animate",
                     {
                       attributeName: "r",
@@ -2060,7 +1588,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                       repeatCount: "indefinite"
                     }
                   ),
-                  /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx14(
                     "animate",
                     {
                       attributeName: "fill-opacity",
@@ -2072,8 +1600,8 @@ var ErrorIllustration = ({ size = 64 }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx14("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
+            /* @__PURE__ */ jsx14(
               "path",
               {
                 d: "M50 20L80 72H20L50 20Z",
@@ -2083,7 +1611,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx14(
               "path",
               {
                 d: "M50 36V54",
@@ -2092,17 +1620,17 @@ var ErrorIllustration = ({ size = 64 }) => {
                 strokeLinecap: "round"
               }
             ),
-            /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
-            /* @__PURE__ */ jsx16("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
-            /* @__PURE__ */ jsx16("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
-            /* @__PURE__ */ jsx16("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
+            /* @__PURE__ */ jsx14("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
+            /* @__PURE__ */ jsx14("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
+            /* @__PURE__ */ jsx14("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
+            /* @__PURE__ */ jsx14("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
           ]
         }
       )
     }
   );
 };
-var ErrorAlertWidget = ({
+var ErrorAlertComponent = ({
   overrideNamespace,
   title = "An error occurred",
   message,
@@ -2110,7 +1638,7 @@ var ErrorAlertWidget = ({
   retryText = "Retry",
   isRetrying = false
 }) => {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx14(
     Alert,
     {
       severity: "error",
@@ -2128,8 +1656,8 @@ var ErrorAlertWidget = ({
           p: 0
         }
       },
-      children: /* @__PURE__ */ jsxs12(
-        Box9,
+      children: /* @__PURE__ */ jsxs9(
+        Box7,
         {
           sx: {
             display: "flex",
@@ -2138,26 +1666,26 @@ var ErrorAlertWidget = ({
             gap: 2
           },
           children: [
-            /* @__PURE__ */ jsx16(ErrorIllustration, { size: 68 }),
-            /* @__PURE__ */ jsxs12(Box9, { sx: { flexGrow: 1 }, children: [
-              typeof title === "string" ? /* @__PURE__ */ jsx16(
-                Typography8,
+            /* @__PURE__ */ jsx14(ErrorIllustration, { size: 68 }),
+            /* @__PURE__ */ jsxs9(Box7, { sx: { flexGrow: 1 }, children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx14(
+                Typography5,
                 {
                   variant: "subtitle1",
                   sx: { fontWeight: 600, color: "error.main", mb: 0.5 },
-                  children: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace, children: title })
+                  children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace, children: title })
                 }
               ) : title,
-              typeof message === "string" ? /* @__PURE__ */ jsx16(Typography8, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace, children: message }) }) : message
+              typeof message === "string" ? /* @__PURE__ */ jsx14(Typography5, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace, children: message }) }) : message
             ] }),
-            onRetry && /* @__PURE__ */ jsx16(
-              Box9,
+            onRetry && /* @__PURE__ */ jsx14(
+              Box7,
               {
                 sx: {
                   alignSelf: { xs: "flex-end", sm: "center" },
                   mt: { xs: 1, sm: 0 }
                 },
-                children: /* @__PURE__ */ jsx16(
+                children: /* @__PURE__ */ jsx14(
                   Button4,
                   {
                     variant: "outlined",
@@ -2165,7 +1693,7 @@ var ErrorAlertWidget = ({
                     size: "small",
                     disabled: isRetrying,
                     onClick: onRetry,
-                    startIcon: /* @__PURE__ */ jsx16(
+                    startIcon: /* @__PURE__ */ jsx14(
                       ReplayIcon,
                       {
                         sx: {
@@ -2197,37 +1725,19 @@ var ErrorAlertWidget = ({
   );
 };
 
-// src/UI/components/buttons/ButtonComponent.tsx
-import { forwardRef } from "react";
-import { Button as Button5 } from "@mui/material";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var ButtonComponent = forwardRef(
-  ({ label, children, overrideNamespace, ...props }, ref) => {
-    const renderContent = (content) => {
-      if (typeof content === "string") {
-        return /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: content });
-      }
-      return content;
-    };
-    const contentToRender = label !== void 0 ? label : children;
-    return /* @__PURE__ */ jsx17(Button5, { ref, ...props, children: renderContent(contentToRender) });
-  }
-);
-ButtonComponent.displayName = "ButtonComponent";
-
 // src/UI/components/layout/PageComponent.tsx
-import React12, { useState as useState13 } from "react";
+import React10, { useState as useState11 } from "react";
 import {
-  Box as Box10,
-  Typography as Typography9,
-  Button as Button6,
-  IconButton as IconButton8,
-  Menu as Menu2,
-  MenuItem as MenuItem3,
-  ListItemIcon as ListItemIcon2,
-  ListItemText as ListItemText3,
-  Divider as Divider3,
-  Tooltip as Tooltip8,
+  Box as Box8,
+  Typography as Typography6,
+  Button as Button5,
+  IconButton as IconButton6,
+  Menu,
+  MenuItem as MenuItem2,
+  ListItemIcon,
+  ListItemText as ListItemText2,
+  Divider,
+  Tooltip as Tooltip6,
   useTheme as useTheme2,
   useMediaQuery,
   Stack,
@@ -2236,7 +1746,7 @@ import {
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { Refresh as RefreshIcon } from "@mui/icons-material";
-import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var getTruncateStyles = (mode = "truncate") => {
   switch (mode) {
     case "truncate":
@@ -2267,7 +1777,7 @@ var PageHeader = ({
   const theme = useTheme2();
   const mediaIsMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
   const isMobile = forceMobileView ?? mediaIsMobile;
-  const [anchorEl, setAnchorEl] = useState13(null);
+  const [anchorEl, setAnchorEl] = useState11(null);
   const isMenuOpen = Boolean(anchorEl);
   const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
   const handleCloseMenu = () => setAnchorEl(null);
@@ -2277,8 +1787,8 @@ var PageHeader = ({
   };
   const hasSecondaryActions = secondaryActions.length > 0;
   const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
-  return /* @__PURE__ */ jsxs13(
-    Box10,
+  return /* @__PURE__ */ jsxs10(
+    Box8,
     {
       sx: [
         {
@@ -2296,9 +1806,9 @@ var PageHeader = ({
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
-          icon && /* @__PURE__ */ jsx18(
-            Box10,
+        /* @__PURE__ */ jsxs10(Box8, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
+          icon && /* @__PURE__ */ jsx15(
+            Box8,
             {
               sx: {
                 display: "flex",
@@ -2317,10 +1827,10 @@ var PageHeader = ({
               children: icon
             }
           ),
-          /* @__PURE__ */ jsxs13(Box10, { sx: { minWidth: 0, flex: 1 }, children: [
-            tag && /* @__PURE__ */ jsx18(Box10, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
-            /* @__PURE__ */ jsx18(Tooltip8, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx18(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx18(
-              Typography9,
+          /* @__PURE__ */ jsxs10(Box8, { sx: { minWidth: 0, flex: 1 }, children: [
+            tag && /* @__PURE__ */ jsx15(Box8, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ jsx15(Tooltip6, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx15(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx15(
+              Typography6,
               {
                 variant: "h5",
                 component: "h1",
@@ -2331,11 +1841,11 @@ var PageHeader = ({
                   lineHeight: 1.3,
                   ...getTruncateStyles(titleTruncateMode)
                 },
-                children: /* @__PURE__ */ jsx18(TranslateText, { children: title })
+                children: /* @__PURE__ */ jsx15(TranslateText, { children: title })
               }
             ) }),
-            subtitle && /* @__PURE__ */ jsx18(Tooltip8, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx18(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx18(
-              Typography9,
+            subtitle && /* @__PURE__ */ jsx15(Tooltip6, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx15(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx15(
+              Typography6,
               {
                 variant: "body2",
                 sx: {
@@ -2345,24 +1855,24 @@ var PageHeader = ({
                   lineHeight: 1.4,
                   ...getTruncateStyles(subtitleTruncateMode)
                 },
-                children: /* @__PURE__ */ jsx18(TranslateText, { children: subtitle })
+                children: /* @__PURE__ */ jsx15(TranslateText, { children: subtitle })
               }
             ) })
           ] })
         ] }),
-        hasActions && /* @__PURE__ */ jsx18(Box10, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+        hasActions && /* @__PURE__ */ jsx15(Box8, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
           /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
-          /* @__PURE__ */ jsxs13(Fragment10, { children: [
-            /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx18(
-              IconButton8,
+          /* @__PURE__ */ jsxs10(Fragment9, { children: [
+            /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx15(
+              IconButton6,
               {
                 onClick: handleOpenMenu,
                 sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                children: /* @__PURE__ */ jsx18(MoreVertIcon, {})
+                children: /* @__PURE__ */ jsx15(MoreVertIcon, {})
               }
             ) }),
-            /* @__PURE__ */ jsxs13(
-              Menu2,
+            /* @__PURE__ */ jsxs10(
+              Menu,
               {
                 anchorEl,
                 open: isMenuOpen,
@@ -2371,9 +1881,9 @@ var PageHeader = ({
                 anchorOrigin: { horizontal: "right", vertical: "bottom" },
                 slotProps: { paper: { elevation: 4, sx: { minWidth: 200, borderRadius: 2, mt: 1, p: 0.5 } } },
                 children: [
-                  primaryAction && /* @__PURE__ */ jsxs13(Fragment10, { children: [
-                    /* @__PURE__ */ jsxs13(
-                      MenuItem3,
+                  primaryAction && /* @__PURE__ */ jsxs10(Fragment9, { children: [
+                    /* @__PURE__ */ jsxs10(
+                      MenuItem2,
                       {
                         onClick: () => handleMenuAction(primaryAction.onClick),
                         disabled: primaryAction.disabled,
@@ -2386,32 +1896,32 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          primaryAction.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
-                          /* @__PURE__ */ jsx18(ListItemText3, { primary: /* @__PURE__ */ jsx18(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          primaryAction.icon && /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ jsx15(ListItemText2, { primary: /* @__PURE__ */ jsx15(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     ),
-                    hasSecondaryActions && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.75 } })
+                    hasSecondaryActions && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.75 } })
                   ] }),
-                  secondaryActions.map((action) => /* @__PURE__ */ jsxs13(React12.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs13(
-                      MenuItem3,
+                  secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React10.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs10(
+                      MenuItem2,
                       {
                         onClick: () => handleMenuAction(action.onClick),
                         disabled: action.disabled,
                         sx: { borderRadius: 1, py: 1, px: 1.5, color: action.color ? `${action.color}.main` : "text.primary" },
                         children: [
-                          action.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ jsx18(ListItemText3, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx15(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
                   ] }, action.id)),
-                  refreshAction && /* @__PURE__ */ jsxs13(Fragment10, { children: [
-                    /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs13(
-                      MenuItem3,
+                  refreshAction && /* @__PURE__ */ jsxs10(Fragment9, { children: [
+                    /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs10(
+                      MenuItem2,
                       {
                         onClick: () => handleMenuAction(refreshAction.onClick),
                         disabled: refreshAction.disabled,
@@ -2423,8 +1933,8 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx18(RefreshIcon, {}) }),
-                          /* @__PURE__ */ jsx18(ListItemText3, { primary: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx15(RefreshIcon, {}) }),
+                          /* @__PURE__ */ jsx15(ListItemText2, { primary: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     )
@@ -2435,10 +1945,10 @@ var PageHeader = ({
           ] })
         ) : (
           /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
-          /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            (primaryAction || refreshAction) && /* @__PURE__ */ jsxs13(Stack, { direction: "row", spacing: 2, children: [
-              primaryAction && /* @__PURE__ */ jsx18(
-                Button6,
+          /* @__PURE__ */ jsxs10(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            (primaryAction || refreshAction) && /* @__PURE__ */ jsxs10(Stack, { direction: "row", spacing: 2, children: [
+              primaryAction && /* @__PURE__ */ jsx15(
+                Button5,
                 {
                   variant: primaryAction.variant || "contained",
                   color: primaryAction.color || "primary",
@@ -2446,10 +1956,10 @@ var PageHeader = ({
                   disabled: primaryAction.disabled,
                   startIcon: primaryAction.icon,
                   sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
-                  children: /* @__PURE__ */ jsx18(TranslateText, { children: primaryAction.label })
+                  children: /* @__PURE__ */ jsx15(TranslateText, { children: primaryAction.label })
                 }
               ),
-              refreshAction && /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx18(
+              refreshAction && /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15(
                 Fab2,
                 {
                   color: "default",
@@ -2457,21 +1967,21 @@ var PageHeader = ({
                   disabled: refreshAction.disabled,
                   "aria-label": "refresh",
                   size: "small",
-                  children: /* @__PURE__ */ jsx18(RefreshIcon, {})
+                  children: /* @__PURE__ */ jsx15(RefreshIcon, {})
                 }
               ) })
             ] }),
-            hasSecondaryActions && /* @__PURE__ */ jsxs13(Fragment10, { children: [
-              /* @__PURE__ */ jsx18(
-                IconButton8,
+            hasSecondaryActions && /* @__PURE__ */ jsxs10(Fragment9, { children: [
+              /* @__PURE__ */ jsx15(
+                IconButton6,
                 {
                   onClick: handleOpenMenu,
                   sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                  children: /* @__PURE__ */ jsx18(KeyboardArrowDownIcon, {})
+                  children: /* @__PURE__ */ jsx15(KeyboardArrowDownIcon, {})
                 }
               ),
-              /* @__PURE__ */ jsx18(
-                Menu2,
+              /* @__PURE__ */ jsx15(
+                Menu,
                 {
                   anchorEl,
                   open: isMenuOpen,
@@ -2479,17 +1989,17 @@ var PageHeader = ({
                   transformOrigin: { horizontal: "right", vertical: "top" },
                   anchorOrigin: { horizontal: "right", vertical: "bottom" },
                   slotProps: { paper: { elevation: 4, sx: { minWidth: 180, borderRadius: 2, mt: 1, p: 0.5 } } },
-                  children: secondaryActions.map((action) => /* @__PURE__ */ jsxs13(React12.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs13(
-                      MenuItem3,
+                  children: secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React10.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs10(
+                      MenuItem2,
                       {
                         onClick: () => handleMenuAction(action.onClick),
                         disabled: action.disabled,
                         sx: { borderRadius: 1, py: 0.85, color: action.color ? `${action.color}.main` : "text.primary" },
                         children: [
-                          action.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ jsx18(ListItemText3, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx15(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
@@ -2499,14 +2009,14 @@ var PageHeader = ({
             ] })
           ] })
         ) }),
-        customFragment && /* @__PURE__ */ jsx18(Fragment10, { children: customFragment })
+        customFragment && /* @__PURE__ */ jsx15(Fragment9, { children: customFragment })
       ]
     }
   );
 };
 var PageContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx18(
-    Box10,
+  return /* @__PURE__ */ jsx15(
+    Box8,
     {
       sx: {
         width: "100%",
@@ -2522,8 +2032,8 @@ var PageComponent = ({
   header,
   children
 }) => {
-  return /* @__PURE__ */ jsx18(
-    Box10,
+  return /* @__PURE__ */ jsx15(
+    Box8,
     {
       sx: {
         //pt: 2,
@@ -2532,56 +2042,239 @@ var PageComponent = ({
         overflowY: "auto",
         boxSizing: "border-box"
       },
-      children: /* @__PURE__ */ jsxs13(PageContainer, { children: [
-        header && /* @__PURE__ */ jsx18(PageHeader, { ...header }),
+      children: /* @__PURE__ */ jsxs10(PageContainer, { children: [
+        header && /* @__PURE__ */ jsx15(PageHeader, { ...header }),
         children
       ] })
     }
   );
 };
 
-// src/UI/index.ts
-var UI = {
-  Inputs: {
-    TextField: TextFieldComponent,
-    NumberField: NumberInputComponent,
-    EmailField: EmailInputComponent,
-    Search: SearchComponent,
-    Select: SelectComponent,
-    Checkbox: CheckboxComponent,
-    Switch: SwitchComponent,
-    Url: UrlComponent
-  },
-  Buttons: {
-    Button: ButtonComponent,
-    CopyClipboardButton: CopyClipboardButtonComponent,
-    RefreshButton: RefreshButtonComponent
-  },
-  DataDisplay: {
-    TranslatableTooltip: TranslatableTooltipComponent,
-    UserAvatar: UserAvatarComponent,
-    UserPopover: UserPopoverComponent_default,
-    UserRoleChip: UserRoleChipComponent,
-    UserStatusChip: UserStatusChipComponent,
-    MyAvatar: MyAvatarComponent,
-    ExpandableNote: ExpandableNoteComponent
-  },
-  Layout: {
-    Page: PageComponent
-  },
-  Widgets: {
-    Locales: {
-      ProtectedLanguageSelector: LanguageSelector,
-      PublicLanguageSelector
-    },
-    Pages: {
-      PageLinkWidget,
-      CollapsedWidgetContainer
-    },
-    Misc: {
-      ErrorAlertWidget
+// src/UI/components/layout/FilterContainerComponent.tsx
+import React11 from "react";
+import { Grid, Paper } from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var FilterContainerComponent = ({
+  sections,
+  children,
+  sx
+}) => {
+  return /* @__PURE__ */ jsx16(
+    Paper,
+    {
+      variant: "outlined",
+      sx: [
+        { p: 2, mb: 3 },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ jsx16(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ jsx16(React11.Fragment, { children: sec }, idx)) : children })
+    }
+  );
+};
+
+// src/UI/components/layout/PageLinkComponent.tsx
+import { ArrowRight, Settings } from "@mui/icons-material";
+import {
+  Button as Button6,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Divider as Divider2,
+  List,
+  ListItem,
+  ListItemIcon as ListItemIcon2,
+  ListItemText as ListItemText3,
+  Typography as Typography7,
+  Link as MuiLink
+} from "@mui/material";
+import React12 from "react";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var PageLinkComponent = ({
+  overrideNamespace,
+  title,
+  subheader,
+  description,
+  icon,
+  links,
+  actionButtonText,
+  onActionButtonClick,
+  bgcolor
+}) => {
+  const navigate = useNavigate();
+  return /* @__PURE__ */ jsxs11(
+    Card,
+    {
+      sx: (theme) => ({
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        boxShadow: 3,
+        bgcolor,
+        color: bgcolor ? typeof bgcolor === "string" && bgcolor.includes(".") ? theme.palette.getContrastText(
+          bgcolor.split(".").reduce((acc, key) => acc[key], theme.palette)
+        ) : typeof bgcolor === "function" ? theme.palette.getContrastText(bgcolor(theme)) : theme.palette.getContrastText(bgcolor) : "text.primary"
+      }),
+      children: [
+        /* @__PURE__ */ jsx17(
+          CardHeader,
+          {
+            avatar: icon ? React12.cloneElement(icon, {
+              sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
+            }) : /* @__PURE__ */ jsx17(Settings, { color: bgcolor ? "inherit" : "primary" }),
+            title: /* @__PURE__ */ jsx17(Typography7, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: title }) : title }),
+            subheader: subheader && /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: subheader }) : subheader })
+          }
+        ),
+        /* @__PURE__ */ jsx17(Divider2, { sx: { borderColor: "inherit", opacity: 0.2 } }),
+        /* @__PURE__ */ jsxs11(CardContent, { sx: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: description }) : description }),
+          links && links.length > 0 && /* @__PURE__ */ jsx17(List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ jsxs11(
+            ListItem,
+            {
+              disablePadding: true,
+              sx: {
+                mt: 1,
+                // Запрещаем ListItem менять цвет фона при наведении
+                "&:hover": {
+                  backgroundColor: "transparent"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx17(
+                  ListItemIcon2,
+                  {
+                    sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
+                    onClick: () => {
+                      if (link?.href) navigate(link.href);
+                    },
+                    children: /* @__PURE__ */ jsx17(ArrowRight, { fontSize: "small", color: "inherit" })
+                  }
+                ),
+                /* @__PURE__ */ jsx17(ListItemText3, { children: link.onClick ? /* @__PURE__ */ jsx17(
+                  Button6,
+                  {
+                    size: "small",
+                    variant: "text",
+                    color: bgcolor ? "inherit" : "primary",
+                    onClick: link.onClick,
+                    sx: {
+                      fontWeight: 500,
+                      textTransform: "none",
+                      // Отключает автоматические заглавные буквы (UPPERCASE)
+                      padding: 0,
+                      minWidth: "auto",
+                      justifyContent: "flex-start",
+                      textAlign: "left",
+                      transition: "opacity 0.2s ease-in-out",
+                      "&:hover": {
+                        opacity: 0.75,
+                        backgroundColor: "transparent",
+                        // Убирает стандартную серую подложку при ховере кнопки
+                        textDecoration: "underline"
+                        // Эффект подчеркивания, как у ссылки
+                      }
+                    },
+                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                  }
+                ) : link.href ? /* @__PURE__ */ jsx17(
+                  MuiLink,
+                  {
+                    component: RouterLink,
+                    to: link.href,
+                    target: link.external ? "_blank" : "_self",
+                    rel: link.external ? "noopener noreferrer" : "",
+                    underline: "hover",
+                    color: bgcolor ? "inherit" : "primary",
+                    sx: {
+                      fontWeight: 500,
+                      display: "inline-block",
+                      transition: "opacity 0.2s ease-in-out",
+                      "&:hover": {
+                        opacity: 0.75,
+                        backgroundColor: "transparent"
+                      }
+                    },
+                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                  }
+                ) : /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
+              ]
+            },
+            index
+          )) })
+        ] }),
+        actionButtonText && onActionButtonClick && /* @__PURE__ */ jsx17(CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ jsx17(Button6, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
+      ]
     }
+  );
+};
+
+// src/UI/components/layout/CollapsedContainerComponent.tsx
+import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
+import { Avatar as Avatar3, Box as Box9, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider3, IconButton as IconButton7, styled as styled2, Tooltip as Tooltip7, Typography as Typography8 } from "@mui/material";
+import { useState as useState12 } from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var ExpandMore = styled2((props) => {
+  const { expand, ...other } = props;
+  return /* @__PURE__ */ jsx18(IconButton7, { size: "small", ...other, children: /* @__PURE__ */ jsx18(ExpandMoreIcon, {}) });
+})(({ theme, expand }) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest
+  }),
+  backgroundColor: expand ? theme.palette.primary.main : "transparent",
+  color: expand ? theme.palette.common.white : theme.palette.text.secondary,
+  border: `1px solid ${expand ? theme.palette.primary.main : theme.palette.divider}`,
+  "&:hover": {
+    backgroundColor: expand ? theme.palette.primary.dark : theme.palette.action.hover
   }
+}));
+var CollapsedContainerComponent = (props) => {
+  const { displayState } = useAppTheme();
+  const [expanded, setExpanded] = useState12(props.expanded === void 0 ? false : props.expanded);
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+    props.onExpanded && props.onExpanded(!expanded);
+  };
+  return /* @__PURE__ */ jsxs12(Card2, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
+    /* @__PURE__ */ jsxs12(
+      Box9,
+      {
+        onClick: () => handleExpandClick(),
+        sx: {
+          cursor: "pointer",
+          "&:hover": { bgcolor: "rgba(0,0,0,0.02)" },
+          display: "flex",
+          alignItems: "center",
+          pr: 2
+        },
+        children: [
+          /* @__PURE__ */ jsx18(
+            CardHeader2,
+            {
+              sx: { flexGrow: 1 },
+              avatar: /* @__PURE__ */ jsx18(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              title: typeof props.title === "string" ? /* @__PURE__ */ jsx18(Typography8, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+            }
+          ),
+          /* @__PURE__ */ jsx18(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx18(Box9, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx18(
+            ExpandMore,
+            {
+              expand: expanded,
+              onClick: handleExpandClick,
+              "aria-expanded": expanded
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs12(Collapse, { in: expanded, timeout: "auto", children: [
+      /* @__PURE__ */ jsx18(Divider3, { variant: "middle" }),
+      /* @__PURE__ */ jsx18(CardContent2, { children: props.children })
+    ] })
+  ] });
 };
 
 // src/services/index.ts
@@ -2599,13 +2292,13 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect6, useRef, useState as useState14 } from "react";
+import { useEffect as useEffect5, useRef, useState as useState13 } from "react";
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = useState14("offline");
-  const [lastSeen, setLastSeen] = useState14(initialLastSeenAt ?? null);
+  const [status, setStatus] = useState13("offline");
+  const [lastSeen, setLastSeen] = useState13(initialLastSeenAt ?? null);
   const lastSeenRef = useRef(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
@@ -2622,7 +2315,7 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  useEffect6(() => {
+  useEffect5(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -2723,19 +2416,41 @@ export {
   AppSettingsProvider,
   AuthProvider,
   BreadcrumbProvider,
+  ButtonComponent,
+  CheckboxComponent,
+  CollapsedContainerComponent,
   ConfirmationProvider,
+  CopyClipboardButtonComponent,
+  EmailInputComponent,
+  ErrorAlertComponent,
+  ExpandableNoteComponent,
+  FilterContainerComponent,
   Hooks,
   LocalizationProvider,
+  MyAvatarComponent,
+  NumberInputComponent,
+  PageComponent,
+  PageLinkComponent,
   Providers,
+  RefreshButtonComponent,
+  SearchComponent,
+  SelectComponent,
   Services,
   SupabaseProvider,
+  SwitchComponent,
+  TextFieldComponent,
   ThemeProvider,
   ToastProvider,
+  TranslatableTooltipComponent,
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
-  UI,
+  UrlComponent,
+  UserAvatarComponent,
+  UserPopoverComponent,
+  UserRoleChipComponent,
   UserSettingsProvider,
+  UserStatusChipComponent,
   Utils,
   defaultUserSettings,
   initI18n,