fui-material 2.8.12 → 2.8.14

package/dist/f-ui-kit.es.js

@@ -9,7 +9,7 @@ import { initializeModule as initializeModule$1, installFormatCode } from "allor
 import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
 import './index.css';const btn = "_btn_gdyy6_1";
 const disabled$4 = "_disabled_gdyy6_31";
-const styles$B = {
+const styles$D = {
   btn,
   disabled: disabled$4,
   "btn-xs": "_btn-xs_gdyy6_40",
@@ -55,9 +55,9 @@ const FButton = forwardRef(({
   };
   const variantClass = variant === "contained" ? `btn-${color}` : `btn-outline-${color}`;
   const buttonClasses = [
-    styles$B["btn"],
-    styles$B[size],
-    styles$B[variantClass],
+    styles$D["btn"],
+    styles$D[size],
+    styles$D[variantClass],
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
@@ -123,7 +123,7 @@ FTrashIcon.displayName = "FTrashIcon";
 const progressBar = "_progressBar_1iwax_48";
 const completed = "_completed_1iwax_60";
 const progress = "_progress_1iwax_48";
-const styles$A = {
+const styles$C = {
   "file-preview-card": "_file-preview-card_1iwax_1",
   "file-preview-info": "_file-preview-info_1iwax_22",
   "file-preview-name": "_file-preview-name_1iwax_28",
@@ -145,18 +145,18 @@ const FFile = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${styles$A["file-preview-card"]} ${className || ""}`,
+      className: `${styles$C["file-preview-card"]} ${className || ""}`,
       id,
       style: st,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$A["file-preview-info"], children: [
-          /* @__PURE__ */ jsx("span", { className: styles$A["file-preview-name"], title: name, children: name }),
-          typeof size === "number" && /* @__PURE__ */ jsxs("span", { className: styles$A["file-preview-size"], children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$C["file-preview-info"], children: [
+          /* @__PURE__ */ jsx("span", { className: styles$C["file-preview-name"], title: name, children: name }),
+          typeof size === "number" && /* @__PURE__ */ jsxs("span", { className: styles$C["file-preview-size"], children: [
             Math.round(size / 1024),
             " КБ"
           ] })
         ] }),
-        handleDelete && /* @__PURE__ */ jsx("div", { className: styles$A["trash-icon"], children: /* @__PURE__ */ jsx(
+        handleDelete && /* @__PURE__ */ jsx("div", { className: styles$C["trash-icon"], children: /* @__PURE__ */ jsx(
           FTrashIcon,
           {
             size: 20,
@@ -164,10 +164,10 @@ const FFile = ({
             handleClick: handleDelete
           }
         ) }),
-        typeof progress2 === "number" && /* @__PURE__ */ jsx("div", { className: `${styles$A.progressBar} ${progress2 === 100 ? styles$A.completed : ""}`, children: /* @__PURE__ */ jsx(
+        typeof progress2 === "number" && /* @__PURE__ */ jsx("div", { className: `${styles$C.progressBar} ${progress2 === 100 ? styles$C.completed : ""}`, children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$A.progress,
+            className: styles$C.progress,
             style: { width: `${progress2}%` }
           }
         ) })
@@ -270,7 +270,7 @@ const FButtonFile = ({
     )) }) })
   ] });
 };
-const styles$z = {
+const styles$B = {
   "f-text-field": "_f-text-field_200bb_1"
 };
 const FLoadIcon = React.forwardRef(({
@@ -349,7 +349,7 @@ const FTextField = forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `f-form-element ${styles$z["f-text-field"]} ${className || ""}`,
+        className: `f-form-element ${styles$B["f-text-field"]} ${className || ""}`,
         style: mergedStyle,
         role: "group",
         id: inputId + "-text-field-block",
@@ -455,7 +455,7 @@ const FStack = ({
     }
   );
 };
-const styles$y = {
+const styles$A = {
   "f-grid": "_f-grid_3g4xh_1",
   "f-grid__col": "_f-grid__col_3g4xh_10",
   "f-grid__col--auto": "_f-grid__col--auto_3g4xh_16",
@@ -558,21 +558,21 @@ const FGrid = ({
     xxl: xxl ?? xl ?? lg ?? md ?? sm ?? xs
   };
   const getColumnClasses = () => {
-    if (colAuto) return styles$y["f-grid__col--auto"];
-    const classes = [styles$y["f-grid__col"]];
-    if (resolvedSizes.xs !== void 0) classes.push(styles$y[`f-grid__col--xs-${resolvedSizes.xs}`]);
-    if (resolvedSizes.sm !== void 0) classes.push(styles$y[`f-grid__col--sm-${resolvedSizes.sm}`]);
-    if (resolvedSizes.md !== void 0) classes.push(styles$y[`f-grid__col--md-${resolvedSizes.md}`]);
-    if (resolvedSizes.lg !== void 0) classes.push(styles$y[`f-grid__col--lg-${resolvedSizes.lg}`]);
-    if (resolvedSizes.xl !== void 0) classes.push(styles$y[`f-grid__col--xl-${resolvedSizes.xl}`]);
-    if (resolvedSizes.xxl !== void 0) classes.push(styles$y[`f-grid__col--xxl-${resolvedSizes.xxl}`]);
+    if (colAuto) return styles$A["f-grid__col--auto"];
+    const classes = [styles$A["f-grid__col"]];
+    if (resolvedSizes.xs !== void 0) classes.push(styles$A[`f-grid__col--xs-${resolvedSizes.xs}`]);
+    if (resolvedSizes.sm !== void 0) classes.push(styles$A[`f-grid__col--sm-${resolvedSizes.sm}`]);
+    if (resolvedSizes.md !== void 0) classes.push(styles$A[`f-grid__col--md-${resolvedSizes.md}`]);
+    if (resolvedSizes.lg !== void 0) classes.push(styles$A[`f-grid__col--lg-${resolvedSizes.lg}`]);
+    if (resolvedSizes.xl !== void 0) classes.push(styles$A[`f-grid__col--xl-${resolvedSizes.xl}`]);
+    if (resolvedSizes.xxl !== void 0) classes.push(styles$A[`f-grid__col--xxl-${resolvedSizes.xxl}`]);
     return classes.join(" ");
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     obj === "container" && /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${styles$y["f-grid"]} ${className || ""}`,
+        className: `${styles$A["f-grid"]} ${className || ""}`,
         style,
         id,
         children
@@ -590,7 +590,7 @@ const FGrid = ({
     obj === void 0 && /* @__PURE__ */ jsx("div", { className, style, id, children })
   ] });
 };
-const styles$x = {
+const styles$z = {
   "f-grid-row": "_f-grid-row_1crbx_1",
   "f-grid-row--justify-start": "_f-grid-row--justify-start_1crbx_7",
   "f-grid-row--justify-center": "_f-grid-row--justify-center_1crbx_10",
@@ -612,21 +612,21 @@ const FGridRow = ({
 }) => {
   const getJustifyContentClass = () => {
     if (!justifyContent) return "";
-    return styles$x[`f-grid-row--justify-${justifyContent}`];
+    return styles$z[`f-grid-row--justify-${justifyContent}`];
   };
   const getAlignItemsClass = () => {
     if (!alignItems) return "";
-    return styles$x[`f-grid-row--align-${alignItems}`];
+    return styles$z[`f-grid-row--align-${alignItems}`];
   };
   const rowClasses = [
-    styles$x["f-grid-row"],
+    styles$z["f-grid-row"],
     getJustifyContentClass(),
     getAlignItemsClass(),
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: rowClasses, style: st, id, children });
 };
-const styles$w = {
+const styles$y = {
   "f-container": "_f-container_g9ck3_1",
   "container-fluid": "_container-fluid_g9ck3_1",
   "container-xxl": "_container-xxl_g9ck3_1",
@@ -646,7 +646,7 @@ const FContainer = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `${styles$w["f-container"]} ${styles$w[maxWidth]} ${className || ""}`,
+      className: `${styles$y["f-container"]} ${styles$y[maxWidth]} ${className || ""}`,
       style: st,
       id,
       children
@@ -654,7 +654,7 @@ const FContainer = ({
   );
 };
 const panel = "_panel_q7in0_1";
-const styles$v = {
+const styles$x = {
   panel,
   "panel-default": "_panel-default_q7in0_6",
   "panel-heading": "_panel-heading_q7in0_12",
@@ -687,15 +687,15 @@ const FPaper = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${styles$v["panel"]} ${styles$v["panel-default"]} ${className || ""} ${animated ? `${styles$v[`animated-${animated.name}`]} ${animated.name}` : ""}`,
+      className: `${styles$x["panel"]} ${styles$x["panel-default"]} ${className || ""} ${animated ? `${styles$x[`animated-${animated.name}`]} ${animated.name}` : ""}`,
       style: st,
       id,
       onAnimationEnd,
       children: [
-        label && /* @__PURE__ */ jsx("div", { className: styles$v["panel-heading"], children: /* @__PURE__ */ jsx(
+        label && /* @__PURE__ */ jsx("div", { className: styles$x["panel-heading"], children: /* @__PURE__ */ jsx(
           "h3",
           {
-            className: styles$v["panel-title"],
+            className: styles$x["panel-title"],
             style: { fontSize: fontSizeLabel },
             children: label
           }
@@ -703,7 +703,7 @@ const FPaper = ({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$v["panel-body"],
+            className: styles$x["panel-body"],
             style: { fontSize: fontSizeBody },
             children
           }
@@ -713,39 +713,39 @@ const FPaper = ({
   );
 };
 const TableControlsContext = createContext({ query: "", sort: null });
-const left$1 = "_left_18u6h_77";
-const center = "_center_18u6h_80";
-const right = "_right_18u6h_83";
-const justify = "_justify_18u6h_86";
-const more = "_more_18u6h_194";
-const styles$u = {
-  "f-table-component": "_f-table-component_18u6h_1",
-  "f-table-component__table": "_f-table-component__table_18u6h_14",
-  "f-table-component__table_header": "_f-table-component__table_header_18u6h_22",
-  "is-sticky": "_is-sticky_18u6h_26",
-  "f-table-component__table_header-cell": "_f-table-component__table_header-cell_18u6h_32",
-  "f-table-component__table_body-cell": "_f-table-component__table_body-cell_18u6h_32",
-  "f-table-component__table_body": "_f-table-component__table_body_18u6h_32",
-  "f-table-component__table_row": "_f-table-component__table_row_18u6h_60",
-  "f-table-component__table_row_no-hover": "_f-table-component__table_row_no-hover_18u6h_60",
-  "f-table-component__table_footer": "_f-table-component__table_footer_18u6h_66",
-  left: left$1,
+const left$2 = "_left_nsv5n_81";
+const center = "_center_nsv5n_84";
+const right$1 = "_right_nsv5n_87";
+const justify = "_justify_nsv5n_90";
+const more = "_more_nsv5n_198";
+const styles$w = {
+  "f-table-component": "_f-table-component_nsv5n_1",
+  "f-table-component__table": "_f-table-component__table_nsv5n_14",
+  "f-table-component__table_header": "_f-table-component__table_header_nsv5n_22",
+  "is-sticky": "_is-sticky_nsv5n_26",
+  "f-table-component__table_body": "_f-table-component__table_body_nsv5n_32",
+  "f-table-component__table_header-cell": "_f-table-component__table_header-cell_nsv5n_35",
+  "f-table-component__table_body-cell": "_f-table-component__table_body-cell_nsv5n_35",
+  "f-table-component__table_row": "_f-table-component__table_row_nsv5n_64",
+  "f-table-component__table_row_no-hover": "_f-table-component__table_row_no-hover_nsv5n_64",
+  "f-table-component__table_footer": "_f-table-component__table_footer_nsv5n_71",
+  left: left$2,
   center,
-  right,
+  right: right$1,
   justify,
-  "cell-text": "_cell-text_18u6h_90",
-  "cell-preview-text": "_cell-preview-text_18u6h_111",
-  "cell-preview": "_cell-preview_18u6h_111",
-  "cell-reveal": "_cell-reveal_18u6h_168",
+  "cell-text": "_cell-text_nsv5n_94",
+  "cell-preview-text": "_cell-preview-text_nsv5n_115",
+  "cell-preview": "_cell-preview_nsv5n_115",
+  "cell-reveal": "_cell-reveal_nsv5n_172",
   more,
-  "row-menu": "_row-menu_18u6h_225",
-  "table-tools": "_table-tools_18u6h_317",
-  "table-search": "_table-search_18u6h_323",
-  "table-sort": "_table-sort_18u6h_358",
-  "table-empty": "_table-empty_18u6h_386",
-  "cell-tooltip-anchor": "_cell-tooltip-anchor_18u6h_393",
-  "cell-tooltip": "_cell-tooltip_18u6h_393",
-  "cell-tooltip-in": "_cell-tooltip-in_18u6h_1"
+  "row-menu": "_row-menu_nsv5n_229",
+  "table-tools": "_table-tools_nsv5n_322",
+  "table-search": "_table-search_nsv5n_328",
+  "table-sort": "_table-sort_nsv5n_363",
+  "table-empty": "_table-empty_nsv5n_391",
+  "cell-tooltip-anchor": "_cell-tooltip-anchor_nsv5n_398",
+  "cell-tooltip": "_cell-tooltip_nsv5n_398",
+  "cell-tooltip-in": "_cell-tooltip-in_nsv5n_1"
 };
 const FTableHead = ({
   st,
@@ -761,7 +761,7 @@ const FTableHead = ({
     {
       style: st,
       ...props,
-      className: `${styles$u["f-table-component__table_header"]} ${isSticky ? styles$u["is-sticky"] : ""} ${props.className || ""} ${styles$u[textAlignment]}`,
+      className: `${styles$w["f-table-component__table_header"]} ${isSticky ? styles$w["is-sticky"] : ""} ${props.className || ""} ${styles$w[textAlignment]}`,
       children
     }
   );
@@ -871,7 +871,7 @@ const FTableBody = ({
   const { query, sort } = useContext(TableControlsContext);
   const index = useMemo(() => indexTableRows(children), [children]);
   const rows = useMemo(() => selectTableRows(index, query, sort), [index, query, sort]);
-  const [viewport, setViewport] = useState({ top: 0, height: 0 });
+  const [viewport2, setViewport] = useState({ top: 0, height: 0 });
   const [heights, setHeights] = useState(() => /* @__PURE__ */ new Map());
   const virtual = Boolean(tableWrapperRef) && visibleRowCount !== void 0 && Number.isFinite(visibleRowCount) && visibleRowCount >= 1 && !index.hasRowSpans;
   const keyOf = (row, index2) => React.isValidElement(row) ? String(row.key ?? index2) : String(index2);
@@ -880,7 +880,7 @@ const FTableBody = ({
     if (virtual) rows.forEach((row, index2) => result.push(result[index2] + (heights.get(keyOf(row, index2)) ?? 32)));
     return result;
   }, [rows, heights, virtual]);
-  const { start, end } = virtual ? virtualRowRange(offsets, viewport.top, viewport.height, visibleRowCount) : { start: 0, end: rows.length };
+  const { start, end } = virtual ? virtualRowRange(offsets, viewport2.top, viewport2.height, visibleRowCount) : { start: 0, end: rows.length };
   const visibleRows = useMemo(() => rows.slice(start, end), [rows, start, end]);
   useLayoutEffect(() => {
     setViewport((previous) => ({ ...previous, top: 0 }));
@@ -956,14 +956,14 @@ const FTableBody = ({
       ref: tableBodyRef,
       style: st,
       ...props,
-      className: `${styles$u["f-table-component__table_body"]} ${props.className || ""} ${styles$u[textAlignment]}`,
+      className: `${styles$w["f-table-component__table_body"]} ${props.className || ""} ${styles$w[textAlignment]}`,
       children: [
         virtual && start > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: index.columnCount, style: { height: offsets[start], padding: 0, border: 0 } }) }),
         visibleRows.map((child, index2) => React.isValidElement(child) ? React.cloneElement(child, {
           "data-row-index": start + index2,
           "data-table-row-key": keyOf(child, start + index2)
         }) : child),
-        query.trim() && rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: index.columnCount, className: styles$u["table-empty"], children: /* @__PURE__ */ jsx("span", { role: "status", children: "Ничего не найдено" }) }) }),
+        query.trim() && rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: index.columnCount, className: styles$w["table-empty"], children: /* @__PURE__ */ jsx("span", { role: "status", children: "Ничего не найдено" }) }) }),
         virtual && end < rows.length && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: index.columnCount, style: { height: offsets[rows.length] - offsets[end], padding: 0, border: 0 } }) })
       ]
     }
@@ -1013,7 +1013,7 @@ const FTable = ({
     };
   }, []);
   return /* @__PURE__ */ jsxs(TableControlsContext.Provider, { value: controls, children: [
-    searchable && /* @__PURE__ */ jsx("div", { className: styles$u["table-tools"], children: /* @__PURE__ */ jsxs("label", { className: styles$u["table-search"], children: [
+    searchable && /* @__PURE__ */ jsx("div", { className: styles$w["table-tools"], children: /* @__PURE__ */ jsxs("label", { className: styles$w["table-search"], children: [
       /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
         /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })
@@ -1036,7 +1036,7 @@ const FTable = ({
       "div",
       {
         ref: tableWrapperRef,
-        className: styles$u["f-table-component"],
+        className: styles$w["f-table-component"],
         style: { overflowX, overflowY },
         children: /* @__PURE__ */ jsx(
           "table",
@@ -1048,7 +1048,7 @@ const FTable = ({
               ...st
             },
             ...props,
-            className: `table ${styles$u["f-table-component__table"]} ${props.className || ""}`,
+            className: `table ${styles$w["f-table-component__table"]} ${props.className || ""}`,
             children: React.Children.map(children, (child) => {
               if (React.isValidElement(child) && child.type === FTableHead) {
                 const headProps = child.props;
@@ -1087,20 +1087,23 @@ const FTableRow = ({
   ...props
 }) => {
   const rowClasses = [
-    styles$u["f-table-component__table_row"],
+    styles$w["f-table-component__table_row"],
     props.className || ""
   ];
   if (disableHover) {
-    rowClasses.push(styles$u["f-table-component__table_row_no-hover"]);
+    rowClasses.push(styles$w["f-table-component__table_row_no-hover"]);
   }
   if (textAlignment !== void 0) {
-    rowClasses.push(styles$u[textAlignment]);
+    rowClasses.push(styles$w[textAlignment]);
   }
   return /* @__PURE__ */ jsx(
     "tr",
     {
-      style: st,
       ...props,
+      style: {
+        ...props.style,
+        ...st
+      },
       className: rowClasses.join(" ").trim(),
       children
     }
@@ -1139,13 +1142,13 @@ const FTableHeaderCell = ({
       colSpan: col && col > 1 ? col : void 0,
       ...props,
       "aria-sort": sortable ? direction ?? "none" : props["aria-sort"],
-      className: `${styles$u["f-table-component__table_header-cell"]} ${props.className || ""}`,
+      className: `${styles$w["f-table-component__table_header-cell"]} ${props.className || ""}`,
       style,
       children: sortable ? /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
-          className: styles$u["table-sort"],
+          className: styles$w["table-sort"],
           onClick: () => toggleSort == null ? void 0 : toggleSort(sortKey),
           title: direction === "ascending" ? "По убыванию" : direction === "descending" ? "Исходный порядок" : "По возрастанию",
           children: [
@@ -1209,7 +1212,7 @@ function FTableTextTooltip({ text, enabled, children }) {
     "span",
     {
       ref: anchor,
-      className: styles$u["cell-tooltip-anchor"],
+      className: styles$w["cell-tooltip-anchor"],
       onMouseEnter: show,
       onMouseLeave: hide2,
       onFocus: show,
@@ -1222,7 +1225,7 @@ function FTableTextTooltip({ text, enabled, children }) {
             ref: panel2,
             id,
             role: "tooltip",
-            className: styles$u["cell-tooltip"],
+            className: styles$w["cell-tooltip"],
             style: position,
             onMouseEnter: show,
             onMouseLeave: hide2,
@@ -1270,20 +1273,20 @@ const FTableDataCell = ({
       rowSpan: row && row > 1 ? row : void 0,
       colSpan: col && col > 1 ? col : void 0,
       ...props,
-      className: `${styles$u["f-table-component__table_body-cell"]} ${props.className || ""}`.trim(),
+      className: `${styles$w["f-table-component__table_body-cell"]} ${props.className || ""}`.trim(),
       style,
       children: collapsible ? /* @__PURE__ */ jsx(FTableTextTooltip, { text, enabled: !expanded, children: /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
-          className: styles$u["cell-text"],
+          className: styles$w["cell-text"],
           "aria-expanded": expanded,
           "aria-controls": textId,
           "data-expanded": expanded,
           onClick: () => setExpanded((value) => !value),
           children: [
-            /* @__PURE__ */ jsx("span", { className: styles$u["cell-preview"], "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: styles$u["cell-preview-text"], children: text }) }),
-            /* @__PURE__ */ jsx("span", { className: styles$u["cell-reveal"], children: /* @__PURE__ */ jsx("span", { id: textId, children: text }) })
+            /* @__PURE__ */ jsx("span", { className: styles$w["cell-preview"], "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: styles$w["cell-preview-text"], children: text }) }),
+            /* @__PURE__ */ jsx("span", { className: styles$w["cell-reveal"], children: /* @__PURE__ */ jsx("span", { id: textId, children: text }) })
           ]
         }
       ) }) : children
@@ -1300,19 +1303,19 @@ const FTableFooter = ({
     {
       style: st,
       ...props,
-      className: `${styles$u["f-table-component__table_footer"]} ${props.className || ""}`,
+      className: `${styles$w["f-table-component__table_footer"]} ${props.className || ""}`,
       children
     }
   );
 };
-const entering = "_entering_g7izy_19";
-const exiting = "_exiting_g7izy_25";
+const entering$2 = "_entering_g7izy_19";
+const exiting$2 = "_exiting_g7izy_25";
 const hide = "_hide_g7izy_50";
-const styles$t = {
+const styles$v = {
   "f-dialog": "_f-dialog_g7izy_1",
-  entering,
+  entering: entering$2,
   "f-dialog__content": "_f-dialog__content_g7izy_22",
-  exiting,
+  exiting: exiting$2,
   hide,
   "f-dialog__header": "_f-dialog__header_g7izy_61",
   "f-dialog__header_title": "_f-dialog__header_title_g7izy_73",
@@ -1388,14 +1391,14 @@ const FDialog = ({
     adaptive: "fit-content"
   };
   const contentWidth = widthStyles[width];
-  const animationClass = isClosing ? styles$t["exiting"] : styles$t["entering"];
+  const animationClass = isClosing ? styles$v["exiting"] : styles$v["entering"];
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsx(
       "div",
       {
         id,
         style: st,
-        className: `${styles$t["f-dialog"]} ${animationClass} ${className || ""}`,
+        className: `${styles$v["f-dialog"]} ${animationClass} ${className || ""}`,
         onMouseDown: (e) => {
           if (e.target === e.currentTarget) {
             closeButtonBackPage == null ? void 0 : closeButtonBackPage(false);
@@ -1405,7 +1408,7 @@ const FDialog = ({
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles$t["f-dialog__content"]} ${hide2 ? styles$t["hide"] : ""}`,
+            className: `${styles$v["f-dialog__content"]} ${hide2 ? styles$v["hide"] : ""}`,
             style: {
               width: contentWidth
             },
@@ -1446,13 +1449,13 @@ const FCloseIcon = React.forwardRef(({
 });
 FCloseIcon.displayName = "FCloseIcon";
 const FDialogHeader = ({ title: title2, handleClose }) => {
-  return /* @__PURE__ */ jsxs("div", { className: styles$t["f-dialog__header"], children: [
-    /* @__PURE__ */ jsx("h3", { className: styles$t["f-dialog__header_title"], children: title2 }),
+  return /* @__PURE__ */ jsxs("div", { className: styles$v["f-dialog__header"], children: [
+    /* @__PURE__ */ jsx("h3", { className: styles$v["f-dialog__header_title"], children: title2 }),
     handleClose && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: styles$t["f-dialog__header_close"],
+        className: styles$v["f-dialog__header_close"],
         onClick: handleClose,
         "aria-label": "Закрыть диалог",
         children: /* @__PURE__ */ jsx(
@@ -1471,7 +1474,7 @@ const FDialogBody = ({ st, children, scroll = true }) => {
     ...scroll ? { overflowY: "auto" } : {},
     ...st
   };
-  return /* @__PURE__ */ jsx("div", { className: styles$t["f-dialog__body"], style, children });
+  return /* @__PURE__ */ jsx("div", { className: styles$v["f-dialog__body"], style, children });
 };
 const FDialogFooter = ({ children, className, st, id }) => {
   return /* @__PURE__ */ jsx(
@@ -1479,7 +1482,7 @@ const FDialogFooter = ({ children, className, st, id }) => {
     {
       id,
       style: st,
-      className: `${styles$t["f-dialog__footer"]} ${className || ""}`,
+      className: `${styles$v["f-dialog__footer"]} ${className || ""}`,
       children
     }
   );
@@ -1494,7 +1497,7 @@ const info$4 = "_info_1glrn_62";
 const light$2 = "_light_1glrn_66";
 const dark$2 = "_dark_1glrn_70";
 const link$1 = "_link_1glrn_74";
-const styles$s = {
+const styles$u = {
   "authorization-spinner": "_authorization-spinner_1glrn_1",
   "spinner-item": "_spinner-item_1glrn_7",
   loader,
@@ -1512,14 +1515,14 @@ const FProgress = ({ st, color = "primary", id, className }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `${styles$s["authorization-spinner"]} ${styles$s.visible} ${className || ""}`,
+      className: `${styles$u["authorization-spinner"]} ${styles$u.visible} ${className || ""}`,
       id,
       style: st,
-      children: /* @__PURE__ */ jsx("div", { className: `${styles$s["spinner-item"]} ${styles$s[color]}` })
+      children: /* @__PURE__ */ jsx("div", { className: `${styles$u["spinner-item"]} ${styles$u[color]}` })
     }
   );
 };
-const styles$r = {
+const styles$t = {
   "f-preloader": "_f-preloader_17f9x_1",
   "active-preloader": "_active-preloader_17f9x_10"
 };
@@ -1546,13 +1549,13 @@ const FPreloader = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `${styles$r["f-preloader"]} ${open ? styles$r["active-preloader"] : ""}`,
+      className: `${styles$t["f-preloader"]} ${open ? styles$t["active-preloader"] : ""}`,
       style: mergedStyle,
       children
     }
   );
 };
-const styles$q = {
+const styles$s = {
   "f-checkbox": "_f-checkbox_1hxs0_1"
 };
 const FCheckbox = forwardRef(
@@ -1565,7 +1568,7 @@ const FCheckbox = forwardRef(
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${styles$q["f-checkbox"]} ${className || ""}`,
+        className: `${styles$s["f-checkbox"]} ${className || ""}`,
         style: st,
         children: /* @__PURE__ */ jsxs("label", { children: [
           /* @__PURE__ */ jsx("input", { ref, type: "checkbox", ...props }),
@@ -1575,7 +1578,7 @@ const FCheckbox = forwardRef(
     );
   }
 );
-const styles$p = {
+const styles$r = {
   "f-radio": "_f-radio_1oidm_1"
 };
 const FRadioButton = forwardRef(
@@ -1588,7 +1591,7 @@ const FRadioButton = forwardRef(
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${styles$p["f-radio"]} ${className || ""}`,
+        className: `${styles$r["f-radio"]} ${className || ""}`,
         style: st,
         children: /* @__PURE__ */ jsxs("label", { children: [
           /* @__PURE__ */ jsx("input", { ref, type: "radio", ...props }),
@@ -1648,16 +1651,16 @@ const usePagination = ({
 const dots = "_dots_uiqea_29";
 const selected$1 = "_selected_uiqea_33";
 const disabled$3 = "_disabled_uiqea_37";
-const arrow = "_arrow_uiqea_43";
-const left = "_left_uiqea_56";
-const styles$o = {
+const arrow$1 = "_arrow_uiqea_43";
+const left$1 = "_left_uiqea_56";
+const styles$q = {
   "pagination-container": "_pagination-container_uiqea_1",
   "pagination-item": "_pagination-item_uiqea_9",
   dots,
   selected: selected$1,
   disabled: disabled$3,
-  arrow,
-  left
+  arrow: arrow$1,
+  left: left$1
 };
 const FPagination = ({
   currentPage,
@@ -1684,26 +1687,26 @@ const FPagination = ({
   return /* @__PURE__ */ jsxs(
     "ul",
     {
-      className: `${styles$o["pagination-container"]} ${className || ""}`,
+      className: `${styles$q["pagination-container"]} ${className || ""}`,
       style: st,
       id,
       children: [
         /* @__PURE__ */ jsx(
           "li",
           {
-            className: `${styles$o["pagination-item"]} ${currentPage === 1 ? styles$o.disabled : ""}`,
+            className: `${styles$q["pagination-item"]} ${currentPage === 1 ? styles$q.disabled : ""}`,
             onClick: onPrevious,
-            children: /* @__PURE__ */ jsx("div", { className: `${styles$o.arrow} ${styles$o.left}` })
+            children: /* @__PURE__ */ jsx("div", { className: `${styles$q.arrow} ${styles$q.left}` })
           }
         ),
         paginationRange.map((pageNumber, index) => {
           if (pageNumber === DOTS) {
-            return /* @__PURE__ */ jsx("li", { className: `${styles$o["pagination-item"]} ${styles$o.dots}`, children: "…" }, index);
+            return /* @__PURE__ */ jsx("li", { className: `${styles$q["pagination-item"]} ${styles$q.dots}`, children: "…" }, index);
           }
           return /* @__PURE__ */ jsx(
             "li",
             {
-              className: `${styles$o["pagination-item"]} ${pageNumber === currentPage ? styles$o.selected : ""}`,
+              className: `${styles$q["pagination-item"]} ${pageNumber === currentPage ? styles$q.selected : ""}`,
               onClick: () => onPageChange(pageNumber),
               children: pageNumber
             },
@@ -1713,16 +1716,16 @@ const FPagination = ({
         /* @__PURE__ */ jsx(
           "li",
           {
-            className: `${styles$o["pagination-item"]} ${currentPage === lastPage ? styles$o.disabled : ""}`,
+            className: `${styles$q["pagination-item"]} ${currentPage === lastPage ? styles$q.disabled : ""}`,
             onClick: onNext,
-            children: /* @__PURE__ */ jsx("div", { className: `${styles$o.arrow} ${styles$o.right}` })
+            children: /* @__PURE__ */ jsx("div", { className: `${styles$q.arrow} ${styles$q.right}` })
           }
         )
       ]
     }
   );
 };
-const styles$n = {
+const styles$p = {
   "f-time-line": "_f-time-line_1ybe7_1",
   "f-time-line__block": "_f-time-line__block_1ybe7_10",
   "f-time-line__block-circle": "_f-time-line__block-circle_1ybe7_29",
@@ -1736,7 +1739,7 @@ const FTimeline = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: `${styles$n["f-time-line"]} ${className || ""}`, style: st, id, children });
+  return /* @__PURE__ */ jsx("div", { className: `${styles$p["f-time-line"]} ${className || ""}`, style: st, id, children });
 };
 const FTimelineCard = ({
   children,
@@ -1745,32 +1748,14 @@ const FTimelineCard = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles$n["f-time-line__block"]} ${className || ""}`, id, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$n["f-time-line__block-circle"] }),
-    /* @__PURE__ */ jsxs("div", { className: styles$n["f-time-line__block-inner"], style: st, children: [
-      title2 && /* @__PURE__ */ jsx("div", { className: styles$n["f-time-line__block-title"], children: title2 }),
-      /* @__PURE__ */ jsx("div", { className: styles$n["f-time-line__block-content"], children })
+  return /* @__PURE__ */ jsxs("div", { className: `${styles$p["f-time-line__block"]} ${className || ""}`, id, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$p["f-time-line__block-circle"] }),
+    /* @__PURE__ */ jsxs("div", { className: styles$p["f-time-line__block-inner"], style: st, children: [
+      title2 && /* @__PURE__ */ jsx("div", { className: styles$p["f-time-line__block-title"], children: title2 }),
+      /* @__PURE__ */ jsx("div", { className: styles$p["f-time-line__block-content"], children })
     ] })
   ] });
 };
-const spinner = "_spinner_f7bma_133";
-const active$4 = "_active_f7bma_183";
-const styles$m = {
-  "fv-opn-img-full": "_fv-opn-img-full_f7bma_1",
-  "fv-opn-img-full-body": "_fv-opn-img-full-body_f7bma_19",
-  "close-button": "_close-button_f7bma_33",
-  "image-container": "_image-container_f7bma_58",
-  "image-wrapper": "_image-wrapper_f7bma_68",
-  "full-image": "_full-image_f7bma_80",
-  "arrow-left": "_arrow-left_f7bma_89",
-  "arrow-right": "_arrow-right_f7bma_90",
-  "loading-spinner": "_loading-spinner_f7bma_125",
-  spinner,
-  "error-message": "_error-message_f7bma_147",
-  "progress-indicator": "_progress-indicator_f7bma_158",
-  "progress-dot": "_progress-dot_f7bma_172",
-  active: active$4
-};
 const FArrowIcon = React.forwardRef(({
   color = "primary",
   size = 30,
@@ -1810,6 +1795,39 @@ const FArrowIcon = React.forwardRef(({
   );
 });
 FArrowIcon.displayName = "FArrowIcon";
+const overlay$1 = "_overlay_avyqh_1";
+const entering$1 = "_entering_avyqh_15";
+const exiting$1 = "_exiting_avyqh_19";
+const viewport = "_viewport_avyqh_24";
+const image = "_image_avyqh_33";
+const zoomed = "_zoomed_avyqh_44";
+const close$1 = "_close_avyqh_52";
+const arrow = "_arrow_avyqh_53";
+const left = "_left_avyqh_95";
+const right = "_right_avyqh_99";
+const indicators = "_indicators_avyqh_103";
+const dot = "_dot_avyqh_112";
+const active$4 = "_active_avyqh_121";
+const spinner = "_spinner_avyqh_126";
+const error$2 = "_error_avyqh_136";
+const styles$o = {
+  overlay: overlay$1,
+  entering: entering$1,
+  exiting: exiting$1,
+  viewport,
+  image,
+  zoomed,
+  close: close$1,
+  arrow,
+  left,
+  right,
+  indicators,
+  dot,
+  active: active$4,
+  spinner,
+  error: error$2
+};
+let openImageViewersCount = 0;
 const FOpenImgFull = ({
   id,
   className,
@@ -1820,151 +1838,297 @@ const FOpenImgFull = ({
   handleClose,
   openAndClose
 }) => {
+  const [isMounted, setIsMounted] = useState(openAndClose);
+  const [isClosing, setIsClosing] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  const [error2, setError] = useState(false);
-  const [touchStart, setTouchStart] = useState(null);
-  const [touchEnd, setTouchEnd] = useState(null);
-  const [isZoomed, setIsZoomed] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [zoom, setZoom] = useState(null);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const pointerStart = useRef(null);
+  const suppressClick = useRef(false);
+  const imageUrl = imagesUrl[selectedImg];
   useEffect(() => {
-    setIsLoading(true);
-    setError(false);
-    setIsZoomed(false);
-    const nextImage = new Image();
-    nextImage.src = imagesUrl[selectedImg];
-    nextImage.onload = () => {
-      setIsLoading(false);
-    };
-    nextImage.onerror = () => {
-      setError(true);
-      setIsLoading(false);
-    };
-  }, [selectedImg, imagesUrl]);
-  const handleKeyDown = useCallback((e) => {
-    if (!openAndClose) return;
-    switch (e.key) {
-      case "ArrowLeft":
-        if (selectedImg > 0) {
-          setSelectedImg(selectedImg - 1);
-        }
-        break;
-      case "ArrowRight":
-        if (selectedImg < imagesUrl.length - 1) {
-          setSelectedImg(selectedImg + 1);
-        }
-        break;
-      case "Escape":
-        handleClose == null ? void 0 : handleClose();
-        break;
-      case "z":
-        setIsZoomed((prev) => !prev);
-        break;
+    if (openAndClose) {
+      setIsMounted(true);
+      setIsClosing(false);
+    } else if (isMounted) {
+      setIsClosing(true);
     }
-  }, [selectedImg, openAndClose, handleClose, setSelectedImg]);
+  }, [openAndClose]);
   useEffect(() => {
+    if (!isClosing) return;
+    const timer = window.setTimeout(() => {
+      setIsMounted(false);
+      setIsClosing(false);
+    }, 300);
+    return () => window.clearTimeout(timer);
+  }, [isClosing]);
+  useEffect(() => {
+    if (!isMounted || isClosing) return;
+    openImageViewersCount += 1;
+    document.body.classList.add("open-img-full");
+    return () => {
+      openImageViewersCount = Math.max(0, openImageViewersCount - 1);
+      if (openImageViewersCount === 0) document.body.classList.remove("open-img-full");
+    };
+  }, [isMounted, isClosing]);
+  useEffect(() => {
+    setIsLoading(true);
+    setHasError(false);
+    setZoom(null);
+    setPan({ x: 0, y: 0 });
+  }, [imageUrl]);
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Escape") handleClose == null ? void 0 : handleClose();
+    else if (event.key === "ArrowLeft" && selectedImg > 0) setSelectedImg(selectedImg - 1);
+    else if (event.key === "ArrowRight" && selectedImg < imagesUrl.length - 1) setSelectedImg(selectedImg + 1);
+  }, [handleClose, imagesUrl.length, selectedImg, setSelectedImg]);
+  useEffect(() => {
+    if (!isMounted || isClosing) return;
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-  const handleTouchStart = (e) => {
-    setTouchStart(e.touches[0].clientX);
+  }, [handleKeyDown, isClosing, isMounted]);
+  if (!isMounted || !imagesUrl.length || selectedImg < 0 || selectedImg >= imagesUrl.length) return null;
+  const changeImage = (offset) => {
+    const nextIndex = selectedImg + offset;
+    if (nextIndex >= 0 && nextIndex < imagesUrl.length) setSelectedImg(nextIndex);
   };
-  const handleTouchMove = (e) => {
-    setTouchEnd(e.touches[0].clientX);
-  };
-  const handleTouchEnd = () => {
-    if (!touchStart || !touchEnd) return;
-    const distance = touchStart - touchEnd;
-    const isLeftSwipe = distance > 50;
-    const isRightSwipe = distance < -50;
-    if (isLeftSwipe && selectedImg < imagesUrl.length - 1) {
-      setSelectedImg(selectedImg + 1);
-    } else if (isRightSwipe && selectedImg > 0) {
-      setSelectedImg(selectedImg - 1);
-    }
-    setTouchStart(null);
-    setTouchEnd(null);
-  };
-  const handleImageClick = () => {
-    setIsZoomed((prev) => !prev);
-  };
-  if (!imagesUrl.length || selectedImg < 0 || selectedImg >= imagesUrl.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    FDialog,
-    {
-      openAndClose,
-      st,
-      className: `${styles$m["fv-opn-img-full"]} ${className || ""}`,
-      id,
-      children: /* @__PURE__ */ jsxs("div", { className: styles$m["fv-opn-img-full-body"], children: [
-        /* @__PURE__ */ jsx("div", { className: styles$m["close-button"], children: handleClose && /* @__PURE__ */ jsx(
-          FCloseIcon,
-          {
-            handleClose: () => {
-              handleClose();
-              document.body.style.overflow = "auto";
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: styles$m["image-container"],
-            onTouchStart: handleTouchStart,
-            onTouchMove: handleTouchMove,
-            onTouchEnd: handleTouchEnd,
-            children: [
-              selectedImg > 0 && /* @__PURE__ */ jsx("div", { className: styles$m["arrow-left"], children: /* @__PURE__ */ jsx(
-                FArrowIcon,
-                {
-                  direction: "left",
-                  handleClick: () => setSelectedImg(selectedImg - 1)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: styles$m["image-wrapper"], children: [
-                isLoading && /* @__PURE__ */ jsx("div", { className: styles$m["loading-spinner"], children: /* @__PURE__ */ jsx("div", { className: styles$m["spinner"] }) }),
-                error2 ? /* @__PURE__ */ jsx("div", { className: styles$m["error-message"], children: "Ошибка загрузки изображения" }) : /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: imagesUrl[selectedImg],
-                    alt: "Полноэкранное изображение",
-                    onLoad: () => setIsLoading(false),
-                    onError: () => {
-                      setError(true);
-                      setIsLoading(false);
-                    },
-                    className: styles$m["full-image"],
-                    onClick: handleImageClick,
-                    style: {
-                      cursor: "zoom-in",
-                      transform: isZoomed ? "scale(1.5)" : "scale(1)",
-                      transition: "transform 0.3s ease"
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id,
+        style: st,
+        className: `${styles$o.overlay} ${isClosing ? styles$o.exiting : styles$o.entering} ${className || ""}`,
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget) handleClose == null ? void 0 : handleClose();
+        },
+        children: [
+          handleClose && /* @__PURE__ */ jsx("button", { type: "button", className: styles$o.close, onClick: handleClose, "aria-label": "Закрыть просмотр изображений", children: /* @__PURE__ */ jsx(FCloseIcon, { color: "light", size: 24 }) }),
+          selectedImg > 0 && /* @__PURE__ */ jsx("button", { type: "button", className: `${styles$o.arrow} ${styles$o.left}`, onClick: () => changeImage(-1), "aria-label": "Предыдущее изображение", children: /* @__PURE__ */ jsx(FArrowIcon, { direction: "left", color: "light", size: 28 }) }),
+          /* @__PURE__ */ jsxs("div", { className: styles$o.viewport, children: [
+            isLoading && !hasError && /* @__PURE__ */ jsx("span", { className: styles$o.spinner, "aria-label": "Загрузка изображения" }),
+            hasError ? /* @__PURE__ */ jsx("p", { className: styles$o.error, children: "Ошибка загрузки изображения" }) : /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: "Полноэкранное изображение",
+                className: `${styles$o.image} ${zoom ? styles$o.zoomed : ""}`,
+                style: {
+                  transform: `translate(${pan.x}px, ${pan.y}px) scale(${(zoom == null ? void 0 : zoom.scale) ?? 1})`,
+                  transformOrigin: zoom ? `${zoom.x}% ${zoom.y}%` : "center"
+                },
+                onLoad: () => setIsLoading(false),
+                onError: () => {
+                  setHasError(true);
+                  setIsLoading(false);
+                },
+                onClick: (event) => {
+                  if (suppressClick.current) {
+                    suppressClick.current = false;
+                    return;
+                  }
+                  const bounds = event.currentTarget.getBoundingClientRect();
+                  setZoom(zoom ? null : {
+                    x: (event.clientX - bounds.left) / bounds.width * 100,
+                    y: (event.clientY - bounds.top) / bounds.height * 100,
+                    scale: 2.5
+                  });
+                  if (zoom) setPan({ x: 0, y: 0 });
+                },
+                onPointerDown: (event) => {
+                  pointerStart.current = { x: event.clientX, y: event.clientY };
+                  if (zoom) event.currentTarget.setPointerCapture(event.pointerId);
+                },
+                onPointerUp: (event) => {
+                  const start = pointerStart.current;
+                  if (!start) return;
+                  const dx = event.clientX - start.x;
+                  const dy = event.clientY - start.y;
+                  pointerStart.current = null;
+                  if (zoom) {
+                    if (Math.abs(dx) + Math.abs(dy) > 4) {
+                      setPan((position) => ({ x: position.x + dx, y: position.y + dy }));
+                      suppressClick.current = true;
+                      window.setTimeout(() => {
+                        suppressClick.current = false;
+                      }, 0);
                     }
+                  } else if (Math.abs(dx) > 50) {
+                    suppressClick.current = true;
+                    window.setTimeout(() => {
+                      suppressClick.current = false;
+                    }, 0);
+                    changeImage(dx < 0 ? 1 : -1);
                   }
-                )
-              ] }),
-              selectedImg < imagesUrl.length - 1 && /* @__PURE__ */ jsx("div", { className: styles$m["arrow-right"], children: /* @__PURE__ */ jsx(
-                FArrowIcon,
-                {
-                  direction: "right",
-                  handleClick: () => setSelectedImg(selectedImg + 1)
-                }
-              ) })
-            ]
-          }
-        ),
-        imagesUrl.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$m["progress-indicator"], children: imagesUrl.map((_, index) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${styles$m["progress-dot"]} ${index === selectedImg ? styles$m["active"] : ""}`,
-            onClick: () => setSelectedImg(index)
-          },
-          index
-        )) })
-      ] })
-    }
+                },
+                draggable: false
+              },
+              imageUrl
+            )
+          ] }),
+          selectedImg < imagesUrl.length - 1 && /* @__PURE__ */ jsx("button", { type: "button", className: `${styles$o.arrow} ${styles$o.right}`, onClick: () => changeImage(1), "aria-label": "Следующее изображение", children: /* @__PURE__ */ jsx(FArrowIcon, { direction: "right", color: "light", size: 28 }) }),
+          imagesUrl.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$o.indicators, children: imagesUrl.map((_, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${styles$o.dot} ${index === selectedImg ? styles$o.active : ""}`,
+              onClick: () => setSelectedImg(index),
+              "aria-label": `Изображение ${index + 1}`,
+              "aria-current": index === selectedImg ? "true" : void 0
+            },
+            index
+          )) })
+        ]
+      }
+    ),
+    document.body
   );
 };
+const preview$1 = "_preview_1mpqt_1";
+const styles$n = {
+  preview: preview$1
+};
+const FImagePreview = ({ src, alt = "", id, className, st }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        id,
+        type: "button",
+        className: `${styles$n.preview} ${className || ""}`,
+        style: st,
+        onClick: () => setIsOpen(true),
+        "aria-label": alt ? `Открыть изображение: ${alt}` : "Открыть изображение в полном размере",
+        children: /* @__PURE__ */ jsx("img", { src, alt })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FOpenImgFull,
+      {
+        imagesUrl: [src],
+        selectedImg: 0,
+        setSelectedImg: () => void 0,
+        openAndClose: isOpen,
+        handleClose: () => setIsOpen(false)
+      }
+    )
+  ] });
+};
+const preview = "_preview_1y6bd_1";
+const play = "_play_1y6bd_24";
+const overlay = "_overlay_1y6bd_53";
+const entering = "_entering_1y6bd_66";
+const exiting = "_exiting_1y6bd_70";
+const video = "_video_1y6bd_75";
+const close = "_close_1y6bd_83";
+const fullscreen = "_fullscreen_1y6bd_84";
+const styles$m = {
+  preview,
+  play,
+  overlay,
+  entering,
+  exiting,
+  video,
+  close,
+  fullscreen
+};
+let openVideoPlayersCount = 0;
+const FVideoPlayer = ({ src, poster, className, st }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const videoRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      setIsMounted(true);
+      setIsClosing(false);
+    } else if (isMounted) {
+      setIsClosing(true);
+    }
+  }, [isMounted, isOpen]);
+  useEffect(() => {
+    if (!isClosing) return;
+    const timer = window.setTimeout(() => {
+      setIsMounted(false);
+      setIsClosing(false);
+    }, 300);
+    return () => window.clearTimeout(timer);
+  }, [isClosing]);
+  useEffect(() => {
+    if (!isMounted || isClosing) return;
+    openVideoPlayersCount += 1;
+    document.body.classList.add("open-video-player");
+    return () => {
+      openVideoPlayersCount = Math.max(0, openVideoPlayersCount - 1);
+      if (openVideoPlayersCount === 0) document.body.classList.remove("open-video-player");
+    };
+  }, [isMounted, isClosing]);
+  useEffect(() => {
+    if (!isMounted || isClosing) return;
+    const video2 = videoRef.current;
+    if (video2) void video2.play().catch(() => {
+    });
+  }, [isClosing, isMounted, src]);
+  useEffect(() => {
+    if (!isMounted || isClosing) return;
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape" && !document.fullscreenElement) setIsOpen(false);
+    };
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [isClosing, isMounted]);
+  const enterFullscreen = () => {
+    const video2 = videoRef.current;
+    if (video2 == null ? void 0 : video2.requestFullscreen) void video2.requestFullscreen().catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `${styles$m.preview} ${className || ""}`,
+        style: st,
+        onClick: () => setIsOpen(true),
+        "aria-label": "Открыть видео",
+        children: [
+          /* @__PURE__ */ jsx("video", { src, poster, preload: "metadata", muted: true, playsInline: true }),
+          /* @__PURE__ */ jsx("span", { className: styles$m.play, "aria-hidden": "true" })
+        ]
+      }
+    ),
+    isMounted && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${styles$m.overlay} ${isClosing ? styles$m.exiting : styles$m.entering}`,
+          onMouseDown: (event) => {
+            if (event.target === event.currentTarget) setIsOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: styles$m.close, onClick: () => setIsOpen(false), "aria-label": "Закрыть видео", children: /* @__PURE__ */ jsx(FCloseIcon, { color: "light", size: 24 }) }),
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                ref: videoRef,
+                className: styles$m.video,
+                src,
+                poster,
+                controls: true,
+                autoPlay: true,
+                playsInline: true
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { type: "button", className: styles$m.fullscreen, onClick: enterFullscreen, children: "На весь экран" })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
 const card$2 = "_card_1ytel_1";
 const primary$1 = "_primary_1ytel_69";
 const secondary$1 = "_secondary_1ytel_81";
@@ -2757,7 +2921,7 @@ const FAlert = ({
 }) => {
   const visible2 = useRef();
   const hidden2 = useRef();
-  const close = useRef();
+  const close2 = useRef();
   const [randomId] = useState(fGenerateUniqueId());
   let newTime = displayTime;
   useEffect(() => {
@@ -2765,7 +2929,7 @@ const FAlert = ({
     if (!open) {
       const el = document.querySelector(`#f-block-alert-${randomId}`);
       if (el !== null) {
-        close.current = setTimeout(() => {
+        close2.current = setTimeout(() => {
           if (onClose) {
             onClose(false);
           }
@@ -2793,7 +2957,7 @@ const FAlert = ({
             el.classList.remove("f-alert-visible");
             el.classList.add("f-alert-hidden");
           }, (newTime - 1) * 1e3);
-          close.current = setTimeout(() => {
+          close2.current = setTimeout(() => {
             onClose(false);
             el.classList.remove("f-alert-hidden");
             el.classList.remove("f-alert-visible");
@@ -2946,7 +3110,7 @@ const FAlert = ({
                   el.classList.remove("f-alert-hidden");
                   clearTimeout(visible2.current);
                   clearTimeout(hidden2.current);
-                  clearTimeout(close.current);
+                  clearTimeout(close2.current);
                 }
               }
             )
@@ -4344,7 +4508,7 @@ function FTableActions({ children, className, onClick, ...props }) {
         type: "button",
         "aria-label": "Действия",
         ...props,
-        className: `${styles$u.more} ${className || ""}`,
+        className: `${styles$w.more} ${className || ""}`,
         "aria-expanded": open,
         "aria-controls": id,
         onClick: (event) => {
@@ -4377,7 +4541,7 @@ function FTableActions({ children, className, onClick, ...props }) {
         ref: menu,
         id,
         ...{ popover: "auto" },
-        className: styles$u["row-menu"],
+        className: styles$w["row-menu"],
         onKeyDown: (event) => {
           var _a, _b;
           if (event.key === "Escape") {
@@ -9545,6 +9709,7 @@ export {
   FFullDateField,
   FGrid,
   FGridRow,
+  FImagePreview,
   FInfoCircleIcon,
   FInputFileForm,
   FLibraryProvider,
@@ -9593,6 +9758,7 @@ export {
   FTrashIcon,
   FUnlinkIcon,
   FUploadIcon,
+  FVideoPlayer,
   FWaterErrorBoundaryPage,
   LibraryContext,
   calcDurationMs,