@docsvision/management-console 6.2.0-beta.11 → 6.2.0-beta.13

package/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React__default, { useState, useEffect, createElement, useRef, useMemo, useContext, memo, isValidElement, cloneElement, Children, createContext, useCallback, useDebugValue, useLayoutEffect, forwardRef as forwardRef$1, Fragment as Fragment$1, Component, useReducer } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Accordion as Accordion$1, AccordionSummary, AccordionDetails, Typography as Typography$3, Button as Button$3, Box, CircularProgress as CircularProgress$3, Tooltip as Tooltip$2, Breadcrumbs, IconButton as IconButton$3, Popover as Popover$4, SvgIcon as SvgIcon$3, TableCell as TableCell$2, Grid as Grid$1, Paper as Paper$3, Chip as Chip$1, MenuItem as MenuItem$2, List as List$4, ListItemButton, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1, ListItem as ListItem$1, Input as Input$3, TextField as TextField$3, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, RadioGroup, Radio, createTheme as createTheme$3, TableContainer, Table as Table$1, TableHead, TableRow as TableRow$1, TableBody as TableBody$1, capitalize as capitalize$2, ThemeProvider as ThemeProvider$1, InputAdornment as InputAdornment$3, Dialog as Dialog$2, DialogTitle, DialogContent as DialogContent$2, DialogActions as DialogActions$2 } from "@mui/material";
+import { Accordion as Accordion$1, AccordionSummary, AccordionDetails, Typography as Typography$3, Button as Button$3, Box, CircularProgress as CircularProgress$3, Tooltip as Tooltip$2, Breadcrumbs, IconButton as IconButton$3, Popover as Popover$4, SvgIcon as SvgIcon$3, TableCell as TableCell$2, Grid as Grid$1, Paper as Paper$3, Chip as Chip$1, MenuItem as MenuItem$2, List as List$4, ListItemButton, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1, ListItem as ListItem$1, Input as Input$3, TextField as TextField$3, InputAdornment as InputAdornment$3, Stack, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, RadioGroup, Radio, createTheme as createTheme$3, TableContainer, Table as Table$1, TableHead, TableRow as TableRow$1, TableBody as TableBody$1, capitalize as capitalize$2, ThemeProvider as ThemeProvider$1, Dialog as Dialog$2, DialogTitle, DialogContent as DialogContent$2, DialogActions as DialogActions$2 } from "@mui/material";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { flushSync } from "react-dom";
 import { unstable_createGetCssVar, createSpacing as createSpacing$2, useTheme as useTheme$4, GlobalStyles as GlobalStyles$1, unstable_memoTheme, keyframes, css as css$2, styled as styled$1, alpha as alpha$2, lighten as lighten$2, darken as darken$2, decomposeColor as decomposeColor$2, recomposeColor as recomposeColor$2, getThemeProps as getThemeProps$2 } from "@mui/system";
@@ -66,7 +66,7 @@ function Accordion(props) {
 }
 function AlertBanner({ text }) {
   if (text) {
-    return /* @__PURE__ */ jsx("div", { className: "alert-banner", children: /* @__PURE__ */ jsx(Typography$3, { variant: "subtitle2", color: "inherit", children: text }) });
+    return /* @__PURE__ */ jsx("div", { className: "alert-banner", children: /* @__PURE__ */ jsx(Typography$3, { color: "inherit", children: text }) });
   }
 }
 function ButtonWithLoading(props) {
@@ -218,7 +218,7 @@ var __assign$2 = function() {
   };
   return __assign$2.apply(this, arguments);
 };
