@serhii.olishevskyi/docs 1.2.23 → 1.2.25

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
   TranslateText,
   TranslationDialog,
   TranslationEditProvider,
-  UserPopoverComponent_default,
+  UserPopoverComponent,
   UserRoleChipComponent,
   UserSettingsProvider,
   UserStatusChipComponent,
@@ -43,7 +43,7 @@ import {
   useTranslationEdit,
   useTranslationNamespace,
   useUserSettings
-} from "./chunk-4NEOJ5KZ.mjs";
+} from "./chunk-VFNVP7VE.mjs";
 
 // src/UI/components/inputs/TextFieldComponent.tsx
 import { useState } from "react";
@@ -477,208 +477,9 @@ var NumberInputComponent = ({
   );
 };
 
-// src/UI/components/inputs/UrlComponent.tsx
-import { useState as useState3 } from "react";
-import {
-  TextField as TextField2,
-  InputAdornment as InputAdornment3,
-  IconButton as IconButton3,
-  Tooltip as Tooltip2,
-  Popover,
-  Box as Box3,
-  Typography,
-  Button
-} from "@mui/material";
-import LinkIcon from "@mui/icons-material/Link";
-import LaunchIcon from "@mui/icons-material/Launch";
-import ContentCopyIcon2 from "@mui/icons-material/ContentCopy";
-import CheckIcon2 from "@mui/icons-material/Check";
-import EditNoteIcon from "@mui/icons-material/EditNote";
-import LockIcon2 from "@mui/icons-material/Lock";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function UrlComponent({
-  overrideNamespace,
-  label,
-  value,
-  onChange,
-  disabled = false,
-  readOnly = false,
-  required = false,
-  error = false,
-  helperText = "",
-  description = "",
-  fullWidth = true,
-  openInNewTab = true,
-  showLock = true,
-  lockTooltip = "Field is not editable",
-  sx
-}) {
-  const [copied, setCopied] = useState3(false);
-  const [anchorEl, setAnchorEl] = useState3(null);
-  const isViewMode = disabled || readOnly;
-  const currentUrl = typeof value === "object" && value !== null ? value.url || "" : value || "";
-  const currentTitle = typeof value === "object" && value !== null ? value.title || "" : "";
-  const getFormattedUrl = (val) => {
-    if (!val) return "";
-    const trimmed = val.trim();
-    if (trimmed.match(/^[a-zA-Z]+:\/\//)) {
-      return trimmed;
-    }
-    return `https://${trimmed}`;
-  };
-  const finalUrl = getFormattedUrl(currentUrl);
-  const targetAttribute = openInNewTab ? "_blank" : "_self";
-  const displayLabelText = currentTitle.trim() || currentUrl;
-  const handleUrlChange = (newUrl) => {
-    onChange?.({ url: newUrl, title: currentTitle });
-  };
-  const handleTitleChange = (newTitle) => {
-    onChange?.({ url: currentUrl, title: newTitle });
-  };
-  const handleCopy = (e) => {
-    e.stopPropagation();
-    if (!finalUrl) return;
-    navigator.clipboard.writeText(finalUrl);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  };
-  const handleOpenLink = (e) => {
-    e.stopPropagation();
-    if (finalUrl) {
-      window.open(finalUrl, targetAttribute, openInNewTab ? "noopener,noreferrer" : void 0);
-    }
-  };
-  const handleInputClick = (e) => {
-    if (isViewMode && finalUrl) {
-      handleOpenLink(e);
-    }
-  };
-  const handleOpenTitleMenu = (e) => {
-    e.stopPropagation();
-    setAnchorEl(e.currentTarget);
-  };
-  const handleCloseTitleMenu = () => {
-    setAnchorEl(null);
-  };
-  const isTitlePopoverOpen = Boolean(anchorEl);
-  const displayHelperText = error ? helperText : description || helperText;
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx3(
-      TextField2,
-      {
-        label: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace, children: label }),
-        type: isViewMode ? "text" : "url",
-        value: isViewMode ? displayLabelText : currentUrl,
-        onChange: (e) => handleUrlChange(e.target.value),
-        required,
-        error,
-        disabled,
-        margin: "dense",
-        helperText: displayHelperText,
-        fullWidth,
-        placeholder: "example.com",
-        sx: {
-          "& .MuiInputLabel-asterisk": {
-            color: "red",
-            fontSize: "1.5rem"
-          },
-          "& .MuiInputBase-input": {
-            color: isViewMode && finalUrl ? "primary.main" : void 0,
-            textDecoration: isViewMode && finalUrl ? "underline" : "none",
-            cursor: isViewMode && finalUrl ? "pointer" : void 0,
-            fontWeight: isViewMode && finalUrl ? 500 : void 0
-          },
-          ...sx
-        },
-        slotProps: {
-          htmlInput: {
-            readOnly,
-            onClick: handleInputClick
-          },
-          input: {
-            startAdornment: /* @__PURE__ */ jsx3(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx3(LinkIcon, { fontSize: "small", color: isViewMode && finalUrl ? "primary" : "action" }) }),
-            endAdornment: /* @__PURE__ */ jsxs3(InputAdornment3, { position: "end", sx: { gap: 0.5 }, children: [
-              !isViewMode && /* @__PURE__ */ jsx3(Tooltip2, { title: currentTitle ? `Title: "${currentTitle}"` : /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set link title" }), children: /* @__PURE__ */ jsx3(
-                IconButton3,
-                {
-                  size: "small",
-                  onClick: handleOpenTitleMenu,
-                  color: currentTitle ? "primary" : "default",
-                  children: /* @__PURE__ */ jsx3(EditNoteIcon, { fontSize: "small" })
-                }
-              ) }),
-              finalUrl && /* @__PURE__ */ jsx3(Tooltip2, { title: copied ? /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copied!" }) : /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copy link" }), children: /* @__PURE__ */ jsx3(IconButton3, { size: "small", onClick: handleCopy, color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ jsx3(CheckIcon2, { fontSize: "small" }) : /* @__PURE__ */ jsx3(ContentCopyIcon2, { fontSize: "small" }) }) }),
-              isViewMode && showLock && /* @__PURE__ */ jsx3(Tooltip2, { title: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ jsx3(
-                IconButton3,
-                {
-                  size: "small",
-                  disabled: true,
-                  edge: "end",
-                  "aria-label": "locked input",
-                  sx: {
-                    "&.Mui-disabled": {
-                      color: "text.secondary"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx3(LockIcon2, { fontSize: "small" })
-                }
-              ) }),
-              finalUrl && /* @__PURE__ */ jsx3(Tooltip2, { title: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Open link" }), children: /* @__PURE__ */ jsx3(IconButton3, { size: "small", onClick: handleOpenLink, children: /* @__PURE__ */ jsx3(LaunchIcon, { fontSize: "small", color: isViewMode ? "primary" : "action" }) }) })
-            ] })
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      Popover,
-      {
-        open: isTitlePopoverOpen,
-        anchorEl,
-        onClose: handleCloseTitleMenu,
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
-        },
-        slotProps: {
-          paper: { sx: { p: 2, width: 280 } }
-        },
-        children: [
-          /* @__PURE__ */ jsx3(Typography, { variant: "subtitle2", sx: { mb: 1, fontWeight: "bold" }, children: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Link Title (Anchor)" }) }),
-          /* @__PURE__ */ jsxs3(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: [
-            /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Specify the text to display instead of the URL address" }),
-            ":"
-          ] }),
-          /* @__PURE__ */ jsx3(
-            TextField2,
-            {
-              size: "small",
-              fullWidth: true,
-              placeholder: "e.g. Instruction",
-              value: currentTitle,
-              onChange: (e) => handleTitleChange(e.target.value),
-              autoFocus: true,
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  handleCloseTitleMenu();
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3(Box3, { sx: { display: "flex", justifyContent: "flex-end", mt: 1.5 }, children: /* @__PURE__ */ jsx3(Button, { size: "small", variant: "contained", onClick: handleCloseTitleMenu, children: /* @__PURE__ */ jsx3(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" }) }) })
-        ]
-      }
-    )
-  ] });
-}
-
 // src/UI/components/inputs/EmailInputComponent.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var EmailInputComponent = ({
   value = "",
@@ -691,7 +492,7 @@ var EmailInputComponent = ({
   onValidationChange,
   ...props
 }) => {
-  const [internalError, setInternalError] = useState4(null);
+  const [internalError, setInternalError] = useState3(null);
   const validateEmail = (val) => {
     if (disableValidation) return true;
     const stringVal = String(val ?? "").trim();
@@ -723,7 +524,7 @@ var EmailInputComponent = ({
   };
   const hasError = Boolean(externalError || internalError);
   const displayHelperText = externalHelperText || internalError || void 0;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     TextFieldComponent,
     {
       type: "email",
@@ -737,942 +538,1560 @@ var EmailInputComponent = ({
   );
 };
 
-// src/UI/components/data.display/UserAvatarComponent.tsx
-import { useState as useState5, useEffect as useEffect2, lazy, Suspense } from "react";
-import { Avatar, Tooltip as Tooltip3, Typography as Typography2 } from "@mui/material";
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var LazyUserPopover = lazy(() => import("./UserPopoverComponent-RAEPOSIE.mjs"));
-var getInitials = (name) => {
-  if (!name) return "?";
-  const parts = name.trim().split(" ");
-  if (parts.length >= 2) {
-    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
-  }
-  return name[0].toUpperCase();
-};
-var UserAvatarComponent = ({
-  userId = "",
-  avatarUrl = "",
-  displayName = "",
-  employeePost = "",
-  size = 40,
-  disableBorder = false,
-  disableShadow = false,
-  disablePopover = false,
-  disableTooltip = false,
-  sx = {}
-}) => {
-  const supabase = useSupabase();
-  const [anchorEl, setAnchorEl] = useState5(null);
-  const [hasInteracted, setHasInteracted] = useState5(false);
-  const [resolvedAvatarUrl, setResolvedAvatarUrl] = useState5(null);
-  const canShowPopover = !disablePopover && Boolean(userId);
+// src/UI/components/inputs/SearchComponent.tsx
+import { useState as useState5, useEffect as useEffect3 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { TextField as TextField2, InputAdornment as InputAdornment3, IconButton as IconButton3, Tooltip as Tooltip2 } from "@mui/material";
+import TranslateIcon2 from "@mui/icons-material/Translate";
+import ClearIcon2 from "@mui/icons-material/Clear";
+
+// src/hooks/useDebounce.ts
+import { useEffect as useEffect2, useState as useState4 } from "react";
+function useDebounce(value, delay = 500) {
+  const [debouncedValue, setDebouncedValue] = useState4(value);
   useEffect2(() => {
-    let isMounted = true;
-    const resolveAvatar = async () => {
-      if (!avatarUrl) {
-        if (isMounted) setResolvedAvatarUrl(null);
-        return;
-      }
-      if (!avatarUrl.startsWith("http") && !avatarUrl.startsWith("data:")) {
-        try {
-          const { data } = await supabase.storage.from("user-media").createSignedUrl(avatarUrl, 3600);
-          if (isMounted) {
-            setResolvedAvatarUrl(data?.signedUrl || null);
-          }
-        } catch (err) {
-          console.error("Error resolving signed url for avatar:", err);
-          if (isMounted) setResolvedAvatarUrl(null);
-        }
-      } else {
-        if (isMounted) setResolvedAvatarUrl(avatarUrl);
-      }
-    };
-    resolveAvatar();
+    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);
-      }
-    }
-  };
-  const handleClose = (event) => {
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    setAnchorEl(null);
-  };
-  const isPopoverOpen = Boolean(anchorEl);
-  const initials = getInitials(displayName || "");
-  const getTooltip = /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(Typography2, { component: "div", variant: "caption", children: displayName }),
-    displayName && employeePost && /* @__PURE__ */ jsx5(Typography2, { component: "div", variant: "caption", children: employeePost })
-  ] });
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(Tooltip3, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ jsx5(
-      Avatar,
-      {
-        src: resolvedAvatarUrl || void 0,
-        alt: displayName || "User Avatar",
-        onClick: handleClick,
-        sx: {
-          width: size,
-          height: size,
-          fontSize: size * 0.4,
-          fontWeight: 600,
-          bgcolor: "primary.main",
-          color: "primary.contrastText",
-          cursor: canShowPopover ? "pointer" : void 0,
-          transition: "transform 0.2s ease, box-shadow 0.2s ease",
-          border: disableBorder ? "none" : "2px solid",
-          borderColor: "background.paper",
-          boxShadow: disableShadow ? "none" : 2,
-          "&:hover": {
-            transform: canShowPopover ? "scale(1.05)" : "none"
-          },
-          ...sx
-        },
-        children: !resolvedAvatarUrl && initials
-      }
-    ) }),
-    canShowPopover && hasInteracted && /* @__PURE__ */ jsx5(Suspense, { fallback: null, children: /* @__PURE__ */ jsx5(
-      LazyUserPopover,
-      {
-        userId,
-        anchorEl,
-        open: isPopoverOpen,
-        onClose: handleClose
-      }
-    ) })
-  ] });
-};
+  }, [value, delay]);
+  return debouncedValue;
+}
 
