fui-material 2.3.4 → 2.5.0

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useState, useEffect, useMemo, useCallback, useLayoutEffect, Fragment, isValidElement, cloneElement } from "react";
+import React, { forwardRef, useRef, useState, useEffect, useMemo, useCallback, useLayoutEffect, Fragment, isValidElement, cloneElement, useDeferredValue } from "react";
 import ReactDOM, { createPortal } from "react-dom";
 import './main.css';function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
@@ -1049,7 +1049,7 @@ FTrashIcon.displayName = "FTrashIcon";
 const progressBar = "_progressBar_1xp9s_48";
 const completed = "_completed_1xp9s_60";
 const progress = "_progress_1xp9s_48";
-const styles$w = {
+const styles$y = {
   "file-preview-card": "_file-preview-card_1xp9s_1",
   "file-preview-info": "_file-preview-info_1xp9s_22",
   "file-preview-name": "_file-preview-name_1xp9s_28",
@@ -1071,18 +1071,18 @@ const FFile = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `${styles$w["file-preview-card"]} ${className || ""}`,
+      className: `${styles$y["file-preview-card"]} ${className || ""}`,
       id,
       style: st,
       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: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$y["file-preview-info"], children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$y["file-preview-name"], title: name, children: name }),
+          typeof size === "number" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$y["file-preview-size"], children: [
             Math.round(size / 1024),
             " КБ"
           ] })
         ] }),
-        handleDelete && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$w["trash-icon"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        handleDelete && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$y["trash-icon"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           FTrashIcon,
           {
             size: 20,
@@ -1090,10 +1090,10 @@ const FFile = ({
             handleClick: handleDelete
           }
         ) }),
-        typeof progress2 === "number" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$w.progressBar} ${progress2 === 100 ? styles$w.completed : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        typeof progress2 === "number" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$y.progressBar} ${progress2 === 100 ? styles$y.completed : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: styles$w.progress,
+            className: styles$y.progress,
             style: { width: `${progress2}%` }
           }
         ) })
@@ -1196,7 +1196,7 @@ const FButtonFile = ({
     )) }) })
   ] });
 };
-const styles$v = {
+const styles$x = {
   "f-text-field": "_f-text-field_200bb_1"
 };
 const FLoadIcon = React.forwardRef(({
@@ -1275,7 +1275,7 @@ const FTextField = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `f-form-element ${styles$v["f-text-field"]} ${className || ""}`,
+        className: `f-form-element ${styles$x["f-text-field"]} ${className || ""}`,
         style: mergedStyle,
         role: "group",
         id: inputId + "-text-field-block",
@@ -1367,7 +1367,7 @@ const FStack = ({
     }
   );
 };
-const styles$u = {
+const styles$w = {
   "f-grid": "_f-grid_3g4xh_1",
   "f-grid__col": "_f-grid__col_3g4xh_10",
   "f-grid__col--auto": "_f-grid__col--auto_3g4xh_16",
@@ -1470,21 +1470,21 @@ const FGrid = ({
     xxl: xxl ?? xl ?? lg ?? md ?? sm ?? xs
   };
   const getColumnClasses = () => {
-    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}`]);
+    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}`]);
     return classes.join(" ");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     obj === "container" && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: `${styles$u["f-grid"]} ${className || ""}`,
+        className: `${styles$w["f-grid"]} ${className || ""}`,
         style,
         id,
         children
@@ -1502,7 +1502,7 @@ const FGrid = ({
     obj === void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className, style, id, children })
   ] });
 };