-function __rest$2(s2, e2) {
+function __rest$3(s2, e2) {
   var t2 = {};
   for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0)
     t2[p2] = s2[p2];
@@ -2220,7 +2220,7 @@ function classIfElse(condition, trueCss, falseCss) {
   return condition ? " " + trueCss + " " : " " + falseCss + " ";
 }
 var Bar = function(props) {
-  var position = props.position, divProps = __rest$2(props, ["position"]);
+  var position = props.position, divProps = __rest$3(props, ["position"]);
   return React__default.createElement(
     "div",
     __assign$2({}, divProps, { className: "scroll-bar__bar" + classIfDefined(props.className) }),
@@ -2237,7 +2237,7 @@ var ScrollPinIcon = function(props) {
 var Handle = function(props) {
   var position = props.position, title = props.title;
   props.forceVisible;
-  var divProps = __rest$2(props, ["position", "title", "forceVisible"]);
+  var divProps = __rest$3(props, ["position", "title", "forceVisible"]);
   return React__default.createElement(
     "div",
     __assign$2({}, divProps, { className: "scroll-bar__handle" + classIfDefined(props.className) + classIf(props.forceVisible, "scroll-bar__handle_force-visible"), style: { top: (position * 100).toFixed(2) + "%" } }),
@@ -2249,7 +2249,7 @@ var Placement = function(props) {
   props.visible;
   props.topIdent;
   props.bottomIdent;
-  var divProps = __rest$2(props, ["visible", "topIdent", "bottomIdent"]);
+  var divProps = __rest$3(props, ["visible", "topIdent", "bottomIdent"]);
   return React__default.createElement("div", __assign$2({}, divProps, { className: "scroll-bar__placement" + classIfDefined(props.className) + showIf(props.visible), style: { top: props.topIdent, bottom: props.bottomIdent } }));
 };
 function calculatePosition(index, bottomIndex, totalCount) {
@@ -2445,7 +2445,7 @@ var ScrollBar = function(props) {
   props.browserScrollPosition;
   props.onChangeScrollPosition;
   props.scrollBarId;
-  var divProps = __rest$2(props, ["topIndex", "bottomIndex", "totalCount", "topIdent", "bottomIdent", "browserScrollPosition", "onChangeScrollPosition", "scrollBarId"]);
+  var divProps = __rest$3(props, ["topIndex", "bottomIndex", "totalCount", "topIdent", "bottomIdent", "browserScrollPosition", "onChangeScrollPosition", "scrollBarId"]);
   var dragStarted = e(logic.$dragStarted);
   var position = e(logic.$dragPosition);
   var dragIndex = e(logic.$dragIndex);
@@ -2688,7 +2688,7 @@ var Toolbar$4 = function(props) {
   var _a;
   var height2 = e((_a = props.composition.services.toolbarHeight) === null || _a === void 0 ? void 0 : _a.$height);
   props.composition;
-  var className = props.className, style2 = props.style, divProps = __rest$2(props, ["composition", "className", "style"]);
+  var className = props.className, style2 = props.style, divProps = __rest$3(props, ["composition", "className", "style"]);
   return React__default.createElement("div", __assign$2({ className: "dv-toolbar" + classIfDefined(className), style: __assign$2({ height: height2 + "px" }, style2) }, divProps, { "data-testid": "dv-toolbar" }), props.children);
 };
 var ToolbarHeightService = (
@@ -2837,7 +2837,7 @@ var __assign$1 = function() {
   };
   return __assign$1.apply(this, arguments);
 };
-function __rest$1(s2, e2) {
+function __rest$2(s2, e2) {
   var t2 = {};
   for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0)
     t2[p2] = s2[p2];
@@ -2852,7 +2852,7 @@ var uid = function() {
   return Math.random().toString(36).substring(6);
 };
 var SVG = function(_a) {
-  var animate2 = _a.animate, backgroundColor2 = _a.backgroundColor, backgroundOpacity = _a.backgroundOpacity, baseUrl = _a.baseUrl, children = _a.children, foregroundColor = _a.foregroundColor, foregroundOpacity = _a.foregroundOpacity, gradientRatio = _a.gradientRatio, uniqueKey = _a.uniqueKey, interval = _a.interval, rtl = _a.rtl, speed = _a.speed, style2 = _a.style, title = _a.title, props = __rest$1(_a, ["animate", "backgroundColor", "backgroundOpacity", "baseUrl", "children", "foregroundColor", "foregroundOpacity", "gradientRatio", "uniqueKey", "interval", "rtl", "speed", "style", "title"]);
+  var animate2 = _a.animate, backgroundColor2 = _a.backgroundColor, backgroundOpacity = _a.backgroundOpacity, baseUrl = _a.baseUrl, children = _a.children, foregroundColor = _a.foregroundColor, foregroundOpacity = _a.foregroundOpacity, gradientRatio = _a.gradientRatio, uniqueKey = _a.uniqueKey, interval = _a.interval, rtl = _a.rtl, speed = _a.speed, style2 = _a.style, title = _a.title, props = __rest$2(_a, ["animate", "backgroundColor", "backgroundOpacity", "baseUrl", "children", "foregroundColor", "foregroundOpacity", "gradientRatio", "uniqueKey", "interval", "rtl", "speed", "style", "title"]);
   var fixedId = uniqueKey || uid();
   var idClip = fixedId + "-diff";
   var idGradient = fixedId + "-animated-diff";
@@ -3191,7 +3191,7 @@ var LazyLoadingService = (
 );
 var Icon = function(props) {
   var _a;
-  var loading = props.loading, iconClass = props.iconClass, loadingIconClass = props.loadingIconClass, iconProps = __rest$2(props, ["loading", "iconClass", "loadingIconClass"]);
+  var loading = props.loading, iconClass = props.iconClass, loadingIconClass = props.loadingIconClass, iconProps = __rest$3(props, ["loading", "iconClass", "loadingIconClass"]);
   return React__default.createElement("div", __assign$2({}, iconProps, { "data-testid": loading ? "dv-icon_loading" : "", className: classNames("dv-icon", props.className, (_a = {
     "dv-icon_visible": iconClass || loadingIconClass,
     "dv-icon_loading": loading,
@@ -3204,7 +3204,7 @@ var Icon = function(props) {
   ) : props.children);
 };
 var LoadingMore = function(props) {
-  var loading = props.loading, divProps = __rest$2(props, ["loading"]);
+  var loading = props.loading, divProps = __rest$3(props, ["loading"]);
   return React__default.createElement(
     "div",
     __assign$2({}, divProps, { className: "loading-more__container" + showIf(loading) + classIfDefined(props.className), "data-testid": "loading-more__container" }),
@@ -3882,7 +3882,7 @@ var TableHeaderCellContentPlugin = {
   }
 };
 var TableHeaderColumn = function(props) {
-  var _a = props.padding, padding2 = _a === void 0 ? true : _a, thProps = __rest$2(props, ["padding"]);
+  var _a = props.padding, padding2 = _a === void 0 ? true : _a, thProps = __rest$3(props, ["padding"]);
   return React__default.createElement("th", __assign$2({}, thProps, { className: classNames("dv-table-header-column", classIfNot(padding2, "dv-table-header-column_no-padding"), props.className) }));
 };
 var TableHeaderColumnContentWrapperComponent = function(props) {
@@ -3943,7 +3943,7 @@ function ListViewRowPlugin(specialColumn) {
     component: function(props) {
       var _a;
       var _b, _c, _d;
-      var _e2 = props, className = _e2.className, composition = _e2.composition, otherProps = __rest$2(_e2, ["className", "composition"]);
+      var _e2 = props, className = _e2.className, composition = _e2.composition, otherProps = __rest$3(_e2, ["className", "composition"]);
       var viewMode = (_c = (_b = composition.data.tableData) === null || _b === void 0 ? void 0 : _b.ext.gridUserSettings.gridUserSettings.columnWidthMode) !== null && _c !== void 0 ? _c : 0;
       var cellAttributeClassNames = (_a = {}, _a[ListViewRowPluginStyleTypes.Minimal] = "dv-ribbon-row__cell-attributes_width_minimal", _a[ListViewRowPluginStyleTypes.Medium] = "dv-ribbon-row__cell-attributes_width_medium", _a[ListViewRowPluginStyleTypes.Maximal] = "dv-ribbon-row__cell-attributes_width_maximal", _a);
       var withSpecialColumn = false;
@@ -3975,7 +3975,7 @@ var ListViewCellPlugin = {
     return getListViewEnabled(composition.data.tableData).value;
   },
   component: function(props) {
-    var _a = props, className = _a.className, composition = _a.composition, otherProps = __rest$2(_a, ["className", "composition"]);
+    var _a = props, className = _a.className, composition = _a.composition, otherProps = __rest$3(_a, ["className", "composition"]);
     return React__default.createElement(
       "div",
       __assign$2({ className: "dv-ribbon-cell" + classIfDefined(className) }, otherProps),
@@ -4010,11 +4010,11 @@ var ListViewHeaderPlugin = {
 var Container$1 = function(props) {
   props.name;
   props.title;
-  var className = props.className, containerProps = __rest$2(props, ["name", "title", "className"]);
+  var className = props.className, containerProps = __rest$3(props, ["name", "title", "className"]);
   return React__default.createElement("button", __assign$2({ key: props.name, className: classNames("dv-icon-button__container", className), "data-button-name": props.name, "aria-label": props.title }, containerProps), props.children || props.value);
 };
 var StyledBody = function(props) {
-  var className = props.className, disabled = props.disabled, bodyProps = __rest$2(props, ["className", "disabled"]);
+  var className = props.className, disabled = props.disabled, bodyProps = __rest$3(props, ["className", "disabled"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-icon-button__styled-body", className, { "dv-icon-button__styled-body_disabled": disabled }) }, bodyProps), props.children);
 };
 var IconButtonView = (
@@ -4030,7 +4030,7 @@ var IconButtonView = (
 );
 var IconButton$2 = function(props) {
   props.iconClassName;
-  var disabled = props.disabled, children = props.children, buttonProps = __rest$2(props, ["iconClassName", "disabled", "children"]);
+  var disabled = props.disabled, children = props.children, buttonProps = __rest$3(props, ["iconClassName", "disabled", "children"]);
   var view = useView(props, IconButtonView);
   return React__default.createElement(
     view.buttonContainer,
@@ -5185,11 +5185,11 @@ var PopoverLogic = (
 );
 function PopoverModal(props) {
   var hideClassName2 = "dv-popover__modal_hide";
-  var isOpen = props.isOpen, divProps = __rest$2(props, ["isOpen"]);
+  var isOpen = props.isOpen, divProps = __rest$3(props, ["isOpen"]);
   return React__default.createElement("div", __assign$2({ className: "dv-popover__modal" + classIfNot(isOpen, hideClassName2) }, divProps), props.children);
 }
 var PopoverWrapper = React__default.forwardRef(function(props, ref2) {
-  var className = props.className, divProps = __rest$2(props, ["className"]);
+  var className = props.className, divProps = __rest$3(props, ["className"]);
   return React__default.createElement("div", __assign$2({ className: "dv-popover__wrapper" + classIfDefined(className), ref: ref2 }, divProps), props.children);
 });
 var PopoverView = (
@@ -5249,7 +5249,7 @@ var Popover$3 = function(props) {
   );
 };
 var MenuContent = function(props) {
-  var className = props.className, isMobile = props.isMobile, children = props.children, divProps = __rest$2(props, ["className", "isMobile", "children"]);
+  var className = props.className, isMobile = props.isMobile, children = props.children, divProps = __rest$3(props, ["className", "isMobile", "children"]);
   var defaultClass = isMobile ? "dv-context-menu__content_type_mobile" : "dv-context-menu__content_type_desktop";
   return React__default.createElement("div", __assign$2({ className: classNames("dv-context-menu__content", className, defaultClass) }, divProps), children);
 };
@@ -5259,7 +5259,7 @@ var DevicesVisibility = function(props) {
   return isVisible2 ? React__default.createElement("div", null, props.children) : React__default.createElement("div", null);
 };
 var DesktopBar = function(props) {
-  var expanded = props.expanded, children = props.children, className = props.className, divProps = __rest$2(props, ["expanded", "children", "className"]);
+  var expanded = props.expanded, children = props.children, className = props.className, divProps = __rest$3(props, ["expanded", "children", "className"]);
   return React__default.createElement(
     "div",
     __assign$2({}, divProps, { className: classNames("dv-context-menu__desktop-bar", className, showIf(expanded)) }),
@@ -5312,7 +5312,7 @@ var MobileBar = function(props) {
   );
 };
 var MenuBar = React__default.forwardRef(function(props, ref2) {
-  var children = props.children, className = props.className, divProps = __rest$2(props, ["children", "className"]);
+  var children = props.children, className = props.className, divProps = __rest$3(props, ["children", "className"]);
   return React__default.createElement("div", __assign$2({ ref: ref2, className: classNames("dv-adaptive-menu__bar", className) }, divProps), children);
 });
 var focusableSelector = "a[href], area[href], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]";
@@ -5819,7 +5819,7 @@ var ContextMenu = function(props) {
   );
 };
 var DesktopItem = function(props) {
-  var name = props.name, iconClassName = props.iconClassName, className = props.className, onClick = props.onClick, children = props.children, padding2 = props.padding, visible = props.visible, title = props.title, dataTestId = props.dataTestId, divProps = __rest$2(props, ["name", "iconClassName", "className", "onClick", "children", "padding", "visible", "title", "dataTestId"]);
+  var name = props.name, iconClassName = props.iconClassName, className = props.className, onClick = props.onClick, children = props.children, padding2 = props.padding, visible = props.visible, title = props.title, dataTestId = props.dataTestId, divProps = __rest$3(props, ["name", "iconClassName", "className", "onClick", "children", "padding", "visible", "title", "dataTestId"]);
   var wrap;
   var onKeyDown = function(event) {
     if (event.key === "Enter" || event.key === " ") {
@@ -5843,7 +5843,7 @@ var DesktopItem = function(props) {
   );
 };
 var MobileItem = function(props) {
-  var name = props.name, className = props.className, children = props.children, padding2 = props.padding, visible = props.visible, divProps = __rest$2(props, ["name", "className", "children", "padding", "visible"]);
+  var name = props.name, className = props.className, children = props.children, padding2 = props.padding, visible = props.visible, divProps = __rest$3(props, ["name", "className", "children", "padding", "visible"]);
   var wrapClassName = classNames("dv-context-menu__mobile-item", showIf(visible || visible === void 0), {
     "dv-context-menu__mobile-item_padding-to-child": padding2
   });
@@ -5867,7 +5867,7 @@ var MenuItemView = (
 );
 var MenuItem$1 = function(props) {
   var view = useView(props, MenuItemView);
-  var children = props.children, htmlProps = __rest$2(props, ["children"]);
+  var children = props.children, htmlProps = __rest$3(props, ["children"]);
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -6443,7 +6443,7 @@ serviceName(function(x) {
   return x.sidePanel;
 });
 var SidePanelToggleIcon = function(props) {
-  var open = props.open, svgProps = __rest$2(props, ["open"]);
+  var open = props.open, svgProps = __rest$3(props, ["open"]);
   return React__default.createElement(
     "svg",
     __assign$2({ version: "1.1", width: "24", height: "24", viewBox: "0 0 24 24", fill: "rgba(0, 0, 0, 0.54)", transform: open ? "scale(-1, 1)" : "", className: "dv-side-panel__toolbar-icon" }, svgProps),
@@ -6503,15 +6503,15 @@ var ModalDialogBorderSide;
 })(ModalDialogBorderSide || (ModalDialogBorderSide = {}));
 var ModalDialogBorder = function(props) {
   props.color;
-  var _b = props.side, side = _b === void 0 ? ModalDialogBorderSide.Top : _b, divProps = __rest$2(props, ["color", "side"]);
+  var _b = props.side, side = _b === void 0 ? ModalDialogBorderSide.Top : _b, divProps = __rest$3(props, ["color", "side"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-modal-dialog__border", "dv-modal-dialog__border_" + side), style: { backgroundColor: props.color } }, divProps));
 };
 var ModalDialogBox = function(props) {
-  var defaultWidth = props.defaultWidth, maxWidth2 = props.maxWidth, maxHeight2 = props.maxHeight, divProps = __rest$2(props, ["defaultWidth", "maxWidth", "maxHeight"]);
+  var defaultWidth = props.defaultWidth, maxWidth2 = props.maxWidth, maxHeight2 = props.maxHeight, divProps = __rest$3(props, ["defaultWidth", "maxWidth", "maxHeight"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-modal-dialog__box", props.className, { "dv-modal-dialog__box_default": !!defaultWidth }), style: { maxWidth: maxWidth2, maxHeight: maxHeight2 } }, divProps), props.children);
 };
 var ModalDialogButtonPanel = function(props) {
-  var children = props.children, className = props.className, divProps = __rest$2(props, ["children", "className"]);
+  var children = props.children, className = props.className, divProps = __rest$3(props, ["children", "className"]);
   var wrapWithItem = function(child, key) {
     return React__default.createElement("div", { key, className: classNames("dv-modal-dialog__button-panel-item"), children: child });
   };
@@ -6520,7 +6520,7 @@ var ModalDialogButtonPanel = function(props) {
   }) : wrapWithItem(children, "item"));
 };
 var ModalDialogCloseButton = function(props) {
-  var _a = props.enabled, enabled = _a === void 0 ? true : _a, className = props.className, linkProps = __rest$2(props, ["enabled", "className"]);
+  var _a = props.enabled, enabled = _a === void 0 ? true : _a, className = props.className, linkProps = __rest$3(props, ["enabled", "className"]);
   return React__default.createElement("a", __assign$2({ className: classNames("dv-modal-dialog__close-button", className), "data-testid": "dv-modal-dialog__close-button", onClick: function(ev) {
     var _a2;
     return enabled && ((_a2 = props.onClick) === null || _a2 === void 0 ? void 0 : _a2.call(props, ev));
@@ -6531,7 +6531,7 @@ var ModalDialogContainer = function(props) {
   var isOpen = props.isOpen, _a = props.stopClickPropagation, stopClickPropagation = _a === void 0 ? true : _a, onEsc = props.onEsc;
   props.onClick;
   var disabledEscHandler = props.disabledEscHandler;
-  __rest$2(props, ["isOpen", "stopClickPropagation", "onEsc", "onClick", "disabledEscHandler"]);
+  __rest$3(props, ["isOpen", "stopClickPropagation", "onEsc", "onClick", "disabledEscHandler"]);
   var onContentClick = function(event) {
     if (stopClickPropagation) {
       event.nativeEvent.stopPropagation();
@@ -6550,11 +6550,11 @@ var ModalDialogContent = function(props) {
 };
 var ModalDialogHeader = function(props) {
   props.className;
-  var divProps = __rest$2(props, ["className"]);
+  var divProps = __rest$3(props, ["className"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-modal-dialog__header", props.className), "data-testid": "dv-modal-dialog__header" }, divProps), props.children);
 };
 var ModalDialogScrollable = function(props) {
-  var maxHeight2 = props.maxHeight, divProps = __rest$2(props, ["maxHeight"]);
+  var maxHeight2 = props.maxHeight, divProps = __rest$3(props, ["maxHeight"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-modal-dialog__scrollable", props.className), style: { maxHeight: maxHeight2 } }, divProps), props.children);
 };
 var mModalDialogHostContainerProvider;
@@ -6604,7 +6604,7 @@ var ModalHost = function(props) {
 };
 var ModalBackdrop$1 = function(props) {
   var currentClickTarget;
-  var onClick = props.onClick, visible = props.visible, htmlProps = __rest$2(props, ["onClick", "visible"]);
+  var onClick = props.onClick, visible = props.visible, htmlProps = __rest$3(props, ["onClick", "visible"]);
   var onMouseDown = function(e2) {
     currentClickTarget = e2.target;
   };
@@ -6766,7 +6766,7 @@ var ModalDialog$2 = function(props) {
 };
 var SCROLL_BAR_IDENT = 16;
 var SidePanel = function(props) {
-  var children = props.children, composition = props.composition, className = props.className, style2 = props.style, divProps = __rest$2(props, ["children", "composition", "className", "style"]);
+  var children = props.children, composition = props.composition, className = props.className, style2 = props.style, divProps = __rest$3(props, ["children", "composition", "className", "style"]);
   var isOpen = e(props.composition.services.sidePanel.$isOpen);
   var scrollContainer = e(props.composition.services.scrollContainer.$scrollContainer);
   e(props.composition.services.windowSize.$size);
@@ -7664,7 +7664,7 @@ var ButtonColorModes;
   ButtonColorModes2[ButtonColorModes2["Secondary"] = 1] = "Secondary";
 })(ButtonColorModes || (ButtonColorModes = {}));
 var ButtonStyledBody = function(props) {
-  var className = props.className, disabled = props.disabled, colorMode = props.colorMode, value = props.value, align = props.align, loading = props.loading, iconClass = props.iconClass, loadingIconClass = props.loadingIconClass, loadingIconCenter = props.loadingIconCenter, bodyProps = __rest$2(props, ["className", "disabled", "colorMode", "value", "align", "loading", "iconClass", "loadingIconClass", "loadingIconCenter"]);
+  var className = props.className, disabled = props.disabled, colorMode = props.colorMode, value = props.value, align = props.align, loading = props.loading, iconClass = props.iconClass, loadingIconClass = props.loadingIconClass, loadingIconCenter = props.loadingIconCenter, bodyProps = __rest$3(props, ["className", "disabled", "colorMode", "value", "align", "loading", "iconClass", "loadingIconClass", "loadingIconCenter"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-button-body", className, {
     "dv-button-body_disabled": disabled && colorMode !== ButtonColorModes.Primary,
     "dv-button-body_primary-disabled": disabled && colorMode === ButtonColorModes.Primary,
@@ -7677,11 +7677,11 @@ var ButtonStyledBody = function(props) {
   }) }, bodyProps), props.children);
 };
 var ButtonContainer = function(props) {
-  var className = props.className, stretchWidth = props.stretchWidth, containerProps = __rest$2(props, ["className", "stretchWidth"]);
+  var className = props.className, stretchWidth = props.stretchWidth, containerProps = __rest$3(props, ["className", "stretchWidth"]);
   return React__default.createElement("button", __assign$2({ className: classNames("dv-button", className, { "dv-button_stretch-width": stretchWidth !== false }) }, containerProps), props.children || props.value);
 };
 var TextSimple$1 = function(props) {
-  var paddingLeft = props.paddingLeft, textProps = __rest$2(props, ["paddingLeft"]);
+  var paddingLeft = props.paddingLeft, textProps = __rest$3(props, ["paddingLeft"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-button-text", props.className, { "dv-button-text_padding-left": paddingLeft }) }, textProps));
 };
 var ButtonView = (
@@ -7720,7 +7720,7 @@ var Button$2 = function(props) {
   var view = useView(props, ButtonView);
   var _a = extractStyleBodyProps(props), styledBodyProps = _a[0], _b = _a[1];
   _b.onSetupView;
-  var buttonProps = __rest$2(_b, ["onSetupView"]);
+  var buttonProps = __rest$3(_b, ["onSetupView"]);
   var hasIcon = Boolean(props.iconClass || props.loading);
   var text = props.value || props.children;
   return React__default.createElement(
@@ -7947,7 +7947,7 @@ var MessageWindowService = (
   }()
 );
 var ModalHeader = function(props) {
-  var modalIcon = props.modalIcon, color2 = props.color, caption = props.caption, className = props.className, divProps = __rest$2(props, ["modalIcon", "color", "caption", "className"]);
+  var modalIcon = props.modalIcon, color2 = props.color, caption = props.caption, className = props.className, divProps = __rest$3(props, ["modalIcon", "color", "caption", "className"]);
   return React__default.createElement(
     "div",
     __assign$2({ className: classNames("dv-message-box__header-content", className) }, divProps),
@@ -8211,7 +8211,7 @@ var LabelText = function(props) {
   return React__default.createElement("span", __assign$2({ className: classNames("dv-checkbox__label-text " + classIfNot(!!props.children, "dv-checkbox__label-text_empty"), props.className) }, props), props.children);
 };
 var Label = function(props) {
-  var disabled = props.disabled, tabIndex = props.tabIndex, className = props.className, labelProps = __rest$2(props, ["disabled", "tabIndex", "className"]);
+  var disabled = props.disabled, tabIndex = props.tabIndex, className = props.className, labelProps = __rest$3(props, ["disabled", "tabIndex", "className"]);
   return React__default.createElement("label", __assign$2({}, labelProps, { className: classNames("dv-checkbox__label", { "dv-checkbox__label_disabled": disabled }, className), tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled ? void 0 : 0 }), props.children);
 };
 var CheckBoxView = (
@@ -8254,7 +8254,7 @@ var CheckBox$1 = React__default.forwardRef(function(props, ref2) {
   props.labelText;
   props.onSetupView;
   props.onSetupLogic;
-  var htmlProps = __rest$2(props, ["labelText", "onSetupView", "onSetupLogic"]);
+  var htmlProps = __rest$3(props, ["labelText", "onSetupView", "onSetupLogic"]);
   var otherProps = {};
   var inputProps = extractInputProps(htmlProps, otherProps);
   var checked = props.checked;
@@ -8434,7 +8434,7 @@ var CheckboxRowPlugin = {
     };
     var composition = props.composition;
     props.children;
-    var cellProps = __rest$2(props, ["composition", "children"]);
+    var cellProps = __rest$3(props, ["composition", "children"]);
     var ribbonEnabled = getListViewEnabled(composition.data.tableData).value;
     if (!ribbonEnabled) {
       return React__default.createElement(
@@ -8489,7 +8489,7 @@ var CheckboxHeaderPlugin = {
     var ref2 = React__default.createRef();
     props.composition;
     props.children;
-    var columnProps = __rest$2(props, ["composition", "children"]);
+    var columnProps = __rest$3(props, ["composition", "children"]);
     return React__default.createElement(
       TableHeaderColumn,
       __assign$2({ padding: false }, columnProps),
@@ -11374,7 +11374,7 @@ function inspect() {
   suffix = zone + '[")]';
   return this.format(prefix2 + year + datetime + suffix);
 }
-function format(inputString) {
+function format$1(inputString) {
   if (!inputString) {
     inputString = this.isUtc() ? hooks.defaultFormatUtc : hooks.defaultFormat;
   }
@@ -12004,7 +12004,7 @@ proto.calendar = calendar$1;
 proto.clone = clone;
 proto.diff = diff$1;
 proto.endOf = endOf;
-proto.format = format;
+proto.format = format$1;
 proto.from = from;
 proto.fromNow = fromNow;
 proto.to = to;
@@ -14661,7 +14661,7 @@ var ColumnListButtonIcon = function(props) {
 };
 var ColumnListIndicator = function(props) {
   props.className;
-  var indicatorProps = __rest$2(props, ["className"]);
+  var indicatorProps = __rest$3(props, ["className"]);
   return React__default.createElement("span", __assign$2({ className: classNames("dv-column-list__indicator", {
     "dv-column-list__indicator_ascending": props.sortDirection == SortDirection.Ascending,
     "dv-column-list__indicator_descending": props.sortDirection == SortDirection.Descending
@@ -14669,17 +14669,17 @@ var ColumnListIndicator = function(props) {
 };
 var ColumnListItem = function(props) {
   props.className;
-  var isActive = props.isActive, itemProps = __rest$2(props, ["className", "isActive"]);
+  var isActive = props.isActive, itemProps = __rest$3(props, ["className", "isActive"]);
   var itemClassnames = classNames("dv-column-list__item", { "dv-column-list__item_sorted": props.sortDirection != SortDirection.Disabled || isActive });
   return React__default.createElement("li", __assign$2({ className: itemClassnames }, itemProps), props.children);
 };
 var ColumnListMenu = function(props) {
-  var className = props.className, menuProps = __rest$2(props, ["className"]);
+  var className = props.className, menuProps = __rest$3(props, ["className"]);
   return React__default.createElement("ul", __assign$2({ className: classNames("dv-column-list__menu", className) }, menuProps), props.children);
 };
 var ColumnListText = function(props) {
   props.className;
-  var sortDirection = props.sortDirection, textProps = __rest$2(props, ["className", "sortDirection"]);
+  var sortDirection = props.sortDirection, textProps = __rest$3(props, ["className", "sortDirection"]);
   return React__default.createElement("span", __assign$2({ className: classNames("dv-column-list__text", { "dv-column-list__text_sort": sortDirection !== SortDirection.Disabled }) }, textProps), props.children);
 };
 var ColumnListWrapper = React__default.forwardRef(function(props, ref2) {
@@ -14687,7 +14687,7 @@ var ColumnListWrapper = React__default.forwardRef(function(props, ref2) {
   return React__default.createElement("span", { className: classNames("dv-column-list__wrapper", className), ref: ref2 }, props.children);
 });
 var ColumnListContainer = React__default.forwardRef(function(props, ref2) {
-  var className = props.className, containerProps = __rest$2(props, ["className"]);
+  var className = props.className, containerProps = __rest$3(props, ["className"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-column-list__container", className), ref: ref2 }, containerProps), props.children);
 });
 var ColumnListButtonView = (
@@ -33868,8 +33868,8 @@ function requireRepeatString() {
   hasRequiredRepeatString = 1;
   var res = "";
   var cache2;
-  repeatString = repeat;
-  function repeat(str, num) {
+  repeatString = repeat2;
+  function repeat2(str, num) {
     if (typeof str !== "string") {
       throw new TypeError("expected a string");
     }
@@ -33900,7 +33900,7 @@ var hasRequiredDist;
 function requireDist() {
   if (hasRequiredDist) return dist;
   hasRequiredDist = 1;
-  var repeat = requireRepeatString();
+  var repeat2 = requireRepeatString();
   var splitOnTags = function splitOnTags2(str) {
     return str.split(/(<\/?[^>]+>)/g).filter(function(line) {
       return line.trim() !== "";
@@ -33945,7 +33945,7 @@ function requireDist() {
       if (isClosingTag(item)) {
         depth--;
       }
-      var line = repeat(indent, depth) + item;
+      var line = repeat2(indent, depth) + item;
       if (isOpeningTag(item)) {
         depth++;
       }
@@ -33999,7 +33999,7 @@ function ArrowDownIcon(props) {
   );
 }
 var DropdownContainer = React__default.forwardRef(function DropdownContainer2(props, ref2) {
-  var className = props.className, containerBodyClassName = props.containerBodyClassName, isMenuOpen = props.isMenuOpen, iconClassName = props.iconClassName, children = props.children, disabled = props.disabled, divProps = __rest$2(props, ["className", "containerBodyClassName", "isMenuOpen", "iconClassName", "children", "disabled"]);
+  var className = props.className, containerBodyClassName = props.containerBodyClassName, isMenuOpen = props.isMenuOpen, iconClassName = props.iconClassName, children = props.children, disabled = props.disabled, divProps = __rest$3(props, ["className", "containerBodyClassName", "isMenuOpen", "iconClassName", "children", "disabled"]);
   return React__default.createElement(
     "div",
     __assign$2({ className: "dv-dropdown__container" + classIfDefined(className) + classIf(disabled, "dv-dropdown__container_disabled"), ref: ref2 }, divProps),
@@ -34012,16 +34012,16 @@ var DropdownContainer = React__default.forwardRef(function DropdownContainer2(pr
   );
 });
 function DropdownContent(props) {
-  var selectedValue = props.selectedValue, className = props.className, elementProps = __rest$2(props, ["selectedValue", "className"]);
+  var selectedValue = props.selectedValue, className = props.className, elementProps = __rest$3(props, ["selectedValue", "className"]);
   return React__default.createElement("div", __assign$2({ className: "dv-dropdown__content" + classIfDefined(className) }, elementProps), selectedValue);
 }
 var DropdownMenu = React__default.forwardRef(function DropdownMenu2(props, ref2) {
-  var className = props.className, children = props.children, ulProps = __rest$2(props, ["className", "children"]);
+  var className = props.className, children = props.children, ulProps = __rest$3(props, ["className", "children"]);
   return React__default.createElement("ul", __assign$2({ className: "dv-dropdown__menu" + classIfDefined(className), ref: ref2 }, ulProps), children);
 });
 var DropdownOption$1 = React__default.forwardRef(function DropdownOption(props, ref2) {
   var _a, _b;
-  var className = props.className, selected = props.selected, contentClassName = props.contentClassName, tooltipText = props.tooltipText, children = props.children, liProps = __rest$2(props, ["className", "selected", "contentClassName", "tooltipText", "children"]);
+  var className = props.className, selected = props.selected, contentClassName = props.contentClassName, tooltipText = props.tooltipText, children = props.children, liProps = __rest$3(props, ["className", "selected", "contentClassName", "tooltipText", "children"]);
   var contentRef = React__default.useRef(null);
   var showTooltipText = ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) > ((_b = contentRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight);
   return React__default.createElement(
@@ -35242,7 +35242,7 @@ var __assign = function() {
   };
   return __assign.apply(this, arguments);
 };
-function __rest(s2, e2) {
+function __rest$1(s2, e2) {
   var t2 = {};
   for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0)
     t2[p2] = s2[p2];
@@ -38516,7 +38516,7 @@ var green$1 = {
   500: "#4caf50",
   700: "#388e3c"
 };
-function clamp$2(value) {
+function clamp$3(value) {
   var min2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
   var max2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
   return Math.min(Math.max(min2, value), max2);
@@ -38609,7 +38609,7 @@ function fade(color2, value) {
 }
 function alpha$1(color2, value) {
   color2 = decomposeColor$1(color2);
-  value = clamp$2(value);
+  value = clamp$3(value);
   if (color2.type === "rgb" || color2.type === "hsl") {
     color2.type += "a";
   }
@@ -38618,7 +38618,7 @@ function alpha$1(color2, value) {
 }
 function darken$1(color2, coefficient) {
   color2 = decomposeColor$1(color2);
-  coefficient = clamp$2(coefficient);
+  coefficient = clamp$3(coefficient);
   if (color2.type.indexOf("hsl") !== -1) {
     color2.values[2] *= 1 - coefficient;
   } else if (color2.type.indexOf("rgb") !== -1) {
@@ -38630,7 +38630,7 @@ function darken$1(color2, coefficient) {
 }
 function lighten$1(color2, coefficient) {
   color2 = decomposeColor$1(color2);
-  coefficient = clamp$2(coefficient);
+  coefficient = clamp$3(coefficient);
   if (color2.type.indexOf("hsl") !== -1) {
     color2.values[2] += (100 - color2.values[2]) * coefficient;
   } else if (color2.type.indexOf("rgb") !== -1) {
@@ -39564,7 +39564,7 @@ var Transition = /* @__PURE__ */ function(_React$Component) {
 }(React__default.Component);
 Transition.contextType = TransitionGroupContext;
 Transition.propTypes = {};
-function noop$3() {
+function noop$4() {
 }
 Transition.defaultProps = {
   in: false,
@@ -39573,12 +39573,12 @@ Transition.defaultProps = {
   appear: false,
   enter: true,
   exit: true,
-  onEnter: noop$3,
-  onEntering: noop$3,
-  onEntered: noop$3,
-  onExit: noop$3,
-  onExiting: noop$3,
-  onExited: noop$3
+  onEnter: noop$4,
+  onEntering: noop$4,
+  onEntered: noop$4,
+  onExit: noop$4,
+  onExiting: noop$4,
+  onExited: noop$4
 };
 Transition.UNMOUNTED = UNMOUNTED;
 Transition.EXITED = EXITED;
@@ -45424,7 +45424,7 @@ var useStyles = makeStyles(function(theme2) {
 });
 var ToolbarText = function(_a) {
   var _b;
-  var selected = _a.selected, label = _a.label, _c = _a.className, className = _c === void 0 ? null : _c, other = __rest(_a, ["selected", "label", "className"]);
+  var selected = _a.selected, label = _a.label, _c = _a.className, className = _c === void 0 ? null : _c, other = __rest$1(_a, ["selected", "label", "className"]);
   var classes2 = useStyles();
   return createElement(Typography$2, __assign({
     children: label,
@@ -45432,7 +45432,7 @@ var ToolbarText = function(_a) {
   }, other));
 };
 var ToolbarButton = function(_a) {
-  var classes2 = _a.classes, _b = _a.className, className = _b === void 0 ? null : _b, label = _a.label, selected = _a.selected, variant = _a.variant, align = _a.align, typographyClassName = _a.typographyClassName, other = __rest(_a, ["classes", "className", "label", "selected", "variant", "align", "typographyClassName"]);
+  var classes2 = _a.classes, _b = _a.className, className = _b === void 0 ? null : _b, label = _a.label, selected = _a.selected, variant = _a.variant, align = _a.align, typographyClassName = _a.typographyClassName, other = __rest$1(_a, ["classes", "className", "label", "selected", "variant", "align", "typographyClassName"]);
   return createElement(Button$1$1, __assign({
     variant: "text",
     className: clsx$3(classes2.toolbarBtn, className)
@@ -45479,7 +45479,7 @@ var useStyles$1 = makeStyles(function(theme2) {
 });
 var PickerToolbar = function(_a) {
   var _b;
-  var children = _a.children, isLandscape = _a.isLandscape, _c = _a.className, className = _c === void 0 ? null : _c, other = __rest(_a, ["children", "isLandscape", "className"]);
+  var children = _a.children, isLandscape = _a.isLandscape, _c = _a.className, className = _c === void 0 ? null : _c, other = __rest$1(_a, ["children", "isLandscape", "className"]);
   var classes2 = useStyles$1();
   return createElement(Toolbar$3, __assign({
     className: clsx$3(classes2.toolbar, (_b = {}, _b[classes2.toolbarLandscape] = isLandscape, _b), className)
@@ -45658,7 +45658,7 @@ var useStyles$3 = makeStyles(function(theme2) {
 });
 var Day = function(_a) {
   var _b;
-  var children = _a.children, disabled = _a.disabled, hidden = _a.hidden, current = _a.current, selected = _a.selected, other = __rest(_a, ["children", "disabled", "hidden", "current", "selected"]);
+  var children = _a.children, disabled = _a.disabled, hidden = _a.hidden, current = _a.current, selected = _a.selected, other = __rest$1(_a, ["children", "disabled", "hidden", "current", "selected"]);
   var classes2 = useStyles$3();
   var className = clsx$3(classes2.day, (_b = {}, _b[classes2.hidden] = hidden, _b[classes2.current] = current, _b[classes2.daySelected] = selected, _b[classes2.dayDisabled] = disabled, _b));
   return createElement(IconButton$1$1, __assign({
@@ -45677,7 +45677,7 @@ Day.defaultProps = {
   selected: false
 };
 var DayWrapper = function(_a) {
-  var children = _a.children, value = _a.value, disabled = _a.disabled, onSelect = _a.onSelect, dayInCurrentMonth = _a.dayInCurrentMonth, other = __rest(_a, ["children", "value", "disabled", "onSelect", "dayInCurrentMonth"]);
+  var children = _a.children, value = _a.value, disabled = _a.disabled, onSelect = _a.onSelect, dayInCurrentMonth = _a.dayInCurrentMonth, other = __rest$1(_a, ["children", "value", "disabled", "onSelect", "dayInCurrentMonth"]);
   var handleClick = useCallback(function() {
     return onSelect(value);
   }, [onSelect, value]);
@@ -46163,7 +46163,7 @@ var useStyles$6 = makeStyles(function(theme2) {
 });
 var Year = function(_a) {
   var _b;
-  var onSelect = _a.onSelect, forwardedRef = _a.forwardedRef, value = _a.value, selected = _a.selected, disabled = _a.disabled, children = _a.children, other = __rest(_a, ["onSelect", "forwardedRef", "value", "selected", "disabled", "children"]);
+  var onSelect = _a.onSelect, forwardedRef = _a.forwardedRef, value = _a.value, selected = _a.selected, disabled = _a.disabled, children = _a.children, other = __rest$1(_a, ["onSelect", "forwardedRef", "value", "selected", "disabled", "children"]);
   var classes2 = useStyles$6();
   var handleClick = useCallback(function() {
     return onSelect(value);
@@ -46215,7 +46215,7 @@ var ModalDialog = function(_a) {
   var _b, _c;
   var children = _a.children, classes2 = _a.classes, onAccept = _a.onAccept, onDismiss = _a.onDismiss, onClear = _a.onClear, onSetToday = _a.onSetToday, okLabel = _a.okLabel, cancelLabel = _a.cancelLabel, clearLabel = _a.clearLabel, todayLabel = _a.todayLabel, clearable = _a.clearable, showTodayButton = _a.showTodayButton;
   _a.showTabs;
-  var wider = _a.wider, other = __rest(_a, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
+  var wider = _a.wider, other = __rest$1(_a, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
   return createElement(Dialog$1, __assign({
     role: "dialog",
     onClose: onDismiss,
@@ -46269,7 +46269,7 @@ var ModalDialog$1 = withStyles(styles$2$1, {
   name: "MuiPickersModal"
 })(ModalDialog);
 var ModalWrapper = function(_a) {
-  var open = _a.open, children = _a.children, okLabel = _a.okLabel, cancelLabel = _a.cancelLabel, clearLabel = _a.clearLabel, todayLabel = _a.todayLabel, showTodayButton = _a.showTodayButton, clearable = _a.clearable, DialogProps = _a.DialogProps, showTabs = _a.showTabs, wider = _a.wider, InputComponent = _a.InputComponent, DateInputProps = _a.DateInputProps, onClear = _a.onClear, onAccept = _a.onAccept, onDismiss = _a.onDismiss, onSetToday = _a.onSetToday, other = __rest(_a, ["open", "children", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "showTodayButton", "clearable", "DialogProps", "showTabs", "wider", "InputComponent", "DateInputProps", "onClear", "onAccept", "onDismiss", "onSetToday"]);
+  var open = _a.open, children = _a.children, okLabel = _a.okLabel, cancelLabel = _a.cancelLabel, clearLabel = _a.clearLabel, todayLabel = _a.todayLabel, showTodayButton = _a.showTodayButton, clearable = _a.clearable, DialogProps = _a.DialogProps, showTabs = _a.showTabs, wider = _a.wider, InputComponent = _a.InputComponent, DateInputProps = _a.DateInputProps, onClear = _a.onClear, onAccept = _a.onAccept, onDismiss = _a.onDismiss, onSetToday = _a.onSetToday, other = __rest$1(_a, ["open", "children", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "showTodayButton", "clearable", "DialogProps", "showTabs", "wider", "InputComponent", "DateInputProps", "onClear", "onAccept", "onDismiss", "onSetToday"]);
   useKeyDown(open, {
     Enter: onAccept
   });
@@ -46317,7 +46317,7 @@ var InlineWrapper = function(_a) {
   _a.onSetToday;
   var onAccept = _a.onAccept;
   _a.showTabs;
-  var DateInputProps = _a.DateInputProps, InputComponent = _a.InputComponent, other = __rest(_a, ["open", "wider", "children", "PopoverProps", "onClear", "onDismiss", "onSetToday", "onAccept", "showTabs", "DateInputProps", "InputComponent"]);
+  var DateInputProps = _a.DateInputProps, InputComponent = _a.InputComponent, other = __rest$1(_a, ["open", "wider", "children", "PopoverProps", "onClear", "onDismiss", "onSetToday", "onAccept", "showTabs", "DateInputProps", "InputComponent"]);
   var ref2 = useRef();
   var classes2 = useStyles$8();
   useKeyDown(open, {
@@ -46355,7 +46355,7 @@ function getWrapperFromVariant(variant) {
 }
 var VariantContext = createContext(null);
 var Wrapper = function(_a) {
-  var variant = _a.variant, props = __rest(_a, ["variant"]);
+  var variant = _a.variant, props = __rest$1(_a, ["variant"]);
   var Component2 = getWrapperFromVariant(variant);
   return createElement(VariantContext.Provider, {
     value: variant || "dialog"
@@ -46936,7 +46936,7 @@ var useStyles$b = makeStyles(function(theme2) {
 });
 var Month = function(_a) {
   var _b;
-  var selected = _a.selected, onSelect = _a.onSelect, disabled = _a.disabled, value = _a.value, children = _a.children, other = __rest(_a, ["selected", "onSelect", "disabled", "value", "children"]);
+  var selected = _a.selected, onSelect = _a.onSelect, disabled = _a.disabled, value = _a.value, children = _a.children, other = __rest$1(_a, ["selected", "onSelect", "disabled", "value", "children"]);
   var classes2 = useStyles$b();
   var handleSelection = useCallback(function() {
     onSelect(value);
@@ -47405,7 +47405,7 @@ function usePickerState(props, options) {
   return pickerState;
 }
 var PureDateInput = function(_a) {
-  var inputValue = _a.inputValue, inputVariant = _a.inputVariant, validationError = _a.validationError, InputProps = _a.InputProps, _b = _a.TextFieldComponent, TextFieldComponent = _b === void 0 ? TextField$2 : _b, other = __rest(_a, ["inputValue", "inputVariant", "validationError", "InputProps", "TextFieldComponent"]);
+  var inputValue = _a.inputValue, inputVariant = _a.inputVariant, validationError = _a.validationError, InputProps = _a.InputProps, _b = _a.TextFieldComponent, TextFieldComponent = _b === void 0 ? TextField$2 : _b, other = __rest$1(_a, ["inputValue", "inputVariant", "validationError", "InputProps", "TextFieldComponent"]);
   var PureDateInputProps = useMemo(function() {
     return __assign(__assign({}, InputProps), {
       readOnly: true
@@ -47447,7 +47447,7 @@ function makePurePicker(_a) {
     props.invalidLabel;
     var timeIcon = props.timeIcon;
     props.value;
-    var variant = props.variant, orientation = props.orientation, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, _a2 = props.ToolbarComponent, ToolbarComponent = _a2 === void 0 ? DefaultToolbarComponent : _a2, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, showShiftButtons = props.showShiftButtons, setShiftFunction = props.setShiftFunction, shiftButtonValues = props.shiftButtonValues, other = __rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "value", "variant", "orientation", "disableToolbar", "loadingIndicator", "ToolbarComponent", "showActionsBar", "showTodayButton", "todayLabel", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
+    var variant = props.variant, orientation = props.orientation, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, _a2 = props.ToolbarComponent, ToolbarComponent = _a2 === void 0 ? DefaultToolbarComponent : _a2, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, showShiftButtons = props.showShiftButtons, setShiftFunction = props.setShiftFunction, shiftButtonValues = props.shiftButtonValues, other = __rest$1(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "value", "variant", "orientation", "disableToolbar", "loadingIndicator", "ToolbarComponent", "showActionsBar", "showTodayButton", "todayLabel", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
     var injectedProps = getCustomProps ? getCustomProps(props) : {};
     var options = useOptions2(props);
     var _b = usePickerState(props, options), pickerProps = _b.pickerProps, inputProps = _b.inputProps, wrapperProps = _b.wrapperProps;
@@ -47599,7 +47599,7 @@ var Rifm = function(props) {
 var KeyboardDateInput = function(_a) {
   var inputValue = _a.inputValue, _b = _a.showErrorOnBlur, showErrorOnBlur = _b === void 0 ? false : _b, inputVariant = _a.inputVariant, validationError = _a.validationError, KeyboardButtonProps = _a.KeyboardButtonProps, InputAdornmentProps = _a.InputAdornmentProps, onClick = _a.onClick, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, InputProps = _a.InputProps, mask2 = _a.mask, _c = _a.maskChar, maskChar = _c === void 0 ? "_" : _c;
   _a.refuse;
-  var format2 = _a.format, keyboardIcon = _a.keyboardIcon, disabled = _a.disabled, rifmFormatter = _a.rifmFormatter, _e2 = _a.TextFieldComponent, TextFieldComponent = _e2 === void 0 ? TextField$2 : _e2, other = __rest(_a, ["inputValue", "showErrorOnBlur", "inputVariant", "validationError", "KeyboardButtonProps", "InputAdornmentProps", "onClick", "onChange", "onBlur", "onFocus", "InputProps", "mask", "maskChar", "refuse", "format", "keyboardIcon", "disabled", "rifmFormatter", "TextFieldComponent"]);
+  var format2 = _a.format, keyboardIcon = _a.keyboardIcon, disabled = _a.disabled, rifmFormatter = _a.rifmFormatter, _e2 = _a.TextFieldComponent, TextFieldComponent = _e2 === void 0 ? TextField$2 : _e2, other = __rest$1(_a, ["inputValue", "showErrorOnBlur", "inputVariant", "validationError", "KeyboardButtonProps", "InputAdornmentProps", "onClick", "onChange", "onBlur", "onFocus", "InputProps", "mask", "maskChar", "refuse", "format", "keyboardIcon", "disabled", "rifmFormatter", "TextFieldComponent"]);
   var inputMask = mask2 || makeMaskFromFormat(format2, maskChar);
   var letterPosition = format2.indexOf("a");
   var formatter = useCallback(maskedDateFormatter(inputMask, maskChar), [mask2, maskChar]);
@@ -47730,7 +47730,7 @@ function makeKeyboardPicker(_a) {
     var dateRangeIcon = props.dateRangeIcon;
     props.emptyLabel;
     props.invalidLabel;
-    var timeIcon = props.timeIcon, orientation = props.orientation, variant = props.variant, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, _a2 = props.ToolbarComponent, ToolbarComponent = _a2 === void 0 ? DefaultToolbarComponent : _a2, showShiftButtons = props.showShiftButtons, setShiftFunction = props.setShiftFunction, shiftButtonValues = props.shiftButtonValues, other = __rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "value", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "orientation", "variant", "disableToolbar", "loadingIndicator", "showActionsBar", "showTodayButton", "todayLabel", "ToolbarComponent", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
+    var timeIcon = props.timeIcon, orientation = props.orientation, variant = props.variant, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, _a2 = props.ToolbarComponent, ToolbarComponent = _a2 === void 0 ? DefaultToolbarComponent : _a2, showShiftButtons = props.showShiftButtons, setShiftFunction = props.setShiftFunction, shiftButtonValues = props.shiftButtonValues, other = __rest$1(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "value", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "orientation", "variant", "disableToolbar", "loadingIndicator", "showActionsBar", "showTodayButton", "todayLabel", "ToolbarComponent", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
     var injectedProps = getCustomProps ? getCustomProps(props) : {};
     var options = useOptions2(props);
     var _b = useKeyboardPickerState(props, options), pickerProps = _b.pickerProps, inputProps = _b.inputProps, wrapperProps = _b.wrapperProps;
@@ -52799,7 +52799,7 @@ function ErrorBlock({ text, close }) {
   ] });
 }
 function ErrorMessage(props) {
-  return /* @__PURE__ */ jsx("p", { className: classNames("error-message", props.className), children: props.message });
+  return /* @__PURE__ */ jsx(Typography$3, { component: "p", variant: "caption", className: classNames("error-message", props.className), children: props.message });
 }
 function ExpandButton$1(props) {
   const { expanded, dataTestId, className, ...buttonProps } = props;
@@ -54023,11 +54023,11 @@ function extendSxProp$1(props) {
     sx: finalSx
   };
 }
-function clamp$1(val, min2 = Number.MIN_SAFE_INTEGER, max2 = Number.MAX_SAFE_INTEGER) {
+function clamp$2(val, min2 = Number.MIN_SAFE_INTEGER, max2 = Number.MAX_SAFE_INTEGER) {
   return Math.max(min2, Math.min(val, max2));
 }
 function clampWrapper(value, min2 = 0, max2 = 1) {
-  return clamp$1(value, min2, max2);
+  return clamp$2(value, min2, max2);
 }
 function hexToRgb(color2) {
   color2 = color2.slice(1);
@@ -58959,14 +58959,14 @@ function TextMessage(props) {
   const { content, wrapperClassName, footer, footerClassName, header, headerClassName, contentClassName } = props;
   const textContent = getTextContent$1(content, contentClassName);
   return /* @__PURE__ */ jsxs("div", { className: classNames("text-message__wrapper", wrapperClassName), children: [
-    header && /* @__PURE__ */ jsx("p", { className: headerClassName, children: header }),
+    header && /* @__PURE__ */ jsx(Typography$3, { component: "p", className: headerClassName, children: header }),
     textContent,
-    footer && /* @__PURE__ */ jsx("p", { className: footerClassName, children: footer })
+    footer && /* @__PURE__ */ jsx(Typography$3, { component: "p", className: footerClassName, children: footer })
   ] });
 }
 function getTextContent$1(content, className) {
   if (typeof content === "string") {
-    return /* @__PURE__ */ jsx("p", { className, children: content });
+    return /* @__PURE__ */ jsx(Typography$3, { component: "p", className, children: content });
   }
   return /* @__PURE__ */ jsx("ul", { className: classNames("text-message__list", className), children: content.map((m2) => /* @__PURE__ */ jsx("li", { children: m2 }, m2)) });
 }
@@ -59004,7 +59004,7 @@ function CellTextContent({ content, multiline = false }) {
     const shouldShowTooltip = isWidthOverflowing || isHeightOverflowing;
     setShowTooltip(shouldShowTooltip);
   }, [contentRef, content]);
-  return /* @__PURE__ */ jsx(LightTooltip, { title: content, placement: "top-start", disableHoverListener: !showTooltip, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: multiline ? "cell-text-content-multiline" : "cell-text-content", children: /* @__PURE__ */ jsx("span", { children: content }) }) });
+  return /* @__PURE__ */ jsx(LightTooltip, { title: content, placement: "top-start", disableHoverListener: !showTooltip, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: multiline ? "cell-text-content-multiline" : "cell-text-content", children: /* @__PURE__ */ jsx(Typography$3, { variant: "body2", children: content }) }) });
 }
 function CellWithFixedWidth(props) {
   const { content, maxWidth: maxWidth2 } = props;
@@ -59027,6 +59027,12 @@ function CellWithTwoLineClamping(props) {
   };
   return /* @__PURE__ */ jsx(Cell, { className, style: { maxWidth: maxWidth2 }, align: props.align || "left", onClick, children: /* @__PURE__ */ jsx(LightTooltip, { title: content, placement: "top-start", disableHoverListener: !showTooltip, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: "mui-table__cell-clamp-two-line", children: content }) }) });
 }
+const ArrowDropDownOutlined = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "m7 10 5 5 5-5z"
+}));
+const ArrowDropUpOutlined = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "m7 14 5-5 5 5z"
+}));
 const Clear = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }));
@@ -59060,7 +59066,7 @@ function DatabaseSettingsCard(props) {
     /* @__PURE__ */ jsxs(Grid$1, { container: true, alignItems: "center", justifyContent: "space-between", wrap: "nowrap", className: "database-settings-card__head", children: [
       /* @__PURE__ */ jsxs(Grid$1, { container: true, alignItems: "center", children: [
         /* @__PURE__ */ jsx(StorageRounded, { color: "secondary", fontSize: "large" }),
-        /* @__PURE__ */ jsx("p", { className: "database-settings-card__title", children: title })
+        /* @__PURE__ */ jsx(Typography$3, { variant: "h5", className: "database-settings-card__title", children: title })
       ] }),
       /* @__PURE__ */ jsx(Grid$1, { children: isDefault && /* @__PURE__ */ jsx(Chip$1, { className: "database-settings-card__chip", size: "small", label }) })
     ] }),
@@ -59076,7 +59082,7 @@ function DropdownBody(props) {
     const shouldShowTooltip = contentRef.current?.scrollWidth > contentRef.current?.offsetWidth;
     setShowTooltip(shouldShowTooltip);
   }, [displayName]);
-  return /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: showTooltip ? displayName : "", disableFocusListener: true, disableTouchListener: true, children: /* @__PURE__ */ jsx("span", { ref: contentRef, className: "dropdown-body", children: displayName }) });
+  return /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: showTooltip ? displayName : "", disableFocusListener: true, disableTouchListener: true, children: /* @__PURE__ */ jsx(Typography$3, { component: "span", ref: contentRef, className: "dropdown-body", children: displayName }) });
 }
 function getDisplayName(label, options, value) {
   if (typeof value === "undefined" || value === null) return label;
@@ -59086,7 +59092,7 @@ function getDisplayName(label, options, value) {
 const DropdownOption2 = React__default.forwardRef(function DropdownOption22({ displayName, ...menuItemProps }, ref2) {
   const contentRef = React__default.useRef(null);
   const showTooltip = contentRef.current?.scrollWidth > contentRef.current?.offsetWidth;
-  return /* @__PURE__ */ jsx(MenuItem$2, { ref: ref2, ...menuItemProps, children: /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: showTooltip ? displayName : "", disableFocusListener: true, disableTouchListener: true, children: /* @__PURE__ */ jsx("span", { ref: contentRef, className: "dropdown-option__content", children: displayName }) }) });
+  return /* @__PURE__ */ jsx(MenuItem$2, { ref: ref2, ...menuItemProps, children: /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: showTooltip ? displayName : "", disableFocusListener: true, disableTouchListener: true, children: /* @__PURE__ */ jsx(Typography$3, { component: "span", ref: contentRef, className: "dropdown-option__content", children: displayName }) }) });
 });
 function EditorWrapper({ children, isChanged, isEditable }) {
   return /* @__PURE__ */ jsx("div", { className: classNames(classIf(isChanged, "changed"), classIf(isEditable, "editable"), "editor-wrapper"), children });
@@ -59130,10 +59136,10 @@ function EditorCollectionEditor(props) {
   ] });
 }
 function EditorDescription({ text }) {
-  return text ? /* @__PURE__ */ jsx("div", { className: "editor-description", children: text }) : null;
+  return text ? /* @__PURE__ */ jsx(Typography$3, { variant: "body2", className: "editor-description", children: text }) : null;
 }
 function EditorName({ text }) {
-  return /* @__PURE__ */ jsx("div", { className: "editor-name", children: text });
+  return /* @__PURE__ */ jsx(Typography$3, { variant: "h5", className: "editor-name", children: text });
 }
 function EditorInnerWrapper(props) {
   const { label, description, children, className } = props;
@@ -59148,7 +59154,7 @@ function GroupPanel(props) {
   return /* @__PURE__ */ jsx(List$4, { component: Paper$3, children: groups && Object.keys(groups).map((group) => {
     return /* @__PURE__ */ jsxs(ListItemButton, { onClick: () => selectGroup(group), selected: selectedGroup === group, children: [
       /* @__PURE__ */ jsx(ListItemIcon$1, { children: /* @__PURE__ */ jsx(GroupIcon, {}) }),
-      /* @__PURE__ */ jsx(ListItemText$1, { primary: group })
+      /* @__PURE__ */ jsx(ListItemText$1, { slotProps: { primary: { variant: "body2" } }, primary: group })
     ] }, group);
   }) });
 }
@@ -73737,11 +73743,11 @@ function computeHeadingLevel(element) {
   return ariaLevelAttribute || implicitHeadingLevels[element.tagName];
 }
 const normalize = getDefaultNormalizer();
-function escapeRegExp$1(string) {
+function escapeRegExp$2(string) {
   return string.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&");
 }
 function getRegExpMatcher(string) {
-  return new RegExp(escapeRegExp$1(string.toLowerCase()), "i");
+  return new RegExp(escapeRegExp$2(string.toLowerCase()), "i");
 }
 function makeSuggestion(queryName, element, content, _ref3) {
   let {
@@ -76611,6 +76617,1213 @@ const WithSelectedItem = {
 function NoOptionMenuItem({ text }) {
   return /* @__PURE__ */ jsx(MenuItem$2, { className: "no-option-menu-item", disabled: true, children: text });
 }
+const UNINITIALIZED = {};
+function useLazyRef(init, initArg) {
+  const ref2 = React.useRef(UNINITIALIZED);
+  if (ref2.current === UNINITIALIZED) {
+    ref2.current = init(initArg);
+  }
+  return ref2;
+}
+const EMPTY$1 = [];
+function useOnMount(fn2) {
+  React.useEffect(fn2, EMPTY$1);
+}
+class Timeout {
+  static create() {
+    return new Timeout();
+  }
+  currentId = null;
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay, fn2) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn2();
+    }, delay);
+  }
+  clear = () => {
+    if (this.currentId !== null) {
+      clearTimeout(this.currentId);
+      this.currentId = null;
+    }
+  };
+  disposeEffect = () => {
+    return this.clear;
+  };
+}
+function useTimeout() {
+  const timeout = useLazyRef(Timeout.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}
+function isFocusVisible(element) {
+  try {
+    return element.matches(":focus-visible");
+  } catch (error) {
+  }
+  return false;
+}
+function getScrollbarSize(win = window) {
+  const documentWidth = win.document.documentElement.clientWidth;
+  return win.innerWidth - documentWidth;
+}
+const usePreviousProps = (value) => {
+  const ref2 = React.useRef({});
+  React.useEffect(() => {
+    ref2.current = value;
+  });
+  return ref2.current;
+};
+function isHostComponent$1(element) {
+  return typeof element === "string";
+}
+function appendOwnerState(elementType, otherProps, ownerState) {
+  if (elementType === void 0 || isHostComponent$1(elementType)) {
+    return otherProps;
+  }
+  return {
+    ...otherProps,
+    ownerState: {
+      ...otherProps.ownerState,
+      ...ownerState
+    }
+  };
+}
+function extractEventHandlers(object, excludeKeys = []) {
+  if (object === void 0) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object).filter((prop) => prop.match(/^on[A-Z]/) && typeof object[prop] === "function" && !excludeKeys.includes(prop)).forEach((prop) => {
+    result[prop] = object[prop];
+  });
+  return result;
+}
+function omitEventHandlers(object) {
+  if (object === void 0) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object).filter((prop) => !(prop.match(/^on[A-Z]/) && typeof object[prop] === "function")).forEach((prop) => {
+    result[prop] = object[prop];
+  });
+  return result;
+}
+function mergeSlotProps(parameters) {
+  const {
+    getSlotProps,
+    additionalProps,
+    externalSlotProps,
+    externalForwardedProps,
+    className
+  } = parameters;
+  if (!getSlotProps) {
+    const joinedClasses2 = clsx$1(additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
+    const mergedStyle2 = {
+      ...additionalProps?.style,
+      ...externalForwardedProps?.style,
+      ...externalSlotProps?.style
+    };
+    const props2 = {
+      ...additionalProps,
+      ...externalForwardedProps,
+      ...externalSlotProps
+    };
+    if (joinedClasses2.length > 0) {
+      props2.className = joinedClasses2;
+    }
+    if (Object.keys(mergedStyle2).length > 0) {
+      props2.style = mergedStyle2;
+    }
+    return {
+      props: props2,
+      internalRef: void 0
+    };
+  }
+  const eventHandlers = extractEventHandlers({
+    ...externalForwardedProps,
+    ...externalSlotProps
+  });
+  const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
+  const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
+  const internalSlotProps = getSlotProps(eventHandlers);
+  const joinedClasses = clsx$1(internalSlotProps?.className, additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
+  const mergedStyle = {
+    ...internalSlotProps?.style,
+    ...additionalProps?.style,
+    ...externalForwardedProps?.style,
+    ...externalSlotProps?.style
+  };
+  const props = {
+    ...internalSlotProps,
+    ...additionalProps,
+    ...otherPropsWithoutEventHandlers,
+    ...componentsPropsWithoutEventHandlers
+  };
+  if (joinedClasses.length > 0) {
+    props.className = joinedClasses;
+  }
+  if (Object.keys(mergedStyle).length > 0) {
+    props.style = mergedStyle;
+  }
+  return {
+    props,
+    internalRef: internalSlotProps.ref
+  };
+}
+function resolveComponentProps(componentProps, ownerState, slotState) {
+  if (typeof componentProps === "function") {
+    return componentProps(ownerState, slotState);
+  }
+  return componentProps;
+}
+function useSlotProps(parameters) {
+  const {
+    elementType,
+    externalSlotProps,
+    ownerState,
+    skipResolvingSlotProps = false,
+    ...other
+  } = parameters;
+  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
+  const {
+    props: mergedProps,
+    internalRef
+  } = mergeSlotProps({
+    ...other,
+    externalSlotProps: resolvedComponentsProps
+  });
+  const ref2 = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.additionalProps?.ref);
+  const props = appendOwnerState(elementType, {
+    ...mergedProps,
+    ref: ref2
+  }, ownerState);
+  return props;
+}
+function getReactElementRef(element) {
+  if (parseInt(React.version, 10) >= 19) {
+    return element?.props?.ref || null;
+  }
+  return element?.ref || null;
+}
+function __rest(s2, e2) {
+  var t2 = {};
+  for (var p2 in s2) {
+    if (Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0) {
+      t2[p2] = s2[p2];
+    }
+  }
+  if (s2 != null && typeof Object.getOwnPropertySymbols === "function") {
+    for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s2); i2 < p2.length; i2++) {
+      if (e2.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i2])) {
+        t2[p2[i2]] = s2[p2[i2]];
+      }
+    }
+  }
+  return t2;
+}
+var SourceType;
+(function(SourceType2) {
+  SourceType2["event"] = "event";
+  SourceType2["props"] = "prop";
+})(SourceType || (SourceType = {}));
+function noop$3() {
+}
+function memoizeOnce(cb) {
+  var lastArgs;
+  var lastValue = void 0;
+  return function() {
+    var args = [], len = arguments.length;
+    while (len--) args[len] = arguments[len];
+    if (lastArgs && args.length === lastArgs.length && args.every(function(value, index) {
+      return value === lastArgs[index];
+    })) {
+      return lastValue;
+    }
+    lastArgs = args;
+    lastValue = cb.apply(void 0, args);
+    return lastValue;
+  };
+}
+function charIsNumber(char) {
+  return !!(char || "").match(/\d/);
+}
+function isNil(val) {
+  return val === null || val === void 0;
+}
+function isNanValue(val) {
+  return typeof val === "number" && isNaN(val);
+}
+function isNotValidValue(val) {
+  return isNil(val) || isNanValue(val) || typeof val === "number" && !isFinite(val);
+}
+function escapeRegExp$1(str) {
+  return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
+}
+function getThousandsGroupRegex(thousandsGroupStyle) {
+  switch (thousandsGroupStyle) {
+    case "lakh":
+      return /(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;
+    case "wan":
+      return /(\d)(?=(\d{4})+(?!\d))/g;
+    case "thousand":
+    default:
+      return /(\d)(?=(\d{3})+(?!\d))/g;
+  }
+}
+function applyThousandSeparator(str, thousandSeparator, thousandsGroupStyle) {
+  var thousandsGroupRegex = getThousandsGroupRegex(thousandsGroupStyle);
+  var index = str.search(/[1-9]/);
+  index = index === -1 ? str.length : index;
+  return str.substring(0, index) + str.substring(index, str.length).replace(thousandsGroupRegex, "$1" + thousandSeparator);
+}
+function usePersistentCallback(cb) {
+  var callbackRef = useRef(cb);
+  callbackRef.current = cb;
+  var persistentCbRef = useRef(function() {
+    var args = [], len = arguments.length;
+    while (len--) args[len] = arguments[len];
+    return callbackRef.current.apply(callbackRef, args);
+  });
+  return persistentCbRef.current;
+}
+function splitDecimal(numStr, allowNegative) {
+  if (allowNegative === void 0) allowNegative = true;
+  var hasNegation = numStr[0] === "-";
+  var addNegation = hasNegation && allowNegative;
+  numStr = numStr.replace("-", "");
+  var parts = numStr.split(".");
+  var beforeDecimal = parts[0];
+  var afterDecimal = parts[1] || "";
+  return {
+    beforeDecimal,
+    afterDecimal,
+    hasNegation,
+    addNegation
+  };
+}
+function fixLeadingZero(numStr) {
+  if (!numStr) {
+    return numStr;
+  }
+  var isNegative = numStr[0] === "-";
+  if (isNegative) {
+    numStr = numStr.substring(1, numStr.length);
+  }
+  var parts = numStr.split(".");
+  var beforeDecimal = parts[0].replace(/^0+/, "") || "0";
+  var afterDecimal = parts[1] || "";
+  return (isNegative ? "-" : "") + beforeDecimal + (afterDecimal ? "." + afterDecimal : "");
+}
+function limitToScale(numStr, scale, fixedDecimalScale) {
+  var str = "";
+  var filler = fixedDecimalScale ? "0" : "";
+  for (var i2 = 0; i2 <= scale - 1; i2++) {
+    str += numStr[i2] || filler;
+  }
+  return str;
+}
+function repeat(str, count) {
+  return Array(count + 1).join(str);
+}
+function toNumericString(num) {
+  var _num = num + "";
+  var sign2 = _num[0] === "-" ? "-" : "";
+  if (sign2) {
+    _num = _num.substring(1);
+  }
+  var ref2 = _num.split(/[eE]/g);
+  var coefficient = ref2[0];
+  var exponent = ref2[1];
+  exponent = Number(exponent);
+  if (!exponent) {
+    return sign2 + coefficient;
+  }
+  coefficient = coefficient.replace(".", "");
+  var decimalIndex = 1 + exponent;
+  var coffiecientLn = coefficient.length;
+  if (decimalIndex < 0) {
+    coefficient = "0." + repeat("0", Math.abs(decimalIndex)) + coefficient;
+  } else if (decimalIndex >= coffiecientLn) {
+    coefficient = coefficient + repeat("0", decimalIndex - coffiecientLn);
+  } else {
+    coefficient = (coefficient.substring(0, decimalIndex) || "0") + "." + coefficient.substring(decimalIndex);
+  }
+  return sign2 + coefficient;
+}
+function roundToPrecision(numStr, scale, fixedDecimalScale) {
+  if (["", "-"].indexOf(numStr) !== -1) {
+    return numStr;
+  }
+  var shouldHaveDecimalSeparator = (numStr.indexOf(".") !== -1 || fixedDecimalScale) && scale;
+  var ref2 = splitDecimal(numStr);
+  var beforeDecimal = ref2.beforeDecimal;
+  var afterDecimal = ref2.afterDecimal;
+  var hasNegation = ref2.hasNegation;
+  var floatValue = parseFloat("0." + (afterDecimal || "0"));
+  var floatValueStr = afterDecimal.length <= scale ? "0." + afterDecimal : floatValue.toFixed(scale);
+  var roundedDecimalParts = floatValueStr.split(".");
+  var intPart = beforeDecimal;
+  if (beforeDecimal && Number(roundedDecimalParts[0])) {
+    intPart = beforeDecimal.split("").reverse().reduce(function(roundedStr, current, idx) {
+      if (roundedStr.length > idx) {
+        return (Number(roundedStr[0]) + Number(current)).toString() + roundedStr.substring(1, roundedStr.length);
+      }
+      return current + roundedStr;
+    }, roundedDecimalParts[0]);
+  }
+  var decimalPart = limitToScale(roundedDecimalParts[1] || "", scale, fixedDecimalScale);
+  var negation = hasNegation ? "-" : "";
+  var decimalSeparator = shouldHaveDecimalSeparator ? "." : "";
+  return "" + negation + intPart + decimalSeparator + decimalPart;
+}
+function setCaretPosition(el2, caretPos) {
+  el2.value = el2.value;
+  if (el2 !== null) {
+    if (el2.createTextRange) {
+      var range2 = el2.createTextRange();
+      range2.move("character", caretPos);
+      range2.select();
+      return true;
+    }
+    if (el2.selectionStart || el2.selectionStart === 0) {
+      el2.focus();
+      el2.setSelectionRange(caretPos, caretPos);
+      return true;
+    }
+    el2.focus();
+    return false;
+  }
+}
+var findChangeRange = memoizeOnce(function(prevValue, newValue) {
+  var i2 = 0, j = 0;
+  var prevLength = prevValue.length;
+  var newLength = newValue.length;
+  while (prevValue[i2] === newValue[i2] && i2 < prevLength) {
+    i2++;
+  }
+  while (prevValue[prevLength - 1 - j] === newValue[newLength - 1 - j] && newLength - j > i2 && prevLength - j > i2) {
+    j++;
+  }
+  return {
+    from: { start: i2, end: prevLength - j },
+    to: { start: i2, end: newLength - j }
+  };
+});
+var findChangedRangeFromCaretPositions = function(lastCaretPositions, currentCaretPosition) {
+  var startPosition = Math.min(lastCaretPositions.selectionStart, currentCaretPosition);
+  return {
+    from: { start: startPosition, end: lastCaretPositions.selectionEnd },
+    to: { start: startPosition, end: currentCaretPosition }
+  };
+};
+function clamp$1(num, min2, max2) {
+  return Math.min(Math.max(num, min2), max2);
+}
+function geInputCaretPosition(el2) {
+  return Math.max(el2.selectionStart, el2.selectionEnd);
+}
+function addInputMode() {
+  return typeof navigator !== "undefined" && !(navigator.platform && /iPhone|iPod/.test(navigator.platform));
+}
+function getDefaultChangeMeta(value) {
+  return {
+    from: {
+      start: 0,
+      end: 0
+    },
+    to: {
+      start: 0,
+      end: value.length
+    },
+    lastValue: ""
+  };
+}
+function defaultIsCharacterSame(ref2) {
+  var currentValue = ref2.currentValue;
+  var formattedValue = ref2.formattedValue;
+  var currentValueIndex = ref2.currentValueIndex;
+  var formattedValueIndex = ref2.formattedValueIndex;
+  return currentValue[currentValueIndex] === formattedValue[formattedValueIndex];
+}
+function getCaretPosition(newFormattedValue, lastFormattedValue, curValue, curCaretPos, boundary, isValidInputCharacter, isCharacterSame) {
+  if (isCharacterSame === void 0) isCharacterSame = defaultIsCharacterSame;
+  var firstAllowedPosition = boundary.findIndex(function(b2) {
+    return b2;
+  });
+  var prefixFormat = newFormattedValue.slice(0, firstAllowedPosition);
+  if (!lastFormattedValue && !curValue.startsWith(prefixFormat)) {
+    lastFormattedValue = prefixFormat;
+    curValue = prefixFormat + curValue;
+    curCaretPos = curCaretPos + prefixFormat.length;
+  }
+  var curValLn = curValue.length;
+  var formattedValueLn = newFormattedValue.length;
+  var addedIndexMap = {};
+  var indexMap = new Array(curValLn);
+  for (var i2 = 0; i2 < curValLn; i2++) {
+    indexMap[i2] = -1;
+    for (var j = 0, jLn = formattedValueLn; j < jLn; j++) {
+      var isCharSame = isCharacterSame({
+        currentValue: curValue,
+        lastValue: lastFormattedValue,
+        formattedValue: newFormattedValue,
+        currentValueIndex: i2,
+        formattedValueIndex: j
+      });
+      if (isCharSame && addedIndexMap[j] !== true) {
+        indexMap[i2] = j;
+        addedIndexMap[j] = true;
+        break;
+      }
+    }
+  }
+  var pos = curCaretPos;
+  while (pos < curValLn && (indexMap[pos] === -1 || !isValidInputCharacter(curValue[pos]))) {
+    pos++;
+  }
+  var endIndex = pos === curValLn || indexMap[pos] === -1 ? formattedValueLn : indexMap[pos];
+  pos = curCaretPos - 1;
+  while (pos > 0 && indexMap[pos] === -1) {
+    pos--;
+  }
+  var startIndex = pos === -1 || indexMap[pos] === -1 ? 0 : indexMap[pos] + 1;
+  if (startIndex > endIndex) {
+    return endIndex;
+  }
+  return curCaretPos - startIndex < endIndex - curCaretPos ? startIndex : endIndex;
+}
+function getCaretPosInBoundary(value, caretPos, boundary, direction) {
+  var valLn = value.length;
+  caretPos = clamp$1(caretPos, 0, valLn);
+  if (direction === "left") {
+    while (caretPos >= 0 && !boundary[caretPos]) {
+      caretPos--;
+    }
+    if (caretPos === -1) {
+      caretPos = boundary.indexOf(true);
+    }
+  } else {
+    while (caretPos <= valLn && !boundary[caretPos]) {
+      caretPos++;
+    }
+    if (caretPos > valLn) {
+      caretPos = boundary.lastIndexOf(true);
+    }
+  }
+  if (caretPos === -1) {
+    caretPos = valLn;
+  }
+  return caretPos;
+}
+function caretUnknownFormatBoundary(formattedValue) {
+  var boundaryAry = Array.from({ length: formattedValue.length + 1 }).map(function() {
+    return true;
+  });
+  for (var i2 = 0, ln = boundaryAry.length; i2 < ln; i2++) {
+    boundaryAry[i2] = Boolean(charIsNumber(formattedValue[i2]) || charIsNumber(formattedValue[i2 - 1]));
+  }
+  return boundaryAry;
+}
+function useInternalValues(value, defaultValue, valueIsNumericString, format2, removeFormatting2, onValueChange) {
+  if (onValueChange === void 0) onValueChange = noop$3;
+  var getValues = usePersistentCallback(function(value2, valueIsNumericString2) {
+    var formattedValue, numAsString;
+    if (isNotValidValue(value2)) {
+      numAsString = "";
+      formattedValue = "";
+    } else if (typeof value2 === "number" || valueIsNumericString2) {
+      numAsString = typeof value2 === "number" ? toNumericString(value2) : value2;
+      formattedValue = format2(numAsString);
+    } else {
+      numAsString = removeFormatting2(value2, void 0);
+      formattedValue = format2(numAsString);
+    }
+    return { formattedValue, numAsString };
+  });
+  var ref2 = useState(function() {
+    return getValues(isNil(value) ? defaultValue : value, valueIsNumericString);
+  });
+  var values2 = ref2[0];
+  var setValues = ref2[1];
+  var _onValueChange = function(newValues2, sourceInfo) {
+    if (newValues2.formattedValue !== values2.formattedValue) {
+      setValues({
+        formattedValue: newValues2.formattedValue,
+        numAsString: newValues2.value
+      });
+    }
+    onValueChange(newValues2, sourceInfo);
+  };
+  var _value = value;
+  var _valueIsNumericString = valueIsNumericString;
+  if (isNil(value)) {
+    _value = values2.numAsString;
+    _valueIsNumericString = true;
+  }
+  var newValues = getValues(_value, _valueIsNumericString);
+  useMemo(function() {
+    setValues(newValues);
+  }, [newValues.formattedValue]);
+  return [values2, _onValueChange];
+}
+function defaultRemoveFormatting(value) {
+  return value.replace(/[^0-9]/g, "");
+}
+function defaultFormat(value) {
+  return value;
+}
+function NumberFormatBase(props) {
+  var type2 = props.type;
+  if (type2 === void 0) type2 = "text";
+  var displayType = props.displayType;
+  if (displayType === void 0) displayType = "input";
+  var customInput = props.customInput;
+  var renderText = props.renderText;
+  var getInputRef = props.getInputRef;
+  var format2 = props.format;
+  if (format2 === void 0) format2 = defaultFormat;
+  var removeFormatting2 = props.removeFormatting;
+  if (removeFormatting2 === void 0) removeFormatting2 = defaultRemoveFormatting;
+  var defaultValue = props.defaultValue;
+  var valueIsNumericString = props.valueIsNumericString;
+  var onValueChange = props.onValueChange;
+  var isAllowed = props.isAllowed;
+  var onChange = props.onChange;
+  if (onChange === void 0) onChange = noop$3;
+  var onKeyDown = props.onKeyDown;
+  if (onKeyDown === void 0) onKeyDown = noop$3;
+  var onMouseUp = props.onMouseUp;
+  if (onMouseUp === void 0) onMouseUp = noop$3;
+  var onFocus = props.onFocus;
+  if (onFocus === void 0) onFocus = noop$3;
+  var onBlur = props.onBlur;
+  if (onBlur === void 0) onBlur = noop$3;
+  var propValue = props.value;
+  var getCaretBoundary2 = props.getCaretBoundary;
+  if (getCaretBoundary2 === void 0) getCaretBoundary2 = caretUnknownFormatBoundary;
+  var isValidInputCharacter = props.isValidInputCharacter;
+  if (isValidInputCharacter === void 0) isValidInputCharacter = charIsNumber;
+  var isCharacterSame = props.isCharacterSame;
+  var otherProps = __rest(props, ["type", "displayType", "customInput", "renderText", "getInputRef", "format", "removeFormatting", "defaultValue", "valueIsNumericString", "onValueChange", "isAllowed", "onChange", "onKeyDown", "onMouseUp", "onFocus", "onBlur", "value", "getCaretBoundary", "isValidInputCharacter", "isCharacterSame"]);
+  var ref2 = useInternalValues(propValue, defaultValue, Boolean(valueIsNumericString), format2, removeFormatting2, onValueChange);
+  var ref_0 = ref2[0];
+  var formattedValue = ref_0.formattedValue;
+  var numAsString = ref_0.numAsString;
+  var onFormattedValueChange = ref2[1];
+  var caretPositionBeforeChange = useRef();
+  var lastUpdatedValue = useRef({ formattedValue, numAsString });
+  var _onValueChange = function(values2, source) {
+    lastUpdatedValue.current = { formattedValue: values2.formattedValue, numAsString: values2.value };
+    onFormattedValueChange(values2, source);
+  };
+  var ref$1 = useState(false);
+  var mounted = ref$1[0];
+  var setMounted = ref$1[1];
+  var focusedElm = useRef(null);
+  var timeout = useRef({
+    setCaretTimeout: null,
+    focusTimeout: null
+  });
+  useEffect(function() {
+    setMounted(true);
+    return function() {
+      clearTimeout(timeout.current.setCaretTimeout);
+      clearTimeout(timeout.current.focusTimeout);
+    };
+  }, []);
+  var _format = format2;
+  var getValueObject = function(formattedValue2, numAsString2) {
+    var floatValue = parseFloat(numAsString2);
+    return {
+      formattedValue: formattedValue2,
+      value: numAsString2,
+      floatValue: isNaN(floatValue) ? void 0 : floatValue
+    };
+  };
+  var setPatchedCaretPosition = function(el2, caretPos, currentValue) {
+    if (el2.selectionStart === 0 && el2.selectionEnd === el2.value.length) {
+      return;
+    }
+    setCaretPosition(el2, caretPos);
+    timeout.current.setCaretTimeout = setTimeout(function() {
+      if (el2.value === currentValue && el2.selectionStart !== caretPos) {
+        setCaretPosition(el2, caretPos);
+      }
+    }, 0);
+  };
+  var correctCaretPosition = function(value, caretPos, direction) {
+    return getCaretPosInBoundary(value, caretPos, getCaretBoundary2(value), direction);
+  };
+  var getNewCaretPosition = function(inputValue, newFormattedValue, caretPos) {
+    var caretBoundary = getCaretBoundary2(newFormattedValue);
+    var updatedCaretPos = getCaretPosition(newFormattedValue, formattedValue, inputValue, caretPos, caretBoundary, isValidInputCharacter, isCharacterSame);
+    updatedCaretPos = getCaretPosInBoundary(newFormattedValue, updatedCaretPos, caretBoundary);
+    return updatedCaretPos;
+  };
+  var updateValueAndCaretPosition = function(params) {
+    var newFormattedValue = params.formattedValue;
+    if (newFormattedValue === void 0) newFormattedValue = "";
+    var input = params.input;
+    var source = params.source;
+    var event = params.event;
+    var numAsString2 = params.numAsString;
+    var caretPos;
+    if (input) {
+      var inputValue = params.inputValue || input.value;
+      var currentCaretPosition2 = geInputCaretPosition(input);
+      input.value = newFormattedValue;
+      caretPos = getNewCaretPosition(inputValue, newFormattedValue, currentCaretPosition2);
+      if (caretPos !== void 0) {
+        setPatchedCaretPosition(input, caretPos, newFormattedValue);
+      }
+    }
+    if (newFormattedValue !== formattedValue) {
+      _onValueChange(getValueObject(newFormattedValue, numAsString2), { event, source });
+    }
+  };
+  useEffect(function() {
+    var ref3 = lastUpdatedValue.current;
+    var lastFormattedValue = ref3.formattedValue;
+    var lastNumAsString = ref3.numAsString;
+    if (formattedValue !== lastFormattedValue || numAsString !== lastNumAsString) {
+      _onValueChange(getValueObject(formattedValue, numAsString), {
+        event: void 0,
+        source: SourceType.props
+      });
+    }
+  }, [formattedValue, numAsString]);
+  var currentCaretPosition = focusedElm.current ? geInputCaretPosition(focusedElm.current) : void 0;
+  var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+  useIsomorphicLayoutEffect(function() {
+    var input = focusedElm.current;
+    if (formattedValue !== lastUpdatedValue.current.formattedValue && input) {
+      var caretPos = getNewCaretPosition(lastUpdatedValue.current.formattedValue, formattedValue, currentCaretPosition);
+      input.value = formattedValue;
+      setPatchedCaretPosition(input, caretPos, formattedValue);
+    }
+  }, [formattedValue]);
+  var formatInputValue = function(inputValue, event, source) {
+    var input = event.target;
+    var changeRange = caretPositionBeforeChange.current ? findChangedRangeFromCaretPositions(caretPositionBeforeChange.current, input.selectionEnd) : findChangeRange(formattedValue, inputValue);
+    var changeMeta = Object.assign(Object.assign({}, changeRange), { lastValue: formattedValue });
+    var _numAsString = removeFormatting2(inputValue, changeMeta);
+    var _formattedValue = _format(_numAsString);
+    _numAsString = removeFormatting2(_formattedValue, void 0);
+    if (isAllowed && !isAllowed(getValueObject(_formattedValue, _numAsString))) {
+      var input$1 = event.target;
+      var currentCaretPosition2 = geInputCaretPosition(input$1);
+      var caretPos = getNewCaretPosition(inputValue, formattedValue, currentCaretPosition2);
+      input$1.value = formattedValue;
+      setPatchedCaretPosition(input$1, caretPos, formattedValue);
+      return false;
+    }
+    updateValueAndCaretPosition({
+      formattedValue: _formattedValue,
+      numAsString: _numAsString,
+      inputValue,
+      event,
+      source,
+      input: event.target
+    });
+    return true;
+  };
+  var setCaretPositionInfoBeforeChange = function(el2, endOffset) {
+    if (endOffset === void 0) endOffset = 0;
+    var selectionStart = el2.selectionStart;
+    var selectionEnd = el2.selectionEnd;
+    caretPositionBeforeChange.current = { selectionStart, selectionEnd: selectionEnd + endOffset };
+  };
+  var _onChange = function(e2) {
+    var el2 = e2.target;
+    var inputValue = el2.value;
+    var changed = formatInputValue(inputValue, e2, SourceType.event);
+    if (changed) {
+      onChange(e2);
+    }
+    caretPositionBeforeChange.current = void 0;
+  };
+  var _onKeyDown = function(e2) {
+    var el2 = e2.target;
+    var key = e2.key;
+    var selectionStart = el2.selectionStart;
+    var selectionEnd = el2.selectionEnd;
+    var value = el2.value;
+    if (value === void 0) value = "";
+    var expectedCaretPosition;
+    if (key === "ArrowLeft" || key === "Backspace") {
+      expectedCaretPosition = Math.max(selectionStart - 1, 0);
+    } else if (key === "ArrowRight") {
+      expectedCaretPosition = Math.min(selectionStart + 1, value.length);
+    } else if (key === "Delete") {
+      expectedCaretPosition = selectionStart;
+    }
+    var endOffset = 0;
+    if (key === "Delete" && selectionStart === selectionEnd) {
+      endOffset = 1;
+    }
+    var isArrowKey = key === "ArrowLeft" || key === "ArrowRight";
+    if (expectedCaretPosition === void 0 || selectionStart !== selectionEnd && !isArrowKey) {
+      onKeyDown(e2);
+      setCaretPositionInfoBeforeChange(el2, endOffset);
+      return;
+    }
+    var newCaretPosition = expectedCaretPosition;
+    if (isArrowKey) {
+      var direction = key === "ArrowLeft" ? "left" : "right";
+      newCaretPosition = correctCaretPosition(value, expectedCaretPosition, direction);
+      if (newCaretPosition !== expectedCaretPosition) {
+        e2.preventDefault();
+      }
+    } else if (key === "Delete" && !isValidInputCharacter(value[expectedCaretPosition])) {
+      newCaretPosition = correctCaretPosition(value, expectedCaretPosition, "right");
+    } else if (key === "Backspace" && !isValidInputCharacter(value[expectedCaretPosition])) {
+      newCaretPosition = correctCaretPosition(value, expectedCaretPosition, "left");
+    }
+    if (newCaretPosition !== expectedCaretPosition) {
+      setPatchedCaretPosition(el2, newCaretPosition, value);
+    }
+    onKeyDown(e2);
+    setCaretPositionInfoBeforeChange(el2, endOffset);
+  };
+  var _onMouseUp = function(e2) {
+    var el2 = e2.target;
+    var correctCaretPositionIfRequired = function() {
+      var selectionStart = el2.selectionStart;
+      var selectionEnd = el2.selectionEnd;
+      var value = el2.value;
+      if (value === void 0) value = "";
+      if (selectionStart === selectionEnd) {
+        var caretPosition = correctCaretPosition(value, selectionStart);
+        if (caretPosition !== selectionStart) {
+          setPatchedCaretPosition(el2, caretPosition, value);
+        }
+      }
+    };
+    correctCaretPositionIfRequired();
+    requestAnimationFrame(function() {
+      correctCaretPositionIfRequired();
+    });
+    onMouseUp(e2);
+    setCaretPositionInfoBeforeChange(el2);
+  };
+  var _onFocus = function(e2) {
+    if (e2.persist) {
+      e2.persist();
+    }
+    var el2 = e2.target;
+    var currentTarget = e2.currentTarget;
+    focusedElm.current = el2;
+    timeout.current.focusTimeout = setTimeout(function() {
+      var selectionStart = el2.selectionStart;
+      var selectionEnd = el2.selectionEnd;
+      var value = el2.value;
+      if (value === void 0) value = "";
+      var caretPosition = correctCaretPosition(value, selectionStart);
+      if (caretPosition !== selectionStart && !(selectionStart === 0 && selectionEnd === value.length)) {
+        setPatchedCaretPosition(el2, caretPosition, value);
+      }
+      onFocus(Object.assign(Object.assign({}, e2), { currentTarget }));
+    }, 0);
+  };
+  var _onBlur = function(e2) {
+    focusedElm.current = null;
+    clearTimeout(timeout.current.focusTimeout);
+    clearTimeout(timeout.current.setCaretTimeout);
+    onBlur(e2);
+  };
+  var inputMode = mounted && addInputMode() ? "numeric" : void 0;
+  var inputProps = Object.assign({ inputMode }, otherProps, {
+    type: type2,
+    value: formattedValue,
+    onChange: _onChange,
+    onKeyDown: _onKeyDown,
+    onMouseUp: _onMouseUp,
+    onFocus: _onFocus,
+    onBlur: _onBlur
+  });
+  if (displayType === "text") {
+    return renderText ? React__default.createElement(React__default.Fragment, null, renderText(formattedValue, otherProps) || null) : React__default.createElement("span", Object.assign({}, otherProps, { ref: getInputRef }), formattedValue);
+  } else if (customInput) {
+    var CustomInput = customInput;
+    return React__default.createElement(CustomInput, Object.assign({}, inputProps, { ref: getInputRef }));
+  }
+  return React__default.createElement("input", Object.assign({}, inputProps, { ref: getInputRef }));
+}
+function format(numStr, props) {
+  var decimalScale = props.decimalScale;
+  var fixedDecimalScale = props.fixedDecimalScale;
+  var prefix2 = props.prefix;
+  if (prefix2 === void 0) prefix2 = "";
+  var suffix = props.suffix;
+  if (suffix === void 0) suffix = "";
+  var allowNegative = props.allowNegative;
+  var thousandsGroupStyle = props.thousandsGroupStyle;
+  if (thousandsGroupStyle === void 0) thousandsGroupStyle = "thousand";
+  if (numStr === "" || numStr === "-") {
+    return numStr;
+  }
+  var ref2 = getSeparators(props);
+  var thousandSeparator = ref2.thousandSeparator;
+  var decimalSeparator = ref2.decimalSeparator;
+  var hasDecimalSeparator = decimalScale !== 0 && numStr.indexOf(".") !== -1 || decimalScale && fixedDecimalScale;
+  var ref$1 = splitDecimal(numStr, allowNegative);
+  var beforeDecimal = ref$1.beforeDecimal;
+  var afterDecimal = ref$1.afterDecimal;
+  var addNegation = ref$1.addNegation;
+  if (decimalScale !== void 0) {
+    afterDecimal = limitToScale(afterDecimal, decimalScale, !!fixedDecimalScale);
+  }
+  if (thousandSeparator) {
+    beforeDecimal = applyThousandSeparator(beforeDecimal, thousandSeparator, thousandsGroupStyle);
+  }
+  if (prefix2) {
+    beforeDecimal = prefix2 + beforeDecimal;
+  }
+  if (suffix) {
+    afterDecimal = afterDecimal + suffix;
+  }
+  if (addNegation) {
+    beforeDecimal = "-" + beforeDecimal;
+  }
+  numStr = beforeDecimal + (hasDecimalSeparator && decimalSeparator || "") + afterDecimal;
+  return numStr;
+}
+function getSeparators(props) {
+  var decimalSeparator = props.decimalSeparator;
+  if (decimalSeparator === void 0) decimalSeparator = ".";
+  var thousandSeparator = props.thousandSeparator;
+  var allowedDecimalSeparators = props.allowedDecimalSeparators;
+  if (thousandSeparator === true) {
+    thousandSeparator = ",";
+  }
+  if (!allowedDecimalSeparators) {
+    allowedDecimalSeparators = [decimalSeparator, "."];
+  }
+  return {
+    decimalSeparator,
+    thousandSeparator,
+    allowedDecimalSeparators
+  };
+}
+function handleNegation(value, allowNegative) {
+  if (value === void 0) value = "";
+  var negationRegex = new RegExp("(-)");
+  var doubleNegationRegex = new RegExp("(-)(.)*(-)");
+  var hasNegation = negationRegex.test(value);
+  var removeNegation = doubleNegationRegex.test(value);
+  value = value.replace(/-/g, "");
+  if (hasNegation && !removeNegation && allowNegative) {
+    value = "-" + value;
+  }
+  return value;
+}
+function getNumberRegex(decimalSeparator, global2) {
+  return new RegExp("(^-)|[0-9]|" + escapeRegExp$1(decimalSeparator), "g");
+}
+function isNumericString(val, prefix2, suffix) {
+  if (val === "") {
+    return true;
+  }
+  return !(prefix2 === null || prefix2 === void 0 ? void 0 : prefix2.match(/\d/)) && !(suffix === null || suffix === void 0 ? void 0 : suffix.match(/\d/)) && typeof val === "string" && !isNaN(Number(val));
+}
+function removeFormatting(value, changeMeta, props) {
+  var assign;
+  if (changeMeta === void 0) changeMeta = getDefaultChangeMeta(value);
+  var allowNegative = props.allowNegative;
+  var prefix2 = props.prefix;
+  if (prefix2 === void 0) prefix2 = "";
+  var suffix = props.suffix;
+  if (suffix === void 0) suffix = "";
+  var decimalScale = props.decimalScale;
+  var from2 = changeMeta.from;
+  var to2 = changeMeta.to;
+  var start2 = to2.start;
+  var end2 = to2.end;
+  var ref2 = getSeparators(props);
+  var allowedDecimalSeparators = ref2.allowedDecimalSeparators;
+  var decimalSeparator = ref2.decimalSeparator;
+  var isBeforeDecimalSeparator = value[end2] === decimalSeparator;
+  if (charIsNumber(value) && (value === prefix2 || value === suffix) && changeMeta.lastValue === "") {
+    return value;
+  }
+  if (end2 - start2 === 1 && allowedDecimalSeparators.indexOf(value[start2]) !== -1) {
+    var separator = decimalScale === 0 ? "" : decimalSeparator;
+    value = value.substring(0, start2) + separator + value.substring(start2 + 1, value.length);
+  }
+  var stripNegation = function(value2, start3, end3) {
+    var hasNegation2 = false;
+    var hasDoubleNegation = false;
+    if (prefix2.startsWith("-")) {
+      hasNegation2 = false;
+    } else if (value2.startsWith("--")) {
+      hasNegation2 = false;
+      hasDoubleNegation = true;
+    } else if (suffix.startsWith("-") && value2.length === suffix.length) {
+      hasNegation2 = false;
+    } else if (value2[0] === "-") {
+      hasNegation2 = true;
+    }
+    var charsToRemove = hasNegation2 ? 1 : 0;
+    if (hasDoubleNegation) {
+      charsToRemove = 2;
+    }
+    if (charsToRemove) {
+      value2 = value2.substring(charsToRemove);
+      start3 -= charsToRemove;
+      end3 -= charsToRemove;
+    }
+    return { value: value2, start: start3, end: end3, hasNegation: hasNegation2 };
+  };
+  var toMetadata = stripNegation(value, start2, end2);
+  var hasNegation = toMetadata.hasNegation;
+  assign = toMetadata, value = assign.value, start2 = assign.start, end2 = assign.end;
+  var ref$1 = stripNegation(changeMeta.lastValue, from2.start, from2.end);
+  var fromStart = ref$1.start;
+  var fromEnd = ref$1.end;
+  var lastValue = ref$1.value;
+  var updatedSuffixPart = value.substring(start2, end2);
+  if (value.length && lastValue.length && (fromStart > lastValue.length - suffix.length || fromEnd < prefix2.length) && !(updatedSuffixPart && suffix.startsWith(updatedSuffixPart))) {
+    value = lastValue;
+  }
+  var startIndex = 0;
+  if (value.startsWith(prefix2)) {
+    startIndex += prefix2.length;
+  } else if (start2 < prefix2.length) {
+    startIndex = start2;
+  }
+  value = value.substring(startIndex);
+  end2 -= startIndex;
+  var endIndex = value.length;
+  var suffixStartIndex = value.length - suffix.length;
+  if (value.endsWith(suffix)) {
+    endIndex = suffixStartIndex;
+  } else if (end2 > suffixStartIndex) {
+    endIndex = end2;
+  } else if (end2 > value.length - suffix.length) {
+    endIndex = end2;
+  }
+  value = value.substring(0, endIndex);
+  value = handleNegation(hasNegation ? "-" + value : value, allowNegative);
+  value = (value.match(getNumberRegex(decimalSeparator)) || []).join("");
+  var firstIndex = value.indexOf(decimalSeparator);
+  value = value.replace(new RegExp(escapeRegExp$1(decimalSeparator), "g"), function(match, index) {
+    return index === firstIndex ? "." : "";
+  });
+  var ref$2 = splitDecimal(value, allowNegative);
+  var beforeDecimal = ref$2.beforeDecimal;
+  var afterDecimal = ref$2.afterDecimal;
+  var addNegation = ref$2.addNegation;
+  if (to2.end - to2.start < from2.end - from2.start && beforeDecimal === "" && isBeforeDecimalSeparator && !parseFloat(afterDecimal)) {
+    value = addNegation ? "-" : "";
+  }
+  return value;
+}
+function getCaretBoundary(formattedValue, props) {
+  var prefix2 = props.prefix;
+  if (prefix2 === void 0) prefix2 = "";
+  var suffix = props.suffix;
+  if (suffix === void 0) suffix = "";
+  var boundaryAry = Array.from({ length: formattedValue.length + 1 }).map(function() {
+    return true;
+  });
+  var hasNegation = formattedValue[0] === "-";
+  boundaryAry.fill(false, 0, prefix2.length + (hasNegation ? 1 : 0));
+  var valLn = formattedValue.length;
+  boundaryAry.fill(false, valLn - suffix.length + 1, valLn + 1);
+  return boundaryAry;
+}
+function validateAndUpdateProps(props) {
+  var ref2 = getSeparators(props);
+  var thousandSeparator = ref2.thousandSeparator;
+  var decimalSeparator = ref2.decimalSeparator;
+  var prefix2 = props.prefix;
+  if (prefix2 === void 0) prefix2 = "";
+  var allowNegative = props.allowNegative;
+  if (allowNegative === void 0) allowNegative = true;
+  if (thousandSeparator === decimalSeparator) {
+    throw new Error("\n        Decimal separator can't be same as thousand separator.\n        thousandSeparator: " + thousandSeparator + ' (thousandSeparator = {true} is same as thousandSeparator = ",")\n        decimalSeparator: ' + decimalSeparator + " (default value for decimalSeparator is .)\n     ");
+  }
+  if (prefix2.startsWith("-") && allowNegative) {
+    console.error("\n      Prefix can't start with '-' when allowNegative is true.\n      prefix: " + prefix2 + "\n      allowNegative: " + allowNegative + "\n    ");
+    allowNegative = false;
+  }
+  return Object.assign(Object.assign({}, props), { allowNegative });
+}
+function useNumericFormat(props) {
+  props = validateAndUpdateProps(props);
+  props.decimalSeparator;
+  props.allowedDecimalSeparators;
+  props.thousandsGroupStyle;
+  var suffix = props.suffix;
+  var allowNegative = props.allowNegative;
+  var allowLeadingZeros = props.allowLeadingZeros;
+  var onKeyDown = props.onKeyDown;
+  if (onKeyDown === void 0) onKeyDown = noop$3;
+  var onBlur = props.onBlur;
+  if (onBlur === void 0) onBlur = noop$3;
+  var thousandSeparator = props.thousandSeparator;
+  var decimalScale = props.decimalScale;
+  var fixedDecimalScale = props.fixedDecimalScale;
+  var prefix2 = props.prefix;
+  if (prefix2 === void 0) prefix2 = "";
+  var defaultValue = props.defaultValue;
+  var value = props.value;
+  var valueIsNumericString = props.valueIsNumericString;
+  var onValueChange = props.onValueChange;
+  var restProps = __rest(props, ["decimalSeparator", "allowedDecimalSeparators", "thousandsGroupStyle", "suffix", "allowNegative", "allowLeadingZeros", "onKeyDown", "onBlur", "thousandSeparator", "decimalScale", "fixedDecimalScale", "prefix", "defaultValue", "value", "valueIsNumericString", "onValueChange"]);
+  var ref2 = getSeparators(props);
+  var decimalSeparator = ref2.decimalSeparator;
+  var allowedDecimalSeparators = ref2.allowedDecimalSeparators;
+  var _format = function(numStr) {
+    return format(numStr, props);
+  };
+  var _removeFormatting = function(inputValue, changeMeta) {
+    return removeFormatting(inputValue, changeMeta, props);
+  };
+  var _value = isNil(value) ? defaultValue : value;
+  var _valueIsNumericString = valueIsNumericString !== null && valueIsNumericString !== void 0 ? valueIsNumericString : isNumericString(_value, prefix2, suffix);
+  if (!isNil(value)) {
+    _valueIsNumericString = _valueIsNumericString || typeof value === "number";
+  } else if (!isNil(defaultValue)) {
+    _valueIsNumericString = _valueIsNumericString || typeof defaultValue === "number";
+  }
+  var roundIncomingValueToPrecision = function(value2) {
+    if (isNotValidValue(value2)) {
+      return value2;
+    }
+    if (typeof value2 === "number") {
+      value2 = toNumericString(value2);
+    }
+    if (_valueIsNumericString && typeof decimalScale === "number") {
+      return roundToPrecision(value2, decimalScale, Boolean(fixedDecimalScale));
+    }
+    return value2;
+  };
+  var ref$1 = useInternalValues(roundIncomingValueToPrecision(value), roundIncomingValueToPrecision(defaultValue), Boolean(_valueIsNumericString), _format, _removeFormatting, onValueChange);
+  var ref$1_0 = ref$1[0];
+  var numAsString = ref$1_0.numAsString;
+  var formattedValue = ref$1_0.formattedValue;
+  var _onValueChange = ref$1[1];
+  var _onKeyDown = function(e2) {
+    var el2 = e2.target;
+    var key = e2.key;
+    var selectionStart = el2.selectionStart;
+    var selectionEnd = el2.selectionEnd;
+    var value2 = el2.value;
+    if (value2 === void 0) value2 = "";
+    if ((key === "Backspace" || key === "Delete") && selectionEnd < prefix2.length) {
+      e2.preventDefault();
+      return;
+    }
+    if (selectionStart !== selectionEnd) {
+      onKeyDown(e2);
+      return;
+    }
+    if (key === "Backspace" && value2[0] === "-" && selectionStart === prefix2.length + 1 && allowNegative) {
+      setCaretPosition(el2, 1);
+    }
+    if (decimalScale && fixedDecimalScale) {
+      if (key === "Backspace" && value2[selectionStart - 1] === decimalSeparator) {
+        setCaretPosition(el2, selectionStart - 1);
+        e2.preventDefault();
+      } else if (key === "Delete" && value2[selectionStart] === decimalSeparator) {
+        e2.preventDefault();
+      }
+    }
+    if ((allowedDecimalSeparators === null || allowedDecimalSeparators === void 0 ? void 0 : allowedDecimalSeparators.includes(key)) && value2[selectionStart] === decimalSeparator) {
+      setCaretPosition(el2, selectionStart + 1);
+    }
+    var _thousandSeparator = thousandSeparator === true ? "," : thousandSeparator;
+    if (key === "Backspace" && value2[selectionStart - 1] === _thousandSeparator) {
+      setCaretPosition(el2, selectionStart - 1);
+    }
+    if (key === "Delete" && value2[selectionStart] === _thousandSeparator) {
+      setCaretPosition(el2, selectionStart + 1);
+    }
+    onKeyDown(e2);
+  };
+  var _onBlur = function(e2) {
+    var _value2 = numAsString;
+    if (!_value2.match(/\d/g)) {
+      _value2 = "";
+    }
+    if (!allowLeadingZeros) {
+      _value2 = fixLeadingZero(_value2);
+    }
+    if (fixedDecimalScale && decimalScale) {
+      _value2 = roundToPrecision(_value2, decimalScale, fixedDecimalScale);
+    }
+    if (_value2 !== numAsString) {
+      var formattedValue2 = format(_value2, props);
+      _onValueChange({
+        formattedValue: formattedValue2,
+        value: _value2,
+        floatValue: parseFloat(_value2)
+      }, {
+        event: e2,
+        source: SourceType.event
+      });
+    }
+    onBlur(e2);
+  };
+  var isValidInputCharacter = function(inputChar) {
+    if (inputChar === decimalSeparator) {
+      return true;
+    }
+    return charIsNumber(inputChar);
+  };
+  var isCharacterSame = function(ref3) {
+    var currentValue = ref3.currentValue;
+    var lastValue = ref3.lastValue;
+    var formattedValue2 = ref3.formattedValue;
+    var currentValueIndex = ref3.currentValueIndex;
+    var formattedValueIndex = ref3.formattedValueIndex;
+    var curChar = currentValue[currentValueIndex];
+    var newChar = formattedValue2[formattedValueIndex];
+    var typedRange = findChangeRange(lastValue, currentValue);
+    var to2 = typedRange.to;
+    var getDecimalSeparatorIndex = function(value2) {
+      return _removeFormatting(value2).indexOf(".") + prefix2.length;
+    };
+    if (value === 0 && fixedDecimalScale && decimalScale && currentValue[to2.start] === decimalSeparator && getDecimalSeparatorIndex(currentValue) < currentValueIndex && getDecimalSeparatorIndex(formattedValue2) > formattedValueIndex) {
+      return false;
+    }
+    if (currentValueIndex >= to2.start && currentValueIndex < to2.end && allowedDecimalSeparators && allowedDecimalSeparators.includes(curChar) && newChar === decimalSeparator) {
+      return true;
+    }
+    return curChar === newChar;
+  };
+  return Object.assign(Object.assign({}, restProps), {
+    value: formattedValue,
+    valueIsNumericString: false,
+    isValidInputCharacter,
+    isCharacterSame,
+    onValueChange: _onValueChange,
+    format: _format,
+    removeFormatting: _removeFormatting,
+    getCaretBoundary: function(formattedValue2) {
+      return getCaretBoundary(formattedValue2, props);
+    },
+    onKeyDown: _onKeyDown,
+    onBlur: _onBlur
+  });
+}
+function NumericFormat(props) {
+  var numericFormatProps = useNumericFormat(props);
+  return React__default.createElement(NumberFormatBase, Object.assign({}, numericFormatProps));
+}
+const STEP = 1;
+const SMALL_STEP = 0.1;
+const LARGE_STEP = 10;
+const DEFAULT_DECIMAL_SCALE = 2;
+const ZERO_DECIMAL_SCALE = 0;
+const DEFAULT_DECIMAL_SEPARATOR = ",";
+const STEP_HOLD_DELAY = 200;
+const STEP_HOLD_INTERVAL = 100;
 function NumberComponent(props) {
   const {
     name,
@@ -76618,57 +77831,177 @@ function NumberComponent(props) {
     minValue,
     maxValue,
     onChange,
-    textAlign = "left",
-    fullWidth,
-    width: width2 = 400,
-    errorMessage
+    slotProps,
+    onKeyDown,
+    onBlur,
+    inputRef,
+    className,
+    allowDecimals = false,
+    numberDecimalSeparator,
+    disabled,
+    ...restProps
   } = props;
-  const services = useContext(ServicesContext);
-  const handleBlur = (event) => {
-    const newValue = Number(event.target.value);
-    if (minValue != null && newValue < minValue) {
-      onChange({
-        target: {
-          ...event.target,
-          value: minValue.toString()
-        },
-        currentTarget: event.currentTarget
-      });
-      return;
+  const decimalScale = allowDecimals ? DEFAULT_DECIMAL_SCALE : ZERO_DECIMAL_SCALE;
+  const decimalSeparator = numberDecimalSeparator ?? DEFAULT_DECIMAL_SEPARATOR;
+  const innerInputRef = React__default.useRef(null);
+  const forkedInputRef = useForkRef(inputRef, innerInputRef);
+  const innerValue = value ?? "";
+  const valueRef = React__default.useRef(value);
+  React__default.useEffect(() => {
+    valueRef.current = innerValue;
+  }, [innerValue]);
+  const holdTimeoutRef = React__default.useRef(null);
+  const holdIntervalRef = React__default.useRef(null);
+  function clampValue(value2) {
+    let newValue = value2;
+    if (typeof minValue !== "undefined" && +value2 < +minValue) newValue = minValue;
+    if (typeof maxValue !== "undefined" && +value2 > +maxValue) newValue = maxValue;
+    return String(newValue);
+  }
+  function handleBlur(event) {
+    if (valueRef.current) {
+      onChange(clampValue(valueRef.current));
     }
-    if (maxValue != null && newValue > maxValue) {
-      onChange({
-        target: {
-          ...event.target,
-          value: maxValue.toString()
-        },
-        currentTarget: event.currentTarget
-      });
-      return;
+    onBlur?.(event);
+  }
+  function handleKeyboardIncrement(event) {
+    if (typeof maxValue !== "undefined" && +valueRef.current >= +maxValue) return;
+    let newValue;
+    switch (true) {
+      case event.shiftKey:
+        newValue = +valueRef.current + LARGE_STEP;
+        break;
+      case event.altKey:
+        newValue = Math.round((+valueRef.current + SMALL_STEP) * 10) / 10;
+        break;
+      default:
+        newValue = +valueRef.current + STEP;
+    }
+    onChange(clampValue(newValue));
+  }
+  function handleKeyboardDecrement(event) {
+    if (typeof minValue !== "undefined" && +valueRef.current <= +minValue) return;
+    let newValue;
+    switch (true) {
+      case event.shiftKey:
+        newValue = +valueRef.current - LARGE_STEP;
+        break;
+      case event.altKey:
+        newValue = Math.round((+valueRef.current - SMALL_STEP) * 10) / 10;
+        break;
+      default:
+        newValue = +valueRef.current - STEP;
+    }
+    onChange(clampValue(newValue));
+  }
+  function handleMouseStep(type2) {
+    let newValue;
+    if (type2 === "increment") {
+      if (typeof maxValue !== "undefined" && +valueRef.current >= +maxValue) return;
+      newValue = +valueRef.current + STEP;
+    } else {
+      if (typeof minValue !== "undefined" && +valueRef.current <= +minValue) return;
+      newValue = +valueRef.current - STEP;
     }
+    onChange(clampValue(newValue));
+  }
+  const handleControlsMouseStart = (type2) => (event) => {
+    event.preventDefault();
+    innerInputRef.current?.focus();
+    handleMouseStep(type2);
+    holdTimeoutRef.current = window.setTimeout(() => {
+      holdIntervalRef.current = window.setInterval(() => handleMouseStep(type2), STEP_HOLD_INTERVAL);
+    }, STEP_HOLD_DELAY);
   };
-  if (minValue && maxValue && +maxValue <= +minValue) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { message: services.resources.NumberRangeError });
+  function handleControlsMouseEnd() {
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current);
+      holdTimeoutRef.current = null;
+    }
+    if (holdIntervalRef.current) {
+      clearInterval(holdIntervalRef.current);
+      holdIntervalRef.current = null;
+    }
   }
-  return /* @__PURE__ */ jsxs("div", { className: "execute-script-number", children: [
-    /* @__PURE__ */ jsx(
-      TextField$3,
-      {
-        name,
-        type: "number",
-        variant: "outlined",
-        size: "small",
-        ...props,
-        fullWidth,
-        style: !fullWidth ? { width: `${width2}px` } : {},
-        slotProps: { htmlInput: { "data-testid": `${name}-number-input`, style: { textAlign } } },
-        value,
-        onBlur: handleBlur,
-        onChange
-      }
-    ),
-    errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { message: errorMessage })
-  ] });
+  function handleKeyDown2(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      handleKeyboardDecrement(event);
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      handleKeyboardIncrement(event);
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onChange(clampValue(valueRef.current));
+    }
+    if (event.key === "-" && valueRef.current === "0") {
+      event.preventDefault();
+      return;
+    }
+    onKeyDown?.(event);
+  }
+  function handleChange(values2, sourceInfo) {
+    if (sourceInfo.source === "event") {
+      const newValue = values2.value === "-0" ? "0" : values2.value;
+      onChange(newValue);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    NumericFormat,
+    {
+      customInput: TextField$3,
+      variant: "outlined",
+      size: "small",
+      fullWidth: true,
+      value: innerValue,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown2,
+      onValueChange: handleChange,
+      decimalScale,
+      decimalSeparator,
+      name,
+      disabled,
+      autoComplete: "off",
+      slotProps: { ...slotProps, htmlInput: { "data-testid": `${name}-number-input`, ...slotProps?.htmlInput }, input: {
+        ...slotProps?.input,
+        endAdornment: /* @__PURE__ */ jsx(InputAdornment$3, { position: "end", className: classNames("number-component__controls"), children: /* @__PURE__ */ jsxs(Stack, { spacing: 0, children: [
+          /* @__PURE__ */ jsx(
+            IconButton$3,
+            {
+              className: "number-component__icon-button",
+              onMouseDown: handleControlsMouseStart("increment"),
+              disabled,
+              onMouseUp: handleControlsMouseEnd,
+              onMouseLeave: handleControlsMouseEnd,
+              disableRipple: true,
+              tabIndex: -1,
+              "data-testid": `${name}-number-increment-button`,
+              children: /* @__PURE__ */ jsx(ArrowDropUpOutlined, { fontSize: "small", className: "number-component__icon-up" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton$3,
+            {
+              className: "number-component__icon-button",
+              onMouseDown: handleControlsMouseStart("decrement"),
+              disabled,
+              onMouseUp: handleControlsMouseEnd,
+              onMouseLeave: handleControlsMouseEnd,
+              disableRipple: true,
+              tabIndex: -1,
+              "data-testid": `${name}-number-decrement-button`,
+              children: /* @__PURE__ */ jsx(ArrowDropDownOutlined, { fontSize: "small", className: "number-component__icon-down" })
+            }
+          )
+        ] }) })
+      } },
+      className: classNames("number-component", className),
+      inputRef: forkedInputRef,
+      ...restProps
+    }
+  );
 }
 function ProcessOverlay(props) {
   const { children, inProcess, message, spinnerSize = 60, className } = props;
@@ -82265,6 +83598,12 @@ const commonMuiProps = {
       },
       MenuListProps: {
         disablePadding: true
+      },
+      slotProps: {
+        paper: {
+          // Сдвигаем меню на 1px вниз, чтобы фон поповера не накрывал нижнюю границу select, когда координаты поля оказываются «между пикселями»
+          sx: { mt: "1px" }
+        }
       }
     }
   }
@@ -82337,6 +83676,35 @@ const theme = createTheme$3({
     h1: {
       fontSize: "2rem",
       fontWeight: 600
+    },
+    h4: {
+      fontSize: "1.2rem",
+      fontWeight: 600
+    },
+    h5: {
+      fontSize: "1.1rem",
+      fontWeight: 600
+    },
+    h6: {
+      fontSize: "1rem",
+      fontWeight: 600,
+      lineHeight: "normal"
+    },
+    subtitle1: {
+      fontSize: "1.5rem",
+      fontWeight: 400,
+      lineHeight: 1.5
+    },
+    subtitle2: {
+      fontSize: "1.2rem",
+      fontWeight: 400
+    },
+    body2: {
+      fontSize: ".85rem",
+      lineHeight: 1.5
+    },
+    caption: {
+      fontSize: ".8rem"
     }
   },
   components: {
@@ -82443,10 +83811,14 @@ function Header(props) {
   const { label, hidden } = props;
   return /* @__PURE__ */ jsx("div", { className: classNames("header", hideIf(hidden)), children: /* @__PURE__ */ jsx(Typography$3, { variant: "h1", color: "secondary", children: label }) });
 }
+function stringToBoolean$1(value) {
+  return value && value === "true";
+}
 function Number$1(props) {
   const { required, id: fieldName, value = "", parameters = {} } = props;
   const services = useContext(ServicesContext);
-  const { maxValue, minValue } = parameters;
+  const { maxValue, minValue, allowDecimals } = parameters;
+  const { numberDecimalSeparator } = services.applicationSettings.culture;
   const { resetField, control } = useCustomFormContext();
   const {
     field,
@@ -82457,34 +83829,23 @@ function Number$1(props) {
     rules: { required },
     defaultValue: value
   });
-  function handleBlur(event) {
-    const newValue = event.target.value;
-    if (minValue && +newValue < +minValue) {
-      field.onChange(minValue);
-      return;
-    }
-    if (maxValue && +newValue > +maxValue) {
-      field.onChange(maxValue);
-      return;
-    }
-    field.onBlur();
-  }
   const renderContent = () => {
     if (minValue && maxValue && +maxValue <= +minValue) {
       return /* @__PURE__ */ jsx(ErrorMessage, { message: services.resources.NumberRangeError });
     }
+    const { ref: ref2, ...restField } = field;
+    const allowDecimalsBoolean = stringToBoolean$1(allowDecimals);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        TextField$3,
+        NumberComponent,
         {
-          variant: "outlined",
-          size: "small",
-          fullWidth: true,
-          ...field,
-          slotProps: { htmlInput: { "data-testid": "number-input" } },
+          ...restField,
+          inputRef: ref2,
           className: "number",
-          onBlur: handleBlur,
-          type: "number"
+          maxValue,
+          minValue,
+          allowDecimals: allowDecimalsBoolean,
+          numberDecimalSeparator
         }
       ),
       error && /* @__PURE__ */ jsx(ErrorMessage, { message: services.resources.Dialog_ValidationRequired })
@@ -82608,21 +83969,6 @@ const databaseGenerationSettingsValueType = {
   useOuterMetadata: false
 };
 const ListContext = /* @__PURE__ */ React.createContext({});
-function isFocusVisible(element) {
-  try {
-    return element.matches(":focus-visible");
-  } catch (error) {
-  }
-  return false;
-}
-const UNINITIALIZED = {};
-function useLazyRef(init, initArg) {
-  const ref2 = React.useRef(UNINITIALIZED);
-  if (ref2.current === UNINITIALIZED) {
-    ref2.current = init(initArg);
-  }
-  return ref2;
-}
 class LazyRipple {
   /** React ref to the ripple instance */
   /** If the ripple component should be mounted */
@@ -82690,40 +84036,6 @@ function createControlledPromise() {
   p2.reject = reject;
   return p2;
 }
-const EMPTY$1 = [];
-function useOnMount(fn2) {
-  React.useEffect(fn2, EMPTY$1);
-}
-class Timeout {
-  static create() {
-    return new Timeout();
-  }
-  currentId = null;
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  start(delay, fn2) {
-    this.clear();
-    this.currentId = setTimeout(() => {
-      this.currentId = null;
-      fn2();
-    }, delay);
-  }
-  clear = () => {
-    if (this.currentId !== null) {
-      clearTimeout(this.currentId);
-      this.currentId = null;
-    }
-  };
-  disposeEffect = () => {
-    return this.clear;
-  };
-}
-function useTimeout() {
-  const timeout = useLazyRef(Timeout.create).current;
-  useOnMount(timeout.disposeEffect);
-  return timeout;
-}
 function Ripple(props) {
   const {
     className,
@@ -83785,109 +85097,6 @@ function getListItemTextUtilityClass(slot) {
   return generateUtilityClass("MuiListItemText", slot);
 }
 const listItemTextClasses = generateUtilityClasses("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
-function isHostComponent$1(element) {
-  return typeof element === "string";
-}
-function appendOwnerState(elementType, otherProps, ownerState) {
-  if (elementType === void 0 || isHostComponent$1(elementType)) {
-    return otherProps;
-  }
-  return {
-    ...otherProps,
-    ownerState: {
-      ...otherProps.ownerState,
-      ...ownerState
-    }
-  };
-}
-function resolveComponentProps(componentProps, ownerState, slotState) {
-  if (typeof componentProps === "function") {
-    return componentProps(ownerState, slotState);
-  }
-  return componentProps;
-}
-function extractEventHandlers(object, excludeKeys = []) {
-  if (object === void 0) {
-    return {};
-  }
-  const result = {};
-  Object.keys(object).filter((prop) => prop.match(/^on[A-Z]/) && typeof object[prop] === "function" && !excludeKeys.includes(prop)).forEach((prop) => {
-    result[prop] = object[prop];
-  });
-  return result;
-}
-function omitEventHandlers(object) {
-  if (object === void 0) {
-    return {};
-  }
-  const result = {};
-  Object.keys(object).filter((prop) => !(prop.match(/^on[A-Z]/) && typeof object[prop] === "function")).forEach((prop) => {
-    result[prop] = object[prop];
-  });
-  return result;
-}
-function mergeSlotProps(parameters) {
-  const {
-    getSlotProps,
-    additionalProps,
-    externalSlotProps,
-    externalForwardedProps,
-    className
-  } = parameters;
-  if (!getSlotProps) {
-    const joinedClasses2 = clsx$1(additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
-    const mergedStyle2 = {
-      ...additionalProps?.style,
-      ...externalForwardedProps?.style,
-      ...externalSlotProps?.style
-    };
-    const props2 = {
-      ...additionalProps,
-      ...externalForwardedProps,
-      ...externalSlotProps
-    };
-    if (joinedClasses2.length > 0) {
-      props2.className = joinedClasses2;
-    }
-    if (Object.keys(mergedStyle2).length > 0) {
-      props2.style = mergedStyle2;
-    }
-    return {
-      props: props2,
-      internalRef: void 0
-    };
-  }
-  const eventHandlers = extractEventHandlers({
-    ...externalForwardedProps,
-    ...externalSlotProps
-  });
-  const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
-  const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
-  const internalSlotProps = getSlotProps(eventHandlers);
-  const joinedClasses = clsx$1(internalSlotProps?.className, additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
-  const mergedStyle = {
-    ...internalSlotProps?.style,
-    ...additionalProps?.style,
-    ...externalForwardedProps?.style,
-    ...externalSlotProps?.style
-  };
-  const props = {
-    ...internalSlotProps,
-    ...additionalProps,
-    ...otherPropsWithoutEventHandlers,
-    ...componentsPropsWithoutEventHandlers
-  };
-  if (joinedClasses.length > 0) {
-    props.className = joinedClasses;
-  }
-  if (Object.keys(mergedStyle).length > 0) {
-    props.style = mergedStyle;
-  }
-  return {
-    props,
-    internalRef: internalSlotProps.ref
-  };
-}
 function useSlot(name, parameters) {
   const {
     className,
@@ -84291,7 +85500,7 @@ function DropdownWithTooltip(props) {
     },
     renderValue: (selected) => {
       const selectedOption = options.find((option) => option.value === Number(selected));
-      return /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: selectedOption?.tooltip, children: /* @__PURE__ */ jsx("span", { className: "database-generation-settings__selected-value", children: selectedOption?.displayName }) });
+      return /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: selectedOption?.tooltip, children: /* @__PURE__ */ jsx(Typography$3, { component: "span", className: "database-generation-settings__selected-value", children: selectedOption?.displayName }) });
     }
   };
   return /* @__PURE__ */ jsx(
@@ -84305,7 +85514,7 @@ function DropdownWithTooltip(props) {
       className,
       size: "small",
       slotProps: { select: { ...selectProps, inputProps: { "data-testid": dataTestId } } },
-      children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, "data-testid": `${dataTestId}-option-${option.value}`, children: /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: option.tooltip, children: /* @__PURE__ */ jsx("span", { children: option.displayName }) }) }, `${name}_${option.value}`))
+      children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, "data-testid": `${dataTestId}-option-${option.value}`, children: /* @__PURE__ */ jsx(LightTooltip, { placement: "top", title: option.tooltip, children: /* @__PURE__ */ jsx(Typography$3, { component: "span", children: option.displayName }) }) }, `${name}_${option.value}`))
     }
   );
 }
@@ -87114,6 +88323,9 @@ function SettingsPageRouteComponent(props) {
 const settingsPageRouteHandler = async (application, paramsData) => {
   const { layoutId, serviceId, itemId } = paramsData.data;
   const { extendedLayoutId } = paramsData.params || {};
+  if (serviceId) {
+    await application.settingsNavigation.ensureServiceName(serviceId);
+  }
   return /* @__PURE__ */ jsx(
     SettingsPageRouteComponent,
     {
@@ -87151,11 +88363,11 @@ const itemSettingsPageRoute = {
   hooks: settingsPageRouteHooks
 };
 var TabsContainer = function(props) {
-  var className = props.className, divProps = __rest$2(props, ["className"]);
+  var className = props.className, divProps = __rest$3(props, ["className"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-tabs", className) }, divProps));
 };
 var TabContent = function(props) {
-  var className = props.className, divProps = __rest$2(props, ["className"]);
+  var className = props.className, divProps = __rest$3(props, ["className"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-tabs__content", className) }, divProps));
 };
 var TabsRibbonAligning;
@@ -87165,13 +88377,13 @@ var TabsRibbonAligning;
   TabsRibbonAligning2["Right"] = "right";
 })(TabsRibbonAligning || (TabsRibbonAligning = {}));
 var TabsRibbon = function(props) {
-  var className = props.className, _a = props.aligning, aligning = _a === void 0 ? TabsRibbonAligning.Center : _a, divProps = __rest$2(props, ["className", "aligning"]);
+  var className = props.className, _a = props.aligning, aligning = _a === void 0 ? TabsRibbonAligning.Center : _a, divProps = __rest$3(props, ["className", "aligning"]);
   return React__default.createElement("div", __assign$2({ className: classNames("dv-tabs__ribbon", className, "dv-tabs__ribbon_aligning-" + aligning) }, divProps));
 };
 var TabToggler = function(props) {
   var className = props.className, name = props.name, index = props.index, disabled = props.disabled;
   props.active;
-  var onClick = props.onClick, onChangeActiveTab = props.onChangeActiveTab, divProps = __rest$2(props, ["className", "name", "index", "disabled", "active", "onClick", "onChangeActiveTab"]);
+  var onClick = props.onClick, onChangeActiveTab = props.onChangeActiveTab, divProps = __rest$3(props, ["className", "name", "index", "disabled", "active", "onClick", "onChangeActiveTab"]);
   var clickHandler = disabled ? doNothing : function(e2) {
     return __awaiter(void 0, void 0, void 0, function() {
       return __generator(this, function(_a) {
@@ -87385,7 +88597,6 @@ function ReloadIcon(props) {
   const { className, color: color2, loading, onClick } = props;
   return /* @__PURE__ */ jsx("div", { onClick, className: classNames("reload-icon", className, classIf(loading, "loading")), children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: color2, children: /* @__PURE__ */ jsx("path", { d: "M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" }) }) });
 }
-const ICON_COLOR = "#607d8b";
 function ExpandButton(props) {
   const { expanded, dataTestId, className, disabled, ...elementProps } = props;
   const expandedClass = expanded ? "expand-button__expanded" : "expand-button__collapsed";
@@ -87399,12 +88610,13 @@ function ExpandButton(props) {
     }
   );
 }
+const ICON_COLOR = "#607d8b";
 function ServerList(props) {
   const { services, servers, selectServer, reloadServerList, selectedServerId, loading } = props;
   const [expanded, setExpanded] = useState(true);
   return /* @__PURE__ */ jsxs("div", { className: "server-list", children: [
     /* @__PURE__ */ jsxs("div", { className: "server-list__title", children: [
-      /* @__PURE__ */ jsxs("div", { className: "server-list__title__text", children: [
+      /* @__PURE__ */ jsxs(Typography$3, { variant: "h5", className: "server-list__title__text", children: [
         /* @__PURE__ */ jsx(ExpandButton, { onClick: () => setExpanded(!expanded), expanded: servers?.length > 0 && expanded, disabled: !servers?.length }),
         `${services.resources.Servers} (${servers?.length ?? 0})`
       ] }),
@@ -87418,7 +88630,7 @@ function ServerList(props) {
           {
             className: "server-list__item-content" + classIf(selectedServerId === server.id, "selected"),
             onClick: () => selectServer(server),
-            children: server.name
+            children: /* @__PURE__ */ jsx(Typography$3, { variant: "body2", component: "span", children: server.name })
           }
         )
       ] }, server.id);
@@ -87497,23 +88709,6 @@ class ServersPageLogic extends ComponentLogic {
 function ServerIcon() {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px", fill: ICON_COLOR, children: /* @__PURE__ */ jsx("path", { d: "M2 4.6V9.4C2 10.3 2.5 11 3.2 11H20.9C21.5 11 22.1 10.3 22.1 9.4V4.6C22 3.7 21.5 3 20.8 3H3.2C2.5 3 2 3.7 2 4.6M10 8V6H9V8H10M5 8H7V6H5V8M20 9H4V5H20V9M2 14.6V19.4C2 20.3 2.5 21 3.2 21H20.9C21.5 21 22.1 20.3 22.1 19.4V14.6C22.1 13.7 21.6 13 20.9 13H3.2C2.5 13 2 13.7 2 14.6M10 18V16H9V18H10M5 18H7V16H5V18M20 19H4V15H20V19Z" }) });
 }
-function ServerDescriptionCard(props) {
-  const { name, operatingSystem, services } = props;
-  const resources = services.resources;
-  const fields = [
-    { label: resources.ServerName, value: name },
-    { label: resources.OperatingSystem, value: operatingSystem }
-  ];
-  return /* @__PURE__ */ jsxs("div", { className: "server-description-card", children: [
-    /* @__PURE__ */ jsx(InformationIcon, { className: "server-description-card__info-icon", color: ICON_COLOR }),
-    /* @__PURE__ */ jsx("div", { className: "server-description-card__data", children: fields.map((field) => {
-      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-        /* @__PURE__ */ jsx("label", { children: field.label }),
-        /* @__PURE__ */ jsx("div", { children: field.value })
-      ] }, field.label);
-    }) })
-  ] });
-}
 function ComponentList(props) {
   const { components, services, onComponentClick, onDeleteClick } = props;
   const onDeleteIconClick = async (event, component) => {
@@ -87534,7 +88729,7 @@ function ComponentList(props) {
     components.map((component) => {
       return /* @__PURE__ */ jsxs("div", { className: "component-list__item", onClick: () => onComponentClick(component), children: [
         /* @__PURE__ */ jsx(ComponentIcon, { color: ICON_COLOR }),
-        /* @__PURE__ */ jsx("div", { className: "component-list__item__content", children: component.serviceName }),
+        /* @__PURE__ */ jsx(Typography$3, { className: "component-list__item__content", children: component.serviceName }),
         /* @__PURE__ */ jsx(
           DeleteIcon,
           {
@@ -87548,6 +88743,26 @@ function ComponentList(props) {
     })
   ] });
 }
+function ServerDescriptionCard(props) {
+  const { name, operatingSystem, services } = props;
+  const resources = services.resources;
+  const fields = [
+    { label: resources.ServerName, value: name },
+    { label: resources.OperatingSystem, value: operatingSystem }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "server-description-card", children: [
+    /* @__PURE__ */ jsx(InformationIcon, { className: "server-description-card__info-icon", color: ICON_COLOR }),
+    /* @__PURE__ */ jsx("div", { className: "server-description-card__data", children: fields.map((field) => {
+      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          field.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx(Typography$3, { component: "span", variant: "body2", children: field.value })
+      ] }, field.label);
+    }) })
+  ] });
+}
 function ServerDescriptionPanel(props) {
   const { serverDescription, loadingServices, services } = props;
   const onComponentClick = (component) => {
@@ -87561,7 +88776,7 @@ function ServerDescriptionPanel(props) {
       return /* @__PURE__ */ jsx(LoadingMore, { loading: true });
     }
     if (!serverDescription) {
-      return /* @__PURE__ */ jsx("div", { className: "server-description-panel__title", children: services.resources.SelectServer });
+      return /* @__PURE__ */ jsx(Typography$3, { variant: "subtitle2", className: "server-description-panel__title", children: services.resources.SelectServer });
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -87659,6 +88874,9 @@ class ServersController {
   getServerInfo(serverId) {
     return this.requestService.get(`api/servers/${serverId}`, null, { disableDialogsOnErrors: true });
   }
+  getServiceInfo(serviceId) {
+    return this.requestService.get(`api/servers/service/${serviceId}`, null, { disableDialogsOnErrors: true });
+  }
   deleteService(serviceId) {
     return this.requestService.delete(`api/servers/${serviceId}`);
   }
@@ -87667,6 +88885,7 @@ const $SettingsNavigation = serviceName((s2) => s2.settingsNavigation);
 class SettingsNavigationService {
   constructor(application) {
     this.application = application;
+    this.serviceNamesCache = /* @__PURE__ */ new Map();
     this.goToConfigurationPage = () => {
       const { params, data } = this.application.routingService.getLastRouteResolvedParams() || {};
       const { serverId, serviceId, layoutId } = data;
@@ -87674,6 +88893,29 @@ class SettingsNavigationService {
       this.application.routingService.navigateToRoute(configurationPageUrl);
     };
   }
+  async ensureServiceName(serviceId) {
+    if (!serviceId) return;
+    if (this.getCachedServiceName(serviceId)) {
+      return;
+    }
+    try {
+      const service = await this.application.serverController.getServiceInfo(serviceId);
+      if (!service) return;
+      this.rememberServiceName(service.serviceId, service.serviceName);
+    } catch {
+    }
+  }
+  rememberServiceName(serviceId, serviceName2) {
+    if (!serviceId || !serviceName2) return;
+    this.serviceNamesCache.set(serviceId, serviceName2);
+  }
+  getCachedServiceName(serviceId) {
+    return this.serviceNamesCache.get(serviceId);
+  }
+  resolveServiceName(serverId, serviceId, fallback) {
+    if (!serviceId) return fallback;
+    return this.getCachedServiceName(serviceId) ?? fallback;
+  }
   convertPathToUrl(str, ...args) {
     const matches2 = str.match(/(:\w+)/g);
     if (!matches2) return str;
@@ -87715,9 +88957,10 @@ class SettingsNavigationService {
       });
     }
     if (params.serviceName) {
+      const resolvedServiceName = this.resolveServiceName(serverId, serviceId, serviceName2);
       breadcrumbsItems.push({
-        label: params.serviceName,
-        path: this.getSettingsPageUrl(serverId, serviceId, layoutId, serviceName2)
+        label: resolvedServiceName,
+        path: this.getSettingsPageUrl(serverId, serviceId, layoutId, resolvedServiceName)
       });
     }
     if (params.itemName) {
@@ -87727,9 +88970,10 @@ class SettingsNavigationService {
       });
     }
     if (route.path === CONFIGURATION_ROUTE_PATH) {
+      const resolvedServiceName = this.resolveServiceName(serverId, serviceId, serviceName2);
       breadcrumbsItems.push({
         label: this.application.resources.AdvancedSettings,
-        path: this.getConfigurationPageUrl(serverId, serviceId, layoutId, serviceName2)
+        path: this.getConfigurationPageUrl(serverId, serviceId, layoutId, resolvedServiceName)
       });
     }
     return breadcrumbsItems;
@@ -88699,46 +89943,6 @@ const gridHasBottomFillerSelector = (state) => {
   }
   return true;
 };
-function getScrollbarSize(win = window) {
-  const documentWidth = win.document.documentElement.clientWidth;
-  return win.innerWidth - documentWidth;
-}
-const usePreviousProps = (value) => {
-  const ref2 = React.useRef({});
-  React.useEffect(() => {
-    ref2.current = value;
-  });
-  return ref2.current;
-};
-function useSlotProps(parameters) {
-  const {
-    elementType,
-    externalSlotProps,
-    ownerState,
-    skipResolvingSlotProps = false,
-    ...other
-  } = parameters;
-  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
-  const {
-    props: mergedProps,
-    internalRef
-  } = mergeSlotProps({
-    ...other,
-    externalSlotProps: resolvedComponentsProps
-  });
-  const ref2 = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.additionalProps?.ref);
-  const props = appendOwnerState(elementType, {
-    ...mergedProps,
-    ref: ref2
-  }, ownerState);
-  return props;
-}
-function getReactElementRef(element) {
-  if (parseInt(React.version, 10) >= 19) {
-    return element?.props?.ref || null;
-  }
-  return element?.ref || null;
-}
 function fastMemo(component) {
   return /* @__PURE__ */ React.memo(component, fastObjectShallowCompare);
 }
@@ -121144,7 +122348,7 @@ function ExtendedConfiguration(props) {
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "extended-configuration", children: [
-      /* @__PURE__ */ jsx(Typography$3, { variant: "h4", color: "secondary", children: resources.AdvancedSettings }),
+      /* @__PURE__ */ jsx(Typography$3, { variant: "h1", color: "secondary", children: resources.AdvancedSettings }),
       /* @__PURE__ */ jsx(SearchRow, { changeSearchText: (searchText2) => logic.changeSearchText(searchText2), searchText, services: props.services }),
       /* @__PURE__ */ jsx(Paper$3, { className: "extended-configuration__table", children: /* @__PURE__ */ jsx(
         DataGrid,
@@ -121183,7 +122387,11 @@ function ConfigurationRouteComponent(props) {
   return /* @__PURE__ */ jsx(ServicesContext.Provider, { value: routeServices, children: /* @__PURE__ */ jsx(ExtendedConfiguration, { services: props.services, serviceId: props.serviceId }) });
 }
 const configurationRouteHandler = async (application, paramsData) => {
-  return /* @__PURE__ */ jsx(ConfigurationRouteComponent, { services: application, serviceId: paramsData.data.serviceId });
+  const { serviceId } = paramsData.data;
+  if (serviceId) {
+    await application.settingsNavigation.ensureServiceName(serviceId);
+  }
+  return /* @__PURE__ */ jsx(ConfigurationRouteComponent, { services: application, serviceId });
 };
 const configurationRoute = {
   path: CONFIGURATION_ROUTE_PATH,
@@ -124222,7 +125430,7 @@ function ConfigurationLocksPage(props) {
         resources,
         pendingUnlockOperations
       }
-    ) : /* @__PURE__ */ jsx("p", { className: "configuration-locks-page__text", children: resources.ConfigurationLocks_Empty }))
+    ) : /* @__PURE__ */ jsx(Typography$3, { component: "p", className: "configuration-locks-page__text", children: resources.ConfigurationLocks_Empty }))
   ] }) });
 }
 function ConfigurationLocksRouteComponent(props) {