@evergis/uilib-gl 1.0.76 → 1.0.78

package/dist/uilib-gl.esm.js

@@ -1,4 +1,4 @@
-import { memo, Children, cloneElement, Component, isValidElement, useCallback, useRef, useState, useEffect, useMemo, useLayoutEffect, Fragment } from 'react';
+import { memo, Children, cloneElement, Component, isValidElement, useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { ThemeProvider as ThemeProvider$1, css, useTheme as useTheme$1, keyframes, createGlobalStyle } from 'styled-components';
 import merge from 'deepmerge';
 import { rgb, hsl, hsla, opacify, ellipsis, rem, normalize } from 'polished';
@@ -11,13 +11,13 @@ import de from 'date-fns/locale/de';
 import Locale from 'date-fns/locale/ru';
 import AutosuggestHighlightMatch from 'autosuggest-highlight/match';
 import AutosuggestHighlightParse from 'autosuggest-highlight/parse';
-import { IMaskMixin } from 'react-imask';
 import { debounce as debounce$1, throttle, isEqual, isNil, unescape, defaults, keyBy } from 'lodash-es';
 import { CSSTransition as CSSTransition$1, TransitionGroup } from 'react-transition-group';
 import Transition from 'react-transition-group/Transition';
 import { background, border, color, flexbox, fontSize, fontWeight, fontStyle, space, layout, textAlign, position, lineHeight, padding } from 'styled-system';
 import Bowser from 'bowser';
 import { Color } from '@evergis/color';
+import { IMaskMixin } from 'react-imask';
 import Cleave from 'cleave.js';
 import Cleave$1 from 'cleave.js/react';
 import Autosuggest from 'react-autosuggest';
@@ -11048,37 +11048,52 @@ const Icon = /*#__PURE__*/styled.span.attrs(props => ({
   kind: "icon_undefined",
   ...props
 }))`
-  height: 1rem;
-  width: 1rem;
+  height: ${_ref => {
+  let {
+    size = "1rem"
+  } = _ref;
+  return size;
+}};
+  width: ${_ref2 => {
+  let {
+    size = "1rem"
+  } = _ref2;
+  return size;
+}};
   line-height: 0.5rem;
-  color: ${_ref => {
+  color: ${_ref3 => {
   let {
     theme: {
       icon
     },
     ...props
-  } = _ref;
+  } = _ref3;
   return icon == null ? void 0 : icon.color[getIconColors(props)];
 }};
 
   &:after {
-    content: ${_ref2 => {
+    content: ${_ref4 => {
   let {
     kind
-  } = _ref2;
+  } = _ref4;
   return kind && !!iconTypes[kind] && `"${iconTypes[kind]}"` || iconTypes.icon_undefined;
 }};
-    font: 300 1rem "evergis-font";
+    font: 300 ${_ref5 => {
+  let {
+    size = "1rem"
+  } = _ref5;
+  return size;
+}} "evergis-font";
   }
 
   &[disabled],
   *[disabled] & {
-    color: ${_ref3 => {
+    color: ${_ref6 => {
   let {
     theme: {
       icon
     }
-  } = _ref3;
+  } = _ref6;
   return icon == null ? void 0 : icon.disabledColor;
 }};
   }
@@ -11087,13 +11102,13 @@ const injectIcon = icon => css`
   height: 1rem;
   width: 1rem;
   line-height: 0.5rem;
-  color: ${_ref4 => {
+  color: ${_ref7 => {
   let {
     theme: {
       icon
     },
     ...props
-  } = _ref4;
+  } = _ref7;
   return icon == null ? void 0 : icon.color[getIconColors(props)];
 }};
 
@@ -11137,969 +11152,492 @@ const Help = styled.span`
   }
 `;
 
-const IconBefore = styled.span`
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2rem;
-  min-width: 2rem;
-  height: 2rem;
-  width: 2rem;
-`;
-const IconAfter = styled.span`
-  position: absolute;
-  right: ${_ref => {
-  let {
-    indent
-  } = _ref;
-  return indent;
-}}rem;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2rem;
-  min-width: 2rem;
-  height: 2rem;
-  width: 2rem;
-
-  button {
-    width: auto;
-  }
-`;
-
-const inputMixin = css`
-  display: flex;
-  height: ${props => props.height || "auto"};
-  padding: 0.34375rem ${_ref => {
-  let {
-    paddingRight
-  } = _ref;
-  return `${paddingRight || 0}px`;
-}} 0.34375rem
-    ${_ref2 => {
-  let {
-    extraLeftPaddingWidth
-  } = _ref2;
-  return extraLeftPaddingWidth ? `${(extraLeftPaddingWidth ?? 0) + 8}px` : "0.5rem";
-}};
-  width: 100%;
-  background: transparent;
-  border: 0.0625rem solid ${_ref3 => {
+const InputLabel = styled.label`
+  display: inline-block;
+  padding: 0 0 0.25rem 0.5rem;
+  color: ${_ref => {
   let {
-    error,
     theme: {
       input
-    }
-  } = _ref3;
-  return error ? input.error : input.borderColor;
+    },
+    error,
+    active
+  } = _ref;
+  return error ? input.error : active ? input.active : input.labelColor;
 }};
-  border-radius: ${_ref4 => {
+  cursor: pointer;
+  font: ${_ref2 => {
   let {
     theme: {
-      borderRadius
+      fonts
     }
-  } = _ref4;
-  return borderRadius.medium;
+  } = _ref2;
+  return fonts.description;
 }};
-  box-sizing: border-box;
-  color: ${_ref5 => {
+
+  &[disabled] {
+    pointer-events: none;
+    color: ${_ref3 => {
   let {
     theme: {
       input
     }
-  } = _ref5;
-  return input.color;
+  } = _ref3;
+  return input.disabledLabelColor;
 }};
-  font: ${_ref6 => {
+  }
+`;
+
+const DATE_FORMAT = "dd.MM.yyyy";
+const TIME_FORMAT = "HH:mm:ss";
+const SEPARATED_TIME_FORMAT = "HH : mm : ss";
+const DATE_TIME_FORMAT = /*#__PURE__*/[DATE_FORMAT, TIME_FORMAT].join(" ");
+const dateFormat = (value, withTime) => withTime ? format(value, DATE_TIME_FORMAT) : format(value, DATE_FORMAT);
+const rangeValueFormat = _ref => {
   let {
-    theme: {
-      fonts
-    }
-  } = _ref6;
-  return fonts.standard;
-}};
+    value,
+    endValue,
+    withTime
+  } = _ref;
+  if (!value) return "";
+  const formattedValue = dateFormat(value, withTime);
+  const formattedEndValue = !endValue ? "" : dateFormat(endValue, withTime);
+  return endValue ? `${formattedValue} - ${formattedEndValue}` : formattedValue;
+};
+const getLocale = value => {
+  switch (value) {
+    case "en":
+      return en;
 
-  ${IconBefore} + & {
-    padding-left: 2rem;
+    case "it":
+      return it;
+
+    case "de":
+      return de;
+
+    default:
+      return Locale;
   }
+};
 
-  &:focus {
-    outline: none;
-    border-color: ${_ref7 => {
+const isTouchDevice = () => "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+
+const preventDefault = e => {
+  e.preventDefault();
+};
+
+function randomInteger(min, max) {
+  const random = min - 0.5 + Math.random() * (max - min + 1);
+  return Math.round(random);
+}
+const toNumber = value => Number((value || 0).toString().replace(/\s/g, ""));
+const clamp = (value, max, min) => Math.max(Math.min(value, toNumber(max)), toNumber(min));
+
+const getRealChildren = array => {
+  return Children.toArray(array).filter(child => !!child);
+};
+
+const Link = styled.a`
+  text-decoration: none;
+  font: ${_ref => {
   let {
-    error,
     theme: {
-      input
-    }
-  } = _ref7;
-  return error ? input.error : input.active;
+      fonts
+    },
+    description
+  } = _ref;
+  return description ? fonts.description : fonts.standard;
 }};
-  }
+  color: ${_ref2 => {
+  let {
+    theme: {
+      link
+    },
+    ...props
+  } = _ref2;
+  return link.color[getLinkColors(props)];
+}};
+  cursor: pointer;
 
-  &::placeholder {
-    color: ${_ref8 => {
+  &:hover {
+    color: ${_ref3 => {
   let {
     theme: {
-      input
-    }
-  } = _ref8;
-  return input.placeholderColor;
+      link
+    },
+    ...props
+  } = _ref3;
+  return link.hoverColor[getLinkColors(props)];
 }};
   }
 
-  &[disabled] {
-    pointer-events: none;
-    color: ${_ref9 => {
+  &:active {
+    color: ${_ref4 => {
   let {
     theme: {
-      input
-    }
-  } = _ref9;
-  return input.disabledColor;
+      link
+    },
+    ...props
+  } = _ref4;
+  return link.activeColor[getLinkColors(props)];
 }};
-    border: 0.0635rem dashed ${_ref10 => {
+  }
+
+  &:visited {
+    color: ${_ref5 => {
   let {
     theme: {
-      input
+      link
     }
-  } = _ref10;
-  return input.disabledBorderColor;
+  } = _ref5;
+  return link.visitedColor;
 }};
-
-    &::placeholder {
-      color: ${_ref11 => {
+  }
+`;
+const ValueLink = styled.a`
+  color: ${_ref6 => {
   let {
     theme: {
-      input
+      link
     }
-  } = _ref11;
-  return input.disabledPlaceholderColor;
+  } = _ref6;
+  return link.color.primary;
 }};
-    }
-  }
+  text-decoration: none;
 `;
-const StyledInput = /*#__PURE__*/styled.input.attrs(props => ({
-  width: "14rem",
-  height: "auto",
-  paddingRight: 0.5,
-  paddingLeft: false,
-  ...props
-}))`
-  ${inputMixin};
-`;
-const ChipInputHolder = styled.div`
-  ${inputMixin};
-  height: 2rem;
-  align-items: center;
-  padding: 0 ${_ref12 => {
-  let {
-    paddingRight
-  } = _ref12;
-  return `${paddingRight || 0}rem`;
-}} 0 0.5rem;
-`;
-const ValuePrefix = styled.div`
-  position: absolute;
-  left: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 1rem;
-  opacity: 0.28;
 
-  ${IconBefore} + & {
-    padding-left: 1.5rem;
-  }
-`;
+const isReactDomElement = Element => typeof Element === "object" && Element !== null && typeof Element.type === "string"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-const InputContainer = styled.span`
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: ${_ref => {
-  let {
-    width
-  } = _ref;
-  return width;
-}};
+const isReactElement = Element => typeof Element === "object" && Element !== null && !!Element.$$typeof; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  ${_ref2 => {
-  let {
-    active,
-    theme: {
-      input
-    }
-  } = _ref2;
-  return active && `
-    &:hover {
-      input {
-        outline: none;
-        border-color: ${input.active};
-      }
-    }
-  
-    input {
-      outline: none;
-      border-color: ${input.active};
+const isDomNode = x => // eslint-disable-next-line @typescript-eslint/no-explicit-any
+typeof window.Node === "object" ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+x instanceof window.Node : x !== null && typeof x === "object" && typeof x.nodeType === "number" && typeof x.nodeName === "string";
+const combineRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return refElement => refs.forEach(ref => {
+    if (typeof ref === "function") {
+      ref(refElement);
     }
-  `;
-}}
+  });
+}; // TODO:HACK: из за отстутсвия innerRef у styled компонентов
+//            был создан такой хак распознавания является ли
+//            стилизованный компонент простым (div, span, form, ...)
+//            так как у таких компонентов нужно использовать `ref`
+//            у других, имеющие вложенность нужно использовать `innerRef`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  &:hover {
-    input {
-      border-color: ${_ref3 => {
-  let {
-    active,
-    theme: {
-      input
-    },
-    error
-  } = _ref3;
-  return !active && (error ? input.error : input.hoverBorderColor);
-}};
+const isSimpleStyledComponent = Element => // eslint-disable-next-line @typescript-eslint/no-explicit-any
+Element && Element.target && styled[Element.target] || // eslint-disable-next-line @typescript-eslint/no-explicit-any
+Element.type && Element.type.target && styled[Element.type.target]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-      &:focus {
-        outline: none;
-        border-color: ${_ref4 => {
-  let {
-    theme: {
-      input
-    },
-    error
-  } = _ref4;
-  return error ? input.error : input.active;
-}};
-      }
-    }
-  }
+const cloneWithRefs = (Element, ref) => {
+  const refProp = isReactDomElement(Element) ? "ref" : isSimpleStyledComponent(Element) ? "ref" : "innerRef";
+  return cloneElement(Element, { ...Element.props,
+    [refProp]: combineRefs(ref, Element.props[refProp])
+  });
+}; // https://github.com/mui-org/material-ui/blob/v1-beta/src/utils/ClickAwayListener.js
 
