@serhii.olishevskyi/docs 1.2.23 → 1.2.25

package/dist/index.js

@@ -1539,15 +1539,15 @@ var init_TranslatableTooltipComponent = __esm({
 });
 
 // src/context/LocalizationProvider.tsx
-var import_react12, import_react_i18next4, import_moment_with_locales, import_jsx_runtime13, DEFAULT_DATETIME_FORMATS, DEFAULT_DATE_FORMATS, DEFAULT_TIME_FORMATS, LocalizationContext, LocalizationProvider, useLocalization;
+var import_react11, import_react_i18next4, import_moment_with_locales, import_jsx_runtime12, DEFAULT_DATETIME_FORMATS, DEFAULT_DATE_FORMATS, DEFAULT_TIME_FORMATS, LocalizationContext, LocalizationProvider, useLocalization;
 var init_LocalizationProvider = __esm({
   "src/context/LocalizationProvider.tsx"() {
     "use strict";
-    import_react12 = require("react");
+    import_react11 = require("react");
     import_react_i18next4 = require("react-i18next");
     import_moment_with_locales = __toESM(require("moment/min/moment-with-locales"));
     init_SupabaseProvider();
-    import_jsx_runtime13 = require("react/jsx-runtime");
+    import_jsx_runtime12 = require("react/jsx-runtime");
     DEFAULT_DATETIME_FORMATS = {
       uk: "DD.MM.YYYY, HH:mm",
       de: "DD.MM.YYYY, HH:mm",
@@ -1572,14 +1572,14 @@ var init_LocalizationProvider = __esm({
       fr: "HH:mm:ss",
       it: "HH:mm:ss"
     };
-    LocalizationContext = (0, import_react12.createContext)(void 0);
+    LocalizationContext = (0, import_react11.createContext)(void 0);
     LocalizationProvider = ({ children }) => {
       const supabase = useSupabase();
       const { i18n: i18n2 } = (0, import_react_i18next4.useTranslation)();
-      const [languages, setLanguages] = (0, import_react12.useState)([]);
-      const [isLoadingLangs, setIsLoadingLangs] = (0, import_react12.useState)(true);
-      const [languagesError, setLanguagesError] = (0, import_react12.useState)(null);
-      (0, import_react12.useEffect)(() => {
+      const [languages, setLanguages] = (0, import_react11.useState)([]);
+      const [isLoadingLangs, setIsLoadingLangs] = (0, import_react11.useState)(true);
+      const [languagesError, setLanguagesError] = (0, import_react11.useState)(null);
+      (0, import_react11.useEffect)(() => {
         let isMounted = true;
         const fetchLanguages = async () => {
           try {
@@ -1641,7 +1641,7 @@ var init_LocalizationProvider = __esm({
       const changeLanguage = async (lang) => {
         await i18n2.changeLanguage(lang);
       };
-      const value = (0, import_react12.useMemo)(
+      const value = (0, import_react11.useMemo)(
         () => ({
           currentLang,
           languages,
@@ -1658,10 +1658,10 @@ var init_LocalizationProvider = __esm({
         }),
         [currentLang, languages, isLoadingLangs, languagesError]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LocalizationContext.Provider, { value, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LocalizationContext.Provider, { value, children });
     };
     useLocalization = () => {
-      const context = (0, import_react12.useContext)(LocalizationContext);
+      const context = (0, import_react11.useContext)(LocalizationContext);
       if (!context) {
         throw new Error("useLocalization must be used within a LocalizationProvider");
       }
@@ -1671,15 +1671,15 @@ var init_LocalizationProvider = __esm({
 });
 
 // src/context/ThemeProvider.tsx
-var import_react13, import_material7, import_jsx_runtime14, DEFAULT_LIGHT_COLORS, DEFAULT_DARK_COLORS, INITIAL_THEME_CONFIG, buildMuiTheme, ThemeContext, THEME_STORAGE_KEY, THEME_MODE_STORAGE_KEY, ThemeProvider, useAppTheme;
+var import_react12, import_material6, import_jsx_runtime13, DEFAULT_LIGHT_COLORS, DEFAULT_DARK_COLORS, INITIAL_THEME_CONFIG, buildMuiTheme, ThemeContext, THEME_STORAGE_KEY, THEME_MODE_STORAGE_KEY, ThemeProvider, useAppTheme;
 var init_ThemeProvider = __esm({
   "src/context/ThemeProvider.tsx"() {
     "use strict";
-    import_react13 = require("react");
-    import_material7 = require("@mui/material");
+    import_react12 = require("react");
+    import_material6 = require("@mui/material");
     init_AuthProvider();
     init_SupabaseProvider();
-    import_jsx_runtime14 = require("react/jsx-runtime");
+    import_jsx_runtime13 = require("react/jsx-runtime");
     DEFAULT_LIGHT_COLORS = {
       primary: "#1976d2",
       secondary: "#9c27b0",
@@ -1724,7 +1724,7 @@ var init_ThemeProvider = __esm({
     buildMuiTheme = (config) => {
       const currentMode = config.mode;
       const currentColors = config.colors?.[currentMode] || (currentMode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS);
-      return (0, import_material7.createTheme)({
+      return (0, import_material6.createTheme)({
         palette: {
           mode: currentMode,
           primary: {
@@ -1809,14 +1809,14 @@ var init_ThemeProvider = __esm({
         }
       });
     };
-    ThemeContext = (0, import_react13.createContext)(void 0);
+    ThemeContext = (0, import_react12.createContext)(void 0);
     THEME_STORAGE_KEY = "docsua_custom_theme_config";
     THEME_MODE_STORAGE_KEY = "docsua_custom_theme_mode";
     ThemeProvider = ({ children }) => {
       const supabase = useSupabase();
       const { user, isAuthenticated, loading: isAuthLoading } = useAuth();
       const userId = user?.id;
-      const [themeConfig, setThemeConfig] = (0, import_react13.useState)(() => {
+      const [themeConfig, setThemeConfig] = (0, import_react12.useState)(() => {
         const saved = localStorage.getItem(THEME_STORAGE_KEY);
         if (saved) {
           try {
@@ -1826,7 +1826,7 @@ var init_ThemeProvider = __esm({
         }
         return INITIAL_THEME_CONFIG;
       });
-      (0, import_react13.useEffect)(() => {
+      (0, import_react12.useEffect)(() => {
         if (isAuthLoading) return;
         if (isAuthenticated && userId) {
           const fetchActiveTheme = async () => {
@@ -1860,7 +1860,7 @@ var init_ThemeProvider = __esm({
           localStorage.removeItem(THEME_MODE_STORAGE_KEY);
         }
       }, [isAuthenticated, isAuthLoading, userId]);
-      (0, import_react13.useEffect)(() => {
+      (0, import_react12.useEffect)(() => {
         if (isAuthenticated) {
           localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(themeConfig));
           localStorage.setItem(THEME_MODE_STORAGE_KEY, themeConfig.mode);
@@ -1873,21 +1873,21 @@ var init_ThemeProvider = __esm({
       const toggleTheme = () => {
         setMode(mode === "light" ? "dark" : "light");
       };
-      const theme = (0, import_react13.useMemo)(() => buildMuiTheme(themeConfig), [themeConfig]);
+      const theme = (0, import_react12.useMemo)(() => buildMuiTheme(themeConfig), [themeConfig]);
       const displayState = {
-        isMobile: (0, import_material7.useMediaQuery)(theme.breakpoints.down("sm")),
-        isTablet: (0, import_material7.useMediaQuery)(theme.breakpoints.between("sm", "md")),
-        isDesktop: (0, import_material7.useMediaQuery)(theme.breakpoints.between("md", "lg")),
-        isWideDesktop: (0, import_material7.useMediaQuery)(theme.breakpoints.between("lg", "xl")),
-        isSuperWideDesktop: (0, import_material7.useMediaQuery)(theme.breakpoints.up("xl"))
+        isMobile: (0, import_material6.useMediaQuery)(theme.breakpoints.down("sm")),
+        isTablet: (0, import_material6.useMediaQuery)(theme.breakpoints.between("sm", "md")),
+        isDesktop: (0, import_material6.useMediaQuery)(theme.breakpoints.between("md", "lg")),
+        isWideDesktop: (0, import_material6.useMediaQuery)(theme.breakpoints.between("lg", "xl")),
+        isSuperWideDesktop: (0, import_material6.useMediaQuery)(theme.breakpoints.up("xl"))
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ThemeContext.Provider, { value: { mode, toggleTheme, setMode, theme, themeConfig, setThemeConfig, displayState }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.ThemeProvider, { theme, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.CssBaseline, {}),
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThemeContext.Provider, { value: { mode, toggleTheme, setMode, theme, themeConfig, setThemeConfig, displayState }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material6.ThemeProvider, { theme, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material6.CssBaseline, {}),
         children
       ] }) });
     };
     useAppTheme = () => {
-      const context = (0, import_react13.useContext)(ThemeContext);
+      const context = (0, import_react12.useContext)(ThemeContext);
       if (!context) {
         throw new Error("useAppTheme should be used within the ThemeProvider");
       }
@@ -1897,63 +1897,63 @@ var init_ThemeProvider = __esm({
 });
 
 // src/context/BreadcrumbProvider.tsx
-var import_react14, import_jsx_runtime15, BreadcrumbContext, BreadcrumbProvider, useBreadcrumb;
+var import_react13, import_jsx_runtime14, BreadcrumbContext, BreadcrumbProvider, useBreadcrumb;
 var init_BreadcrumbProvider = __esm({
   "src/context/BreadcrumbProvider.tsx"() {
     "use strict";
-    import_react14 = require("react");
-    import_jsx_runtime15 = require("react/jsx-runtime");
-    BreadcrumbContext = (0, import_react14.createContext)({
+    import_react13 = require("react");
+    import_jsx_runtime14 = require("react/jsx-runtime");
+    BreadcrumbContext = (0, import_react13.createContext)({
       breadcrumbTitles: {},
       setBreadcrumbTitle: () => {
       }
     });
     BreadcrumbProvider = ({ children }) => {
-      const [breadcrumbTitles, setBreadcrumbTitles] = (0, import_react14.useState)({});
+      const [breadcrumbTitles, setBreadcrumbTitles] = (0, import_react13.useState)({});
       const setBreadcrumbTitle = (path, title) => {
         setBreadcrumbTitles((prev) => {
           if (prev[path] === title) return prev;
           return { ...prev, [path]: title };
         });
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbContext.Provider, { value: { breadcrumbTitles, setBreadcrumbTitle }, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbContext.Provider, { value: { breadcrumbTitles, setBreadcrumbTitle }, children });
     };
-    useBreadcrumb = () => (0, import_react14.useContext)(BreadcrumbContext);
+    useBreadcrumb = () => (0, import_react13.useContext)(BreadcrumbContext);
   }
 });
 
 // src/context/ToastProvider.tsx
-var import_react15, import_material8, import_jsx_runtime16, ToastContext, ToastProvider, useToast;
+var import_react14, import_material7, import_jsx_runtime15, ToastContext, ToastProvider, useToast;
 var init_ToastProvider = __esm({
   "src/context/ToastProvider.tsx"() {
     "use strict";
-    import_react15 = require("react");
-    import_material8 = require("@mui/material");
-    import_jsx_runtime16 = require("react/jsx-runtime");
-    ToastContext = (0, import_react15.createContext)(void 0);
+    import_react14 = require("react");
+    import_material7 = require("@mui/material");
+    import_jsx_runtime15 = require("react/jsx-runtime");
+    ToastContext = (0, import_react14.createContext)(void 0);
     ToastProvider = ({ children }) => {
-      const [toast, setToast] = (0, import_react15.useState)(null);
-      const showToast = (0, import_react15.useCallback)((text, type = "info") => {
+      const [toast, setToast] = (0, import_react14.useState)(null);
+      const showToast = (0, import_react14.useCallback)((text, type = "info") => {
         setToast({ text, type });
       }, []);
-      const hideToast = (0, import_react15.useCallback)(() => {
+      const hideToast = (0, import_react14.useCallback)(() => {
         setToast(null);
       }, []);
-      const contextValue = (0, import_react15.useMemo)(() => ({
+      const contextValue = (0, import_react14.useMemo)(() => ({
         showToast,
         hideToast
       }), [showToast, hideToast]);
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ToastContext.Provider, { value: contextValue, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ToastContext.Provider, { value: contextValue, children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_material8.Snackbar,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_material7.Snackbar,
           {
             open: Boolean(toast),
             autoHideDuration: 3500,
             onClose: hideToast,
             anchorOrigin: { vertical: "bottom", horizontal: "center" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_material8.Alert,
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_material7.Alert,
               {
                 severity: toast?.type || "info",
                 variant: "filled",
@@ -1966,7 +1966,7 @@ var init_ToastProvider = __esm({
       ] });
     };
     useToast = () => {
-      const context = (0, import_react15.useContext)(ToastContext);
+      const context = (0, import_react14.useContext)(ToastContext);
       if (!context) {
         throw new Error("useToast must be used within a ToastProvider");
       }
@@ -1976,27 +1976,27 @@ var init_ToastProvider = __esm({
 });
 
 // src/context/ConfirmationProvider.tsx
-var import_react16, import_material9, import_icons_material, import_jsx_runtime17, ConfirmContext, SEVERITY_ICONS, ConfirmationProvider, useConfirmation;
+var import_react15, import_material8, import_icons_material, import_jsx_runtime16, ConfirmContext, SEVERITY_ICONS, ConfirmationProvider, useConfirmation;
 var init_ConfirmationProvider = __esm({
   "src/context/ConfirmationProvider.tsx"() {
     "use strict";
-    import_react16 = require("react");
-    import_material9 = require("@mui/material");
+    import_react15 = require("react");
+    import_material8 = require("@mui/material");
     import_icons_material = require("@mui/icons-material");
     init_TranslateText();
-    import_jsx_runtime17 = require("react/jsx-runtime");
-    ConfirmContext = (0, import_react16.createContext)(null);
+    import_jsx_runtime16 = require("react/jsx-runtime");
+    ConfirmContext = (0, import_react15.createContext)(null);
     SEVERITY_ICONS = {
-      error: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material.Error, { color: "error", sx: { fontSize: 40 } }),
-      warning: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material.WarningAmberOutlined, { color: "warning", sx: { fontSize: 40 } }),
-      info: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material.InfoOutlined, { color: "info", sx: { fontSize: 40 } }),
-      success: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material.CheckCircleOutlined, { color: "success", sx: { fontSize: 40 } })
+      error: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material.Error, { color: "error", sx: { fontSize: 40 } }),
+      warning: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material.WarningAmberOutlined, { color: "warning", sx: { fontSize: 40 } }),
+      info: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material.InfoOutlined, { color: "info", sx: { fontSize: 40 } }),
+      success: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material.CheckCircleOutlined, { color: "success", sx: { fontSize: 40 } })
     };
     ConfirmationProvider = ({ overrideNamespace, children }) => {
-      const [open, setOpen] = (0, import_react16.useState)(false);
-      const [options, setOptions] = (0, import_react16.useState)(null);
-      const [resolver, setResolver] = (0, import_react16.useState)(null);
-      const confirm = (0, import_react16.useCallback)((opts) => {
+      const [open, setOpen] = (0, import_react15.useState)(false);
+      const [options, setOptions] = (0, import_react15.useState)(null);
+      const [resolver, setResolver] = (0, import_react15.useState)(null);
+      const confirm = (0, import_react15.useCallback)((opts) => {
         setOptions(opts);
         setOpen(true);
         return new Promise((resolve) => {
@@ -2010,10 +2010,10 @@ var init_ConfirmationProvider = __esm({
         }
       };
       const severityType = options?.type || "info";
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ConfirmContext.Provider, { value: { confirm }, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ConfirmContext.Provider, { value: { confirm }, children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-          import_material9.Dialog,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          import_material8.Dialog,
           {
             open,
             onClose: () => handleClose("cancel"),
@@ -2022,38 +2022,38 @@ var init_ConfirmationProvider = __esm({
             disableEnforceFocus: true,
             disableRestoreFocus: true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material9.DialogTitle, { sx: { display: "flex", alignItems: "center", gap: 1.5, pb: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material8.DialogTitle, { sx: { display: "flex", alignItems: "center", gap: 1.5, pb: 1 }, children: [
                 SEVERITY_ICONS[severityType],
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material9.Box, { component: "span", sx: { fontWeight: 600 }, children: options?.title || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "confirmation-dialog", children: "Confirmation" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material8.Box, { component: "span", sx: { fontWeight: 600 }, children: options?.title || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "confirmation-dialog", children: "Confirmation" }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material9.DialogContent, { sx: { py: 2 }, dividers: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material9.DialogContentText, { color: "text.secondary", children: options?.message }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material9.DialogActions, { sx: { pt: 2, px: 2, justifyContent: "flex-end", gap: 1 }, children: [
-                (options?.showCancelButton ?? true) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  import_material9.Button,
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material8.DialogContent, { sx: { py: 2 }, dividers: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material8.DialogContentText, { color: "text.secondary", children: options?.message }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material8.DialogActions, { sx: { pt: 2, px: 2, justifyContent: "flex-end", gap: 1 }, children: [
+                (options?.showCancelButton ?? true) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  import_material8.Button,
                   {
                     onClick: () => handleClose("cancel"),
                     color: "inherit",
                     variant: "text",
-                    children: options?.cancelText || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "confirmation-dialog", children: "Cancel" })
+                    children: options?.cancelText || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "confirmation-dialog", children: "Cancel" })
                   }
                 ),
-                options?.showNoButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  import_material9.Button,
+                options?.showNoButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  import_material8.Button,
                   {
                     onClick: () => handleClose("no"),
                     color: "inherit",
                     variant: "outlined",
-                    children: options?.noText || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "confirmation-dialog", children: "No" })
+                    children: options?.noText || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "confirmation-dialog", children: "No" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  import_material9.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  import_material8.Button,
                   {
                     onClick: () => handleClose("yes"),
                     color: options?.confirmColor || (severityType === "error" ? "error" : "primary"),
                     variant: "contained",
                     autoFocus: true,
-                    children: options?.confirmText || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "confirmation-dialog", children: "Yes" })
+                    children: options?.confirmText || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "confirmation-dialog", children: "Yes" })
                   }
                 )
               ] })
@@ -2063,7 +2063,7 @@ var init_ConfirmationProvider = __esm({
       ] });
     };
     useConfirmation = () => {
-      const context = (0, import_react16.useContext)(ConfirmContext);
+      const context = (0, import_react15.useContext)(ConfirmContext);
       if (!context) {
         throw new Error("useConfirm must be used within a ConfirmProvider");
       }
@@ -2073,23 +2073,23 @@ var init_ConfirmationProvider = __esm({
 });
 
 // src/context/AppSettingsProvider.tsx
-var import_react17, import_jsx_runtime18, DEFAULT_SETTINGS, AppSettingsContext, AppSettingsProvider, useAppSettings;
+var import_react16, import_jsx_runtime17, DEFAULT_SETTINGS, AppSettingsContext, AppSettingsProvider, useAppSettings;
 var init_AppSettingsProvider = __esm({
   "src/context/AppSettingsProvider.tsx"() {
     "use strict";
-    import_react17 = require("react");
+    import_react16 = require("react");
     init_SupabaseProvider();
-    import_jsx_runtime18 = require("react/jsx-runtime");
+    import_jsx_runtime17 = require("react/jsx-runtime");
     DEFAULT_SETTINGS = {
       max_group_members: 100
     };
-    AppSettingsContext = (0, import_react17.createContext)(void 0);
+    AppSettingsContext = (0, import_react16.createContext)(void 0);
     AppSettingsProvider = ({ children }) => {
       const supabase = useSupabase();
-      const [settings, setSettings] = (0, import_react17.useState)(DEFAULT_SETTINGS);
-      const [loading, setLoading] = (0, import_react17.useState)(true);
-      const [error, setError] = (0, import_react17.useState)(null);
-      const fetchSettings = (0, import_react17.useCallback)(async () => {
+      const [settings, setSettings] = (0, import_react16.useState)(DEFAULT_SETTINGS);
+      const [loading, setLoading] = (0, import_react16.useState)(true);
+      const [error, setError] = (0, import_react16.useState)(null);
+      const fetchSettings = (0, import_react16.useCallback)(async () => {
         try {
           setLoading(true);
           setError(null);
@@ -2109,16 +2109,16 @@ var init_AppSettingsProvider = __esm({
           setLoading(false);
         }
       }, []);
-      (0, import_react17.useEffect)(() => {
+      (0, import_react16.useEffect)(() => {
         fetchSettings();
       }, [fetchSettings]);
-      const getSetting = (0, import_react17.useCallback)((key, defaultValue) => {
+      const getSetting = (0, import_react16.useCallback)((key, defaultValue) => {
         if (key in settings && settings[key] !== null && settings[key] !== void 0) {
           return settings[key];
         }
         return defaultValue;
       }, [settings]);
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         AppSettingsContext.Provider,
         {
           value: {
@@ -2133,7 +2133,7 @@ var init_AppSettingsProvider = __esm({
       );
     };
     useAppSettings = () => {
-      const context = (0, import_react17.useContext)(AppSettingsContext);
+      const context = (0, import_react16.useContext)(AppSettingsContext);
       if (!context) {
         throw new Error("useAppSettings should be used within the AppSettingsProvider");
       }
@@ -2157,29 +2157,29 @@ var init_user_types = __esm({
 });
 
 // src/context/UserSettingsProvider.tsx
-var import_react18, import_jsx_runtime19, UserSettingsContext, UserSettingsProvider, useUserSettings;
+var import_react17, import_jsx_runtime18, UserSettingsContext, UserSettingsProvider, useUserSettings;
 var init_UserSettingsProvider = __esm({
   "src/context/UserSettingsProvider.tsx"() {
     "use strict";
-    import_react18 = require("react");
+    import_react17 = require("react");
     init_user_types();
     init_ThemeProvider();
     init_AuthProvider();
     init_SupabaseProvider();
-    import_jsx_runtime19 = require("react/jsx-runtime");
-    UserSettingsContext = (0, import_react18.createContext)(void 0);
+    import_jsx_runtime18 = require("react/jsx-runtime");
+    UserSettingsContext = (0, import_react17.createContext)(void 0);
     UserSettingsProvider = ({ children }) => {
       const supabase = useSupabase();
       const { user, isAuthenticated, loading: isAuthLoading } = useAuth();
       const userId = user?.id;
-      const [settings, setSettings] = (0, import_react18.useState)({
+      const [settings, setSettings] = (0, import_react17.useState)({
         id: "",
         ...defaultUserSettings
       });
-      const [loading, setLoading] = (0, import_react18.useState)(true);
-      const [error, setError] = (0, import_react18.useState)(null);
-      const [activeChatUserId, setActiveChatUserId] = (0, import_react18.useState)(null);
-      const fetchSettings = (0, import_react18.useCallback)(async () => {
+      const [loading, setLoading] = (0, import_react17.useState)(true);
+      const [error, setError] = (0, import_react17.useState)(null);
+      const [activeChatUserId, setActiveChatUserId] = (0, import_react17.useState)(null);
+      const fetchSettings = (0, import_react17.useCallback)(async () => {
         if (isAuthLoading) return;
         if (!isAuthenticated || !userId) {
           setSettings({ id: "", ...defaultUserSettings });
@@ -2232,10 +2232,10 @@ var init_UserSettingsProvider = __esm({
           setLoading(false);
         }
       }, [isAuthenticated, isAuthLoading, userId]);
-      (0, import_react18.useEffect)(() => {
+      (0, import_react17.useEffect)(() => {
         fetchSettings();
       }, [fetchSettings]);
-      const toggleSidebar = (0, import_react18.useCallback)(
+      const toggleSidebar = (0, import_react17.useCallback)(
         async (open) => {
           const isExplicitBoolean = typeof open === "boolean";
           const nextState = isExplicitBoolean ? open : !settings.sidebar_open;
@@ -2251,7 +2251,7 @@ var init_UserSettingsProvider = __esm({
         },
         [settings.sidebar_open, userId]
       );
-      const toggleChat = (0, import_react18.useCallback)(
+      const toggleChat = (0, import_react17.useCallback)(
         async (open) => {
           const isExplicitBoolean = typeof open === "boolean";
           const nextState = isExplicitBoolean ? open : !settings.chat_open;
@@ -2267,7 +2267,7 @@ var init_UserSettingsProvider = __esm({
         },
         [settings.chat_open, userId]
       );
-      const openChatWithUser = (0, import_react18.useCallback)(
+      const openChatWithUser = (0, import_react17.useCallback)(
         async (targetUserId) => {
           setActiveChatUserId(targetUserId);
           if (!settings.chat_open) {
@@ -2276,7 +2276,7 @@ var init_UserSettingsProvider = __esm({
         },
         [settings.chat_open, toggleChat]
       );
-      const setLanguage = (0, import_react18.useCallback)(
+      const setLanguage = (0, import_react17.useCallback)(
         async (newLanguage) => {
           const previousLanguage = settings.language;
           setSettings((prev) => ({ ...prev, language: newLanguage }));
@@ -2291,7 +2291,7 @@ var init_UserSettingsProvider = __esm({
         },
         [settings.language, userId]
       );
-      const setThemeMode = (0, import_react18.useCallback)(
+      const setThemeMode = (0, import_react17.useCallback)(
         async (newMode) => {
           const previousMode = settings.theme_mode;
           setSettings((prev) => ({ ...prev, theme_mode: newMode }));
@@ -2307,7 +2307,7 @@ var init_UserSettingsProvider = __esm({
         },
         [settings.theme_mode, userId]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         UserSettingsContext.Provider,
         {
           value: {
@@ -2327,7 +2327,7 @@ var init_UserSettingsProvider = __esm({
       );
     };
     useUserSettings = () => {
-      const context = (0, import_react18.useContext)(UserSettingsContext);
+      const context = (0, import_react17.useContext)(UserSettingsContext);
       if (!context) {
         throw new Error("useUserSettings should be used within the UserSettingsProvider");
       }
@@ -2337,17 +2337,17 @@ var init_UserSettingsProvider = __esm({
 });
 
 // src/context/PublicThemeProvider.tsx
-var import_react19, import_material10, import_jsx_runtime20, PublicThemeProvider;
+var import_react18, import_material9, import_jsx_runtime19, PublicThemeProvider;
 var init_PublicThemeProvider = __esm({
   "src/context/PublicThemeProvider.tsx"() {
     "use strict";
-    import_react19 = require("react");
-    import_material10 = require("@mui/material");
+    import_react18 = require("react");
+    import_material9 = require("@mui/material");
     init_ThemeProvider();
-    import_jsx_runtime20 = require("react/jsx-runtime");
+    import_jsx_runtime19 = require("react/jsx-runtime");
     PublicThemeProvider = ({ children }) => {
-      const publicTheme = (0, import_react19.useMemo)(() => buildMuiTheme(INITIAL_THEME_CONFIG), []);
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material10.ThemeProvider, { theme: publicTheme, children });
+      const publicTheme = (0, import_react18.useMemo)(() => buildMuiTheme(INITIAL_THEME_CONFIG), []);
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material9.ThemeProvider, { theme: publicTheme, children });
     };
   }
 });
@@ -2402,34 +2402,89 @@ var init_context = __esm({
   }
 });
 
+// src/UI/components/buttons/CopyClipboardButtonComponent.tsx
+var import_react23, import_material16, import_Check3, import_ContentCopy3, import_jsx_runtime26, CopyClipboardButtonComponent;
+var init_CopyClipboardButtonComponent = __esm({
+  "src/UI/components/buttons/CopyClipboardButtonComponent.tsx"() {
+    "use strict";
+    import_react23 = require("react");
+    import_material16 = require("@mui/material");
+    import_Check3 = __toESM(require("@mui/icons-material/Check"));
+    import_ContentCopy3 = __toESM(require("@mui/icons-material/ContentCopy"));
+    init_TranslatableTooltipComponent();
+    import_jsx_runtime26 = require("react/jsx-runtime");
+    CopyClipboardButtonComponent = ({
+      overrideNamespace,
+      textToCopy,
+      copyTooltipText = "Copy",
+      copiedTooltipText = "Copied",
+      namespace = "form_components",
+      resetDelay = 2e3,
+      onCopySuccess,
+      size = "small",
+      sx,
+      ...iconButtonProps
+    }) => {
+      const [copied, setCopied] = (0, import_react23.useState)(false);
+      const handleCopy = async (e) => {
+        e.stopPropagation();
+        if (!textToCopy) return;
+        try {
+          await navigator.clipboard.writeText(textToCopy);
+          setCopied(true);
+          if (onCopySuccess) {
+            onCopySuccess(textToCopy);
+          }
+          setTimeout(() => {
+            setCopied(false);
+          }, resetDelay);
+        } catch (error) {
+          console.error("Failed to copy text to clipboard:", error);
+        }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TranslatableTooltipComponent, { title: copied ? copiedTooltipText : copyTooltipText, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_material16.IconButton,
+        {
+          size,
+          onClick: handleCopy,
+          disabled: !textToCopy || iconButtonProps.disabled,
+          sx: { p: 0.25, ...sx },
+          ...iconButtonProps,
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Check3.default, { fontSize: size === "large" ? "medium" : "small", color: "success" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ContentCopy3.default, { fontSize: size === "large" ? "medium" : "small" })
+        }
+      ) }) });
+    };
+  }
+});
+
 // src/UI/components/data.display/UserStatusChipComponent.tsx
-var import_material11, import_InfoOutlined, import_jsx_runtime21, UserStatusChipComponent;
+var import_material18, import_InfoOutlined, import_jsx_runtime28, UserStatusChipComponent;
 var init_UserStatusChipComponent = __esm({
   "src/UI/components/data.display/UserStatusChipComponent.tsx"() {
     "use strict";
-    import_material11 = require("@mui/material");
+    import_material18 = require("@mui/material");
     import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"));
     init_context();
-    import_jsx_runtime21 = require("react/jsx-runtime");
+    import_jsx_runtime28 = require("react/jsx-runtime");
     UserStatusChipComponent = ({ overrideNamespace, state }) => {
       const confirm = useConfirmation();
       const handleShowReason = async (e) => {
         e.stopPropagation();
         if (!state.locked_reason) return;
         await confirm({
-          title: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Lock Reason" }),
+          title: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Lock Reason" }),
           message: state.locked_reason,
           type: "info",
-          confirmText: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "OK" }),
+          confirmText: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "OK" }),
           showNoButton: false,
           showCancelButton: false
         });
       };
       if (state.profile_archived) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_material11.Chip,
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_material18.Chip,
           {
-            label: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Archived" }),
+            label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Archived" }),
             color: "default",
             size: "small",
             variant: "filled"
@@ -2437,10 +2492,10 @@ var init_UserStatusChipComponent = __esm({
         );
       }
       if (state.profile_locked) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_material11.Chip,
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_material18.Chip,
           {
-            label: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "System Locked" }),
+            label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "System Locked" }),
             color: "error",
             size: "small",
             variant: "filled"
@@ -2448,30 +2503,30 @@ var init_UserStatusChipComponent = __esm({
         );
       }
       if (state.excluded) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_material11.Chip,
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_material18.Chip,
           {
-            label: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Excluded" }),
+            label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Excluded" }),
             size: "small"
           }
         );
       }
       if (state.locked) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_material11.Chip,
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_material18.Chip,
           {
-            label: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Locked" }),
+            label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Locked" }),
             color: "error",
             size: "small",
             onDelete: state.locked_reason ? handleShowReason : void 0,
-            deleteIcon: state.locked_reason ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material11.IconButton, { size: "small", component: "span", sx: { p: 0.2 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_InfoOutlined.default, { fontSize: "small" }) }) : void 0
+            deleteIcon: state.locked_reason ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material18.IconButton, { size: "small", component: "span", sx: { p: 0.2 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_InfoOutlined.default, { fontSize: "small" }) }) : void 0
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_material11.Chip,
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_material18.Chip,
         {
-          label: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Active" }),
+          label: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Active" }),
           color: "success",
           size: "small",
           variant: "outlined"
@@ -2482,38 +2537,38 @@ var init_UserStatusChipComponent = __esm({
 });
 
 // src/UI/components/data.display/UserRoleChipComponent.tsx
-var import_material12, import_jsx_runtime22, UserRoleChipComponent;
+var import_material19, import_jsx_runtime29, UserRoleChipComponent;
 var init_UserRoleChipComponent = __esm({
   "src/UI/components/data.display/UserRoleChipComponent.tsx"() {
     "use strict";
-    import_material12 = require("@mui/material");
+    import_material19 = require("@mui/material");
     init_context();
-    import_jsx_runtime22 = require("react/jsx-runtime");
+    import_jsx_runtime29 = require("react/jsx-runtime");
     UserRoleChipComponent = ({ overrideNamespace, role }) => {
       switch (role) {
         case "superadmin":
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_material12.Chip,
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_material19.Chip,
             {
-              label: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Superadministrator" }),
+              label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Superadministrator" }),
               color: "error",
               size: "small"
             }
           );
         case "admin":
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_material12.Chip,
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_material19.Chip,
             {
-              label: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Administrator" }),
+              label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "Administrator" }),
               color: "primary",
               size: "small"
             }
           );
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_material12.Chip,
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_material19.Chip,
             {
-              label: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "User" }),
+              label: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "system_widgets", children: "User" }),
               variant: "outlined",
               size: "small"
             }
@@ -2523,73 +2578,18 @@ var init_UserRoleChipComponent = __esm({
   }
 });
 
-// src/UI/components/buttons/CopyClipboardButtonComponent.tsx
-var import_react20, import_material13, import_Check3, import_ContentCopy3, import_jsx_runtime23, CopyClipboardButtonComponent;
-var init_CopyClipboardButtonComponent = __esm({
-  "src/UI/components/buttons/CopyClipboardButtonComponent.tsx"() {
-    "use strict";
-    import_react20 = require("react");
-    import_material13 = require("@mui/material");
-    import_Check3 = __toESM(require("@mui/icons-material/Check"));
-    import_ContentCopy3 = __toESM(require("@mui/icons-material/ContentCopy"));
-    init_TranslatableTooltipComponent();
-    import_jsx_runtime23 = require("react/jsx-runtime");
-    CopyClipboardButtonComponent = ({
-      overrideNamespace,
-      textToCopy,
-      copyTooltipText = "Copy",
-      copiedTooltipText = "Copied",
-      namespace = "form_components",
-      resetDelay = 2e3,
-      onCopySuccess,
-      size = "small",
-      sx,
-      ...iconButtonProps
-    }) => {
-      const [copied, setCopied] = (0, import_react20.useState)(false);
-      const handleCopy = async (e) => {
-        e.stopPropagation();
-        if (!textToCopy) return;
-        try {
-          await navigator.clipboard.writeText(textToCopy);
-          setCopied(true);
-          if (onCopySuccess) {
-            onCopySuccess(textToCopy);
-          }
-          setTimeout(() => {
-            setCopied(false);
-          }, resetDelay);
-        } catch (error) {
-          console.error("Failed to copy text to clipboard:", error);
-        }
-      };
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TranslatableTooltipComponent, { title: copied ? copiedTooltipText : copyTooltipText, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_material13.IconButton,
-        {
-          size,
-          onClick: handleCopy,
-          disabled: !textToCopy || iconButtonProps.disabled,
-          sx: { p: 0.25, ...sx },
-          ...iconButtonProps,
-          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_Check3.default, { fontSize: size === "large" ? "medium" : "small", color: "success" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ContentCopy3.default, { fontSize: size === "large" ? "medium" : "small" })
-        }
-      ) }) });
-    };
-  }
-});
-
 // src/UI/components/data.display/UserPopoverComponent.tsx
 var UserPopoverComponent_exports = {};
 __export(UserPopoverComponent_exports, {
   UserPopoverComponent: () => UserPopoverComponent,
   default: () => UserPopoverComponent_default
 });
-var import_react21, import_material14, import_icons_material2, import_jsx_runtime24, useUserStatus, UserPopoverComponent, UserPopoverComponent_default;
+var import_react25, import_material20, import_icons_material2, import_jsx_runtime30, useUserStatus, UserPopoverComponent, UserPopoverComponent_default;
 var init_UserPopoverComponent = __esm({
   "src/UI/components/data.display/UserPopoverComponent.tsx"() {
     "use strict";
-    import_react21 = require("react");
-    import_material14 = require("@mui/material");
+    import_react25 = require("react");
+    import_material20 = require("@mui/material");
     import_icons_material2 = require("@mui/icons-material");
     init_UserStatusChipComponent();
     init_UserRoleChipComponent();
@@ -2599,11 +2599,11 @@ var init_UserPopoverComponent = __esm({
     init_UserSettingsProvider();
     init_TranslatableTooltipComponent();
     init_session_service();
-    import_jsx_runtime24 = require("react/jsx-runtime");
+    import_jsx_runtime30 = require("react/jsx-runtime");
     useUserStatus = (supabase, userId, open) => {
-      const [lastSeenAt, setLastSeenAt] = (0, import_react21.useState)(null);
-      const [loading, setLoading] = (0, import_react21.useState)(true);
-      (0, import_react21.useEffect)(() => {
+      const [lastSeenAt, setLastSeenAt] = (0, import_react25.useState)(null);
+      const [loading, setLoading] = (0, import_react25.useState)(true);
+      (0, import_react25.useEffect)(() => {
         if (!userId || !open) {
           setLastSeenAt(null);
           setLoading(false);
@@ -2652,13 +2652,13 @@ var init_UserPopoverComponent = __esm({
       const { activeCompanyId, membership: currentMembership } = useAuth();
       const { openChatWithUser } = useUserSettings();
       const { formatDate, formatRelativeTime } = useLocalization();
-      const [profileData, setProfileData] = (0, import_react21.useState)(null);
-      const [membershipData, setMembershipData] = (0, import_react21.useState)(null);
-      const [avatarUrl, setAvatarUrl] = (0, import_react21.useState)(null);
-      const [coverUrl, setCoverUrl] = (0, import_react21.useState)(null);
-      const [loading, setLoading] = (0, import_react21.useState)(true);
+      const [profileData, setProfileData] = (0, import_react25.useState)(null);
+      const [membershipData, setMembershipData] = (0, import_react25.useState)(null);
+      const [avatarUrl, setAvatarUrl] = (0, import_react25.useState)(null);
+      const [coverUrl, setCoverUrl] = (0, import_react25.useState)(null);
+      const [loading, setLoading] = (0, import_react25.useState)(true);
       const { lastSeenAt, isOnline } = useUserStatus(supabase, userId, open);
-      (0, import_react21.useEffect)(() => {
+      (0, import_react25.useEffect)(() => {
         if (!open || !userId || !activeCompanyId) return;
         let isMounted = true;
         setLoading(true);
@@ -2704,7 +2704,7 @@ var init_UserPopoverComponent = __esm({
       }, [open, userId, currentMembership?.id, activeCompanyId]);
       const getStatusChip = () => {
         if (!profileData) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UserStatusChipComponent, { state: { profile_archived: profileData.archived, profile_locked: profileData.locked, excluded: membershipData?.excluded || false, locked: membershipData?.locked || false, locked_reason: membershipData?.locked_reason || "" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UserStatusChipComponent, { state: { profile_archived: profileData.archived, profile_locked: profileData.locked, excluded: membershipData?.excluded || false, locked: membershipData?.locked || false, locked_reason: membershipData?.locked_reason || "" } });
       };
       const getStatusTypographyColor = (isOnline2, lastSeenAt2) => {
         if (isOnline2) return "success";
@@ -2725,8 +2725,8 @@ var init_UserPopoverComponent = __esm({
         return "inherit";
       };
       const canChat = currentMembership && membershipData && currentMembership.id !== membershipData.id;
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_material14.Popover,
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_material20.Popover,
         {
           open,
           anchorEl,
@@ -2744,9 +2744,9 @@ var init_UserPopoverComponent = __esm({
               }
             }
           },
-          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.CircularProgress, { size: 28 }) }) : profileData ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-              import_material14.Box,
+          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.CircularProgress, { size: 28 }) }) : profileData ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+              import_material20.Box,
               {
                 sx: {
                   position: "relative",
@@ -2755,8 +2755,8 @@ var init_UserPopoverComponent = __esm({
                   bgcolor: "action.selected"
                 },
                 children: [
-                  coverUrl && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                    import_material14.Box,
+                  coverUrl && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    import_material20.Box,
                     {
                       component: "img",
                       src: coverUrl,
@@ -2771,8 +2771,8 @@ var init_UserPopoverComponent = __esm({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                    import_material14.IconButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    import_material20.IconButton,
                     {
                       size: "small",
                       onClick: onClose,
@@ -2789,16 +2789,16 @@ var init_UserPopoverComponent = __esm({
                           transform: "scale(1.1)"
                         }
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.Close, { fontSize: "small" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Close, { fontSize: "small" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Box, { sx: { p: 2, pt: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-end", mt: "-18px", mb: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_material14.Badge,
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Box, { sx: { p: 2, pt: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-end", mt: "-18px", mb: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  import_material20.Badge,
                   {
                     overlap: "circular",
                     anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -2834,8 +2834,8 @@ var init_UserPopoverComponent = __esm({
                         }
                       }
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                      import_material14.Avatar,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      import_material20.Avatar,
                       {
                         src: avatarUrl || coverUrl || void 0,
                         sx: {
@@ -2853,54 +2853,54 @@ var init_UserPopoverComponent = __esm({
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Box, { sx: { overflow: "hidden", pb: 0.5 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.2 }, noWrap: true, children: profileData.display_name || `${profileData.first_name || ""} ${profileData.last_name || ""}` }),
-                  membershipData?.employee_post && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: membershipData.employee_post })
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Box, { sx: { overflow: "hidden", pb: 0.5 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.2 }, noWrap: true, children: profileData.display_name || `${profileData.first_name || ""} ${profileData.last_name || ""}` }),
+                  membershipData?.employee_post && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: membershipData.employee_post })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1, sx: { my: 1, flexWrap: "wrap", gap: 0.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { my: 1, flexWrap: "wrap", gap: 0.5 }, children: [
                 getStatusChip(),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UserRoleChipComponent, { role: membershipData?.role || "user" })
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UserRoleChipComponent, { role: membershipData?.role || "user" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Divider, { sx: { my: 1.5 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { spacing: 1, sx: { fontSize: "0.875rem", mb: 1.5 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.AccessTime, { fontSize: "small", color: getStatusIconColor(isOnline, lastSeenAt) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "body2", color: getStatusTypographyColor(isOnline, lastSeenAt), children: isOnline ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Online" }) : lastSeenAt ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Last seen" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Divider, { sx: { my: 1.5 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { spacing: 1, sx: { fontSize: "0.875rem", mb: 1.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.AccessTime, { fontSize: "small", color: getStatusIconColor(isOnline, lastSeenAt) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: getStatusTypographyColor(isOnline, lastSeenAt), children: isOnline ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Online" }) : lastSeenAt ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Last seen" }),
                     ":",
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: formatRelativeTime(lastSeenAt) })
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Offline" }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("strong", { children: formatRelativeTime(lastSeenAt) })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Offline" }) })
                 ] }),
-                profileData.email && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.Email, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: profileData.email }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CopyClipboardButtonComponent, { textToCopy: profileData.email })
+                profileData.email && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Email, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: profileData.email }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CopyClipboardButtonComponent, { textToCopy: profileData.email })
                 ] }),
-                membershipData?.employee_post && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.Work, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: membershipData.employee_post }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CopyClipboardButtonComponent, { textToCopy: membershipData.employee_post })
+                membershipData?.employee_post && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Work, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.primary", noWrap: true, sx: { flexGrow: 1 }, children: membershipData.employee_post }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CopyClipboardButtonComponent, { textToCopy: membershipData.employee_post })
                 ] }),
-                profileData.phone && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.Phone, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "body2", color: "text.primary", children: profileData.phone })
+                profileData.phone && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Phone, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.primary", children: profileData.phone })
                 ] }),
-                profileData.birthday && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.Cake, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "body2", color: "text.primary", children: formatDate(profileData.birthday) })
+                profileData.birthday && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.Cake, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Typography, { variant: "body2", color: "text.primary", children: formatDate(profileData.birthday) })
                 ] }),
-                membershipData?.created_at && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.CalendarToday, { fontSize: "small" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Typography, { variant: "body2", color: "text.primary", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "In company from" }),
+                membershipData?.created_at && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.CalendarToday, { fontSize: "small" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Typography, { variant: "body2", color: "text.primary", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "In company from" }),
                     ": ",
                     formatDate(membershipData.created_at)
                   ] })
                 ] }),
-                profileData.description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_material14.Typography,
+                profileData.description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  import_material20.Typography,
                   {
                     variant: "caption",
                     color: "text.secondary",
@@ -2915,28 +2915,28 @@ var init_UserPopoverComponent = __esm({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Divider, { sx: { my: 1 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Stack, { direction: "row", spacing: 1, sx: { justifyContent: "space-around", pt: 0.5 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Send a notification" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.NotificationsNone, { fontSize: "small" }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set a task" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.AssignmentOutlined, { fontSize: "small" }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Start a chat" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_material14.IconButton,
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Divider, { sx: { my: 1 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material20.Stack, { direction: "row", spacing: 1, sx: { justifyContent: "space-around", pt: 0.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Send a notification" }), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.NotificationsNone, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set a task" }), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.IconButton, { size: "small", color: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.AssignmentOutlined, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Start a chat" }), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  import_material20.IconButton,
                   {
                     size: "small",
                     color: "primary",
                     disabled: !canChat,
                     onClick: () => membershipData && openChatWithUser(membershipData.id),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons_material2.ChatBubble, { fontSize: "small" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_material2.ChatBubble, { fontSize: "small" })
                   }
                 ) })
               ] })
             ] })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            import_material14.Typography,
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material20.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_material20.Typography,
             {
               color: "error",
               variant: "body2",
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Failed to load user data" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Failed to load user data" })
             }
           ) })
         }
@@ -2953,19 +2953,43 @@ __export(index_exports, {
   AppSettingsProvider: () => AppSettingsProvider,
   AuthProvider: () => AuthProvider,
   BreadcrumbProvider: () => BreadcrumbProvider,
+  ButtonComponent: () => ButtonComponent,
+  CheckboxComponent: () => CheckboxComponent,
+  CollapsedContainerComponent: () => CollapsedContainerComponent,
   ConfirmationProvider: () => ConfirmationProvider,
+  CopyClipboardButtonComponent: () => CopyClipboardButtonComponent,
+  EmailInputComponent: () => EmailInputComponent,
+  ErrorAlertComponent: () => ErrorAlertComponent,
+  ExpandableNoteComponent: () => ExpandableNoteComponent,
+  FilterContainerComponent: () => FilterContainerComponent,
   Hooks: () => Hooks,
   LocalizationProvider: () => LocalizationProvider,
+  MyAvatarComponent: () => MyAvatarComponent,
+  NumberInputComponent: () => NumberInputComponent,
+  PageComponent: () => PageComponent,
+  PageLinkComponent: () => PageLinkComponent,
+  ProtectedLanguageSelector: () => LanguageSelector,
   Providers: () => Providers,
+  PublicLanguageSelector: () => PublicLanguageSelector,
+  RefreshButtonComponent: () => RefreshButtonComponent,
+  SearchComponent: () => SearchComponent,
+  SelectComponent: () => SelectComponent,
   Services: () => Services,
   SupabaseProvider: () => SupabaseProvider,
+  SwitchComponent: () => SwitchComponent,
+  TextFieldComponent: () => TextFieldComponent,
   ThemeProvider: () => ThemeProvider,
   ToastProvider: () => ToastProvider,
+  TranslatableTooltipComponent: () => TranslatableTooltipComponent,
   TranslateProvider: () => TranslateProvider,
   TranslateText: () => TranslateText,
   TranslationEditProvider: () => TranslationEditProvider,
-  UI: () => UI,
+  UrlComponent: () => UrlComponent,
+  UserAvatarComponent: () => UserAvatarComponent,
+  UserPopoverComponent: () => UserPopoverComponent,
+  UserRoleChipComponent: () => UserRoleChipComponent,
   UserSettingsProvider: () => UserSettingsProvider,
+  UserStatusChipComponent: () => UserStatusChipComponent,
   Utils: () => Utils,
   defaultUserSettings: () => defaultUserSettings,
   initI18n: () => initI18n,
@@ -3417,248 +3441,54 @@ var NumberInputComponent = ({
   );
 };
 
-// src/UI/components/inputs/UrlComponent.tsx
+// src/UI/components/inputs/EmailInputComponent.tsx
 var import_react10 = require("react");
-var import_material6 = require("@mui/material");
-var import_Link = __toESM(require("@mui/icons-material/Link"));
-var import_Launch2 = __toESM(require("@mui/icons-material/Launch"));
-var import_ContentCopy2 = __toESM(require("@mui/icons-material/ContentCopy"));
-var import_Check2 = __toESM(require("@mui/icons-material/Check"));
-var import_EditNote = __toESM(require("@mui/icons-material/EditNote"));
-var import_Lock2 = __toESM(require("@mui/icons-material/Lock"));
-init_TranslateText();
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function UrlComponent({
-  overrideNamespace,
-  label,
-  value,
+var EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+var EmailInputComponent = ({
+  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] = (0, import_react10.useState)(false);
-  const [anchorEl, setAnchorEl] = (0, import_react10.useState)(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;
+  onBlur,
+  error: externalError,
+  helperText: externalHelperText,
+  invalidEmailError = "Invalid email address",
+  disableValidation = false,
+  onValidationChange,
+  ...props
+}) => {
+  const [internalError, setInternalError] = (0, import_react10.useState)(null);
+  const validateEmail = (val) => {
+    if (disableValidation) return true;
+    const stringVal = String(val ?? "").trim();
+    if (!stringVal) {
+      setInternalError(null);
+      onValidationChange?.(true);
+      return true;
     }
-    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 isValid = EMAIL_REGEX.test(stringVal);
+    const errorMessage = isValid ? null : invalidEmailError;
+    setInternalError(errorMessage);
+    onValidationChange?.(isValid);
+    return isValid;
   };
-  const handleOpenLink = (e) => {
-    e.stopPropagation();
-    if (finalUrl) {
-      window.open(finalUrl, targetAttribute, openInNewTab ? "noopener,noreferrer" : void 0);
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (internalError) {
+      validateEmail(newValue);
     }
-  };
-  const handleInputClick = (e) => {
-    if (isViewMode && finalUrl) {
-      handleOpenLink(e);
+    if (onChange) {
+      onChange(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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_material6.TextField,
-      {
-        label: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime11.jsx)(import_material6.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Link.default, { fontSize: "small", color: isViewMode && finalUrl ? "primary" : "action" }) }),
-            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material6.InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
-              !isViewMode && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Tooltip, { title: currentTitle ? `Title: "${currentTitle}"` : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set link title" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                import_material6.IconButton,
-                {
-                  size: "small",
-                  onClick: handleOpenTitleMenu,
-                  color: currentTitle ? "primary" : "default",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_EditNote.default, { fontSize: "small" })
-                }
-              ) }),
-              finalUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Tooltip, { title: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copied!" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copy link" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.IconButton, { size: "small", onClick: handleCopy, color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Check2.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ContentCopy2.default, { fontSize: "small" }) }) }),
-              isViewMode && showLock && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                import_material6.IconButton,
-                {
-                  size: "small",
-                  disabled: true,
-                  edge: "end",
-                  "aria-label": "locked input",
-                  sx: {
-                    "&.Mui-disabled": {
-                      color: "text.secondary"
-                    }
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Lock2.default, { fontSize: "small" })
-                }
-              ) }),
-              finalUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Open link" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.IconButton, { size: "small", onClick: handleOpenLink, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Launch2.default, { fontSize: "small", color: isViewMode ? "primary" : "action" }) }) })
-            ] })
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      import_material6.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__ */ (0, import_jsx_runtime11.jsx)(import_material6.Typography, { variant: "subtitle2", sx: { mb: 1, fontWeight: "bold" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Link Title (Anchor)" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material6.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Specify the text to display instead of the URL address" }),
-            ":"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_material6.TextField,
-            {
-              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__ */ (0, import_jsx_runtime11.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-end", mt: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material6.Button, { size: "small", variant: "contained", onClick: handleCloseTitleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" }) }) })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/UI/index.ts
-init_TranslatableTooltipComponent();
-
-// src/UI/components/inputs/EmailInputComponent.tsx
-var import_react11 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-var EmailInputComponent = ({
-  value = "",
-  onChange,
-  onBlur,
-  error: externalError,
-  helperText: externalHelperText,
-  invalidEmailError = "Invalid email address",
-  disableValidation = false,
-  onValidationChange,
-  ...props
-}) => {
-  const [internalError, setInternalError] = (0, import_react11.useState)(null);
-  const validateEmail = (val) => {
-    if (disableValidation) return true;
-    const stringVal = String(val ?? "").trim();
-    if (!stringVal) {
-      setInternalError(null);
-      onValidationChange?.(true);
-      return true;
-    }
-    const isValid = EMAIL_REGEX.test(stringVal);
-    const errorMessage = isValid ? null : invalidEmailError;
-    setInternalError(errorMessage);
-    onValidationChange?.(isValid);
-    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 handleBlur = (e) => {
+    validateEmail(e.target.value);
+    if (onBlur) {
+      onBlur(e);
+    }
   };
   const hasError = Boolean(externalError || internalError);
   const displayHelperText = externalHelperText || internalError || void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     TextFieldComponent,
     {
       type: "email",
@@ -3672,1284 +3502,1025 @@ var EmailInputComponent = ({
   );
 };
 
-// src/UI/components/data.display/UserAvatarComponent.tsx
-var import_react22 = require("react");
-var import_material15 = require("@mui/material");
+// src/UI/components/inputs/SearchComponent.tsx
+var import_react20 = require("react");
+var import_react_i18next5 = require("react-i18next");
+var import_material10 = require("@mui/material");
+var import_Translate4 = __toESM(require("@mui/icons-material/Translate"));
+var import_Clear2 = __toESM(require("@mui/icons-material/Clear"));
 init_context();
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var LazyUserPopover = (0, import_react22.lazy)(() => Promise.resolve().then(() => (init_UserPopoverComponent(), UserPopoverComponent_exports)));
-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] = (0, import_react22.useState)(null);
-  const [hasInteracted, setHasInteracted] = (0, import_react22.useState)(false);
-  const [resolvedAvatarUrl, setResolvedAvatarUrl] = (0, import_react22.useState)(null);
-  const canShowPopover = !disablePopover && Boolean(userId);
-  (0, import_react22.useEffect)(() => {
-    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();
+init_translation_service();
+init_TranslationDialog();
+init_TranslatableTooltipComponent();
+
+// src/hooks/useDebounce.ts
+var import_react19 = require("react");
+function useDebounce(value, delay = 500) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react19.useState)(value);
+  (0, import_react19.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
     return () => {
-      isMounted = false;
+      clearTimeout(timer);
     };
-  }, [avatarUrl]);
-  const handleClick = (event) => {
-    event.stopPropagation();
-    event.preventDefault();
-    if (canShowPopover) {
-      setAnchorEl(event.currentTarget);
-      if (!hasInteracted) {
-        setHasInteracted(true);
-      }
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/UI/components/inputs/SearchComponent.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SearchComponent = ({
+  overrideNamespace,
+  label = "",
+  value = "",
+  onChange,
+  onClear,
+  placeholderKey,
+  clearTooltip = "Clear",
+  debounceDelay = 500,
+  onDebounceChange,
+  slotProps,
+  ...restProps
+}) => {
+  const supabase = useSupabase();
+  const namespace = useTranslationNamespace();
+  const { t, i18n: i18n2 } = (0, import_react_i18next5.useTranslation)(namespace);
+  const { isTranslationMode } = useTranslationEdit();
+  const [isDialogOpen, setIsDialogOpen] = (0, import_react20.useState)(false);
+  const [localValue, setLocalValue] = (0, import_react20.useState)(String(value ?? ""));
+  const debouncedValue = useDebounce(localValue, debounceDelay);
+  (0, import_react20.useEffect)(() => {
+    setLocalValue(String(value ?? ""));
+  }, [value]);
+  (0, import_react20.useEffect)(() => {
+    if (onDebounceChange) {
+      onDebounceChange(debouncedValue);
+    }
+    if (onChange && debouncedValue !== String(value ?? "")) {
+      const syntheticEvent = {
+        target: { value: debouncedValue },
+        currentTarget: { value: debouncedValue }
+      };
+      onChange(syntheticEvent);
     }
+  }, [debouncedValue]);
+  const hasValue = localValue.length > 0;
+  const handleChange = (e) => {
+    setLocalValue(e.target.value);
   };
-  const handleClose = (event) => {
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setLocalValue("");
+    if (onClear) {
+      onClear();
+    }
+    if (onChange) {
+      const syntheticEvent = {
+        ...e,
+        target: { ...e.target, value: "" },
+        currentTarget: { ...e.currentTarget, value: "" }
+      };
+      onChange(syntheticEvent);
     }
-    setAnchorEl(null);
   };
-  const isPopoverOpen = Boolean(anchorEl);
-  const initials = getInitials(displayName || "");
-  const getTooltip = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Typography, { component: "div", variant: "caption", children: displayName }),
-    displayName && employeePost && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Typography, { component: "div", variant: "caption", children: employeePost })
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Tooltip, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      import_material15.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__ */ (0, import_jsx_runtime25.jsx)(import_react22.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      LazyUserPopover,
-      {
-        userId,
-        anchorEl,
-        open: isPopoverOpen,
-        onClose: handleClose
-      }
-    ) })
-  ] });
-};
-
-// src/UI/index.ts
-init_CopyClipboardButtonComponent();
-init_UserRoleChipComponent();
-init_UserStatusChipComponent();
-init_UserPopoverComponent();
-
-// src/UI/components/data.display/MyAvatarComponent.tsx
-var import_react23 = require("react");
-var import_material16 = require("@mui/material");
-init_context();
-var import_jsx_runtime26 = require("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] = (0, import_react23.useState)(null);
-  const handlePopoverOpen = (event) => {
-    if (!disablePopover) {
-      setAnchorEl(event.currentTarget);
+  const translatedPlaceholder = placeholderKey ? t(placeholderKey) : void 0;
+  const handleSaveTranslations = async (newValues, contextHint) => {
+    if (!placeholderKey) return;
+    const upsertData = Object.entries(newValues).map(([langCode, text]) => ({
+      lang_code: langCode,
+      namespace,
+      key: placeholderKey,
+      value: text,
+      context_hint: contextHint
+    }));
+    const { error } = await supabase.from("translations").upsert(upsertData, { onConflict: "lang_code,namespace,key" });
+    if (error) {
+      alert("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u043F\u0456\u0434 \u0447\u0430\u0441 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043D\u043D\u044F \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043D\u0438\u0445");
+      throw error;
     }
+    await translationService.incrementVersion(supabase, namespace, Object.keys(newValues));
+    Object.entries(newValues).forEach(([langCode, text]) => {
+      i18n2.addResource(langCode, namespace, placeholderKey, text);
+    });
   };
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
+  const renderEndAdornment = () => {
+    const rawInputProps = slotProps?.input;
+    const isInputObject = typeof rawInputProps === "object" && rawInputProps !== null;
+    const existingEndAdornment = isInputObject && "endAdornment" in rawInputProps ? rawInputProps.endAdornment : void 0;
+    if (!hasValue && (!isTranslationMode || !placeholderKey)) {
+      return existingEndAdornment;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      existingEndAdornment,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material10.InputAdornment, { position: "end", children: [
+        hasValue && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_material10.IconButton,
+          {
+            size: "small",
+            onClick: handleClear,
+            edge: "end",
+            "aria-label": "clear input",
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Clear2.default, { fontSize: "small" })
+          }
+        ) }),
+        isTranslationMode && placeholderKey && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material10.Tooltip, { title: `Translate placeholder: "${placeholderKey}"`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_material10.IconButton,
+          {
+            size: "small",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setIsDialogOpen(true);
+            },
+            sx: {
+              color: "#d97706",
+              backgroundColor: "rgba(254, 243, 199, 0.6)",
+              border: "1px dashed #f59e0b",
+              p: "3px",
+              ml: 0.5,
+              "&:hover": {
+                backgroundColor: "#fef08a"
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Translate4.default, { fontSize: "small" })
+          }
+        ) })
+      ] })
+    ] });
   };
-  const isPopoverOpen = Boolean(anchorEl);
-  if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_material16.Skeleton,
-      {
-        variant: "circular",
-        width: size,
-        height: size,
-        sx: { display: "inline-block", flexShrink: 0, ...sx }
-      }
-    );
-  }
-  const initials = getInitials2(userProfile?.display_name || "");
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_material16.Avatar,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_material10.TextField,
       {
-        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
+        ...restProps,
+        label: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TranslateText, { overrideNamespace, children: label }) : label,
+        value: localValue,
+        onChange: handleChange,
+        placeholder: translatedPlaceholder,
+        slotProps: {
+          ...slotProps,
+          input: {
+            ...slotProps?.input,
+            endAdornment: renderEndAdornment()
+          }
+        }
       }
     ),
-    !disablePopover && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_material16.Popover,
+    placeholderKey && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      TranslationDialog,
       {
-        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__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
-          userProfile?.email && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "caption", color: "text.secondary", children: userProfile.email })
-        ] })
+        open: isDialogOpen,
+        onClose: () => setIsDialogOpen(false),
+        translationKey: placeholderKey,
+        namespace,
+        onSave: handleSaveTranslations
       }
     )
   ] });
 };
 
-// src/i18n/LanguageSelector.tsx
-var import_react24 = require("react");
-var import_react_i18next5 = require("react-i18next");
-var import_material17 = require("@mui/material");
-init_LocalizationProvider();
-init_UserSettingsProvider();
-init_SupabaseProvider();
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var LanguageSelector = () => {
-  const supabase = useSupabase();
-  const { i18n: i18n2 } = (0, import_react_i18next5.useTranslation)();
-  const [languages, setLanguages] = (0, import_react24.useState)([]);
-  const [loading, setLoading] = (0, import_react24.useState)(true);
-  const { changeLanguage } = useLocalization();
-  const { settings: userSettings, setLanguage } = useUserSettings();
-  const [anchorEl, setAnchorEl] = (0, import_react24.useState)(null);
-  const open = Boolean(anchorEl);
-  (0, import_react24.useEffect)(() => {
-    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);
+// src/UI/components/inputs/SelectComponent.tsx
+var import_material11 = require("@mui/material");
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+init_context();
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var SelectComponent = ({
+  overrideNamespace,
+  label,
+  value,
+  options,
+  onChange,
+  id = "translated-select",
+  fullWidth,
+  size = "medium",
+  multiple = false,
+  withCheckboxes = false,
+  clearable = true,
+  maxSelect,
+  disabled,
+  maxDisplayedTags = 2,
+  helperText,
+  defaultValueOnClear,
+  sx,
+  ...restProps
+}) => {
+  const labelId = `${id}-label`;
+  const safeValue = multiple ? Array.isArray(value) ? value : [] : value ?? "";
+  const selectedArray = multiple ? safeValue : [];
+  const isLimitReached = Boolean(multiple && maxSelect && selectedArray.length >= maxSelect);
+  const hasValue = multiple ? selectedArray.length > 0 : safeValue !== "" && safeValue !== null && safeValue !== void 0;
+  const handleChange = (event, child) => {
+    if (multiple && maxSelect) {
+      const newValue = event.target.value;
+      if (newValue.length > maxSelect) {
+        return;
       }
-    };
-    fetchLanguages();
-  }, []);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
+    }
+    onChange?.(event, child);
   };
-  const handleClose = () => {
-    setAnchorEl(null);
+  const handleClear = (e) => {
+    e.stopPropagation();
+    if (!onChange) return;
+    const emptyValue = multiple ? [] : "";
+    const targetValue = defaultValueOnClear !== void 0 ? defaultValueOnClear : emptyValue;
+    const syntheticEvent = {
+      target: {
+        value: targetValue,
+        name: restProps.name
+      }
+    };
+    onChange(syntheticEvent, null);
   };
-  const handleSelectLanguage = (langCode) => {
-    changeLanguage(langCode);
-    setLanguage(langCode);
-    handleClose();
+  const renderValueHandler = (selected) => {
+    if (!multiple) return void 0;
+    const currentSelected = selected;
+    if (currentSelected.length === 0) return null;
+    const selectedOptions = options.filter((opt) => currentSelected.includes(opt.value));
+    const visibleLabels = selectedOptions.slice(0, maxDisplayedTags).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value));
+    const hiddenCount = selectedOptions.length - maxDisplayedTags;
+    if (hiddenCount > 0) {
+      return `${visibleLabels.join(", ")} (+${hiddenCount})`;
+    }
+    return visibleLabels.join(", ");
   };
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
-  }
-  const rawCurrentLang = i18n2.language || "uk";
-  const currentLangCode = rawCurrentLang.split("-")[0];
-  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_material17.IconButton,
-      {
-        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__ */ (0, import_jsx_runtime27.jsx)(
-          import_material17.Box,
+  const isSmall = size === "small";
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_material11.Tooltip,
+    {
+      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__ */ (0, import_jsx_runtime21.jsxs)(import_material11.FormControl, { fullWidth, size, sx: { mt: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material11.InputLabel, { id: labelId, size: isSmall ? "small" : "medium", children: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace, children: label }) : label }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_material11.Select,
           {
+            labelId,
+            id,
+            value: safeValue,
+            label: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranslateText, { overrideNamespace, children: label }) : label,
+            size,
+            multiple,
+            disabled,
+            onChange: handleChange,
+            renderValue: multiple ? renderValueHandler : void 0,
+            ...restProps,
+            endAdornment: clearable && hasValue && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material11.InputAdornment, { position: "end", sx: { mr: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_material11.IconButton,
+              {
+                size: "small",
+                onClick: handleClear,
+                "aria-label": "clear selection",
+                edge: "end",
+                sx: { p: 0.5 },
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Close.default, { fontSize: "small" })
+              }
+            ) }) : null,
             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__ */ (0, import_jsx_runtime27.jsx)(
-      import_material17.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__ */ (0, import_jsx_runtime27.jsxs)(
-            import_material17.MenuItem,
-            {
-              selected: isSelected,
-              onClick: () => handleSelectLanguage(lang.code),
-              sx: {
+              // 1. Задаем фиксированную высоту для всего контейнера инпута
+              height: isSmall ? "40px" : "56px",
+              minHeight: isSmall ? "40px" : "56px",
+              // 2. Выравниваем внутренний класс текстового поля
+              "& .MuiSelect-select": {
                 display: "flex",
                 alignItems: "center",
-                gap: 1.5,
-                py: 1,
-                px: 2
+                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"
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  import_material17.Box,
-                  {
-                    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__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
-              ]
+              // 3. Корректируем иконку стрелки выпадающего списка
+              "& .MuiSelect-icon": {
+                top: "calc(50% - 12px)"
+              },
+              // 4. Корректируем расположение иконки очистки
+              "& .MuiInputAdornment-root": {
+                maxHeight: "100%",
+                height: "100%",
+                alignItems: "center"
+              },
+              ...sx
             },
-            lang.code
-          );
-        })
-      }
-    )
-  ] });
+            children: options.map((option) => {
+              const isSelected = multiple && selectedArray.includes(option.value);
+              const isDisabled = Boolean(isLimitReached && !isSelected);
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                import_material11.MenuItem,
+                {
+                  value: option.value,
+                  disabled: isDisabled,
+                  children: [
+                    multiple && withCheckboxes && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material11.Checkbox, { checked: isSelected, size, disabled: isDisabled }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      import_material11.ListItemText,
+                      {
+                        primary: option.isItalic ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("em", { children: option.label }) : option.label
+                      }
+                    )
+                  ]
+                },
+                String(option.value)
+              );
+            })
+          }
+        ),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material11.FormHelperText, { children: helperText })
+      ] })
+    }
+  );
 };
-var PublicLanguageSelector = () => {
-  const supabase = useSupabase();
-  const { i18n: i18n2 } = (0, import_react_i18next5.useTranslation)();
-  const { changeLanguage } = useLocalization();
-  const [languages, setLanguages] = (0, import_react24.useState)([]);
-  const [loading, setLoading] = (0, import_react24.useState)(true);
-  const [anchorEl, setAnchorEl] = (0, import_react24.useState)(null);
-  const open = Boolean(anchorEl);
-  (0, import_react24.useEffect)(() => {
-    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);
+
+// src/UI/components/inputs/CheckboxComponent.tsx
+var import_material12 = require("@mui/material");
+init_TranslateText();
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var CheckboxComponent = ({
+  checked = false,
+  onChange,
+  label,
+  checkedLabel,
+  uncheckedLabel,
+  overrideNamespace,
+  checkboxProps,
+  ...props
+}) => {
+  const currentLabel = label ?? (checked ? checkedLabel : uncheckedLabel);
+  const renderLabel = (node) => {
+    if (typeof node === "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TranslateText, { overrideNamespace, children: node });
+    }
+    return node;
   };
-  const handleSelectLanguage = (langCode) => {
-    changeLanguage(langCode);
-    handleClose();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material12.Box, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_material12.FormControlLabel,
+    {
+      control: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_material12.Checkbox,
+        {
+          checked,
+          onChange,
+          ...checkboxProps
+        }
+      ),
+      label: renderLabel(currentLabel),
+      ...props
+    }
+  ) });
+};
+
+// src/UI/components/inputs/SwitchComponent.tsx
+var import_material13 = require("@mui/material");
+init_TranslateText();
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var SwitchComponent = ({
+  checked = false,
+  onChange,
+  label,
+  checkedLabel,
+  uncheckedLabel,
+  overrideNamespace,
+  switchProps,
+  ...props
+}) => {
+  const currentLabel = label ?? (checked ? checkedLabel : uncheckedLabel);
+  const renderLabel = (node) => {
+    if (typeof node === "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TranslateText, { overrideNamespace, children: node });
+    }
+    return node;
   };
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
-  }
-  const rawCurrentLang = i18n2.language || "uk";
-  const currentLangCode = rawCurrentLang.split("-")[0];
-  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_material17.IconButton,
-      {
-        onClick: handleClick,
-        size: "small",
-        "aria-controls": open ? "language-menu" : void 0,
-        "aria-haspopup": "true",
-        "aria-expanded": open ? "true" : void 0,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_material13.Box, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_material13.FormControlLabel,
+    {
+      control: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_material13.Switch,
+        {
+          checked,
+          onChange,
+          ...switchProps
+        }
+      ),
+      label: renderLabel(currentLabel),
+      ...props
+    }
+  ) });
+};
+
+// src/UI/components/inputs/UrlComponent.tsx
+var import_react21 = require("react");
+var import_material14 = require("@mui/material");
+var import_Link = __toESM(require("@mui/icons-material/Link"));
+var import_Launch2 = __toESM(require("@mui/icons-material/Launch"));
+var import_ContentCopy2 = __toESM(require("@mui/icons-material/ContentCopy"));
+var import_Check2 = __toESM(require("@mui/icons-material/Check"));
+var import_EditNote = __toESM(require("@mui/icons-material/EditNote"));
+var import_Lock2 = __toESM(require("@mui/icons-material/Lock"));
+init_TranslateText();
+var import_jsx_runtime24 = require("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] = (0, import_react21.useState)(false);
+  const [anchorEl, setAnchorEl] = (0, import_react21.useState)(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__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_material14.TextField,
+      {
+        label: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(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: {
-          p: 1,
-          borderRadius: 2,
-          transition: "background-color 0.2s",
-          "&:hover": {
-            backgroundColor: "action.hover"
-          }
+          "& .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
         },
-        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_material17.Box,
-          {
-            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 }
+        slotProps: {
+          htmlInput: {
+            readOnly,
+            onClick: handleInputClick
+          },
+          input: {
+            startAdornment: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_Link.default, { fontSize: "small", color: isViewMode && finalUrl ? "primary" : "action" }) }),
+            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
+              !isViewMode && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Tooltip, { title: currentTitle ? `Title: "${currentTitle}"` : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set link title" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_material14.IconButton,
+                {
+                  size: "small",
+                  onClick: handleOpenTitleMenu,
+                  color: currentTitle ? "primary" : "default",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_EditNote.default, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Tooltip, { title: copied ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copied!" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copy link" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.IconButton, { size: "small", onClick: handleCopy, color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_Check2.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ContentCopy2.default, { fontSize: "small" }) }) }),
+              isViewMode && showLock && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_material14.IconButton,
+                {
+                  size: "small",
+                  disabled: true,
+                  edge: "end",
+                  "aria-label": "locked input",
+                  sx: {
+                    "&.Mui-disabled": {
+                      color: "text.secondary"
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_Lock2.default, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Open link" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.IconButton, { size: "small", onClick: handleOpenLink, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_Launch2.default, { fontSize: "small", color: isViewMode ? "primary" : "action" }) }) })
+            ] })
           }
-        )
+        }
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_material17.Menu,
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      import_material14.Popover,
       {
-        id: "language-menu",
+        open: isTitlePopoverOpen,
         anchorEl,
-        open,
-        onClose: handleClose,
+        onClose: handleCloseTitleMenu,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
         slotProps: {
-          paper: {
-            elevation: 3,
-            sx: {
-              mt: 1,
-              minWidth: 150,
-              borderRadius: 2
-            }
-          }
+          paper: { sx: { p: 2, width: 280 } }
         },
-        transformOrigin: { horizontal: "right", vertical: "top" },
-        anchorOrigin: { horizontal: "right", vertical: "bottom" },
-        children: languages.map((lang) => {
-          const isSelected = lang.code === currentLangCode;
-          return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-            import_material17.MenuItem,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "subtitle2", sx: { mb: 1, fontWeight: "bold" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Link Title (Anchor)" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Specify the text to display instead of the URL address" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_material14.TextField,
             {
-              selected: isSelected,
-              onClick: () => handleSelectLanguage(lang.code),
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 1.5,
-                py: 1,
-                px: 2
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  import_material17.Box,
-                  {
-                    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__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
-              ]
-            },
-            lang.code
-          );
-        })
+              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__ */ (0, import_jsx_runtime24.jsx)(import_material14.Box, { sx: { display: "flex", justifyContent: "flex-end", mt: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Button, { size: "small", variant: "contained", onClick: handleCloseTitleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" }) }) })
+        ]
       }
     )
   ] });
-};
+}
 
-// src/UI/components/inputs/SearchComponent.tsx
-var import_react26 = require("react");
-var import_react_i18next6 = require("react-i18next");
-var import_material18 = require("@mui/material");
-var import_Translate4 = __toESM(require("@mui/icons-material/Translate"));
-var import_Clear2 = __toESM(require("@mui/icons-material/Clear"));
+// src/UI/components/buttons/ButtonComponent.tsx
+var import_react22 = require("react");
+var import_material15 = require("@mui/material");
 init_context();
-init_translation_service();
-init_TranslationDialog();
-init_TranslatableTooltipComponent();
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ButtonComponent = (0, import_react22.forwardRef)(
+  ({ label, children, overrideNamespace, ...props }, ref) => {
+    const renderContent = (content) => {
+      if (typeof content === "string") {
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TranslateText, { overrideNamespace, children: content });
+      }
+      return content;
+    };
+    const contentToRender = label !== void 0 ? label : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Button, { ref, ...props, children: renderContent(contentToRender) });
+  }
+);
+ButtonComponent.displayName = "ButtonComponent";
 
-// src/hooks/useDebounce.ts
-var import_react25 = require("react");
-function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react25.useState)(value);
-  (0, import_react25.useEffect)(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
+// src/UI/index.ts
+init_CopyClipboardButtonComponent();
 
-// src/UI/components/inputs/SearchComponent.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var SearchComponent = ({
+// src/UI/components/buttons/RefreshButtonComponent.tsx
+var import_react24 = require("react");
+var import_material17 = require("@mui/material");
+var import_Refresh = __toESM(require("@mui/icons-material/Refresh"));
+init_context();
+init_TranslatableTooltipComponent();
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var AnimatedRefreshIcon = (0, import_material17.styled)(import_Refresh.default, {
+  shouldForwardProp: (prop) => prop !== "isSpinning"
+})(({ isSpinning }) => ({
+  animation: isSpinning ? "spin 1s linear infinite" : "none",
+  "@keyframes spin": {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  }
+}));
+var RefreshButtonComponent = ({
   overrideNamespace,
-  label = "",
-  value = "",
-  onChange,
-  onClear,
-  placeholderKey,
-  clearTooltip = "Clear",
-  debounceDelay = 500,
-  onDebounceChange,
-  slotProps,
-  ...restProps
+  size = "small",
+  onClick,
+  disabled = false,
+  fullWidth = false,
+  loading: externalLoading,
+  tooltip,
+  mobileViewOnly,
+  disableMobileView,
+  hideTooltipOnMobile,
+  hideTooltipOnDesktop
 }) => {
-  const supabase = useSupabase();
-  const namespace = useTranslationNamespace();
-  const { t, i18n: i18n2 } = (0, import_react_i18next6.useTranslation)(namespace);
-  const { isTranslationMode } = useTranslationEdit();
-  const [isDialogOpen, setIsDialogOpen] = (0, import_react26.useState)(false);
-  const [localValue, setLocalValue] = (0, import_react26.useState)(String(value ?? ""));
-  const debouncedValue = useDebounce(localValue, debounceDelay);
-  (0, import_react26.useEffect)(() => {
-    setLocalValue(String(value ?? ""));
-  }, [value]);
-  (0, import_react26.useEffect)(() => {
-    if (onDebounceChange) {
-      onDebounceChange(debouncedValue);
-    }
-    if (onChange && debouncedValue !== String(value ?? "")) {
-      const syntheticEvent = {
-        target: { value: debouncedValue },
-        currentTarget: { value: debouncedValue }
-      };
-      onChange(syntheticEvent);
-    }
-  }, [debouncedValue]);
-  const hasValue = localValue.length > 0;
-  const handleChange = (e) => {
-    setLocalValue(e.target.value);
-  };
-  const handleClear = (e) => {
-    e.stopPropagation();
-    setLocalValue("");
-    if (onClear) {
-      onClear();
-    }
-    if (onChange) {
-      const syntheticEvent = {
-        ...e,
-        target: { ...e.target, value: "" },
-        currentTarget: { ...e.currentTarget, value: "" }
-      };
-      onChange(syntheticEvent);
-    }
-  };
-  const translatedPlaceholder = placeholderKey ? t(placeholderKey) : void 0;
-  const handleSaveTranslations = async (newValues, contextHint) => {
-    if (!placeholderKey) return;
-    const upsertData = Object.entries(newValues).map(([langCode, text]) => ({
-      lang_code: langCode,
-      namespace,
-      key: placeholderKey,
-      value: text,
-      context_hint: contextHint
-    }));
-    const { error } = await supabase.from("translations").upsert(upsertData, { onConflict: "lang_code,namespace,key" });
-    if (error) {
-      alert("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u043F\u0456\u0434 \u0447\u0430\u0441 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043D\u043D\u044F \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043D\u0438\u0445");
-      throw error;
-    }
-    await translationService.incrementVersion(supabase, namespace, Object.keys(newValues));
-    Object.entries(newValues).forEach(([langCode, text]) => {
-      i18n2.addResource(langCode, namespace, placeholderKey, text);
-    });
-  };
-  const renderEndAdornment = () => {
-    const rawInputProps = slotProps?.input;
-    const isInputObject = typeof rawInputProps === "object" && rawInputProps !== null;
-    const existingEndAdornment = isInputObject && "endAdornment" in rawInputProps ? rawInputProps.endAdornment : void 0;
-    if (!hasValue && (!isTranslationMode || !placeholderKey)) {
-      return existingEndAdornment;
+  const { displayState } = useAppTheme();
+  const [internalLoading, setInternalLoading] = (0, import_react24.useState)(false);
+  const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
+  const handleClick = async (event) => {
+    if (!onClick || isLoading || disabled) return;
+    try {
+      setInternalLoading(true);
+      await onClick(event);
+    } finally {
+      setInternalLoading(false);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-      existingEndAdornment,
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_material18.InputAdornment, { position: "end", children: [
-        hasValue && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_material18.IconButton,
-          {
-            size: "small",
-            onClick: handleClear,
-            edge: "end",
-            "aria-label": "clear input",
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_Clear2.default, { fontSize: "small" })
-          }
-        ) }),
-        isTranslationMode && placeholderKey && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material18.Tooltip, { title: `Translate placeholder: "${placeholderKey}"`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_material18.IconButton,
-          {
-            size: "small",
-            onClick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              setIsDialogOpen(true);
-            },
-            sx: {
-              color: "#d97706",
-              backgroundColor: "rgba(254, 243, 199, 0.6)",
-              border: "1px dashed #f59e0b",
-              p: "3px",
-              ml: 0.5,
-              "&:hover": {
-                backgroundColor: "#fef08a"
-              }
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_Translate4.default, { fontSize: "small" })
-          }
-        ) })
-      ] })
-    ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_material18.TextField,
-      {
-        ...restProps,
-        label: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TranslateText, { overrideNamespace, children: label }) : label,
-        value: localValue,
-        onChange: handleChange,
-        placeholder: translatedPlaceholder,
-        slotProps: {
-          ...slotProps,
-          input: {
-            ...slotProps?.input,
-            endAdornment: renderEndAdornment()
-          }
-        }
-      }
-    ),
-    placeholderKey && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      TranslationDialog,
+  const renderIcon = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.Fab,
       {
-        open: isDialogOpen,
-        onClose: () => setIsDialogOpen(false),
-        translationKey: placeholderKey,
-        namespace,
-        onSave: handleSaveTranslations
+        size,
+        color: "inherit",
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        "aria-label": "refresh",
+        children: renderIcon()
       }
-    )
-  ] });
+    ) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_material17.Button,
+    {
+      variant: "contained",
+      color: "inherit",
+      size,
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      fullWidth,
+      startIcon: renderIcon(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+    }
+  ) });
 };
 
-// src/UI/components/inputs/SelectComponent.tsx
-var import_material19 = require("@mui/material");
-var import_Close = __toESM(require("@mui/icons-material/Close"));
+// src/UI/index.ts
+init_TranslatableTooltipComponent();
+
+// src/UI/components/data.display/UserAvatarComponent.tsx
+var import_react26 = require("react");
+var import_material21 = require("@mui/material");
 init_context();
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var SelectComponent = ({
-  overrideNamespace,
-  label,
-  value,
-  options,
-  onChange,
-  id = "translated-select",
-  fullWidth,
-  size = "medium",
-  multiple = false,
-  withCheckboxes = false,
-  clearable = true,
-  maxSelect,
-  disabled,
-  maxDisplayedTags = 2,
-  helperText,
-  defaultValueOnClear,
-  sx,
-  ...restProps
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var LazyUserPopover = (0, import_react26.lazy)(() => Promise.resolve().then(() => (init_UserPopoverComponent(), UserPopoverComponent_exports)));
+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 labelId = `${id}-label`;
-  const safeValue = multiple ? Array.isArray(value) ? value : [] : value ?? "";
-  const selectedArray = multiple ? safeValue : [];
-  const isLimitReached = Boolean(multiple && maxSelect && selectedArray.length >= maxSelect);
-  const hasValue = multiple ? selectedArray.length > 0 : safeValue !== "" && safeValue !== null && safeValue !== void 0;
-  const handleChange = (event, child) => {
-    if (multiple && maxSelect) {
-      const newValue = event.target.value;
-      if (newValue.length > maxSelect) {
-        return;
-      }
-    }
-    onChange?.(event, child);
-  };
-  const handleClear = (e) => {
-    e.stopPropagation();
-    if (!onChange) return;
-    const emptyValue = multiple ? [] : "";
-    const targetValue = defaultValueOnClear !== void 0 ? defaultValueOnClear : emptyValue;
-    const syntheticEvent = {
-      target: {
-        value: targetValue,
-        name: restProps.name
+  const supabase = useSupabase();
+  const [anchorEl, setAnchorEl] = (0, import_react26.useState)(null);
+  const [hasInteracted, setHasInteracted] = (0, import_react26.useState)(false);
+  const [resolvedAvatarUrl, setResolvedAvatarUrl] = (0, import_react26.useState)(null);
+  const canShowPopover = !disablePopover && Boolean(userId);
+  (0, import_react26.useEffect)(() => {
+    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);
       }
     };
-    onChange(syntheticEvent, null);
-  };
-  const renderValueHandler = (selected) => {
-    if (!multiple) return void 0;
-    const currentSelected = selected;
-    if (currentSelected.length === 0) return null;
-    const selectedOptions = options.filter((opt) => currentSelected.includes(opt.value));
-    const visibleLabels = selectedOptions.slice(0, maxDisplayedTags).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value));
-    const hiddenCount = selectedOptions.length - maxDisplayedTags;
-    if (hiddenCount > 0) {
-      return `${visibleLabels.join(", ")} (+${hiddenCount})`;
+    resolveAvatar();
+    return () => {
+      isMounted = false;
+    };
+  }, [avatarUrl]);
+  const handleClick = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (canShowPopover) {
+      setAnchorEl(event.currentTarget);
+      if (!hasInteracted) {
+        setHasInteracted(true);
+      }
     }
-    return visibleLabels.join(", ");
   };
-  const isSmall = size === "small";
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_material19.Tooltip,
-    {
-      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__ */ (0, import_jsx_runtime29.jsxs)(import_material19.FormControl, { fullWidth, size, sx: { mt: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.InputLabel, { id: labelId, size: isSmall ? "small" : "medium", children: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace, children: label }) : label }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_material19.Select,
-          {
-            labelId,
-            id,
-            value: safeValue,
-            label: typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TranslateText, { overrideNamespace, children: label }) : label,
-            size,
-            multiple,
-            disabled,
-            onChange: handleChange,
-            renderValue: multiple ? renderValueHandler : void 0,
-            ...restProps,
-            endAdornment: clearable && hasValue && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.InputAdornment, { position: "end", sx: { mr: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              import_material19.IconButton,
-              {
-                size: "small",
-                onClick: handleClear,
-                "aria-label": "clear selection",
-                edge: "end",
-                sx: { p: 0.5 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_Close.default, { 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__ */ (0, import_jsx_runtime29.jsxs)(
-                import_material19.MenuItem,
-                {
-                  value: option.value,
-                  disabled: isDisabled,
-                  children: [
-                    multiple && withCheckboxes && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.Checkbox, { checked: isSelected, size, disabled: isDisabled }),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                      import_material19.ListItemText,
-                      {
-                        primary: option.isItalic ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("em", { children: option.label }) : option.label
-                      }
-                    )
-                  ]
-                },
-                String(option.value)
-              );
-            })
-          }
-        ),
-        helperText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material19.FormHelperText, { children: helperText })
-      ] })
+  const handleClose = (event) => {
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
     }
-  );
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  const initials = getInitials(displayName || "");
+  const getTooltip = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { component: "div", variant: "caption", children: displayName }),
+    displayName && employeePost && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { component: "div", variant: "caption", children: employeePost })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Tooltip, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_material21.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__ */ (0, import_jsx_runtime31.jsx)(import_react26.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      LazyUserPopover,
+      {
+        userId,
+        anchorEl,
+        open: isPopoverOpen,
+        onClose: handleClose
+      }
+    ) })
+  ] });
 };
 
-// src/UI/components/data.display/ExpandableNoteComponent.tsx
+// src/UI/index.ts
+init_UserPopoverComponent();
+init_UserRoleChipComponent();
+init_UserStatusChipComponent();
+
+// src/UI/components/data.display/MyAvatarComponent.tsx
 var import_react27 = require("react");
-var import_material20 = require("@mui/material");
+var import_material22 = require("@mui/material");
 init_context();
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var ExpandableNoteComponent = ({
-  overrideNamespace,
-  text,
-  maxLength = 100,
-  label,
-  sx,
-  ...restProps
+var import_jsx_runtime32 = require("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 [isExpanded, setIsExpanded] = (0, import_react27.useState)(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__ */ (0, import_jsx_runtime30.jsxs)(
-    import_material20.Typography,
-    {
-      variant: "caption",
-      sx: {
-        color: "text.secondary",
-        fontStyle: "italic",
-        display: "inline-block",
-        ...sx
-      },
-      ...restProps,
-      children: [
-        label !== void 0 ? label : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
-          ": "
-        ] }),
-        " ",
-        displayedText,
-        " ",
-        isLong && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          import_material20.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__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
-              "..."
-            ] })
-          }
-        )
-      ]
+  const { profile: userProfile, loading: isLoading } = useAuth();
+  const [anchorEl, setAnchorEl] = (0, import_react27.useState)(null);
+  const handlePopoverOpen = (event) => {
+    if (!disablePopover) {
+      setAnchorEl(event.currentTarget);
     }
-  );
-};
-
-// src/UI/widgets/page/PageLinkWidget.tsx
-var import_icons_material3 = require("@mui/icons-material");
-var import_material21 = require("@mui/material");
-var import_react28 = __toESM(require("react"));
-var import_react_router_dom = require("react-router-dom");
-init_context();
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var PageLinkWidget = ({
-  overrideNamespace,
-  title,
-  subheader,
-  description,
-  icon,
-  links,
-  actionButtonText,
-  onActionButtonClick,
-  bgcolor
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_material22.Skeleton,
+      {
+        variant: "circular",
+        width: size,
+        height: size,
+        sx: { display: "inline-block", flexShrink: 0, ...sx }
+      }
+    );
+  }
+  const initials = getInitials2(userProfile?.display_name || "");
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_material22.Avatar,
+      {
+        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__ */ (0, import_jsx_runtime32.jsx)(
+      import_material22.Popover,
+      {
+        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__ */ (0, import_jsx_runtime32.jsxs)(import_material22.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material22.Typography, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material22.Typography, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/UI/components/data.display/ExpandableNoteComponent.tsx
+var import_react28 = require("react");
+var import_material23 = require("@mui/material");
+init_context();
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ExpandableNoteComponent = ({
+  overrideNamespace,
+  text,
+  maxLength = 100,
+  label,
+  sx,
+  ...restProps
 }) => {
-  const navigate = (0, import_react_router_dom.useNavigate)();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    import_material21.Card,
+  const [isExpanded, setIsExpanded] = (0, import_react28.useState)(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__ */ (0, import_jsx_runtime33.jsxs)(
+    import_material23.Typography,
     {
-      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"
-      }),
+      variant: "caption",
+      sx: {
+        color: "text.secondary",
+        fontStyle: "italic",
+        display: "inline-block",
+        ...sx
+      },
+      ...restProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          import_material21.CardHeader,
+        label !== void 0 ? label : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
+          ": "
+        ] }),
+        " ",
+        displayedText,
+        " ",
+        isLong && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_material23.Link,
           {
-            avatar: icon ? import_react28.default.cloneElement(icon, {
-              sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
-            }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.Settings, { color: bgcolor ? "inherit" : "primary" }),
-            title: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace, children: title }) : title }),
-            subheader: subheader && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace, children: subheader }) : subheader })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Divider, { sx: { borderColor: "inherit", opacity: 0.2 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material21.CardContent, { sx: { flexGrow: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace, children: description }) : description }),
-          links && links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-            import_material21.ListItem,
-            {
-              disablePadding: true,
-              sx: {
-                mt: 1,
-                // Запрещаем ListItem менять цвет фона при наведении
-                "&:hover": {
-                  backgroundColor: "transparent"
-                }
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                  import_material21.ListItemIcon,
-                  {
-                    sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
-                    onClick: () => {
-                      if (link?.href) navigate(link.href);
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_material3.ArrowRight, { fontSize: "small", color: "inherit" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.ListItemText, { children: link.onClick ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                  import_material21.Button,
-                  {
-                    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__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
-                  }
-                ) : link.href ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                  import_material21.Link,
-                  {
-                    component: import_react_router_dom.Link,
-                    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__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Typography, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
-              ]
+            component: "button",
+            type: "button",
+            variant: "caption",
+            underline: "hover",
+            onClick: toggleExpand,
+            sx: {
+              fontStyle: "normal",
+              fontWeight: "bold",
+              ml: 0.5,
+              cursor: "pointer",
+              verticalAlign: "baseline"
             },
-            index
-          )) })
-        ] }),
-        actionButtonText && onActionButtonClick && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material21.Button, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
+            children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
+              "..."
+            ] })
+          }
+        )
       ]
     }
   );
 };
 