-const styles$t = {
+const styles$v = {
   "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",
@@ -1524,21 +1524,21 @@ const FGridRow = ({
 }) => {
   const getJustifyContentClass = () => {
     if (!justifyContent) return "";
-    return styles$t[`f-grid-row--justify-${justifyContent}`];
+    return styles$v[`f-grid-row--justify-${justifyContent}`];
   };
   const getAlignItemsClass = () => {
     if (!alignItems) return "";
-    return styles$t[`f-grid-row--align-${alignItems}`];
+    return styles$v[`f-grid-row--align-${alignItems}`];
   };
   const rowClasses = [
-    styles$t["f-grid-row"],
+    styles$v["f-grid-row"],
     getJustifyContentClass(),
     getAlignItemsClass(),
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: rowClasses, style: st, id, children });
 };
-const styles$s = {
+const styles$u = {
   "f-container": "_f-container_g9ck3_1",
   "container-fluid": "_container-fluid_g9ck3_1",
   "container-xxl": "_container-xxl_g9ck3_1",
@@ -1558,7 +1558,7 @@ const FContainer = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$s["f-container"]} ${styles$s[maxWidth]} ${className || ""}`,
+      className: `${styles$u["f-container"]} ${styles$u[maxWidth]} ${className || ""}`,
       style: st,
       id,
       children
@@ -1566,7 +1566,7 @@ const FContainer = ({
   );
 };
 const panel = "_panel_yplsg_1";
-const styles$r = {
+const styles$t = {
   panel,
   "panel-default": "_panel-default_yplsg_6",
   "panel-heading": "_panel-heading_yplsg_12",
@@ -1599,15 +1599,15 @@ const FPaper = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `${styles$r["panel"]} ${styles$r["panel-default"]} ${className || ""} ${animated ? `${styles$r[`animated-${animated.name}`]} ${animated.name}` : ""}`,
+      className: `${styles$t["panel"]} ${styles$t["panel-default"]} ${className || ""} ${animated ? `${styles$t[`animated-${animated.name}`]} ${animated.name}` : ""}`,
       style: st,
       id,
       onAnimationEnd,
       children: [
-        label && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$r["panel-heading"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        label && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$t["panel-heading"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "h3",
           {
-            className: styles$r["panel-title"],
+            className: styles$t["panel-title"],
             style: { fontSize: fontSizeLabel },
             children: label
           }
@@ -1615,7 +1615,7 @@ const FPaper = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: styles$r["panel-body"],
+            className: styles$t["panel-body"],
             style: { fontSize: fontSizeBody },
             children
           }
@@ -1628,7 +1628,7 @@ const bordered = "_bordered_j1bhx_18";
 const left$1 = "_left_j1bhx_40";
 const center = "_center_j1bhx_43";
 const right = "_right_j1bhx_46";
-const styles$q = {
+const styles$s = {
   "f-table-component": "_f-table-component_j1bhx_1",
   "f-table-component__table": "_f-table-component__table_j1bhx_7",
   bordered,
@@ -1658,7 +1658,7 @@ const FTableHead = ({
     {
       style: st,
       ...props,
-      className: `${styles$q["f-table-component__table_header"]} ${isSticky ? styles$q["is-sticky"] : ""} ${props.className || ""} ${styles$q[textAlignment]}`,
+      className: `${styles$s["f-table-component__table_header"]} ${isSticky ? styles$s["is-sticky"] : ""} ${props.className || ""} ${styles$s[textAlignment]}`,
       children
     }
   );
@@ -1751,7 +1751,7 @@ const FTableBody = ({
   } else {
     visibleItems = flatChildren;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("tbody", { ref: tableBodyRef, style: st, ...props, className: `${styles$q["f-table-component__table_body"]} ${props.className || ""}  ${styles$q[textAlignment]}`, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("tbody", { ref: tableBodyRef, style: st, ...props, className: `${styles$s["f-table-component__table_body"]} ${props.className || ""}  ${styles$s[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 } })
@@ -1790,14 +1790,14 @@ const FTable = ({
     "div",
     {
       ref: tableWrapperRef,
-      className: styles$q["f-table-component"],
+      className: styles$s["f-table-component"],
       style: { overflowX, overflowY },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "table",
         {
           style: st,
           ...props,
-          className: `table ${styles$q["f-table-component__table"]} ${styles$q["bordered"]} ${styles$q["bordered-half"]} ${props.className || ""}`,
+          className: `table ${styles$s["f-table-component__table"]} ${styles$s["bordered"]} ${styles$s["bordered-half"]} ${props.className || ""}`,
           children: React.Children.map(children, (child) => {
             if (React.isValidElement(child) && child.type === FTableHead) {
               const headProps = child.props;
@@ -1837,7 +1837,7 @@ const FTableRow = ({
     {
       style: st,
       ...props,
-      className: `${styles$q["f-table-component__table_row"]} ${props.className || ""}${textAlignment !== void 0 ? ` ${styles$q[textAlignment]}` : ""}`,
+      className: `${styles$s["f-table-component__table_row"]} ${props.className || ""}${textAlignment !== void 0 ? ` ${styles$s[textAlignment]}` : ""}`,
       children
     }
   );
@@ -1865,7 +1865,7 @@ const FTableHeaderCell = ({
       rowSpan: row && row > 1 ? row : void 0,
       colSpan: col && col > 1 ? col : void 0,
       ...props,
-      className: `${styles$q["f-table-component__table_header-cell"]} ${props.className || ""}`,
+      className: `${styles$s["f-table-component__table_header-cell"]} ${props.className || ""}`,
       children
     }
   );
@@ -1893,7 +1893,7 @@ const FTableDataCell = ({
       rowSpan: row && row > 1 ? row : void 0,
       colSpan: col && col > 1 ? col : void 0,
       ...props,
-      className: `${styles$q["f-table-component__table_body-cell"]} ${props.className || ""}`,
+      className: `${styles$s["f-table-component__table_body-cell"]} ${props.className || ""}`,
       children
     }
   );
@@ -1908,14 +1908,14 @@ const FTableFooter = ({
     {
       style: st,
       ...props,
-      className: `${styles$q["f-table-component__table_footer"]} ${props.className || ""}`,
+      className: `${styles$s["f-table-component__table_footer"]} ${props.className || ""}`,
       children
     }
   );
 };
 const active$4 = "_active_16jkc_16";
 const hide = "_hide_16jkc_37";
-const styles$p = {
+const styles$r = {
   "f-dialog": "_f-dialog_16jkc_1",
   "active-dialog": "_active-dialog_16jkc_16",
   "f-dialog__content": "_f-dialog__content_16jkc_20",
@@ -1967,12 +1967,12 @@ const FDialog = ({
       {
         id,
         style: st,
-        className: `${styles$p["f-dialog"]} ${openAndClose ? styles$p["active-dialog"] : ""} ${className || ""}`,
+        className: `${styles$r["f-dialog"]} ${openAndClose ? styles$r["active-dialog"] : ""} ${className || ""}`,
         onClick: () => closeButtonBackPage == null ? void 0 : closeButtonBackPage(false),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: `${styles$p["f-dialog__content"]} ${openAndClose ? styles$p["active"] : ""} ${hide2 ? styles$p["hide"] : ""}`,
+            className: `${styles$r["f-dialog__content"]} ${openAndClose ? styles$r["active"] : ""} ${hide2 ? styles$r["hide"] : ""}`,
             style: {
               width: contentWidth
             },
@@ -2012,10 +2012,10 @@ const FCloseIcon = React.forwardRef(({
   );
 });
 FCloseIcon.displayName = "FCloseIcon";
-const FDialogHeader = ({ title, handleClose }) => {
-  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(
+const FDialogHeader = ({ title: title2, handleClose }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$r["f-dialog__header"], children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: styles$r["f-dialog__header_title"], children: title2 }),
+    handleClose && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$r["f-dialog__header_close"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       FCloseIcon,
       {
         handleClose,
@@ -2030,7 +2030,7 @@ const FDialogBody = ({ st, children, scroll = true }) => {
     ...scroll ? { overflowY: "auto" } : {},
     ...st
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$p["f-dialog__body"], style, children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$r["f-dialog__body"], style, children });
 };
 const FDialogFooter = ({ children, className, st, id }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2038,7 +2038,7 @@ const FDialogFooter = ({ children, className, st, id }) => {
     {
       id,
       style: st,
-      className: `${styles$p["f-dialog__footer"]} ${className || ""}`,
+      className: `${styles$r["f-dialog__footer"]} ${className || ""}`,
       children
     }
   );
@@ -2053,7 +2053,7 @@ const info$2 = "_info_1lhk7_62";
 const light = "_light_1lhk7_66";
 const dark = "_dark_1lhk7_70";
 const link = "_link_1lhk7_74";
-const styles$o = {
+const styles$q = {
   "authorization-spinner": "_authorization-spinner_1lhk7_1",
   "spinner-item": "_spinner-item_1lhk7_7",
   loader,
@@ -2071,14 +2071,14 @@ const FProgress = ({ st, color = "primary", id, className }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$o["authorization-spinner"]} ${styles$o.visible} ${className || ""}`,
+      className: `${styles$q["authorization-spinner"]} ${styles$q.visible} ${className || ""}`,
       id,
       style: st,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$o["spinner-item"]} ${styles$o[color]}` })
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$q["spinner-item"]} ${styles$q[color]}` })
     }
   );
 };
-const styles$n = {
+const styles$p = {
   "f-preloader": "_f-preloader_17f9x_1",
   "active-preloader": "_active-preloader_17f9x_10"
 };
@@ -2105,13 +2105,13 @@ const FPreloader = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$n["f-preloader"]} ${open ? styles$n["active-preloader"] : ""}`,
+      className: `${styles$p["f-preloader"]} ${open ? styles$p["active-preloader"] : ""}`,
       style: mergedStyle,
       children
     }
   );
 };
-const styles$m = {
+const styles$o = {
   "f-checkbox": "_f-checkbox_9rvqg_1"
 };
 const FCheckbox = forwardRef(
@@ -2124,7 +2124,7 @@ const FCheckbox = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: `${styles$m["f-checkbox"]} ${className || ""}`,
+        className: `${styles$o["f-checkbox"]} ${className || ""}`,
         style: st,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ref, type: "checkbox", ...props }),
@@ -2134,7 +2134,7 @@ const FCheckbox = forwardRef(
     );
   }
 );
-const styles$l = {
+const styles$n = {
   "f-radio": "_f-radio_cwhmx_1"
 };
 const FRadioButton = forwardRef(
@@ -2147,7 +2147,7 @@ const FRadioButton = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: `${styles$l["f-radio"]} ${className || ""}`,
+        className: `${styles$n["f-radio"]} ${className || ""}`,
         style: st,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ref, type: "radio", ...props }),
@@ -2205,15 +2205,15 @@ const usePagination = ({
   return paginationRange;
 };
 const dots = "_dots_aham2_29";
-const selected = "_selected_aham2_33";
+const selected$1 = "_selected_aham2_33";
 const disabled$2 = "_disabled_aham2_37";
 const arrow = "_arrow_aham2_43";
 const left = "_left_aham2_56";
-const styles$k = {
+const styles$m = {
   "pagination-container": "_pagination-container_aham2_1",
   "pagination-item": "_pagination-item_aham2_9",
   dots,
-  selected,
+  selected: selected$1,
   disabled: disabled$2,
   arrow,
   left
@@ -2243,26 +2243,26 @@ const FPagination = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "ul",
     {
-      className: `${styles$k["pagination-container"]} ${className || ""}`,
+      className: `${styles$m["pagination-container"]} ${className || ""}`,
       style: st,
       id,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "li",
           {
-            className: `${styles$k["pagination-item"]} ${currentPage === 1 ? styles$k.disabled : ""}`,
+            className: `${styles$m["pagination-item"]} ${currentPage === 1 ? styles$m.disabled : ""}`,
             onClick: onPrevious,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$k.arrow} ${styles$k.left}` })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$m.arrow} ${styles$m.left}` })
           }
         ),
         paginationRange.map((pageNumber, index) => {
           if (pageNumber === DOTS) {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: `${styles$k["pagination-item"]} ${styles$k.dots}`, children: "…" }, index);
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: `${styles$m["pagination-item"]} ${styles$m.dots}`, children: "…" }, index);
           }
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             "li",
             {
-              className: `${styles$k["pagination-item"]} ${pageNumber === currentPage ? styles$k.selected : ""}`,
+              className: `${styles$m["pagination-item"]} ${pageNumber === currentPage ? styles$m.selected : ""}`,
               onClick: () => onPageChange(pageNumber),
               children: pageNumber
             },
@@ -2272,16 +2272,16 @@ const FPagination = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "li",
           {
-            className: `${styles$k["pagination-item"]} ${currentPage === lastPage ? styles$k.disabled : ""}`,
+            className: `${styles$m["pagination-item"]} ${currentPage === lastPage ? styles$m.disabled : ""}`,
             onClick: onNext,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$k.arrow} ${styles$k.right}` })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$m.arrow} ${styles$m.right}` })
           }
         )
       ]
     }
   );
 };
