fui-material 2.7.11 → 2.7.13

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

@@ -114,7 +114,7 @@ FTrashIcon.displayName = "FTrashIcon";
 const progressBar = "_progressBar_1xp9s_48";
 const completed = "_completed_1xp9s_60";
 const progress = "_progress_1xp9s_48";
-const styles$y = {
+const styles$z = {
   "file-preview-card": "_file-preview-card_1xp9s_1",
   "file-preview-info": "_file-preview-info_1xp9s_22",
   "file-preview-name": "_file-preview-name_1xp9s_28",
@@ -136,18 +136,18 @@ const FFile = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${styles$y["file-preview-card"]} ${className || ""}`,
+      className: `${styles$z["file-preview-card"]} ${className || ""}`,
       id,
       style: st,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$y["file-preview-info"], children: [
-          /* @__PURE__ */ jsx("span", { className: styles$y["file-preview-name"], title: name, children: name }),
-          typeof size === "number" && /* @__PURE__ */ jsxs("span", { className: styles$y["file-preview-size"], children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$z["file-preview-info"], children: [
+          /* @__PURE__ */ jsx("span", { className: styles$z["file-preview-name"], title: name, children: name }),
+          typeof size === "number" && /* @__PURE__ */ jsxs("span", { className: styles$z["file-preview-size"], children: [
             Math.round(size / 1024),
             " КБ"
           ] })
         ] }),
-        handleDelete && /* @__PURE__ */ jsx("div", { className: styles$y["trash-icon"], children: /* @__PURE__ */ jsx(
+        handleDelete && /* @__PURE__ */ jsx("div", { className: styles$z["trash-icon"], children: /* @__PURE__ */ jsx(
           FTrashIcon,
           {
             size: 20,
@@ -155,10 +155,10 @@ const FFile = ({
             handleClick: handleDelete
           }
         ) }),
-        typeof progress2 === "number" && /* @__PURE__ */ jsx("div", { className: `${styles$y.progressBar} ${progress2 === 100 ? styles$y.completed : ""}`, children: /* @__PURE__ */ jsx(
+        typeof progress2 === "number" && /* @__PURE__ */ jsx("div", { className: `${styles$z.progressBar} ${progress2 === 100 ? styles$z.completed : ""}`, children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$y.progress,
+            className: styles$z.progress,
             style: { width: `${progress2}%` }
           }
         ) })
@@ -261,7 +261,7 @@ const FButtonFile = ({
     )) }) })
   ] });
 };
-const styles$x = {
+const styles$y = {
   "f-text-field": "_f-text-field_200bb_1"
 };
 const FLoadIcon = React.forwardRef(({
@@ -340,7 +340,7 @@ const FTextField = forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `f-form-element ${styles$x["f-text-field"]} ${className || ""}`,
+        className: `f-form-element ${styles$y["f-text-field"]} ${className || ""}`,
         style: mergedStyle,
         role: "group",
         id: inputId + "-text-field-block",
@@ -446,7 +446,7 @@ const FStack = ({
     }
   );
 };
-const styles$w = {
+const styles$x = {
   "f-grid": "_f-grid_3g4xh_1",
   "f-grid__col": "_f-grid__col_3g4xh_10",
   "f-grid__col--auto": "_f-grid__col--auto_3g4xh_16",
@@ -549,21 +549,21 @@ const FGrid = ({
     xxl: xxl ?? xl ?? lg ?? md ?? sm ?? xs
   };
   const getColumnClasses = () => {
-    if (colAuto) return styles$w["f-grid__col--auto"];
-    const classes = [styles$w["f-grid__col"]];
-    if (resolvedSizes.xs !== void 0) classes.push(styles$w[`f-grid__col--xs-${resolvedSizes.xs}`]);
-    if (resolvedSizes.sm !== void 0) classes.push(styles$w[`f-grid__col--sm-${resolvedSizes.sm}`]);
-    if (resolvedSizes.md !== void 0) classes.push(styles$w[`f-grid__col--md-${resolvedSizes.md}`]);
-    if (resolvedSizes.lg !== void 0) classes.push(styles$w[`f-grid__col--lg-${resolvedSizes.lg}`]);
-    if (resolvedSizes.xl !== void 0) classes.push(styles$w[`f-grid__col--xl-${resolvedSizes.xl}`]);
-    if (resolvedSizes.xxl !== void 0) classes.push(styles$w[`f-grid__col--xxl-${resolvedSizes.xxl}`]);
+    if (colAuto) return styles$x["f-grid__col--auto"];
+    const classes = [styles$x["f-grid__col"]];
+    if (resolvedSizes.xs !== void 0) classes.push(styles$x[`f-grid__col--xs-${resolvedSizes.xs}`]);
+    if (resolvedSizes.sm !== void 0) classes.push(styles$x[`f-grid__col--sm-${resolvedSizes.sm}`]);
+    if (resolvedSizes.md !== void 0) classes.push(styles$x[`f-grid__col--md-${resolvedSizes.md}`]);
+    if (resolvedSizes.lg !== void 0) classes.push(styles$x[`f-grid__col--lg-${resolvedSizes.lg}`]);
+    if (resolvedSizes.xl !== void 0) classes.push(styles$x[`f-grid__col--xl-${resolvedSizes.xl}`]);
+    if (resolvedSizes.xxl !== void 0) classes.push(styles$x[`f-grid__col--xxl-${resolvedSizes.xxl}`]);
     return classes.join(" ");
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     obj === "container" && /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${styles$w["f-grid"]} ${className || ""}`,
+        className: `${styles$x["f-grid"]} ${className || ""}`,
         style,
         id,
         children
@@ -581,7 +581,7 @@ const FGrid = ({
     obj === void 0 && /* @__PURE__ */ jsx("div", { className, style, id, children })
   ] });
 };