-// src/UI/components/data.display/MyAvatarComponent.tsx
-import { useState as useState6 } from "react";
-import { Avatar as Avatar2, Box as Box4, Popover as Popover2, Typography as Typography3, Skeleton } from "@mui/material";
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var getInitials2 = (name) => {
-  if (!name) return "?";
-  const parts = name.trim().split(" ");
-  if (parts.length >= 2) {
-    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
-  }
-  return name[0].toUpperCase();
-};
-var MyAvatarComponent = ({
-  size = 40,
-  disableBorder = false,
-  disableShadow = false,
-  disablePopover = false,
-  sx = {}
+// src/UI/components/inputs/SearchComponent.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SearchComponent = ({
+  overrideNamespace,
+  label = "",
+  value = "",
+  onChange,
+  onClear,
+  placeholderKey,
+  clearTooltip = "Clear",
+  debounceDelay = 500,
+  onDebounceChange,
+  slotProps,
+  ...restProps
 }) => {
-  const { profile: userProfile, loading: isLoading } = useAuth();
-  const [anchorEl, setAnchorEl] = useState6(null);
-  const handlePopoverOpen = (event) => {
-    if (!disablePopover) {
-      setAnchorEl(event.currentTarget);
+  const supabase = useSupabase();
+  const namespace = useTranslationNamespace();
+  const { t, i18n } = useTranslation2(namespace);
+  const { isTranslationMode } = useTranslationEdit();
+  const [isDialogOpen, setIsDialogOpen] = useState5(false);
+  const [localValue, setLocalValue] = useState5(String(value ?? ""));
+  const debouncedValue = useDebounce(localValue, debounceDelay);
+  useEffect3(() => {
+    setLocalValue(String(value ?? ""));
+  }, [value]);
+  useEffect3(() => {
+    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 handlePopoverClose = () => {
-    setAnchorEl(null);
+  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 isPopoverOpen = Boolean(anchorEl);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx6(
-      Skeleton,
-      {
-        variant: "circular",
-        width: size,
-        height: size,
-        sx: { display: "inline-block", flexShrink: 0, ...sx }
-      }
-    );
-  }
-  const initials = getInitials2(userProfile?.display_name || "");
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsx6(
-      Avatar2,
+  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]) => {
+      i18n.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;
+    }
+    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      existingEndAdornment,
+      /* @__PURE__ */ jsxs3(InputAdornment3, { position: "end", children: [
+        hasValue && /* @__PURE__ */ jsx4(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx4(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ jsx4(
+          IconButton3,
+          {
+            size: "small",
+            onClick: handleClear,
+            edge: "end",
+            "aria-label": "clear input",
+            children: /* @__PURE__ */ jsx4(ClearIcon2, { fontSize: "small" })
+          }
+        ) }),
+        isTranslationMode && placeholderKey && /* @__PURE__ */ jsx4(Tooltip2, { title: `Translate placeholder: "${placeholderKey}"`, children: /* @__PURE__ */ jsx4(
+          IconButton3,
+          {
+            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__ */ jsx4(TranslateIcon2, { fontSize: "small" })
+          }
+        ) })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx4(
+      TextField2,
       {
-        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__ */ jsx4(TranslateText, { overrideNamespace, children: label }) : label,
+        value: localValue,
+        onChange: handleChange,
+        placeholder: translatedPlaceholder,
+        slotProps: {
+          ...slotProps,
+          input: {
+            ...slotProps?.input,
+            endAdornment: renderEndAdornment()
+          }
+        }
       }
     ),
-    !disablePopover && /* @__PURE__ */ jsx6(
-      Popover2,
+    placeholderKey && /* @__PURE__ */ jsx4(
+      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__ */ jsxs5(Box4, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx6(Typography3, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
-          userProfile?.email && /* @__PURE__ */ jsx6(Typography3, { variant: "caption", color: "text.secondary", children: userProfile.email })
-        ] })
+        open: isDialogOpen,
+        onClose: () => setIsDialogOpen(false),
+        translationKey: placeholderKey,
+        namespace,
+        onSave: handleSaveTranslations
       }
     )
   ] });
 };
 
-// src/i18n/LanguageSelector.tsx
-import { useEffect as useEffect3, useState as useState7 } from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
+// src/UI/components/inputs/SelectComponent.tsx
 import {
-  Box as Box5,
-  Typography as Typography4,
-  CircularProgress,
-  IconButton as IconButton4,
-  Menu,
+  FormControl,
+  InputLabel,
+  Select,
   MenuItem,
-  Tooltip as Tooltip4
-} from "@mui/material";
-import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var LanguageSelector = () => {
-  const supabase = useSupabase();
-  const { i18n } = useTranslation2();
-  const [languages, setLanguages] = useState7([]);
-  const [loading, setLoading] = useState7(true);
-  const { changeLanguage } = useLocalization();
-  const { settings: userSettings, setLanguage } = useUserSettings();
-  const [anchorEl, setAnchorEl] = useState7(null);
-  const open = Boolean(anchorEl);
-  useEffect3(() => {
-    const fetchLanguages = async () => {
-      try {
-        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
-        if (error) throw error;
-        setLanguages(data || []);
-        if (userSettings.language) changeLanguage(userSettings.language);
-      } catch (err) {
-        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
-      } finally {
-        setLoading(false);
+  Checkbox,
+  ListItemText,
+  IconButton as IconButton4,
+  InputAdornment as InputAdornment4,
+  Tooltip as Tooltip3,
+  FormHelperText
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { jsx as jsx5, jsxs as jsxs4 } from "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__ */ jsx7(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
-  }
-  const rawCurrentLang = i18n.language || "uk";
-  const currentLangCode = rawCurrentLang.split("-")[0];
-  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx7(Tooltip4, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx7(
-      IconButton4,
-      {
-        onClick: handleClick,
-        size: "small",
-        "aria-controls": open ? "language-menu" : void 0,
-        "aria-haspopup": "true",
-        "aria-expanded": open ? "true" : void 0,
-        sx: {
-          p: 1,
-          borderRadius: 2,
-          transition: "background-color 0.2s",
-          "&:hover": {
-            backgroundColor: "action.hover"
-          }
-        },
-        children: currentLang?.svg_flag && /* @__PURE__ */ jsx7(
-          Box5,
+  const isSmall = size === "small";
+  return /* @__PURE__ */ jsx5(
+    Tooltip3,
+    {
+      title: multiple ? Array.isArray(value) ? options.filter((opt) => value.includes(opt.value)).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value)).join(", ") : "" : options.find((opt) => opt.value === value)?.label ?? String(value ?? ""),
+      children: /* @__PURE__ */ jsxs4(FormControl, { fullWidth, size, sx: { mt: 1 }, children: [
+        /* @__PURE__ */ jsx5(InputLabel, { id: labelId, size: isSmall ? "small" : "medium", children: typeof label === "string" ? /* @__PURE__ */ jsx5(TranslateText, { overrideNamespace, children: label }) : label }),
+        /* @__PURE__ */ jsx5(
+          Select,
           {
+            labelId,
+            id,
+            value: safeValue,
+            label: typeof label === "string" ? /* @__PURE__ */ jsx5(TranslateText, { overrideNamespace, children: label }) : label,
+            size,
+            multiple,
+            disabled,
+            onChange: handleChange,
+            renderValue: multiple ? renderValueHandler : void 0,
+            ...restProps,
+            endAdornment: clearable && hasValue && !disabled ? /* @__PURE__ */ jsx5(InputAdornment4, { position: "end", sx: { mr: 1 }, children: /* @__PURE__ */ jsx5(
+              IconButton4,
+              {
+                size: "small",
+                onClick: handleClear,
+                "aria-label": "clear selection",
+                edge: "end",
+                sx: { p: 0.5 },
+                children: /* @__PURE__ */ jsx5(CloseIcon, { 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__ */ jsx7(
-      Menu,
-      {
-        id: "language-menu",
-        anchorEl,
-        open,
-        onClose: handleClose,
-        slotProps: {
-          paper: {
-            elevation: 3,
-            sx: {
-              mt: 1,
-              minWidth: 150,
-              borderRadius: 2
-            }
-          }
-        },
-        transformOrigin: { horizontal: "right", vertical: "top" },
-        anchorOrigin: { horizontal: "right", vertical: "bottom" },
-        children: languages.map((lang) => {
-          const isSelected = lang.code === currentLangCode;
-          return /* @__PURE__ */ jsxs6(
-            MenuItem,
-            {
-              selected: isSelected,
-              onClick: () => handleSelectLanguage(lang.code),
-              sx: {
+              // 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__ */ jsx7(
-                  Box5,
-                  {
-                    sx: {
-                      width: 22,
-                      height: 15,
-                      borderRadius: "2px",
-                      overflow: "hidden",
-                      flexShrink: 0,
-                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
-                      "& svg": { width: "100%", height: "100%", display: "block" }
-                    },
-                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
-                  }
-                ),
-                /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
-              ]
+              // 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__ */ jsxs4(
+                MenuItem,
+                {
+                  value: option.value,
+                  disabled: isDisabled,
+                  children: [
+                    multiple && withCheckboxes && /* @__PURE__ */ jsx5(Checkbox, { checked: isSelected, size, disabled: isDisabled }),
+                    /* @__PURE__ */ jsx5(
+                      ListItemText,
+                      {
+                        primary: option.isItalic ? /* @__PURE__ */ jsx5("em", { children: option.label }) : option.label
+                      }
+                    )
+                  ]
+                },
+                String(option.value)
+              );
+            })
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx5(FormHelperText, { children: helperText })
+      ] })
+    }
+  );
 };
-var PublicLanguageSelector = () => {
-  const supabase = useSupabase();
-  const { i18n } = useTranslation2();
-  const { changeLanguage } = useLocalization();
-  const [languages, setLanguages] = useState7([]);
-  const [loading, setLoading] = useState7(true);
-  const [anchorEl, setAnchorEl] = useState7(null);
-  const open = Boolean(anchorEl);
-  useEffect3(() => {
-    const fetchLanguages = async () => {
-      try {
-        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
-        if (error) throw error;
-        setLanguages(data || []);
-      } catch (err) {
-        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchLanguages();
-  }, []);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
+
+// src/UI/components/inputs/CheckboxComponent.tsx
+import {
+  FormControlLabel,
+  Checkbox as Checkbox2,
+  Box as Box3
+} from "@mui/material";
+import { jsx as jsx6 } from "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__ */ jsx6(TranslateText, { overrideNamespace, children: node });
+    }
+    return node;
   };
-  const handleClose = () => {
-    setAnchorEl(null);
+  return /* @__PURE__ */ jsx6(Box3, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx6(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ jsx6(
+        Checkbox2,
+        {
+          checked,
+          onChange,
+          ...checkboxProps
+        }
+      ),
+      label: renderLabel(currentLabel),
+      ...props
+    }
+  ) });
+};
+
+// src/UI/components/inputs/SwitchComponent.tsx
+import {
+  FormControlLabel as FormControlLabel2,
+  Box as Box4,
+  Switch
+} from "@mui/material";
+import { jsx as jsx7 } from "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__ */ jsx7(TranslateText, { overrideNamespace, children: node });
+    }
+    return node;
   };
-  const handleSelectLanguage = (langCode) => {
-    changeLanguage(langCode);
-    handleClose();
+  return /* @__PURE__ */ jsx7(Box4, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx7(
+    FormControlLabel2,
+    {
+      control: /* @__PURE__ */ jsx7(
+        Switch,
+        {
+          checked,
+          onChange,
+          ...switchProps
+        }
+      ),
+      label: renderLabel(currentLabel),
+      ...props
+    }
+  ) });
+};
+
+// src/UI/components/inputs/UrlComponent.tsx
+import { useState as useState6 } from "react";
+import {
+  TextField as TextField3,
+  InputAdornment as InputAdornment5,
+  IconButton as IconButton5,
+  Tooltip as Tooltip4,
+  Popover,
+  Box as Box5,
+  Typography,
+  Button
+} from "@mui/material";
+import LinkIcon from "@mui/icons-material/Link";
+import LaunchIcon from "@mui/icons-material/Launch";
+import ContentCopyIcon2 from "@mui/icons-material/ContentCopy";
+import CheckIcon2 from "@mui/icons-material/Check";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import LockIcon2 from "@mui/icons-material/Lock";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function UrlComponent({
+  overrideNamespace,
+  label,
+  value,
+  onChange,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  error = false,
+  helperText = "",
+  description = "",
+  fullWidth = true,
+  openInNewTab = true,
+  showLock = true,
+  lockTooltip = "Field is not editable",
+  sx
+}) {
+  const [copied, setCopied] = useState6(false);
+  const [anchorEl, setAnchorEl] = useState6(null);
+  const isViewMode = disabled || readOnly;
+  const currentUrl = typeof value === "object" && value !== null ? value.url || "" : value || "";
+  const currentTitle = typeof value === "object" && value !== null ? value.title || "" : "";
+  const getFormattedUrl = (val) => {
+    if (!val) return "";
+    const trimmed = val.trim();
+    if (trimmed.match(/^[a-zA-Z]+:\/\//)) {
+      return trimmed;
+    }
+    return `https://${trimmed}`;
   };
-  if (loading) {
-    return /* @__PURE__ */ jsx7(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
-  }
-  const rawCurrentLang = i18n.language || "uk";
-  const currentLangCode = rawCurrentLang.split("-")[0];
-  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx7(Tooltip4, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx7(
-      IconButton4,
+  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__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx8(
+      TextField3,
       {
-        onClick: handleClick,
-        size: "small",
-        "aria-controls": open ? "language-menu" : void 0,
-        "aria-haspopup": "true",
-        "aria-expanded": open ? "true" : void 0,
+        label: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: label }),
+        type: isViewMode ? "text" : "url",
+        value: isViewMode ? displayLabelText : currentUrl,
+        onChange: (e) => handleUrlChange(e.target.value),
+        required,
+        error,
+        disabled,
+        margin: "dense",
+        helperText: displayHelperText,
+        fullWidth,
+        placeholder: "example.com",
         sx: {
-          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__ */ jsx7(
-          Box5,
-          {
-            sx: {
-              width: 24,
-              height: 16,
-              borderRadius: "3px",
-              overflow: "hidden",
-              flexShrink: 0,
-              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
-            },
-            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+        slotProps: {
+          htmlInput: {
+            readOnly,
+            onClick: handleInputClick
+          },
+          input: {
+            startAdornment: /* @__PURE__ */ jsx8(InputAdornment5, { position: "start", children: /* @__PURE__ */ jsx8(LinkIcon, { fontSize: "small", color: isViewMode && finalUrl ? "primary" : "action" }) }),
+            endAdornment: /* @__PURE__ */ jsxs5(InputAdornment5, { position: "end", sx: { gap: 0.5 }, children: [
+              !isViewMode && /* @__PURE__ */ jsx8(Tooltip4, { title: currentTitle ? `Title: "${currentTitle}"` : /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Set link title" }), children: /* @__PURE__ */ jsx8(
+                IconButton5,
+                {
+                  size: "small",
+                  onClick: handleOpenTitleMenu,
+                  color: currentTitle ? "primary" : "default",
+                  children: /* @__PURE__ */ jsx8(EditNoteIcon, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ jsx8(Tooltip4, { title: copied ? /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copied!" }) : /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Copy link" }), children: /* @__PURE__ */ jsx8(IconButton5, { size: "small", onClick: handleCopy, color: copied ? "success" : "default", children: copied ? /* @__PURE__ */ jsx8(CheckIcon2, { fontSize: "small" }) : /* @__PURE__ */ jsx8(ContentCopyIcon2, { fontSize: "small" }) }) }),
+              isViewMode && showLock && /* @__PURE__ */ jsx8(Tooltip4, { title: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ jsx8(
+                IconButton5,
+                {
+                  size: "small",
+                  disabled: true,
+                  edge: "end",
+                  "aria-label": "locked input",
+                  sx: {
+                    "&.Mui-disabled": {
+                      color: "text.secondary"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx8(LockIcon2, { fontSize: "small" })
+                }
+              ) }),
+              finalUrl && /* @__PURE__ */ jsx8(Tooltip4, { title: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Open link" }), children: /* @__PURE__ */ jsx8(IconButton5, { size: "small", onClick: handleOpenLink, children: /* @__PURE__ */ jsx8(LaunchIcon, { fontSize: "small", color: isViewMode ? "primary" : "action" }) }) })
+            ] })
           }
-        )
+        }
       }
-    ) }),
-    /* @__PURE__ */ jsx7(
-      Menu,
+    ),
+    /* @__PURE__ */ jsxs5(
+      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__ */ jsxs6(
-            MenuItem,
+        children: [
+          /* @__PURE__ */ jsx8(Typography, { variant: "subtitle2", sx: { mb: 1, fontWeight: "bold" }, children: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Link Title (Anchor)" }) }),
+          /* @__PURE__ */ jsxs5(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: [
+            /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Specify the text to display instead of the URL address" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx8(
+            TextField3,
             {
-              selected: isSelected,
-              onClick: () => handleSelectLanguage(lang.code),
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 1.5,
-                py: 1,
-                px: 2
-              },
-              children: [
-                /* @__PURE__ */ jsx7(
-                  Box5,
-                  {
-                    sx: {
-                      width: 22,
-                      height: 15,
-                      borderRadius: "2px",
-                      overflow: "hidden",
-                      flexShrink: 0,
-                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
-                      "& svg": { width: "100%", height: "100%", display: "block" }
-                    },
-                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
-                  }
-                ),
-                /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
-              ]
-            },
-            lang.code
-          );
-        })
+              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__ */ jsx8(Box5, { sx: { display: "flex", justifyContent: "flex-end", mt: 1.5 }, children: /* @__PURE__ */ jsx8(Button, { size: "small", variant: "contained", onClick: handleCloseTitleMenu, children: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" }) }) })
+        ]
       }
     )
   ] });
-};
-
-// src/UI/components/inputs/SearchComponent.tsx
-import { useState as useState9, useEffect as useEffect5 } from "react";
-import { useTranslation as useTranslation3 } from "react-i18next";
-import { TextField as TextField3, InputAdornment as InputAdornment4, IconButton as IconButton5, Tooltip as Tooltip5 } from "@mui/material";
-import TranslateIcon2 from "@mui/icons-material/Translate";
-import ClearIcon2 from "@mui/icons-material/Clear";
+}
 
-// src/hooks/useDebounce.ts
-import { useEffect as useEffect4, useState as useState8 } from "react";
-function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = useState8(value);
-  useEffect4(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(timer);
+// src/UI/components/buttons/ButtonComponent.tsx
+import { forwardRef } from "react";
+import { Button as Button2 } from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ButtonComponent = forwardRef(
+  ({ label, children, overrideNamespace, ...props }, ref) => {
+    const renderContent = (content) => {
+      if (typeof content === "string") {
+        return /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: content });
+      }
+      return content;
     };
-  }, [value, delay]);
-  return debouncedValue;
-}
+    const contentToRender = label !== void 0 ? label : children;
+    return /* @__PURE__ */ jsx9(Button2, { ref, ...props, children: renderContent(contentToRender) });
+  }
+);
+ButtonComponent.displayName = "ButtonComponent";
 
-// src/UI/components/inputs/SearchComponent.tsx
-import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var SearchComponent = ({
+// src/UI/components/buttons/RefreshButtonComponent.tsx
+import { useState as useState7 } from "react";
+import {
+  Button as Button3,
+  Fab,
+  styled
+} from "@mui/material";
+import RefreshIconMui from "@mui/icons-material/Refresh";
+import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
+var AnimatedRefreshIcon = styled(RefreshIconMui, {
+  shouldForwardProp: (prop) => prop !== "isSpinning"
+})(({ isSpinning }) => ({
+  animation: isSpinning ? "spin 1s linear infinite" : "none",
+  "@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 } = useTranslation3(namespace);
-  const { isTranslationMode } = useTranslationEdit();
-  const [isDialogOpen, setIsDialogOpen] = useState9(false);
-  const [localValue, setLocalValue] = useState9(String(value ?? ""));
-  const debouncedValue = useDebounce(localValue, debounceDelay);
-  useEffect5(() => {
-    setLocalValue(String(value ?? ""));
-  }, [value]);
-  useEffect5(() => {
-    if (onDebounceChange) {
-      onDebounceChange(debouncedValue);
-    }
-    if (onChange && debouncedValue !== String(value ?? "")) {
-      const syntheticEvent = {
-        target: { value: debouncedValue },
-        currentTarget: { value: debouncedValue }
-      };
-      onChange(syntheticEvent);
+  const { displayState } = useAppTheme();
+  const [internalLoading, setInternalLoading] = useState7(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);
     }
-  }, [debouncedValue]);
-  const hasValue = localValue.length > 0;
-  const handleChange = (e) => {
-    setLocalValue(e.target.value);
   };
-  const handleClear = (e) => {
-    e.stopPropagation();
-    setLocalValue("");
-    if (onClear) {
-      onClear();
+  const renderIcon = () => /* @__PURE__ */ jsx10(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
+    return /* @__PURE__ */ jsx10(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ jsx10(Fragment5, {}) : tooltip || /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(
+      Fab,
+      {
+        size,
+        color: "inherit",
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        "aria-label": "refresh",
+        children: renderIcon()
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx10(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ jsx10(Fragment5, {}) : tooltip || /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx10(
+    Button3,
+    {
+      variant: "contained",
+      color: "inherit",
+      size,
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      fullWidth,
+      startIcon: renderIcon(),
+      children: /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
     }
-    if (onChange) {
-      const syntheticEvent = {
-        ...e,
-        target: { ...e.target, value: "" },
-        currentTarget: { ...e.currentTarget, value: "" }
-      };
-      onChange(syntheticEvent);
+  ) });
+};
+
+// src/UI/components/data.display/UserAvatarComponent.tsx
+import { useState as useState8, useEffect as useEffect4, lazy, Suspense } from "react";
+import { Avatar, Tooltip as Tooltip5, Typography as Typography2 } from "@mui/material";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var LazyUserPopover = lazy(() => import("./UserPopoverComponent-VFSZ5ZO2.mjs"));
+var getInitials = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name[0].toUpperCase();
+};
+var UserAvatarComponent = ({
+  userId = "",
+  avatarUrl = "",
+  displayName = "",
+  employeePost = "",
+  size = 40,
+  disableBorder = false,
+  disableShadow = false,
+  disablePopover = false,
+  disableTooltip = false,
+  sx = {}
+}) => {
+  const supabase = useSupabase();
+  const [anchorEl, setAnchorEl] = useState8(null);
+  const [hasInteracted, setHasInteracted] = useState8(false);
+  const [resolvedAvatarUrl, setResolvedAvatarUrl] = useState8(null);
+  const canShowPopover = !disablePopover && Boolean(userId);
+  useEffect4(() => {
+    let isMounted = true;
+    const resolveAvatar = async () => {
+      if (!avatarUrl) {
+        if (isMounted) setResolvedAvatarUrl(null);
+        return;
+      }
+      if (!avatarUrl.startsWith("http") && !avatarUrl.startsWith("data:")) {
+        try {
+          const { data } = await supabase.storage.from("user-media").createSignedUrl(avatarUrl, 3600);
+          if (isMounted) {
+            setResolvedAvatarUrl(data?.signedUrl || null);
+          }
+        } catch (err) {
+          console.error("Error resolving signed url for avatar:", err);
+          if (isMounted) setResolvedAvatarUrl(null);
+        }
+      } else {
+        if (isMounted) setResolvedAvatarUrl(avatarUrl);
+      }
+    };
+    resolveAvatar();
+    return () => {
+      isMounted = false;
+    };
+  }, [avatarUrl]);
+  const handleClick = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (canShowPopover) {
+      setAnchorEl(event.currentTarget);
+      if (!hasInteracted) {
+        setHasInteracted(true);
+      }
     }
   };
-  const 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;
+  const handleClose = (event) => {
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
     }
-    await translationService.incrementVersion(supabase, namespace, Object.keys(newValues));
-    Object.entries(newValues).forEach(([langCode, text]) => {
-      i18n.addResource(langCode, namespace, placeholderKey, text);
-    });
+    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;
+  const isPopoverOpen = Boolean(anchorEl);
+  const initials = getInitials(displayName || "");
+  const getTooltip = /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx11(Typography2, { component: "div", variant: "caption", children: displayName }),
+    displayName && employeePost && /* @__PURE__ */ jsx11(Typography2, { component: "div", variant: "caption", children: employeePost })
+  ] });
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx11(Tooltip5, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ jsx11(
+      Avatar,
+      {
+        src: resolvedAvatarUrl || void 0,
+        alt: displayName || "User Avatar",
+        onClick: handleClick,
+        sx: {
+          width: size,
+          height: size,
+          fontSize: size * 0.4,
+          fontWeight: 600,
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
+          cursor: canShowPopover ? "pointer" : void 0,
+          transition: "transform 0.2s ease, box-shadow 0.2s ease",
+          border: disableBorder ? "none" : "2px solid",
+          borderColor: "background.paper",
+          boxShadow: disableShadow ? "none" : 2,
+          "&:hover": {
+            transform: canShowPopover ? "scale(1.05)" : "none"
+          },
+          ...sx
+        },
+        children: !resolvedAvatarUrl && initials
+      }
+    ) }),
+    canShowPopover && hasInteracted && /* @__PURE__ */ jsx11(Suspense, { fallback: null, children: /* @__PURE__ */ jsx11(
+      LazyUserPopover,
+      {
+        userId,
+        anchorEl,
+        open: isPopoverOpen,
+        onClose: handleClose
+      }
+    ) })
+  ] });
+};
+
+// src/UI/components/data.display/MyAvatarComponent.tsx
+import { useState as useState9 } from "react";
+import { Avatar as Avatar2, Box as Box6, Popover as Popover2, Typography as Typography3, Skeleton } from "@mui/material";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var getInitials2 = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name[0].toUpperCase();
+};
+var MyAvatarComponent = ({
+  size = 40,
+  disableBorder = false,
+  disableShadow = false,
+  disablePopover = false,
+  sx = {}
+}) => {
+  const { profile: userProfile, loading: isLoading } = useAuth();
+  const [anchorEl, setAnchorEl] = useState9(null);
+  const handlePopoverOpen = (event) => {
+    if (!disablePopover) {
+      setAnchorEl(event.currentTarget);
     }
-    return /* @__PURE__ */ jsxs7(Fragment7, { children: [
-      existingEndAdornment,
-      /* @__PURE__ */ jsxs7(InputAdornment4, { position: "end", children: [
-        hasValue && /* @__PURE__ */ jsx8(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ jsx8(
-          IconButton5,
-          {
-            size: "small",
-            onClick: handleClear,
-            edge: "end",
-            "aria-label": "clear input",
-            children: /* @__PURE__ */ jsx8(ClearIcon2, { fontSize: "small" })
-          }
-        ) }),
-        isTranslationMode && placeholderKey && /* @__PURE__ */ jsx8(Tooltip5, { title: `Translate placeholder: "${placeholderKey}"`, children: /* @__PURE__ */ jsx8(
-          IconButton5,
-          {
-            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__ */ jsx8(TranslateIcon2, { fontSize: "small" })
-          }
-        ) })
-      ] })
-    ] });
   };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const isPopoverOpen = Boolean(anchorEl);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx12(
+      Skeleton,
+      {
+        variant: "circular",
+        width: size,
+        height: size,
+        sx: { display: "inline-block", flexShrink: 0, ...sx }
+      }
+    );
+  }
+  const initials = getInitials2(userProfile?.display_name || "");
   return /* @__PURE__ */ jsxs7(Fragment7, { children: [
-    /* @__PURE__ */ jsx8(
-      TextField3,
+    /* @__PURE__ */ jsx12(
+      Avatar2,
       {
-        ...restProps,
-        label: typeof label === "string" ? /* @__PURE__ */ jsx8(TranslateText, { overrideNamespace, children: label }) : label,
-        value: localValue,
-        onChange: handleChange,
-        placeholder: translatedPlaceholder,
-        slotProps: {
-          ...slotProps,
-          input: {
-            ...slotProps?.input,
-            endAdornment: renderEndAdornment()
-          }
-        }
+        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
       }
     ),
-    placeholderKey && /* @__PURE__ */ jsx8(
-      TranslationDialog,
+    !disablePopover && /* @__PURE__ */ jsx12(
+      Popover2,
       {
-        open: isDialogOpen,
-        onClose: () => setIsDialogOpen(false),
-        translationKey: placeholderKey,
-        namespace,
-        onSave: handleSaveTranslations
+        id: `avatar-popover-${userProfile?.id}`,
+        open: isPopoverOpen,
+        anchorEl,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        onClose: handlePopoverClose,
+        disableRestoreFocus: true,
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        sx: {
+          pointerEvents: "none",
+          mt: 1
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              p: 1.5,
+              borderRadius: 2,
+              boxShadow: 3
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs7(Box6, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx12(Typography3, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ jsx12(Typography3, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        ] })
       }
     )
   ] });
 };
 
-// src/UI/components/inputs/SelectComponent.tsx
-import {
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem as MenuItem2,
-  Checkbox,
-  ListItemText,
-  IconButton as IconButton6,
-  InputAdornment as InputAdornment5,
-  Tooltip as Tooltip6,
-  FormHelperText
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var SelectComponent = ({
+// src/UI/components/data.display/ExpandableNoteComponent.tsx
+import { useState as useState10 } from "react";
+import { Typography as Typography4, Link } from "@mui/material";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var ExpandableNoteComponent = ({
   overrideNamespace,
+  text,
+  maxLength = 100,
   label,
-  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;
-      }
-    }
-    onChange?.(event, child);
-  };
-  const handleClear = (e) => {
+  const [isExpanded, setIsExpanded] = useState10(false);
+  if (!text) return null;
+  const isLong = text.length > maxLength;
+  const displayedText = isExpanded || !isLong ? text : `${text.slice(0, maxLength).trim()}...`;
+  const toggleExpand = (e) => {
     e.stopPropagation();
-    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 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(", ");
+    setIsExpanded((prev) => !prev);
   };
-  const isSmall = size === "small";
-  return /* @__PURE__ */ jsx9(
-    Tooltip6,
+  return /* @__PURE__ */ jsxs8(
+    Typography4,
     {
-      title: multiple ? Array.isArray(value) ? options.filter((opt) => value.includes(opt.value)).map((opt) => typeof opt.label === "string" ? opt.label : String(opt.value)).join(", ") : "" : options.find((opt) => opt.value === value)?.label ?? String(value ?? ""),
-      children: /* @__PURE__ */ jsxs8(FormControl, { fullWidth, size, sx: { mt: 1 }, children: [
-        /* @__PURE__ */ jsx9(InputLabel, { id: labelId, size: isSmall ? "small" : "medium", children: typeof label === "string" ? /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: label }) : label }),
-        /* @__PURE__ */ jsx9(
-          Select,
+      variant: "caption",
+      sx: {
+        color: "text.secondary",
+        fontStyle: "italic",
+        display: "inline-block",
+        ...sx
+      },
+      ...restProps,
+      children: [
+        label !== void 0 ? label : /* @__PURE__ */ jsxs8(Fragment8, { children: [
+          /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
+          ": "
+        ] }),
+        " ",
+        displayedText,
+        " ",
+        isLong && /* @__PURE__ */ jsx13(
+          Link,
           {
-            labelId,
-            id,
-            value: safeValue,
-            label: typeof label === "string" ? /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: label }) : label,
-            size,
-            multiple,
-            disabled,
-            onChange: handleChange,
-            renderValue: multiple ? renderValueHandler : void 0,
-            ...restProps,
-            endAdornment: clearable && hasValue && !disabled ? /* @__PURE__ */ jsx9(InputAdornment5, { position: "end", sx: { mr: 1 }, children: /* @__PURE__ */ jsx9(
-              IconButton6,
+            component: "button",
+            type: "button",
+            variant: "caption",
+            underline: "hover",
+            onClick: toggleExpand,
+            sx: {
+              fontStyle: "normal",
+              fontWeight: "bold",
+              ml: 0.5,
+              cursor: "pointer",
+              verticalAlign: "baseline"
+            },
+            children: isExpanded ? /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ jsxs8(Fragment8, { children: [
+              /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
+              "..."
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/UI/components/data.display/ErrorAlertComponent.tsx
+import { Alert, Box as Box7, Button as Button4, Typography as Typography5, useTheme } from "@mui/material";
+import ReplayIcon from "@mui/icons-material/Replay";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var ErrorIllustration = ({ size = 64 }) => {
+  const theme = useTheme();
+  const mainColor = theme.palette.error.main;
+  const lightColor = theme.palette.error.light;
+  return /* @__PURE__ */ jsx14(
+    Box7,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxs9(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: "0 0 100 100",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsxs9(
+              "circle",
               {
-                size: "small",
-                onClick: handleClear,
-                "aria-label": "clear selection",
-                edge: "end",
-                sx: { p: 0.5 },
-                children: /* @__PURE__ */ jsx9(CloseIcon, { fontSize: "small" })
+                cx: "50",
+                cy: "50",
+                r: "42",
+                fill: lightColor,
+                fillOpacity: "0.25",
+                children: [
+                  /* @__PURE__ */ jsx14(
+                    "animate",
+                    {
+                      attributeName: "r",
+                      values: "38;44;38",
+                      dur: "3s",
+                      repeatCount: "indefinite"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx14(
+                    "animate",
+                    {
+                      attributeName: "fill-opacity",
+                      values: "0.2;0.4;0.2",
+                      dur: "3s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                ]
               }
-            ) }) : null,
-            sx: {
-              // 1. Задаем фиксированную высоту для всего контейнера инпута
-              height: isSmall ? "40px" : "56px",
-              minHeight: isSmall ? "40px" : "56px",
-              // 2. Выравниваем внутренний класс текстового поля
-              "& .MuiSelect-select": {
+            ),
+            /* @__PURE__ */ jsx14("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
+            /* @__PURE__ */ jsx14(
+              "path",
+              {
+                d: "M50 20L80 72H20L50 20Z",
+                fill: mainColor,
+                stroke: theme.palette.background.paper,
+                strokeWidth: "3",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              "path",
+              {
+                d: "M50 36V54",
+                stroke: "#FFFFFF",
+                strokeWidth: "4",
+                strokeLinecap: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx14("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
+            /* @__PURE__ */ jsx14("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
+            /* @__PURE__ */ jsx14("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
+            /* @__PURE__ */ jsx14("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
+          ]
+        }
+      )
+    }
+  );
+};
+var ErrorAlertComponent = ({
+  overrideNamespace,
+  title = "An error occurred",
+  message,
+  onRetry,
+  retryText = "Retry",
+  isRetrying = false
+}) => {
+  return /* @__PURE__ */ jsx14(
+    Alert,
+    {
+      severity: "error",
+      icon: false,
+      sx: {
+        borderRadius: 1,
+        p: 2.5,
+        m: 3,
+        border: "1px solid",
+        borderColor: "error.light",
+        bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(211, 47, 47, 0.08)" : "rgba(211, 47, 47, 0.04)",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
+        "& .MuiAlert-message": {
+          width: "100%",
+          p: 0
+        }
+      },
+      children: /* @__PURE__ */ jsxs9(
+        Box7,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: { xs: "column", sm: "row" },
+            alignItems: { xs: "flex-start", sm: "center" },
+            gap: 2
+          },
+          children: [
+            /* @__PURE__ */ jsx14(ErrorIllustration, { size: 68 }),
+            /* @__PURE__ */ jsxs9(Box7, { sx: { flexGrow: 1 }, children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx14(
+                Typography5,
+                {
+                  variant: "subtitle1",
+                  sx: { fontWeight: 600, color: "error.main", mb: 0.5 },
+                  children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace, children: title })
+                }
+              ) : title,
+              typeof message === "string" ? /* @__PURE__ */ jsx14(Typography5, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace, children: message }) }) : message
+            ] }),
+            onRetry && /* @__PURE__ */ jsx14(
+              Box7,
+              {
+                sx: {
+                  alignSelf: { xs: "flex-end", sm: "center" },
+                  mt: { xs: 1, sm: 0 }
+                },
+                children: /* @__PURE__ */ jsx14(
+                  Button4,
+                  {
+                    variant: "outlined",
+                    color: "error",
+                    size: "small",
+                    disabled: isRetrying,
+                    onClick: onRetry,
+                    startIcon: /* @__PURE__ */ jsx14(
+                      ReplayIcon,
+                      {
+                        sx: {
+                          animation: isRetrying ? "spin 1s linear infinite" : "none",
+                          "@keyframes spin": {
+                            "0%": { transform: "rotate(0deg)" },
+                            "100%": { transform: "rotate(360deg)" }
+                          }
+                        }
+                      }
+                    ),
+                    sx: {
+                      //borderRadius: 2,
+                      textTransform: "none",
+                      fontWeight: 600,
+                      px: 2,
+                      py: 0.75,
+                      whiteSpace: "nowrap"
+                    },
+                    children: retryText
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/UI/components/layout/PageComponent.tsx
+import React10, { useState as useState11 } from "react";
+import {
+  Box as Box8,
+  Typography as Typography6,
+  Button as Button5,
+  IconButton as IconButton6,
+  Menu,
+  MenuItem as MenuItem2,
+  ListItemIcon,
+  ListItemText as ListItemText2,
+  Divider,
+  Tooltip as Tooltip6,
+  useTheme as useTheme2,
+  useMediaQuery,
+  Stack,
+  Fab as Fab2
+} from "@mui/material";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Refresh as RefreshIcon } from "@mui/icons-material";
+import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var getTruncateStyles = (mode = "truncate") => {
+  switch (mode) {
+    case "truncate":
+      return { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" };
+    case "clamp-2":
+      return { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal" };
+    case "wrap":
+    default:
+      return { whiteSpace: "normal", wordBreak: "break-word" };
+  }
+};
+var PageHeader = ({
+  overrideNamespace,
+  icon,
+  title,
+  subtitle,
+  tag,
+  titleTruncateMode = "truncate",
+  subtitleTruncateMode = "truncate",
+  customFragment,
+  primaryAction,
+  secondaryActions = [],
+  refreshAction,
+  mobileBreakpoint = "sm",
+  forceMobileView,
+  sx = []
+}) => {
+  const theme = useTheme2();
+  const mediaIsMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
+  const isMobile = forceMobileView ?? mediaIsMobile;
+  const [anchorEl, setAnchorEl] = useState11(null);
+  const isMenuOpen = Boolean(anchorEl);
+  const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
+  const handleCloseMenu = () => setAnchorEl(null);
+  const handleMenuAction = (cb) => {
+    handleCloseMenu();
+    cb();
+  };
+  const hasSecondaryActions = secondaryActions.length > 0;
+  const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
+  return /* @__PURE__ */ jsxs10(
+    Box8,
+    {
+      sx: [
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          gap: { xs: 1.5, sm: 2.5 },
+          py: 1.5,
+          px: { xs: 1.5, sm: 2 },
+          borderRadius: 2,
+          backgroundColor: "background.paper",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsxs10(Box8, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
+          icon && /* @__PURE__ */ jsx15(
+            Box8,
+            {
+              sx: {
                 display: "flex",
                 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"
+                justifyContent: "center",
+                width: { xs: 40, sm: 48 },
+                height: { xs: 40, sm: 48 },
+                borderRadius: 2.5,
+                backgroundColor: "primary.50",
+                color: "primary.main",
+                flexShrink: 0,
+                border: "1px solid",
+                borderColor: "primary.100",
+                "& svg": { fontSize: { xs: 22, sm: 26 } }
               },
-              ...sx
-            },
-            children: options.map((option) => {
-              const isSelected = multiple && selectedArray.includes(option.value);
-              const isDisabled = Boolean(isLimitReached && !isSelected);
-              return /* @__PURE__ */ jsxs8(
-                MenuItem2,
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxs10(Box8, { sx: { minWidth: 0, flex: 1 }, children: [
+            tag && /* @__PURE__ */ jsx15(Box8, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ jsx15(Tooltip6, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx15(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx15(
+              Typography6,
+              {
+                variant: "h5",
+                component: "h1",
+                sx: {
+                  fontWeight: 700,
+                  color: "text.primary",
+                  fontSize: { xs: "1.125rem", sm: "1.35rem" },
+                  lineHeight: 1.3,
+                  ...getTruncateStyles(titleTruncateMode)
+                },
+                children: /* @__PURE__ */ jsx15(TranslateText, { children: title })
+              }
+            ) }),
+            subtitle && /* @__PURE__ */ jsx15(Tooltip6, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx15(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx15(
+              Typography6,
+              {
+                variant: "body2",
+                sx: {
+                  color: "text.secondary",
+                  mt: 0.25,
+                  fontSize: { xs: "0.8125rem", sm: "0.875rem" },
+                  lineHeight: 1.4,
+                  ...getTruncateStyles(subtitleTruncateMode)
+                },
+                children: /* @__PURE__ */ jsx15(TranslateText, { children: subtitle })
+              }
+            ) })
+          ] })
+        ] }),
+        hasActions && /* @__PURE__ */ jsx15(Box8, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+          /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
+          /* @__PURE__ */ jsxs10(Fragment9, { children: [
+            /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx15(
+              IconButton6,
+              {
+                onClick: handleOpenMenu,
+                sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
+                children: /* @__PURE__ */ jsx15(MoreVertIcon, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsxs10(
+              Menu,
+              {
+                anchorEl,
+                open: isMenuOpen,
+                onClose: handleCloseMenu,
+                transformOrigin: { horizontal: "right", vertical: "top" },
+                anchorOrigin: { horizontal: "right", vertical: "bottom" },
+                slotProps: { paper: { elevation: 4, sx: { minWidth: 200, borderRadius: 2, mt: 1, p: 0.5 } } },
+                children: [
+                  primaryAction && /* @__PURE__ */ jsxs10(Fragment9, { children: [
+                    /* @__PURE__ */ jsxs10(
+                      MenuItem2,
+                      {
+                        onClick: () => handleMenuAction(primaryAction.onClick),
+                        disabled: primaryAction.disabled,
+                        sx: {
+                          borderRadius: 1.5,
+                          fontWeight: 700,
+                          backgroundColor: "primary.50",
+                          color: primaryAction.color ? `${primaryAction.color}.main` : "primary.main",
+                          py: 1.2,
+                          px: 1.5
+                        },
+                        children: [
+                          primaryAction.icon && /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ jsx15(ListItemText2, { primary: /* @__PURE__ */ jsx15(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                        ]
+                      }
+                    ),
+                    hasSecondaryActions && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.75 } })
+                  ] }),
+                  secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React10.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs10(
+                      MenuItem2,
+                      {
+                        onClick: () => handleMenuAction(action.onClick),
+                        disabled: action.disabled,
+                        sx: { borderRadius: 1, py: 1, px: 1.5, color: action.color ? `${action.color}.main` : "text.primary" },
+                        children: [
+                          action.icon && /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx15(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                        ]
+                      }
+                    )
+                  ] }, action.id)),
+                  refreshAction && /* @__PURE__ */ jsxs10(Fragment9, { children: [
+                    /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs10(
+                      MenuItem2,
+                      {
+                        onClick: () => handleMenuAction(refreshAction.onClick),
+                        disabled: refreshAction.disabled,
+                        sx: {
+                          borderRadius: 1.5,
+                          fontWeight: 700,
+                          backgroundColor: "primary.50",
+                          py: 1.2,
+                          px: 1.5
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx15(RefreshIcon, {}) }),
+                          /* @__PURE__ */ jsx15(ListItemText2, { primary: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ) : (
+          /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
+          /* @__PURE__ */ jsxs10(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            (primaryAction || refreshAction) && /* @__PURE__ */ jsxs10(Stack, { direction: "row", spacing: 2, children: [
+              primaryAction && /* @__PURE__ */ jsx15(
+                Button5,
                 {
-                  value: option.value,
-                  disabled: isDisabled,
-                  children: [
-                    multiple && withCheckboxes && /* @__PURE__ */ jsx9(Checkbox, { checked: isSelected, size, disabled: isDisabled }),
-                    /* @__PURE__ */ jsx9(
-                      ListItemText,
+                  variant: primaryAction.variant || "contained",
+                  color: primaryAction.color || "primary",
+                  onClick: primaryAction.onClick,
+                  disabled: primaryAction.disabled,
+                  startIcon: primaryAction.icon,
+                  sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
+                  children: /* @__PURE__ */ jsx15(TranslateText, { children: primaryAction.label })
+                }
+              ),
+              refreshAction && /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15(
+                Fab2,
+                {
+                  color: "default",
+                  onClick: refreshAction.onClick,
+                  disabled: refreshAction.disabled,
+                  "aria-label": "refresh",
+                  size: "small",
+                  children: /* @__PURE__ */ jsx15(RefreshIcon, {})
+                }
+              ) })
+            ] }),
+            hasSecondaryActions && /* @__PURE__ */ jsxs10(Fragment9, { children: [
+              /* @__PURE__ */ jsx15(
+                IconButton6,
+                {
+                  onClick: handleOpenMenu,
+                  sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
+                  children: /* @__PURE__ */ jsx15(KeyboardArrowDownIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                Menu,
+                {
+                  anchorEl,
+                  open: isMenuOpen,
+                  onClose: handleCloseMenu,
+                  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__ */ jsxs10(React10.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs10(
+                      MenuItem2,
                       {
-                        primary: option.isItalic ? /* @__PURE__ */ jsx9("em", { children: option.label }) : option.label
+                        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__ */ jsx15(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx15(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                        ]
                       }
                     )
-                  ]
-                },
-                String(option.value)
-              );
-            })
-          }
-        ),
-        helperText && /* @__PURE__ */ jsx9(FormHelperText, { children: helperText })
-      ] })
+                  ] }, action.id))
+                }
+              )
+            ] })
+          ] })
+        ) }),
+        customFragment && /* @__PURE__ */ jsx15(Fragment9, { children: customFragment })
+      ]
     }
   );
 };
-
-// src/UI/components/data.display/ExpandableNoteComponent.tsx
-import { useState as useState10 } from "react";
-import { Typography as Typography5, Link } from "@mui/material";
-import { Fragment as Fragment8, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var ExpandableNoteComponent = ({
-  overrideNamespace,
-  text,
-  maxLength = 100,
-  label,
-  sx,
-  ...restProps
+var PageContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx15(
+    Box8,
+    {
+      sx: {
+        width: "100%",
+        boxSizing: "border-box",
+        p: { xs: 1.5, sm: 3 },
+        backgroundColor: "background.paper"
+      },
+      children
+    }
+  );
+};
+var PageComponent = ({
+  header,
+  children
 }) => {
-  const [isExpanded, setIsExpanded] = useState10(false);
-  if (!text) return null;
-  const isLong = text.length > maxLength;
-  const displayedText = isExpanded || !isLong ? text : `${text.slice(0, maxLength).trim()}...`;
-  const toggleExpand = (e) => {
-    e.stopPropagation();
-    setIsExpanded((prev) => !prev);
-  };
-  return /* @__PURE__ */ jsxs9(
-    Typography5,
+  return /* @__PURE__ */ jsx15(
+    Box8,
     {
-      variant: "caption",
       sx: {
-        color: "text.secondary",
-        fontStyle: "italic",
-        display: "inline-block",
-        ...sx
+        //pt: 2,
+        flexGrow: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        boxSizing: "border-box"
       },
-      ...restProps,
-      children: [
-        label !== void 0 ? label : /* @__PURE__ */ jsxs9(Fragment8, { children: [
-          /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
-          ": "
-        ] }),
-        " ",
-        displayedText,
-        " ",
-        isLong && /* @__PURE__ */ jsx10(
-          Link,
-          {
-            component: "button",
-            type: "button",
-            variant: "caption",
-            underline: "hover",
-            onClick: toggleExpand,
-            sx: {
-              fontStyle: "normal",
-              fontWeight: "bold",
-              ml: 0.5,
-              cursor: "pointer",
-              verticalAlign: "baseline"
-            },
-            children: isExpanded ? /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ jsxs9(Fragment8, { children: [
-              /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
-              "..."
-            ] })
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxs10(PageContainer, { children: [
+        header && /* @__PURE__ */ jsx15(PageHeader, { ...header }),
+        children
+      ] })
+    }
+  );
+};
+
+// src/UI/components/layout/FilterContainerComponent.tsx
+import React11 from "react";
+import { Grid, Paper } from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var FilterContainerComponent = ({
+  sections,
+  children,
+  sx
+}) => {
+  return /* @__PURE__ */ jsx16(
+    Paper,
+    {
+      variant: "outlined",
+      sx: [
+        { p: 2, mb: 3 },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ jsx16(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ jsx16(React11.Fragment, { children: sec }, idx)) : children })
     }
   );
 };
 
-// src/UI/widgets/page/PageLinkWidget.tsx
+// src/UI/components/layout/PageLinkComponent.tsx
 import { ArrowRight, Settings } from "@mui/icons-material";
 import {
-  Button as Button2,
+  Button as Button6,
   Card,
   CardActions,
   CardContent,
   CardHeader,
-  Divider,
+  Divider as Divider2,
   List,
   ListItem,
-  ListItemIcon,
-  ListItemText as ListItemText2,
-  Typography as Typography6,
+  ListItemIcon as ListItemIcon2,
+  ListItemText as ListItemText3,
+  Typography as Typography7,
   Link as MuiLink
 } from "@mui/material";
-import React10 from "react";
+import React12 from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var PageLinkWidget = ({
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var PageLinkComponent = ({
   overrideNamespace,
   title,
   subheader,
@@ -1684,7 +2103,7 @@ var PageLinkWidget = ({
   bgcolor
 }) => {
   const navigate = useNavigate();
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     Card,
     {
       sx: (theme) => ({
@@ -1698,20 +2117,20 @@ var PageLinkWidget = ({
         ) : typeof bgcolor === "function" ? theme.palette.getContrastText(bgcolor(theme)) : theme.palette.getContrastText(bgcolor) : "text.primary"
       }),
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx17(
           CardHeader,
           {
-            avatar: icon ? React10.cloneElement(icon, {
+            avatar: icon ? React12.cloneElement(icon, {
               sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
-            }) : /* @__PURE__ */ jsx11(Settings, { color: bgcolor ? "inherit" : "primary" }),
-            title: /* @__PURE__ */ jsx11(Typography6, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: title }) : title }),
-            subheader: subheader && /* @__PURE__ */ jsx11(Typography6, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: subheader }) : subheader })
+            }) : /* @__PURE__ */ jsx17(Settings, { color: bgcolor ? "inherit" : "primary" }),
+            title: /* @__PURE__ */ jsx17(Typography7, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: title }) : title }),
+            subheader: subheader && /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: subheader }) : subheader })
           }
         ),
-        /* @__PURE__ */ jsx11(Divider, { sx: { borderColor: "inherit", opacity: 0.2 } }),
-        /* @__PURE__ */ jsxs10(CardContent, { sx: { flexGrow: 1 }, children: [
-          /* @__PURE__ */ jsx11(Typography6, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: description }) : description }),
-          links && links.length > 0 && /* @__PURE__ */ jsx11(List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsx17(Divider2, { sx: { borderColor: "inherit", opacity: 0.2 } }),
+        /* @__PURE__ */ jsxs11(CardContent, { sx: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: description }) : description }),
+          links && links.length > 0 && /* @__PURE__ */ jsx17(List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ jsxs11(
             ListItem,
             {
               disablePadding: true,
@@ -1723,18 +2142,18 @@ var PageLinkWidget = ({
                 }
               },
               children: [
-                /* @__PURE__ */ jsx11(
-                  ListItemIcon,
+                /* @__PURE__ */ jsx17(
+                  ListItemIcon2,
                   {
                     sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
                     onClick: () => {
                       if (link?.href) navigate(link.href);
                     },
-                    children: /* @__PURE__ */ jsx11(ArrowRight, { fontSize: "small", color: "inherit" })
+                    children: /* @__PURE__ */ jsx17(ArrowRight, { fontSize: "small", color: "inherit" })
                   }
                 ),
-                /* @__PURE__ */ jsx11(ListItemText2, { children: link.onClick ? /* @__PURE__ */ jsx11(
-                  Button2,
+                /* @__PURE__ */ jsx17(ListItemText3, { children: link.onClick ? /* @__PURE__ */ jsx17(
+                  Button6,
                   {
                     size: "small",
                     variant: "text",
@@ -1757,9 +2176,9 @@ var PageLinkWidget = ({
                         // Эффект подчеркивания, как у ссылки
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text
                   }
-                ) : link.href ? /* @__PURE__ */ jsx11(
+                ) : link.href ? /* @__PURE__ */ jsx17(
                   MuiLink,
                   {
                     component: RouterLink,
@@ -1775,112 +2194,30 @@ var PageLinkWidget = ({
                       "&:hover": {
                         opacity: 0.75,
                         backgroundColor: "transparent"
-                      }
-                    },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: link.text }) : link.text
-                  }
-                ) : /* @__PURE__ */ jsx11(Typography6, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
-              ]
-            },
-            index
-          )) })
-        ] }),
-        actionButtonText && onActionButtonClick && /* @__PURE__ */ jsx11(CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ jsx11(Button2, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
-      ]
-    }
-  );
-};
-
-// src/UI/components/inputs/SwitchComponent.tsx
-import {
-  FormControlLabel,
-  Box as Box6,
-  Switch
-} from "@mui/material";
-import { jsx as jsx12 } from "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__ */ jsx12(TranslateText, { overrideNamespace, children: node });
-    }
-    return node;
-  };
-  return /* @__PURE__ */ jsx12(Box6, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx12(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ jsx12(
-        Switch,
-        {
-          checked,
-          onChange,
-          ...switchProps
-        }
-      ),
-      label: renderLabel(currentLabel),
-      ...props
-    }
-  ) });
-};
-
-// src/UI/components/inputs/CheckboxComponent.tsx
-import {
-  FormControlLabel as FormControlLabel2,
-  Checkbox as Checkbox2,
-  Box as Box7
-} from "@mui/material";
-import { jsx as jsx13 } from "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__ */ jsx13(TranslateText, { overrideNamespace, children: node });
-    }
-    return node;
-  };
-  return /* @__PURE__ */ jsx13(Box7, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx13(
-    FormControlLabel2,
-    {
-      control: /* @__PURE__ */ jsx13(
-        Checkbox2,
-        {
-          checked,
-          onChange,
-          ...checkboxProps
-        }
-      ),
-      label: renderLabel(currentLabel),
-      ...props
+                      }
+                    },
+                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                  }
+                ) : /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
+              ]
+            },
+            index
+          )) })
+        ] }),
+        actionButtonText && onActionButtonClick && /* @__PURE__ */ jsx17(CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ jsx17(Button6, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
+      ]
     }
-  ) });
+  );
 };
 
-// src/UI/widgets/page/CollapsedWidgetContainer.tsx
+// src/UI/components/layout/CollapsedContainerComponent.tsx
 import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
-import { Avatar as Avatar3, Box as Box8, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider2, IconButton as IconButton7, styled, Tooltip as Tooltip7, Typography as Typography7 } from "@mui/material";
-import { useState as useState11 } from "react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var ExpandMore = styled((props) => {
+import { Avatar as Avatar3, Box as Box9, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider3, IconButton as IconButton7, styled as styled2, Tooltip as Tooltip7, Typography as Typography8 } from "@mui/material";
+import { useState as useState12 } from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var ExpandMore = styled2((props) => {
   const { expand, ...other } = props;
-  return /* @__PURE__ */ jsx14(IconButton7, { size: "small", ...other, children: /* @__PURE__ */ jsx14(ExpandMoreIcon, {}) });
+  return /* @__PURE__ */ jsx18(IconButton7, { size: "small", ...other, children: /* @__PURE__ */ jsx18(ExpandMoreIcon, {}) });
 })(({ theme, expand }) => ({
   transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
   transition: theme.transitions.create("transform", {
@@ -1893,16 +2230,16 @@ var ExpandMore = styled((props) => {
     backgroundColor: expand ? theme.palette.primary.dark : theme.palette.action.hover
   }
 }));
-var CollapsedWidgetContainer = (props) => {
+var CollapsedContainerComponent = (props) => {
   const { displayState } = useAppTheme();
-  const [expanded, setExpanded] = useState11(props.expanded === void 0 ? false : props.expanded);
+  const [expanded, setExpanded] = useState12(props.expanded === void 0 ? false : props.expanded);
   const handleExpandClick = () => {
     setExpanded(!expanded);
     props.onExpanded && props.onExpanded(!expanded);
   };
-  return /* @__PURE__ */ jsxs11(Card2, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
-    /* @__PURE__ */ jsxs11(
-      Box8,
+  return /* @__PURE__ */ jsxs12(Card2, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
+    /* @__PURE__ */ jsxs12(
+      Box9,
       {
         onClick: () => handleExpandClick(),
         sx: {
@@ -1913,739 +2250,316 @@ var CollapsedWidgetContainer = (props) => {
           pr: 2
         },
         children: [
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx18(
             CardHeader2,
             {
               sx: { flexGrow: 1 },
-              avatar: /* @__PURE__ */ jsx14(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
-              title: typeof props.title === "string" ? /* @__PURE__ */ jsx14(Typography7, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
-              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+              avatar: /* @__PURE__ */ jsx18(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              title: typeof props.title === "string" ? /* @__PURE__ */ jsx18(Typography8, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
             }
           ),
-          /* @__PURE__ */ jsx14(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx14(Box8, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx18(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx18(Box9, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx18(
             ExpandMore,
             {
               expand: expanded,
               onClick: handleExpandClick,
-              "aria-expanded": expanded
-            }
-          ) }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs11(Collapse, { in: expanded, timeout: "auto", children: [
-      /* @__PURE__ */ jsx14(Divider2, { variant: "middle" }),
-      /* @__PURE__ */ jsx14(CardContent2, { children: props.children })
-    ] })
-  ] });
-};
-
-// src/UI/components/buttons/RefreshButtonComponent.tsx
-import { useState as useState12 } from "react";
-import {
-  Button as Button3,
-  Fab,
-  styled as styled2
-} from "@mui/material";
-import RefreshIconMui from "@mui/icons-material/Refresh";
-import { Fragment as Fragment9, jsx as jsx15 } from "react/jsx-runtime";
-var AnimatedRefreshIcon = styled2(RefreshIconMui, {
-  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] = useState12(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__ */ jsx15(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
-  if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
-    return /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ jsx15(Fragment9, {}) : tooltip || /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15("span", { children: /* @__PURE__ */ jsx15(
-      Fab,
-      {
-        size,
-        color: "inherit",
-        onClick: handleClick,
-        disabled: disabled || isLoading,
-        "aria-label": "refresh",
-        children: renderIcon()
-      }
-    ) }) });
-  }
-  return /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ jsx15(Fragment9, {}) : tooltip || /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15(
-    Button3,
-    {
-      variant: "contained",
-      color: "inherit",
-      size,
-      onClick: handleClick,
-      disabled: disabled || isLoading,
-      fullWidth,
-      startIcon: renderIcon(),
-      children: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
-    }
-  ) });
-};
-
-// src/UI/widgets/misc/ErrorAlertWidget.tsx
-import { Alert, Box as Box9, Button as Button4, Typography as Typography8, useTheme } from "@mui/material";
-import ReplayIcon from "@mui/icons-material/Replay";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var ErrorIllustration = ({ size = 64 }) => {
-  const theme = useTheme();
-  const mainColor = theme.palette.error.main;
-  const lightColor = theme.palette.error.light;
-  return /* @__PURE__ */ jsx16(
-    Box9,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ jsxs12(
-        "svg",
-        {
-          width: size,
-          height: size,
-          viewBox: "0 0 100 100",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: [
-            /* @__PURE__ */ jsxs12(
-              "circle",
-              {
-                cx: "50",
-                cy: "50",
-                r: "42",
-                fill: lightColor,
-                fillOpacity: "0.25",
-                children: [
-                  /* @__PURE__ */ jsx16(
-                    "animate",
-                    {
-                      attributeName: "r",
-                      values: "38;44;38",
-                      dur: "3s",
-                      repeatCount: "indefinite"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx16(
-                    "animate",
-                    {
-                      attributeName: "fill-opacity",
-                      values: "0.2;0.4;0.2",
-                      dur: "3s",
-                      repeatCount: "indefinite"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
-            /* @__PURE__ */ jsx16(
-              "path",
-              {
-                d: "M50 20L80 72H20L50 20Z",
-                fill: mainColor,
-                stroke: theme.palette.background.paper,
-                strokeWidth: "3",
-                strokeLinejoin: "round"
-              }
-            ),
-            /* @__PURE__ */ jsx16(
-              "path",
-              {
-                d: "M50 36V54",
-                stroke: "#FFFFFF",
-                strokeWidth: "4",
-                strokeLinecap: "round"
-              }
-            ),
-            /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
-            /* @__PURE__ */ jsx16("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
-            /* @__PURE__ */ jsx16("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
-            /* @__PURE__ */ jsx16("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
-          ]
-        }
-      )
-    }
-  );
-};
-var ErrorAlertWidget = ({
-  overrideNamespace,
-  title = "An error occurred",
-  message,
-  onRetry,
-  retryText = "Retry",
-  isRetrying = false
-}) => {
-  return /* @__PURE__ */ jsx16(
-    Alert,
-    {
-      severity: "error",
-      icon: false,
-      sx: {
-        borderRadius: 1,
-        p: 2.5,
-        m: 3,
-        border: "1px solid",
-        borderColor: "error.light",
-        bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(211, 47, 47, 0.08)" : "rgba(211, 47, 47, 0.04)",
-        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
-        "& .MuiAlert-message": {
-          width: "100%",
-          p: 0
-        }
-      },
-      children: /* @__PURE__ */ jsxs12(
-        Box9,
-        {
-          sx: {
-            display: "flex",
-            flexDirection: { xs: "column", sm: "row" },
-            alignItems: { xs: "flex-start", sm: "center" },
-            gap: 2
-          },
-          children: [
-            /* @__PURE__ */ jsx16(ErrorIllustration, { size: 68 }),
-            /* @__PURE__ */ jsxs12(Box9, { sx: { flexGrow: 1 }, children: [
-              typeof title === "string" ? /* @__PURE__ */ jsx16(
-                Typography8,
-                {
-                  variant: "subtitle1",
-                  sx: { fontWeight: 600, color: "error.main", mb: 0.5 },
-                  children: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace, children: title })
-                }
-              ) : title,
-              typeof message === "string" ? /* @__PURE__ */ jsx16(Typography8, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace, children: message }) }) : message
-            ] }),
-            onRetry && /* @__PURE__ */ jsx16(
-              Box9,
-              {
-                sx: {
-                  alignSelf: { xs: "flex-end", sm: "center" },
-                  mt: { xs: 1, sm: 0 }
-                },
-                children: /* @__PURE__ */ jsx16(
-                  Button4,
-                  {
-                    variant: "outlined",
-                    color: "error",
-                    size: "small",
-                    disabled: isRetrying,
-                    onClick: onRetry,
-                    startIcon: /* @__PURE__ */ jsx16(
-                      ReplayIcon,
-                      {
-                        sx: {
-                          animation: isRetrying ? "spin 1s linear infinite" : "none",
-                          "@keyframes spin": {
-                            "0%": { transform: "rotate(0deg)" },
-                            "100%": { transform: "rotate(360deg)" }
-                          }
-                        }
-                      }
-                    ),
-                    sx: {
-                      //borderRadius: 2,
-                      textTransform: "none",
-                      fontWeight: 600,
-                      px: 2,
-                      py: 0.75,
-                      whiteSpace: "nowrap"
-                    },
-                    children: retryText
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/UI/components/buttons/ButtonComponent.tsx
-import { forwardRef } from "react";
-import { Button as Button5 } from "@mui/material";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var ButtonComponent = forwardRef(
-  ({ label, children, overrideNamespace, ...props }, ref) => {
-    const renderContent = (content) => {
-      if (typeof content === "string") {
-        return /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: content });
-      }
-      return content;
-    };
-    const contentToRender = label !== void 0 ? label : children;
-    return /* @__PURE__ */ jsx17(Button5, { ref, ...props, children: renderContent(contentToRender) });
-  }
-);
-ButtonComponent.displayName = "ButtonComponent";
+              "aria-expanded": expanded
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs12(Collapse, { in: expanded, timeout: "auto", children: [
+      /* @__PURE__ */ jsx18(Divider3, { variant: "middle" }),
+      /* @__PURE__ */ jsx18(CardContent2, { children: props.children })
+    ] })
+  ] });
+};
 
-// src/UI/components/layout/PageComponent.tsx
-import React12, { useState as useState13 } from "react";
+// src/i18n/LanguageSelector.tsx
+import { useEffect as useEffect5, useState as useState13 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
 import {
   Box as Box10,
   Typography as Typography9,
-  Button as Button6,
+  CircularProgress,
   IconButton as IconButton8,
   Menu as Menu2,
   MenuItem as MenuItem3,
-  ListItemIcon as ListItemIcon2,
-  ListItemText as ListItemText3,
-  Divider as Divider3,
-  Tooltip as Tooltip8,
-  useTheme as useTheme2,
-  useMediaQuery,
-  Stack,
-  Fab as Fab2
+  Tooltip as Tooltip8
 } from "@mui/material";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { Refresh as RefreshIcon } from "@mui/icons-material";
-import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var getTruncateStyles = (mode = "truncate") => {
-  switch (mode) {
-    case "truncate":
-      return { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" };
-    case "clamp-2":
-      return { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal" };
-    case "wrap":
-    default:
-      return { whiteSpace: "normal", wordBreak: "break-word" };
+import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation3();
+  const [languages, setLanguages] = useState13([]);
+  const [loading, setLoading] = useState13(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = useState13(null);
+  const open = Boolean(anchorEl);
+  useEffect5(() => {
+    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__ */ jsx19(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
   }
+  const rawCurrentLang = i18n.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ jsxs13(Fragment10, { children: [
+    /* @__PURE__ */ jsx19(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx19(
+      IconButton8,
+      {
+        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__ */ jsx19(
+          Box10,
+          {
+            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__ */ jsx19(
+      Menu2,
+      {
+        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__ */ jsxs13(
+            MenuItem3,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx19(
+                  Box10,
+                  {
+                    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__ */ jsx19(Typography9, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
 };
-var PageHeader = ({
-  overrideNamespace,
-  icon,
-  title,
-  subtitle,
-  tag,
-  titleTruncateMode = "truncate",
-  subtitleTruncateMode = "truncate",
-  customFragment,
-  primaryAction,
-  secondaryActions = [],
-  refreshAction,
-  mobileBreakpoint = "sm",
-  forceMobileView,
-  sx = []
-}) => {
-  const theme = useTheme2();
-  const mediaIsMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
-  const isMobile = forceMobileView ?? mediaIsMobile;
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation3();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = useState13([]);
+  const [loading, setLoading] = useState13(true);
   const [anchorEl, setAnchorEl] = useState13(null);
-  const isMenuOpen = Boolean(anchorEl);
-  const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
-  const handleCloseMenu = () => setAnchorEl(null);
-  const handleMenuAction = (cb) => {
-    handleCloseMenu();
-    cb();
+  const open = Boolean(anchorEl);
+  useEffect5(() => {
+    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 hasSecondaryActions = secondaryActions.length > 0;
-  const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
-  return /* @__PURE__ */ jsxs13(
-    Box10,
-    {
-      sx: [
-        {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          width: "100%",
-          gap: { xs: 1.5, sm: 2.5 },
-          py: 1.5,
-          px: { xs: 1.5, sm: 2 },
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx19(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ jsxs13(Fragment10, { children: [
+    /* @__PURE__ */ jsx19(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx19(
+      IconButton8,
+      {
+        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,
-          backgroundColor: "background.paper",
-          boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx19(
+          Box10,
+          {
+            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__ */ jsx19(
+      Menu2,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
         },
-        ...Array.isArray(sx) ? sx : [sx]
-      ],
-      children: [
-        /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
-          icon && /* @__PURE__ */ jsx18(
-            Box10,
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs13(
+            MenuItem3,
             {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
               sx: {
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "center",
-                width: { xs: 40, sm: 48 },
-                height: { xs: 40, sm: 48 },
-                borderRadius: 2.5,
-                backgroundColor: "primary.50",
-                color: "primary.main",
-                flexShrink: 0,
-                border: "1px solid",
-                borderColor: "primary.100",
-                "& svg": { fontSize: { xs: 22, sm: 26 } }
+                gap: 1.5,
+                py: 1,
+                px: 2
               },
-              children: icon
-            }
-          ),
-          /* @__PURE__ */ jsxs13(Box10, { sx: { minWidth: 0, flex: 1 }, children: [
-            tag && /* @__PURE__ */ jsx18(Box10, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
-            /* @__PURE__ */ jsx18(Tooltip8, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx18(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx18(
-              Typography9,
-              {
-                variant: "h5",
-                component: "h1",
-                sx: {
-                  fontWeight: 700,
-                  color: "text.primary",
-                  fontSize: { xs: "1.125rem", sm: "1.35rem" },
-                  lineHeight: 1.3,
-                  ...getTruncateStyles(titleTruncateMode)
-                },
-                children: /* @__PURE__ */ jsx18(TranslateText, { children: title })
-              }
-            ) }),
-            subtitle && /* @__PURE__ */ jsx18(Tooltip8, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx18(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx18(
-              Typography9,
-              {
-                variant: "body2",
-                sx: {
-                  color: "text.secondary",
-                  mt: 0.25,
-                  fontSize: { xs: "0.8125rem", sm: "0.875rem" },
-                  lineHeight: 1.4,
-                  ...getTruncateStyles(subtitleTruncateMode)
-                },
-                children: /* @__PURE__ */ jsx18(TranslateText, { children: subtitle })
-              }
-            ) })
-          ] })
-        ] }),
-        hasActions && /* @__PURE__ */ jsx18(Box10, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
-          /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
-          /* @__PURE__ */ jsxs13(Fragment10, { children: [
-            /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx18(
-              IconButton8,
-              {
-                onClick: handleOpenMenu,
-                sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                children: /* @__PURE__ */ jsx18(MoreVertIcon, {})
-              }
-            ) }),
-            /* @__PURE__ */ jsxs13(
-              Menu2,
-              {
-                anchorEl,
-                open: isMenuOpen,
-                onClose: handleCloseMenu,
-                transformOrigin: { horizontal: "right", vertical: "top" },
-                anchorOrigin: { horizontal: "right", vertical: "bottom" },
-                slotProps: { paper: { elevation: 4, sx: { minWidth: 200, borderRadius: 2, mt: 1, p: 0.5 } } },
-                children: [
-                  primaryAction && /* @__PURE__ */ jsxs13(Fragment10, { children: [
-                    /* @__PURE__ */ jsxs13(
-                      MenuItem3,
-                      {
-                        onClick: () => handleMenuAction(primaryAction.onClick),
-                        disabled: primaryAction.disabled,
-                        sx: {
-                          borderRadius: 1.5,
-                          fontWeight: 700,
-                          backgroundColor: "primary.50",
-                          color: primaryAction.color ? `${primaryAction.color}.main` : "primary.main",
-                          py: 1.2,
-                          px: 1.5
-                        },
-                        children: [
-                          primaryAction.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
-                          /* @__PURE__ */ jsx18(ListItemText3, { primary: /* @__PURE__ */ jsx18(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
-                        ]
-                      }
-                    ),
-                    hasSecondaryActions && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.75 } })
-                  ] }),
-                  secondaryActions.map((action) => /* @__PURE__ */ jsxs13(React12.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs13(
-                      MenuItem3,
-                      {
-                        onClick: () => handleMenuAction(action.onClick),
-                        disabled: action.disabled,
-                        sx: { borderRadius: 1, py: 1, px: 1.5, color: action.color ? `${action.color}.main` : "text.primary" },
-                        children: [
-                          action.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ jsx18(ListItemText3, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
-                        ]
-                      }
-                    )
-                  ] }, action.id)),
-                  refreshAction && /* @__PURE__ */ jsxs13(Fragment10, { children: [
-                    /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs13(
-                      MenuItem3,
-                      {
-                        onClick: () => handleMenuAction(refreshAction.onClick),
-                        disabled: refreshAction.disabled,
-                        sx: {
-                          borderRadius: 1.5,
-                          fontWeight: 700,
-                          backgroundColor: "primary.50",
-                          py: 1.2,
-                          px: 1.5
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx18(RefreshIcon, {}) }),
-                          /* @__PURE__ */ jsx18(ListItemText3, { primary: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
-                        ]
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          ] })
-        ) : (
-          /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
-          /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            (primaryAction || refreshAction) && /* @__PURE__ */ jsxs13(Stack, { direction: "row", spacing: 2, children: [
-              primaryAction && /* @__PURE__ */ jsx18(
-                Button6,
-                {
-                  variant: primaryAction.variant || "contained",
-                  color: primaryAction.color || "primary",
-                  onClick: primaryAction.onClick,
-                  disabled: primaryAction.disabled,
-                  startIcon: primaryAction.icon,
-                  sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
-                  children: /* @__PURE__ */ jsx18(TranslateText, { children: primaryAction.label })
-                }
-              ),
-              refreshAction && /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx18(
-                Fab2,
-                {
-                  color: "default",
-                  onClick: refreshAction.onClick,
-                  disabled: refreshAction.disabled,
-                  "aria-label": "refresh",
-                  size: "small",
-                  children: /* @__PURE__ */ jsx18(RefreshIcon, {})
-                }
-              ) })
-            ] }),
-            hasSecondaryActions && /* @__PURE__ */ jsxs13(Fragment10, { children: [
-              /* @__PURE__ */ jsx18(
-                IconButton8,
-                {
-                  onClick: handleOpenMenu,
-                  sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                  children: /* @__PURE__ */ jsx18(KeyboardArrowDownIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx18(
-                Menu2,
-                {
-                  anchorEl,
-                  open: isMenuOpen,
-                  onClose: handleCloseMenu,
-                  transformOrigin: { horizontal: "right", vertical: "top" },
-                  anchorOrigin: { horizontal: "right", vertical: "bottom" },
-                  slotProps: { paper: { elevation: 4, sx: { minWidth: 180, borderRadius: 2, mt: 1, p: 0.5 } } },
-                  children: secondaryActions.map((action) => /* @__PURE__ */ jsxs13(React12.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs13(
-                      MenuItem3,
-                      {
-                        onClick: () => handleMenuAction(action.onClick),
-                        disabled: action.disabled,
-                        sx: { borderRadius: 1, py: 0.85, color: action.color ? `${action.color}.main` : "text.primary" },
-                        children: [
-                          action.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ jsx18(ListItemText3, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
-                        ]
-                      }
-                    )
-                  ] }, action.id))
-                }
-              )
-            ] })
-          ] })
-        ) }),
-        customFragment && /* @__PURE__ */ jsx18(Fragment10, { children: customFragment })
-      ]
-    }
-  );
-};
-var PageContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx18(
-    Box10,
-    {
-      sx: {
-        width: "100%",
-        boxSizing: "border-box",
-        p: { xs: 1.5, sm: 3 },
-        backgroundColor: "background.paper"
-      },
-      children
-    }
-  );
-};
-var PageComponent = ({
-  header,
-  children
-}) => {
-  return /* @__PURE__ */ jsx18(
-    Box10,
-    {
-      sx: {
-        //pt: 2,
-        flexGrow: 1,
-        minHeight: 0,
-        overflowY: "auto",
-        boxSizing: "border-box"
-      },
-      children: /* @__PURE__ */ jsxs13(PageContainer, { children: [
-        header && /* @__PURE__ */ jsx18(PageHeader, { ...header }),
-        children
-      ] })
-    }
-  );
-};
-
-// src/UI/widgets/page/FilterContainerWidget.tsx
-import React13 from "react";
-import { Grid, Paper } from "@mui/material";
-import { jsx as jsx19 } from "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__ */ jsx19(Grid, { size: sectionGridSize, children: /* @__PURE__ */ jsx19(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: React13.Children.map(children, (child) => {
-    if (!child) return null;
-    return (
-      /* Автоматическая обертка каждого дочернего элемента в Grid size */
-      /* @__PURE__ */ jsx19(Grid, { size: itemGridSize, children: child })
-    );
-  }) }) });
-};
-var FilterContainerWidget = ({
-  sections,
-  children,
-  sx
-}) => {
-  return /* @__PURE__ */ jsx19(
-    Paper,
-    {
-      variant: "outlined",
-      sx: [
-        { p: 2, mb: 3 },
-        ...Array.isArray(sx) ? sx : [sx]
-      ],
-      children: /* @__PURE__ */ jsx19(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ jsx19(React13.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
-    }
-  }
+              children: [
+                /* @__PURE__ */ jsx19(
+                  Box10,
+                  {
+                    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__ */ jsx19(Typography9, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
 };
 
 // src/services/index.ts
@@ -2787,19 +2701,43 @@ export {
   AppSettingsProvider,
   AuthProvider,
   BreadcrumbProvider,
+  ButtonComponent,
+  CheckboxComponent,
+  CollapsedContainerComponent,
   ConfirmationProvider,
+  CopyClipboardButtonComponent,
+  EmailInputComponent,
+  ErrorAlertComponent,
+  ExpandableNoteComponent,
+  FilterContainerComponent,
   Hooks,
   LocalizationProvider,
+  MyAvatarComponent,
+  NumberInputComponent,
+  PageComponent,
+  PageLinkComponent,
+  LanguageSelector as 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,