-// src/UI/components/inputs/SwitchComponent.tsx
-var import_material22 = require("@mui/material");
-init_TranslateText();
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var SwitchComponent = ({
-  checked = false,
-  onChange,
-  label,
-  checkedLabel,
-  uncheckedLabel,
-  overrideNamespace,
-  switchProps,
-  ...props
-}) => {
-  const currentLabel = label ?? (checked ? checkedLabel : uncheckedLabel);
-  const renderLabel = (node) => {
-    if (typeof node === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TranslateText, { overrideNamespace, children: node });
-    }
-    return node;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material22.Box, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_material22.FormControlLabel,
+// src/UI/components/data.display/ErrorAlertComponent.tsx
+var import_material24 = require("@mui/material");
+var import_Replay = __toESM(require("@mui/icons-material/Replay"));
+init_context();
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ErrorIllustration = ({ size = 64 }) => {
+  const theme = (0, import_material24.useTheme)();
+  const mainColor = theme.palette.error.main;
+  const lightColor = theme.palette.error.light;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_material24.Box,
     {
-      control: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        import_material22.Switch,
-        {
-          checked,
-          onChange,
-          ...switchProps
-        }
-      ),
-      label: renderLabel(currentLabel),
-      ...props
-    }
-  ) });
-};
-
-// src/UI/components/inputs/CheckboxComponent.tsx
-var import_material23 = require("@mui/material");
-init_TranslateText();
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var CheckboxComponent = ({
-  checked = false,
-  onChange,
-  label,
-  checkedLabel,
-  uncheckedLabel,
-  overrideNamespace,
-  checkboxProps,
-  ...props
-}) => {
-  const currentLabel = label ?? (checked ? checkedLabel : uncheckedLabel);
-  const renderLabel = (node) => {
-    if (typeof node === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TranslateText, { overrideNamespace, children: node });
-    }
-    return node;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material23.Box, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_material23.FormControlLabel,
-    {
-      control: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        import_material23.Checkbox,
-        {
-          checked,
-          onChange,
-          ...checkboxProps
-        }
-      ),
-      label: renderLabel(currentLabel),
-      ...props
-    }
-  ) });
-};
-
-// src/UI/widgets/page/CollapsedWidgetContainer.tsx
-var import_icons_material4 = require("@mui/icons-material");
-var import_material24 = require("@mui/material");
-var import_react29 = require("react");
-init_context();
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var ExpandMore = (0, import_material24.styled)((props) => {
-  const { expand, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.IconButton, { size: "small", ...other, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons_material4.ExpandMore, {}) });
-})(({ 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] = (0, import_react29.useState)(props.expanded === void 0 ? false : props.expanded);
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-    props.onExpanded && props.onExpanded(!expanded);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_material24.Card, { 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__ */ (0, import_jsx_runtime34.jsxs)(
-      import_material24.Box,
-      {
-        onClick: () => handleExpandClick(),
-        sx: {
-          cursor: "pointer",
-          "&:hover": { bgcolor: "rgba(0,0,0,0.02)" },
-          display: "flex",
-          alignItems: "center",
-          pr: 2
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            import_material24.CardHeader,
-            {
-              sx: { flexGrow: 1 },
-              avatar: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Avatar, { sx: { bgcolor: "primary.main" }, children: props.icon }),
-              title: typeof props.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Typography, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
-              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Tooltip, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Box, { sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            ExpandMore,
-            {
-              expand: expanded,
-              onClick: handleExpandClick,
-              "aria-expanded": expanded
-            }
-          ) }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_material24.Collapse, { in: expanded, timeout: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Divider, { variant: "middle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.CardContent, { children: props.children })
-    ] })
-  ] });
-};
-
-// src/UI/components/buttons/RefreshButtonComponent.tsx
-var import_react30 = require("react");
-var import_material25 = require("@mui/material");
-var import_Refresh = __toESM(require("@mui/icons-material/Refresh"));
-init_context();
-init_TranslatableTooltipComponent();
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var AnimatedRefreshIcon = (0, import_material25.styled)(import_Refresh.default, {
-  shouldForwardProp: (prop) => prop !== "isSpinning"
-})(({ isSpinning }) => ({
-  animation: isSpinning ? "spin 1s linear infinite" : "none",
-  "@keyframes spin": {
-    "0%": {
-      transform: "rotate(0deg)"
-    },
-    "100%": {
-      transform: "rotate(360deg)"
-    }
-  }
-}));
-var RefreshButtonComponent = ({
-  overrideNamespace,
-  size = "small",
-  onClick,
-  disabled = false,
-  fullWidth = false,
-  loading: externalLoading,
-  tooltip,
-  mobileViewOnly,
-  disableMobileView,
-  hideTooltipOnMobile,
-  hideTooltipOnDesktop
-}) => {
-  const { displayState } = useAppTheme();
-  const [internalLoading, setInternalLoading] = (0, import_react30.useState)(false);
-  const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
-  const handleClick = async (event) => {
-    if (!onClick || isLoading || disabled) return;
-    try {
-      setInternalLoading(true);
-      await onClick(event);
-    } finally {
-      setInternalLoading(false);
-    }
-  };
-  const renderIcon = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
-  if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      import_material25.Fab,
-      {
-        size,
-        color: "inherit",
-        onClick: handleClick,
-        disabled: disabled || isLoading,
-        "aria-label": "refresh",
-        children: renderIcon()
-      }
-    ) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_material25.Button,
-    {
-      variant: "contained",
-      color: "inherit",
-      size,
-      onClick: handleClick,
-      disabled: disabled || isLoading,
-      fullWidth,
-      startIcon: renderIcon(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
-    }
-  ) });
-};
-
-// src/UI/widgets/misc/ErrorAlertWidget.tsx
-var import_material26 = require("@mui/material");
-var import_Replay = __toESM(require("@mui/icons-material/Replay"));
-init_context();
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var ErrorIllustration = ({ size = 64 }) => {
-  const theme = (0, import_material26.useTheme)();
-  const mainColor = theme.palette.error.main;
-  const lightColor = theme.palette.error.light;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_material26.Box,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-        "svg",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "svg",
         {
           width: size,
           height: size,
@@ -4957,7 +4528,7 @@ var ErrorIllustration = ({ size = 64 }) => {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               "circle",
               {
                 cx: "50",
@@ -4966,7 +4537,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                 fill: lightColor,
                 fillOpacity: "0.25",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "animate",
                     {
                       attributeName: "r",
@@ -4975,7 +4546,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                       repeatCount: "indefinite"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "animate",
                     {
                       attributeName: "fill-opacity",
@@ -4987,8 +4558,8 @@ var ErrorIllustration = ({ size = 64 }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "path",
               {
                 d: "M50 20L80 72H20L50 20Z",
@@ -4998,7 +4569,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "path",
               {
                 d: "M50 36V54",
@@ -5007,17 +4578,17 @@ var ErrorIllustration = ({ size = 64 }) => {
                 strokeLinecap: "round"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
           ]
         }
       )
     }
   );
 };
-var ErrorAlertWidget = ({
+var ErrorAlertComponent = ({
   overrideNamespace,
   title = "An error occurred",
   message,
@@ -5025,8 +4596,8 @@ var ErrorAlertWidget = ({
   retryText = "Retry",
   isRetrying = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_material26.Alert,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_material24.Alert,
     {
       severity: "error",
       icon: false,
@@ -5043,8 +4614,8 @@ var ErrorAlertWidget = ({
           p: 0
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-        import_material26.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        import_material24.Box,
         {
           sx: {
             display: "flex",
@@ -5053,34 +4624,34 @@ var ErrorAlertWidget = ({
             gap: 2
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorIllustration, { size: 68 }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_material26.Box, { sx: { flexGrow: 1 }, children: [
-              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                import_material26.Typography,
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ErrorIllustration, { size: 68 }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_material24.Box, { sx: { flexGrow: 1 }, children: [
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                import_material24.Typography,
                 {
                   variant: "subtitle1",
                   sx: { fontWeight: 600, color: "error.main", mb: 0.5 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { overrideNamespace, children: title })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace, children: title })
                 }
               ) : title,
-              typeof message === "string" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Typography, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { overrideNamespace, children: message }) }) : message
+              typeof message === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Typography, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace, children: message }) }) : message
             ] }),
-            onRetry && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              import_material26.Box,
+            onRetry && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              import_material24.Box,
               {
                 sx: {
                   alignSelf: { xs: "flex-end", sm: "center" },
                   mt: { xs: 1, sm: 0 }
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                  import_material26.Button,
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  import_material24.Button,
                   {
                     variant: "outlined",
                     color: "error",
                     size: "small",
                     disabled: isRetrying,
                     onClick: onRetry,
-                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       import_Replay.default,
                       {
                         sx: {
@@ -5112,34 +4683,15 @@ var ErrorAlertWidget = ({
   );
 };
 
-// src/UI/components/buttons/ButtonComponent.tsx
-var import_react31 = require("react");
-var import_material27 = require("@mui/material");
-init_context();
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var ButtonComponent = (0, import_react31.forwardRef)(
-  ({ label, children, overrideNamespace, ...props }, ref) => {
-    const renderContent = (content) => {
-      if (typeof content === "string") {
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: content });
-      }
-      return content;
-    };
-    const contentToRender = label !== void 0 ? label : children;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Button, { ref, ...props, children: renderContent(contentToRender) });
-  }
-);
-ButtonComponent.displayName = "ButtonComponent";
-
 // src/UI/components/layout/PageComponent.tsx
-var import_react32 = __toESM(require("react"));
-var import_material28 = require("@mui/material");
+var import_react29 = __toESM(require("react"));
+var import_material25 = require("@mui/material");
 var import_MoreVert = __toESM(require("@mui/icons-material/MoreVert"));
 var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
-var import_icons_material5 = require("@mui/icons-material");
+var import_icons_material3 = require("@mui/icons-material");
 init_context();
 init_TranslatableTooltipComponent();
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var getTruncateStyles = (mode = "truncate") => {
   switch (mode) {
     case "truncate":
@@ -5167,10 +4719,10 @@ var PageHeader = ({
   forceMobileView,
   sx = []
 }) => {
-  const theme = (0, import_material28.useTheme)();
-  const mediaIsMobile = (0, import_material28.useMediaQuery)(theme.breakpoints.down(mobileBreakpoint));
+  const theme = (0, import_material25.useTheme)();
+  const mediaIsMobile = (0, import_material25.useMediaQuery)(theme.breakpoints.down(mobileBreakpoint));
   const isMobile = forceMobileView ?? mediaIsMobile;
-  const [anchorEl, setAnchorEl] = (0, import_react32.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react29.useState)(null);
   const isMenuOpen = Boolean(anchorEl);
   const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
   const handleCloseMenu = () => setAnchorEl(null);
@@ -5180,8 +4732,8 @@ var PageHeader = ({
   };
   const hasSecondaryActions = secondaryActions.length > 0;
   const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-    import_material28.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    import_material25.Box,
     {
       sx: [
         {
@@ -5199,9 +4751,9 @@ var PageHeader = ({
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Box, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            import_material28.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Box, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            import_material25.Box,
             {
               sx: {
                 display: "flex",
@@ -5220,10 +4772,10 @@ var PageHeader = ({
               children: icon
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Box, { sx: { minWidth: 0, flex: 1 }, children: [
-            tag && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Box, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Tooltip, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-              import_material28.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Box, { sx: { minWidth: 0, flex: 1 }, children: [
+            tag && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Box, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Tooltip, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              import_material25.Typography,
               {
                 variant: "h5",
                 component: "h1",
@@ -5234,11 +4786,11 @@ var PageHeader = ({
                   lineHeight: 1.3,
                   ...getTruncateStyles(titleTruncateMode)
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: title })
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: title })
               }
             ) }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Tooltip, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-              import_material28.Typography,
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Tooltip, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              import_material25.Typography,
               {
                 variant: "body2",
                 sx: {
@@ -5248,24 +4800,24 @@ var PageHeader = ({
                   lineHeight: 1.4,
                   ...getTruncateStyles(subtitleTruncateMode)
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: subtitle })
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: subtitle })
               }
             ) })
           ] })
         ] }),
-        hasActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Box, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+        hasActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Box, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
           /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-              import_material28.IconButton,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              import_material25.IconButton,
               {
                 onClick: handleOpenMenu,
                 sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_MoreVert.default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_MoreVert.default, {})
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-              import_material28.Menu,
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+              import_material25.Menu,
               {
                 anchorEl,
                 open: isMenuOpen,
@@ -5274,9 +4826,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__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-                      import_material28.MenuItem,
+                  primaryAction && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                      import_material25.MenuItem,
                       {
                         onClick: () => handleMenuAction(primaryAction.onClick),
                         disabled: primaryAction.disabled,
@@ -5289,32 +4841,32 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          primaryAction.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          primaryAction.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     ),
-                    hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { my: 0.75 } })
+                    hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Divider, { sx: { my: 0.75 } })
                   ] }),
-                  secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react32.default.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-                      import_material28.MenuItem,
+                  secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react29.default.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                      import_material25.MenuItem,
                       {
                         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__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
                   ] }, action.id)),
-                  refreshAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-                      import_material28.MenuItem,
+                  refreshAction && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                      import_material25.MenuItem,
                       {
                         onClick: () => handleMenuAction(refreshAction.onClick),
                         disabled: refreshAction.disabled,
@@ -5326,8 +4878,8 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material5.Refresh, {}) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons_material3.Refresh, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     )
@@ -5338,10 +4890,10 @@ var PageHeader = ({
           ] })
         ) : (
           /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            (primaryAction || refreshAction) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Stack, { direction: "row", spacing: 2, children: [
-              primaryAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_material28.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            (primaryAction || refreshAction) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_material25.Stack, { direction: "row", spacing: 2, children: [
+              primaryAction && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                import_material25.Button,
                 {
                   variant: primaryAction.variant || "contained",
                   color: primaryAction.color || "primary",
@@ -5349,32 +4901,32 @@ var PageHeader = ({
                   disabled: primaryAction.disabled,
                   startIcon: primaryAction.icon,
                   sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: primaryAction.label })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { children: primaryAction.label })
                 }
               ),
-              refreshAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_material28.Fab,
+              refreshAction && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                import_material25.Fab,
                 {
                   color: "default",
                   onClick: refreshAction.onClick,
                   disabled: refreshAction.disabled,
                   "aria-label": "refresh",
                   size: "small",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material5.Refresh, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons_material3.Refresh, {})
                 }
               ) })
             ] }),
