fui-material 2.0.3 → 2.1.1

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

@@ -1,5 +1,5 @@
-import React, { useRef, useState, forwardRef, useEffect, useMemo, useCallback, useLayoutEffect, Fragment, isValidElement, cloneElement } from "react";
-import ReactDOM from "react-dom";
+import React, { forwardRef, useRef, useState, useEffect, useMemo, useCallback, useLayoutEffect, Fragment, isValidElement, cloneElement } from "react";
+import ReactDOM, { createPortal } from "react-dom";
 import './main.css';function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];
@@ -967,7 +967,7 @@ const stylesBtn = {
   "btn-link": "_btn-link_ch6o3_411",
   "btn-outline-link": "_btn-outline-link_ch6o3_434"
 };
-const FButton = ({
+const FButton = forwardRef(({
   children,
   variant = "contained",
   color = "primary",
@@ -975,7 +975,7 @@ const FButton = ({
   st: st2,
   fullWidth,
   ...props
-}) => {
+}, ref) => {
   const inputId = props.id || `button-${Math.random().toString(36).substring(2, 9)}`;
   let style = st2 !== void 0 ? { ...st2 } : void 0;
   if (fullWidth) {
@@ -994,6 +994,7 @@ const FButton = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "button",
     {
+      ref,
       style,
       type: "button",
       ...props,
@@ -1002,7 +1003,8 @@ const FButton = ({
       children
     }
   );
-};
+});
+FButton.displayName = "FButton";
 const defaultStyles = {
   "f-button-file": "_f-button-file_i2hex_1",
   "file-preview-list": "_file-preview-list_i2hex_1"
@@ -1048,7 +1050,7 @@ const FTrashIcon = ({
 const progressBar = "_progressBar_1xp9s_48";
 const completed = "_completed_1xp9s_60";
 const progress = "_progress_1xp9s_48";
-const styles$v = {
+const styles$w = {
   "file-preview-card": "_file-preview-card_1xp9s_1",
   "file-preview-info": "_file-preview-info_1xp9s_22",
   "file-preview-name": "_file-preview-name_1xp9s_28",
@@ -1070,18 +1072,18 @@ const FFile = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `${styles$v["file-preview-card"]} ${className || ""}`,
+      className: `${styles$w["file-preview-card"]} ${className || ""}`,
       id,
       style: st2,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$v["file-preview-info"], children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$v["file-preview-name"], title: name, children: name }),
-          typeof size === "number" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$v["file-preview-size"], children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$w["file-preview-info"], children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$w["file-preview-name"], title: name, children: name }),
+          typeof size === "number" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$w["file-preview-size"], children: [
             Math.round(size / 1024),
             " КБ"
           ] })
         ] }),
-        handleDelete && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$v["trash-icon"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        handleDelete && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$w["trash-icon"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           FTrashIcon,
           {
             size: 20,
@@ -1089,10 +1091,10 @@ const FFile = ({
             handleClick: handleDelete
           }
         ) }),
-        typeof progress2 === "number" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$v.progressBar} ${progress2 === 100 ? styles$v.completed : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        typeof progress2 === "number" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$w.progressBar} ${progress2 === 100 ? styles$w.completed : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: styles$v.progress,
+            className: styles$w.progress,
             style: { width: `${progress2}%` }
           }
         ) })
@@ -1195,7 +1197,7 @@ const FButtonFile = ({
     )) }) })
   ] });
 };