-const styles$v = {
+const styles$w = {
   "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",
@@ -603,21 +603,21 @@ const FGridRow = ({
 }) => {
   const getJustifyContentClass = () => {
     if (!justifyContent) return "";
-    return styles$v[`f-grid-row--justify-${justifyContent}`];
+    return styles$w[`f-grid-row--justify-${justifyContent}`];
   };
   const getAlignItemsClass = () => {
     if (!alignItems) return "";
-    return styles$v[`f-grid-row--align-${alignItems}`];
+    return styles$w[`f-grid-row--align-${alignItems}`];
   };
   const rowClasses = [
-    styles$v["f-grid-row"],
+    styles$w["f-grid-row"],
     getJustifyContentClass(),
     getAlignItemsClass(),
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: rowClasses, style: st, id, children });
 };
-const styles$u = {
+const styles$v = {
   "f-container": "_f-container_g9ck3_1",
   "container-fluid": "_container-fluid_g9ck3_1",
   "container-xxl": "_container-xxl_g9ck3_1",
@@ -637,7 +637,7 @@ const FContainer = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `${styles$u["f-container"]} ${styles$u[maxWidth]} ${className || ""}`,
+      className: `${styles$v["f-container"]} ${styles$v[maxWidth]} ${className || ""}`,
       style: st,
       id,
       children
@@ -645,7 +645,7 @@ const FContainer = ({
   );
 };
 const panel = "_panel_yplsg_1";
-const styles$t = {
+const styles$u = {
   panel,
   "panel-default": "_panel-default_yplsg_6",
   "panel-heading": "_panel-heading_yplsg_12",
@@ -678,15 +678,15 @@ const FPaper = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${styles$t["panel"]} ${styles$t["panel-default"]} ${className || ""} ${animated ? `${styles$t[`animated-${animated.name}`]} ${animated.name}` : ""}`,
+      className: `${styles$u["panel"]} ${styles$u["panel-default"]} ${className || ""} ${animated ? `${styles$u[`animated-${animated.name}`]} ${animated.name}` : ""}`,
       style: st,
       id,
       onAnimationEnd,
       children: [
-        label && /* @__PURE__ */ jsx("div", { className: styles$t["panel-heading"], children: /* @__PURE__ */ jsx(
+        label && /* @__PURE__ */ jsx("div", { className: styles$u["panel-heading"], children: /* @__PURE__ */ jsx(
           "h3",
           {
-            className: styles$t["panel-title"],
+            className: styles$u["panel-title"],
             style: { fontSize: fontSizeLabel },
             children: label
           }
@@ -694,7 +694,7 @@ const FPaper = ({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$t["panel-body"],
+            className: styles$u["panel-body"],
             style: { fontSize: fontSizeBody },
             children
           }
@@ -707,7 +707,7 @@ const bordered = "_bordered_ld5gh_18";
 const left$1 = "_left_ld5gh_40";
 const center = "_center_ld5gh_43";
 const right = "_right_ld5gh_46";
-const styles$s = {
+const styles$t = {
   "f-table-component": "_f-table-component_ld5gh_1",
   "f-table-component__table": "_f-table-component__table_ld5gh_7",
   bordered,
@@ -738,7 +738,7 @@ const FTableHead = ({
     {
       style: st,
       ...props,
-      className: `${styles$s["f-table-component__table_header"]} ${isSticky ? styles$s["is-sticky"] : ""} ${props.className || ""} ${styles$s[textAlignment]}`,
+      className: `${styles$t["f-table-component__table_header"]} ${isSticky ? styles$t["is-sticky"] : ""} ${props.className || ""} ${styles$t[textAlignment]}`,
       children
     }
   );
@@ -831,7 +831,7 @@ const FTableBody = ({
   } else {
     visibleItems = flatChildren;
   }
-  return /* @__PURE__ */ jsxs("tbody", { ref: tableBodyRef, style: st, ...props, className: `${styles$s["f-table-component__table_body"]} ${props.className || ""}  ${styles$s[textAlignment]}`, children: [
+  return /* @__PURE__ */ jsxs("tbody", { ref: tableBodyRef, style: st, ...props, className: `${styles$t["f-table-component__table_body"]} ${props.className || ""}  ${styles$t[textAlignment]}`, children: [
     virtualizationEnabled && rowHeights.some((h) => h > 0) && /* @__PURE__ */ 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__ */ jsx("tr", { style: { height: bottomOffset } })
@@ -874,14 +874,14 @@ const FTable = ({
     "div",
     {
       ref: tableWrapperRef,
-      className: styles$s["f-table-component"],
+      className: styles$t["f-table-component"],
       style: { overflowX, overflowY },
       children: /* @__PURE__ */ jsx(
         "table",
         {
           style: { ...st, tableLayout: layout },
           ...props,
-          className: `table ${styles$s["f-table-component__table"]} ${styles$s["bordered"]} ${styles$s["bordered-half"]} ${props.className || ""}`,
+          className: `table ${styles$t["f-table-component__table"]} ${styles$t["bordered"]} ${styles$t["bordered-half"]} ${props.className || ""}`,
           children: React.Children.map(children, (child) => {
             if (React.isValidElement(child) && child.type === FTableHead) {
               const headProps = child.props;
@@ -919,14 +919,14 @@ const FTableRow = ({
   ...props
 }) => {
   const rowClasses = [
-    styles$s["f-table-component__table_row"],
+    styles$t["f-table-component__table_row"],
     props.className || ""
   ];
   if (disableHover) {
-    rowClasses.push(styles$s["f-table-component__table_row_no-hover"]);
+    rowClasses.push(styles$t["f-table-component__table_row_no-hover"]);
   }
   if (textAlignment !== void 0) {
-    rowClasses.push(styles$s[textAlignment]);
+    rowClasses.push(styles$t[textAlignment]);
   }
   return /* @__PURE__ */ jsx(
     "tr",
@@ -960,7 +960,7 @@ const FTableHeaderCell = ({
       rowSpan: row && row > 1 ? row : void 0,
       colSpan: col && col > 1 ? col : void 0,
       ...props,
-      className: `${styles$s["f-table-component__table_header-cell"]} ${props.className || ""}`,
+      className: `${styles$t["f-table-component__table_header-cell"]} ${props.className || ""}`,
       style,
       children
     }
@@ -988,7 +988,7 @@ const FTableDataCell = ({
       rowSpan: row && row > 1 ? row : void 0,
       colSpan: col && col > 1 ? col : void 0,
       ...props,
-      className: `${styles$s["f-table-component__table_body-cell"]} ${props.className || ""}`,
+      className: `${styles$t["f-table-component__table_body-cell"]} ${props.className || ""}`,
       style,
       children
     }
@@ -1004,25 +1004,27 @@ const FTableFooter = ({
     {
       style: st,
       ...props,
-      className: `${styles$s["f-table-component__table_footer"]} ${props.className || ""}`,
+      className: `${styles$t["f-table-component__table_footer"]} ${props.className || ""}`,
       children
     }
   );
 };
-const active$4 = "_active_16jkc_16";
-const hide = "_hide_16jkc_37";
-const styles$r = {
-  "f-dialog": "_f-dialog_16jkc_1",
-  "active-dialog": "_active-dialog_16jkc_16",
-  "f-dialog__content": "_f-dialog__content_16jkc_20",
-  active: active$4,
+const entering = "_entering_dwagt_17";
+const exiting = "_exiting_dwagt_23";
+const hide = "_hide_dwagt_45";
+const styles$s = {
+  "f-dialog": "_f-dialog_dwagt_1",
+  entering,
+  "f-dialog__content": "_f-dialog__content_dwagt_20",
+  exiting,
   hide,
-  "f-dialog__header": "_f-dialog__header_16jkc_41",
-  "f-dialog__header_title": "_f-dialog__header_title_16jkc_53",
-  "f-dialog__header_close": "_f-dialog__header_close_16jkc_64",
-  "f-dialog__body": "_f-dialog__body_16jkc_79",
-  "f-dialog__footer": "_f-dialog__footer_16jkc_84"
+  "f-dialog__header": "_f-dialog__header_dwagt_49",
+  "f-dialog__header_title": "_f-dialog__header_title_dwagt_61",
+  "f-dialog__header_close": "_f-dialog__header_close_dwagt_72",
+  "f-dialog__body": "_f-dialog__body_dwagt_87",
+  "f-dialog__footer": "_f-dialog__footer_dwagt_92"
 };
+let openDialogsCount = 0;
 const FDialog = ({
   openAndClose,
   closeButtonBackPage,
@@ -1033,22 +1035,55 @@ const FDialog = ({
   st,
   width = "lg"
 }) => {
+  const [isMounted, setIsMounted] = useState(openAndClose);
+  const [isClosing, setIsClosing] = useState(false);
   useEffect(() => {
-    if (!openAndClose) return;
-    const dialogCount = document.querySelectorAll(".active-dialog").length;
-    if (dialogCount > 0) {
-      document.body.classList.add("open-dialog");
-    } else {
-      document.body.classList.remove("open-dialog");
+    if (openAndClose) {
+      setIsMounted(true);
+      setIsClosing(false);
+    } else if (isMounted) {
+      setIsClosing(true);
     }
-    return () => {
-      const updatedCount = document.querySelectorAll(".active-dialog").length;
-      if (updatedCount === 0) {
-        document.body.classList.remove("open-dialog");
-      }
-    };
   }, [openAndClose]);
-  if (!openAndClose) return null;
+  const handleAnimationEnd = (e) => {
+    if (isClosing && e.target === e.currentTarget) {
+      setIsMounted(false);
+      setIsClosing(false);
+    }
+  };
+  useEffect(() => {
+    if (isClosing) {
+      const timer = setTimeout(() => {
+        setIsMounted(false);
+        setIsClosing(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isClosing]);
+  useEffect(() => {
+    if (isMounted && !isClosing) {
+      openDialogsCount += 1;
+      document.body.classList.add("open-dialog");
+      return () => {
+        openDialogsCount = Math.max(0, openDialogsCount - 1);
+        if (openDialogsCount === 0) {
+          document.body.classList.remove("open-dialog");
+        }
+      };
+    }
+  }, [isMounted, isClosing]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Escape" && openAndClose && !isClosing) {
+      closeButtonBackPage == null ? void 0 : closeButtonBackPage(false);
+    }
+  }, [openAndClose, isClosing, closeButtonBackPage]);
+  useEffect(() => {
+    if (isMounted && !isClosing) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isMounted, isClosing, handleKeyDown]);
+  if (!isMounted) return null;
   const widthStyles = {
     xs: "50vw",
     md: "65vw",
@@ -1057,22 +1092,28 @@ const FDialog = ({
     adaptive: "fit-content"
   };
   const contentWidth = widthStyles[width];
+  const animationClass = isClosing ? styles$s["exiting"] : styles$s["entering"];
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsx(
       "div",
       {
         id,
         style: st,
-        className: `${styles$r["f-dialog"]} ${openAndClose ? styles$r["active-dialog"] : ""} ${className || ""}`,
-        onClick: () => closeButtonBackPage == null ? void 0 : closeButtonBackPage(false),
+        className: `${styles$s["f-dialog"]} ${animationClass} ${className || ""}`,
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) {
+            closeButtonBackPage == null ? void 0 : closeButtonBackPage(false);
+          }
+        },
+        onAnimationEnd: handleAnimationEnd,
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles$r["f-dialog__content"]} ${openAndClose ? styles$r["active"] : ""} ${hide2 ? styles$r["hide"] : ""}`,
+            className: `${styles$s["f-dialog__content"]} ${hide2 ? styles$s["hide"] : ""}`,
             style: {
               width: contentWidth
             },
-            onClick: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation(),
             children
           }
         )
@@ -1109,9 +1150,9 @@ const FCloseIcon = React.forwardRef(({
 });
 FCloseIcon.displayName = "FCloseIcon";
 const FDialogHeader = ({ title: title2, handleClose }) => {
-  return /* @__PURE__ */ jsxs("div", { className: styles$r["f-dialog__header"], children: [
-    /* @__PURE__ */ jsx("h3", { className: styles$r["f-dialog__header_title"], children: title2 }),
-    handleClose && /* @__PURE__ */ jsx("div", { className: styles$r["f-dialog__header_close"], children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: styles$s["f-dialog__header"], children: [
+    /* @__PURE__ */ jsx("h3", { className: styles$s["f-dialog__header_title"], children: title2 }),
+    handleClose && /* @__PURE__ */ jsx("div", { className: styles$s["f-dialog__header_close"], children: /* @__PURE__ */ jsx(
       FCloseIcon,
       {
         handleClose,
@@ -1126,7 +1167,7 @@ const FDialogBody = ({ st, children, scroll = true }) => {
     ...scroll ? { overflowY: "auto" } : {},
     ...st
   };
-  return /* @__PURE__ */ jsx("div", { className: styles$r["f-dialog__body"], style, children });
+  return /* @__PURE__ */ jsx("div", { className: styles$s["f-dialog__body"], style, children });
 };
 const FDialogFooter = ({ children, className, st, id }) => {
   return /* @__PURE__ */ jsx(
@@ -1134,7 +1175,7 @@ const FDialogFooter = ({ children, className, st, id }) => {
     {
       id,
       style: st,
-      className: `${styles$r["f-dialog__footer"]} ${className || ""}`,
+      className: `${styles$s["f-dialog__footer"]} ${className || ""}`,
       children
     }
   );
@@ -1149,7 +1190,7 @@ const info$2 = "_info_1lhk7_62";
 const light = "_light_1lhk7_66";
 const dark = "_dark_1lhk7_70";
 const link = "_link_1lhk7_74";
-const styles$q = {
+const styles$r = {
   "authorization-spinner": "_authorization-spinner_1lhk7_1",
   "spinner-item": "_spinner-item_1lhk7_7",
   loader,
@@ -1167,14 +1208,14 @@ const FProgress = ({ st, color = "primary", id, className }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `${styles$q["authorization-spinner"]} ${styles$q.visible} ${className || ""}`,
+      className: `${styles$r["authorization-spinner"]} ${styles$r.visible} ${className || ""}`,
       id,
       style: st,
-      children: /* @__PURE__ */ jsx("div", { className: `${styles$q["spinner-item"]} ${styles$q[color]}` })
+      children: /* @__PURE__ */ jsx("div", { className: `${styles$r["spinner-item"]} ${styles$r[color]}` })
     }
   );
 };
-const styles$p = {
+const styles$q = {
   "f-preloader": "_f-preloader_17f9x_1",
   "active-preloader": "_active-preloader_17f9x_10"
 };
@@ -1201,13 +1242,13 @@ const FPreloader = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `${styles$p["f-preloader"]} ${open ? styles$p["active-preloader"] : ""}`,
+      className: `${styles$q["f-preloader"]} ${open ? styles$q["active-preloader"] : ""}`,
       style: mergedStyle,
       children
     }
   );
 };
-const styles$o = {
+const styles$p = {
   "f-checkbox": "_f-checkbox_9rvqg_1"
 };
 const FCheckbox = forwardRef(
@@ -1220,7 +1261,7 @@ const FCheckbox = forwardRef(
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${styles$o["f-checkbox"]} ${className || ""}`,
+        className: `${styles$p["f-checkbox"]} ${className || ""}`,
         style: st,
         children: /* @__PURE__ */ jsxs("label", { children: [
           /* @__PURE__ */ jsx("input", { ref, type: "checkbox", ...props }),
@@ -1230,7 +1271,7 @@ const FCheckbox = forwardRef(
     );
   }
 );
-const styles$n = {
+const styles$o = {
   "f-radio": "_f-radio_cwhmx_1"
 };
 const FRadioButton = forwardRef(
@@ -1243,7 +1284,7 @@ const FRadioButton = forwardRef(
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${styles$n["f-radio"]} ${className || ""}`,
+        className: `${styles$o["f-radio"]} ${className || ""}`,
         style: st,
         children: /* @__PURE__ */ jsxs("label", { children: [
           /* @__PURE__ */ jsx("input", { ref, type: "radio", ...props }),
@@ -1302,15 +1343,15 @@ const usePagination = ({
 };
 const dots = "_dots_aham2_29";
 const selected$1 = "_selected_aham2_33";
-const disabled$2 = "_disabled_aham2_37";
+const disabled$3 = "_disabled_aham2_37";
 const arrow = "_arrow_aham2_43";
 const left = "_left_aham2_56";
-const styles$m = {
+const styles$n = {
   "pagination-container": "_pagination-container_aham2_1",
   "pagination-item": "_pagination-item_aham2_9",
   dots,
   selected: selected$1,
-  disabled: disabled$2,
+  disabled: disabled$3,
   arrow,
   left
 };
@@ -1339,26 +1380,26 @@ const FPagination = ({
   return /* @__PURE__ */ jsxs(
     "ul",
     {
-      className: `${styles$m["pagination-container"]} ${className || ""}`,
+      className: `${styles$n["pagination-container"]} ${className || ""}`,
       style: st,
       id,
       children: [
         /* @__PURE__ */ jsx(
           "li",
           {
-            className: `${styles$m["pagination-item"]} ${currentPage === 1 ? styles$m.disabled : ""}`,
+            className: `${styles$n["pagination-item"]} ${currentPage === 1 ? styles$n.disabled : ""}`,
             onClick: onPrevious,
-            children: /* @__PURE__ */ jsx("div", { className: `${styles$m.arrow} ${styles$m.left}` })
+            children: /* @__PURE__ */ jsx("div", { className: `${styles$n.arrow} ${styles$n.left}` })
           }
         ),
         paginationRange.map((pageNumber, index) => {
           if (pageNumber === DOTS) {
-            return /* @__PURE__ */ jsx("li", { className: `${styles$m["pagination-item"]} ${styles$m.dots}`, children: "…" }, index);
+            return /* @__PURE__ */ jsx("li", { className: `${styles$n["pagination-item"]} ${styles$n.dots}`, children: "…" }, index);
           }
           return /* @__PURE__ */ jsx(
             "li",
             {
-              className: `${styles$m["pagination-item"]} ${pageNumber === currentPage ? styles$m.selected : ""}`,
+              className: `${styles$n["pagination-item"]} ${pageNumber === currentPage ? styles$n.selected : ""}`,
               onClick: () => onPageChange(pageNumber),
               children: pageNumber
             },
@@ -1368,16 +1409,16 @@ const FPagination = ({
         /* @__PURE__ */ jsx(
           "li",
           {
-            className: `${styles$m["pagination-item"]} ${currentPage === lastPage ? styles$m.disabled : ""}`,
+            className: `${styles$n["pagination-item"]} ${currentPage === lastPage ? styles$n.disabled : ""}`,
             onClick: onNext,
-            children: /* @__PURE__ */ jsx("div", { className: `${styles$m.arrow} ${styles$m.right}` })
+            children: /* @__PURE__ */ jsx("div", { className: `${styles$n.arrow} ${styles$n.right}` })
           }
         )
       ]
     }
   );
 };
-const styles$l = {
+const styles$m = {
   "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",
@@ -1391,7 +1432,7 @@ const FTimeline = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: `${styles$l["f-time-line"]} ${className || ""}`, style: st, id, children });
+  return /* @__PURE__ */ jsx("div", { className: `${styles$m["f-time-line"]} ${className || ""}`, style: st, id, children });
 };
 const FTimelineCard = ({
   children,
@@ -1400,17 +1441,17 @@ const FTimelineCard = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles$l["f-time-line__block"]} ${className || ""}`, id, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$l["f-time-line__block-circle"] }),
-    /* @__PURE__ */ jsxs("div", { className: styles$l["f-time-line__block-inner"], style: st, children: [
-      title2 && /* @__PURE__ */ jsx("div", { className: styles$l["f-time-line__block-title"], children: title2 }),
-      /* @__PURE__ */ jsx("div", { className: styles$l["f-time-line__block-content"], children })
+  return /* @__PURE__ */ jsxs("div", { className: `${styles$m["f-time-line__block"]} ${className || ""}`, id, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$m["f-time-line__block-circle"] }),
+    /* @__PURE__ */ jsxs("div", { className: styles$m["f-time-line__block-inner"], style: st, children: [
+      title2 && /* @__PURE__ */ jsx("div", { className: styles$m["f-time-line__block-title"], children: title2 }),
+      /* @__PURE__ */ jsx("div", { className: styles$m["f-time-line__block-content"], children })
     ] })
   ] });
 };
 const spinner = "_spinner_f7bma_133";
-const active$3 = "_active_f7bma_183";
-const styles$k = {
+const active$4 = "_active_f7bma_183";
+const styles$l = {
   "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",
@@ -1424,7 +1465,7 @@ const styles$k = {
   "error-message": "_error-message_f7bma_147",
   "progress-indicator": "_progress-indicator_f7bma_158",
   "progress-dot": "_progress-dot_f7bma_172",
-  active: active$3
+  active: active$4
 };
 const FArrowIcon = React.forwardRef(({
   color = "primary",
@@ -1549,10 +1590,10 @@ const FOpenImgFull = ({
     {
       openAndClose,
       st,
-      className: `${styles$k["fv-opn-img-full"]} ${className || ""}`,
+      className: `${styles$l["fv-opn-img-full"]} ${className || ""}`,
       id,
-      children: /* @__PURE__ */ jsxs("div", { className: styles$k["fv-opn-img-full-body"], children: [
-        /* @__PURE__ */ jsx("div", { className: styles$k["close-button"], children: handleClose && /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs("div", { className: styles$l["fv-opn-img-full-body"], children: [
+        /* @__PURE__ */ jsx("div", { className: styles$l["close-button"], children: handleClose && /* @__PURE__ */ jsx(
           FCloseIcon,
           {
             handleClose: () => {
@@ -1564,21 +1605,21 @@ const FOpenImgFull = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: styles$k["image-container"],
+            className: styles$l["image-container"],
             onTouchStart: handleTouchStart,
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
             children: [
-              selectedImg > 0 && /* @__PURE__ */ jsx("div", { className: styles$k["arrow-left"], children: /* @__PURE__ */ jsx(
+              selectedImg > 0 && /* @__PURE__ */ jsx("div", { className: styles$l["arrow-left"], children: /* @__PURE__ */ jsx(
                 FArrowIcon,
                 {
                   direction: "left",
                   handleClick: () => setSelectedImg(selectedImg - 1)
                 }
               ) }),
-              /* @__PURE__ */ jsxs("div", { className: styles$k["image-wrapper"], children: [
-                isLoading && /* @__PURE__ */ jsx("div", { className: styles$k["loading-spinner"], children: /* @__PURE__ */ jsx("div", { className: styles$k["spinner"] }) }),
-                error2 ? /* @__PURE__ */ jsx("div", { className: styles$k["error-message"], children: "Ошибка загрузки изображения" }) : /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs("div", { className: styles$l["image-wrapper"], children: [
+                isLoading && /* @__PURE__ */ jsx("div", { className: styles$l["loading-spinner"], children: /* @__PURE__ */ jsx("div", { className: styles$l["spinner"] }) }),
+                error2 ? /* @__PURE__ */ jsx("div", { className: styles$l["error-message"], children: "Ошибка загрузки изображения" }) : /* @__PURE__ */ jsx(
                   "img",
                   {
                     src: imagesUrl[selectedImg],
@@ -1588,7 +1629,7 @@ const FOpenImgFull = ({
                       setError(true);
                       setIsLoading(false);
                     },
-                    className: styles$k["full-image"],
+                    className: styles$l["full-image"],
                     onClick: handleImageClick,
                     style: {
                       cursor: "zoom-in",
@@ -1598,7 +1639,7 @@ const FOpenImgFull = ({
                   }
                 )
               ] }),
-              selectedImg < imagesUrl.length - 1 && /* @__PURE__ */ jsx("div", { className: styles$k["arrow-right"], children: /* @__PURE__ */ jsx(
+              selectedImg < imagesUrl.length - 1 && /* @__PURE__ */ jsx("div", { className: styles$l["arrow-right"], children: /* @__PURE__ */ jsx(
                 FArrowIcon,
                 {
                   direction: "right",
@@ -1608,10 +1649,10 @@ const FOpenImgFull = ({
             ]
           }
         ),
-        imagesUrl.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$k["progress-indicator"], children: imagesUrl.map((_, index) => /* @__PURE__ */ jsx(
+        imagesUrl.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$l["progress-indicator"], children: imagesUrl.map((_, index) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles$k["progress-dot"]} ${index === selectedImg ? styles$k["active"] : ""}`,
+            className: `${styles$l["progress-dot"]} ${index === selectedImg ? styles$l["active"] : ""}`,
             onClick: () => setSelectedImg(index)
           },
           index
@@ -1624,7 +1665,7 @@ const card$2 = "_card_1pttw_1";
 const warning$3 = "_warning_1pttw_16";
 const info$1 = "_info_1pttw_24";
 const alert = "_alert_1pttw_32";
-const styles$j = {
+const styles$k = {
   card: card$2,
   warning: warning$3,
   info: info$1,
@@ -1652,16 +1693,16 @@ const FAccordion = ({
     "div",
     {
       onClick,
-      className: `${styles$j.card} ${className || ""}`,
+      className: `${styles$k.card} ${className || ""}`,
       id,
       children: /* @__PURE__ */ jsxs(
         "details",
         {
-          className: styles$j[variant],
+          className: styles$k[variant],
           open: isOpen,
           style: st,
           children: [
-            /* @__PURE__ */ jsx("summary", { className: styles$j["fv-accord-title"], children: title2 }),
+            /* @__PURE__ */ jsx("summary", { className: styles$k["fv-accord-title"], children: title2 }),
             children
           ]
         }
@@ -1670,7 +1711,7 @@ const FAccordion = ({
   );
 };
 const container$1 = "_container_6r9j2_1";
-const styles$i = {
+const styles$j = {
   container: container$1,
   "custom-file": "_custom-file_6r9j2_6",
   "custom-file-input": "_custom-file-input_6r9j2_9",
@@ -1800,11 +1841,11 @@ const FInputFileForm = ({
       setUploadProgress({});
     }
   }, [deleteFile]);
-  return /* @__PURE__ */ jsxs("div", { className: styles$i.container, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$j.container, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `${styles$i["custom-file"]} ${styles$i["custom-file-dropzone"]} ${isDragging ? styles$i.dragging : ""}`,
+        className: `${styles$j["custom-file"]} ${styles$j["custom-file-dropzone"]} ${isDragging ? styles$j.dragging : ""}`,
         style: st,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
@@ -1816,7 +1857,7 @@ const FInputFileForm = ({
               required,
               accept,
               type: "file",
-              className: `${styles$i["custom-file-input"]} ${className || ""}`,
+              className: `${styles$j["custom-file-input"]} ${className || ""}`,
               name,
               id,
               title: title2,
@@ -1827,7 +1868,7 @@ const FInputFileForm = ({
               ref: inputRef
             }
           ),
-          /* @__PURE__ */ jsxs("label", { htmlFor: id, className: styles$i["custom-file-label"], style: disabled2 ? { backgroundColor: "#F3F3F3", border: "1px dashed #C4C4C4" } : void 0, children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: id, className: styles$j["custom-file-label"], style: disabled2 ? { backgroundColor: "#F3F3F3", border: "1px dashed #C4C4C4" } : void 0, children: [
             /* @__PURE__ */ jsxs("svg", { width: "30", height: "30", fill: "currentColor", viewBox: "0 0 16 16", children: [
               /* @__PURE__ */ jsx("path", { "fill-rule": "evenodd", d: "M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z" }),
               /* @__PURE__ */ jsx("path", { d: "M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" })
@@ -1853,8 +1894,8 @@ const FInputFileForm = ({
         ]
       }
     ),
-    errors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$i.errors, children: errors.map((error2, index) => /* @__PURE__ */ jsx("div", { className: styles$i.error, children: error2 }, index)) }),
-    showPreview && selectedFiles.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$i["custom-files-preview"], children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx("div", { className: styles$i.fileItem, children: /* @__PURE__ */ jsx(
+    errors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$j.errors, children: errors.map((error2, index) => /* @__PURE__ */ jsx("div", { className: styles$j.error, children: error2 }, index)) }),
+    showPreview && selectedFiles.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$j["custom-files-preview"], children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx("div", { className: styles$j.fileItem, children: /* @__PURE__ */ jsx(
       FFile,
       {
         name: file.name,
@@ -1865,7 +1906,7 @@ const FInputFileForm = ({
     ) }, index)) })
   ] });
 };
-const styles$h = {
+const styles$i = {
   "f-select": "_f-select_1n6ag_1",
   "f-select__control-element": "_f-select__control-element_1n6ag_5"
 };
@@ -1895,7 +1936,7 @@ const FSelect = forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `f-form-element ${styles$h["f-select"]}`,
+        className: `f-form-element ${styles$i["f-select"]}`,
         style: mergedStyle,
         id: inputId + "-select-block",
         role: "group",
@@ -1920,7 +1961,7 @@ const FSelect = forwardRef(
                 ...props,
                 id: inputId,
                 disabled: props.disabled || load,
-                className: `f-form-element__control-element ${styles$h["f-select__control-element"]} ${errText ? "error" : ""} ${props.className || ""}`,
+                className: `f-form-element__control-element ${styles$i["f-select__control-element"]} ${errText ? "error" : ""} ${props.className || ""}`,
                 children: !load && children
               }
             ),
@@ -2015,14 +2056,14 @@ const FFullDateField = forwardRef(
     );
   }
 );
-const active$2 = "_active_yhck3_41";
-const styles$g = {
+const active$3 = "_active_yhck3_41";
+const styles$h = {
   "f-select-search-db": "_f-select-search-db_yhck3_1",
   "f-select-search-db__input": "_f-select-search-db__input_yhck3_7",
   "f-select-search-db__input_field": "_f-select-search-db__input_field_yhck3_11",
   "f-select-search-db__input_arrow": "_f-select-search-db__input_arrow_yhck3_14",
   "f-select-search-db__dropdown": "_f-select-search-db__dropdown_yhck3_21",
-  active: active$2,
+  active: active$3,
   "f-select-search-db__dropdown_content": "_f-select-search-db__dropdown_content_yhck3_45"
 };
 const FSelectSearchDb = ({
@@ -2200,12 +2241,12 @@ const FSelectSearchDb = ({
     "div",
     {
       ref: containerRef,
-      className: `${styles$g["f-select-search-db"]} ${className || ""}`,
+      className: `${styles$h["f-select-search-db"]} ${className || ""}`,
       style: st,
       id,
       "data-position": dropdownPosition,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$g["f-select-search-db__input"], children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$h["f-select-search-db__input"], children: [
           /* @__PURE__ */ jsx(
             FTextField,
             {
@@ -2216,7 +2257,7 @@ const FSelectSearchDb = ({
               label,
               type,
               placeholder,
-              className: styles$g["f-select-search-db__input_field"],
+              className: styles$h["f-select-search-db__input_field"],
               value: valueInput,
               onChange: handlerOnChange,
               onFocus,
@@ -2233,7 +2274,7 @@ const FSelectSearchDb = ({
           !load && !disabled2 && arrObject.length > 0 && /* @__PURE__ */ jsx(
             "div",
             {
-              className: styles$g["f-select-search-db__input_arrow"],
+              className: styles$h["f-select-search-db__input_arrow"],
               style: { marginTop: label ? "28px" : "7px" },
               onClick: handleArrowClick,
               children: /* @__PURE__ */ jsx(FArrowIcon, { direction: isDropdownOpen ? "up" : "down", size: 15 })
@@ -2245,8 +2286,8 @@ const FSelectSearchDb = ({
             "div",
             {
               ref: dropdownRef,
-              className: `${styles$g["f-select-search-db__dropdown"]} ${isDropdownOpen ? styles$g.active : ""}`,
-              children: arrObject.length === 0 && valueInput.trim() === "" ? /* @__PURE__ */ jsx("li", { children: "Введите текст" }) : arrObject.length === 0 && valueInput.trim() !== "" && !load ? /* @__PURE__ */ jsx("li", { children: "Ничего не найдено" }) : /* @__PURE__ */ jsx("ul", { className: styles$g["f-select-search-db__dropdown_content"], children: arrObject.slice(0, 10).map((opt, index) => /* @__PURE__ */ jsx("li", { onMouseDown: () => handleItemClick(opt), children: selectItem(opt) }, index)) })
+              className: `${styles$h["f-select-search-db__dropdown"]} ${isDropdownOpen ? styles$h.active : ""}`,
+              children: arrObject.length === 0 && valueInput.trim() === "" ? /* @__PURE__ */ jsx("li", { children: "Введите текст" }) : arrObject.length === 0 && valueInput.trim() !== "" && !load ? /* @__PURE__ */ jsx("li", { children: "Ничего не найдено" }) : /* @__PURE__ */ jsx("ul", { className: styles$h["f-select-search-db__dropdown_content"], children: arrObject.slice(0, 10).map((opt, index) => /* @__PURE__ */ jsx("li", { onMouseDown: () => handleItemClick(opt), children: selectItem(opt) }, index)) })
             }
           ),
           dropdownPortalRef.current
@@ -2255,7 +2296,7 @@ const FSelectSearchDb = ({
     }
   );
 };
-const styles$f = {
+const styles$g = {
   "f-text-area": "_f-text-area_1ywhr_1"
 };
 const FTextArea = forwardRef(
@@ -2284,7 +2325,7 @@ const FTextArea = forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `f-form-element ${styles$f["f-text-area"]} ${className || ""}`,
+        className: `f-form-element ${styles$g["f-text-area"]} ${className || ""}`,
         style: mergedStyle,
         role: "group",
         id: areaId + "-text-area-block",
@@ -2656,13 +2697,13 @@ const FNative = ({
 };
 const horizontal = "_horizontal_zlvc7_1";
 const vertical = "_vertical_zlvc7_7";
-const active$1 = "_active_zlvc7_50";
-const styles$e = {
+const active$2 = "_active_zlvc7_50";
+const styles$f = {
   "f-tabs": "_f-tabs_zlvc7_1",
   horizontal,
   vertical,
   "f-tabs__tab": "_f-tabs__tab_zlvc7_16",
-  active: active$1
+  active: active$2
 };
 const FTabs = ({
   children,
@@ -2676,7 +2717,7 @@ const FTabs = ({
     {
       id,
       style: st,
-      className: `${styles$e["f-tabs"]} ${styles$e[orientation]} ${className || ""}`,
+      className: `${styles$f["f-tabs"]} ${styles$f[orientation]} ${className || ""}`,
       children
     }
   );
@@ -2693,20 +2734,20 @@ const FTab = forwardRef(({
       ref,
       type: "button",
       style: st,
-      className: `${styles$e["f-tabs__tab"]} ${active2 ? styles$e["active"] : ""} ${props.className || ""}`,
+      className: `${styles$f["f-tabs__tab"]} ${active2 ? styles$f["active"] : ""} ${props.className || ""}`,
       ...props,
       children
     }
   );
 });
 FTab.displayName = "FTab";
-const disabled$1 = "_disabled_2ty2i_40";
-const styles$d = {
+const disabled$2 = "_disabled_2ty2i_40";
+const styles$e = {
   "f-dropdown": "_f-dropdown_2ty2i_1",
   "f-dropdown__arrow": "_f-dropdown__arrow_2ty2i_6",
   "f-dropdown__content": "_f-dropdown__content_2ty2i_10",
   "f-dropdown__content-link": "_f-dropdown__content-link_2ty2i_28",
-  disabled: disabled$1,
+  disabled: disabled$2,
   "f-dropdown__content--open": "_f-dropdown__content--open_2ty2i_48"
 };
 const FDropdown = forwardRef(({
@@ -2751,7 +2792,7 @@ const FDropdown = forwardRef(({
       return child;
     });
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$d["f-dropdown"], ref, ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$e["f-dropdown"], ref, ...props, children: [
     /* @__PURE__ */ jsx(
       FButton,
       {
@@ -2760,21 +2801,21 @@ const FDropdown = forwardRef(({
         size,
         disabled: disabled2,
         st,
-        className: `${styles$d["f-dropdown__button"]} ${className || ""}`,
+        className: `${styles$e["f-dropdown__button"]} ${className || ""}`,
         id,
         onClick: () => setIsOpen((v) => !v),
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         children: /* @__PURE__ */ jsxs(FStack, { direction: "row", spacing: 2, justifyContent: "center", alignItems: "center", children: [
           label,
-          /* @__PURE__ */ jsx(FArrowIcon, { className: styles$d["f-dropdown__arrow"], size: 16, color: "light", direction: isOpen ? "up" : "down" })
+          /* @__PURE__ */ jsx(FArrowIcon, { className: styles$e["f-dropdown__arrow"], size: 16, color: "light", direction: isOpen ? "up" : "down" })
         ] })
       }
     ),
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: styles$d["f-dropdown__content"] + (isOpen ? " " + styles$d["f-dropdown__content--open"] : ""),
+        className: styles$e["f-dropdown__content"] + (isOpen ? " " + styles$e["f-dropdown__content--open"] : ""),
         role: "menu",
         children: renderChildren()
       }
@@ -2795,7 +2836,7 @@ const FDropdownItem = ({
     {
       id,
       style: st,
-      className: `${styles$d["f-dropdown__content-link"]} ${className || ""} ${disabled2 ? styles$d["disabled"] : ""}`,
+      className: `${styles$e["f-dropdown__content-link"]} ${className || ""} ${disabled2 ? styles$e["disabled"] : ""}`,
       onClick: disabled2 ? void 0 : onClick,
       "aria-disabled": disabled2,
       role: "menuitem",
@@ -2803,7 +2844,7 @@ const FDropdownItem = ({
     }
   );
 };
-const styles$c = {
+const styles$d = {
   "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",
@@ -2829,7 +2870,7 @@ const FSearchBox = forwardRef(
     type,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { className: `${styles$c["f-search-box"]} form-group`, style: st, children: [
+    return /* @__PURE__ */ jsxs("div", { className: `${styles$d["f-search-box"]} form-group`, style: st, children: [
       /* @__PURE__ */ jsx(
         FTextField,
         {
@@ -2843,14 +2884,14 @@ const FSearchBox = forwardRef(
           errText: typeof errText === "string" ? [errText] : errText,
           load,
           ...props,
-          className: `${styles$c["f-search-box__input"]} ${props.className || ""}`
+          className: `${styles$d["f-search-box__input"]} ${props.className || ""}`
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: styles$c["f-search-box__button"], style: { marginTop: label ? "21.8px" : "0" }, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$d["f-search-box__button"], style: { marginTop: label ? "21.8px" : "0" }, children: [
         /* @__PURE__ */ jsx(
           FButton,
           {
-            className: `${styles$c["f-search-box__button_search"]} ${clearDataFromInput ? styles$c["clear-on"] : ""}`,
+            className: `${styles$d["f-search-box__button_search"]} ${clearDataFromInput ? styles$d["clear-on"] : ""}`,
             type: "button",
             disabled: disabled2,
             onClick: onClickButton,
@@ -2862,7 +2903,7 @@ const FSearchBox = forwardRef(
         clearDataFromInput && /* @__PURE__ */ jsx(
           FButton,
           {
-            className: `${styles$c["f-search-box__button_clear"]}`,
+            className: `${styles$d["f-search-box__button_clear"]}`,
             type: "button",
             disabled: disabled2,
             onClick: clearDataFromInput,
@@ -2875,7 +2916,7 @@ const FSearchBox = forwardRef(
     ] });
   }
 );
-const styles$b = {
+const styles$c = {
   "f-carousel": "_f-carousel_d5w12_1",
   "f-carousel__viewport": "_f-carousel__viewport_d5w12_8",
   "f-carousel__track": "_f-carousel__track_d5w12_12",
@@ -2958,10 +2999,10 @@ const FCarousel = ({
   const handleTouchEnd = () => {
     startX.current = null;
   };
-  const rootClass = [styles$b["f-carousel"], className].filter(Boolean).join(" ");
+  const rootClass = [styles$c["f-carousel"], className].filter(Boolean).join(" ");
   const trackClass = [
-    styles$b["f-carousel__track"],
-    isAnimating ? styles$b["f-carousel__track--animating"] : ""
+    styles$c["f-carousel__track"],
+    isAnimating ? styles$c["f-carousel__track--animating"] : ""
   ].filter(Boolean).join(" ");
   const trackStyle = {
     transform: `translateX(-${100 / itemsCount * current}%)`,
@@ -2972,7 +3013,7 @@ const FCarousel = ({
     showArrows && /* @__PURE__ */ jsx(
       "button",
       {
-        className: `${styles$b["f-carousel__arrow"]} ${styles$b["f-carousel__arrow--left"]}`,
+        className: `${styles$c["f-carousel__arrow"]} ${styles$c["f-carousel__arrow--left"]}`,
         onClick: handlePrev,
         disabled: !loop && current === 0,
         "aria-label": "Назад",
@@ -2982,14 +3023,14 @@ const FCarousel = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: styles$b["f-carousel__viewport"],
+        className: styles$c["f-carousel__viewport"],
         onTouchStart: handleTouchStart,
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
         children: /* @__PURE__ */ jsx("div", { ref: trackRef, className: trackClass, style: trackStyle, children: children.map((child, idx) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$b["f-carousel__item"],
+            className: styles$c["f-carousel__item"],
             style: { width: `${100 / itemsCount}%` },
             children: child
           },
@@ -3000,19 +3041,19 @@ const FCarousel = ({
     showArrows && /* @__PURE__ */ jsx(
       "button",
       {
-        className: `${styles$b["f-carousel__arrow"]} ${styles$b["f-carousel__arrow--right"]}`,
+        className: `${styles$c["f-carousel__arrow"]} ${styles$c["f-carousel__arrow--right"]}`,
         onClick: handleNext,
         disabled: !loop && current >= itemsCount - visibleCount,
         "aria-label": "Вперёд",
         children: /* @__PURE__ */ jsx("img", { src: arrowRight, alt: "Следующий слайд" })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: styles$b["f-carousel__indicators"], children: Array.from({ length: itemsCount - visibleCount + 1 }).map((_, idx) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$c["f-carousel__indicators"], children: Array.from({ length: itemsCount - visibleCount + 1 }).map((_, idx) => /* @__PURE__ */ jsx(
       "button",
       {
         className: [
-          styles$b["f-carousel__indicator"],
-          idx === current ? styles$b["f-carousel__indicator--active"] : ""
+          styles$c["f-carousel__indicator"],
+          idx === current ? styles$c["f-carousel__indicator--active"] : ""
         ].join(" "),
         onClick: () => setCurrent(idx),
         "aria-label": `Перейти к слайду ${idx + 1}`
@@ -3026,10 +3067,10 @@ const FCarouselItem = ({
   className,
   id
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: `${styles$b["f-carousel-item"]} ${className || ""}`, id, children });
+  return /* @__PURE__ */ jsx("div", { className: `${styles$c["f-carousel-item"]} ${className || ""}`, id, children });
 };
 const skeleton = "_skeleton_1ojrt_1";
-const styles$a = {
+const styles$b = {
   "skeleton-block": "_skeleton-block_1ojrt_1",
   skeleton
 };
@@ -3039,7 +3080,7 @@ const FSkeleton = ({ children, enable, width, height }) => {
   const skeletons = useRef([]);
   const createSkeleton = (element) => {
     const skeleton2 = document.createElement("div");
-    skeleton2.className = styles$a.skeleton;
+    skeleton2.className = styles$b.skeleton;
     const computedStyle = window.getComputedStyle(element);
     skeleton2.style.width = width ?? computedStyle.width;
     skeleton2.style.height = height ?? computedStyle.height;
@@ -3086,16 +3127,16 @@ const FSkeleton = ({ children, enable, width, height }) => {
       restoreOriginalElements();
     };
   }, [enable]);
-  return /* @__PURE__ */ jsx("div", { ref: elementRef, className: styles$a["skeleton-block"], children });
+  return /* @__PURE__ */ jsx("div", { ref: elementRef, className: styles$b["skeleton-block"], children });
 };
-const active = "_active_lv3xi_122";
-const styles$9 = {
+const active$1 = "_active_lv3xi_122";
+const styles$a = {
   "wave-nav-wrapper": "_wave-nav-wrapper_lv3xi_5",
   "wave-nav-grid-item": "_wave-nav-grid-item_lv3xi_17",
   "wave-nav-bar": "_wave-nav-bar_lv3xi_27",
   "wave-nav-list": "_wave-nav-list_lv3xi_48",
   "wave-nav-item": "_wave-nav-item_lv3xi_75",
-  active
+  active: active$1
 };
 const FNavigateBar = ({
   st,
@@ -3103,7 +3144,7 @@ const FNavigateBar = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsx(FGrid, { obj: "container", id, className: `${styles$9["wave-nav-wrapper"]} ${className || ""}`, children: /* @__PURE__ */ jsx(FGridRow, { children: /* @__PURE__ */ jsx(FGrid, { obj: "item", sm: 12, className: styles$9["wave-nav-grid-item"], children: /* @__PURE__ */ jsx("nav", { style: st, className: styles$9["wave-nav-bar"], children: /* @__PURE__ */ jsx("ul", { className: styles$9["wave-nav-list"], children }) }) }) }) });
+  return /* @__PURE__ */ jsx(FGrid, { obj: "container", id, className: `${styles$a["wave-nav-wrapper"]} ${className || ""}`, children: /* @__PURE__ */ jsx(FGridRow, { children: /* @__PURE__ */ jsx(FGrid, { obj: "item", sm: 12, className: styles$a["wave-nav-grid-item"], children: /* @__PURE__ */ jsx("nav", { style: st, className: styles$a["wave-nav-bar"], children: /* @__PURE__ */ jsx("ul", { className: styles$a["wave-nav-list"], children }) }) }) }) });
 };
 const FNavigateBarItem = ({
   st,
@@ -3119,7 +3160,7 @@ const FNavigateBarItem = ({
     {
       id,
       style: st || style,
-      className: `${styles$9["wave-nav-item"]} ${activeClass ? styles$9.active : ""} ${className || ""}`,
+      className: `${styles$a["wave-nav-item"]} ${activeClass ? styles$a.active : ""} ${className || ""}`,
       ...rest,
       children
     }
@@ -3134,8 +3175,8 @@ const countBadge = "_countBadge_14i30_114";
 const linksList = "_linksList_14i30_124";
 const linkItem = "_linkItem_14i30_131";
 const badge = "_badge_14i30_172";
-const disabled = "_disabled_14i30_197";
-const styles$8 = {
+const disabled$1 = "_disabled_14i30_197";
+const styles$9 = {
   reportsPageContainer,
   searchBar,
   reportsGrid,
@@ -3145,7 +3186,7 @@ const styles$8 = {
   linksList,
   linkItem,
   badge,
-  disabled
+  disabled: disabled$1
 };
 const MenuSearchContext = createContext("");
 const FMenuBlockLinks = ({
@@ -3161,8 +3202,8 @@ const FMenuBlockLinks = ({
     ...columns ? { "--cols": columns } : {},
     ...st
   };
-  return /* @__PURE__ */ jsxs("div", { className: `${styles$8.reportsPageContainer} ${className ?? ""}`.trim(), id, children: [
-    withSearch && /* @__PURE__ */ jsx("div", { className: styles$8.searchBar, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: `${styles$9.reportsPageContainer} ${className ?? ""}`.trim(), id, children: [
+    withSearch && /* @__PURE__ */ jsx("div", { className: styles$9.searchBar, children: /* @__PURE__ */ jsx(
       "input",
       {
         type: "text",
@@ -3171,7 +3212,7 @@ const FMenuBlockLinks = ({
         onChange: (e) => setSearchValue(e.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx(MenuSearchContext.Provider, { value: searchValue, children: /* @__PURE__ */ jsx("div", { className: styles$8.reportsGrid, style: layoutStyle, children }) })
+    /* @__PURE__ */ jsx(MenuSearchContext.Provider, { value: searchValue, children: /* @__PURE__ */ jsx("div", { className: styles$9.reportsGrid, style: layoutStyle, children }) })
   ] });
 };
 const getElementText = (node) => {
@@ -3207,11 +3248,11 @@ const FMenuLinks = ({
     const badgeText = badges[originalIndex] || child.props["data-badge"];
     const childClass = [
       child.props.className,
-      styles$8.linkItem,
-      isDisabled ? styles$8.disabled : ""
+      styles$9.linkItem,
+      isDisabled ? styles$9.disabled : ""
     ].filter(Boolean).join(" ");
     const innerContent = badgeText ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: styles$8.badge, children: badgeText }),
+      /* @__PURE__ */ jsx("span", { className: styles$9.badge, children: badgeText }),
       child.props.children
     ] }) : child.props.children;
     return React.cloneElement(child, {
@@ -3224,15 +3265,15 @@ const FMenuLinks = ({
       }
     });
   });
-  return /* @__PURE__ */ jsxs("div", { className: `${styles$8.card} ${className ?? ""}`.trim(), style: st, id, children: [
-    title2 && /* @__PURE__ */ jsxs("div", { className: styles$8.cardHeader, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `${styles$9.card} ${className ?? ""}`.trim(), style: st, id, children: [
+    title2 && /* @__PURE__ */ jsxs("div", { className: styles$9.cardHeader, children: [
       /* @__PURE__ */ jsx("h3", { children: title2 }),
-      /* @__PURE__ */ jsx("span", { className: styles$8.countBadge, children: filteredChildren.length })
+      /* @__PURE__ */ jsx("span", { className: styles$9.countBadge, children: filteredChildren.length })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: styles$8.linksList, children: enhancedChildren })
+    /* @__PURE__ */ jsx("div", { className: styles$9.linksList, children: enhancedChildren })
   ] });
 };
-const styles$7 = {
+const styles$8 = {
   "f-tooltip": "_f-tooltip_xpnbo_1",
   "f-tooltip--open": "_f-tooltip--open_xpnbo_17",
   "f-tooltip--exiting": "_f-tooltip--exiting_xpnbo_22",
@@ -3421,11 +3462,11 @@ const FTooltip = ({
     wrappedChild = cloneElement(children, childProps);
   }
   const tooltipClasses = [
-    styles$7["f-tooltip"],
-    styles$7[`f-tooltip--${placement}`],
-    arrow2 ? styles$7["f-tooltip--with-arrow"] : "",
-    isVisible ? styles$7["f-tooltip--open"] : "",
-    isExiting ? styles$7["f-tooltip--exiting"] : "",
+    styles$8["f-tooltip"],
+    styles$8[`f-tooltip--${placement}`],
+    arrow2 ? styles$8["f-tooltip--with-arrow"] : "",
+    isVisible ? styles$8["f-tooltip--open"] : "",
+    isExiting ? styles$8["f-tooltip--exiting"] : "",
     className
   ].filter(Boolean).join(" ");
   const tooltipElement = mountTooltip && title2 ? /* @__PURE__ */ jsxs(
@@ -3436,8 +3477,8 @@ const FTooltip = ({
       style: { ...style, ...tooltipStyles },
       role: "tooltip",
       children: [
-        arrow2 && /* @__PURE__ */ jsx("div", { className: styles$7["f-tooltip__arrow"] }),
-        /* @__PURE__ */ jsx("div", { className: styles$7["f-tooltip__content"], children: title2 })
+        arrow2 && /* @__PURE__ */ jsx("div", { className: styles$8["f-tooltip__arrow"] }),
+        /* @__PURE__ */ jsx("div", { className: styles$8["f-tooltip__content"], children: title2 })
       ]
     }
   ) : null;
@@ -3449,7 +3490,7 @@ const FTooltip = ({
 const rotate = "_rotate_1kvw2_38";
 const focused = "_focused_1kvw2_87";
 const selected = "_selected_1kvw2_90";
-const styles$6 = {
+const styles$7 = {
   "f-search-select": "_f-search-select_1kvw2_3",
   "f-select-native-hidden": "_f-select-native-hidden_1kvw2_9",
   "f-select-actions": "_f-select-actions_1kvw2_20",
@@ -3480,7 +3521,7 @@ const HighlightedText = ({ text, highlight }) => {
   const regex = new RegExp(`(${escapeRegExp(highlight)})`, "gi");
   const parts = text.split(regex);
   return /* @__PURE__ */ jsx("span", { children: parts.map(
-    (part, i) => regex.test(part) ? /* @__PURE__ */ jsx("span", { className: styles$6["f-select-highlight"], children: part }, i) : /* @__PURE__ */ jsx("span", { children: part }, i)
+    (part, i) => regex.test(part) ? /* @__PURE__ */ jsx("span", { className: styles$7["f-select-highlight"], children: part }, i) : /* @__PURE__ */ jsx("span", { children: part }, i)
   ) });
 };
 const FSearchableSelect = forwardRef(
@@ -3693,7 +3734,7 @@ const FSearchableSelect = forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `f-form-element ${styles$6["f-search-select"]} ${restProps.className || ""}`,
+        className: `f-form-element ${styles$7["f-search-select"]} ${restProps.className || ""}`,
         style: mergedStyle,
         ref: containerRef,
         id: inputId + "-block",
@@ -3715,7 +3756,7 @@ const FSearchableSelect = forwardRef(
               value: restProps.value !== void 0 ? String(restProps.value) : "",
               onChange: () => {
               },
-              className: styles$6["f-select-native-hidden"],
+              className: styles$7["f-select-native-hidden"],
               tabIndex: -1,
               disabled: disabled2,
               "aria-hidden": "true"
@@ -3729,7 +3770,7 @@ const FSearchableSelect = forwardRef(
                 id: inputId,
                 type: "text",
                 autoComplete: "off",
-                className: `f-form-element__control-element ${styles$6["has-icons"]} ${errText ? "error" : ""}`,
+                className: `f-form-element__control-element ${styles$7["has-icons"]} ${errText ? "error" : ""}`,
                 ...restProps,
                 disabled: disabled2 || load,
                 value: searchQuery,
@@ -3751,41 +3792,41 @@ const FSearchableSelect = forwardRef(
                 }
               }
             ),
-            load ? /* @__PURE__ */ jsx("span", { className: "f-form-element__loader", children: /* @__PURE__ */ jsx(FLoadIcon, { size: 10 }) }) : /* @__PURE__ */ jsxs("div", { className: styles$6["f-select-actions"], children: [
+            load ? /* @__PURE__ */ jsx("span", { className: "f-form-element__loader", children: /* @__PURE__ */ jsx(FLoadIcon, { size: 10 }) }) : /* @__PURE__ */ jsxs("div", { className: styles$7["f-select-actions"], children: [
               hasValue && !disabled2 && /* @__PURE__ */ jsx(
                 "div",
                 {
                   onClick: handleClear,
-                  className: `${styles$6["f-select-icon"]} close`,
+                  className: `${styles$7["f-select-icon"]} close`,
                   title: "Очистить",
                   onMouseDown: (e) => e.preventDefault(),
                   children: /* @__PURE__ */ jsx(CloseIcon, {})
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: `${styles$6["f-select-icon"]} ${isOpen ? styles$6["rotate"] : ""}`, children: /* @__PURE__ */ jsx(ChevronIcon, {}) })
+              /* @__PURE__ */ jsx("div", { className: `${styles$7["f-select-icon"]} ${isOpen ? styles$7["rotate"] : ""}`, children: /* @__PURE__ */ jsx(ChevronIcon, {}) })
             ] })
           ] }),
           isOpen && !disabled2 && !load && typeof document !== "undefined" && createPortal(
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$6["f-select-dropdown"],
+                className: styles$7["f-select-dropdown"],
                 style: dropdownStyle,
                 ref: dropdownRef,
                 children: /* @__PURE__ */ jsx(
                   "ul",
                   {
                     ref: listRef,
-                    className: styles$6["f-select-list"],
+                    className: styles$7["f-select-list"],
                     style: { maxHeight: `${listMaxHeight}px` },
-                    children: isTyping ? /* @__PURE__ */ jsx("li", { className: styles$6["f-select-no-results"], children: "Ожидается окончание ввода..." }) : renderList.length === 0 ? /* @__PURE__ */ jsx("li", { className: styles$6["f-select-no-results"], children: allowCreate ? "Нет данных" : "Совпадений не найдено" }) : renderList.map((option, index) => /* @__PURE__ */ jsx(
+                    children: isTyping ? /* @__PURE__ */ jsx("li", { className: styles$7["f-select-no-results"], children: "Ожидается окончание ввода..." }) : renderList.length === 0 ? /* @__PURE__ */ jsx("li", { className: styles$7["f-select-no-results"], children: allowCreate ? "Нет данных" : "Совпадений не найдено" }) : renderList.map((option, index) => /* @__PURE__ */ jsx(
                       "li",
                       {
                         className: `
-                                                ${styles$6["f-select-option"]} 
-                                                ${option.isNew ? styles$6["f-select-create"] : ""} 
-                                                ${index === highlightedIndex ? styles$6["focused"] : ""} 
-                                                ${currentValStr === option.value ? styles$6["selected"] : ""}
+                                                ${styles$7["f-select-option"]} 
+                                                ${option.isNew ? styles$7["f-select-create"] : ""} 
+                                                ${index === highlightedIndex ? styles$7["focused"] : ""} 
+                                                ${currentValStr === option.value ? styles$7["selected"] : ""}
                                             `,
                         onMouseDown: (e) => e.preventDefault(),
                         onClick: (e) => {
@@ -3850,6 +3891,94 @@ const FSearchableSelect = forwardRef(
   }
 );
 FSearchableSelect.displayName = "FSearchableSelect";
+const active = "_active_1btub_75";
+const disabled = "_disabled_1btub_75";
+const styles$6 = {
+  "f-segmented-wrapper": "_f-segmented-wrapper_1btub_2",
+  "f-segmented-control": "_f-segmented-control_1btub_12",
+  "f-segmented-sm": "_f-segmented-sm_1btub_28",
+  "f-segmented-item": "_f-segmented-item_1btub_28",
+  "f-segmented-md": "_f-segmented-md_1btub_32",
+  "f-segmented-lg": "_f-segmented-lg_1btub_36",
+  "f-segmented-glider": "_f-segmented-glider_1btub_42",
+  active,
+  disabled,
+  "f-segmented-badge": "_f-segmented-badge_1btub_82",
+  "f-segmented-icon": "_f-segmented-icon_1btub_92",
+  "f-segmented-label": "_f-segmented-label_1btub_105"
+};
+const FSegmentedControl = ({
+  items,
+  activeId,
+  onChange,
+  size = "md",
+  className = "",
+  style
+}) => {
+  const itemRefs = useRef([]);
+  const [gliderStyle, setGliderStyle] = useState({
+    width: 0,
+    left: 0
+  });
+  useEffect(() => {
+    const activeIndex = items.findIndex((item) => item.id === activeId);
+    const activeElement = itemRefs.current[activeIndex !== -1 ? activeIndex : 0];
+    if (activeElement) {
+      setGliderStyle({
+        width: activeElement.offsetWidth,
+        left: activeElement.offsetLeft
+      });
+    }
+  }, [activeId, items]);
+  const handleItemClick = (e, item) => {
+    if (item.disabled) return;
+    if (item.onClick) {
+      item.onClick(e, item);
+    }
+    if (!e.defaultPrevented) {
+      onChange(item.id);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: `${styles$6["f-segmented-wrapper"]} ${className}`, style, children: /* @__PURE__ */ jsxs("div", { className: `${styles$6["f-segmented-control"]} ${styles$6[`f-segmented-${size}`]}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles$6["f-segmented-glider"],
+        style: {
+          width: `${gliderStyle.width}px`,
+          transform: `translateX(${gliderStyle.left}px)`,
+          left: 0
+        }
+      }
+    ),
+    items.map((item, index) => {
+      const isActive = item.id === activeId;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: (el) => {
+            itemRefs.current[index] = el;
+          },
+          type: "button",
+          disabled: item.disabled,
+          className: `
+                                ${styles$6["f-segmented-item"]}
+                                ${isActive ? styles$6["active"] : ""}
+                                ${item.disabled ? styles$6["disabled"] : ""}
+                            `,
+          onClick: (e) => handleItemClick(e, item),
+          children: [
+            item.icon && /* @__PURE__ */ jsx("span", { className: styles$6["f-segmented-icon"], children: item.icon }),
+            /* @__PURE__ */ jsx("span", { className: styles$6["f-segmented-label"], children: item.label }),
+            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: styles$6["f-segmented-badge"], children: item.badge })
+          ]
+        },
+        String(item.id)
+      );
+    })
+  ] }) });
+};
+FSegmentedControl.displayName = "FSegmentedControl";
 const FPlusIcon = React.forwardRef(({
   color = "primary",
   size = 30,
@@ -8512,6 +8641,7 @@ export {
   FSafeIcon,
   FSearchBox,
   FSearchableSelect,
+  FSegmentedControl,
   FSelect,
   FSelectItem,
   FSelectSearchDb,