-  &[disabled] {
-    pointer-events: none;
+const isDescendant = (el, target) => {
+  if (target !== null && target.parentNode) {
+    return el === target || isDescendant(el, target.parentNode);
   }
 
-  ${ChipInputHolder} {
-    border-color: ${_ref5 => {
-  let {
-    active,
-    theme: {
-      input
-    }
-  } = _ref5;
-  return active && input.active;
-}};
-  }
-`;
+  return false;
+};
+const isOutside = (el, target) => document.contains(target) && !isDescendant(el, target); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-const IconButtonInnerChild = styled.span``;
-const buttonActiveMixin = css`
-  background: ${_ref => {
-  let {
-    theme: {
-      palette
-    }
-  } = _ref;
-  return palette.element;
-}};
+const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
+const randomRgba = () => {
+  // eslint-disable-next-line id-length
+  const o = Math.round; // eslint-disable-next-line id-length
 
-  span[kind]:after,
-  :hover ${IconButtonInnerChild}, ${IconButtonInnerChild} {
-    color: ${_ref2 => {
-  let {
-    theme: {
-      palette
-    }
-  } = _ref2;
-  return palette.background;
-}};
-  }
-`;
-const buttonHoverMixin = css`
-  &:hover {
-    background: ${_ref3 => {
-  let {
-    hasBg,
-    theme: {
-      palette
-    }
-  } = _ref3;
-  return hasBg ? palette.elementDark : "none";
-}};
-    transition: background ${transition.hover};
+  const r = Math.random; // eslint-disable-next-line id-length
 
-    > ${Icon}, ${IconButtonInnerChild} {
-      transition: all ${transition.hover};
-    }
+  const s = 255;
+  return `rgba(${o(r() * s)},${o(r() * s)},${o(r() * s)},${r().toFixed(1)})`;
+};
+function getTextWidth(value, font) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+
+  if (ctx) {
+    ctx.font = font;
+    return ctx.measureText(value).width;
   }
-`;
-const buttonMixin = css`
-  user-select: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: ${_ref4 => {
-  let {
-    iconRight
-  } = _ref4;
-  return iconRight ? "row-reverse" : "row";
-}};
-  padding: 0 1rem;
-  height: 2.25rem;
-  width: ${props => props.notFixedWidth ? "auto" : "3rem"};
-  background: none;
-  border: none;
-  border-radius: 1.25rem;
-  outline: none;
-  cursor: pointer;
-  backface-visibility: hidden;
-  transform: translateZ(0) scale(1, 1);
 
-  ${_ref5 => {
-  let {
-    active
-  } = _ref5;
-  return active ? buttonActiveMixin : buttonHoverMixin;
-}};
+  return null;
+}
 
-  &:active > ${Icon} {
-    transform: scale(1.125, 1.125);
-    transition: all ${transition.press};
-  }
+const getFont = style => style ? `${style.fontWeight} ${style.fontSize} ${style.fontFamily}` : "";
 
-  ${Icon}, ${IconButtonInnerChild} {
-    display: block;
-    position: relative;
-    transition: color ${transition.release};
+function isTextFitElementWidth(text, element) {
+  const style = window.getComputedStyle(element);
+  const valueWidth = getTextWidth(text, getFont(style) || "") || 0;
+  const spanWidth = element.getBoundingClientRect().width;
+  return valueWidth <= spanWidth;
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-    &:after {
-      display: block;
-      position: absolute;
-      left: 0;
-      z-index: 2;
+function sendRefSafety(refHandler, element) {
+  if (refHandler) {
+    if (typeof refHandler === "function") {
+      refHandler(element);
+    } else {
+      refHandler.current = element;
     }
   }
+}
+const typeId = value => value; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  &[disabled],
-  ${InputContainer}[disabled] & {
-    ${Icon}, ${IconButtonInnerChild} {
-      color: ${_ref6 => {
-  let {
-    theme: {
-      iconButton
-    }
-  } = _ref6;
-  return iconButton.disabledColor;
-}};
-    }
-    pointer-events: none;
+const isDefined = value => value !== null && value !== undefined;
+const isValidUrl = value => {
+  try {
+    new URL(value);
+  } catch (_) {
+    return false;
   }
-`;
-const IconButtonButton = /*#__PURE__*/styled.button.attrs(props => ({
-  tabIndex: -1,
-  ...props
-}))`
-  flex-shrink: 0;
 
-  &:hover > ${Icon}, &:hover > ${IconButtonInnerChild} {
-    color: ${_ref7 => {
-  let {
-    theme: {
-      iconButton
-    },
-    ...props
-  } = _ref7;
-  return iconButton.hoverColor[getIconColors(props)];
-}};
-  }
+  return true;
+};
+const urlify = text => {
+  const urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
+  const urls = text.match(urlRegex);
+  const textParts = text.split(" ");
+  return React.createElement(React.Fragment, null, textParts.map(part => {
+    const currentUrl = urls == null ? void 0 : urls.find(url => url === part);
+    return currentUrl ? React.createElement(ValueLink, {
+      key: part,
+      href: currentUrl,
+      target: "_blank"
+    }, `${currentUrl} `) : React.createElement("span", {
+      key: part
+    }, `${part} `);
+  }));
+};
+const getNumberFromPixels = pixels => typeof pixels === "string" && +pixels.slice(0, -2) || 0;
+const FILE_SIZE_STEP = 1024;
+const MB_FILE_SIZE = FILE_SIZE_STEP * FILE_SIZE_STEP;
 
-  &:active > ${Icon}, &:active > ${IconButtonInnerChild} {
-    color: ${_ref8 => {
-  let {
-    theme: {
-      iconButton
-    },
-    ...props
-  } = _ref8;
-  return iconButton.activeColor[getIconColors(props)];
-}};
-  }
+const getFixedFileSize = (bytes, fileSizeStep) => bytes % fileSizeStep === 0 ? bytes / fileSizeStep : (bytes / fileSizeStep).toFixed(2);
 
-  ${Icon}, ${IconButtonInnerChild} {
-    color: ${_ref9 => {
-  let {
-    theme: {
-      iconButton
-    },
-    ...props
-  } = _ref9;
-  return iconButton.color[getIconColors(props)];
-}};
+const fileSizeFormat = function (bytes) {
+  if (bytes === void 0) {
+    bytes = 0;
   }
 
-  ${IconButtonInnerChild} {
-    margin: ${_ref10 => {
-  let {
-    iconRight
-  } = _ref10;
-  return iconRight ? "0 0.5rem 0 0" : "0 0 0 0.5rem";
-}};
+  return bytes >= MB_FILE_SIZE ? `${getFixedFileSize(bytes, MB_FILE_SIZE)} mb` : `${getFixedFileSize(bytes, FILE_SIZE_STEP)} kb`;
+};
+const getHighlightParts = (text, highlightText) => {
+  const matches = AutosuggestHighlightMatch(text || "", highlightText);
+  return AutosuggestHighlightParse(text || "", matches);
+};
+const sortNumbers = (a, b) => a - b;
+const getUnicodeFromString = code => {
+  const num = Number(code);
+
+  if (!isNaN(num)) {
+    return String.fromCodePoint(num);
   }
 
-  ${buttonMixin};
-`;
+  return null;
+};
 
-const IconButtonComponent = _ref => {
+const getTippyProps = _ref => {
   let {
-    kind,
+    onRequestClose,
+    onCreate,
     children,
-    innerRef,
-    icon,
-    tabIndex = -1,
-    ...props
+    content,
+    isManualTrigger,
+    isVisible,
+    light,
+    dark,
+    hasContentScroll,
+    hidden,
+    className,
+    indent = 0,
+    distance = 0,
+    flip = true,
+    ...rest
   } = _ref;
-  return React.createElement(IconButtonButton, Object.assign({
-    ref: innerRef,
-    notFixedWidth: !!children,
-    tabIndex: tabIndex
-  }, props), icon || React.createElement(Icon, {
-    kind: kind
-  }), children && React.createElement(IconButtonInnerChild, null, children));
+  return {
+    theme: light ? "light" : dark ? "dark" : "none",
+    offset: [indent, distance],
+    popperOptions: {
+      modifiers: flip ? [{
+        name: "flip",
+        options: {
+          flipVariations: false
+        }
+      }] : []
+    },
+    ...rest
+  };
 };
 
-const IconButton = /*#__PURE__*/memo(IconButtonComponent);
+class Tippy extends Component {
+  constructor() {
+    super(...arguments);
+    this.container = typeof document !== "undefined" ? document.createElement("div") : void 0;
 
-const ChipContainer = styled.span`
-  display: inline-flex;
-  align-items: center;
-  padding: 0.3125rem 0.6875rem;
-  background-color: ${_ref => {
-  let {
-    theme: {
-      chip
-    },
-    ...props
-  } = _ref;
-  return chip.backgroundColor[getVariant(props)];
-}};
-  border-radius: ${_ref2 => {
-  let {
-    theme: {
-      borderRadius
-    }
-  } = _ref2;
-  return borderRadius.large;
-}};
-`;
-const Text = styled.span`
-  font: ${_ref3 => {
-  let {
-    theme: {
-      fonts
-    }
-  } = _ref3;
-  return fonts.description;
-}};
-  color: ${_ref4 => {
-  let {
-    theme: {
-      palette
-    },
-    isStandard,
-    disabled
-  } = _ref4;
-  return disabled ? palette.textDisabled : isStandard ? palette.textPrimary : "#fff";
-}};
-`;
-const iconButtonMixin = css`
-  && {
-    height: 0.875rem;
-    width: 0.875rem;
-    margin-left: 0.875rem;
-    cursor: pointer;
+    this.onRef = node => {
+      if (node && (!this.tip || this.tip.reference !== node)) {
+        this.tip = tippy(node, getTippyProps(this.props));
+        this.setContent();
 
-    ${Icon} {
-      height: 10px;
-      width: 11px;
+        if (this.props.hidden) {
+          var _this$tip, _this$tip2;
 
-      &:after {
-        font-size: 0.6875rem;
-        color: ${_ref5 => {
-  let {
-    theme: {
-      palette
-    }
-  } = _ref5;
-  return palette.textSecondary;
-}};
+          (_this$tip = this.tip) == null ? void 0 : _this$tip.hide();
+          (_this$tip2 = this.tip) == null ? void 0 : _this$tip2.disable();
+        }
       }
-    }
-  }
-`;
-const ActionButton = /*#__PURE__*/styled(IconButton)`
-  ${iconButtonMixin};
-`;
-const RegularIconButton = /*#__PURE__*/styled(IconButton)`
-  ${iconButtonMixin};
-`;
-const TooltipContent = styled.div`
-  max-width: 15rem;
-`;
-
-const DATE_FORMAT = "dd.MM.yyyy";
-const TIME_FORMAT = "HH:mm:ss";
-const SEPARATED_TIME_FORMAT = "HH : mm : ss";
-const DATE_TIME_FORMAT = /*#__PURE__*/[DATE_FORMAT, TIME_FORMAT].join(" ");
-const dateFormat = (value, withTime) => withTime ? format(value, DATE_TIME_FORMAT) : format(value, DATE_FORMAT);
-const rangeValueFormat = _ref => {
-  let {
-    value,
-    endValue,
-    withTime
-  } = _ref;
-  if (!value) return "";
-  const formattedValue = dateFormat(value, withTime);
-  const formattedEndValue = !endValue ? "" : dateFormat(endValue, withTime);
-  return endValue ? `${formattedValue} - ${formattedEndValue}` : formattedValue;
-};
-const getLocale = value => {
-  switch (value) {
-    case "en":
-      return en;
+    };
 
-    case "it":
-      return it;
+    this.closeOnOutsideEvent = e => {
+      const {
+        isVisible,
+        onRequestClose
+      } = this.props;
 
-    case "de":
-      return de;
+      if (isVisible && onRequestClose && isOutside(this.container, e.target)) {
+        onRequestClose(e);
+      }
+    };
 
-    default:
-      return Locale;
+    this.closeOnScrollEvent = e => {
+      const {
+        hasContentScroll
+      } = this.props;
+      !hasContentScroll && this.closeOnOutsideEvent(e);
+    };
   }
-};
-
-const isTouchDevice = () => "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-
-const preventDefault = e => {
-  e.preventDefault();
-};
-
-function randomInteger(min, max) {
-  const random = min - 0.5 + Math.random() * (max - min + 1);
-  return Math.round(random);
-}
-const toNumber = value => Number((value || 0).toString().replace(/\s/g, ""));
-const clamp = (value, max, min) => Math.max(Math.min(value, toNumber(max)), toNumber(min));
 
-const getRealChildren = array => {
-  return Children.toArray(array).filter(child => !!child);
-};
+  setContent() {
+    const {
+      content
+    } = this.props;
 
-const Link = styled.a`
-  text-decoration: none;
-  font: ${_ref => {
-  let {
-    theme: {
-      fonts
-    },
-    description
-  } = _ref;
-  return description ? fonts.description : fonts.standard;
-}};
-  color: ${_ref2 => {
-  let {
-    theme: {
-      link
-    },
-    ...props
-  } = _ref2;
-  return link.color[getLinkColors(props)];
-}};
-  cursor: pointer;
+    if (!this.container || !this.tip) {
+      return;
+    }
 
-  &:hover {
-    color: ${_ref3 => {
-  let {
-    theme: {
-      link
-    },
-    ...props
-  } = _ref3;
-  return link.hoverColor[getLinkColors(props)];
-}};
+    if (isValidElement(content)) {
+      this.tip.setContent(this.container);
+    } else if (typeof content === "string") {
+      this.tip.setContent(content);
+    }
   }
 
-  &:active {
-    color: ${_ref4 => {
-  let {
-    theme: {
-      link
-    },
-    ...props
-  } = _ref4;
-  return link.activeColor[getLinkColors(props)];
-}};
-  }
+  manualTrigger() {
+    const {
+      isVisible
+    } = this.props;
 
-  &:visited {
-    color: ${_ref5 => {
-  let {
-    theme: {
-      link
+    if (isVisible) {
+      this.tip && this.tip.show();
+    } else {
+      this.tip && this.tip.hide();
     }
-  } = _ref5;
-  return link.visitedColor;
-}};
   }
-`;
-const ValueLink = styled.a`
-  color: ${_ref6 => {
-  let {
-    theme: {
-      link
-    }
-  } = _ref6;
-  return link.color.primary;
-}};
-  text-decoration: none;
-`;
-
-const isReactDomElement = Element => typeof Element === "object" && Element !== null && typeof Element.type === "string"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-const isReactElement = Element => typeof Element === "object" && Element !== null && !!Element.$$typeof; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  addListeners() {
+    setTimeout(() => {
+      // eslint-disable-next-line no-restricted-globals
+      addEventListener("click", this.closeOnOutsideEvent); // eslint-disable-next-line no-restricted-globals
 
-const isDomNode = x => // eslint-disable-next-line @typescript-eslint/no-explicit-any
-typeof window.Node === "object" ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-x instanceof window.Node : x !== null && typeof x === "object" && typeof x.nodeType === "number" && typeof x.nodeName === "string";
-const combineRefs = function () {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
+      addEventListener("scroll", this.closeOnScrollEvent, true);
+    }, 0);
   }
 
-  return refElement => refs.forEach(ref => {
-    if (typeof ref === "function") {
-      ref(refElement);
-    }
-  });
-}; // TODO:HACK: из за отстутсвия innerRef у styled компонентов
-//            был создан такой хак распознавания является ли
-//            стилизованный компонент простым (div, span, form, ...)
-//            так как у таких компонентов нужно использовать `ref`
-//            у других, имеющие вложенность нужно использовать `innerRef`
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+  removeListeners() {
+    // eslint-disable-next-line no-restricted-globals
+    removeEventListener("click", this.closeOnOutsideEvent); // eslint-disable-next-line no-restricted-globals
 
-const isSimpleStyledComponent = Element => // eslint-disable-next-line @typescript-eslint/no-explicit-any
-Element && Element.target && styled[Element.target] || // eslint-disable-next-line @typescript-eslint/no-explicit-any
-Element.type && Element.type.target && styled[Element.type.target]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    removeEventListener("scroll", this.closeOnScrollEvent);
+  }
 
-const cloneWithRefs = (Element, ref) => {
-  const refProp = isReactDomElement(Element) ? "ref" : isSimpleStyledComponent(Element) ? "ref" : "innerRef";
-  return cloneElement(Element, { ...Element.props,
-    [refProp]: combineRefs(ref, Element.props[refProp])
-  });
-}; // https://github.com/mui-org/material-ui/blob/v1-beta/src/utils/ClickAwayListener.js
+  componentDidMount() {
+    const {
+      onCreate,
+      isManualTrigger,
+      isVisible
+    } = this.props;
+    onCreate && onCreate(this.tip);
 
-const isDescendant = (el, target) => {
-  if (target !== null && target.parentNode) {
-    return el === target || isDescendant(el, target.parentNode);
+    if (isManualTrigger && isVisible) {
+      this.manualTrigger();
+      this.addListeners();
+    }
   }
 
-  return false;
-};
-const isOutside = (el, target) => document.contains(target) && !isDescendant(el, target); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
-const randomRgba = () => {
-  // eslint-disable-next-line id-length
-  const o = Math.round; // eslint-disable-next-line id-length
+  componentDidUpdate(_ref) {
+    let {
+      content: prevContent,
+      isVisible: prevIsVisible,
+      hidden: prevIsHidden
+    } = _ref;
+    const {
+      isManualTrigger,
+      isVisible,
+      content,
+      hidden
+    } = this.props;
 
-  const r = Math.random; // eslint-disable-next-line id-length
+    if (!prevIsHidden && hidden) {
+      var _this$tip3, _this$tip4;
 
-  const s = 255;
-  return `rgba(${o(r() * s)},${o(r() * s)},${o(r() * s)},${r().toFixed(1)})`;
-};
-function getTextWidth(value, font) {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
+      (_this$tip3 = this.tip) == null ? void 0 : _this$tip3.hide();
+      (_this$tip4 = this.tip) == null ? void 0 : _this$tip4.disable();
+    } else if (prevIsHidden && !hidden) {
+      var _this$tip5, _this$tip6;
 
-  if (ctx) {
-    ctx.font = font;
-    return ctx.measureText(value).width;
-  }
+      (_this$tip5 = this.tip) == null ? void 0 : _this$tip5.show();
+      (_this$tip6 = this.tip) == null ? void 0 : _this$tip6.enable();
+    }
 
-  return null;
-}
+    this.tip && this.tip.setProps(getTippyProps(this.props));
+    isManualTrigger && this.manualTrigger();
 
-const getFont = style => style ? `${style.fontWeight} ${style.fontSize} ${style.fontFamily}` : "";
+    if (isManualTrigger && isVisible && !prevIsVisible) {
+      this.addListeners();
+    }
 
-function isTextFitElementWidth(text, element) {
-  const style = window.getComputedStyle(element);
-  const valueWidth = getTextWidth(text, getFont(style) || "") || 0;
-  const spanWidth = element.getBoundingClientRect().width;
-  return valueWidth <= spanWidth;
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (isManualTrigger && !isVisible && prevIsVisible) {
+      this.removeListeners();
+    }
 
-function sendRefSafety(refHandler, element) {
-  if (refHandler) {
-    if (typeof refHandler === "function") {
-      refHandler(element);
-    } else {
-      refHandler.current = element;
+    if (prevContent !== content && typeof content === "string") {
+      this.setContent();
     }
   }
-}
-const typeId = value => value; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-const isDefined = value => value !== null && value !== undefined;
-const isValidUrl = value => {
-  try {
-    new URL(value);
-  } catch (_) {
-    return false;
+  componentWillUnmount() {
+    this.tip && this.tip.destroy();
+    delete this.tip;
+    delete this.container;
+    this.removeListeners();
   }
 
-  return true;
-};
-const urlify = text => {
-  const urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
-  const urls = text.match(urlRegex);
-  const textParts = text.split(" ");
-  return React.createElement(React.Fragment, null, textParts.map(part => {
-    const currentUrl = urls == null ? void 0 : urls.find(url => url === part);
-    return currentUrl ? React.createElement(ValueLink, {
-      key: part,
-      href: currentUrl,
-      target: "_blank"
-    }, `${currentUrl} `) : React.createElement("span", {
-      key: part
-    }, `${part} `);
-  }));
-};
-const getNumberFromPixels = pixels => typeof pixels === "string" && +pixels.slice(0, -2) || 0;
-const FILE_SIZE_STEP = 1024;
-const MB_FILE_SIZE = FILE_SIZE_STEP * FILE_SIZE_STEP;
-
-const getFixedFileSize = (bytes, fileSizeStep) => bytes % fileSizeStep === 0 ? bytes / fileSizeStep : (bytes / fileSizeStep).toFixed(2);
-
-const fileSizeFormat = function (bytes) {
-  if (bytes === void 0) {
-    bytes = 0;
-  }
-
-  return bytes >= MB_FILE_SIZE ? `${getFixedFileSize(bytes, MB_FILE_SIZE)} mb` : `${getFixedFileSize(bytes, FILE_SIZE_STEP)} kb`;
-};
-const getHighlightParts = (text, highlightText) => {
-  const matches = AutosuggestHighlightMatch(text || "", highlightText);
-  return AutosuggestHighlightParse(text || "", matches);
-};
-const sortNumbers = (a, b) => a - b;
-const getUnicodeFromString = code => {
-  const num = Number(code);
-
-  if (!isNaN(num)) {
-    return String.fromCodePoint(num);
-  }
-
-  return null;
-};
-
-const getTippyProps = _ref => {
-  let {
-    onRequestClose,
-    onCreate,
-    children,
-    content,
-    isManualTrigger,
-    isVisible,
-    light,
-    dark,
-    hasContentScroll,
-    hidden,
-    className,
-    indent = 0,
-    distance = 0,
-    flip = true,
-    ...rest
-  } = _ref;
-  return {
-    theme: light ? "light" : dark ? "dark" : "none",
-    offset: [indent, distance],
-    popperOptions: {
-      modifiers: flip ? [{
-        name: "flip",
-        options: {
-          flipVariations: false
-        }
-      }] : []
-    },
-    ...rest
-  };
-};
-
-class Tippy extends Component {
-  constructor() {
-    super(...arguments);
-    this.container = typeof document !== "undefined" ? document.createElement("div") : void 0;
-
-    this.onRef = node => {
-      if (node && (!this.tip || this.tip.reference !== node)) {
-        this.tip = tippy(node, getTippyProps(this.props));
-        this.setContent();
-
-        if (this.props.hidden) {
-          var _this$tip, _this$tip2;
-
-          (_this$tip = this.tip) == null ? void 0 : _this$tip.hide();
-          (_this$tip2 = this.tip) == null ? void 0 : _this$tip2.disable();
-        }
-      }
-    };
-
-    this.closeOnOutsideEvent = e => {
-      const {
-        isVisible,
-        onRequestClose
-      } = this.props;
-
-      if (isVisible && onRequestClose && isOutside(this.container, e.target)) {
-        onRequestClose(e);
-      }
-    };
-
-    this.closeOnScrollEvent = e => {
-      const {
-        hasContentScroll
-      } = this.props;
-      !hasContentScroll && this.closeOnOutsideEvent(e);
-    };
-  }
-
-  setContent() {
-    const {
-      content
-    } = this.props;
-
-    if (!this.container || !this.tip) {
-      return;
-    }
-
-    if (isValidElement(content)) {
-      this.tip.setContent(this.container);
-    } else if (typeof content === "string") {
-      this.tip.setContent(content);
-    }
-  }
-
-  manualTrigger() {
-    const {
-      isVisible
-    } = this.props;
-
-    if (isVisible) {
-      this.tip && this.tip.show();
-    } else {
-      this.tip && this.tip.hide();
-    }
-  }
-
-  addListeners() {
-    setTimeout(() => {
-      // eslint-disable-next-line no-restricted-globals
-      addEventListener("click", this.closeOnOutsideEvent); // eslint-disable-next-line no-restricted-globals
-
-      addEventListener("scroll", this.closeOnScrollEvent, true);
-    }, 0);
-  }
-
-  removeListeners() {
-    // eslint-disable-next-line no-restricted-globals
-    removeEventListener("click", this.closeOnOutsideEvent); // eslint-disable-next-line no-restricted-globals
-
-    removeEventListener("scroll", this.closeOnScrollEvent);
-  }
-
-  componentDidMount() {
-    const {
-      onCreate,
-      isManualTrigger,
-      isVisible
-    } = this.props;
-    onCreate && onCreate(this.tip);
-
-    if (isManualTrigger && isVisible) {
-      this.manualTrigger();
-      this.addListeners();
-    }
-  }
-
-  componentDidUpdate(_ref) {
-    let {
-      content: prevContent,
-      isVisible: prevIsVisible,
-      hidden: prevIsHidden
-    } = _ref;
-    const {
-      isManualTrigger,
-      isVisible,
-      content,
-      hidden
-    } = this.props;
-
-    if (!prevIsHidden && hidden) {
-      var _this$tip3, _this$tip4;
-
-      (_this$tip3 = this.tip) == null ? void 0 : _this$tip3.hide();
-      (_this$tip4 = this.tip) == null ? void 0 : _this$tip4.disable();
-    } else if (prevIsHidden && !hidden) {
-      var _this$tip5, _this$tip6;
-
-      (_this$tip5 = this.tip) == null ? void 0 : _this$tip5.show();
-      (_this$tip6 = this.tip) == null ? void 0 : _this$tip6.enable();
-    }
-
-    this.tip && this.tip.setProps(getTippyProps(this.props));
-    isManualTrigger && this.manualTrigger();
-
-    if (isManualTrigger && isVisible && !prevIsVisible) {
-      this.addListeners();
-    }
-
-    if (isManualTrigger && !isVisible && prevIsVisible) {
-      this.removeListeners();
-    }
-
-    if (prevContent !== content && typeof content === "string") {
-      this.setContent();
-    }
-  }
-
-  componentWillUnmount() {
-    this.tip && this.tip.destroy();
-    delete this.tip;
-    delete this.container;
-    this.removeListeners();
-  }
-
-  render() {
-    const {
-      content,
-      children
-    } = this.props;
-    return React.createElement(React.Fragment, null, typeof children === "function" && children(this.onRef), this.container && isValidElement(content) && createPortal(content, this.container));
-  }
-
-}
-Tippy.defaultProps = {
-  delay: [1000, 1000],
-  duration: [100, 100],
-  isManualTrigger: true,
-  distance: 8,
-  indent: -6,
-  arrow: false
+  render() {
+    const {
+      content,
+      children
+    } = this.props;
+    return React.createElement(React.Fragment, null, typeof children === "function" && children(this.onRef), this.container && isValidElement(content) && createPortal(content, this.container));
+  }
+
+}
+Tippy.defaultProps = {
+  delay: [1000, 1000],
+  duration: [100, 100],
+  isManualTrigger: true,
+  distance: 8,
+  indent: -6,
+  arrow: false
 };
 
 const cornerSize = "6px";
@@ -12256,228 +11794,10 @@ const Tooltip = /*#__PURE__*/styled(Tippy).attrs(props => ({
   ${tippyMixin}
 `;
 
-const ChipComponent = _ref => {
+const WithLabelContainer = styled.div`
+  width: ${_ref => {
   let {
-    text,
-    primary,
-    secondary,
-    error,
-    additionalButton,
-    additionalAction,
-    onRemove,
-    additionalButtonTooltip,
-    removeButtonTooltip,
-    disabled,
-    tooltipDelay = 300,
-    onMouseDown,
-    children,
-    ...props
-  } = _ref;
-  const remove = useCallback(e => {
-    onRemove && onRemove(text, e);
-  }, [onRemove, text]);
-  const isStandard = !primary && !secondary && !error;
-  return React.createElement(ChipContainer, Object.assign({
-    primary: primary,
-    secondary: secondary,
-    error: error
-  }, props), children, React.createElement(Text, {
-    isStandard: isStandard,
-    disabled: disabled
-  }, text), React.createElement(ThemeProvider, {
-    theme: isStandard ? theme : theme$1
-  }, React.createElement(React.Fragment, null, additionalButton && (additionalButtonTooltip ? React.createElement(Tooltip, {
-    arrow: true,
-    placement: "top",
-    content: React.createElement(TooltipContent, null, additionalButtonTooltip),
-    delay: tooltipDelay ? [tooltipDelay, tooltipDelay] : undefined
-  }, ref => React.createElement(ActionButton, {
-    kind: additionalButton,
-    onClick: additionalAction,
-    innerRef: ref
-  })) : React.createElement(RegularIconButton, {
-    kind: additionalButton,
-    onClick: additionalAction
-  })), !!onRemove && (removeButtonTooltip ? React.createElement(Tooltip, {
-    arrow: true,
-    placement: "top",
-    content: React.createElement(TooltipContent, null, removeButtonTooltip),
-    delay: tooltipDelay ? [tooltipDelay, tooltipDelay] : undefined
-  }, ref => React.createElement(ActionButton, {
-    kind: "close",
-    innerRef: ref,
-    onClick: e => {
-      e.stopPropagation();
-      remove(e);
-    }
-  })) : React.createElement(RegularIconButton, {
-    kind: "close",
-    onMouseDown: e => e.stopPropagation(),
-    onClick: e => {
-      e.stopPropagation();
-      remove(e);
-    }
-  })))));
-};
-
-const Chip = /*#__PURE__*/memo(ChipComponent);
-
-const WideChip = /*#__PURE__*/styled(_ref => {
-  let { ...props
-  } = _ref;
-  return React.createElement(Chip, Object.assign({}, props));
-})`
-  height: 1rem;
-  cursor: default;
-
-  ${ChipContainer} {
-    width: 100%;
-    justify-content: space-between;
-  }
-`;
-
-const CheckMark = /*#__PURE__*/styled(Icon)`
-  position: absolute;
-  right: -1.5rem;
-  color: ${_ref => {
-  let {
-    theme: {
-      palette
-    }
-  } = _ref;
-  return palette.primary;
-}};
-`;
-
-const InputComponent = _ref => {
-  var _valuePrefixRef$curre, _valuePrefixRef$curre2;
-
-  let {
-    width = "14rem",
-    iconAfter,
-    iconBefore,
-    valuePrefix,
-    children,
-    disabled,
-    success,
-    innerRef,
-    disableInputOnly,
-    asChip,
-    onRemove,
-    active,
-    onMouseDown,
-    ...props
-  } = _ref;
-  const valuePrefixRef = useRef(null);
-  const [, setRefVisible] = useState(false);
-  const realChildren = getRealChildren(children);
-  const childrenCount = realChildren.length;
-  const paddingRight = childrenCount * 2 + (iconAfter ? 32 : 0);
-  return React.createElement(InputContainer, {
-    disabled: disabled,
-    error: props.error,
-    width: width,
-    active: active
-  }, iconBefore && React.createElement(IconBefore, {
-    onMouseDown: preventDefault
-  }, iconBefore), valuePrefix && React.createElement(ValuePrefix, {
-    onMouseDown: preventDefault,
-    ref: el => {
-      valuePrefixRef.current = el;
-      setRefVisible(!!el);
-    }
-  }, valuePrefix), props.value && asChip ? React.createElement(ChipInputHolder, {
-    paddingLeft: !!iconBefore,
-    paddingRight: paddingRight,
-    extraLeftPaddingWidth: ((_valuePrefixRef$curre = valuePrefixRef.current) == null ? void 0 : _valuePrefixRef$curre.getBoundingClientRect().width) ?? undefined,
-    ref: innerRef,
-    onMouseDown: onMouseDown
-  }, React.createElement(WideChip, {
-    text: `${props.value}`,
-    onRemove: onRemove,
-    onMouseDown: e => {
-      e.stopPropagation(); // @ts-ignore
-
-      onMouseDown && onMouseDown(e);
-    },
-    primary: true
-  })) : React.createElement(StyledInput, Object.assign({
-    ref: innerRef,
-    width: width,
-    disabled: disabled || disableInputOnly,
-    paddingLeft: !!iconBefore,
-    extraLeftPaddingWidth: ((_valuePrefixRef$curre2 = valuePrefixRef.current) == null ? void 0 : _valuePrefixRef$curre2.getBoundingClientRect().width) ?? undefined,
-    paddingRight: paddingRight,
-    onMouseDown: onMouseDown
-  }, props)), iconAfter ? React.createElement(IconAfter, {
-    indent: 0
-  }, iconAfter) : React.createElement(React.Fragment, null, realChildren.map((child, index) => React.createElement(IconAfter, {
-    onMouseDown: preventDefault,
-    indent: 2 * index,
-    key: index
-  }, child))), success && React.createElement(CheckMark, {
-    kind: "success"
-  }));
-};
-
-const Input = /*#__PURE__*/withLabel( /*#__PURE__*/memo(InputComponent));
-
-const InputLabel = styled.label`
-  display: inline-block;
-  padding: 0 0 0.25rem 0.5rem;
-  color: ${_ref => {
-  let {
-    theme: {
-      input
-    },
-    error,
-    active
-  } = _ref;
-  return error ? input.error : active ? input.active : input.labelColor;
-}};
-  cursor: pointer;
-  font: ${_ref2 => {
-  let {
-    theme: {
-      fonts
-    }
-  } = _ref2;
-  return fonts.description;
-}};
-
-  &[disabled] {
-    pointer-events: none;
-    color: ${_ref3 => {
-  let {
-    theme: {
-      input
-    }
-  } = _ref3;
-  return input.disabledLabelColor;
-}};
-  }
-`;
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const MaskedComponent = /*#__PURE__*/IMaskMixin(_ref => {
-  let {
-    innerRef,
-    inputRef,
-    ...props
-  } = _ref;
-  const attachRef = useCallback(ref => {
-    sendRefSafety(inputRef, ref);
-    sendRefSafety(innerRef, ref);
-  }, [innerRef, inputRef]);
-  return React.createElement(Input, Object.assign({}, props, {
-    innerRef: attachRef
-  }));
-});
-
-const WithLabelContainer = styled.div`
-  width: ${_ref => {
-  let {
-    width
+    width
   } = _ref;
   return width || "100%";
 }};
@@ -12496,6 +11816,7 @@ const Asterisk = styled.span`
   } = _ref2;
   return palette.error;
 }};
+
   :before {
     content: "*";
   }
@@ -12909,938 +12230,1374 @@ const CollapseComponent = _ref => {
   }, children)));
 };
 
-const Collapse = /*#__PURE__*/memo(CollapseComponent);
+const Collapse = /*#__PURE__*/memo(CollapseComponent);
+
+const Blank = styled.div`
+  width: ${_ref => {
+  let {
+    width
+  } = _ref;
+  return width || "auto";
+}};
+  height: ${_ref2 => {
+  let {
+    height
+  } = _ref2;
+  return height || "";
+}};
+  max-height: ${_ref3 => {
+  let {
+    maxHeight
+  } = _ref3;
+  return maxHeight || "auto";
+}};
+  min-width: ${_ref4 => {
+  let {
+    minWidth
+  } = _ref4;
+  return minWidth || "auto";
+}};
+  background-color: ${_ref5 => {
+  let {
+    theme: {
+      blank
+    }
+  } = _ref5;
+  return blank.backgroundColor;
+}};
+  box-shadow: ${_ref6 => {
+  let {
+    theme: {
+      shadows
+    },
+    shadow
+  } = _ref6;
+  return shadows[shadow || "raised"];
+}};
+  color: ${_ref7 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref7;
+  return palette.textPrimary;
+}};
+  border-radius: 0.375rem;
+  line-height: initial;
+  overflow-y: auto;
+`;
+
+const BaseButton = styled.button`
+  user-select: none;
+  position: relative;
+  font: ${_ref => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref;
+  return fonts.button;
+}};
+  border: none;
+  outline: none;
+  padding-left: 1em;
+  padding-right: 1em;
+  text-transform: uppercase;
+  border-radius: ${_ref2 => {
+  let {
+    theme: {
+      borderRadius
+    }
+  } = _ref2;
+  return borderRadius.medium;
+}};
+  min-height: 2.5em;
+  max-height: 6em;
+  box-sizing: border-box;
+  ${/*#__PURE__*/ellipsis("18em")};
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color ${transition.hover};
+  }
+
+  &:active {
+    transition: background-color ${transition.press}, box-shadow ${transition.press};
+  }
+
+  &[disabled] {
+    pointer-events: none;
+  }
+`;
+const FlatButton = /*#__PURE__*/styled(BaseButton)`
+  color: ${_ref3 => {
+  let {
+    theme: {
+      flatButton
+    },
+    ...props
+  } = _ref3;
+  return flatButton.color[getVariant(props)];
+}};
+  background-color: ${_ref4 => {
+  let {
+    theme: {
+      flatButton
+    }
+  } = _ref4;
+  return flatButton.backgroundColor;
+}};
+
+  &:hover {
+    color: ${_ref5 => {
+  let {
+    theme: {
+      flatButton
+    },
+    ...props
+  } = _ref5;
+  return flatButton.hoverColor[getVariant(props)];
+}};
+    background-color: ${_ref6 => {
+  let {
+    theme: {
+      flatButton
+    }
+  } = _ref6;
+  return flatButton.hoverBackgroundColor;
+}};
+  }
+
+  &:active {
+    color: ${_ref7 => {
+  let {
+    theme: {
+      flatButton
+    },
+    ...props
+  } = _ref7;
+  return flatButton.activeColor[getVariant(props)];
+}};
+    background-color: ${_ref8 => {
+  let {
+    theme: {
+      flatButton
+    }
+  } = _ref8;
+  return flatButton.activeBackgroundColor;
+}};
+  }
+
+  &[disabled] {
+    color: ${_ref9 => {
+  let {
+    theme: {
+      flatButton
+    }
+  } = _ref9;
+  return flatButton.disabledColor;
+}};
+    background-color: ${_ref10 => {
+  let {
+    theme: {
+      flatButton
+    }
+  } = _ref10;
+  return flatButton.disabledBackgroundColor;
+}};
+  }
+`;
+const RaisedButton = /*#__PURE__*/styled(BaseButton)`
+  color: ${_ref11 => {
+  let {
+    theme: {
+      raisedButton
+    },
+    ...props
+  } = _ref11;
+  return raisedButton.color[getVariant(props)];
+}};
+  background-color: ${_ref12 => {
+  let {
+    theme: {
+      raisedButton
+    },
+    ...props
+  } = _ref12;
+  return raisedButton.backgroundColor[getVariant(props)];
+}};
+  box-shadow: ${_ref13 => {
+  let {
+    theme: {
+      shadows
+    }
+  } = _ref13;
+  return shadows.normal;
+}};
+
+  &:hover {
+    color: ${_ref14 => {
+  let {
+    theme: {
+      raisedButton
+    },
+    ...props
+  } = _ref14;
+  return raisedButton.hoverColor[getVariant(props)];
+}};
+    background-color: ${_ref15 => {
+  let {
+    theme: {
+      raisedButton
+    },
+    ...props
+  } = _ref15;
+  return raisedButton.hoverBackgroundColor[getVariant(props)];
+}};
+  }
+
+  &:active {
+    color: ${_ref16 => {
+  let {
+    theme: {
+      raisedButton
+    },
+    ...props
+  } = _ref16;
+  return raisedButton.activeColor[getVariant(props)];
+}};
+    background-color: ${_ref17 => {
+  let {
+    theme: {
+      raisedButton
+    },
+    ...props
+  } = _ref17;
+  return raisedButton.activeBackgroundColor[getVariant(props)];
+}};
+    box-shadow: ${_ref18 => {
+  let {
+    theme: {
+      shadows
+    }
+  } = _ref18;
+  return shadows.pressed;
+}};
+  }
+
+  &[disabled] {
+    pointer-events: none;
+    box-shadow: none;
+    color: ${_ref19 => {
+  let {
+    theme: {
+      raisedButton
+    }
+  } = _ref19;
+  return raisedButton.disabledColor;
+}};
+    background-color: ${_ref20 => {
+  let {
+    theme: {
+      raisedButton
+    }
+  } = _ref20;
+  return raisedButton.disabledBackgroundColor;
+}};
+  }
+`;
+
+const DEFAULT_LOADER_SIZE = "110px";
 
-const Blank = styled.div`
-  width: ${_ref => {
+const setHeight = height => typeof height === "number" ? `${height}px` : typeof height === "undefined" ? DEFAULT_LOADER_SIZE : height;
+
+const setWidth = width => typeof width === "number" ? `${width}px` : typeof width === "undefined" ? "100%" : width;
+
+const CardLoaderPreview = styled.div`
+  display: flex;
+  flex-grow: 1;
+  background-color: ${_ref => {
   let {
-    width
+    theme
   } = _ref;
-  return width || "auto";
+  return theme.palette.elementDark;
 }};
-  height: ${_ref2 => {
+`;
+const CardLoaderBar = styled.div`
+  width: 100%;
+  background-color: ${_ref2 => {
   let {
-    height
+    theme
   } = _ref2;
-  return height || "";
+  return theme.palette.elementDark;
 }};
-  max-height: ${_ref3 => {
+  margin-bottom: 10px;
+  border-radius: 0.75rem;
+`;
+const CardLoaderBars = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const CardLoaderShining = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #333;
+  width: 100%;
+  animation-duration: 0.6s;
+  animation-iteration-count: infinite;
+  animation-name: loader-animate;
+  animation-timing-function: linear;
+  background: -webkit-linear-gradient(
+    left,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.6) 30%,
+    rgba(255, 255, 255, 0) 81%
+  );
+  background: -o-linear-gradient(
+    left,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.6) 30%,
+    rgba(255, 255, 255, 0) 81%
+  );
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.6) 30%,
+    rgba(255, 255, 255, 0) 81%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient(
+            startColorstr='#00ffffff',
+            endColorstr='#00ffffff',
+            GradientType=1);
+
+  @keyframes loader-animate {
+    0% {
+      transform: translate3d(-100%, 0, 0);
+    }
+    100% {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+`;
+const CardLoaderContainer = styled.div`
+  position: relative;
+  display: flex;
+  width: ${_ref3 => {
   let {
-    maxHeight
+    width
   } = _ref3;
-  return maxHeight || "auto";
+  return setWidth(width);
 }};
-  min-width: ${_ref4 => {
+
+  ${CardLoaderPreview} {
+    height: ${_ref4 => {
   let {
-    minWidth
+    height
   } = _ref4;
-  return minWidth || "auto";
+  return setHeight(height);
 }};
-  background-color: ${_ref5 => {
+    width: ${_ref5 => {
   let {
-    theme: {
-      blank
-    }
+    height
   } = _ref5;
-  return blank.backgroundColor;
+  return setHeight(height);
 }};
-  box-shadow: ${_ref6 => {
+    min-height: ${_ref6 => {
   let {
-    theme: {
-      shadows
-    },
-    shadow
+    height
   } = _ref6;
-  return shadows[shadow || "raised"];
+  return setHeight(height);
 }};
-  color: ${_ref7 => {
+    min-width: ${_ref7 => {
   let {
-    theme: {
-      palette
-    }
+    height
   } = _ref7;
-  return palette.textPrimary;
+  return setHeight(height);
 }};
-  border-radius: 0.375rem;
-  line-height: initial;
-  overflow-y: auto;
-`;
+  }
 
-const BaseButton = styled.button`
-  user-select: none;
-  position: relative;
-  font: ${_ref => {
-  let {
-    theme: {
-      fonts
-    }
-  } = _ref;
-  return fonts.button;
-}};
-  border: none;
-  outline: none;
-  padding-left: 1em;
-  padding-right: 1em;
-  text-transform: uppercase;
-  border-radius: ${_ref2 => {
+  ${CardLoaderShining},
+  ${CardLoaderBars} {
+    height: ${_ref8 => {
   let {
-    theme: {
-      borderRadius
-    }
-  } = _ref2;
-  return borderRadius.medium;
+    height
+  } = _ref8;
+  return setHeight(height);
 }};
-  min-height: 2.5em;
-  max-height: 6em;
-  box-sizing: border-box;
-  ${/*#__PURE__*/ellipsis("18em")};
-  cursor: pointer;
-
-  &:hover {
-    transition: background-color ${transition.hover};
   }
 
-  &:active {
-    transition: background-color ${transition.press}, box-shadow ${transition.press};
+  ${CardLoaderPreview} {
+    margin-right: 0.75rem;
   }
 
-  &[disabled] {
-    pointer-events: none;
-  }
-`;
-const FlatButton = /*#__PURE__*/styled(BaseButton)`
-  color: ${_ref3 => {
+  ${CardLoaderBars} {
+    padding-top: calc(${_ref9 => {
   let {
-    theme: {
-      flatButton
-    },
-    ...props
-  } = _ref3;
-  return flatButton.color[getVariant(props)];
-}};
-  background-color: ${_ref4 => {
+    height
+  } = _ref9;
+  return setHeight(height);
+}} / 6);
+    box-sizing: border-box;
+
+    ${CardLoaderBar} {
+      &:first-child {
+        height: calc(${_ref10 => {
   let {
-    theme: {
-      flatButton
+    height
+  } = _ref10;
+  return setHeight(height);
+}} / 4);
+      }
+
+      &:not(:first-child) {
+        height: calc(${_ref11 => {
+  let {
+    height
+  } = _ref11;
+  return setHeight(height);
+}} / 6);
+      }
     }
-  } = _ref4;
-  return flatButton.backgroundColor;
-}};
+  }
+`;
 
-  &:hover {
-    color: ${_ref5 => {
+const CardLoader = _ref => {
+  let {
+    animate = true,
+    height,
+    width
+  } = _ref;
+  return React.createElement(CardLoaderContainer, {
+    height: height,
+    width: width
+  }, React.createElement(CardLoaderPreview, null), React.createElement(CardLoaderBars, null, React.createElement(CardLoaderBar, null), React.createElement(CardLoaderBar, null)), animate && React.createElement(CardLoaderShining, null));
+};
+
+const DEFAULT_DIVIDER_SIZE = 1;
+const verticalDivider = css`
+  height: inherit;
+  border-left: ${_ref => {
+  let {
+    size
+  } = _ref;
+  return rem(size || 0);
+}} solid ${_ref2 => {
   let {
     theme: {
-      flatButton
-    },
-    ...props
-  } = _ref5;
-  return flatButton.hoverColor[getVariant(props)];
+      divider
+    }
+  } = _ref2;
+  return divider.color;
 }};
-    background-color: ${_ref6 => {
+`;
+const horizontalDivider = css`
+  width: inherit;
+  border-bottom: ${_ref3 => {
+  let {
+    size
+  } = _ref3;
+  return rem(size || 0);
+}} solid ${_ref4 => {
   let {
     theme: {
-      flatButton
+      divider
     }
-  } = _ref6;
-  return flatButton.hoverBackgroundColor;
+  } = _ref4;
+  return divider.color;
 }};
-  }
+`;
+const Divider = /*#__PURE__*/styled.div.attrs(props => ({
+  size: DEFAULT_DIVIDER_SIZE,
+  ...props
+}))`
+  display: flex;
+  align-self: stretch;
+  border-radius: 0.0625rem;
 
-  &:active {
-    color: ${_ref7 => {
+  ${_ref5 => {
   let {
-    theme: {
-      flatButton
-    },
-    ...props
-  } = _ref7;
-  return flatButton.activeColor[getVariant(props)];
+    horizontal,
+    vertical
+  } = _ref5;
+  if (horizontal || !vertical) return horizontalDivider;
+  return verticalDivider;
 }};
-    background-color: ${_ref8 => {
+`;
+
+const ElementsArea = styled.div`
+  background: ${_ref => {
   let {
     theme: {
-      flatButton
+      elementsArea
     }
-  } = _ref8;
-  return flatButton.activeBackgroundColor;
+  } = _ref;
+  return elementsArea.backgroundColor;
 }};
-  }
+`;
 
-  &[disabled] {
-    color: ${_ref9 => {
+const setWidth$1 = width => typeof width === "number" ? `${width}px` : typeof width === "undefined" ? "auto" : width;
+
+const Flex = styled.div`
+  display: flex;
+  flex-direction: ${_ref => {
   let {
-    theme: {
-      flatButton
-    }
-  } = _ref9;
-  return flatButton.disabledColor;
+    column
+  } = _ref;
+  return column ? "column" : "row";
 }};
-    background-color: ${_ref10 => {
+  width: 100%;
+  gap: ${_ref2 => {
   let {
-    theme: {
-      flatButton
-    }
-  } = _ref10;
-  return flatButton.disabledBackgroundColor;
+    gap
+  } = _ref2;
+  return gap;
 }};
-  }
+  box-sizing: border-box;
+  ${background}
+  ${border}
+  ${color}
+  ${flexbox}
+  ${fontSize}
+  ${fontWeight}
+  ${fontStyle}
+  ${space}
+  ${layout}
+  ${textAlign}
+  ${position}
+  ${lineHeight}
 `;
-const RaisedButton = /*#__PURE__*/styled(BaseButton)`
-  color: ${_ref11 => {
-  let {
-    theme: {
-      raisedButton
-    },
-    ...props
-  } = _ref11;
-  return raisedButton.color[getVariant(props)];
-}};
-  background-color: ${_ref12 => {
+const FlexSpan = styled.span`
+  box-sizing: border-box;
+  width: ${_ref3 => {
   let {
-    theme: {
-      raisedButton
-    },
-    ...props
-  } = _ref12;
-  return raisedButton.backgroundColor[getVariant(props)];
+    width
+  } = _ref3;
+  return setWidth$1(width);
 }};
-  box-shadow: ${_ref13 => {
+  white-space: ${_ref4 => {
   let {
-    theme: {
-      shadows
-    }
-  } = _ref13;
-  return shadows.normal;
+    whiteSpace
+  } = _ref4;
+  return whiteSpace;
 }};
+  ${background}
+  ${border}
+  ${color}
+  ${flexbox}
+  ${fontSize}
+  ${fontWeight}
+  ${fontStyle}
+  ${space}
+  ${layout}
+  ${textAlign}
+  ${position}
+  ${lineHeight}
+`;
 
-  &:hover {
-    color: ${_ref14 => {
+var LoadingStatus;
+
+(function (LoadingStatus) {
+  LoadingStatus["Loading"] = "loading";
+  LoadingStatus["Ok"] = "ok";
+  LoadingStatus["Error"] = "error";
+})(LoadingStatus || (LoadingStatus = {}));
+
+const progressMove = keyframes`
+  0% {
+    left: 0;
+  }
+  33.3% {
+    left: 0;
+  }
+  100% {
+    left: 100%;
+  }
+`;
+const progressGrow = keyframes`
+  0% {
+    width: 0;
+  }
+  66.6% {
+    width: 60%;
+  }
+  100% {
+    width: 60%;
+  }
+`;
+const transitionMixin = css`
+  animation: ${progressMove} 1200ms ease-in-out infinite, ${progressGrow} 1200ms ease-in-out infinite;
+`;
+const smoothTransition = css`
+  transition: width 300ms linear;
+`;
+const LinearProgress = styled.div`
+  position: relative;
+  height: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: ${_ref => {
   let {
     theme: {
-      raisedButton
-    },
-    ...props
-  } = _ref14;
-  return raisedButton.hoverColor[getVariant(props)];
+      borderRadius
+    }
+  } = _ref;
+  return borderRadius.medium;
 }};
-    background-color: ${_ref15 => {
+  background-color: ${_ref2 => {
   let {
     theme: {
-      raisedButton
-    },
-    ...props
-  } = _ref15;
-  return raisedButton.hoverBackgroundColor[getVariant(props)];
+      linearProgress
+    }
+  } = _ref2;
+  return linearProgress.formBackgroundColor;
 }};
-  }
 
-  &:active {
-    color: ${_ref16 => {
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    height: 0.25rem;
+    width: ${_ref3 => {
   let {
-    theme: {
-      raisedButton
-    },
-    ...props
-  } = _ref16;
-  return raisedButton.activeColor[getVariant(props)];
+    done
+  } = _ref3;
+  return done !== void 0 ? `${done}%` : 0;
 }};
-    background-color: ${_ref17 => {
+    background-color: ${_ref4 => {
   let {
     theme: {
-      raisedButton
+      linearProgress
     },
     ...props
-  } = _ref17;
-  return raisedButton.activeBackgroundColor[getVariant(props)];
-}};
-    box-shadow: ${_ref18 => {
-  let {
-    theme: {
-      shadows
-    }
-  } = _ref18;
-  return shadows.pressed;
-}};
-  }
-
-  &[disabled] {
-    pointer-events: none;
-    box-shadow: none;
-    color: ${_ref19 => {
-  let {
-    theme: {
-      raisedButton
-    }
-  } = _ref19;
-  return raisedButton.disabledColor;
+  } = _ref4;
+  return linearProgress.fillBackgroundColor[getColorOrMono(props)];
 }};
-    background-color: ${_ref20 => {
+    ${_ref5 => {
   let {
-    theme: {
-      raisedButton
-    }
-  } = _ref20;
-  return raisedButton.disabledBackgroundColor;
+    done
+  } = _ref5;
+  return done === void 0 ? transitionMixin : smoothTransition;
 }};
   }
 `;
 
-const DEFAULT_LOADER_SIZE = "110px";
-
-const setHeight = height => typeof height === "number" ? `${height}px` : typeof height === "undefined" ? DEFAULT_LOADER_SIZE : height;
-
-const setWidth = width => typeof width === "number" ? `${width}px` : typeof width === "undefined" ? "100%" : width;
-
-const CardLoaderPreview = styled.div`
-  display: flex;
-  flex-grow: 1;
-  background-color: ${_ref => {
+const imageBaseMixin = css`
+  object-fit: cover;
+  border-radius: ${_ref => {
   let {
-    theme
+    theme: {
+      borderRadius
+    }
   } = _ref;
-  return theme.palette.elementDark;
+  return borderRadius.medium;
 }};
+  display: block;
 `;
-const CardLoaderBar = styled.div`
-  width: 100%;
-  background-color: ${_ref2 => {
+const ImageBase = /*#__PURE__*/styled.img.attrs(_ref2 => {
   let {
-    theme
+    src,
+    fallback
   } = _ref2;
-  return theme.palette.elementDark;
-}};
-  margin-bottom: 10px;
-  border-radius: 0.75rem;
-`;
-const CardLoaderBars = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
-const CardLoaderShining = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: #333;
-  width: 100%;
-  animation-duration: 0.6s;
-  animation-iteration-count: infinite;
-  animation-name: loader-animate;
-  animation-timing-function: linear;
-  background: -webkit-linear-gradient(
-    left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.6) 30%,
-    rgba(255, 255, 255, 0) 81%
-  );
-  background: -o-linear-gradient(
-    left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.6) 30%,
-    rgba(255, 255, 255, 0) 81%
-  );
-  background: linear-gradient(
-    to right,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.6) 30%,
-    rgba(255, 255, 255, 0) 81%
-  );
-  filter: progid:DXImageTransform.Microsoft.gradient(
-            startColorstr='#00ffffff',
-            endColorstr='#00ffffff',
-            GradientType=1);
-
-  @keyframes loader-animate {
-    0% {
-      transform: translate3d(-100%, 0, 0);
-    }
-    100% {
-      transform: translate3d(100%, 0, 0);
-    }
-  }
+  return {
+    src: src || fallback || defaultStub
+  };
+})`
+  ${imageBaseMixin};
 `;
-const CardLoaderContainer = styled.div`
+const ImageLoadingContainer = styled.div`
+  ${imageBaseMixin};
   position: relative;
-  display: flex;
-  width: ${_ref3 => {
+  background: ${_ref3 => {
   let {
-    width
+    theme
   } = _ref3;
-  return setWidth(width);
+  return theme.palette.elementDark;
 }};
-
-  ${CardLoaderPreview} {
-    height: ${_ref4 => {
+  width: ${_ref4 => {
   let {
-    height
+    width
   } = _ref4;
-  return setHeight(height);
+  return typeof width === "number" ? `${width}px` : width;
 }};
-    width: ${_ref5 => {
+  height: ${_ref5 => {
   let {
     height
   } = _ref5;
-  return setHeight(height);
-}};
-    min-height: ${_ref6 => {
-  let {
-    height
-  } = _ref6;
-  return setHeight(height);
-}};
-    min-width: ${_ref7 => {
-  let {
-    height
-  } = _ref7;
-  return setHeight(height);
+  return typeof height === "number" ? `${height}px` : height;
 }};
-  }
+`;
+const ImageLoadingProgress = /*#__PURE__*/styled(LinearProgress)`
+  top: 50%;
+  transform: translateY(-50%);
+  left: 13.3%;
+  width: calc(100% - (13.3% * 2));
+`;
 
-  ${CardLoaderShining},
-  ${CardLoaderBars} {
-    height: ${_ref8 => {
+const LoadableImageComponent = _ref => {
   let {
-    height
-  } = _ref8;
-  return setHeight(height);
-}};
-  }
+    src,
+    fallback,
+    loading,
+    ...restProps
+  } = _ref;
+  const [loadingStatus, setLoadingStatus] = useState(LoadingStatus.Loading);
+  useEffect(() => {
+    if (src) {
+      setLoadingStatus(LoadingStatus.Loading);
+    }
+  }, [src]);
+  const onLoadImage = useCallback(() => {
+    if (loadingStatus === LoadingStatus.Loading) {
+      setLoadingStatus(LoadingStatus.Ok);
+    }
+  }, [loadingStatus]);
+  const onErrorImage = useCallback(() => {
+    if (loadingStatus === LoadingStatus.Loading) {
+      setLoadingStatus(LoadingStatus.Error);
+    }
+  }, [loadingStatus]);
+  const imageBase = React.createElement(ImageBase, Object.assign({
+    src: loadingStatus === LoadingStatus.Error ? "" : src,
+    fallback: fallback,
+    onLoad: onLoadImage,
+    onError: onErrorImage,
+    onErrorCapture: onErrorImage
+  }, restProps));
+  return loadingStatus !== LoadingStatus.Loading && !loading ? imageBase : React.createElement(ImageLoadingContainer, Object.assign({}, restProps), React.createElement("div", {
+    style: {
+      display: "none"
+    }
+  }, imageBase), React.createElement(ImageLoadingProgress, null));
+};
 
-  ${CardLoaderPreview} {
-    margin-right: 0.75rem;
-  }
+const LoadableImage = /*#__PURE__*/memo(LoadableImageComponent);
 
-  ${CardLoaderBars} {
-    padding-top: calc(${_ref9 => {
+const Image = /*#__PURE__*/memo(_ref => {
   let {
-    height
-  } = _ref9;
-  return setHeight(height);
-}} / 6);
-    box-sizing: border-box;
+    src,
+    loadable,
+    loading,
+    ...restProps
+  } = _ref;
+  return loading || loadable ? React.createElement(LoadableImage, Object.assign({
+    src: src,
+    loading: loading
+  }, restProps)) : React.createElement(ImageBase, Object.assign({
+    src: src
+  }, restProps));
+});
 
-    ${CardLoaderBar} {
-      &:first-child {
-        height: calc(${_ref10 => {
+const Message = styled.div`
+  padding: 1em;
+  background-color: ${_ref => {
   let {
-    height
-  } = _ref10;
-  return setHeight(height);
-}} / 4);
-      }
-
-      &:not(:first-child) {
-        height: calc(${_ref11 => {
+    theme: {
+      message
+    },
+    ...props
+  } = _ref;
+  return message.backgroundColor[getMessageColors(props)];
+}};
+  border: 0.0625rem solid ${_ref2 => {
   let {
-    height
-  } = _ref11;
-  return setHeight(height);
-}} / 6);
-      }
+    theme: {
+      message
+    },
+    ...props
+  } = _ref2;
+  return message.borderColor[getMessageColors(props)];
+}};
+  border-radius: ${_ref3 => {
+  let {
+    theme: {
+      borderRadius
+    }
+  } = _ref3;
+  return borderRadius.medium;
+}};
+  font: ${_ref4 => {
+  let {
+    theme: {
+      fonts
     }
+  } = _ref4;
+  return fonts.standard;
+}};
+  color: ${_ref5 => {
+  let {
+    theme: {
+      message
+    },
+    ...props
+  } = _ref5;
+  return message.color[getMessageColors(props)];
+}};
+  text-align: ${_ref6 => {
+  let {
+    textRight,
+    textCenter
+  } = _ref6;
+  return textRight ? "right" : textCenter ? "center" : "left";
+}};
+
+  > * {
+    color: inherit;
   }
 `;
 
-const CardLoader = _ref => {
+const Paragraph = styled.p`
+  margin: 0 0 0.5rem;
+  font: ${_ref => {
   let {
-    animate = true,
-    height,
-    width
+    theme: {
+      fonts
+    }
   } = _ref;
-  return React.createElement(CardLoaderContainer, {
-    height: height,
-    width: width
-  }, React.createElement(CardLoaderPreview, null), React.createElement(CardLoaderBars, null, React.createElement(CardLoaderBar, null), React.createElement(CardLoaderBar, null)), animate && React.createElement(CardLoaderShining, null));
-};
+  return fonts.standard;
+}};
+  color: ${_ref2 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref2;
+  return palette.textPrimary;
+}};
+`;
 
-const DEFAULT_DIVIDER_SIZE = 1;
-const verticalDivider = css`
-  height: inherit;
-  border-left: ${_ref => {
+const H4 = styled.h4`
+  font: ${_ref => {
   let {
-    size
+    theme: {
+      fonts
+    }
   } = _ref;
-  return rem(size || 0);
-}} solid ${_ref2 => {
+  return fonts.standard;
+}};
+  color: ${_ref2 => {
   let {
     theme: {
-      divider
+      palette
     }
   } = _ref2;
-  return divider.color;
+  return palette.textPrimary;
 }};
 `;
-const horizontalDivider = css`
-  width: inherit;
-  border-bottom: ${_ref3 => {
+const H3 = styled.h3`
+  font: ${_ref3 => {
   let {
-    size
+    theme: {
+      fonts
+    }
   } = _ref3;
-  return rem(size || 0);
-}} solid ${_ref4 => {
+  return fonts.subtitle;
+}};
+  color: ${_ref4 => {
   let {
     theme: {
-      divider
+      palette
     }
   } = _ref4;
-  return divider.color;
+  return palette.textPrimary;
 }};
 `;
-const Divider = /*#__PURE__*/styled.div.attrs(props => ({
-  size: DEFAULT_DIVIDER_SIZE,
-  ...props
-}))`
-  display: flex;
-  align-self: stretch;
-  border-radius: 0.0625rem;
-
-  ${_ref5 => {
+const H2 = styled.h2`
+  font: ${_ref5 => {
   let {
-    horizontal,
-    vertical
+    theme: {
+      fonts
+    }
   } = _ref5;
-  if (horizontal || !vertical) return horizontalDivider;
-  return verticalDivider;
+  return fonts.h2;
 }};
-`;
-
-const ElementsArea = styled.div`
-  background: ${_ref => {
+  color: ${_ref6 => {
   let {
     theme: {
-      elementsArea
+      palette
     }
-  } = _ref;
-  return elementsArea.backgroundColor;
+  } = _ref6;
+  return palette.textPrimary;
 }};
 `;
-
-const setWidth$1 = width => typeof width === "number" ? `${width}px` : typeof width === "undefined" ? "auto" : width;
-
-const Flex = styled.div`
-  display: flex;
-  flex-direction: ${_ref => {
+const H1 = styled.h1`
+  font: ${_ref7 => {
   let {
-    column
-  } = _ref;
-  return column ? "column" : "row";
+    theme: {
+      fonts
+    }
+  } = _ref7;
+  return fonts.h1;
 }};
-  width: 100%;
-  gap: ${_ref2 => {
+  color: ${_ref8 => {
   let {
-    gap
-  } = _ref2;
-  return gap;
+    theme: {
+      palette
+    }
+  } = _ref8;
+  return palette.textPrimary;
 }};
-  box-sizing: border-box;
-  ${background}
-  ${border}
-  ${color}
-  ${flexbox}
-  ${fontSize}
-  ${fontWeight}
-  ${fontStyle}
-  ${space}
-  ${layout}
-  ${textAlign}
-  ${position}
-  ${lineHeight}
 `;
-const FlexSpan = styled.span`
-  box-sizing: border-box;
-  width: ${_ref3 => {
+const Description = styled.div`
+  font: ${_ref9 => {
   let {
-    width
-  } = _ref3;
-  return setWidth$1(width);
+    theme: {
+      fonts
+    }
+  } = _ref9;
+  return fonts.description;
 }};
-  white-space: ${_ref4 => {
+  color: ${_ref10 => {
   let {
-    whiteSpace
-  } = _ref4;
-  return whiteSpace;
+    theme: {
+      palette
+    }
+  } = _ref10;
+  return palette.textSecondary;
 }};
-  ${background}
-  ${border}
-  ${color}
-  ${flexbox}
-  ${fontSize}
-  ${fontWeight}
-  ${fontStyle}
-  ${space}
-  ${layout}
-  ${textAlign}
-  ${position}
-  ${lineHeight}
+`;
+const textOverflowEllipsisMixin = `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
-var LoadingStatus;
-
-(function (LoadingStatus) {
-  LoadingStatus["Loading"] = "loading";
-  LoadingStatus["Ok"] = "ok";
-  LoadingStatus["Error"] = "error";
-})(LoadingStatus || (LoadingStatus = {}));
-
-const progressMove = keyframes`
-  0% {
-    left: 0;
-  }
-  33.3% {
-    left: 0;
-  }
-  100% {
-    left: 100%;
-  }
+const IconBefore = styled.span`
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  width: 2rem;
 `;
-const progressGrow = keyframes`
-  0% {
-    width: 0;
-  }
-  66.6% {
-    width: 60%;
-  }
-  100% {
-    width: 60%;
+const IconAfter = styled.span`
+  position: absolute;
+  right: ${_ref => {
+  let {
+    indent
+  } = _ref;
+  return indent;
+}}rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  width: 2rem;
+
+  button {
+    width: auto;
   }
 `;
-const transitionMixin = css`
-  animation: ${progressMove} 1200ms ease-in-out infinite, ${progressGrow} 1200ms ease-in-out infinite;
-`;
-const smoothTransition = css`
-  transition: width 300ms linear;
-`;
-const LinearProgress = styled.div`
-  position: relative;
-  height: 0.25rem;
+
+const inputMixin = css`
+  display: flex;
+  height: ${props => props.height || "auto"};
+  padding: 0.34375rem ${_ref => {
+  let {
+    paddingRight
+  } = _ref;
+  return `${paddingRight || 0}px`;
+}} 0.34375rem
+    ${_ref2 => {
+  let {
+    extraLeftPaddingWidth
+  } = _ref2;
+  return extraLeftPaddingWidth ? `${(extraLeftPaddingWidth ?? 0) + 8}px` : "0.5rem";
+}};
   width: 100%;
-  overflow: hidden;
-  border-radius: ${_ref => {
+  background: transparent;
+  border: 0.0625rem solid ${_ref3 => {
+  let {
+    error,
+    theme: {
+      input
+    }
+  } = _ref3;
+  return error ? input.error : input.borderColor;
+}};
+  border-radius: ${_ref4 => {
   let {
     theme: {
       borderRadius
     }
-  } = _ref;
+  } = _ref4;
   return borderRadius.medium;
 }};
-  background-color: ${_ref2 => {
+  box-sizing: border-box;
+  color: ${_ref5 => {
   let {
     theme: {
-      linearProgress
+      input
     }
-  } = _ref2;
-  return linearProgress.formBackgroundColor;
+  } = _ref5;
+  return input.color;
 }};
-
-  &:after {
-    content: "";
-    position: absolute;
-    left: 0;
-    height: 0.25rem;
-    width: ${_ref3 => {
+  font: ${_ref6 => {
   let {
-    done
-  } = _ref3;
-  return done !== void 0 ? `${done}%` : 0;
+    theme: {
+      fonts
+    }
+  } = _ref6;
+  return fonts.standard;
 }};
-    background-color: ${_ref4 => {
+
+  ${IconBefore} + & {
+    padding-left: 2rem;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${_ref7 => {
   let {
+    error,
     theme: {
-      linearProgress
-    },
-    ...props
-  } = _ref4;
-  return linearProgress.fillBackgroundColor[getColorOrMono(props)];
+      input
+    }
+  } = _ref7;
+  return error ? input.error : input.active;
 }};
-    ${_ref5 => {
+  }
+
+  &::placeholder {
+    color: ${_ref8 => {
   let {
-    done
-  } = _ref5;
-  return done === void 0 ? transitionMixin : smoothTransition;
+    theme: {
+      input
+    }
+  } = _ref8;
+  return input.placeholderColor;
 }};
   }
-`;
 
-const imageBaseMixin = css`
-  object-fit: cover;
-  border-radius: ${_ref => {
+  &[disabled] {
+    pointer-events: none;
+    color: ${_ref9 => {
   let {
     theme: {
-      borderRadius
+      input
     }
-  } = _ref;
-  return borderRadius.medium;
+  } = _ref9;
+  return input.disabledColor;
 }};
-  display: block;
-`;
-const ImageBase = /*#__PURE__*/styled.img.attrs(_ref2 => {
-  let {
-    src,
-    fallback
-  } = _ref2;
-  return {
-    src: src || fallback || defaultStub
-  };
-})`
-  ${imageBaseMixin};
-`;
-const ImageLoadingContainer = styled.div`
-  ${imageBaseMixin};
-  position: relative;
-  background: ${_ref3 => {
+    border: 0.0635rem dashed ${_ref10 => {
   let {
-    theme
-  } = _ref3;
-  return theme.palette.elementDark;
+    theme: {
+      input
+    }
+  } = _ref10;
+  return input.disabledBorderColor;
 }};
-  width: ${_ref4 => {
+
+    &::placeholder {
+      color: ${_ref11 => {
   let {
-    width
-  } = _ref4;
-  return typeof width === "number" ? `${width}px` : width;
+    theme: {
+      input
+    }
+  } = _ref11;
+  return input.disabledPlaceholderColor;
 }};
-  height: ${_ref5 => {
+    }
+  }
+`;
+const StyledInput = /*#__PURE__*/styled.input.attrs(props => ({
+  width: "14rem",
+  height: "auto",
+  paddingRight: 0.5,
+  paddingLeft: false,
+  ...props
+}))`
+  ${inputMixin};
+`;
+const ChipInputHolder = styled.div`
+  ${inputMixin};
+  height: 2rem;
+  align-items: center;
+  padding: 0 ${_ref12 => {
   let {
-    height
-  } = _ref5;
-  return typeof height === "number" ? `${height}px` : height;
-}};
+    paddingRight
+  } = _ref12;
+  return `${paddingRight || 0}rem`;
+}} 0 0.5rem;
 `;
-const ImageLoadingProgress = /*#__PURE__*/styled(LinearProgress)`
+const ValuePrefix = styled.div`
+  position: absolute;
+  left: 0.5rem;
   top: 50%;
   transform: translateY(-50%);
-  left: 13.3%;
-  width: calc(100% - (13.3% * 2));
-`;
-
-const LoadableImageComponent = _ref => {
-  let {
-    src,
-    fallback,
-    loading,
-    ...restProps
-  } = _ref;
-  const [loadingStatus, setLoadingStatus] = useState(LoadingStatus.Loading);
-  useEffect(() => {
-    if (src) {
-      setLoadingStatus(LoadingStatus.Loading);
-    }
-  }, [src]);
-  const onLoadImage = useCallback(() => {
-    if (loadingStatus === LoadingStatus.Loading) {
-      setLoadingStatus(LoadingStatus.Ok);
-    }
-  }, [loadingStatus]);
-  const onErrorImage = useCallback(() => {
-    if (loadingStatus === LoadingStatus.Loading) {
-      setLoadingStatus(LoadingStatus.Error);
-    }
-  }, [loadingStatus]);
-  const imageBase = React.createElement(ImageBase, Object.assign({
-    src: loadingStatus === LoadingStatus.Error ? "" : src,
-    fallback: fallback,
-    onLoad: onLoadImage,
-    onError: onErrorImage,
-    onErrorCapture: onErrorImage
-  }, restProps));
-  return loadingStatus !== LoadingStatus.Loading && !loading ? imageBase : React.createElement(ImageLoadingContainer, Object.assign({}, restProps), React.createElement("div", {
-    style: {
-      display: "none"
-    }
-  }, imageBase), React.createElement(ImageLoadingProgress, null));
-};
-
-const LoadableImage = /*#__PURE__*/memo(LoadableImageComponent);
+  font-size: 1rem;
+  opacity: 0.28;
 
-const Image = /*#__PURE__*/memo(_ref => {
-  let {
-    src,
-    loadable,
-    loading,
-    ...restProps
-  } = _ref;
-  return loading || loadable ? React.createElement(LoadableImage, Object.assign({
-    src: src,
-    loading: loading
-  }, restProps)) : React.createElement(ImageBase, Object.assign({
-    src: src
-  }, restProps));
-});
+  ${IconBefore} + & {
+    padding-left: 1.5rem;
+  }
+`;
 
-const Message = styled.div`
-  padding: 1em;
-  background-color: ${_ref => {
+const InputContainer = styled.span`
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: ${_ref => {
   let {
-    theme: {
-      message
-    },
-    ...props
+    width
   } = _ref;
-  return message.backgroundColor[getMessageColors(props)];
-}};
-  border: 0.0625rem solid ${_ref2 => {
-  let {
-    theme: {
-      message
-    },
-    ...props
-  } = _ref2;
-  return message.borderColor[getMessageColors(props)];
-}};
-  border-radius: ${_ref3 => {
-  let {
-    theme: {
-      borderRadius
-    }
-  } = _ref3;
-  return borderRadius.medium;
+  return width;
 }};
-  font: ${_ref4 => {
+
+  ${_ref2 => {
   let {
+    active,
     theme: {
-      fonts
+      input
     }
-  } = _ref4;
-  return fonts.standard;
-}};
-  color: ${_ref5 => {
+  } = _ref2;
+  return active && `
+    &:hover {
+      input {
+        outline: none;
+        border-color: ${input.active};
+      }
+    }
+  
+    input {
+      outline: none;
+      border-color: ${input.active};
+    }
+  `;
+}}
+
+  &:hover {
+    input {
+      border-color: ${_ref3 => {
   let {
+    active,
     theme: {
-      message
+      input
     },
-    ...props
-  } = _ref5;
-  return message.color[getMessageColors(props)];
+    error
+  } = _ref3;
+  return !active && (error ? input.error : input.hoverBorderColor);
 }};
-  text-align: ${_ref6 => {
+
+      &:focus {
+        outline: none;
+        border-color: ${_ref4 => {
   let {
-    textRight,
-    textCenter
-  } = _ref6;
-  return textRight ? "right" : textCenter ? "center" : "left";
+    theme: {
+      input
+    },
+    error
+  } = _ref4;
+  return error ? input.error : input.active;
 }};
+      }
+    }
+  }
 
-  > * {
-    color: inherit;
+  &[disabled] {
+    pointer-events: none;
   }
-`;
 
-const Paragraph = styled.p`
-  margin: 0 0 0.5rem;
-  font: ${_ref => {
-  let {
-    theme: {
-      fonts
-    }
-  } = _ref;
-  return fonts.standard;
-}};
-  color: ${_ref2 => {
+  ${ChipInputHolder} {
+    border-color: ${_ref5 => {
   let {
+    active,
     theme: {
-      palette
+      input
     }
-  } = _ref2;
-  return palette.textPrimary;
+  } = _ref5;
+  return active && input.active;
 }};
+  }
 `;
 
-const H4 = styled.h4`
-  font: ${_ref => {
+const IconButtonInnerChild = styled.span``;
+const buttonActiveMixin = css`
+  background: ${_ref => {
   let {
     theme: {
-      fonts
+      palette
     }
   } = _ref;
-  return fonts.standard;
+  return palette.element;
 }};
-  color: ${_ref2 => {
+
+  span[kind]:after,
+  :hover ${IconButtonInnerChild}, ${IconButtonInnerChild} {
+    color: ${_ref2 => {
   let {
     theme: {
       palette
     }
   } = _ref2;
-  return palette.textPrimary;
+  return palette.background;
 }};
+  }
 `;
-const H3 = styled.h3`
-  font: ${_ref3 => {
+const buttonHoverMixin = css`
+  &:hover {
+    background: ${_ref3 => {
   let {
+    hasBg,
     theme: {
-      fonts
+      palette
     }
   } = _ref3;
-  return fonts.subtitle;
+  return hasBg ? palette.elementDark : "none";
 }};
-  color: ${_ref4 => {
-  let {
-    theme: {
-      palette
+    transition: background ${transition.hover};
+
+    > ${Icon}, ${IconButtonInnerChild} {
+      transition: all ${transition.hover};
     }
+  }
+`;
+const buttonMixin = css`
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: ${_ref4 => {
+  let {
+    iconRight
   } = _ref4;
-  return palette.textPrimary;
+  return iconRight ? "row-reverse" : "row";
 }};
-`;
-const H2 = styled.h2`
-  font: ${_ref5 => {
+  padding: 0 1rem;
+  height: 2.25rem;
+  width: ${props => props.notFixedWidth ? "auto" : "3rem"};
+  background: none;
+  border: none;
+  border-radius: 1.25rem;
+  outline: none;
+  cursor: pointer;
+  backface-visibility: hidden;
+  transform: translateZ(0) scale(1, 1);
+
+  ${_ref5 => {
   let {
-    theme: {
-      fonts
-    }
+    active
   } = _ref5;
-  return fonts.h2;
+  return active ? buttonActiveMixin : buttonHoverMixin;
 }};
-  color: ${_ref6 => {
+
+  &:active > ${Icon} {
+    transform: scale(1.125, 1.125);
+    transition: all ${transition.press};
+  }
+
+  ${Icon}, ${IconButtonInnerChild} {
+    display: block;
+    position: relative;
+    transition: color ${transition.release};
+
+    &:after {
+      display: block;
+      position: absolute;
+      left: 0;
+      z-index: 2;
+    }
+  }
+
+  &[disabled],
+  ${InputContainer}[disabled] & {
+    ${Icon}, ${IconButtonInnerChild} {
+      color: ${_ref6 => {
   let {
     theme: {
-      palette
+      iconButton
     }
   } = _ref6;
-  return palette.textPrimary;
+  return iconButton.disabledColor;
 }};
+    }
+    pointer-events: none;
+  }
 `;
-const H1 = styled.h1`
-  font: ${_ref7 => {
+const IconButtonButton = /*#__PURE__*/styled.button.attrs(props => ({
+  tabIndex: -1,
+  ...props
+}))`
+  flex-shrink: 0;
+
+  &:hover > ${Icon}, &:hover > ${IconButtonInnerChild} {
+    color: ${_ref7 => {
   let {
     theme: {
-      fonts
-    }
+      iconButton
+    },
+    ...props
   } = _ref7;
-  return fonts.h1;
+  return iconButton.hoverColor[getIconColors(props)];
 }};
-  color: ${_ref8 => {
+  }
+
+  &:active > ${Icon}, &:active > ${IconButtonInnerChild} {
+    color: ${_ref8 => {
   let {
     theme: {
-      palette
-    }
+      iconButton
+    },
+    ...props
   } = _ref8;
-  return palette.textPrimary;
+  return iconButton.activeColor[getIconColors(props)];
 }};
-`;
-const Description = styled.div`
-  font: ${_ref9 => {
+  }
+
+  ${Icon}, ${IconButtonInnerChild} {
+    color: ${_ref9 => {
   let {
     theme: {
-      fonts
-    }
+      iconButton
+    },
+    ...props
   } = _ref9;
-  return fonts.description;
+  return iconButton.color[getIconColors(props)];
 }};
-  color: ${_ref10 => {
+  }
+
+  ${IconButtonInnerChild} {
+    margin: ${_ref10 => {
   let {
-    theme: {
-      palette
-    }
+    iconRight
   } = _ref10;
-  return palette.textSecondary;
+  return iconRight ? "0 0.5rem 0 0" : "0 0 0 0.5rem";
 }};
+  }
+
+  ${buttonMixin};
 `;
-const textOverflowEllipsisMixin = `
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
+
+const IconButtonComponent = _ref => {
+  let {
+    kind,
+    children,
+    innerRef,
+    icon,
+    tabIndex = -1,
+    ...props
+  } = _ref;
+  return React.createElement(IconButtonButton, Object.assign({
+    ref: innerRef,
+    notFixedWidth: !!children,
+    tabIndex: tabIndex
+  }, props), icon || React.createElement(Icon, {
+    kind: kind
+  }), children && React.createElement(IconButtonInnerChild, null, children));
+};
+
+const IconButton = /*#__PURE__*/memo(IconButtonComponent);
 
 const LegendToggler = /*#__PURE__*/styled(IconButton).attrs(props => ({
   kind: "expand",
@@ -13921,7 +13678,7 @@ const LegendToggler = /*#__PURE__*/styled(IconButton).attrs(props => ({
   }
 `;
 
-const Input$1 = /*#__PURE__*/styled.input.attrs(() => ({
+const Input = /*#__PURE__*/styled.input.attrs(() => ({
   type: "checkbox",
   hidden: true
 }))``;
@@ -14077,7 +13834,7 @@ const Label = styled.label`
     pointer-events: none;
   }
 
-  ${Input$1}:checked + ${Box} ${Border} {
+  ${Input}:checked + ${Box} ${Border} {
     fill: ${_ref5 => {
   let {
     theme: {
@@ -14089,7 +13846,7 @@ const Label = styled.label`
     transition: fill ${transition.press}; // appear
   }
 
-  &:hover > ${Input$1}:checked + ${Box} ${Border} {
+  &:hover > ${Input}:checked + ${Box} ${Border} {
     fill: ${_ref6 => {
   let {
     theme: {
@@ -14100,7 +13857,7 @@ const Label = styled.label`
 }};
   }
 
-  ${Input$1}[disabled] + ${Box} ${Border} {
+  ${Input}[disabled] + ${Box} ${Border} {
     fill: ${_ref7 => {
   let {
     theme: {
@@ -14111,7 +13868,7 @@ const Label = styled.label`
 }};
   }
 
-  ${Input$1}:checked[disabled] + ${Box} ${Border} {
+  ${Input}:checked[disabled] + ${Box} ${Border} {
     fill: transparent;
   }
 
@@ -14126,7 +13883,7 @@ const Label = styled.label`
 }};
   }
 
-  &:hover > ${Input$1}:checked + ${Box} ${BoxFill} {
+  &:hover > ${Input}:checked + ${Box} ${BoxFill} {
     fill: ${_ref9 => {
   let {
     theme: {
@@ -14137,7 +13894,7 @@ const Label = styled.label`
 }};
   }
 
-  ${Input$1}:checked + ${Box} ${BoxFill} {
+  ${Input}:checked + ${Box} ${BoxFill} {
     fill: ${_ref10 => {
   let {
     theme: {
@@ -14155,7 +13912,7 @@ const Label = styled.label`
     transition: all ${transition.press}; // appear
   }
 
-  ${Input$1}:checked[disabled] + ${Box} ${BoxFill} {
+  ${Input}:checked[disabled] + ${Box} ${BoxFill} {
     fill: ${_ref11 => {
   let {
     theme: {
@@ -14166,7 +13923,7 @@ const Label = styled.label`
 }};
   }
 
-  ${Input$1}:checked + ${Box} ${Check} {
+  ${Input}:checked + ${Box} ${Check} {
     opacity: ${_ref12 => {
   let {
     indeterminate
@@ -14181,7 +13938,7 @@ const Label = styled.label`
 }}; // appear
   }
 
-  ${Input$1}:checked + ${Box} ${Square} {
+  ${Input}:checked + ${Box} ${Square} {
     opacity: ${_ref14 => {
   let {
     indeterminate
@@ -14241,7 +13998,7 @@ const CheckboxComponent = _ref => {
     title: title
   }, label && labelLeft && React.createElement(LabelText, {
     labelLeft: true
-  }, label), React.createElement(Input$1, Object.assign({}, props)), React.createElement(Box, {
+  }, label), React.createElement(Input, Object.assign({}, props)), React.createElement(Box, {
     labelLeft: labelLeft
   }, React.createElement(Svg, null, React.createElement(Border, null), React.createElement(BoxFill, null), React.createElement(Check, {
     indeterminate: indeterminate
@@ -14251,6 +14008,149 @@ const CheckboxComponent = _ref => {
 };
 const Checkbox = /*#__PURE__*/memo(CheckboxComponent);
 
+const ChipContainer = styled.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 0.3125rem 0.6875rem;
+  background-color: ${_ref => {
+  let {
+    theme: {
+      chip
+    },
+    ...props
+  } = _ref;
+  return chip.backgroundColor[getVariant(props)];
+}};
+  border-radius: ${_ref2 => {
+  let {
+    theme: {
+      borderRadius
+    }
+  } = _ref2;
+  return borderRadius.large;
+}};
+`;
+const Text = styled.span`
+  font: ${_ref3 => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref3;
+  return fonts.description;
+}};
+  color: ${_ref4 => {
+  let {
+    theme: {
+      palette
+    },
+    isStandard,
+    disabled
+  } = _ref4;
+  return disabled ? palette.textDisabled : isStandard ? palette.textPrimary : "#fff";
+}};
+`;
+const iconButtonMixin = css`
+  && {
+    height: 0.875rem;
+    width: 0.875rem;
+    margin-left: 0.875rem;
+    cursor: pointer;
+
+    ${Icon} {
+      height: 10px;
+      width: 11px;
+
+      &:after {
+        font-size: 0.6875rem;
+        color: ${_ref5 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref5;
+  return palette.textSecondary;
+}};
+      }
+    }
+  }
+`;
+const ActionButton = /*#__PURE__*/styled(IconButton)`
+  ${iconButtonMixin};
+`;
+const RegularIconButton = /*#__PURE__*/styled(IconButton)`
+  ${iconButtonMixin};
+`;
+const TooltipContent = styled.div`
+  max-width: 15rem;
+`;
+
+const ChipComponent = _ref => {
+  let {
+    text,
+    primary,
+    secondary,
+    error,
+    additionalButton,
+    additionalAction,
+    onRemove,
+    additionalButtonTooltip,
+    removeButtonTooltip,
+    disabled,
+    tooltipDelay = 300,
+    onMouseDown,
+    children,
+    ...props
+  } = _ref;
+  const remove = useCallback(e => {
+    onRemove && onRemove(text, e);
+  }, [onRemove, text]);
+  const isStandard = !primary && !secondary && !error;
+  return React.createElement(ChipContainer, Object.assign({
+    primary: primary,
+    secondary: secondary,
+    error: error
+  }, props), children, React.createElement(Text, {
+    isStandard: isStandard,
+    disabled: disabled
+  }, text), React.createElement(ThemeProvider, {
+    theme: isStandard ? theme : theme$1
+  }, React.createElement(React.Fragment, null, additionalButton && (additionalButtonTooltip ? React.createElement(Tooltip, {
+    arrow: true,
+    placement: "top",
+    content: React.createElement(TooltipContent, null, additionalButtonTooltip),
+    delay: tooltipDelay ? [tooltipDelay, tooltipDelay] : undefined
+  }, ref => React.createElement(ActionButton, {
+    kind: additionalButton,
+    onClick: additionalAction,
+    innerRef: ref
+  })) : React.createElement(RegularIconButton, {
+    kind: additionalButton,
+    onClick: additionalAction
+  })), !!onRemove && (removeButtonTooltip ? React.createElement(Tooltip, {
+    arrow: true,
+    placement: "top",
+    content: React.createElement(TooltipContent, null, removeButtonTooltip),
+    delay: tooltipDelay ? [tooltipDelay, tooltipDelay] : undefined
+  }, ref => React.createElement(ActionButton, {
+    kind: "close",
+    innerRef: ref,
+    onClick: e => {
+      e.stopPropagation();
+      remove(e);
+    }
+  })) : React.createElement(RegularIconButton, {
+    kind: "close",
+    onMouseDown: e => e.stopPropagation(),
+    onClick: e => {
+      e.stopPropagation();
+      remove(e);
+    }
+  })))));
+};
+
+const Chip = /*#__PURE__*/memo(ChipComponent);
+
 const scale = 32;
 
 const rotate = keyframes`
@@ -14498,7 +14398,123 @@ const ColorButton = _ref7 => {
   }), React.createElement(Background, {
     color: color
   }));
-};
+};
+
+const WideChip = /*#__PURE__*/styled(_ref => {
+  let { ...props
+  } = _ref;
+  return React.createElement(Chip, Object.assign({}, props));
+})`
+  height: 1rem;
+  cursor: default;
+
+  ${ChipContainer} {
+    width: 100%;
+    justify-content: space-between;
+  }
+`;
+
+const CheckMark = /*#__PURE__*/styled(Icon)`
+  position: absolute;
+  right: -1.5rem;
+  color: ${_ref => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref;
+  return palette.primary;
+}};
+`;
+
+const InputComponent = _ref => {
+  var _valuePrefixRef$curre, _valuePrefixRef$curre2;
+
+  let {
+    width = "14rem",
+    iconAfter,
+    iconBefore,
+    valuePrefix,
+    children,
+    disabled,
+    success,
+    innerRef,
+    disableInputOnly,
+    asChip,
+    onRemove,
+    active,
+    onMouseDown,
+    ...props
+  } = _ref;
+  const valuePrefixRef = useRef(null);
+  const [, setRefVisible] = useState(false);
+  const realChildren = getRealChildren(children);
+  const childrenCount = realChildren.length;
+  const paddingRight = childrenCount * 2 + (iconAfter ? 32 : 0);
+  return React.createElement(InputContainer, {
+    disabled: disabled,
+    error: props.error,
+    width: width,
+    active: active
+  }, iconBefore && React.createElement(IconBefore, {
+    onMouseDown: preventDefault
+  }, iconBefore), valuePrefix && React.createElement(ValuePrefix, {
+    onMouseDown: preventDefault,
+    ref: el => {
+      valuePrefixRef.current = el;
+      setRefVisible(!!el);
+    }
+  }, valuePrefix), props.value && asChip ? React.createElement(ChipInputHolder, {
+    paddingLeft: !!iconBefore,
+    paddingRight: paddingRight,
+    extraLeftPaddingWidth: ((_valuePrefixRef$curre = valuePrefixRef.current) == null ? void 0 : _valuePrefixRef$curre.getBoundingClientRect().width) ?? undefined,
+    ref: innerRef,
+    onMouseDown: onMouseDown
+  }, React.createElement(WideChip, {
+    text: `${props.value}`,
+    onRemove: onRemove,
+    onMouseDown: e => {
+      e.stopPropagation(); // @ts-ignore
+
+      onMouseDown && onMouseDown(e);
+    },
+    primary: true
+  })) : React.createElement(StyledInput, Object.assign({
+    ref: innerRef,
+    width: width,
+    disabled: disabled || disableInputOnly,
+    paddingLeft: !!iconBefore,
+    extraLeftPaddingWidth: ((_valuePrefixRef$curre2 = valuePrefixRef.current) == null ? void 0 : _valuePrefixRef$curre2.getBoundingClientRect().width) ?? undefined,
+    paddingRight: paddingRight,
+    onMouseDown: onMouseDown
+  }, props)), iconAfter ? React.createElement(IconAfter, {
+    indent: 0
+  }, iconAfter) : React.createElement(React.Fragment, null, realChildren.map((child, index) => React.createElement(IconAfter, {
+    onMouseDown: preventDefault,
+    indent: 2 * index,
+    key: index
+  }, child))), success && React.createElement(CheckMark, {
+    kind: "success"
+  }));
+};
+
+const Input$1 = /*#__PURE__*/withLabel( /*#__PURE__*/memo(InputComponent));
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const MaskedComponent = /*#__PURE__*/IMaskMixin(_ref => {
+  let {
+    innerRef,
+    inputRef,
+    ...props
+  } = _ref;
+  const attachRef = useCallback(ref => {
+    sendRefSafety(inputRef, ref);
+    sendRefSafety(innerRef, ref);
+  }, [innerRef, inputRef]);
+  return React.createElement(Input$1, Object.assign({}, props, {
+    innerRef: attachRef
+  }));
+});
 
 const Container = styled.div`
   position: relative;
@@ -18765,7 +18781,7 @@ const ColorPicker = /*#__PURE__*/memo(ColorPickerComponent);
 const OptionContainer = styled.div`
   display: flex;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   min-height: 1.25em;
   padding: 0.75rem 1rem;
   color: ${_ref => {
@@ -18864,6 +18880,44 @@ const OptionValueContainer = styled.span`
   display: flex;
   flex-direction: column;
 `;
+const OptionToggler = /*#__PURE__*/styled(LegendToggler)`
+  padding: 1rem 1rem 0.25rem 1rem;
+
+  ${Icon} + span {
+    font: ${_ref7 => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref7;
+  return fonts.description;
+}};
+  }
+
+  ${Icon}, ${Icon} + span {
+    color: ${_ref8 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref8;
+  return palette.textDisabled;
+}};
+  }
+
+  :hover {
+    ${Icon}, ${Icon} + span {
+      color: ${_ref9 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref9;
+  return palette.textPrimary;
+}};
+    }
+  }
+`;
 
 const isSelected = (item, selectedOptions) => {
   if (selectedOptions && selectedOptions.length > 0) {
@@ -18896,6 +18950,7 @@ const OptionComponent = _ref => {
     value,
     text,
     icon,
+    prefix,
     disabled,
     description,
     primary,
@@ -18940,7 +18995,7 @@ const OptionComponent = _ref => {
     name: value,
     value: value,
     disabled: disabled
-  }), !!icon && React.createElement(OptionIcon, null, React.createElement(Icon, {
+  }), prefix, !!icon && React.createElement(OptionIcon, null, React.createElement(Icon, {
     kind: icon,
     disabled: disabled
   })), React.createElement(OptionValueWrapper, null, React.createElement(OptionValueContainer, null, React.createElement(OptionText, {
@@ -18959,7 +19014,7 @@ function removeItem(array, index) {
 }
 function addItem(array, newItem) {
   return array.concat([newItem]);
-}
+} // eslint-disable-next-line max-lines-per-function
 
 const MenuComponent = _ref => {
   let {
@@ -18994,47 +19049,64 @@ const MenuComponent = _ref => {
 
     selectOption && selectOption(newOptions, item);
   }, [children, loading, multiple, options, selectOption, selectedOptions, setFocusedOption]);
+  const formatOptions = useCallback(() => {
+    return options == null ? void 0 : options.reduce((result, current, index) => ({ ...result,
+      [index]: current.opened ?? true
+    }), {});
+  }, [options]);
+  const [visibleGroups, setVisibleGroups] = useState(formatOptions());
+  const toggleVisibleGroup = useCallback(index => {
+    setVisibleGroups({ ...visibleGroups,
+      [index]: !(visibleGroups != null && visibleGroups[index])
+    });
+  }, [visibleGroups]);
+  const getOptionsArray = useCallback((currentOptions, i) => {
+    const result = [];
+    const titleOption = currentOptions[0].title ? currentOptions[0] : null;
+
+    if (titleOption) {
+      result.push(React.createElement(OptionToggler, {
+        toggled: visibleGroups == null ? void 0 : visibleGroups[i || 0],
+        onClick: () => toggleVisibleGroup(i || 0)
+      }, titleOption.text));
+    }
+
+    result.push(...currentOptions.filter(_ref2 => {
+      let {
+        title
+      } = _ref2;
+      return !title && (visibleGroups == null ? void 0 : visibleGroups[i || 0]);
+    }).map(item => {
+      return React.createElement(Option, {
+        key: `opt-${item.value}`,
+        item: item,
+        selectedOptions: selectedOptions,
+        multiple: multiple,
+        heading: item.heading || loading,
+        select: select
+      });
+    }));
+
+    if (!titleOption && i !== undefined && i > 0) {
+      result.push(React.createElement(DividerLine, null));
+    }
+
+    return result;
+  }, [visibleGroups, toggleVisibleGroup, multiple, loading, select, selectedOptions]);
   const renderOptions = useMemo(() => {
     if (!(options != null && options.length)) return null;
-    let newElements = [];
-
-    for (let i = 0; i < options.length; i++) {
-      let newArr = [];
-
-      if (Array.isArray(options[i])) {
-        const curOption = options[i];
-        newArr = curOption.map(item => {
-          return React.createElement(Option, {
-            key: `arr-${item.value}` || "null-child-value",
-            item: item,
-            select: select,
-            selectedOptions: selectedOptions,
-            multiple: multiple
-          });
-        });
+    const result = [];
 
-        if (i > 0) {
-          newElements = newElements.concat(React.createElement(DividerLine, {
-            key: `divider${i}`
-          }));
-        }
-      } else {
-        const curOption = options[i];
-        newArr.push(React.createElement(Option, {
-          key: `opt-${curOption.text}-${i}`,
-          heading: curOption.heading || loading,
-          item: curOption,
-          selectedOptions: selectedOptions,
-          multiple: multiple,
-          select: select
-        }));
+    if (Array.isArray(options[0])) {
+      for (let i = 0; i < options.length; i++) {
+        result.push(...getOptionsArray(options[i], i));
       }
-
-      newElements = newElements.concat(newArr);
+    } else {
+      result.push(...getOptionsArray(options));
     }
 
-    return newElements;
-  }, [loading, multiple, options, select, selectedOptions]);
+    return result;
+  }, [options, getOptionsArray]);
   const renderChildren = useMemo(() => {
     if (!children || multiple) return null; // options passed as children
 
@@ -19043,6 +19115,7 @@ const MenuComponent = _ref => {
         text,
         value,
         icon,
+        prefix,
         onClick,
         synthKey,
         disabled
@@ -19054,12 +19127,15 @@ const MenuComponent = _ref => {
         onClick: onClick,
         disabled: disabled,
         heading: loading
-      }, icon && React.createElement(OptionIcon, null, React.createElement(Icon, {
+      }, prefix, icon && React.createElement(OptionIcon, null, React.createElement(Icon, {
         kind: icon,
         disabled: disabled
       })), text || item);
     });
   }, [children, className, loading, multiple]);
+  useEffect(() => {
+    setVisibleGroups(formatOptions()); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options]);
   return React.createElement(React.Fragment, null, title, title && React.createElement(DividerLine, {
     style: {
       marginTop: 0
@@ -19627,7 +19703,7 @@ const DropdownComponent = _ref => {
   }, searchable && React.createElement(SearchInputContainer, {
     width: menuWidth ?? width,
     minWidth: menuMinWidth ?? width
-  }, React.createElement(Input, {
+  }, React.createElement(Input$1, {
     value: search,
     onChange: e => setSearch(e.target.value),
     placeholder: searchPlaceholder ?? "Найти",
@@ -20117,7 +20193,7 @@ const SearchFieldComponent = _ref => {
       onSearchRequest();
     }
   }, [onSearchRequest]);
-  return React.createElement(Input, Object.assign({
+  return React.createElement(Input$1, Object.assign({
     type: "text",
     placeholder: placeholder
   }, props, {
@@ -21128,7 +21204,7 @@ const InputComponent$1 = _ref => {
       marginLeft: "0.5rem"
     }
   }, selectedSuggestion == null ? void 0 : selectedSuggestion.prefix) : null;
-  return React.createElement(Input, Object.assign({
+  return React.createElement(Input$1, Object.assign({
     iconBefore: icon || prefix
   }, props));
 };
@@ -22334,7 +22410,7 @@ const ChipInputComponent = _ref => {
     }
   }, [changeChips, chipsProp, onChangeChips]);
   const chipOptions = createChipOptions();
-  return React.createElement(Container$3, null, React.createElement(RowFlex, null, React.createElement(Input, Object.assign({
+  return React.createElement(Container$3, null, React.createElement(RowFlex, null, React.createElement(Input$1, Object.assign({
     value: value,
     onChange: onChangeInput,
     onKeyPress: handleKeyPress,
@@ -23244,7 +23320,7 @@ const TimeComponent = _ref => {
       const hasSeparator = index !== array.length - 1;
       return React.createElement(InputsGroup, {
         key: `time-input-${index}`
-      }, React.createElement(Input, {
+      }, React.createElement(Input$1, {
         width: "2.6rem",
         label: !hasLabel ? "" : hasSeparator ? `${(timeLabelText || timeLabel)[key]} :` : (timeLabelText || timeLabel)[key],
         id: key,
@@ -25032,7 +25108,7 @@ const RangeNumberInputComponent = _ref => {
     anchor: ref => React.createElement(Anchor, {
       width: "100%",
       className: className
-    }, React.createElement(Input, {
+    }, React.createElement(Input$1, {
       innerRef: ref,
       label: label,
       width: "100%",
@@ -25242,7 +25318,7 @@ _ref => {
     case "int64":
     case "int32":
       if (fromTable && selectedOption != null && selectedOption.range) {
-        return React.createElement(Input, {
+        return React.createElement(Input$1, {
           label: label,
           width: "100%",
           iconBefore: prefix ?? renderMenu(options),
@@ -25286,7 +25362,7 @@ _ref => {
 
     case "string":
       if (fromTable && selectedOption != null && selectedOption.checkboxes) {
-        return React.createElement(Input, {
+        return React.createElement(Input$1, {
           label: label,
           width: "100%",
           iconBefore: prefix ?? renderMenu(options),
@@ -25324,7 +25400,7 @@ _ref => {
         },
         onBlur: () => onFilterChange(selectedOption, filterValue !== "" ? filterValue : null),
         active: active
-      }, !isDisabled ? renderClearButton : undefined) : React.createElement(Input, {
+      }, !isDisabled ? renderClearButton : undefined) : React.createElement(Input$1, {
         label: label,
         width: "100%",
         iconBefore: prefix ?? renderMenu(options),
@@ -28142,7 +28218,7 @@ const useObserveRect = () => {
 
     return () => rectObserver.current && rectObserver.current.unobserve();
   }, [node]);
-  const ref = useCallback(onSetNode, []);
+  const ref = useCallback(onSetNode, [onSetNode]);
   return [ref, rect];
 };
 
@@ -28373,41 +28449,48 @@ const TreeItems = styled.ul`
   } = _ref;
   return isExpanded ? "auto" : 0;
 }};
-  margin: 0 0 0 1.5rem;
+  margin: 0 0 0 0.5rem;
   padding: 0;
   list-style: none;
   overflow: hidden;
+  transition: max-height ${transition.hover};
 `;
-const TreeItem = styled.li`
-  margin-top: 1rem;
-`;
+const TreeItemWrapper = styled.li``;
 const TreeRow = /*#__PURE__*/styled(Flex)`
-  cursor: ${_ref2 => {
-  let {
-    hasChildren
-  } = _ref2;
-  return hasChildren ? "pointer" : "default";
-}};
   align-items: center;
-  line-height: 1.5rem;
-  ${_ref3 => {
+  min-height: 1.5rem;
+  ${_ref2 => {
   let {
     theme: {
       palette
     },
     disabled
-  } = _ref3;
+  } = _ref2;
   return disabled && `color: ${palette.textDisabled}`;
 }};
 
+  cursor: pointer;
+
+  &:hover {
+    border-radius: 0.25rem;
+    background-color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.palette.elementDeep;
+}};
+  }
+
   ${Icon} {
-    margin-right: 0.75rem;
+    width: 0.875rem;
+    height: 0.875rem;
+
+    &:after {
+      font-size: 0.875rem;
+    }
   }
 `;
-const ExpandButton = /*#__PURE__*/styled(Icon).attrs(props => ({
-  kind: "expand",
-  ...props
-}))`
+const TreeExpand = /*#__PURE__*/styled(Icon)`
   visibility: ${_ref4 => {
   let {
     hasChildren
@@ -28418,53 +28501,162 @@ const ExpandButton = /*#__PURE__*/styled(Icon).attrs(props => ({
   let {
     isExpanded
   } = _ref5;
-  return isExpanded ? "rotate(-180deg)" : "";
+  return isExpanded ? "" : "rotate(-90deg)";
 }};
   transition: transform ${transition.press};
+  width: 0.875rem;
+  height: 0.875rem;
+  margin-top: -0.125rem;
+  margin-right: 0.5rem;
+  cursor: pointer;
+
+  &:after {
+    font-size: 0.875rem;
+  }
 `;
 const TreeContent = /*#__PURE__*/styled(Flex)`
   align-items: center;
-`;
-const ItemIcon = /*#__PURE__*/styled(Icon)`
-  margin-left: 0.25rem;
+  gap: 0 0.25rem;
 `;
 const TreeText = styled.div`
-  margin-right: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: ${_ref6 => {
+  let {
+    isLeaf
+  } = _ref6;
+  return isLeaf ? "600" : "normal";
+}};
+  ${textOverflowEllipsisMixin}
 `;
 const TreeDescription = styled.div`
   margin-top: 2px;
-  margin-left: ${_ref6 => {
+  margin-left: ${_ref7 => {
   let {
     isFolder
-  } = _ref6;
+  } = _ref7;
   return isFolder ? "5.4" : "3.4";
 }}rem;
-  opacity: 0.54;
-  font-size: 14px;
+  color: ${_ref8 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref8;
+  return palette.textSecondary;
+}};
+  font-size: 0.75rem;
   font-weight: 400;
   width: 100%;
+
+  ${textOverflowEllipsisMixin}
+`;
+const LoadMoreButton = styled.button`
+  margin-top: 0.5rem;
+  margin-left: 3.4rem;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: 1px solid ${_ref9 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref9;
+  return palette.element;
+}};
+  border-radius: ${_ref10 => {
+  let {
+    theme: {
+      borderRadius
+    }
+  } = _ref10;
+  return borderRadius.small;
+}};
+  color: ${_ref11 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref11;
+  return palette.textSecondary;
+}};
+  font-size: 14px;
+  cursor: pointer;
+  transition: all ${transition.hover};
+
+  &:hover {
+    background-color: ${_ref12 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref12;
+  return palette.element;
+}};
+    border-color: ${_ref13 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref13;
+  return palette.primary;
+}};
+  }
+
+  &:active {
+    background-color: ${_ref14 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref14;
+  return palette.element;
+}};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const LoadingContainer = /*#__PURE__*/styled(Flex)`
+  margin-left: 3.4rem;
+  margin-top: 0.5rem;
+  align-items: center;
+  gap: 0.5rem;
+  color: ${_ref15 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref15;
+  return palette.textSecondary;
+}};
+  font-size: 14px;
 `;
 
-const TreeItem$1 = _ref => {
+const TreeItemComponent = _ref => {
   let {
     item,
-    hasChildren,
-    isChildExpanded,
+    parentItem,
+    isExpanded,
     isIndeterminate,
     isSelected,
     isDisabled,
-    chipValue,
     selectable,
-    expandIcon,
-    collapseIcon,
-    childIcon,
     renderTree,
-    onChange,
-    onClick
+    loadMoreText = "Загрузить еще",
+    withLoadMore,
+    onLoadMore,
+    onExpand,
+    onSelect,
+    onItemClick
   } = _ref;
   const {
     id,
     text,
+    isLeaf,
+    loading,
+    totalCount = 0,
     icon,
     children,
     description,
@@ -28473,57 +28665,129 @@ const TreeItem$1 = _ref => {
     className,
     selectable: itemSelectable = true,
     withTooltip,
-    onClick: onItemClick
+    onClick
   } = item;
-  return React.createElement(TreeItem, {
+  const hasChildren = (children == null ? void 0 : children.length) > 0 || isLeaf;
+  const onExpandClick = useCallback(event => {
+    event.stopPropagation();
+    onExpand(item, !isExpanded);
+  }, [id, onExpand, isExpanded]);
+  useEffect(() => {
+    if (isExpanded) {
+      // Notify on mount for partial load
+      onExpand(item, true, true);
+    }
+  }, []);
+  return React.createElement(TreeItemWrapper, {
     className: className
   }, React.createElement(TreeRow, {
-    onClick: onItemClick,
+    onClick: () => onClick ? onClick() : onItemClick == null ? void 0 : onItemClick(item),
     disabled: isDisabled,
     hasChildren: hasChildren
-  }, React.createElement(ExpandButton, {
-    isExpanded: isChildExpanded,
+  }, React.createElement(TreeExpand, {
+    kind: "expand",
+    isExpanded: isExpanded,
     hasChildren: hasChildren,
     disabled: isDisabled,
-    onClick: () => onClick(id, hasChildren)
+    onClick: onExpandClick
   }), selectable && itemSelectable && React.createElement(Checkbox, {
-    onChange: () => onChange(item),
+    onChange: () => onSelect == null ? void 0 : onSelect(item),
     checked: isSelected,
     indeterminate: isIndeterminate,
     disabled: isDisabled
   }), React.createElement(TreeContent, {
-    onClick: () => onClick(id, hasChildren)
-  }, (hasChildren ? expandIcon || collapseIcon : icon || childIcon) && !customIcon && React.createElement(ItemIcon, {
-    kind: hasChildren ? isChildExpanded ? expandIcon : collapseIcon : icon || childIcon
-  }), customIcon && icon, !withTooltip && React.createElement(TreeText, null, text), withTooltip && React.createElement(Tooltip, {
+    onClick: () => onExpand(item, !isExpanded)
+  }, (icon || isLeaf) && !customIcon && React.createElement(Icon, {
+    kind: icon ? icon : "folder_outline"
+  }), customIcon && customIcon, !withTooltip && React.createElement(TreeText, {
+    isLeaf: isLeaf
+  }, text), withTooltip && React.createElement(Tooltip, {
     arrow: true,
     content: text
   }, ref => React.createElement(TreeText, {
+    isLeaf: isLeaf,
     ref: ref
-  }, text)), !!chipValue && React.createElement(Chip, {
-    text: chipValue,
-    disabled: isDisabled
-  }), additionalInfo), description && React.createElement(TreeDescription, {
+  }, text)), additionalInfo), description && React.createElement(TreeDescription, {
     isFolder: hasChildren
-  }, description)), renderTree(children, isChildExpanded));
+  }, description)), renderTree(children, isExpanded, parentItem), loading && isExpanded && React.createElement(LoadingContainer, null, React.createElement(CircularProgress, {
+    diameter: 1
+  })), withLoadMore && isExpanded && !!totalCount && (children == null ? void 0 : children.length) < totalCount && React.createElement(LoadMoreButton, {
+    disabled: loading,
+    onClick: () => onLoadMore == null ? void 0 : onLoadMore(item)
+  }, loadMoreText));
+};
+
+const TreeItem = /*#__PURE__*/memo(TreeItemComponent);
+
+/**
+ * Рекурсивно находит элемент дерева по id
+ * @param items - массив элементов дерева
+ * @param id - id искомого элемента
+ * @returns найденный элемент или undefined, если элемент не найден
+ */
+const findTreeItemById = (items, id) => {
+  for (const item of items) {
+    var _item$children;
+
+    if (item.id === id) {
+      return item;
+    }
+
+    if ((_item$children = item.children) != null && _item$children.length) {
+      const found = findTreeItemById(item.children, id);
+
+      if (found) {
+        return found;
+      }
+    }
+  }
+
+  return undefined;
+};
+/**
+ * Рекурсивно заменяет элемент дерева по id
+ * @param items - массив элементов дерева
+ * @param id - id элемента для замены
+ * @param newItem - новый элемент или функция для обновления элемента
+ * @returns новый массив элементов дерева с замененным элементом
+ */
+
+const replaceTreeItemById = (items, id, newItem) => {
+  return items.map(item => {
+    var _item$children2;
+
+    if (item.id === id) {
+      return typeof newItem === "function" ? newItem(item) : newItem;
+    }
+
+    if ((_item$children2 = item.children) != null && _item$children2.length) {
+      return { ...item,
+        children: replaceTreeItemById(item.children, id, newItem)
+      };
+    }
+
+    return item;
+  });
 };
 
 const TreeComponent = _ref => {
   let {
     className,
     data = [],
+    setData,
+    loadNode,
+    loadMoreText,
     selectable,
     selected = [],
     expanded = [],
     allExpanded,
     allSelected,
-    childIcon = "next",
-    collapseIcon = "folder_outline",
-    expandIcon = "folder_outline",
     setExpanded,
     setSelected,
-    customChip,
-    Item = TreeItem$1
+    withLoadMore,
+    onItemClick,
+    onExpand,
+    Item = TreeItem
   } = _ref;
   const expand = useCallback(id => {
     const newExpanded = [...expanded];
@@ -28537,11 +28801,59 @@ const TreeComponent = _ref => {
 
     setExpanded && setExpanded(newExpanded);
   }, [expanded, setExpanded]);
-  const onClick = useCallback((id, hasChildren) => {
-    if (hasChildren) {
-      expand(id);
+  const onItemUpdate = useCallback((id, updateItem) => {
+    setData == null ? void 0 : setData(current => replaceTreeItemById(current, id, updateItem));
+  }, [setData]);
+  const onItemExpand = useCallback(async (item, isExpanded, onlyReload) => {
+    !onlyReload && expand(item.id);
+
+    if (item.isLeaf && (onlyReload || item.children === null) && loadNode) {
+      try {
+        onItemUpdate(item.id, currentItem => ({ ...currentItem,
+          loading: true
+        }));
+        const {
+          children,
+          totalCount
+        } = await loadNode(item);
+        onItemUpdate(item.id, currentItem => ({ ...currentItem,
+          children,
+          totalCount
+        }));
+      } finally {
+        onItemUpdate(item.id, currentItem => ({ ...currentItem,
+          loading: false
+        }));
+      }
+    }
+
+    onExpand == null ? void 0 : onExpand(item, isExpanded, onlyReload);
+  }, [expand, onExpand, onItemUpdate, loadNode]);
+  const onLoadMore = useCallback(async item => {
+    if (!loadNode) {
+      return;
     }
-  }, [expand]);
+
+    try {
+      var _item$children;
+
+      onItemUpdate(item.id, currentItem => ({ ...currentItem,
+        loading: true
+      }));
+      const {
+        children,
+        totalCount
+      } = await loadNode(item, (_item$children = item.children) == null ? void 0 : _item$children.length);
+      onItemUpdate(item.id, currentItem => ({ ...currentItem,
+        children: [...(currentItem.children || []), ...children],
+        totalCount
+      }));
+    } finally {
+      onItemUpdate(item.id, currentItem => ({ ...currentItem,
+        loading: false
+      }));
+    }
+  }, [loadNode, onItemUpdate]);
   const getChildren = useCallback(items => {
     if (!items) return [];
     return items.reduce((result, item) => {
@@ -28628,25 +28940,14 @@ const TreeComponent = _ref => {
 
     setSelected(newSelected);
   }, [getChildren, removeItem, selected, setSelected]);
-  const onChange = useCallback(parent => {
+  const onSelect = useCallback(parent => {
     if (getIsSomeSelected([parent])) {
       deselectChildren(parent);
     } else {
       selectChildren(parent);
     }
   }, [deselectChildren, getIsSomeSelected, selectChildren]);
-  const getChildrenChipsValue = useCallback(children => {
-    return children == null ? void 0 : children.reduce((result, item) => result + (Number(item.chip) || 0) + Number(getChildrenChipsValue(item == null ? void 0 : item.children) || 0), 0);
-  }, []);
-  const getChipValue = useCallback(_ref6 => {
-    let {
-      id,
-      chip,
-      children
-    } = _ref6;
-    return children != null && children.length && !customChip && !(expanded != null && expanded.includes(id)) ? getChildrenChipsValue(children) || Number(chip) || undefined : Number(chip) || undefined;
-  }, [expanded, getChildrenChipsValue, customChip]);
-  const renderTree = useCallback(function (items, isExpanded) {
+  const renderTree = useCallback(function (items, isExpanded, parentItem) {
     if (isExpanded === void 0) {
       isExpanded = true;
     }
@@ -28654,45 +28955,43 @@ const TreeComponent = _ref => {
     return !(items != null && items.length) ? null : React.createElement(TreeItems, {
       isExpanded: isExpanded
     }, items.map(item => {
-      var _getChipValue;
-
       const {
         id,
         children
       } = item;
-      const hasChildren = !!(children != null && children.length);
-      const isChildExpanded = expanded == null ? void 0 : expanded.includes(id);
+      const isExpanded = expanded == null ? void 0 : expanded.includes(id);
       const isIndeterminate = getIsIndeterminate(children);
       const isSelected = isIndeterminate || getIsSomeSelected([item]);
       const isDisabled = getIsDisabled(item);
-      const chipValue = (_getChipValue = getChipValue(item)) == null ? void 0 : _getChipValue.toString();
       return React.createElement(Item, {
         key: id,
+        parentItem: parentItem,
         item: item,
-        hasChildren: hasChildren,
-        isChildExpanded: isChildExpanded,
+        isExpanded: isExpanded,
         isIndeterminate: isIndeterminate,
         isSelected: isSelected,
         isDisabled: isDisabled,
-        chipValue: chipValue,
         selectable: selectable,
-        expandIcon: expandIcon,
-        collapseIcon: collapseIcon,
-        childIcon: childIcon,
+        loadMoreText: loadMoreText,
         renderTree: renderTree,
-        onChange: onChange,
-        onClick: onClick
+        onSelect: onSelect,
+        onExpand: onItemExpand,
+        onItemClick: onItemClick,
+        withLoadMore: withLoadMore,
+        onLoadMore: onLoadMore,
+        setData: setData,
+        onItemUpdate: onItemUpdate
       });
     }));
-  }, [expanded, getChipValue, getIsIndeterminate, getIsSomeSelected, getIsDisabled, selectable, expandIcon, collapseIcon, childIcon, onClick, onChange]);
+  }, [expanded, getIsIndeterminate, getIsSomeSelected, getIsDisabled, selectable, withLoadMore, onLoadMore, onItemClick, onSelect, onItemExpand, setData, onItemUpdate]);
   useEffect(() => {
     if (!data.length || !allExpanded && !allSelected) return;
     const newExpanded = [];
     const newSelected = [];
     getChildren(data).forEach(item => {
-      var _item$children;
+      var _item$children2;
 
-      if ((_item$children = item.children) != null && _item$children.length) {
+      if ((_item$children2 = item.children) != null && _item$children2.length) {
         newExpanded.push(item.id);
       } else if (!item.disabled) {
         newSelected.push(item.id);
@@ -31002,5 +31301,5 @@ const JSONEditorBase = _ref => {
 
 const JSONEditor = /*#__PURE__*/memo(JSONEditorBase);
 
-export { ActionButton, Actions, ActionsGroup, AdditionalInfo, AnchorContainer, AutoComplete, BaseButton, Blank, Box, ButtonsGroup, ButtonsGroupComponent, CSSTransition, Card, CardBodyContainer, Header$1 as CardHeader, ImageGradientOverlay as CardImageGradientOverlay, ImageOverlay as CardImageOverlay, CardLoader, Checkbox, CheckboxComponent, Chip, ChipAutoCompleDivider, ChipAutoCompleSlider, ChipAutoComplete, ChipAutoCompleteControlFlex, ChipAutoCompleteImagePlaceholder, ChipAutoCompleteItem, ChipAutoCompleteItemIcon, ChipAutoCompleteItemImage, ChipAutoCompleteMode, ChipAutoCompleteTags, ChipContainer, ChipInput, Circle, CircularProgress, Collapse, CollapseWrapper, ColorButton, ColorInput, ColorPicker, ComparisonOperator, Container$5 as Container, CustomButton, CustomToggle, DATE_FORMAT, DATE_TIME_FORMAT, DataGrid, DatePicker, Description, Dialog, DialogActions, DialogComponent, DialogContent, DialogOverlay, DialogTitle, Divider, DividerLine, DragAreaWrapper, DraggableTree, DraggableTreeContainer, DraggableTreeItem, DropHereTitle, Dropdown, DropdownContainer, DropdownField, ElementsArea, ExpandButton, Expander, FILE_SIZE_STEP, FadingIcon, FieldValue, FileExt, FileInfoComment, FileInfoName, FileInfoProgress, FileInfoTitle, FileSymbolContainer, FilterInput, FlatButton, Flex, FlexSpan, FocusTrap, GlobalsContainer, H1, H2, H3, H4, Handlers, HueMap, HueSlider, selection as IcoMoonSelection, Icon, IconButton, IconButtonButton, IconButtonInnerChild, IconMenu, IconToggle, IconToggleButton, IconToggleText, Image, ImageLoader, InjectGlobalStyles, Input, InputLabel, InputsGroup, InputsGroupContainer, InputsGroupELement, InputsGroupElements, InputsGroupLabel, ItemContainer, ItemIcon, JSONEditor, JSONEditorContainer, JSONEditorLinearProgress, JSONEditorWrapper, Label$2 as Label, LabeledTextarea, LeftSide, LegendToggler, LinearLoader, LinearProgress, Link, ListTransition, MAX_NUMBER, MB_FILE_SIZE, MIN_NUMBER, MaskedComponent, Menu, MenuContainer, Message, MultiSelectContainer, Notifications, NumberInput, NumberRangeContainer, NumberRangeInputContainer, NumberRangeSlider, NumberRangeSliderContainer, NumberRangeSliderLabel, OpacitySlider, Option, OptionContainer, OptionDescription, OptionIcon, OptionText, OptionValueContainer, OptionValueWrapper, PaginationFull, PaginationSimple, Paragraph, PasswordToggle, Placeholder, Popover, PopoverTransition, Popup$1 as Popup, Portal, Preview, Radio$1 as Radio, RadioGroup, RaisedButton, RangeDateInput, RangeDatePicker, RangeNumberInput, RangeSliderButtons, RangeSliderContainer, RatioLine, RegularIconButton, SEPARATED_TIME_FORMAT, SearchField, SearchInputContainer, SelectFromComputerTitle, SimpleInput, Slider, SliderContainer$2 as SliderContainer, HandleContainer as SliderHandle, Label$1 as SliderLabel, LowerTrackBackground as SliderLowerTrackBackground, SliderPopover, Track as SliderTrack, SortToggle, Spinner, Stepper, Switch, SwitchArea, SwitchContainer, SwitchTitle, Switcher, SymbolLibrary, SymbolPreview, THROTTLING_DELAY, TIME_FORMAT, TabBlock, TabContainer, TabContainerLine, Tabs, Text, TextTrim, Textarea, ThemeProvider, Tippy, TitleText, Tooltip, TooltipContent, Tree, TreeContainer, TreeContent, TreeDescription, TreeItem, TreeItems, TreeRow, TreeText, UnicodeBig, UnicodeSmall, Uploader, UploaderItemArea, UploaderItemsContainer, UploaderTitle, UploaderTitleContainer, UploaderTitleImage, UploaderTitleWrapper, ValueLink, WaitingButton, WaitingButtonComponent, WithLabelContainer, Wizard, addItem, borderRadius, buttonMixin, clamp, cloneWithRefs, collapseDuration, combineRefs, createColorOrMono, createIconColors, createLinkStates, createMessageColors, createTheme, createToggleStates, createVariants, cropLeftBorderRadius, cropRightBorderRadius, theme$1 as darkTheme, dateFormat, defaultOptions, defaultStub, theme as defaultTheme, fileSizeFormat, fonts, getChipColor, getColorOrMono, getHighlightParts, getIconColors, getLinkColors, getLocale, getMessageColors, getNumberFromPixels, getRealChildren, getTagColor, getTextWidth, getTheme, getToggleStates, getUnicodeFromString, getVariant, horizontalDivider, iconTypes, injectIcon, isDefined, isDescendant, isDomNode, isNumeric, isOutside, isReactDomElement, isReactElement, isSimpleStyledComponent, isTextFitElementWidth, isTouchDevice, isValidUrl, mapToSimpleOption, palette, photo, preventDefault, randomInteger, randomRgba, rangeValueFormat, removeItem, sendRefSafety, shadows, sortNumbers, stub, textOverflowEllipsisMixin, toNumber, toSimpleOption, transition, transparencyDark2, transparencyDark4, Transparency_dark8 as transparencyDark8, transparencyLight2, transparencyLight4, Transparency_light8 as transparencyLight8, typeId, urlify, useAsyncAutocomplete, useDelayedStyleLoader, useDialogShadow, useDragAndDropEffect, useEventListener, useForceUpdate, useMounted, useMutationObserver, usePrevValue, useStyleLoader, useTheme, useThrottling, useToggle, useUndraggableEffect, useUnselectableEffect, verticalDivider, withLabel };
+export { ActionButton, Actions, ActionsGroup, AdditionalInfo, AnchorContainer, AutoComplete, BaseButton, Blank, Box, ButtonsGroup, ButtonsGroupComponent, CSSTransition, Card, CardBodyContainer, Header$1 as CardHeader, ImageGradientOverlay as CardImageGradientOverlay, ImageOverlay as CardImageOverlay, CardLoader, Checkbox, CheckboxComponent, Chip, ChipAutoCompleDivider, ChipAutoCompleSlider, ChipAutoComplete, ChipAutoCompleteControlFlex, ChipAutoCompleteImagePlaceholder, ChipAutoCompleteItem, ChipAutoCompleteItemIcon, ChipAutoCompleteItemImage, ChipAutoCompleteMode, ChipAutoCompleteTags, ChipContainer, ChipInput, Circle, CircularProgress, Collapse, CollapseWrapper, ColorButton, ColorInput, ColorPicker, ComparisonOperator, Container$5 as Container, CustomButton, CustomToggle, DATE_FORMAT, DATE_TIME_FORMAT, DataGrid, DatePicker, Description, Dialog, DialogActions, DialogComponent, DialogContent, DialogOverlay, DialogTitle, Divider, DividerLine, DragAreaWrapper, DraggableTree, DraggableTreeContainer, DraggableTreeItem, DropHereTitle, Dropdown, DropdownContainer, DropdownField, ElementsArea, Expander, FILE_SIZE_STEP, FadingIcon, FieldValue, FileExt, FileInfoComment, FileInfoName, FileInfoProgress, FileInfoTitle, FileSymbolContainer, FilterInput, FlatButton, Flex, FlexSpan, FocusTrap, GlobalsContainer, H1, H2, H3, H4, Handlers, HueMap, HueSlider, selection as IcoMoonSelection, Icon, IconButton, IconButtonButton, IconButtonInnerChild, IconMenu, IconToggle, IconToggleButton, IconToggleText, Image, ImageLoader, InjectGlobalStyles, Input$1 as Input, InputsGroup, InputsGroupContainer, InputsGroupELement, InputsGroupElements, InputsGroupLabel, ItemContainer, JSONEditor, JSONEditorContainer, JSONEditorLinearProgress, JSONEditorWrapper, Label$2 as Label, LabeledTextarea, LeftSide, LegendToggler, LinearLoader, LinearProgress, Link, ListTransition, LoadMoreButton, LoadingContainer, MAX_NUMBER, MB_FILE_SIZE, MIN_NUMBER, MaskedComponent, Menu, MenuContainer, Message, MultiSelectContainer, Notifications, NumberInput, NumberRangeContainer, NumberRangeInputContainer, NumberRangeSlider, NumberRangeSliderContainer, NumberRangeSliderLabel, OpacitySlider, Option, OptionContainer, OptionDescription, OptionIcon, OptionText, OptionToggler, OptionValueContainer, OptionValueWrapper, PaginationFull, PaginationSimple, Paragraph, PasswordToggle, Placeholder, Popover, PopoverTransition, Popup$1 as Popup, Portal, Preview, Radio$1 as Radio, RadioGroup, RaisedButton, RangeDateInput, RangeDatePicker, RangeNumberInput, RatioLine, RegularIconButton, SEPARATED_TIME_FORMAT, SearchField, SearchInputContainer, SelectFromComputerTitle, SimpleInput, Slider, SliderContainer$2 as SliderContainer, HandleContainer as SliderHandle, Label$1 as SliderLabel, LowerTrackBackground as SliderLowerTrackBackground, SliderPopover, Track as SliderTrack, SortToggle, Spinner, Stepper, Switch, SwitchArea, SwitchContainer, SwitchTitle, Switcher, SymbolLibrary, SymbolPreview, THROTTLING_DELAY, TIME_FORMAT, TabBlock, TabContainer, TabContainerLine, Tabs, Text, TextTrim, Textarea, ThemeProvider, Tippy, TitleText, Tooltip, TooltipContent, Tree, TreeContainer, TreeContent, TreeDescription, TreeExpand, TreeItem, TreeItemWrapper, TreeItems, TreeRow, TreeText, UnicodeBig, UnicodeSmall, Uploader, UploaderItemArea, UploaderItemsContainer, UploaderTitle, UploaderTitleContainer, UploaderTitleImage, UploaderTitleWrapper, ValueLink, WaitingButton, WaitingButtonComponent, WithLabelContainer, Wizard, addItem, borderRadius, buttonMixin, clamp, cloneWithRefs, collapseDuration, combineRefs, createColorOrMono, createIconColors, createLinkStates, createMessageColors, createTheme, createToggleStates, createVariants, cropLeftBorderRadius, cropRightBorderRadius, theme$1 as darkTheme, dateFormat, defaultOptions, defaultStub, theme as defaultTheme, fileSizeFormat, findTreeItemById, fonts, getChipColor, getColorOrMono, getHighlightParts, getIconColors, getLinkColors, getLocale, getMessageColors, getNumberFromPixels, getRealChildren, getTagColor, getTextWidth, getTheme, getToggleStates, getUnicodeFromString, getVariant, horizontalDivider, iconTypes, injectIcon, isDefined, isDescendant, isDomNode, isNumeric, isOutside, isReactDomElement, isReactElement, isSimpleStyledComponent, isTextFitElementWidth, isTouchDevice, isValidUrl, mapToSimpleOption, palette, photo, preventDefault, randomInteger, randomRgba, rangeValueFormat, removeItem, replaceTreeItemById, sendRefSafety, shadows, sortNumbers, stub, textOverflowEllipsisMixin, toNumber, toSimpleOption, transition, transparencyDark2, transparencyDark4, Transparency_dark8 as transparencyDark8, transparencyLight2, transparencyLight4, Transparency_light8 as transparencyLight8, typeId, urlify, useAsyncAutocomplete, useDelayedStyleLoader, useDialogShadow, useDragAndDropEffect, useEventListener, useForceUpdate, useMounted, useMutationObserver, usePrevValue, useStyleLoader, useTheme, useThrottling, useToggle, useUndraggableEffect, useUnselectableEffect, verticalDivider, withLabel };
 //# sourceMappingURL=uilib-gl.esm.js.map