-const styles$u = {
+const styles$v = {
   "f-text-field": "_f-text-field_200bb_1"
 };
 const FLoadIcon = ({ size = 30, st: st2, id, className, color = "primary" }) => {
@@ -1266,7 +1268,7 @@ const FTextField = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `f-form-element ${styles$u["f-text-field"]} ${className || ""}`,
+        className: `f-form-element ${styles$v["f-text-field"]} ${className || ""}`,
         style: mergedStyle,
         role: "group",
         id: inputId + "-text-field-block",
@@ -1357,7 +1359,7 @@ const FStack = ({
     }
   );
 };
-const styles$t = {
+const styles$u = {
   "f-grid": "_f-grid_3g4xh_1",
   "f-grid__col": "_f-grid__col_3g4xh_10",
   "f-grid__col--auto": "_f-grid__col--auto_3g4xh_16",
@@ -1460,21 +1462,21 @@ const FGrid = ({
     xxl: xxl ?? xl ?? lg ?? md ?? sm ?? xs
   };
   const getColumnClasses = () => {
-    if (colAuto) return styles$t["f-grid__col--auto"];
-    const classes = [styles$t["f-grid__col"]];
-    if (resolvedSizes.xs !== void 0) classes.push(styles$t[`f-grid__col--xs-${resolvedSizes.xs}`]);
-    if (resolvedSizes.sm !== void 0) classes.push(styles$t[`f-grid__col--sm-${resolvedSizes.sm}`]);
-    if (resolvedSizes.md !== void 0) classes.push(styles$t[`f-grid__col--md-${resolvedSizes.md}`]);
-    if (resolvedSizes.lg !== void 0) classes.push(styles$t[`f-grid__col--lg-${resolvedSizes.lg}`]);
-    if (resolvedSizes.xl !== void 0) classes.push(styles$t[`f-grid__col--xl-${resolvedSizes.xl}`]);
-    if (resolvedSizes.xxl !== void 0) classes.push(styles$t[`f-grid__col--xxl-${resolvedSizes.xxl}`]);
+    if (colAuto) return styles$u["f-grid__col--auto"];
+    const classes = [styles$u["f-grid__col"]];
+    if (resolvedSizes.xs !== void 0) classes.push(styles$u[`f-grid__col--xs-${resolvedSizes.xs}`]);
+    if (resolvedSizes.sm !== void 0) classes.push(styles$u[`f-grid__col--sm-${resolvedSizes.sm}`]);
+    if (resolvedSizes.md !== void 0) classes.push(styles$u[`f-grid__col--md-${resolvedSizes.md}`]);
+    if (resolvedSizes.lg !== void 0) classes.push(styles$u[`f-grid__col--lg-${resolvedSizes.lg}`]);
+    if (resolvedSizes.xl !== void 0) classes.push(styles$u[`f-grid__col--xl-${resolvedSizes.xl}`]);
+    if (resolvedSizes.xxl !== void 0) classes.push(styles$u[`f-grid__col--xxl-${resolvedSizes.xxl}`]);
     return classes.join(" ");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     obj === "container" && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: `${styles$t["f-grid"]} ${className || ""}`,
+        className: `${styles$u["f-grid"]} ${className || ""}`,
         style,
         id,
         children
@@ -1492,7 +1494,7 @@ const FGrid = ({
     obj === void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className, style, id, children })
   ] });
 };
-const styles$s = {
+const styles$t = {
   "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",
@@ -1514,21 +1516,21 @@ const FGridRow = ({
 }) => {
   const getJustifyContentClass = () => {
     if (!justifyContent) return "";
-    return styles$s[`f-grid-row--justify-${justifyContent}`];
+    return styles$t[`f-grid-row--justify-${justifyContent}`];
   };
   const getAlignItemsClass = () => {
     if (!alignItems) return "";
-    return styles$s[`f-grid-row--align-${alignItems}`];
+    return styles$t[`f-grid-row--align-${alignItems}`];
   };
   const rowClasses = [
-    styles$s["f-grid-row"],
+    styles$t["f-grid-row"],
     getJustifyContentClass(),
     getAlignItemsClass(),
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: rowClasses, style: st2, id, children });
 };
-const styles$r = {
+const styles$s = {
   "f-container": "_f-container_g9ck3_1",
   "container-fluid": "_container-fluid_g9ck3_1",
   "container-xxl": "_container-xxl_g9ck3_1",
@@ -1548,7 +1550,7 @@ const FContainer = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$r["f-container"]} ${styles$r[maxWidth]} ${className || ""}`,
+      className: `${styles$s["f-container"]} ${styles$s[maxWidth]} ${className || ""}`,
       style: st2,
       id,
       children
@@ -1556,7 +1558,7 @@ const FContainer = ({
   );
 };
 const panel = "_panel_yplsg_1";
-const styles$q = {
+const styles$r = {
   panel,
   "panel-default": "_panel-default_yplsg_6",
   "panel-heading": "_panel-heading_yplsg_12",
@@ -1589,15 +1591,15 @@ const FPaper = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `${styles$q["panel"]} ${styles$q["panel-default"]} ${className || ""} ${animated ? `${styles$q[`animated-${animated.name}`]} ${animated.name}` : ""}`,
+      className: `${styles$r["panel"]} ${styles$r["panel-default"]} ${className || ""} ${animated ? `${styles$r[`animated-${animated.name}`]} ${animated.name}` : ""}`,
       style: st2,
       id,
       onAnimationEnd,
       children: [
-        label && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$q["panel-heading"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        label && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$r["panel-heading"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "h3",
           {
-            className: styles$q["panel-title"],
+            className: styles$r["panel-title"],
             style: { fontSize: fontSizeLabel },
             children: label
           }
@@ -1605,7 +1607,7 @@ const FPaper = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: styles$q["panel-body"],
+            className: styles$r["panel-body"],
             style: { fontSize: fontSizeBody },
             children
           }
@@ -1618,7 +1620,7 @@ const bordered = "_bordered_19x7r_18";
 const left$1 = "_left_19x7r_40";
 const center = "_center_19x7r_43";
 const right = "_right_19x7r_46";
-const styles$p = {
+const styles$q = {
   "f-table-component": "_f-table-component_19x7r_1",
   "f-table-component__table": "_f-table-component__table_19x7r_7",
   bordered,
@@ -1648,7 +1650,7 @@ const FTableHead = ({
     {
       style: st2,
       ...props,
-      className: `${styles$p["f-table-component__table_header"]} ${isSticky ? styles$p["is-sticky"] : ""} ${props.className || ""} ${styles$p[textAlignment]}`,
+      className: `${styles$q["f-table-component__table_header"]} ${isSticky ? styles$q["is-sticky"] : ""} ${props.className || ""} ${styles$q[textAlignment]}`,
       children
     }
   );
@@ -1741,7 +1743,7 @@ const FTableBody = ({
   } else {
     visibleItems = flatChildren;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("tbody", { ref: tableBodyRef, style: st2, ...props, className: `${styles$p["f-table-component__table_body"]} ${props.className || ""}  ${styles$p[textAlignment]}`, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("tbody", { ref: tableBodyRef, style: st2, ...props, className: `${styles$q["f-table-component__table_body"]} ${props.className || ""}  ${styles$q[textAlignment]}`, children: [
     virtualizationEnabled && rowHeights.some((h) => h > 0) && /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { style: { height: topOffset } }),
     visibleItems.map((child, idx) => React.isValidElement(child) ? React.cloneElement(child, { "data-row-index": virtualizationEnabled ? startIdx + idx : idx, key: virtualizationEnabled ? startIdx + idx : idx }) : child),
     virtualizationEnabled && rowHeights.some((h) => h > 0) && /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { style: { height: bottomOffset } })
@@ -1780,14 +1782,14 @@ const FTable = ({
     "div",
     {
       ref: tableWrapperRef,
-      className: styles$p["f-table-component"],
+      className: styles$q["f-table-component"],
       style: { overflowX, overflowY },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "table",
         {
           style: st2,
           ...props,
-          className: `table ${styles$p["f-table-component__table"]} ${styles$p["bordered"]} ${styles$p["bordered-half"]} ${props.className || ""}`,
+          className: `table ${styles$q["f-table-component__table"]} ${styles$q["bordered"]} ${styles$q["bordered-half"]} ${props.className || ""}`,
           children: React.Children.map(children, (child) => {
             if (React.isValidElement(child) && child.type === FTableHead) {
               const headProps = child.props;
@@ -1827,7 +1829,7 @@ const FTableRow = ({
     {
       style: st2,
       ...props,
-      className: `${styles$p["f-table-component__table_row"]} ${props.className || ""}${textAlignment !== void 0 ? ` ${styles$p[textAlignment]}` : ""}`,
+      className: `${styles$q["f-table-component__table_row"]} ${props.className || ""}${textAlignment !== void 0 ? ` ${styles$q[textAlignment]}` : ""}`,
       children
     }
   );
@@ -1855,7 +1857,7 @@ const FTableHeaderCell = ({
       rowSpan: row && row > 1 ? row : void 0,
       colSpan: col && col > 1 ? col : void 0,
       ...props,
-      className: `${styles$p["f-table-component__table_header-cell"]} ${props.className || ""}`,
+      className: `${styles$q["f-table-component__table_header-cell"]} ${props.className || ""}`,
       children
     }
   );
@@ -1883,7 +1885,7 @@ const FTableDataCell = ({
       rowSpan: row && row > 1 ? row : void 0,
       colSpan: col && col > 1 ? col : void 0,
       ...props,
-      className: `${styles$p["f-table-component__table_body-cell"]} ${props.className || ""}`,
+      className: `${styles$q["f-table-component__table_body-cell"]} ${props.className || ""}`,
       children
     }
   );
@@ -1898,14 +1900,14 @@ const FTableFooter = ({
     {
       style: st2,
       ...props,
-      className: `${styles$p["f-table-component__table_footer"]} ${props.className || ""}`,
+      className: `${styles$q["f-table-component__table_footer"]} ${props.className || ""}`,
       children
     }
   );
 };
 const active$4 = "_active_16jkc_16";
 const hide = "_hide_16jkc_37";
-const styles$o = {
+const styles$p = {
   "f-dialog": "_f-dialog_16jkc_1",
   "active-dialog": "_active-dialog_16jkc_16",
   "f-dialog__content": "_f-dialog__content_16jkc_20",
@@ -1957,12 +1959,12 @@ const FDialog = ({
       {
         id,
         style: st2,
-        className: `${styles$o["f-dialog"]} ${openAndClose ? styles$o["active-dialog"] : ""} ${className || ""}`,
+        className: `${styles$p["f-dialog"]} ${openAndClose ? styles$p["active-dialog"] : ""} ${className || ""}`,
         onClick: () => closeButtonBackPage == null ? void 0 : closeButtonBackPage(false),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: `${styles$o["f-dialog__content"]} ${openAndClose ? styles$o["active"] : ""} ${hide2 ? styles$o["hide"] : ""}`,
+            className: `${styles$p["f-dialog__content"]} ${openAndClose ? styles$p["active"] : ""} ${hide2 ? styles$p["hide"] : ""}`,
             style: {
               width: contentWidth
             },
@@ -1991,9 +1993,9 @@ const FCloseIcon = ({ color = "primary", size = 30, st: st2, id, className, hand
   );
 };
 const FDialogHeader = ({ title, handleClose }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$o["f-dialog__header"], children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: styles$o["f-dialog__header_title"], children: title }),
-    handleClose && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$o["f-dialog__header_close"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$p["f-dialog__header"], children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: styles$p["f-dialog__header_title"], children: title }),
+    handleClose && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$p["f-dialog__header_close"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       FCloseIcon,
       {
         handleClose,
@@ -2008,7 +2010,7 @@ const FDialogBody = ({ st: st2, children, scroll = true }) => {
     ...scroll ? { overflowY: "auto" } : {},
     ...st2
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$o["f-dialog__body"], style, children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$p["f-dialog__body"], style, children });
 };
 const FDialogFooter = ({ children, className, st: st2, id }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2016,7 +2018,7 @@ const FDialogFooter = ({ children, className, st: st2, id }) => {
     {
       id,
       style: st2,
-      className: `${styles$o["f-dialog__footer"]} ${className || ""}`,
+      className: `${styles$p["f-dialog__footer"]} ${className || ""}`,
       children
     }
   );
@@ -2031,7 +2033,7 @@ const info$2 = "_info_1lhk7_62";
 const light = "_light_1lhk7_66";
 const dark = "_dark_1lhk7_70";
 const link$1 = "_link_1lhk7_74";
-const styles$n = {
+const styles$o = {
   "authorization-spinner": "_authorization-spinner_1lhk7_1",
   "spinner-item": "_spinner-item_1lhk7_7",
   loader,
@@ -2049,14 +2051,14 @@ const FProgress = ({ st: st2, color = "primary", id, className }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$n["authorization-spinner"]} ${styles$n.visible} ${className || ""}`,
+      className: `${styles$o["authorization-spinner"]} ${styles$o.visible} ${className || ""}`,
       id,
       style: st2,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$n["spinner-item"]} ${styles$n[color]}` })
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$o["spinner-item"]} ${styles$o[color]}` })
     }
   );
 };