-const styles$j = {
+const styles$l = {
   "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",
@@ -2295,26 +2295,26 @@ const FTimeline = ({
   id,
   className
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$j["f-time-line"]} ${className || ""}`, style: st, id, children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$l["f-time-line"]} ${className || ""}`, style: st, id, children });
 };
 const FTimelineCard = ({
   children,
   st,
-  title,
+  title: title2,
   id,
   className
 }) => {
-  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: st, 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 })
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$l["f-time-line__block"]} ${className || ""}`, id, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$l["f-time-line__block-circle"] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$l["f-time-line__block-inner"], style: st, children: [
+      title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$l["f-time-line__block-title"], children: title2 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$l["f-time-line__block-content"], children })
     ] })
   ] });
 };
 const spinner = "_spinner_f7bma_133";
 const active$3 = "_active_f7bma_183";
-const styles$i = {
+const styles$k = {
   "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",
@@ -2453,10 +2453,10 @@ const FOpenImgFull = ({
     {
       openAndClose,
       st,
-      className: `${styles$i["fv-opn-img-full"]} ${className || ""}`,
+      className: `${styles$k["fv-opn-img-full"]} ${className || ""}`,
       id,
-      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(
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$k["fv-opn-img-full-body"], children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$k["close-button"], children: handleClose && /* @__PURE__ */ jsxRuntimeExports.jsx(
           FCloseIcon,
           {
             handleClose: () => {
@@ -2468,21 +2468,21 @@ const FOpenImgFull = ({
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            className: styles$i["image-container"],
+            className: styles$k["image-container"],
             onTouchStart: handleTouchStart,
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
             children: [
-              selectedImg > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["arrow-left"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              selectedImg > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$k["arrow-left"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 FArrowIcon,
                 {
                   direction: "left",
                   handleClick: () => setSelectedImg(selectedImg - 1)
                 }
               ) }),
-              /* @__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(
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$k["image-wrapper"], children: [
+                isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$k["loading-spinner"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$k["spinner"] }) }),
+                error2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$k["error-message"], children: "Ошибка загрузки изображения" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "img",
                   {
                     src: imagesUrl[selectedImg],
@@ -2492,7 +2492,7 @@ const FOpenImgFull = ({
                       setError(true);
                       setIsLoading(false);
                     },
-                    className: styles$i["full-image"],
+                    className: styles$k["full-image"],
                     onClick: handleImageClick,
                     style: {
                       cursor: "zoom-in",
@@ -2502,7 +2502,7 @@ const FOpenImgFull = ({
                   }
                 )
               ] }),
-              selectedImg < imagesUrl.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["arrow-right"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              selectedImg < imagesUrl.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$k["arrow-right"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 FArrowIcon,
                 {
                   direction: "right",
@@ -2512,10 +2512,10 @@ const FOpenImgFull = ({
             ]
           }
         ),
-        imagesUrl.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["progress-indicator"], children: imagesUrl.map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        imagesUrl.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$k["progress-indicator"], children: imagesUrl.map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: `${styles$i["progress-dot"]} ${index === selectedImg ? styles$i["active"] : ""}`,
+            className: `${styles$k["progress-dot"]} ${index === selectedImg ? styles$k["active"] : ""}`,
             onClick: () => setSelectedImg(index)
           },
           index
@@ -2524,12 +2524,12 @@ const FOpenImgFull = ({
     }
   );
 };
-const card = "_card_1pttw_1";
+const card$1 = "_card_1pttw_1";
 const warning$3 = "_warning_1pttw_16";
 const info$1 = "_info_1pttw_24";
 const alert$1 = "_alert_1pttw_32";
-const styles$h = {
-  card,
+const styles$j = {
+  card: card$1,
   warning: warning$3,
   info: info$1,
   alert: alert$1,
@@ -2537,7 +2537,7 @@ const styles$h = {
 };
 const FAccordion = ({
   variant = "info",
-  title,
+  title: title2,
   children,
   id,
   className,
@@ -2556,16 +2556,16 @@ const FAccordion = ({
     "div",
     {
       onClick,
-      className: `${styles$h.card} ${className || ""}`,
+      className: `${styles$j.card} ${className || ""}`,
       id,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "details",
         {
-          className: styles$h[variant],
+          className: styles$j[variant],
           open: isOpen,
           style: st,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: styles$h["fv-accord-title"], children: title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: styles$j["fv-accord-title"], children: title2 }),
             children
           ]
         }
@@ -2573,9 +2573,9 @@ const FAccordion = ({
     }
   );
 };
-const container = "_container_6r9j2_1";
-const styles$g = {
-  container,
+const container$1 = "_container_6r9j2_1";
+const styles$i = {
+  container: container$1,
   "custom-file": "_custom-file_6r9j2_6",
   "custom-file-input": "_custom-file-input_6r9j2_9",
   "custom-file-dropzone": "_custom-file-dropzone_6r9j2_24",
@@ -2593,7 +2593,7 @@ const FInputFileForm = ({
   onChange,
   disabled: disabled2 = false,
   deleteFile,
-  title,
+  title: title2,
   required,
   onValidationError,
   showPreview = true,
@@ -2704,11 +2704,11 @@ const FInputFileForm = ({
       setUploadProgress({});
     }
   }, [deleteFile]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$g.container, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$i.container, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `${styles$g["custom-file"]} ${styles$g["custom-file-dropzone"]} ${isDragging ? styles$g.dragging : ""}`,
+        className: `${styles$i["custom-file"]} ${styles$i["custom-file-dropzone"]} ${isDragging ? styles$i.dragging : ""}`,
         style: st,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
@@ -2720,10 +2720,10 @@ const FInputFileForm = ({
               required,
               accept,
               type: "file",
-              className: `${styles$g["custom-file-input"]} ${className || ""}`,
+              className: `${styles$i["custom-file-input"]} ${className || ""}`,
               name,
               id,
-              title,
+              title: title2,
               "data-max-size": dataMaxSize == null ? void 0 : dataMaxSize.size,
               multiple,
               onChange: handleFileChange,
@@ -2731,7 +2731,7 @@ const FInputFileForm = ({
               ref: inputRef
             }
           ),
-          /* @__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.jsxs("label", { htmlFor: id, className: styles$i["custom-file-label"], style: disabled2 ? { backgroundColor: "#F3F3F3", border: "1px dashed #C4C4C4" } : void 0, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "30", height: "30", fill: "currentColor", viewBox: "0 0 16 16", children: [
               /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.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" })
@@ -2757,8 +2757,8 @@ const FInputFileForm = ({
         ]
       }
     ),
-    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(
+    errors.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i.errors, children: errors.map((error2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i.error, children: error2 }, index)) }),
+    showPreview && selectedFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i["custom-files-preview"], children: selectedFiles.map((file, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i.fileItem, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       FFile,
       {
         name: file.name,
@@ -2769,7 +2769,7 @@ const FInputFileForm = ({
     ) }, index)) })
   ] });
 };
-const styles$f = {
+const styles$h = {
   "f-select": "_f-select_1n6ag_1",
   "f-select__control-element": "_f-select__control-element_1n6ag_5"
 };
@@ -2799,7 +2799,7 @@ const FSelect = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `f-form-element ${styles$f["f-select"]}`,
+        className: `f-form-element ${styles$h["f-select"]}`,
         style: mergedStyle,
         id: inputId + "-select-block",
         role: "group",
@@ -2824,7 +2824,7 @@ const FSelect = forwardRef(
                 ...props,
                 id: inputId,
                 disabled: props.disabled || load,
-                className: `f-form-element__control-element ${styles$f["f-select__control-element"]} ${errText ? "error" : ""} ${props.className || ""}`,
+                className: `f-form-element__control-element ${styles$h["f-select__control-element"]} ${errText ? "error" : ""} ${props.className || ""}`,
                 children: !load && children
               }
             ),
@@ -2906,7 +2906,7 @@ const FFullDateField = forwardRef(
   }
 );
 const active$2 = "_active_yhck3_41";
-const styles$e = {
+const styles$g = {
   "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",
@@ -3090,12 +3090,12 @@ const FSelectSearchDb = ({
     "div",
     {
       ref: containerRef,
-      className: `${styles$e["f-select-search-db"]} ${className || ""}`,
+      className: `${styles$g["f-select-search-db"]} ${className || ""}`,
       style: st,
       id,
       "data-position": dropdownPosition,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$e["f-select-search-db__input"], children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$g["f-select-search-db__input"], children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             FTextField,
             {
@@ -3106,7 +3106,7 @@ const FSelectSearchDb = ({
               label,
               type,
               placeholder,
-              className: styles$e["f-select-search-db__input_field"],
+              className: styles$g["f-select-search-db__input_field"],
               value: valueInput,
               onChange: handlerOnChange,
               onFocus,
@@ -3123,7 +3123,7 @@ const FSelectSearchDb = ({
           !load && !disabled2 && arrObject.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: styles$e["f-select-search-db__input_arrow"],
+              className: styles$g["f-select-search-db__input_arrow"],
               style: { marginTop: label ? "28px" : "7px" },
               onClick: handleArrowClick,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(FArrowIcon, { direction: isDropdownOpen ? "up" : "down", size: 15 })
@@ -3135,8 +3135,8 @@ const FSelectSearchDb = ({
             "div",
             {
               ref: dropdownRef,
-              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", { onMouseDown: () => handleItemClick(opt), children: selectItem(opt) }, index)) })
+              className: `${styles$g["f-select-search-db__dropdown"]} ${isDropdownOpen ? styles$g.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$g["f-select-search-db__dropdown_content"], children: arrObject.slice(0, 10).map((opt, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onMouseDown: () => handleItemClick(opt), children: selectItem(opt) }, index)) })
             }
           ),
           dropdownPortalRef.current