-            hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_material28.IconButton,
+            hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                import_material25.IconButton,
                 {
                   onClick: handleOpenMenu,
                   sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_KeyboardArrowDown.default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_KeyboardArrowDown.default, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_material28.Menu,
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                import_material25.Menu,
                 {
                   anchorEl,
                   open: isMenuOpen,
@@ -5382,17 +4934,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__ */ (0, import_jsx_runtime38.jsxs)(import_react32.default.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-                      import_material28.MenuItem,
+                  children: secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react29.default.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                      import_material25.MenuItem,
                       {
                         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__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_material25.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
@@ -5402,14 +4954,14 @@ var PageHeader = ({
             ] })
           ] })
         ) }),
-        customFragment && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: customFragment })
+        customFragment && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: customFragment })
       ]
     }
   );
 };
 var PageContainer = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_material28.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_material25.Box,
     {
       sx: {
         width: "100%",
@@ -5425,8 +4977,8 @@ var PageComponent = ({
   header,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_material28.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_material25.Box,
     {
       sx: {
         //pt: 2,
@@ -5435,120 +4987,511 @@ var PageComponent = ({
         overflowY: "auto",
         boxSizing: "border-box"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(PageContainer, { children: [
-        header && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PageHeader, { ...header }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(PageContainer, { children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PageHeader, { ...header }),
         children
       ] })
     }
   );
 };
 
-// src/UI/widgets/page/FilterContainerWidget.tsx
-var import_react33 = __toESM(require("react"));
-var import_material29 = require("@mui/material");
-var import_jsx_runtime39 = (
+// src/UI/components/layout/FilterContainerComponent.tsx
+var import_react30 = __toESM(require("react"));
+var import_material26 = require("@mui/material");
+var import_jsx_runtime36 = (
   /* Автоматическая обертка каждого дочернего элемента в Grid size */
   require("react/jsx-runtime")
 );
-var widthToGridColumns = (width) => {
-  switch (width) {
-    case "25%":
-      return 3;
-    case "33%":
-      return 4;
-    case "50%":
-      return 6;
-    case "66%":
-      return 8;
-    case "75%":
-      return 9;
-    case "100%":
-    default:
-      return 12;
-  }
-};
-var createGridSize = (desktopWidth, mobileWidth = "100%") => {
-  return {
-    xs: widthToGridColumns(mobileWidth),
-    md: widthToGridColumns(desktopWidth)
-  };
-};
-var FilterSection = ({
-  width = "100%",
-  mobileWidth = "100%",
-  itemWidth = "50%",
-  itemMobileWidth = "100%",
-  children
-}) => {
-  const sectionGridSize = createGridSize(width, mobileWidth);
-  const itemGridSize = createGridSize(itemWidth, itemMobileWidth);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Grid, { size: sectionGridSize, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: import_react33.default.Children.map(children, (child) => {
-    if (!child) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Grid, { size: itemGridSize, children: child });
-  }) }) });
-};
-var FilterContainerWidget = ({
+var FilterContainerComponent = ({
   sections,
   children,
   sx
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_material29.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_material26.Paper,
     {
       variant: "outlined",
       sx: [
         { p: 2, mb: 3 },
         ...Array.isArray(sx) ? sx : [sx]
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react33.default.Fragment, { children: sec }, idx)) : children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react30.default.Fragment, { children: sec }, idx)) : 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,
-      FilterContainerWidget,
-      FilterSection
-    },
-    Misc: {
-      ErrorAlertWidget
-    }
-  }
+// src/UI/components/layout/PageLinkComponent.tsx
+var import_icons_material4 = require("@mui/icons-material");
+var import_material27 = require("@mui/material");
+var import_react31 = __toESM(require("react"));
+var import_react_router_dom = require("react-router-dom");
+init_context();
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var PageLinkComponent = ({
+  overrideNamespace,
+  title,
+  subheader,
+  description,
+  icon,
+  links,
+  actionButtonText,
+  onActionButtonClick,
+  bgcolor
+}) => {
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    import_material27.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__ */ (0, import_jsx_runtime37.jsx)(
+          import_material27.CardHeader,
+          {
+            avatar: icon ? import_react31.default.cloneElement(icon, {
+              sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
+            }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_material4.Settings, { color: bgcolor ? "inherit" : "primary" }),
+            title: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Typography, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: title }) : title }),
+            subheader: subheader && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Typography, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: subheader }) : subheader })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Divider, { sx: { borderColor: "inherit", opacity: 0.2 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_material27.CardContent, { sx: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Typography, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: description }) : description }),
+          links && links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            import_material27.ListItem,
+            {
+              disablePadding: true,
+              sx: {
+                mt: 1,
+                // Запрещаем ListItem менять цвет фона при наведении
+                "&:hover": {
+                  backgroundColor: "transparent"
+                }
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  import_material27.ListItemIcon,
+                  {
+                    sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
+                    onClick: () => {
+                      if (link?.href) navigate(link.href);
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_material4.ArrowRight, { fontSize: "small", color: "inherit" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.ListItemText, { children: link.onClick ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  import_material27.Button,
+                  {
+                    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__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                  }
+                ) : link.href ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  import_material27.Link,
+                  {
+                    component: import_react_router_dom.Link,
+                    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__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Typography, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
+              ]
+            },
+            index
+          )) })
+        ] }),
+        actionButtonText && onActionButtonClick && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Button, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
+      ]
+    }
+  );
+};
+
+// src/UI/components/layout/CollapsedContainerComponent.tsx
+var import_icons_material5 = require("@mui/icons-material");
+var import_material28 = require("@mui/material");
+var import_react32 = require("react");
+init_context();
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var ExpandMore = (0, import_material28.styled)((props) => {
+  const { expand, ...other } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.IconButton, { size: "small", ...other, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material5.ExpandMore, {}) });
+})(({ 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] = (0, import_react32.useState)(props.expanded === void 0 ? false : props.expanded);
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+    props.onExpanded && props.onExpanded(!expanded);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Card, { 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__ */ (0, import_jsx_runtime38.jsxs)(
+      import_material28.Box,
+      {
+        onClick: () => handleExpandClick(),
+        sx: {
+          cursor: "pointer",
+          "&:hover": { bgcolor: "rgba(0,0,0,0.02)" },
+          display: "flex",
+          alignItems: "center",
+          pr: 2
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            import_material28.CardHeader,
+            {
+              sx: { flexGrow: 1 },
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Avatar, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              title: typeof props.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Typography, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Tooltip, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Box, { sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            ExpandMore,
+            {
+              expand: expanded,
+              onClick: handleExpandClick,
+              "aria-expanded": expanded
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Collapse, { in: expanded, timeout: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { variant: "middle" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.CardContent, { children: props.children })
+    ] })
+  ] });
+};
+
+// src/i18n/LanguageSelector.tsx
+var import_react33 = require("react");
+var import_react_i18next6 = require("react-i18next");
+var import_material29 = require("@mui/material");
+init_LocalizationProvider();
+init_UserSettingsProvider();
+init_SupabaseProvider();
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next6.useTranslation)();
+  const [languages, setLanguages] = (0, import_react33.useState)([]);
+  const [loading, setLoading] = (0, import_react33.useState)(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react33.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime39.jsx)(import_material29.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n2.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_material29.IconButton,
+      {
+        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__ */ (0, import_jsx_runtime39.jsx)(
+          import_material29.Box,
+          {
+            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__ */ (0, import_jsx_runtime39.jsx)(
+      import_material29.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__ */ (0, import_jsx_runtime39.jsxs)(
+            import_material29.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_material29.Box,
+                  {
+                    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__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next6.useTranslation)();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = (0, import_react33.useState)([]);
+  const [loading, setLoading] = (0, import_react33.useState)(true);
+  const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react33.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime39.jsx)(import_material29.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n2.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_material29.IconButton,
+      {
+        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__ */ (0, import_jsx_runtime39.jsx)(
+          import_material29.Box,
+          {
+            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__ */ (0, import_jsx_runtime39.jsx)(
+      import_material29.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__ */ (0, import_jsx_runtime39.jsxs)(
+            import_material29.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_material29.Box,
+                  {
+                    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__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
 };
 
 // src/types/index.ts
@@ -5704,19 +5647,43 @@ var Utils = {
   AppSettingsProvider,
   AuthProvider,
   BreadcrumbProvider,
+  ButtonComponent,
+  CheckboxComponent,
+  CollapsedContainerComponent,
   ConfirmationProvider,
+  CopyClipboardButtonComponent,
+  EmailInputComponent,
+  ErrorAlertComponent,
+  ExpandableNoteComponent,
+  FilterContainerComponent,
   Hooks,
   LocalizationProvider,
+  MyAvatarComponent,
+  NumberInputComponent,
+  PageComponent,
+  PageLinkComponent,
+  ProtectedLanguageSelector,
   Providers,
+  PublicLanguageSelector,
+  RefreshButtonComponent,
+  SearchComponent,
+  SelectComponent,
   Services,
   SupabaseProvider,
+  SwitchComponent,
+  TextFieldComponent,
   ThemeProvider,
   ToastProvider,
+  TranslatableTooltipComponent,
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
-  UI,
+  UrlComponent,
+  UserAvatarComponent,
+  UserPopoverComponent,
+  UserRoleChipComponent,
   UserSettingsProvider,
+  UserStatusChipComponent,
   Utils,
   defaultUserSettings,
   initI18n,