-const styles$m = {
+const styles$n = {
   "f-preloader": "_f-preloader_17f9x_1",
   "active-preloader": "_active-preloader_17f9x_10"
 };
@@ -2083,13 +2085,13 @@ const FPreloader = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$m["f-preloader"]} ${open ? styles$m["active-preloader"] : ""}`,
+      className: `${styles$n["f-preloader"]} ${open ? styles$n["active-preloader"] : ""}`,
       style: mergedStyle,
       children
     }
   );
 };
-const styles$l = {
+const styles$m = {
   "f-checkbox": "_f-checkbox_9rvqg_1"
 };
 const FCheckbox = forwardRef(
@@ -2103,7 +2105,7 @@ const FCheckbox = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: `${styles$l["f-checkbox"]} ${className || ""}`,
+        className: `${styles$m["f-checkbox"]} ${className || ""}`,
         id,
         style: st2,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
@@ -2114,7 +2116,7 @@ const FCheckbox = forwardRef(
     );
   }
 );
-const styles$k = {
+const styles$l = {
   "f-radio": "_f-radio_cwhmx_1"
 };
 const FRadioButton = ({
@@ -2129,7 +2131,7 @@ const FRadioButton = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$k["f-radio"]} ${className || ""}`,
+      className: `${styles$l["f-radio"]} ${className || ""}`,
       style: st2,
       id,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
@@ -2199,7 +2201,7 @@ const selected = "_selected_aham2_33";
 const disabled$1 = "_disabled_aham2_37";
 const arrow = "_arrow_aham2_43";
 const left = "_left_aham2_56";