@@ -3145,7 +3145,7 @@ const FSelectSearchDb = ({
     }
   );
 };
-const styles$d = {
+const styles$f = {
   "f-text-area": "_f-text-area_1ywhr_1"
 };
 const FTextArea = forwardRef(
@@ -3174,7 +3174,7 @@ const FTextArea = forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `f-form-element ${styles$d["f-text-area"]} ${className || ""}`,
+        className: `f-form-element ${styles$f["f-text-area"]} ${className || ""}`,
         style: mergedStyle,
         role: "group",
         id: areaId + "-text-area-block",
@@ -3239,7 +3239,7 @@ function fGenerateUniqueId() {
   return `${timestamp}${randomPart}`;
 }
 const FAlert = ({
-  title,
+  title: title2,
   body,
   variant = "info",
   displayTime,
@@ -3424,7 +3424,7 @@ const FAlert = ({
         style: { width: size !== void 0 ? `${size}` : "fit-content" },
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "f-alert-header", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { children: title !== void 0 ? title : "" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { children: title2 !== void 0 ? title2 : "" }),
             buttonClose && onClose && /* @__PURE__ */ jsxRuntimeExports.jsx(
               FCloseIcon,
               {
@@ -3533,7 +3533,7 @@ const FNative = ({
 const horizontal = "_horizontal_zlvc7_1";
 const vertical = "_vertical_zlvc7_7";
 const active$1 = "_active_zlvc7_50";
-const styles$c = {
+const styles$e = {
   "f-tabs": "_f-tabs_zlvc7_1",
   horizontal,
   vertical,
@@ -3552,7 +3552,7 @@ const FTabs = ({
     {
       id,
       style: st,
-      className: `${styles$c["f-tabs"]} ${styles$c[orientation]} ${className || ""}`,
+      className: `${styles$e["f-tabs"]} ${styles$e[orientation]} ${className || ""}`,
       children
     }
   );
@@ -3569,7 +3569,7 @@ const FTab = forwardRef(({
       ref,
       type: "button",
       style: st,
-      className: `${styles$c["f-tabs__tab"]} ${active2 ? styles$c["active"] : ""} ${props.className || ""}`,
+      className: `${styles$e["f-tabs__tab"]} ${active2 ? styles$e["active"] : ""} ${props.className || ""}`,
       ...props,
       children
     }
@@ -3577,7 +3577,7 @@ const FTab = forwardRef(({
 });
 FTab.displayName = "FTab";
 const disabled$1 = "_disabled_2ty2i_40";
-const styles$b = {
+const styles$d = {
   "f-dropdown": "_f-dropdown_2ty2i_1",
   "f-dropdown__arrow": "_f-dropdown__arrow_2ty2i_6",
   "f-dropdown__content": "_f-dropdown__content_2ty2i_10",
@@ -3627,7 +3627,7 @@ const FDropdown = forwardRef(({
       return child;
     });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b["f-dropdown"], ref, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$d["f-dropdown"], ref, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       FButton,
       {
@@ -3636,21 +3636,21 @@ const FDropdown = forwardRef(({
         size,
         disabled: disabled2,
         st,
-        className: `${styles$b["f-dropdown__button"]} ${className || ""}`,
+        className: `${styles$d["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$b["f-dropdown__arrow"], size: 16, color: "light", direction: isOpen ? "up" : "down" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FArrowIcon, { className: styles$d["f-dropdown__arrow"], size: 16, color: "light", direction: isOpen ? "up" : "down" })
         ] })
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: styles$b["f-dropdown__content"] + (isOpen ? " " + styles$b["f-dropdown__content--open"] : ""),
+        className: styles$d["f-dropdown__content"] + (isOpen ? " " + styles$d["f-dropdown__content--open"] : ""),
         role: "menu",
         children: renderChildren()
       }
@@ -3671,7 +3671,7 @@ const FDropdownItem = ({
     {
       id,
       style: st,
-      className: `${styles$b["f-dropdown__content-link"]} ${className || ""} ${disabled2 ? styles$b["disabled"] : ""}`,
+      className: `${styles$d["f-dropdown__content-link"]} ${className || ""} ${disabled2 ? styles$d["disabled"] : ""}`,
       onClick: disabled2 ? void 0 : onClick,
       "aria-disabled": disabled2,
       role: "menuitem",
@@ -3679,7 +3679,7 @@ const FDropdownItem = ({
     }
   );
 };
-const styles$a = {
+const styles$c = {
   "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",
@@ -3705,7 +3705,7 @@ const FSearchBox = forwardRef(
     type,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$a["f-search-box"]} form-group`, style: st, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$c["f-search-box"]} form-group`, style: st, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         FTextField,
         {
@@ -3719,14 +3719,14 @@ const FSearchBox = forwardRef(
           errText,
           load,
           ...props,
-          className: `${styles$a["f-search-box__input"]} ${props.className || ""}`
+          className: `${styles$c["f-search-box__input"]} ${props.className || ""}`
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$a["f-search-box__button"], style: { marginTop: label ? "21.8px" : "0" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$c["f-search-box__button"], style: { marginTop: label ? "21.8px" : "0" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           FButton,
           {
-            className: `${styles$a["f-search-box__button_search"]} ${clearDataFromInput ? styles$a["clear-on"] : ""}`,
+            className: `${styles$c["f-search-box__button_search"]} ${clearDataFromInput ? styles$c["clear-on"] : ""}`,
             type: "button",
             disabled: disabled2,
             onClick: onClickButton,
@@ -3738,7 +3738,7 @@ const FSearchBox = forwardRef(
         clearDataFromInput && /* @__PURE__ */ jsxRuntimeExports.jsx(
           FButton,
           {
-            className: `${styles$a["f-search-box__button_clear"]}`,
+            className: `${styles$c["f-search-box__button_clear"]}`,
             type: "button",
             disabled: disabled2,
             onClick: clearDataFromInput,
@@ -3751,7 +3751,7 @@ const FSearchBox = forwardRef(
     ] });
   }
 );
-const styles$9 = {
+const styles$b = {
   "f-carousel": "_f-carousel_d5w12_1",
   "f-carousel__viewport": "_f-carousel__viewport_d5w12_8",
   "f-carousel__track": "_f-carousel__track_d5w12_12",
@@ -3834,10 +3834,10 @@ const FCarousel = ({
   const handleTouchEnd = () => {
     startX.current = null;
   };
-  const rootClass = [styles$9["f-carousel"], className].filter(Boolean).join(" ");
+  const rootClass = [styles$b["f-carousel"], className].filter(Boolean).join(" ");
   const trackClass = [
-    styles$9["f-carousel__track"],
-    isAnimating ? styles$9["f-carousel__track--animating"] : ""
+    styles$b["f-carousel__track"],
+    isAnimating ? styles$b["f-carousel__track--animating"] : ""
   ].filter(Boolean).join(" ");
   const trackStyle = {
     transform: `translateX(-${100 / itemsCount * current}%)`,
@@ -3848,7 +3848,7 @@ const FCarousel = ({
     showArrows && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        className: `${styles$9["f-carousel__arrow"]} ${styles$9["f-carousel__arrow--left"]}`,
+        className: `${styles$b["f-carousel__arrow"]} ${styles$b["f-carousel__arrow--left"]}`,
         onClick: handlePrev,
         disabled: !loop && current === 0,
         "aria-label": "Назад",
@@ -3858,14 +3858,14 @@ const FCarousel = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: styles$9["f-carousel__viewport"],
+        className: styles$b["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$9["f-carousel__item"],
+            className: styles$b["f-carousel__item"],
             style: { width: `${100 / itemsCount}%` },
             children: child
           },
@@ -3876,19 +3876,19 @@ const FCarousel = ({
     showArrows && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        className: `${styles$9["f-carousel__arrow"]} ${styles$9["f-carousel__arrow--right"]}`,
+        className: `${styles$b["f-carousel__arrow"]} ${styles$b["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$9["f-carousel__indicators"], children: Array.from({ length: itemsCount - visibleCount + 1 }).map((_, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b["f-carousel__indicators"], children: Array.from({ length: itemsCount - visibleCount + 1 }).map((_, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         className: [
-          styles$9["f-carousel__indicator"],
-          idx === current ? styles$9["f-carousel__indicator--active"] : ""
+          styles$b["f-carousel__indicator"],
+          idx === current ? styles$b["f-carousel__indicator--active"] : ""
         ].join(" "),
         onClick: () => setCurrent(idx),
         "aria-label": `Перейти к слайду ${idx + 1}`
@@ -3902,10 +3902,10 @@ const FCarouselItem = ({
   className,
   id
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$9["f-carousel-item"]} ${className || ""}`, id, children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$b["f-carousel-item"]} ${className || ""}`, id, children });
 };
 const skeleton = "_skeleton_1ojrt_1";
-const styles$8 = {
+const styles$a = {
   "skeleton-block": "_skeleton-block_1ojrt_1",
   skeleton
 };
@@ -3915,7 +3915,7 @@ const FSkeleton = ({ children, enable, width, height }) => {
   const skeletons = useRef([]);
   const createSkeleton = (element) => {
     const skeleton2 = document.createElement("div");
-    skeleton2.className = styles$8.skeleton;
+    skeleton2.className = styles$a.skeleton;
     const computedStyle = window.getComputedStyle(element);
     skeleton2.style.width = width ?? computedStyle.width;
     skeleton2.style.height = height ?? computedStyle.height;
@@ -3962,10 +3962,10 @@ const FSkeleton = ({ children, enable, width, height }) => {
       restoreOriginalElements();
     };
   }, [enable]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: elementRef, className: styles$8["skeleton-block"], children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: elementRef, className: styles$a["skeleton-block"], children });
 };
 const active = "_active_1tib7_71";
-const styles$7 = {
+const styles$9 = {
   "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",
@@ -3977,7 +3977,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: st, className: styles$7["f-nav-bar"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$7["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: st, className: styles$9["f-nav-bar"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$9["f-nav-bar__menu"], children }) }) }) }) });
 };
 const FNavigateBarItem = ({
   st,
@@ -3991,13 +3991,13 @@ const FNavigateBarItem = ({
     {
       id,
       style: st,
-      className: `${styles$7["f-nav-bar__menu-route"]} ${activeClass ? styles$7.active : ""} ${className || ""}`,
+      className: `${styles$9["f-nav-bar__menu-route"]} ${activeClass ? styles$9.active : ""} ${className || ""}`,
       children
     }
   );
 };
 const disabled = "_disabled_w47ps_49";
-const styles$6 = {
+const styles$8 = {
   "sections-routes": "_sections-routes_w47ps_2",
   "sections-routes_card": "_sections-routes_card_w47ps_9",
   "sections-routes_card__title": "_sections-routes_card__title_w47ps_25",
@@ -4015,7 +4015,7 @@ const FMenuBlockLinks = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `${styles$6["sections-routes"]} ${className ?? ""}`.trim(),
+      className: `${styles$8["sections-routes"]} ${className ?? ""}`.trim(),
       style,
       id,
       children
@@ -4028,15 +4028,15 @@ const FMenuLinks = ({
   st,
   id,
   disabled: disabled2 = [],
-  title
+  title: title2
 }) => {
   const enhancedChildren = React.Children.map(children, (child, index) => {
     if (!React.isValidElement(child)) return child;
     const isDisabled = disabled2.includes(index);
     const childClass = [
       child.props.className,
-      styles$6.link,
-      isDisabled && styles$6.disabled
+      styles$8.link,
+      isDisabled && styles$8.disabled
     ].filter(Boolean).join(" ");
     return React.cloneElement(child, {
       className: childClass,
@@ -4046,17 +4046,17 @@ const FMenuLinks = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `${styles$6["sections-routes_card"]} ${className ?? ""}`.trim(),
+      className: `${styles$8["sections-routes_card"]} ${className ?? ""}`.trim(),
       style: st,
       id,
       children: [
-        title && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6["sections-routes_card__title"], children: title }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6["sections-routes_card__links"], children: enhancedChildren })
+        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$8["sections-routes_card__title"], children: title2 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$8["sections-routes_card__links"], children: enhancedChildren })
       ]
     }
   );
 };
-const styles$5 = {
+const styles$7 = {
   "f-tooltip": "_f-tooltip_xpnbo_1",
   "f-tooltip--open": "_f-tooltip--open_xpnbo_17",
   "f-tooltip--exiting": "_f-tooltip--exiting_xpnbo_22",
@@ -4070,7 +4070,7 @@ const styles$5 = {
   "f-tooltip--with-arrow": "_f-tooltip--with-arrow_xpnbo_104"
 };
 const FTooltip = ({
-  title,
+  title: title2,
   children,
   placement = "bottom",
   arrow: arrow2 = false,
@@ -4245,14 +4245,14 @@ const FTooltip = ({
     wrappedChild = 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"] : "",
+    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"] : "",
     className
   ].filter(Boolean).join(" ");
-  const tooltipElement = mountTooltip && title ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const tooltipElement = mountTooltip && title2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       ref: tooltipRef,
@@ -4260,8 +4260,8 @@ const FTooltip = ({
       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 })
+        arrow2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$7["f-tooltip__arrow"] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$7["f-tooltip__content"], children: title2 })
       ]
     }
   ) : null;
@@ -4270,6 +4270,311 @@ const FTooltip = ({
     tooltipElement && createPortal(tooltipElement, document.body)
   ] });
 };
+const rotate = "_rotate_igzn5_43";
+const focused = "_focused_igzn5_94";
+const selected = "_selected_igzn5_97";
+const styles$6 = {
+  "f-search-select": "_f-search-select_igzn5_3",
+  "f-select-native-hidden": "_f-select-native-hidden_igzn5_8",
+  "f-select-actions": "_f-select-actions_igzn5_25",
+  "f-select-icon": "_f-select-icon_igzn5_34",
+  rotate,
+  "f-select-dropdown": "_f-select-dropdown_igzn5_48",
+  "f-select-list": "_f-select-list_igzn5_62",
+  "f-select-option": "_f-select-option_igzn5_81",
+  focused,
+  selected,
+  "f-select-create": "_f-select-create_igzn5_102",
+  "f-select-no-results": "_f-select-no-results_igzn5_108",
+  "f-select-highlight": "_f-select-highlight_igzn5_128",
+  "has-icons": "_has-icons_igzn5_135"
+};
+const ChevronIcon = ({ className }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "6 9 12 15 18 9" }) });
+const CloseIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+const PlusIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] });
+const HighlightedText = ({ text, highlight }) => {
+  if (!highlight.trim()) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: text });
+  const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(`(${escapeRegExp(highlight)})`, "gi");
+  const parts = text.split(regex);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: parts.map(
+    (part, i) => regex.test(part) ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6["f-select-highlight"], children: part }, i) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: part }, i)
+  ) });
+};
+const FSearchableSelect = forwardRef(
+  ({
+    label,
+    st,
+    children,
+    fullWidth,
+    load = false,
+    errText,
+    helpText,
+    height = "auto",
+    width = "fit-content",
+    allowCreate = false,
+    disabled: disabled2,
+    onKeyDown: restOnKeyDown,
+    onFocus: restOnFocus,
+    ...restProps
+  }, ref) => {
+    const options = useMemo(() => {
+      const results = [];
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+          const element = child;
+          const { value: childValue, children: childLabel } = element.props;
+          const valStr = childValue !== void 0 ? String(childValue) : "";
+          let labelStr = valStr;
+          if (typeof childLabel === "string" || typeof childLabel === "number") {
+            labelStr = String(childLabel);
+          } else if (valStr) {
+            labelStr = valStr;
+          }
+          if (valStr || labelStr) {
+            results.push({ value: valStr, label: labelStr });
+          }
+        }
+      });
+      return results;
+    }, [children]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const containerRef = useRef(null);
+    const visibleInputRef = useRef(null);
+    const listRef = useRef(null);
+    const lastValueRef = useRef(restProps.value !== void 0 ? String(restProps.value) : "");
+    useEffect(() => {
+      if (restProps.value !== void 0) {
+        const strValue = String(restProps.value);
+        lastValueRef.current = strValue;
+        const found = options.find((o) => o.value === strValue);
+        setSearchQuery(found ? found.label : strValue);
+      }
+    }, [restProps.value, options]);
+    const deferredQuery = useDeferredValue(searchQuery);
+    const filteredOptions = useMemo(() => {
+      if (!isOpen) return options;
+      const lowerQuery = deferredQuery.toLowerCase();
+      return options.filter((opt) => opt.label.toLowerCase().includes(lowerQuery));
+    }, [options, deferredQuery, isOpen]);
+    const showCreateOption = useMemo(() => {
+      if (!allowCreate) return false;
+      if (!deferredQuery.trim()) return false;
+      const exactMatch = filteredOptions.find((opt) => opt.label.toLowerCase() === deferredQuery.toLowerCase());
+      return !exactMatch;
+    }, [deferredQuery, filteredOptions, allowCreate]);
+    const renderList = useMemo(() => {
+      const list = filteredOptions.slice(0, 100);
+      if (showCreateOption) {
+        list.push({ value: deferredQuery, label: deferredQuery, isNew: true });
+      }
+      return list;
+    }, [filteredOptions, showCreateOption, deferredQuery]);
+    const triggerChange = (newValue) => {
+      lastValueRef.current = newValue;
+      if (restProps.onChange) {
+        const syntheticEvent = {
+          target: { name: restProps.name || "", value: newValue }
+        };
+        restProps.onChange(syntheticEvent);
+      }
+    };
+    const handleSelect = (option) => {
+      triggerChange(option.value);
+      setSearchQuery(option.label);
+      setIsOpen(false);
+      setHighlightedIndex(0);
+    };
+    const handleClear = (e) => {
+      var _a;
+      e.stopPropagation();
+      triggerChange("");
+      setSearchQuery("");
+      (_a = visibleInputRef.current) == null ? void 0 : _a.focus();
+    };
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setIsOpen(false);
+          const effectiveValue = restProps.value !== void 0 ? String(restProps.value) : lastValueRef.current;
+          if (effectiveValue) {
+            const found = options.find((o) => o.value === effectiveValue);
+            setSearchQuery(found ? found.label : effectiveValue);
+          } else {
+            setSearchQuery("");
+          }
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [restProps.value, options]);
+    const handleKeyDown = (e) => {
+      var _a;
+      if (restOnKeyDown) restOnKeyDown(e);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!isOpen) setIsOpen(true);
+        else setHighlightedIndex((prev) => prev < renderList.length - 1 ? prev + 1 : prev);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightedIndex((prev) => prev > 0 ? prev - 1 : prev);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isOpen && renderList[highlightedIndex]) {
+          handleSelect(renderList[highlightedIndex]);
+        } else {
+          setIsOpen(true);
+        }
+      } else if (e.key === "Escape") {
+        setIsOpen(false);
+        (_a = visibleInputRef.current) == null ? void 0 : _a.blur();
+      }
+    };
+    const baseStyle = {
+      width: fullWidth ? "100%" : width || "fit-content",
+      height: height || "auto",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
+    };
+    const mergedStyle = { ...baseStyle, ...st };
+    const inputId = restProps.id || `search-select-${Math.random().toString(36).substring(2, 9)}`;
+    const hasValue = restProps.value !== void 0 ? !!String(restProps.value) : !!lastValueRef.current;
+    const currentValStr = restProps.value !== void 0 ? String(restProps.value) : lastValueRef.current;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: `f-form-element ${styles$6["f-search-select"]} ${restProps.className || ""}`,
+        style: mergedStyle,
+        ref: containerRef,
+        id: inputId + "-block",
+        children: [
+          label && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "label",
+            {
+              id: inputId + "-label",
+              htmlFor: inputId,
+              className: `f-form-element__label ${errText ? "error" : ""}`,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              ref,
+              name: restProps.name,
+              value: restProps.value !== void 0 ? String(restProps.value) : "",
+              onChange: () => {
+              },
+              className: styles$6["f-select-native-hidden"],
+              tabIndex: -1,
+              disabled: disabled2,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `f-form-element__control ${load ? "is-loading" : ""}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                ref: visibleInputRef,
+                id: inputId,
+                type: "text",
+                autoComplete: "off",
+                className: `f-form-element__control-element ${styles$6["has-icons"]} ${errText ? "error" : ""}`,
+                ...restProps,
+                disabled: disabled2 || load,
+                value: searchQuery,
+                onChange: (e) => {
+                  const val = e.target.value;
+                  setSearchQuery(val);
+                  if (!isOpen) setIsOpen(true);
+                  if (allowCreate) {
+                    triggerChange(val);
+                  } else if (val === "") {
+                    triggerChange("");
+                  }
+                },
+                onKeyDown: handleKeyDown,
+                onFocus: (e) => {
+                  if (!disabled2 && !load) setIsOpen(true);
+                  if (restOnFocus) restOnFocus(e);
+                }
+              }
+            ),
+            load ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "f-form-element__loader", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FLoadIcon, { size: 10 }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6["f-select-actions"], children: [
+              hasValue && !disabled2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  onClick: handleClear,
+                  className: `${styles$6["f-select-icon"]} close`,
+                  title: "Очистить",
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$6["f-select-icon"]} ${isOpen ? styles$6["rotate"] : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronIcon, {}) })
+            ] })
+          ] }),
+          isOpen && !disabled2 && !load && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6["f-select-dropdown"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: listRef, className: styles$6["f-select-list"], children: renderList.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: styles$6["f-select-no-results"], children: allowCreate ? "Нет данных" : "Совпадений не найдено" }) : renderList.map((option, index) => /* @__PURE__ */ jsxRuntimeExports.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"] : ""}
+                                            `,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: (e) => {
+                e.stopPropagation();
+                handleSelect(option);
+              },
+              onMouseEnter: () => setHighlightedIndex(index),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: [
+                option.isNew && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { marginRight: 4 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {}) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(HighlightedText, { text: option.label, highlight: deferredQuery }),
+                option.isNew && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { opacity: 0.6, fontSize: "0.85em", marginLeft: 6 }, children: "(Создать)" })
+              ] })
+            },
+            option.value + index
+          )) }) }),
+          helpText && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "p",
+            {
+              id: inputId + "-helptext",
+              className: "f-form-element__helptext",
+              children: helpText
+            }
+          ),
+          errText && errText.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "f-form-element__errorblock",
+              children: errText.map((error2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "p",
+                {
+                  id: `${inputId}-errortext-${index}`,
+                  className: "f-form-element__errorblock_errortext",
+                  children: error2
+                },
+                index
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FSearchableSelect.displayName = "FSearchableSelect";
 const FPlusIcon = React.forwardRef(({
   color = "primary",
   size = 30,
@@ -4712,7 +5017,7 @@ const FSafeIcon = React.forwardRef(({
   );
 });
 FSafeIcon.displayName = "FSafeIcon";
-const styles$4 = {
+const styles$5 = {
   "f-function-block-alert": "_f-function-block-alert_1jotv_1",
   "f-function-alert": "_f-function-alert_1jotv_16",
   "f-function-alert-ico": "_f-function-alert-ico_1jotv_24",
@@ -4725,7 +5030,7 @@ const styles$4 = {
   "f-function-alert-body": "_f-function-alert-body_1jotv_68",
   "f-function-alert-footer": "_f-function-alert-footer_1jotv_83"
 };
-const fAlert = ({ title, body, variant = "info" }) => {
+const fAlert = ({ title: title2, body, variant = "info" }) => {
   let ico = "";
   switch (variant) {
     case "info":
@@ -4748,21 +5053,21 @@ const fAlert = ({ title, body, variant = "info" }) => {
   window.document.body.insertAdjacentHTML(
     "afterbegin",
     `
-            <div class='${styles$4["f-function-block-alert"]}' id='f-function-block-alert'>
-                <div class='${styles$4["f-function-alert"]}'>
-                    <div class='${styles$4["f-function-alert-ico"]} ${styles$4[`${variant}-alert`]}' style='color: inherit; fill: inherit'>
+            <div class='${styles$5["f-function-block-alert"]}' id='f-function-block-alert'>
+                <div class='${styles$5["f-function-alert"]}'>
+                    <div class='${styles$5["f-function-alert-ico"]} ${styles$5[`${variant}-alert`]}' style='color: inherit; fill: inherit'>
                         <svg width="28" height="28" viewBox="0 0 16 16">
                             ${ico}
                         </svg>
                     </div>
-                    <div class='${styles$4["f-function-alert-inside"]}'>
-                        <div class='${styles$4["f-function-alert-header"]}'>
-                            <h4>${title || ""}</h4>
+                    <div class='${styles$5["f-function-alert-inside"]}'>
+                        <div class='${styles$5["f-function-alert-header"]}'>
+                            <h4>${title2 || ""}</h4>
                         </div>
-                        <div class='${styles$4["f-function-alert-body"]}'>
+                        <div class='${styles$5["f-function-alert-body"]}'>
                             ${arrBody.join("")}
                         </div>
-                        <div class='${styles$4["f-function-alert-footer"]}'>
+                        <div class='${styles$5["f-function-alert-footer"]}'>
                             <FButton
                                 class='${stylesBtn["btn"]} ${stylesBtn["btn-sm"]} ${stylesBtn["btn-primary"]}'
                                 onclick='document.querySelector("#f-function-block-alert").remove()'
@@ -4777,7 +5082,7 @@ const fAlert = ({ title, body, variant = "info" }) => {
   );
 };
 const warning$2 = "_warning_de5a5_31";
-const styles$3 = {
+const styles$4 = {
   "f-function-block-confirm": "_f-function-block-confirm_de5a5_1",
   "f-function-confirm": "_f-function-confirm_de5a5_16",
   "f-function-confirm-ico": "_f-function-confirm-ico_de5a5_24",
@@ -4787,27 +5092,27 @@ const styles$3 = {
   "f-function-confirm-body": "_f-function-confirm-body_de5a5_51",
   "f-function-confirm-footer": "_f-function-confirm-footer_de5a5_65"
 };
-const fConfirm = ({ title, body }) => {
+const fConfirm = ({ title: title2, body }) => {
   return new Promise((resolve) => {
     window.document.body.insertAdjacentHTML(
       "afterbegin",
       `
-                <div class='${styles$3["f-function-block-confirm"]}' id='f-function-block-confirm'>
-                    <div class='${styles$3["f-function-confirm"]}'>
-                        <div class='${styles$3["f-function-confirm-ico"]} ${styles$3.warning}'>
+                <div class='${styles$4["f-function-block-confirm"]}' id='f-function-block-confirm'>
+                    <div class='${styles$4["f-function-confirm"]}'>
+                        <div class='${styles$4["f-function-confirm-ico"]} ${styles$4.warning}'>
                             <svg width="28" height="28" viewBox="0 0 16 16">
                                 <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                                 <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                             </svg>
                         </div>
-                        <div class='${styles$3["f-function-confirm-inside"]}'>
-                            <div class='${styles$3["f-function-confirm-header"]}'>
-                                <h4>${title || ""}</h4>
+                        <div class='${styles$4["f-function-confirm-inside"]}'>
+                            <div class='${styles$4["f-function-confirm-header"]}'>
+                                <h4>${title2 || ""}</h4>
                             </div>
-                            <div class='${styles$3["f-function-confirm-body"]}'>
+                            <div class='${styles$4["f-function-confirm-body"]}'>
                                 <span>${body}</span>
                             </div>
-                            <div class='${styles$3["f-function-confirm-footer"]}'>
+                            <div class='${styles$4["f-function-confirm-footer"]}'>
                                 <FButton
                                     id="f-function-confirm-ok"
                                     class='${stylesBtn["btn"]} ${stylesBtn["btn-sm"]} ${stylesBtn["btn-success"]}'
@@ -4847,7 +5152,7 @@ const fConfirm = ({ title, body }) => {
   });
 };
 const warning$1 = "_warning_1o5ku_31";
-const styles$2 = {
+const styles$3 = {
   "f-function-block-prompt": "_f-function-block-prompt_1o5ku_1",
   "f-function-prompt": "_f-function-prompt_1o5ku_16",
   "f-function-prompt-ico": "_f-function-prompt-ico_1o5ku_24",
@@ -4864,32 +5169,32 @@ function getValue(element) {
     return null;
   }
 }
-const fPrompt = ({ title, body }) => {
+const fPrompt = ({ title: title2, body }) => {
   return new Promise((resolve) => {
     window.document.body.insertAdjacentHTML(
       "afterbegin",
       `
-            <div class='${styles$2["f-function-block-prompt"]}' id='f-function-block-prompt'>
-                <div class='${styles$2["f-function-prompt"]}'>
-                   <div class='${styles$2["f-function-prompt-ico"]} ${styles$2.warning}'>
+            <div class='${styles$3["f-function-block-prompt"]}' id='f-function-block-prompt'>
+                <div class='${styles$3["f-function-prompt"]}'>
+                   <div class='${styles$3["f-function-prompt-ico"]} ${styles$3.warning}'>
                         <svg width="28" height="28" viewBox="0 0 16 16">
                             <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                             <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                         </svg>
                     </div>
-                   <div class='${styles$2["f-function-prompt-inside"]}'>
-                        <div class='${styles$2["f-function-prompt-header"]}'>
-                            <h4>${title || ""}</h4>
+                   <div class='${styles$3["f-function-prompt-inside"]}'>
+                        <div class='${styles$3["f-function-prompt-header"]}'>
+                            <h4>${title2 || ""}</h4>
                         </div>
-                        <div class='${styles$2["f-function-prompt-body"]}'>
+                        <div class='${styles$3["f-function-prompt-body"]}'>
                             <span>${body || ""}</span>
                             <input 
                                 type="text" 
                                 id="f-function-prompt-input"
-                                class="form-control ${styles$2["f-function-prompt-input"]}"
+                                class="form-control ${styles$3["f-function-prompt-input"]}"
                             />
                         </div>
-                        <div class='${styles$2["f-function-prompt-footer"]}'>
+                        <div class='${styles$3["f-function-prompt-footer"]}'>
                             <button
                                 id="f-function-prompt-ok"
                                 class='${stylesBtn["btn"]} ${stylesBtn["btn-sm"]} ${stylesBtn["btn-success"]}'
@@ -7124,7 +7429,7 @@ const document$1 = (data, format = "A4", orientation = "vertical") => {
   }
   return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><w:document xmlns:wpc="http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas" xmlns:cx="http://schemas.microsoft.com/office/drawing/2014/chartex" xmlns:cx1="http://schemas.microsoft.com/office/drawing/2015/9/8/chartex" xmlns:cx2="http://schemas.microsoft.com/office/drawing/2015/10/21/chartex" xmlns:cx3="http://schemas.microsoft.com/office/drawing/2016/5/9/chartex" xmlns:cx4="http://schemas.microsoft.com/office/drawing/2016/5/10/chartex" xmlns:cx5="http://schemas.microsoft.com/office/drawing/2016/5/11/chartex" xmlns:cx6="http://schemas.microsoft.com/office/drawing/2016/5/12/chartex" xmlns:cx7="http://schemas.microsoft.com/office/drawing/2016/5/13/chartex" xmlns:cx8="http://schemas.microsoft.com/office/drawing/2016/5/14/chartex" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:aink="http://schemas.microsoft.com/office/drawing/2016/ink" xmlns:am3d="http://schemas.microsoft.com/office/drawing/2017/model3d" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:oel="http://schemas.microsoft.com/office/2019/extlst" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" xmlns:w15="http://schemas.microsoft.com/office/word/2012/wordml" xmlns:w16cex="http://schemas.microsoft.com/office/word/2018/wordml/cex" xmlns:w16cid="http://schemas.microsoft.com/office/word/2016/wordml/cid" xmlns:w16="http://schemas.microsoft.com/office/word/2018/wordml" xmlns:w16sdtdh="http://schemas.microsoft.com/office/word/2020/wordml/sdtdatahash" xmlns:w16se="http://schemas.microsoft.com/office/word/2015/wordml/symex" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:wpi="http://schemas.microsoft.com/office/word/2010/wordprocessingInk" xmlns:wne="http://schemas.microsoft.com/office/word/2006/wordml" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape" mc:Ignorable="w14 w15 w16se w16cid w16 w16cex w16sdtdh wp14"><w:body>${data}<w:sectPr><w:pgSz w:w="${width}" w:h="${height}" w:orient="${orientation}"/><w:pgMar w:top="${top}" w:right="${right2}" w:bottom="${bottom}" w:left="${left2}" w:header="${header}" w:footer="${footer}" w:gutter="0"/><w:cols w:space="708"/><w:docGrid w:linePitch="360"/></w:sectPr></w:body></w:document>`;
 };
-const styles$1 = () => {
+const styles$2 = () => {
   return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <w:styles xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
@@ -10047,7 +10352,7 @@ async function generateDocx({ data, format, orientation, fileName }) {
   zip.file("word/document.xml", document$1(data, format, orientation));
   zip.file("word/fontTable.xml", fontTable());
   zip.file("word/settings.xml", settings());
-  zip.file("word/styles.xml", styles$1());
+  zip.file("word/styles.xml", styles$2());
   zip.file("word/theme/theme1.xml", theme1());
   zip.file("word/webSettings.xml", webSettings());
   const content = await zip.generateAsync({ type: "blob" });
@@ -38326,7 +38631,7 @@ function requireReactDomServerLegacy_browser_development() {
         }
         return getServerSnapshot();
       }
-      function useDeferredValue(value) {
+      function useDeferredValue2(value) {
         resolveCurrentlyRenderingComponent();
         return value;
       }
@@ -38365,7 +38670,7 @@ function requireReactDomServerLegacy_browser_development() {
         useEffect: noop2,
         // Debugging effect
         useDebugValue: noop2,
-        useDeferredValue,
+        useDeferredValue: useDeferredValue2,
         useTransition,
         useId,
         // Subscriptions are not setup in a server environment.
@@ -43709,7 +44014,7 @@ function requireReactDomServer_browser_development() {
         }
         return getServerSnapshot();
       }
-      function useDeferredValue(value) {
+      function useDeferredValue2(value) {
         resolveCurrentlyRenderingComponent();
         return value;
       }
@@ -43748,7 +44053,7 @@ function requireReactDomServer_browser_development() {
         useEffect: noop2,
         // Debugging effect
         useDebugValue: noop2,
-        useDeferredValue,
+        useDeferredValue: useDeferredValue2,
         useTransition,
         useId,
         // Subscriptions are not setup in a server environment.
@@ -49847,7 +50152,7 @@ const info = "_info_1da8u_75";
 const error = "_error_1da8u_80";
 const success = "_success_1da8u_85";
 const warning = "_warning_1da8u_90";
-const styles = {
+const styles$1 = {
   "f-function-block-notification": "_f-function-block-notification_1da8u_51",
   "f-function-notification": "_f-function-notification_1da8u_55",
   "f-function-notification-ico": "_f-function-notification-ico_1da8u_67",
@@ -49873,7 +50178,7 @@ const styles = {
   "notification-progress-animated": "_notification-progress-animated_1da8u_1"
 };
 const fNotification = ({
-  title,
+  title: title2,
   body,
   variant = "info",
   timeSecClose,
@@ -49905,31 +50210,31 @@ const fNotification = ({
     const randId = fGenerateUniqueId();
     const idFuncBlockNot = "f-function-block-notification-" + randId;
     const not = `
-            <div class='${styles["f-function-block-notification"]}' id="${id === void 0 ? idFuncBlockNot : id}">
-                <div class='${styles["f-function-notification"]}'>
-                    <div class='${styles["f-function-notification-ico"]} ${styles[variant + "-notification"]}'>
+            <div class='${styles$1["f-function-block-notification"]}' id="${id === void 0 ? idFuncBlockNot : id}">
+                <div class='${styles$1["f-function-notification"]}'>
+                    <div class='${styles$1["f-function-notification-ico"]} ${styles$1[variant + "-notification"]}'>
                         <svg width="28" height="28" viewBox="0 0 16 16">
                             ${ico}
                         </svg>
                     </div>
-                    <div class='${styles["f-function-notification-inside"]}'>
-                        <div class='${styles["f-function-notification-header"]}'>
-                            <h4>${title !== void 0 ? title : ""}</h4>
+                    <div class='${styles$1["f-function-notification-inside"]}'>
+                        <div class='${styles$1["f-function-notification-header"]}'>
+                            <h4>${title2 !== void 0 ? title2 : ""}</h4>
                             ${buttonClose ? `<svg
                                                     width="25"
-                                                    class="bi bi-x-lg primary ${styles["close-not"]}"
+                                                    class="bi bi-x-lg primary ${styles$1["close-not"]}"
                                                     viewBox="0 0 16 16"
                                                 >
                                                     <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                                                 </svg>` : ""}
                         </div>
-                        <div class='${styles["f-function-notification-body"]}'>
+                        <div class='${styles$1["f-function-notification-body"]}'>
                              ${arrBody.join("")}
                         </div>
                     </div>
-                   ${timeSecClose ? `<div class="${styles["f-notification-progress"]}">
-                       <div class="${styles["f-notification-progress-bar"]}">
-                            <div class="${styles["f-notification-progress-value"]} ${styles[variant]}" id="f-notification-progress-value-${randId}" style="animation: notification-progress-animated ${timeSecClose}s linear;"/>
+                   ${timeSecClose ? `<div class="${styles$1["f-notification-progress"]}">
+                       <div class="${styles$1["f-notification-progress-bar"]}">
+                            <div class="${styles$1["f-notification-progress-value"]} ${styles$1[variant]}" id="f-notification-progress-value-${randId}" style="animation: notification-progress-animated ${timeSecClose}s linear;"/>
                        </div>
                    </div>` : ""}
                 </div>
@@ -49957,11 +50262,11 @@ const fNotification = ({
     if (buttonClose) {
       const el = window.document.querySelector(`#${idFuncBlockNot}`);
       if (el !== null) {
-        const svgElement = el.querySelector(`.${styles["close-not"]}`);
+        const svgElement = el.querySelector(`.${styles$1["close-not"]}`);
         if (svgElement !== null) {
           svgElement.addEventListener("click", () => {
-            el.classList.remove(styles["f-function-notification-visible"]);
-            el.classList.add(styles["f-function-notification-hidden"]);
+            el.classList.remove(styles$1["f-function-notification-visible"]);
+            el.classList.add(styles$1["f-function-notification-hidden"]);
             setTimeout(() => {
               if (el.parentNode) {
                 el.parentNode.removeChild(el);
@@ -49975,14 +50280,14 @@ const fNotification = ({
     setTimeout(() => {
       const el = window.document.querySelector(`#${idFuncBlockNot}`);
       if (el !== null && el !== void 0) {
-        el.className += " " + styles["f-function-notification-visible"];
+        el.className += " " + styles$1["f-function-notification-visible"];
       }
     });
     if (timeSecClose !== void 0) {
       const el = window.document.querySelector(`#${idFuncBlockNot}`);
       if (el !== null) {
         setTimeout(() => {
-          el.className = styles["f-function-notification-hidden"];
+          el.className = styles$1["f-function-notification-hidden"];
         }, (timeSecClose - 1) * 1e3);
         setTimeout(() => {
           if (el.parentNode) {
@@ -50000,9 +50305,9 @@ const fNotificationDelete = (id) => {
   if (!el) return;
   const container2 = document.getElementById("block-notification");
   if (!container2) return;
-  el.className = styles["f-function-notification-hidden"];
+  el.className = styles$1["f-function-notification-hidden"];
   setTimeout(() => {
-    el.classList.remove(styles["f-function-notification-visible"]);
+    el.classList.remove(styles$1["f-function-notification-visible"]);
   }, 1e3);
   setTimeout(() => {
     if (el.parentNode) el.parentNode.removeChild(el);
@@ -52641,6 +52946,102 @@ const useFApi = ({ doNotUseState = false, defaultState = null, getValueByPath =
   };
   return { data, loading, error: error2, execute, reset };
 };
+const waterError = "_waterError_10t7p_1";
+const scene = "_scene_10t7p_12";
+const waves = "_waves_10t7p_18";
+const wave1 = "_wave1_10t7p_26";
+const wave2 = "_wave2_10t7p_27";
+const wave3 = "_wave3_10t7p_28";
+const bubbles = "_bubbles_10t7p_64";
+const bubble = "_bubble_10t7p_64";
+const container = "_container_10t7p_95";
+const card = "_card_10t7p_100";
+const drop = "_drop_10t7p_121";
+const dropSvg = "_dropSvg_10t7p_136";
+const title = "_title_10t7p_142";
+const subtitle = "_subtitle_10t7p_152";
+const actions = "_actions_10t7p_159";
+const btnPrimary = "_btnPrimary_10t7p_167";
+const btnSecondary = "_btnSecondary_10t7p_168";
+const ripple = "_ripple_10t7p_199";
+const styles = {
+  waterError,
+  scene,
+  waves,
+  wave1,
+  wave2,
+  wave3,
+  bubbles,
+  bubble,
+  container,
+  card,
+  drop,
+  dropSvg,
+  title,
+  subtitle,
+  actions,
+  btnPrimary,
+  btnSecondary,
+  ripple
+};
+const FWaterErrorBoundaryPage = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.waterError, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.scene, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.waves, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.wave1 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.wave2 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.wave3 })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.bubbles, children: [...Array(15)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: styles.bubble,
+          style: {
+            left: `${Math.random() * 100}%`,
+            animationDelay: `${Math.random() * 8}s`,
+            animationDuration: `${10 + Math.random() * 10}s`
+          }
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.card, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.drop, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 100 120", className: styles.dropSvg, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "blueGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#00d4ff" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#0066ff" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M50 15 C25 55, 25 90, 50 115 C75 90, 75 55, 50 15", fill: "url(#blueGradient)" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: styles.title, children: "Поток прерван" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: styles.subtitle, children: [
+        "Произошла ошибка в системе водоучёта.",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+        "Мы уже направляем бригаду гидротехников.",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+        "Идёт восстановление данных…"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.actions, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: styles.btnPrimary,
+            onClick: () => {
+              const btn2 = document.querySelector(`.${styles.btnPrimary}`);
+              const ripple2 = document.createElement("div");
+              ripple2.className = styles.ripple;
+              btn2.appendChild(ripple2);
+              setTimeout(() => ripple2.remove(), 700);
+              window.location.reload();
+            },
+            children: "Обновить страницу"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: styles.btnSecondary, onClick: () => window.location.href = "/", children: "На главную" })
+      ] })
+    ] }) })
+  ] });
+};
 export {
   FAccordion,
   FAlert,
@@ -52688,6 +53089,7 @@ export {
   FReloadIcon,
   FSafeIcon,
   FSearchBox,
+  FSearchableSelect,
   FSelect,
   FSelectItem,
   FSelectSearchDb,
@@ -52709,6 +53111,7 @@ export {
   FTooltip,
   FTrashIcon,
   FUnlinkIcon,
+  FWaterErrorBoundaryPage,
   fAlert,
   fBankRound,
   fConfirm,