-const styles$j = {
+const styles$k = {
   "pagination-container": "_pagination-container_aham2_1",
   "pagination-item": "_pagination-item_aham2_9",
   dots,
@@ -2233,26 +2235,26 @@ const FPagination = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "ul",
     {
-      className: `${styles$j["pagination-container"]} ${className || ""}`,
+      className: `${styles$k["pagination-container"]} ${className || ""}`,
       style: st2,
       id,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "li",
           {
-            className: `${styles$j["pagination-item"]} ${currentPage === 1 ? styles$j.disabled : ""}`,
+            className: `${styles$k["pagination-item"]} ${currentPage === 1 ? styles$k.disabled : ""}`,
             onClick: onPrevious,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$j.arrow} ${styles$j.left}` })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$k.arrow} ${styles$k.left}` })
           }
         ),
         paginationRange.map((pageNumber, index) => {
           if (pageNumber === DOTS) {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: `${styles$j["pagination-item"]} ${styles$j.dots}`, children: "…" }, index);
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: `${styles$k["pagination-item"]} ${styles$k.dots}`, children: "…" }, index);
           }
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             "li",
             {
-              className: `${styles$j["pagination-item"]} ${pageNumber === currentPage ? styles$j.selected : ""}`,
+              className: `${styles$k["pagination-item"]} ${pageNumber === currentPage ? styles$k.selected : ""}`,
               onClick: () => onPageChange(pageNumber),
               children: pageNumber
             },
@@ -2262,16 +2264,16 @@ const FPagination = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "li",
           {
-            className: `${styles$j["pagination-item"]} ${currentPage === lastPage ? styles$j.disabled : ""}`,
+            className: `${styles$k["pagination-item"]} ${currentPage === lastPage ? styles$k.disabled : ""}`,
             onClick: onNext,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$j.arrow} ${styles$j.right}` })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$k.arrow} ${styles$k.right}` })
           }
         )
       ]
     }
   );
 };
-const styles$i = {
+const styles$j = {
   "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",
@@ -2285,7 +2287,7 @@ const FTimeline = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$i["f-time-line"]} ${className || ""}`, style: st2, id, children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$j["f-time-line"]} ${className || ""}`, style: st2, id, children });
 };
 const FTimelineCard = ({
   children,
@@ -2294,17 +2296,17 @@ const FTimelineCard = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$i["f-time-line__block"]} ${className || ""}`, id, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["f-time-line__block-circle"] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$i["f-time-line__block-inner"], style: st2, children: [
-      title && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["f-time-line__block-title"], children: title }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["f-time-line__block-content"], children })
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$j["f-time-line__block"]} ${className || ""}`, id, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$j["f-time-line__block-circle"] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$j["f-time-line__block-inner"], style: st2, children: [
+      title && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$j["f-time-line__block-title"], children: title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$j["f-time-line__block-content"], children })
     ] })
   ] });
 };
 const spinner = "_spinner_f7bma_133";
 const active$3 = "_active_f7bma_183";
-const styles$h = {
+const styles$i = {
   "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",
@@ -2439,10 +2441,10 @@ const FOpenImgFull = ({
     {
       openAndClose,
       st: st2,
-      className: `${styles$h["fv-opn-img-full"]} ${className || ""}`,
+      className: `${styles$i["fv-opn-img-full"]} ${className || ""}`,
       id,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$h["fv-opn-img-full-body"], children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h["close-button"], children: handleClose && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$i["fv-opn-img-full-body"], children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["close-button"], children: handleClose && /* @__PURE__ */ jsxRuntimeExports.jsx(
           FCloseIcon,
           {
             handleClose: () => {
@@ -2454,21 +2456,21 @@ const FOpenImgFull = ({
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            className: styles$h["image-container"],
+            className: styles$i["image-container"],
             onTouchStart: handleTouchStart,
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
             children: [
-              selectedImg > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h["arrow-left"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              selectedImg > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["arrow-left"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 FArrowIcon,
                 {
                   direction: "left",
                   handleClick: () => setSelectedImg(selectedImg - 1)
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$h["image-wrapper"], children: [
-                isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h["loading-spinner"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h["spinner"] }) }),
-                error2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h["error-message"], children: "Ошибка загрузки изображения" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$i["image-wrapper"], children: [
+                isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["loading-spinner"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["spinner"] }) }),
+                error2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["error-message"], children: "Ошибка загрузки изображения" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "img",
                   {
                     src: imagesUrl[selectedImg],
@@ -2478,7 +2480,7 @@ const FOpenImgFull = ({
                       setError(true);
                       setIsLoading(false);
                     },
-                    className: styles$h["full-image"],
+                    className: styles$i["full-image"],
                     onClick: handleImageClick,
                     style: {
                       cursor: "zoom-in",
@@ -2488,7 +2490,7 @@ const FOpenImgFull = ({
                   }
                 )
               ] }),
-              selectedImg < imagesUrl.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h["arrow-right"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              selectedImg < imagesUrl.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["arrow-right"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 FArrowIcon,
                 {
                   direction: "right",
@@ -2498,10 +2500,10 @@ const FOpenImgFull = ({
             ]
           }
         ),
-        imagesUrl.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h["progress-indicator"], children: imagesUrl.map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        imagesUrl.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["progress-indicator"], children: imagesUrl.map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: `${styles$h["progress-dot"]} ${index === selectedImg ? styles$h["active"] : ""}`,
+            className: `${styles$i["progress-dot"]} ${index === selectedImg ? styles$i["active"] : ""}`,
             onClick: () => setSelectedImg(index)
           },
           index
@@ -2514,7 +2516,7 @@ const card = "_card_1pttw_1";
 const warning$3 = "_warning_1pttw_16";
 const info$1 = "_info_1pttw_24";
 const alert$1 = "_alert_1pttw_32";
-const styles$g = {
+const styles$h = {
   card,
   warning: warning$3,
   info: info$1,
@@ -2542,16 +2544,16 @@ const FAccordion = ({
     "div",
     {
       onClick,
-      className: `${styles$g.card} ${className || ""}`,
+      className: `${styles$h.card} ${className || ""}`,
       id,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "details",
         {
-          className: styles$g[variant],
+          className: styles$h[variant],
           open: isOpen,
           style: st2,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: styles$g["fv-accord-title"], children: title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: styles$h["fv-accord-title"], children: title }),
             children
           ]
         }
@@ -2560,7 +2562,7 @@ const FAccordion = ({
   );
 };
 const container = "_container_6r9j2_1";
-const styles$f = {
+const styles$g = {
   container,
   "custom-file": "_custom-file_6r9j2_6",
   "custom-file-input": "_custom-file-input_6r9j2_9",
@@ -2687,11 +2689,11 @@ const FInputFileForm = ({
       setUploadProgress({});
     }
   }, [deleteFile]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$f.container, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$g.container, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `${styles$f["custom-file"]} ${styles$f["custom-file-dropzone"]} ${isDragging ? styles$f.dragging : ""}`,
+        className: `${styles$g["custom-file"]} ${styles$g["custom-file-dropzone"]} ${isDragging ? styles$g.dragging : ""}`,
         style: st2,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
@@ -2703,7 +2705,7 @@ const FInputFileForm = ({
               required,
               accept,
               type: "file",
-              className: `${styles$f["custom-file-input"]} ${className || ""}`,
+              className: `${styles$g["custom-file-input"]} ${className || ""}`,
               name,
               id,
               title,
@@ -2714,11 +2716,11 @@ const FInputFileForm = ({
               ref: inputRef
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: id, className: styles$f["custom-file-label"], style: disabled2 ? { backgroundColor: "#F3F3F3", border: "1px dashed #C4C4C4" } : void 0, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: id, className: styles$g["custom-file-label"], style: disabled2 ? { backgroundColor: "#F3F3F3", border: "1px dashed #C4C4C4" } : void 0, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "svg",
               {
-                className: `${styles$f["svg-icon"]} ${styles$f["icon-md"]}`,
+                className: `${styles$g["svg-icon"]} ${styles$g["icon-md"]}`,
                 focusable: "false",
                 role: "img",
                 viewBox: "0 0 36 35",
@@ -2747,8 +2749,8 @@ const FInputFileForm = ({
         ]
       }
     ),
-    errors.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$f.errors, children: errors.map((error2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$f.error, children: error2 }, index)) }),
-    showPreview && selectedFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$f["custom-files-preview"], children: selectedFiles.map((file, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$f.fileItem, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    errors.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$g.errors, children: errors.map((error2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$g.error, children: error2 }, index)) }),
+    showPreview && selectedFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$g["custom-files-preview"], children: selectedFiles.map((file, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$g.fileItem, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       FFile,
       {
         name: file.name,
@@ -2759,7 +2761,7 @@ const FInputFileForm = ({
     ) }, index)) })
   ] });
 };
-const styles$e = {
+const styles$f = {
   "f-select": "_f-select_16vqs_1",
   "f-select__control-element": "_f-select__control-element_16vqs_5"
 };
@@ -2789,7 +2791,7 @@ const FSelect = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `f-form-element ${styles$e["f-select"]}`,
+        className: `f-form-element ${styles$f["f-select"]}`,
         style: mergedStyle,
         id: inputId + "-select-block",
         role: "group",
@@ -2814,7 +2816,7 @@ const FSelect = forwardRef(
                 ...props,
                 id: inputId,
                 disabled: props.disabled || load,
-                className: `f-form-element__control-element ${styles$e["f-select__control-element"]} ${errText ? "error" : ""} ${props.className || ""}`,
+                className: `f-form-element__control-element ${styles$f["f-select__control-element"]} ${errText ? "error" : ""} ${props.className || ""}`,
                 children: !load && children
               }
             ),
@@ -2905,7 +2907,7 @@ const FFullDateField = forwardRef(
   }
 );
 const active$2 = "_active_j5nh9_38";
-const styles$d = {
+const styles$e = {
   "f-select-search-db": "_f-select-search-db_j5nh9_1",
   "f-select-search-db__input": "_f-select-search-db__input_j5nh9_6",
   "f-select-search-db__input_field": "_f-select-search-db__input_field_j5nh9_10",
@@ -3053,12 +3055,12 @@ const FSelectSearchDb = ({
     "div",
     {
       ref: containerRef,
-      className: `${styles$d["f-select-search-db"]} ${className || ""}`,
+      className: `${styles$e["f-select-search-db"]} ${className || ""}`,
       style: st2,
       id,
       "data-position": dropdownPosition,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$d["f-select-search-db__input"], children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$e["f-select-search-db__input"], children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             FTextField,
             {
@@ -3069,7 +3071,7 @@ const FSelectSearchDb = ({
               label,
               type,
               placeholder,
-              className: styles$d["f-select-search-db__input_field"],
+              className: styles$e["f-select-search-db__input_field"],
               value: valueInput,
               onChange: handlerOnChange,
               onFocus,
@@ -3086,19 +3088,19 @@ const FSelectSearchDb = ({
           !load && !disabled2 && arrObject.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: styles$d["f-select-search-db__input_arrow"],
+              className: styles$e["f-select-search-db__input_arrow"],
               style: { marginTop: label ? "28px" : "7px" },
               onClick: handleArrowClick,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(FArrowIcon, { direction: isDropdownOpen ? "up" : "down", size: 15 })
             }
           )
         ] }),
-        isDropdownOpen && (arrObject.length > 0 || valueInput.trim() === "") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$d["f-select-search-db__dropdown"]} ${isDropdownOpen ? styles$d.active : ""}`, children: arrObject.length === 0 && valueInput.trim() === "" ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "Введите текст" }) : arrObject.length === 0 && valueInput.trim() !== "" && !load ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "Ничего не найдено" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$d["f-select-search-db__dropdown_content"], children: arrObject.slice(0, 10).map((opt, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => handleItemClick(opt), children: selectItem(opt) }, index)) }) })
+        isDropdownOpen && (arrObject.length > 0 || valueInput.trim() === "") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$e["f-select-search-db__dropdown"]} ${isDropdownOpen ? styles$e.active : ""}`, children: arrObject.length === 0 && valueInput.trim() === "" ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "Введите текст" }) : arrObject.length === 0 && valueInput.trim() !== "" && !load ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "Ничего не найдено" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$e["f-select-search-db__dropdown_content"], children: arrObject.slice(0, 10).map((opt, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => handleItemClick(opt), children: selectItem(opt) }, index)) }) })
       ]
     }
   );
 };
-const styles$c = {
+const styles$d = {
   "f-text-area": "_f-text-area_1ywhr_1"
 };
 const FTextArea = forwardRef(
@@ -3127,7 +3129,7 @@ const FTextArea = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `f-form-element ${styles$c["f-text-area"]} ${className || ""}`,
+        className: `f-form-element ${styles$d["f-text-area"]} ${className || ""}`,
         style: mergedStyle,
         role: "group",
         id: areaId + "-text-area-block",
@@ -3486,7 +3488,7 @@ const FNative = ({
 const horizontal = "_horizontal_zlvc7_1";
 const vertical = "_vertical_zlvc7_7";
 const active$1 = "_active_zlvc7_50";
-const styles$b = {
+const styles$c = {
   "f-tabs": "_f-tabs_zlvc7_1",
   horizontal,
   vertical,
@@ -3505,12 +3507,12 @@ const FTabs = ({
     {
       id,
       style: st2,
-      className: `${styles$b["f-tabs"]} ${styles$b[orientation]} ${className || ""}`,
+      className: `${styles$c["f-tabs"]} ${styles$c[orientation]} ${className || ""}`,
       children
     }
   );
 };
-const FTab = ({
+const FTab = forwardRef(({
   children,
   id,
   className,
@@ -3518,21 +3520,23 @@ const FTab = ({
   onClick,
   disabled: disabled2,
   active: active2
-}) => {
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "button",
     {
+      ref,
       type: "button",
       id,
       style: st2,
-      className: `${styles$b["f-tabs__tab"]} ${active2 ? styles$b["active"] : ""} ${className || ""}`,
+      className: `${styles$c["f-tabs__tab"]} ${active2 ? styles$c["active"] : ""} ${className || ""}`,
       disabled: disabled2,
       onClick,
       children
     }
   );
-};
-const styles$a = {
+});
+FTab.displayName = "FTab";
+const styles$b = {
   "f-dropdown": "_f-dropdown_d5i2z_1",
   "f-dropdown__arrow": "_f-dropdown__arrow_d5i2z_6",
   "f-dropdown__content": "_f-dropdown__content_d5i2z_10",
@@ -3578,7 +3582,7 @@ const FDropdown = ({
       return child;
     });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$a["f-dropdown"], ref, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b["f-dropdown"], ref, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       FButton,
       {
@@ -3587,21 +3591,21 @@ const FDropdown = ({
         size,
         disabled: disabled2,
         st: st2,
-        className: `${styles$a["f-dropdown__button"]} ${className || ""}`,
+        className: `${styles$b["f-dropdown__button"]} ${className || ""}`,
         id,
         onClick: () => setIsOpen((v) => !v),
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FStack, { direction: "row", spacing: 2, justifyContent: "center", alignItems: "center", children: [
           label,
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FArrowIcon, { className: styles$a["f-dropdown__arrow"], size: 16, color: "light", direction: isOpen ? "up" : "down" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FArrowIcon, { className: styles$b["f-dropdown__arrow"], size: 16, color: "light", direction: isOpen ? "up" : "down" })
         ] })
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: styles$a["f-dropdown__content"] + (isOpen ? " " + styles$a["f-dropdown__content--open"] : ""),
+        className: styles$b["f-dropdown__content"] + (isOpen ? " " + styles$b["f-dropdown__content--open"] : ""),
         role: "menu",
         children: renderChildren()
       }
@@ -3622,7 +3626,7 @@ const FDropdownItem = ({
     {
       id,
       style: st2,
-      className: `${styles$a["f-dropdown__content-link"]} ${className || ""} ${disabled2 ? styles$a["disabled"] : ""}`,
+      className: `${styles$b["f-dropdown__content-link"]} ${className || ""} ${disabled2 ? styles$b["disabled"] : ""}`,
       onClick: disabled2 ? void 0 : onClick,
       "aria-disabled": disabled2,
       role: "menuitem",
@@ -3630,7 +3634,7 @@ const FDropdownItem = ({
     }
   );
 };
-const styles$9 = {
+const styles$a = {
   "f-search-box": "_f-search-box_1ce2j_1",
   "f-search-box__input": "_f-search-box__input_1ce2j_7",
   "f-search-box__button": "_f-search-box__button_1ce2j_13",
@@ -3656,7 +3660,7 @@ const FSearchBox = forwardRef(
     type,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$9["f-search-box"]} form-group`, style: st2, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$a["f-search-box"]} form-group`, style: st2, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         FTextField,
         {
@@ -3670,14 +3674,14 @@ const FSearchBox = forwardRef(
           errText,
           load,
           ...props,
-          className: `${styles$9["f-search-box__input"]} ${props.className || ""}`
+          className: `${styles$a["f-search-box__input"]} ${props.className || ""}`
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$9["f-search-box__button"], style: { marginTop: label ? "21.8px" : "0" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$a["f-search-box__button"], style: { marginTop: label ? "21.8px" : "0" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           FButton,
           {
-            className: `${styles$9["f-search-box__button_search"]} ${clearDataFromInput ? styles$9["clear-on"] : ""}`,
+            className: `${styles$a["f-search-box__button_search"]} ${clearDataFromInput ? styles$a["clear-on"] : ""}`,
             type: "button",
             disabled: disabled2,
             onClick: onClickButton,
@@ -3689,7 +3693,7 @@ const FSearchBox = forwardRef(
         clearDataFromInput && /* @__PURE__ */ jsxRuntimeExports.jsx(
           FButton,
           {
-            className: `${styles$9["f-search-box__button_clear"]}`,
+            className: `${styles$a["f-search-box__button_clear"]}`,
             type: "button",
             onClick: clearDataFromInput,
             color: "danger",
@@ -3701,7 +3705,7 @@ const FSearchBox = forwardRef(
     ] });
   }
 );
-const styles$8 = {
+const styles$9 = {
   "f-carousel": "_f-carousel_d5w12_1",
   "f-carousel__viewport": "_f-carousel__viewport_d5w12_8",
   "f-carousel__track": "_f-carousel__track_d5w12_12",
@@ -3784,10 +3788,10 @@ const FCarousel = ({
   const handleTouchEnd = () => {
     startX.current = null;
   };
-  const rootClass = [styles$8["f-carousel"], className].filter(Boolean).join(" ");
+  const rootClass = [styles$9["f-carousel"], className].filter(Boolean).join(" ");
   const trackClass = [
-    styles$8["f-carousel__track"],
-    isAnimating ? styles$8["f-carousel__track--animating"] : ""
+    styles$9["f-carousel__track"],
+    isAnimating ? styles$9["f-carousel__track--animating"] : ""
   ].filter(Boolean).join(" ");
   const trackStyle = {
     transform: `translateX(-${100 / itemsCount * current}%)`,
@@ -3798,7 +3802,7 @@ const FCarousel = ({
     showArrows && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        className: `${styles$8["f-carousel__arrow"]} ${styles$8["f-carousel__arrow--left"]}`,
+        className: `${styles$9["f-carousel__arrow"]} ${styles$9["f-carousel__arrow--left"]}`,
         onClick: handlePrev,
         disabled: !loop && current === 0,
         "aria-label": "Назад",
@@ -3808,14 +3812,14 @@ const FCarousel = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: styles$8["f-carousel__viewport"],
+        className: styles$9["f-carousel__viewport"],
         onTouchStart: handleTouchStart,
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: trackRef, className: trackClass, style: trackStyle, children: children.map((child, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: styles$8["f-carousel__item"],
+            className: styles$9["f-carousel__item"],
             style: { width: `${100 / itemsCount}%` },
             children: child
           },
@@ -3826,19 +3830,19 @@ const FCarousel = ({
     showArrows && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        className: `${styles$8["f-carousel__arrow"]} ${styles$8["f-carousel__arrow--right"]}`,
+        className: `${styles$9["f-carousel__arrow"]} ${styles$9["f-carousel__arrow--right"]}`,
         onClick: handleNext,
         disabled: !loop && current >= itemsCount - visibleCount,
         "aria-label": "Вперёд",
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: arrowRight, alt: "Следующий слайд" })
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$8["f-carousel__indicators"], children: Array.from({ length: itemsCount - visibleCount + 1 }).map((_, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$9["f-carousel__indicators"], children: Array.from({ length: itemsCount - visibleCount + 1 }).map((_, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         className: [
-          styles$8["f-carousel__indicator"],
-          idx === current ? styles$8["f-carousel__indicator--active"] : ""
+          styles$9["f-carousel__indicator"],
+          idx === current ? styles$9["f-carousel__indicator--active"] : ""
         ].join(" "),
         onClick: () => setCurrent(idx),
         "aria-label": `Перейти к слайду ${idx + 1}`
@@ -3852,10 +3856,10 @@ const FCarouselItem = ({
   className,
   id
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$8["f-carousel-item"]} ${className || ""}`, id, children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$9["f-carousel-item"]} ${className || ""}`, id, children });
 };
 const skeleton = "_skeleton_1ojrt_1";
-const styles$7 = {
+const styles$8 = {
   "skeleton-block": "_skeleton-block_1ojrt_1",
   skeleton
 };
@@ -3865,7 +3869,7 @@ const FSkeleton = ({ children, enable, width, height }) => {
   const skeletons = useRef([]);
   const createSkeleton = (element) => {
     const skeleton2 = document.createElement("div");
-    skeleton2.className = styles$7.skeleton;
+    skeleton2.className = styles$8.skeleton;
     const computedStyle = window.getComputedStyle(element);
     skeleton2.style.width = width ?? computedStyle.width;
     skeleton2.style.height = height ?? computedStyle.height;
@@ -3912,10 +3916,10 @@ const FSkeleton = ({ children, enable, width, height }) => {
       restoreOriginalElements();
     };
   }, [enable]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: elementRef, className: styles$7["skeleton-block"], children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: elementRef, className: styles$8["skeleton-block"], children });
 };
 const active = "_active_1tib7_71";
-const styles$6 = {
+const styles$7 = {
   "f-nav-bar": "_f-nav-bar_1tib7_1",
   "f-nav-bar__menu": "_f-nav-bar__menu_1tib7_8",
   "f-nav-bar__menu-route": "_f-nav-bar__menu-route_1tib7_31",
@@ -3927,7 +3931,7 @@ const FNavigateBar = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(FGrid, { obj: "container", id, className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FGridRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FGrid, { obj: "item", sm: 12, children: /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { style: st2, className: styles$6["f-nav-bar"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$6["f-nav-bar__menu"], children }) }) }) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FGrid, { obj: "container", id, className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FGridRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FGrid, { obj: "item", sm: 12, children: /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { style: st2, className: styles$7["f-nav-bar"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$7["f-nav-bar__menu"], children }) }) }) }) });
 };
 const FNavigateBarItem = ({
   st: st2,
@@ -3941,14 +3945,14 @@ const FNavigateBarItem = ({
     {
       id,
       style: st2,
-      className: `${styles$6["f-nav-bar__menu-route"]} ${activeClass ? styles$6.active : ""} ${className || ""}`,
+      className: `${styles$7["f-nav-bar__menu-route"]} ${activeClass ? styles$7.active : ""} ${className || ""}`,
       children
     }
   );
 };
 const link = "_link_1desp_10";
 const disabled = "_disabled_1desp_36";
-const styles$5 = {
+const styles$6 = {
   "page-links": "_page-links_1desp_3",
   link,
   disabled
@@ -3957,7 +3961,7 @@ const FMenuLinks = ({ children, className, st: st2, id, disabled: disabled2 = []
   const enhancedChildren = React.Children.map(children, (child, index) => {
     if (React.isValidElement(child)) {
       const isDisabled = disabled2.includes(index);
-      const childClassName = child.props.className ? `${child.props.className} ${styles$5.link} ${isDisabled ? styles$5.disabled : ""}` : `${styles$5.link} ${isDisabled ? styles$5.disabled : ""}`;
+      const childClassName = child.props.className ? `${child.props.className} ${styles$6.link} ${isDisabled ? styles$6.disabled : ""}` : `${styles$6.link} ${isDisabled ? styles$6.disabled : ""}`;
       return React.cloneElement(child, {
         className: childClassName,
         ...isDisabled && { onClick: (e) => e.preventDefault() }
@@ -3968,13 +3972,218 @@ const FMenuLinks = ({ children, className, st: st2, id, disabled: disabled2 = []
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$5["page-links"]} ${className || ""}`,
+      className: `${styles$6["page-links"]} ${className || ""}`,
       style: st2,
       id,
       children: enhancedChildren
     }
   );
 };
+const styles$5 = {
+  "f-tooltip": "_f-tooltip_1d4l5_1",
+  "f-tooltip--open": "_f-tooltip--open_1d4l5_17",
+  "f-tooltip--exiting": "_f-tooltip--exiting_1d4l5_22",
+  "f-tooltip__wrapper": "_f-tooltip__wrapper_1d4l5_27",
+  "f-tooltip__content": "_f-tooltip__content_1d4l5_30",
+  "f-tooltip__arrow": "_f-tooltip__arrow_1d4l5_35",
+  "f-tooltip--top": "_f-tooltip--top_1d4l5_44",
+  "f-tooltip--bottom": "_f-tooltip--bottom_1d4l5_50",
+  "f-tooltip--left": "_f-tooltip--left_1d4l5_56",
+  "f-tooltip--right": "_f-tooltip--right_1d4l5_62",
+  "f-tooltip--with-arrow": "_f-tooltip--with-arrow_1d4l5_104"
+};
+const FTooltip = ({
+  title,
+  children,
+  placement = "bottom",
+  arrow: arrow2 = false,
+  open: openProp,
+  onOpen,
+  onClose,
+  disableHoverListener = false,
+  disableFocusListener = false,
+  disableTouchListener = false,
+  enterDelay = 0,
+  leaveDelay = 0,
+  className = "",
+  style
+}) => {
+  const [open, setOpen] = useState(false);
+  const [mountTooltip, setMountTooltip] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
+  const [tooltipStyles, setTooltipStyles] = useState({});
+  const childRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const enterTimer = useRef(null);
+  const leaveTimer = useRef(null);
+  const animationFrame = useRef(null);
+  const isOpen = openProp !== void 0 ? openProp : open;
+  const handleOpen = () => {
+    if (enterTimer.current) {
+      clearTimeout(enterTimer.current);
+    }
+    if (leaveTimer.current) {
+      clearTimeout(leaveTimer.current);
+    }
+    enterTimer.current = setTimeout(() => {
+      if (openProp === void 0) {
+        setOpen(true);
+      }
+      setMountTooltip(true);
+      setIsExiting(false);
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+      }
+      animationFrame.current = requestAnimationFrame(() => {
+        setIsVisible(true);
+        onOpen == null ? void 0 : onOpen();
+        updatePosition();
+      });
+    }, enterDelay);
+  };
+  const handleClose = () => {
+    if (enterTimer.current) {
+      clearTimeout(enterTimer.current);
+    }
+    if (leaveTimer.current) {
+      clearTimeout(leaveTimer.current);
+    }
+    if (isOpen || isVisible) {
+      if (openProp === void 0) {
+        setOpen(false);
+      }
+      setIsVisible(false);
+      setIsExiting(true);
+      leaveTimer.current = setTimeout(() => {
+        setIsExiting(false);
+        setMountTooltip(false);
+        onClose == null ? void 0 : onClose();
+      }, leaveDelay || 220);
+    }
+  };
+  const updatePosition = () => {
+    if (!childRef.current || !tooltipRef.current) return;
+    const childRect = childRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    let top = 0;
+    let left2 = 0;
+    switch (placement) {
+      case "top":
+        top = childRect.top + scrollY - tooltipRect.height - (arrow2 ? 8 : 0);
+        left2 = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
+        break;
+      case "bottom":
+        top = childRect.bottom + scrollY + (arrow2 ? 8 : 0);
+        left2 = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
+        break;
+      case "left":
+        top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
+        left2 = childRect.left + scrollX - tooltipRect.width - (arrow2 ? 8 : 0);
+        break;
+      case "right":
+        top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
+        left2 = childRect.right + scrollX + (arrow2 ? 8 : 0);
+        break;
+    }
+    setTooltipStyles({
+      top: `${top}px`,
+      left: `${left2}px`
+    });
+  };
+  useEffect(() => {
+    if (isVisible) {
+      updatePosition();
+    }
+  }, [isVisible, placement]);
+  useEffect(() => {
+    const handleResize = () => {
+      if (isVisible) {
+        updatePosition();
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (enterTimer.current) {
+        clearTimeout(enterTimer.current);
+      }
+      if (leaveTimer.current) {
+        clearTimeout(leaveTimer.current);
+      }
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+      }
+    };
+  }, [isVisible]);
+  const childProps = {
+    ref: childRef
+  };
+  if (!disableHoverListener) {
+    childProps.onMouseEnter = (e) => {
+      var _a, _b;
+      handleOpen();
+      (_b = (_a = children.props).onMouseEnter) == null ? void 0 : _b.call(_a, e);
+    };
+    childProps.onMouseLeave = (e) => {
+      var _a, _b;
+      handleClose();
+      (_b = (_a = children.props).onMouseLeave) == null ? void 0 : _b.call(_a, e);
+    };
+  }
+  if (!disableFocusListener) {
+    childProps.onFocus = (e) => {
+      var _a, _b;
+      handleOpen();
+      (_b = (_a = children.props).onFocus) == null ? void 0 : _b.call(_a, e);
+    };
+    childProps.onBlur = (e) => {
+      var _a, _b;
+      handleClose();
+      (_b = (_a = children.props).onBlur) == null ? void 0 : _b.call(_a, e);
+    };
+  }
+  if (!disableTouchListener) {
+    childProps.onTouchStart = (e) => {
+      var _a, _b;
+      handleOpen();
+      (_b = (_a = children.props).onTouchStart) == null ? void 0 : _b.call(_a, e);
+    };
+    childProps.onTouchEnd = (e) => {
+      var _a, _b;
+      handleClose();
+      (_b = (_a = children.props).onTouchEnd) == null ? void 0 : _b.call(_a, e);
+    };
+  }
+  const clonedChild = cloneElement(children, childProps);
+  const tooltipClasses = [
+    styles$5["f-tooltip"],
+    styles$5[`f-tooltip--${placement}`],
+    arrow2 ? styles$5["f-tooltip--with-arrow"] : "",
+    isVisible ? styles$5["f-tooltip--open"] : "",
+    isExiting ? styles$5["f-tooltip--exiting"] : "",
+    className
+  ].filter(Boolean).join(" ");
+  const tooltipElement = mountTooltip && title ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: tooltipRef,
+      className: tooltipClasses,
+      style: { ...style, ...tooltipStyles },
+      role: "tooltip",
+      children: [
+        arrow2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5["f-tooltip__arrow"] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5["f-tooltip__content"], children: title })
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    clonedChild,
+    tooltipElement && createPortal(tooltipElement, document.body)
+  ] });
+};
 const FPlusIcon = ({
   color = "primary",
   size = 30,
@@ -52210,6 +52419,7 @@ export {
   FTextField,
   FTimeline,
   FTimelineCard,
+  FTooltip,
   FTrashIcon,
   FUnlinkIcon,
   fAlert,