@evergis/uilib-gl 1.0.77 → 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';
@@ -11152,638 +11152,161 @@ 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;
 }};
-  }
-
-  &::placeholder {
-    color: ${_ref8 => {
+  color: ${_ref2 => {
   let {
     theme: {
-      input
-    }
-  } = _ref8;
-  return input.placeholderColor;
+      link
+    },
+    ...props
+  } = _ref2;
+  return link.color[getLinkColors(props)];
 }};
-  }
+  cursor: pointer;
 
-  &[disabled] {
-    pointer-events: none;
-    color: ${_ref9 => {
+  &:hover {
+    color: ${_ref3 => {
   let {
     theme: {
-      input
-    }
-  } = _ref9;
-  return input.disabledColor;
+      link
+    },
+    ...props
+  } = _ref3;
+  return link.hoverColor[getLinkColors(props)];
 }};
-    border: 0.0635rem dashed ${_ref10 => {
+  }
+
+  &:active {
+    color: ${_ref4 => {
   let {
     theme: {
-      input
-    }
-  } = _ref10;
-  return input.disabledBorderColor;
+      link
+    },
+    ...props
+  } = _ref4;
+  return link.activeColor[getLinkColors(props)];
 }};
+  }
 
-    &::placeholder {
-      color: ${_ref11 => {
+  &:visited {
+    color: ${_ref5 => {
   let {
     theme: {
-      input
+      link
     }
-  } = _ref11;
-  return input.disabledPlaceholderColor;
+  } = _ref5;
+  return link.visitedColor;
 }};
-    }
   }
 `;
-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 => {
+const ValueLink = styled.a`
+  color: ${_ref6 => {
   let {
-    paddingRight
-  } = _ref12;
-  return `${paddingRight || 0}rem`;
-}} 0 0.5rem;
+    theme: {
+      link
+    }
+  } = _ref6;
+  return link.color.primary;
+}};
+  text-decoration: none;
 `;
-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 InputContainer = styled.span`
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: ${_ref => {
-  let {
-    width
-  } = _ref;
-  return width;
-}};
-
-  ${_ref2 => {
-  let {
-    active,
-    theme: {
-      input
-    }
-  } = _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: {
-      input
-    },
-    error
-  } = _ref3;
-  return !active && (error ? input.error : input.hoverBorderColor);
-}};
-
-      &:focus {
-        outline: none;
-        border-color: ${_ref4 => {
-  let {
-    theme: {
-      input
-    },
-    error
-  } = _ref4;
-  return error ? input.error : input.active;
-}};
-      }
-    }
-  }
-
-  &[disabled] {
-    pointer-events: none;
-  }
-
-  ${ChipInputHolder} {
-    border-color: ${_ref5 => {
-  let {
-    active,
-    theme: {
-      input
-    }
-  } = _ref5;
-  return active && input.active;
-}};
-  }
-`;
-
-const IconButtonInnerChild = styled.span``;
-const buttonActiveMixin = css`
-  background: ${_ref => {
-  let {
-    theme: {
-      palette
-    }
-  } = _ref;
-  return palette.element;
-}};
-
-  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};
-
-    > ${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 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;
-}};
-
-  &: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: {
-      iconButton
-    }
-  } = _ref6;
-  return iconButton.disabledColor;
-}};
-    }
-    pointer-events: none;
-  }
-`;
-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)];
-}};
-  }
-
-  &:active > ${Icon}, &:active > ${IconButtonInnerChild} {
-    color: ${_ref8 => {
-  let {
-    theme: {
-      iconButton
-    },
-    ...props
-  } = _ref8;
-  return iconButton.activeColor[getIconColors(props)];
-}};
-  }
-
-  ${Icon}, ${IconButtonInnerChild} {
-    color: ${_ref9 => {
-  let {
-    theme: {
-      iconButton
-    },
-    ...props
-  } = _ref9;
-  return iconButton.color[getIconColors(props)];
-}};
-  }
-
-  ${IconButtonInnerChild} {
-    margin: ${_ref10 => {
-  let {
-    iconRight
-  } = _ref10;
-  return iconRight ? "0 0.5rem 0 0" : "0 0 0 0.5rem";
-}};
-  }
-
-  ${buttonMixin};
-`;
-
-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 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 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;
-
-    case "de":
-      return de;
-
-    default:
-      return Locale;
-  }
-};
-
-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 {
-    theme: {
-      fonts
-    },
-    description
-  } = _ref;
-  return description ? fonts.description : fonts.standard;
-}};
-  color: ${_ref2 => {
-  let {
-    theme: {
-      link
-    },
-    ...props
-  } = _ref2;
-  return link.color[getLinkColors(props)];
-}};
-  cursor: pointer;
-
-  &:hover {
-    color: ${_ref3 => {
-  let {
-    theme: {
-      link
-    },
-    ...props
-  } = _ref3;
-  return link.hoverColor[getLinkColors(props)];
-}};
-  }
-
-  &:active {
-    color: ${_ref4 => {
-  let {
-    theme: {
-      link
-    },
-    ...props
-  } = _ref4;
-  return link.activeColor[getLinkColors(props)];
-}};
-  }
-
-  &:visited {
-    color: ${_ref5 => {
-  let {
-    theme: {
-      link
-    }
-  } = _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 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
 
@@ -12245,249 +11768,31 @@ const tippyMixin = css`
     &[data-state="visible"] {
       transform: ${`translateX(-${cornerSize}) scale(1)`};
     }
-
-    &[data-state="hidden"] {
-      transform: translateX(0) scale(0);
-    }
-
-    .tippy-arrow {
-      right: 0;
-      transform: translate(100%, 50%) !important;
-      border-top: ${cornerSize} solid transparent;
-      border-bottom: ${cornerSize} solid transparent;
-      border-left: ${`${cornerSize} solid ${darkBg}`};
-    }
-
-    &[data-theme="light"] .tippy-arrow {
-      border-left: ${`${cornerSize} solid ${lightBg}`};
-    }
-  }
-`;
-
-const Tooltip = /*#__PURE__*/styled(Tippy).attrs(props => ({
-  dark: true,
-  ...props
-}))`
-  ${tippyMixin}
-`;
-
-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 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
+
+    &[data-state="hidden"] {
+      transform: translateX(0) scale(0);
     }
-  } = _ref2;
-  return fonts.description;
-}};
 
-  &[disabled] {
-    pointer-events: none;
-    color: ${_ref3 => {
-  let {
-    theme: {
-      input
+    .tippy-arrow {
+      right: 0;
+      transform: translate(100%, 50%) !important;
+      border-top: ${cornerSize} solid transparent;
+      border-bottom: ${cornerSize} solid transparent;
+      border-left: ${`${cornerSize} solid ${darkBg}`};
+    }
+
+    &[data-theme="light"] .tippy-arrow {
+      border-left: ${`${cornerSize} solid ${lightBg}`};
     }
-  } = _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 Tooltip = /*#__PURE__*/styled(Tippy).attrs(props => ({
+  dark: true,
+  ...props
+}))`
+  ${tippyMixin}
+`;
 
 const WithLabelContainer = styled.div`
   width: ${_ref => {
@@ -12511,6 +11816,7 @@ const Asterisk = styled.span`
   } = _ref2;
   return palette.error;
 }};
+
   :before {
     content: "*";
   }
@@ -13683,179 +12989,615 @@ const Image = /*#__PURE__*/memo(_ref => {
   }, restProps));
 });
 
-const Message = styled.div`
-  padding: 1em;
-  background-color: ${_ref => {
+const Message = styled.div`
+  padding: 1em;
+  background-color: ${_ref => {
+  let {
+    theme: {
+      message
+    },
+    ...props
+  } = _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;
+}};
+  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 Paragraph = styled.p`
+  margin: 0 0 0.5rem;
+  font: ${_ref => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref;
+  return fonts.standard;
+}};
+  color: ${_ref2 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref2;
+  return palette.textPrimary;
+}};
+`;
+
+const H4 = styled.h4`
+  font: ${_ref => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref;
+  return fonts.standard;
+}};
+  color: ${_ref2 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref2;
+  return palette.textPrimary;
+}};
+`;
+const H3 = styled.h3`
+  font: ${_ref3 => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref3;
+  return fonts.subtitle;
+}};
+  color: ${_ref4 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref4;
+  return palette.textPrimary;
+}};
+`;
+const H2 = styled.h2`
+  font: ${_ref5 => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref5;
+  return fonts.h2;
+}};
+  color: ${_ref6 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref6;
+  return palette.textPrimary;
+}};
+`;
+const H1 = styled.h1`
+  font: ${_ref7 => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref7;
+  return fonts.h1;
+}};
+  color: ${_ref8 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref8;
+  return palette.textPrimary;
+}};
+`;
+const Description = styled.div`
+  font: ${_ref9 => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref9;
+  return fonts.description;
+}};
+  color: ${_ref10 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref10;
+  return palette.textSecondary;
+}};
+`;
+const textOverflowEllipsisMixin = `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+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 {
-    theme: {
-      message
-    },
-    ...props
+    paddingRight
   } = _ref;
-  return message.backgroundColor[getMessageColors(props)];
-}};
-  border: 0.0625rem solid ${_ref2 => {
+  return `${paddingRight || 0}px`;
+}} 0.34375rem
+    ${_ref2 => {
   let {
-    theme: {
-      message
-    },
-    ...props
+    extraLeftPaddingWidth
   } = _ref2;
-  return message.borderColor[getMessageColors(props)];
+  return extraLeftPaddingWidth ? `${(extraLeftPaddingWidth ?? 0) + 8}px` : "0.5rem";
 }};
-  border-radius: ${_ref3 => {
+  width: 100%;
+  background: transparent;
+  border: 0.0625rem solid ${_ref3 => {
   let {
+    error,
     theme: {
-      borderRadius
+      input
     }
   } = _ref3;
-  return borderRadius.medium;
+  return error ? input.error : input.borderColor;
 }};
-  font: ${_ref4 => {
+  border-radius: ${_ref4 => {
   let {
     theme: {
-      fonts
+      borderRadius
     }
   } = _ref4;
-  return fonts.standard;
+  return borderRadius.medium;
 }};
+  box-sizing: border-box;
   color: ${_ref5 => {
   let {
     theme: {
-      message
-    },
-    ...props
+      input
+    }
   } = _ref5;
-  return message.color[getMessageColors(props)];
+  return input.color;
 }};
-  text-align: ${_ref6 => {
+  font: ${_ref6 => {
   let {
-    textRight,
-    textCenter
+    theme: {
+      fonts
+    }
   } = _ref6;
-  return textRight ? "right" : textCenter ? "center" : "left";
+  return fonts.standard;
 }};
 
-  > * {
-    color: inherit;
+  ${IconBefore} + & {
+    padding-left: 2rem;
   }
-`;
 
-const Paragraph = styled.p`
-  margin: 0 0 0.5rem;
-  font: ${_ref => {
+  &:focus {
+    outline: none;
+    border-color: ${_ref7 => {
   let {
+    error,
     theme: {
-      fonts
+      input
+    }
+  } = _ref7;
+  return error ? input.error : input.active;
+}};
+  }
+
+  &::placeholder {
+    color: ${_ref8 => {
+  let {
+    theme: {
+      input
+    }
+  } = _ref8;
+  return input.placeholderColor;
+}};
+  }
+
+  &[disabled] {
+    pointer-events: none;
+    color: ${_ref9 => {
+  let {
+    theme: {
+      input
+    }
+  } = _ref9;
+  return input.disabledColor;
+}};
+    border: 0.0635rem dashed ${_ref10 => {
+  let {
+    theme: {
+      input
+    }
+  } = _ref10;
+  return input.disabledBorderColor;
+}};
+
+    &::placeholder {
+      color: ${_ref11 => {
+  let {
+    theme: {
+      input
     }
+  } = _ref11;
+  return input.disabledPlaceholderColor;
+}};
+    }
+  }
+`;
+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 InputContainer = styled.span`
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: ${_ref => {
+  let {
+    width
   } = _ref;
-  return fonts.standard;
+  return width;
 }};
-  color: ${_ref2 => {
+
+  ${_ref2 => {
   let {
+    active,
     theme: {
-      palette
+      input
     }
   } = _ref2;
-  return palette.textPrimary;
+  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: {
+      input
+    },
+    error
+  } = _ref3;
+  return !active && (error ? input.error : input.hoverBorderColor);
+}};
+
+      &:focus {
+        outline: none;
+        border-color: ${_ref4 => {
+  let {
+    theme: {
+      input
+    },
+    error
+  } = _ref4;
+  return error ? input.error : input.active;
+}};
+      }
+    }
+  }
+
+  &[disabled] {
+    pointer-events: none;
+  }
+
+  ${ChipInputHolder} {
+    border-color: ${_ref5 => {
+  let {
+    active,
+    theme: {
+      input
+    }
+  } = _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;
-}};
-  color: ${_ref4 => {
-  let {
-    theme: {
-      palette
+  return hasBg ? palette.elementDark : "none";
+}};
+    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",
@@ -13936,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
 }))``;
@@ -14092,7 +13834,7 @@ const Label = styled.label`
     pointer-events: none;
   }
 
-  ${Input$1}:checked + ${Box} ${Border} {
+  ${Input}:checked + ${Box} ${Border} {
     fill: ${_ref5 => {
   let {
     theme: {
@@ -14104,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: {
@@ -14115,7 +13857,7 @@ const Label = styled.label`
 }};
   }
 
-  ${Input$1}[disabled] + ${Box} ${Border} {
+  ${Input}[disabled] + ${Box} ${Border} {
     fill: ${_ref7 => {
   let {
     theme: {
@@ -14126,7 +13868,7 @@ const Label = styled.label`
 }};
   }
 
-  ${Input$1}:checked[disabled] + ${Box} ${Border} {
+  ${Input}:checked[disabled] + ${Box} ${Border} {
     fill: transparent;
   }
 
@@ -14141,7 +13883,7 @@ const Label = styled.label`
 }};
   }
 
-  &:hover > ${Input$1}:checked + ${Box} ${BoxFill} {
+  &:hover > ${Input}:checked + ${Box} ${BoxFill} {
     fill: ${_ref9 => {
   let {
     theme: {
@@ -14152,7 +13894,7 @@ const Label = styled.label`
 }};
   }
 
-  ${Input$1}:checked + ${Box} ${BoxFill} {
+  ${Input}:checked + ${Box} ${BoxFill} {
     fill: ${_ref10 => {
   let {
     theme: {
@@ -14170,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: {
@@ -14181,7 +13923,7 @@ const Label = styled.label`
 }};
   }
 
-  ${Input$1}:checked + ${Box} ${Check} {
+  ${Input}:checked + ${Box} ${Check} {
     opacity: ${_ref12 => {
   let {
     indeterminate
@@ -14196,7 +13938,7 @@ const Label = styled.label`
 }}; // appear
   }
 
-  ${Input$1}:checked + ${Box} ${Square} {
+  ${Input}:checked + ${Box} ${Square} {
     opacity: ${_ref14 => {
   let {
     indeterminate
@@ -14239,32 +13981,175 @@ const Svg = /*#__PURE__*/styled.svg.attrs(() => ({
 
 const CheckboxComponent = _ref => {
   let {
-    label,
-    indeterminate,
-    labelLeft,
-    onClick,
-    className,
-    title,
+    label,
+    indeterminate,
+    labelLeft,
+    onClick,
+    className,
+    title,
+    ...props
+  } = _ref;
+  return React.createElement(Label, {
+    disabled: props.disabled,
+    labelLeft: labelLeft,
+    onClick: onClick,
+    className: className,
+    indeterminate: indeterminate,
+    title: title
+  }, label && labelLeft && React.createElement(LabelText, {
+    labelLeft: true
+  }, 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
+  }), React.createElement(Square, {
+    indeterminate: indeterminate
+  }))), label && !labelLeft && React.createElement(LabelText, null, label));
+};
+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;
-  return React.createElement(Label, {
-    disabled: props.disabled,
-    labelLeft: labelLeft,
-    onClick: onClick,
-    className: className,
-    indeterminate: indeterminate,
-    title: title
-  }, label && labelLeft && React.createElement(LabelText, {
-    labelLeft: true
-  }, label), React.createElement(Input$1, 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
-  }), React.createElement(Square, {
-    indeterminate: indeterminate
-  }))), label && !labelLeft && React.createElement(LabelText, null, label));
+  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 Checkbox = /*#__PURE__*/memo(CheckboxComponent);
+
+const Chip = /*#__PURE__*/memo(ChipComponent);
 
 const scale = 32;
 
@@ -14515,6 +14400,122 @@ const ColorButton = _ref7 => {
   }));
 };
 
+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;
   width: 12.625rem;
@@ -18780,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 => {
@@ -18879,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) {
@@ -18911,6 +18950,7 @@ const OptionComponent = _ref => {
     value,
     text,
     icon,
+    prefix,
     disabled,
     description,
     primary,
@@ -18955,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, {
@@ -18974,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 {
@@ -19009,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
 
@@ -19058,6 +19115,7 @@ const MenuComponent = _ref => {
         text,
         value,
         icon,
+        prefix,
         onClick,
         synthKey,
         disabled
@@ -19069,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
@@ -19642,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 ?? "Найти",
@@ -20132,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, {
@@ -21143,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));
 };
@@ -22349,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,
@@ -22516,7 +22577,7 @@ const useWindowResize = (callback, delay) => {
   }, [debounceCallback]);
 };
 
-if(typeof document!=="undefined")document.head.appendChild(document.createElement("style")).textContent="/*!\n * SlickGrid Alpine Theme\n * (c) 2009-2016 Michael Leibman\n * michael{dot}leibman{at}gmail{dot}com\n * original project: https://github.com/mleibman/slickgrid\n * project forked as: https://github.com/6pac/slickgrid\n *\n * Distributed under MIT license.\n * All rights reserved.\n */@keyframes fade{0%,to{background:none}50%{background:var(--alpine-row-highlight-fade-animation,1s linear)}}#myGrid,.slick-container{background-color:var(--alpine-grid-bgcolor,#fff);border-color:var(--alpine-border-color,#dae1e7);border-radius:var(--alpine-border-radius,0);border-style:solid;border-width:var(--alpine-border-width,1px);box-sizing:border-box;color:var(--alpine-font-color,#181d1f);font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-font-size,13px)}#myGrid.bottom-rounded,.slick-container.bottom-rounded{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}#myGrid .text-center,.slick-container .text-center{text-align:center}.slick-viewport{background-color:var(--alpine-bg-color,#fff)}.slick-viewport .grid-canvas{outline:0;position:relative}.slick-range-decorator{border:var(--alpine-range-border,3px solid #000);cursor:cell;z-index:9999}.slick-row.slick-state-active,.slick-row.ui-widget-content{border:0;position:absolute;width:100%}.slick-row.slick-state-active{background:var(--alpine-cell-selected-bg-color,#d4ebfd)}.slick-row .selected{background-color:var(--alpine-cell-selected-bg-color,#d4ebfd);color:var(--alpine-cell-selected-color,#181d1f);z-index:10}.slick-row.odd{background-color:var(--alpine-odd-row-color,#fbfbfb)}.slick-row:hover{background-color:var(--alpine-row-mouse-hover-color,#e8f4fe)}.slick-row.highlight-animate{animation:fade var(--alpine-row-highlight-fade-animation,1s linear);background:var(--alpine-row-highlight-background-color,#d9edfd)!important}.slick-groupby-remove{padding-right:10px}.slick-group{background-color:var(--alpine-header-bg-color,#f8f8f8);border-bottom:2px solid var(--alpine-border-color,#dae1e7)}.slick-group .slick-cell{padding-left:4px;padding-right:4px;text-align:left!important}.slick-group-toggle{background-color:currentColor;color:inherit;cursor:pointer;display:inline-block;font-size:18px;height:1em;margin-right:5px;opacity:var(--alpine-group-icon-opacity,.8);width:1em}.slick-group-toggle.expanded{--alpine-group-expanded-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-group-expanded-icon-svg) no-repeat;mask:var(--alpine-group-expanded-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.slick-group-toggle.collapsed{--alpine-group-collapsed-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-group-collapsed-icon-svg) no-repeat;mask:var(--alpine-group-collapsed-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.slick-group-totals{background:var(--alpine-bg-color,#fff);color:var(--alpine-font-color,#181d1f)}.slick-group-toggle-all{background-color:currentColor;color:inherit;cursor:pointer;display:inline-block;font-size:18px;height:1em;margin-right:5px;opacity:var(--alpine-group-icon-opacity,.8);width:1em}.slick-group-toggle-all.collapsed{--alpine-group-collapsed-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-group-collapsed-icon-svg) no-repeat;mask:var(--alpine-group-collapsed-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.slick-group-toggle-all.expanded{--alpine-group-expanded-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-group-expanded-icon-svg) no-repeat;mask:var(--alpine-group-expanded-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.slick-cell{align-items:var(--alpine-cell-align-items,center);border-color:var(--alpine-cell-border-color,#dae1e7);border-radius:var(--alpine-cell-border-radius,0);border-style:solid;border-width:var(--alpine-cell-border-width,0 0 1px 0);cursor:default;display:var(--alpine-cell-display,block);justify-content:var(--alpine-cell-justify-content,flex-start);margin:0;min-width:0;overflow:hidden;padding:var(--alpine-cell-padding,2px 4px);position:absolute;text-overflow:var(--alpine-cell-text-overflow,ellipsis);vertical-align:middle;white-space:nowrap;z-index:1}.slick-cell.selected{background-color:var(--alpine-cell-selected-bg-color,#d4ebfd);color:var(--alpine-cell-selected-color,#181d1f)}.slick-cell.selected span a{color:#fff}.slick-cell.active{box-shadow:var(--alpine-cell-active-box-shadow,inset 0 0 0 1px #5da6e3)}.slick-cell.highlighted{background:#87cefa;background:rgba(0,0,255,.2);transition:all .5s}.slick-cell.flashing{border:1px solid red}.slick-cell.editable{border-style:solid;overflow:visible;z-index:11}.slick-cell:focus{outline:none}.slick-selection{border:2px dashed #000;position:absolute;z-index:10}.slick-header{background-color:var(--alpine-header-bg-color,#f8f8f8);border-bottom:1px solid var(--alpine-border-color,#dae1e7);color:var(--alpine-header-color,#181d1f);font-weight:var(--alpine-header-font-weight,bold)}.slick-header.slick-state-default{border-left:0;overflow:hidden;width:100%}.grid-header{background-color:var(--alpine-header-bg-color,#f8f8f8);border-color:var(--alpine-top-header-border-color,#dae1e7);border-style:solid;border-width:var(--alpine-top-header-border-width,1px 1px 0 1px);box-sizing:border-box;font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-top-header-font-size,15px);font-weight:var(--alpine-top-header-font-weight,bold);height:35px;padding:var(--alpine-top-header-padding,8px 6px 0 8px)}.slick-resizable-handle{border:0;box-shadow:var(--alpine-header-resizable-handle-box-shadow,inset 0 0 0 1px #dde2eb);cursor:col-resize;display:block;font-size:.1px;height:var(--alpine-header-resizable-handle-height,50%);position:absolute;right:0;top:var(--alpine-header-resizable-handle-top,25%);width:2px}.slick-reorder-guide,.slick-reorder-proxy{background:blue;display:inline-block}.slick-reorder-proxy{cursor:move;filter:alpha(opacity=15);opacity:.15}.slick-reorder-guide{filter:alpha(opacity=70);height:2px;opacity:.7}.slick-preheader-panel .slick-header-column,.slick-topheader-panel .slick-header-column{border-color:var(--alpine-preheader-border-color,#dae1e7);border-style:solid;border-width:var(--alpine-preheader-border-width,0)}.slick-header-column-active .slick-header-menubutton,.slick-header-column:hover>.slick-header-menubutton{display:inline-block}.slick-header-column{align-items:var(--alpine-header-align-items,flex-start);border-color:var(--alpine-header-border-color,#dae1e7);border-style:solid;border-width:var(--alpine-header-border-width,0);display:var(--alpine-header-display,inline-flex);height:var(--alpine-header-column-height,calc(23px*var(--alpine-header-name-row-count, 1)));justify-content:var(--alpine-header-justify-content,flex-start);line-height:var(--alpine-header-column-line-height,23px);margin:0;overflow:hidden;padding:4px;position:relative;vertical-align:var(--alpine-header-vertical-align,top);white-space:pre-wrap}.slick-header-column .slick-header-menubutton{background-color:var(--alpine-header-bg-color,#f8f8f8);background-image:none;bottom:0;cursor:pointer;display:none;position:absolute;right:0;top:0;width:var(--alpine-header-menubutton-width,18px)}.slick-header-column .slick-header-menubutton .caret{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px dashed;display:inline-block;height:0;margin-left:4px;margin-top:7px;vertical-align:middle;width:0}.slick-header-column .slick-header-menubutton.filtered{color:var(--alpine-header-menubutton-filtered-color,#3490dc)}.slick-header-column .slick-sort-indicator,.slick-header-column .slick-sort-indicator-numbered{color:var(--alpine-sort-indicator-color,#3490dc);-webkit-user-select:none;-moz-user-select:none;user-select:none}.slick-header-column .slick-sort-indicator{background-image:none;border-left:4px solid transparent;border-right:4px solid transparent;display:inline-block;height:0;margin:var(--alpine-sort-indicator-margin,5px 0 0 3px);vertical-align:middle;width:0}.slick-header-column .slick-sort-indicator-asc{border-bottom:4px dashed}.slick-header-column .slick-sort-indicator-desc{border-top:4px dashed}.slick-header-column .slick-sort-indicator-numbered{font-size:var(--alpine-sort-numbered-font-size,10px)}.slick-header-column.unorderable{background-color:var(--alpine-header-unorderable-bg-color,#f0f0f0)}.slick-header-columns{cursor:default;margin:0;overflow:hidden;padding:0;position:relative;white-space:nowrap}.slick-header-columns .slick-state-hover{background:var(--alpine-header-name-hover-bg-color,hsla(0,0%,74%,.267))}.slick-column-name,.slick-sort-indicator{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.slick-column-name{display:var(--alpine-header-name-display,block);flex-grow:var(--alpine-header-name-flex-grow,0);overflow:var(--alpine-header-name-overflow,hidden);text-overflow:var(--alpine-header-name-text-overflow,ellipsis);white-space:nowrap}.slick-footerrow,.slick-headerrow{background-color:var(--alpine-header-footer-bg-color,#fff);position:relative}.slick-footerrow.slick-state-default,.slick-headerrow.slick-state-default{border-left:0;overflow:hidden;width:100%}.slick-footerrow-columns,.slick-headerrow-columns{cursor:default;overflow:hidden;position:relative;white-space:nowrap}.slick-headerrow-columns{background-color:var(--alpine-headerrow-bg-color,#f8fafc);border-bottom:1px solid var(--alpine-border-color,#dae1e7);text-align:center}.slick-footerrow-column,.slick-headerrow-column{cursor:default;padding:4px;position:absolute;vertical-align:middle;white-space:nowrap;z-index:1}.slick-footerrow-column{border-color:var(--alpine-footerrow-border-color,#dae1e7);border-radius:var(--alpine-footerrow-border-radius,0);border-style:solid;border-width:var(--alpine-footerrow-border-width,1px 1px 1px 0);float:left;font-size:var(--alpine-footerrow-font-size,12px);line-height:20px;margin:0;overflow:ellipsis}.slick-headerrow-column{box-sizing:border-box;height:100%;overflow:hidden}.slick-headerrow-column input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;box-sizing:border-box;color:var(--alpine-font-color,#181d1f);height:100%;width:100%}.slick-header-menu{background:var(--alpine-header-bg-color,#f8f8f8);border:1px solid var(--alpine-border-color,#dae1e7);border-bottom-left-radius:var(--alpine-border-radius,0);border-bottom-right-radius:var(--alpine-border-radius,0);box-shadow:0 2px 4px 0 rgba(0,0,0,.1);color:var(--alpine-font-color,#181d1f);cursor:default;display:inline-block;font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-font-size,13px);margin:0;min-width:175px;padding:4px!important;position:absolute;z-index:100000}.slick-header-menu label{font-weight:400}.slick-header-menu button{border:1px solid transparent;border-radius:.25rem;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:var(--alpine-font-size,13px);font-weight:400;line-height:1.428571429;margin:2px;outline:0;overflow:visible;padding:6px 14px;text-align:center;text-transform:none;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.slick-header-menu button,.slick-header-menu button:hover{background-color:transparent;color:var(--alpine-font-color,#181d1f)}.slick-header-menu button:hover{border-color:var(--alpine-border-color,#dae1e7)}.slick-header-menu button.active.focus,.slick-header-menu button.active:focus,.slick-header-menu button.active:hover,.slick-header-menu button:active.focus,.slick-header-menu button:active:focus,.slick-header-menu button:active:hover{background-color:transparent;border-color:var(--alpine-border-color,#dae1e7);color:var(--alpine-font-color,#181d1f)}.slick-header-menu input.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;color:var(--alpine-font-color,#181d1f);padding:.5rem .75rem;width:100%}.slick-header-menu .filter,.slick-header-menu input.input{border:1px solid var(--alpine-border-color,#dae1e7);border-radius:.25rem}.slick-header-menu .filter{background:var(--alpine-bg-color,#fff);height:200px;margin-bottom:5px;margin-top:5px;max-height:200px;max-width:300px;overflow:scroll;padding:4px;white-space:nowrap}.slick-header-menu .filter label{display:block;font-size:var(--alpine-font-size,13px)}.slick-header-menuitem-disabled{color:silver}.slick-header-menuitem{align-items:center;border:1px solid transparent;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}.slick-header-menuitem .slick-header-menuicon{background-position:50%;background-repeat:no-repeat;display:inline-block;height:16px;margin-right:4px;vertical-align:middle;width:16px}.slick-header-menuitem .slick-header-menuicon.sort-asc,.slick-header-menuitem .slick-header-menuicon.sort-desc{border-left:4px solid transparent;border-right:4px solid transparent;display:inline-block;height:0;margin-left:8px;margin-top:0;vertical-align:middle;width:0}.slick-header-menuitem .slick-header-menuicon.sort-asc{border-bottom:4px dashed}.slick-header-menuitem .slick-header-menuicon.sort-desc{border-top:4px dashed}.slick-header-menuitem .slick-header-menucontent{display:inline-block;flex-grow:1;font-size:var(--alpine-font-size,13px);margin:var(--alpine-menu-content-margin,2px 4px);vertical-align:middle}.slick-header-menuitem:hover{border-color:var(--alpine-border-color,#dae1e7)}.slick-pane{box-sizing:border-box;outline:0;overflow:hidden;position:absolute;width:100%}.slick-pane-header{display:block}.slick-pager{align-items:center;background-color:var(--alpine-pager-bg-color,#f8f8f8);border-color:var(--alpine-pager-border-color,#dae1e7);border-radius:var(--alpine-pager-border-radius,0);border-style:solid;border-width:var(--alpine-pager-border-width,0 1px 1px 1px);box-sizing:border-box;color:var(--alpine-font-color,#181d1f);display:inline-flex;font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-font-size,13px);height:var(--alpine-pager-height,40px);padding:4px;vertical-align:middle;width:100%}.slick-pager .sgi{cursor:pointer}.slick-pager .sgi.sgi-state-disabled,.slick-pager .slick-icon-state-disabled{cursor:var(--alpine-pager-button-cursor-disabled,default)}.slick-pager .slick-pager-nav{height:100%}.slick-pager .slick-pager-nav .slick-icon-container{margin:var(--alpine-pager-button-margin,0 2px)}.slick-pager .slick-pager-nav .sgi-container{align-items:center;display:inline-flex;height:100%}.slick-pager .slick-pager-settings,.slick-pager .slick-pager-status{display:inline-block;font-size:var(--alpine-font-size,13px);padding:var(--alpine-pager-padding,6px)}.slick-pager .slick-pager-settings{align-items:center;-moz-column-gap:1px;column-gap:1px;display:flex;float:right;margin-left:auto}.slick-pager .slick-pager-settings a{cursor:pointer;padding:0 2px 2px;text-decoration:underline}.percent-complete-bar{border-radius:3px;display:inline-block;height:6px}.slick-cell-menu,.slick-columnpicker,.slick-context-menu,.slick-gridmenu,.slick-header-menu{background-color:var(--alpine-menu-bg-color,#fbfbfb);border:var(--alpine-menu-border,1px solid #babfc7);border-radius:var(--alpine-menu-border-radius,2px);box-shadow:var(--alpine-menu-box-shadow,none);color:var(--alpine-menu-color,#181d1f);font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-font-size,13px)}.slick-cell-menu button.close,.slick-columnpicker button.close,.slick-context-menu button.close,.slick-gridmenu button.close,.slick-header-menu button.close{background:var(--alpine-menu-close-btn-background,transparent);border:var(--alpine-menu-close-btn-border,1px solid #babfc7);cursor:pointer}.slick-cell-menu,.slick-context-menu{box-sizing:content-box}.slick-cell.selected.editable{background-color:#fff;border-radius:var(--alpine-cell-editable-border-radius,3px)}.slick-cell.editable{box-shadow:var(--alpine-cell-editable-box-shadow,inset 0 0 0 2px #3490dc)}.slick-cell.hidden{display:none}input.editor-checkbox,input.editor-percentcomplete,input.editor-text{border:0;height:100%;margin:0;outline:0;padding:0}input.editor-percentcomplete,input.editor-text{width:100%}input.editor-text{background:#fff}input.editor-percentcomplete{background:transparent;float:left}.editor-percentcomplete-picker{cursor:pointer;display:inline-block;overflow:visible;position:relative;z-index:1000}.editor-percentcomplete-picker .editor-percentcomplete-picker-icon{background-color:currentColor;color:inherit;display:inline-block;font-size:18px;height:1em;width:1em;--alpine-percent-complete-picker-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-percent-complete-picker-icon-svg) no-repeat;mask:var(--alpine-percent-complete-picker-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.editor-percentcomplete-picker:hover .editor-percentcomplete-helper{display:block}input[type=range].editor-percentcomplete-slider{background-color:#ccc;left:15px;position:absolute;top:125px;transform:rotate(270deg);transform-origin:left}.editor-percentcomplete-helper{display:none;height:140px;left:-9px;overflow:visible;padding-left:9px;position:absolute;top:-3px;width:120px}.editor-percentcomplete-wrapper{background:#f9f9f9;border:1px solid gray;height:98px;padding:20px 8px;position:relative;width:100%;width:120px}.editor-percentcomplete-buttons{float:right}.editor-percentcomplete-buttons button{margin-bottom:4px;width:80px}.editor-percentcomplete-slider{float:left}.editor-percentcomplete-helper:hover{display:block}select.editor-yesno{margin:0;vertical-align:middle;width:100%}.slick-composite-editor-modal,.slick-composite-editor-modal input,.slick-composite-editor-modal textarea{font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif)}.slick-large-editor-text{background:var(--alpine-large-editor-bg-color,#fff);border:var(--alpine-large-editor-border,2px solid #b0b0b0);border-radius:var(--alpine-large-editor-border-radius,8px);padding:5px;z-index:10000}.slick-large-editor-text button{margin-left:2px}.slick-large-editor-text button,.slick-large-editor-text textarea{color:var(--alpine-large-editor-color,#181d1f);font-family:var(--alpine-large-editor-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-large-editor-font-size,13px)}button.slick-btn{border:var(--alpine-button-border,1px solid #ccc);border-radius:var(--alpine-button-radius,2px);cursor:pointer;padding:var(--alpine-button-padding,2px 4px)}button.slick-btn.slick-btn-default{background-color:var(--alpine-button-bg-color,#fff)}button.slick-btn.slick-btn-default:hover{background-color:var(--alpine-button-default-hover-color,rgba(68,68,68,.1));border:var(--alpine-button-default-hover-border,1px solid #9c9c9c)}button.slick-btn.slick-btn-primary{background-color:var(--alpine-button-primary-bg-color,#fff);border-color:var(--alpine-button-primary-border-color,#2196f3);color:var(--alpine-button-primary-color,#2196f3)}button.slick-btn.slick-btn-primary:active{background-color:var(--alpine-button-primary-active-color,#2196f3)}button.slick-btn.slick-btn-primary:hover{background-color:var(--alpine-button-primary-hover-color,rgba(33,150,243,.1))}\n";
+if(typeof document!=="undefined")document.head.appendChild(document.createElement("style")).textContent="/*!\r\n * SlickGrid Alpine Theme\r\n * (c) 2009-2016 Michael Leibman\r\n * michael{dot}leibman{at}gmail{dot}com\r\n * original project: https://github.com/mleibman/slickgrid\r\n * project forked as: https://github.com/6pac/slickgrid\r\n *\r\n * Distributed under MIT license.\r\n * All rights reserved.\r\n */@keyframes fade{0%,to{background:none}50%{background:var(--alpine-row-highlight-fade-animation,1s linear)}}#myGrid,.slick-container{background-color:var(--alpine-grid-bgcolor,#fff);border-color:var(--alpine-border-color,#dae1e7);border-radius:var(--alpine-border-radius,0);border-style:solid;border-width:var(--alpine-border-width,1px);box-sizing:border-box;color:var(--alpine-font-color,#181d1f);font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-font-size,13px)}#myGrid.bottom-rounded,.slick-container.bottom-rounded{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}#myGrid .text-center,.slick-container .text-center{text-align:center}.slick-viewport{background-color:var(--alpine-bg-color,#fff)}.slick-viewport .grid-canvas{outline:0;position:relative}.slick-range-decorator{border:var(--alpine-range-border,3px solid #000);cursor:cell;z-index:9999}.slick-row.slick-state-active,.slick-row.ui-widget-content{border:0;position:absolute;width:100%}.slick-row.slick-state-active{background:var(--alpine-cell-selected-bg-color,#d4ebfd)}.slick-row .selected{background-color:var(--alpine-cell-selected-bg-color,#d4ebfd);color:var(--alpine-cell-selected-color,#181d1f);z-index:10}.slick-row.odd{background-color:var(--alpine-odd-row-color,#fbfbfb)}.slick-row:hover{background-color:var(--alpine-row-mouse-hover-color,#e8f4fe)}.slick-row.highlight-animate{animation:fade var(--alpine-row-highlight-fade-animation,1s linear);background:var(--alpine-row-highlight-background-color,#d9edfd)!important}.slick-groupby-remove{padding-right:10px}.slick-group{background-color:var(--alpine-header-bg-color,#f8f8f8);border-bottom:2px solid var(--alpine-border-color,#dae1e7)}.slick-group .slick-cell{padding-left:4px;padding-right:4px;text-align:left!important}.slick-group-toggle{background-color:currentColor;color:inherit;cursor:pointer;display:inline-block;font-size:18px;height:1em;margin-right:5px;opacity:var(--alpine-group-icon-opacity,.8);width:1em}.slick-group-toggle.expanded{--alpine-group-expanded-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-group-expanded-icon-svg) no-repeat;mask:var(--alpine-group-expanded-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.slick-group-toggle.collapsed{--alpine-group-collapsed-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-group-collapsed-icon-svg) no-repeat;mask:var(--alpine-group-collapsed-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.slick-group-totals{background:var(--alpine-bg-color,#fff);color:var(--alpine-font-color,#181d1f)}.slick-group-toggle-all{background-color:currentColor;color:inherit;cursor:pointer;display:inline-block;font-size:18px;height:1em;margin-right:5px;opacity:var(--alpine-group-icon-opacity,.8);width:1em}.slick-group-toggle-all.collapsed{--alpine-group-collapsed-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-group-collapsed-icon-svg) no-repeat;mask:var(--alpine-group-collapsed-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.slick-group-toggle-all.expanded{--alpine-group-expanded-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-group-expanded-icon-svg) no-repeat;mask:var(--alpine-group-expanded-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.slick-cell{align-items:var(--alpine-cell-align-items,center);border-color:var(--alpine-cell-border-color,#dae1e7);border-radius:var(--alpine-cell-border-radius,0);border-style:solid;border-width:var(--alpine-cell-border-width,0 0 1px 0);cursor:default;display:var(--alpine-cell-display,block);justify-content:var(--alpine-cell-justify-content,flex-start);margin:0;min-width:0;overflow:hidden;padding:var(--alpine-cell-padding,2px 4px);position:absolute;text-overflow:var(--alpine-cell-text-overflow,ellipsis);vertical-align:middle;white-space:nowrap;z-index:1}.slick-cell.selected{background-color:var(--alpine-cell-selected-bg-color,#d4ebfd);color:var(--alpine-cell-selected-color,#181d1f)}.slick-cell.selected span a{color:#fff}.slick-cell.active{box-shadow:var(--alpine-cell-active-box-shadow,inset 0 0 0 1px #5da6e3)}.slick-cell.highlighted{background:#87cefa;background:rgba(0,0,255,.2);transition:all .5s}.slick-cell.flashing{border:1px solid red}.slick-cell.editable{border-style:solid;overflow:visible;z-index:11}.slick-cell:focus{outline:none}.slick-selection{border:2px dashed #000;position:absolute;z-index:10}.slick-header{background-color:var(--alpine-header-bg-color,#f8f8f8);border-bottom:1px solid var(--alpine-border-color,#dae1e7);color:var(--alpine-header-color,#181d1f);font-weight:var(--alpine-header-font-weight,bold)}.slick-header.slick-state-default{border-left:0;overflow:hidden;width:100%}.grid-header{background-color:var(--alpine-header-bg-color,#f8f8f8);border-color:var(--alpine-top-header-border-color,#dae1e7);border-style:solid;border-width:var(--alpine-top-header-border-width,1px 1px 0 1px);box-sizing:border-box;font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-top-header-font-size,15px);font-weight:var(--alpine-top-header-font-weight,bold);height:35px;padding:var(--alpine-top-header-padding,8px 6px 0 8px)}.slick-resizable-handle{border:0;box-shadow:var(--alpine-header-resizable-handle-box-shadow,inset 0 0 0 1px #dde2eb);cursor:col-resize;display:block;font-size:.1px;height:var(--alpine-header-resizable-handle-height,50%);position:absolute;right:0;top:var(--alpine-header-resizable-handle-top,25%);width:2px}.slick-reorder-guide,.slick-reorder-proxy{background:blue;display:inline-block}.slick-reorder-proxy{cursor:move;filter:alpha(opacity=15);opacity:.15}.slick-reorder-guide{filter:alpha(opacity=70);height:2px;opacity:.7}.slick-preheader-panel .slick-header-column,.slick-topheader-panel .slick-header-column{border-color:var(--alpine-preheader-border-color,#dae1e7);border-style:solid;border-width:var(--alpine-preheader-border-width,0)}.slick-header-column-active .slick-header-menubutton,.slick-header-column:hover>.slick-header-menubutton{display:inline-block}.slick-header-column{align-items:var(--alpine-header-align-items,flex-start);border-color:var(--alpine-header-border-color,#dae1e7);border-style:solid;border-width:var(--alpine-header-border-width,0);display:var(--alpine-header-display,inline-flex);height:var(--alpine-header-column-height,calc(23px*var(--alpine-header-name-row-count, 1)));justify-content:var(--alpine-header-justify-content,flex-start);line-height:var(--alpine-header-column-line-height,23px);margin:0;overflow:hidden;padding:4px;position:relative;vertical-align:var(--alpine-header-vertical-align,top);white-space:pre-wrap}.slick-header-column .slick-header-menubutton{background-color:var(--alpine-header-bg-color,#f8f8f8);background-image:none;bottom:0;cursor:pointer;display:none;position:absolute;right:0;top:0;width:var(--alpine-header-menubutton-width,18px)}.slick-header-column .slick-header-menubutton .caret{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px dashed;display:inline-block;height:0;margin-left:4px;margin-top:7px;vertical-align:middle;width:0}.slick-header-column .slick-header-menubutton.filtered{color:var(--alpine-header-menubutton-filtered-color,#3490dc)}.slick-header-column .slick-sort-indicator,.slick-header-column .slick-sort-indicator-numbered{color:var(--alpine-sort-indicator-color,#3490dc);-webkit-user-select:none;-moz-user-select:none;user-select:none}.slick-header-column .slick-sort-indicator{background-image:none;border-left:4px solid transparent;border-right:4px solid transparent;display:inline-block;height:0;margin:var(--alpine-sort-indicator-margin,5px 0 0 3px);vertical-align:middle;width:0}.slick-header-column .slick-sort-indicator-asc{border-bottom:4px dashed}.slick-header-column .slick-sort-indicator-desc{border-top:4px dashed}.slick-header-column .slick-sort-indicator-numbered{font-size:var(--alpine-sort-numbered-font-size,10px)}.slick-header-column.unorderable{background-color:var(--alpine-header-unorderable-bg-color,#f0f0f0)}.slick-header-columns{cursor:default;margin:0;overflow:hidden;padding:0;position:relative;white-space:nowrap}.slick-header-columns .slick-state-hover{background:var(--alpine-header-name-hover-bg-color,hsla(0,0%,74%,.267))}.slick-column-name,.slick-sort-indicator{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.slick-column-name{display:var(--alpine-header-name-display,block);flex-grow:var(--alpine-header-name-flex-grow,0);overflow:var(--alpine-header-name-overflow,hidden);text-overflow:var(--alpine-header-name-text-overflow,ellipsis);white-space:nowrap}.slick-footerrow,.slick-headerrow{background-color:var(--alpine-header-footer-bg-color,#fff);position:relative}.slick-footerrow.slick-state-default,.slick-headerrow.slick-state-default{border-left:0;overflow:hidden;width:100%}.slick-footerrow-columns,.slick-headerrow-columns{cursor:default;overflow:hidden;position:relative;white-space:nowrap}.slick-headerrow-columns{background-color:var(--alpine-headerrow-bg-color,#f8fafc);border-bottom:1px solid var(--alpine-border-color,#dae1e7);text-align:center}.slick-footerrow-column,.slick-headerrow-column{cursor:default;padding:4px;position:absolute;vertical-align:middle;white-space:nowrap;z-index:1}.slick-footerrow-column{border-color:var(--alpine-footerrow-border-color,#dae1e7);border-radius:var(--alpine-footerrow-border-radius,0);border-style:solid;border-width:var(--alpine-footerrow-border-width,1px 1px 1px 0);float:left;font-size:var(--alpine-footerrow-font-size,12px);line-height:20px;margin:0;overflow:ellipsis}.slick-headerrow-column{box-sizing:border-box;height:100%;overflow:hidden}.slick-headerrow-column input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;box-sizing:border-box;color:var(--alpine-font-color,#181d1f);height:100%;width:100%}.slick-header-menu{background:var(--alpine-header-bg-color,#f8f8f8);border:1px solid var(--alpine-border-color,#dae1e7);border-bottom-left-radius:var(--alpine-border-radius,0);border-bottom-right-radius:var(--alpine-border-radius,0);box-shadow:0 2px 4px 0 rgba(0,0,0,.1);color:var(--alpine-font-color,#181d1f);cursor:default;display:inline-block;font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-font-size,13px);margin:0;min-width:175px;padding:4px!important;position:absolute;z-index:100000}.slick-header-menu label{font-weight:400}.slick-header-menu button{border:1px solid transparent;border-radius:.25rem;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:var(--alpine-font-size,13px);font-weight:400;line-height:1.428571429;margin:2px;outline:0;overflow:visible;padding:6px 14px;text-align:center;text-transform:none;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.slick-header-menu button,.slick-header-menu button:hover{background-color:transparent;color:var(--alpine-font-color,#181d1f)}.slick-header-menu button:hover{border-color:var(--alpine-border-color,#dae1e7)}.slick-header-menu button.active.focus,.slick-header-menu button.active:focus,.slick-header-menu button.active:hover,.slick-header-menu button:active.focus,.slick-header-menu button:active:focus,.slick-header-menu button:active:hover{background-color:transparent;border-color:var(--alpine-border-color,#dae1e7);color:var(--alpine-font-color,#181d1f)}.slick-header-menu input.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;color:var(--alpine-font-color,#181d1f);padding:.5rem .75rem;width:100%}.slick-header-menu .filter,.slick-header-menu input.input{border:1px solid var(--alpine-border-color,#dae1e7);border-radius:.25rem}.slick-header-menu .filter{background:var(--alpine-bg-color,#fff);height:200px;margin-bottom:5px;margin-top:5px;max-height:200px;max-width:300px;overflow:scroll;padding:4px;white-space:nowrap}.slick-header-menu .filter label{display:block;font-size:var(--alpine-font-size,13px)}.slick-header-menuitem-disabled{color:silver}.slick-header-menuitem{align-items:center;border:1px solid transparent;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}.slick-header-menuitem .slick-header-menuicon{background-position:50%;background-repeat:no-repeat;display:inline-block;height:16px;margin-right:4px;vertical-align:middle;width:16px}.slick-header-menuitem .slick-header-menuicon.sort-asc,.slick-header-menuitem .slick-header-menuicon.sort-desc{border-left:4px solid transparent;border-right:4px solid transparent;display:inline-block;height:0;margin-left:8px;margin-top:0;vertical-align:middle;width:0}.slick-header-menuitem .slick-header-menuicon.sort-asc{border-bottom:4px dashed}.slick-header-menuitem .slick-header-menuicon.sort-desc{border-top:4px dashed}.slick-header-menuitem .slick-header-menucontent{display:inline-block;flex-grow:1;font-size:var(--alpine-font-size,13px);margin:var(--alpine-menu-content-margin,2px 4px);vertical-align:middle}.slick-header-menuitem:hover{border-color:var(--alpine-border-color,#dae1e7)}.slick-pane{box-sizing:border-box;outline:0;overflow:hidden;position:absolute;width:100%}.slick-pane-header{display:block}.slick-pager{align-items:center;background-color:var(--alpine-pager-bg-color,#f8f8f8);border-color:var(--alpine-pager-border-color,#dae1e7);border-radius:var(--alpine-pager-border-radius,0);border-style:solid;border-width:var(--alpine-pager-border-width,0 1px 1px 1px);box-sizing:border-box;color:var(--alpine-font-color,#181d1f);display:inline-flex;font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-font-size,13px);height:var(--alpine-pager-height,40px);padding:4px;vertical-align:middle;width:100%}.slick-pager .sgi{cursor:pointer}.slick-pager .sgi.sgi-state-disabled,.slick-pager .slick-icon-state-disabled{cursor:var(--alpine-pager-button-cursor-disabled,default)}.slick-pager .slick-pager-nav{height:100%}.slick-pager .slick-pager-nav .slick-icon-container{margin:var(--alpine-pager-button-margin,0 2px)}.slick-pager .slick-pager-nav .sgi-container{align-items:center;display:inline-flex;height:100%}.slick-pager .slick-pager-settings,.slick-pager .slick-pager-status{display:inline-block;font-size:var(--alpine-font-size,13px);padding:var(--alpine-pager-padding,6px)}.slick-pager .slick-pager-settings{align-items:center;-moz-column-gap:1px;column-gap:1px;display:flex;float:right;margin-left:auto}.slick-pager .slick-pager-settings a{cursor:pointer;padding:0 2px 2px;text-decoration:underline}.percent-complete-bar{border-radius:3px;display:inline-block;height:6px}.slick-cell-menu,.slick-columnpicker,.slick-context-menu,.slick-gridmenu,.slick-header-menu{background-color:var(--alpine-menu-bg-color,#fbfbfb);border:var(--alpine-menu-border,1px solid #babfc7);border-radius:var(--alpine-menu-border-radius,2px);box-shadow:var(--alpine-menu-box-shadow,none);color:var(--alpine-menu-color,#181d1f);font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-font-size,13px)}.slick-cell-menu button.close,.slick-columnpicker button.close,.slick-context-menu button.close,.slick-gridmenu button.close,.slick-header-menu button.close{background:var(--alpine-menu-close-btn-background,transparent);border:var(--alpine-menu-close-btn-border,1px solid #babfc7);cursor:pointer}.slick-cell-menu,.slick-context-menu{box-sizing:content-box}.slick-cell.selected.editable{background-color:#fff;border-radius:var(--alpine-cell-editable-border-radius,3px)}.slick-cell.editable{box-shadow:var(--alpine-cell-editable-box-shadow,inset 0 0 0 2px #3490dc)}.slick-cell.hidden{display:none}input.editor-checkbox,input.editor-percentcomplete,input.editor-text{border:0;height:100%;margin:0;outline:0;padding:0}input.editor-percentcomplete,input.editor-text{width:100%}input.editor-text{background:#fff}input.editor-percentcomplete{background:transparent;float:left}.editor-percentcomplete-picker{cursor:pointer;display:inline-block;overflow:visible;position:relative;z-index:1000}.editor-percentcomplete-picker .editor-percentcomplete-picker-icon{background-color:currentColor;color:inherit;display:inline-block;font-size:18px;height:1em;width:1em;--alpine-percent-complete-picker-icon-svg:url('data:image/svg+xml;utf8,%3Csvg viewBox=\"0 0 24 24\" display=\"inline-block\" height=\"1em\" width=\"1em\" vertical-align=\"text-bottom\" xmlns=\"http://www.w3.org/2000/svg\" %3E%3Cpath fill=\"currentColor\" d=\"M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z\"/%3E%3C/svg%3E');-webkit-mask:var(--alpine-percent-complete-picker-icon-svg) no-repeat;mask:var(--alpine-percent-complete-picker-icon-svg) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.editor-percentcomplete-picker:hover .editor-percentcomplete-helper{display:block}input[type=range].editor-percentcomplete-slider{background-color:#ccc;left:15px;position:absolute;top:125px;transform:rotate(270deg);transform-origin:left}.editor-percentcomplete-helper{display:none;height:140px;left:-9px;overflow:visible;padding-left:9px;position:absolute;top:-3px;width:120px}.editor-percentcomplete-wrapper{background:#f9f9f9;border:1px solid gray;height:98px;padding:20px 8px;position:relative;width:100%;width:120px}.editor-percentcomplete-buttons{float:right}.editor-percentcomplete-buttons button{margin-bottom:4px;width:80px}.editor-percentcomplete-slider{float:left}.editor-percentcomplete-helper:hover{display:block}select.editor-yesno{margin:0;vertical-align:middle;width:100%}.slick-composite-editor-modal,.slick-composite-editor-modal input,.slick-composite-editor-modal textarea{font-family:var(--alpine-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif)}.slick-large-editor-text{background:var(--alpine-large-editor-bg-color,#fff);border:var(--alpine-large-editor-border,2px solid #b0b0b0);border-radius:var(--alpine-large-editor-border-radius,8px);padding:5px;z-index:10000}.slick-large-editor-text button{margin-left:2px}.slick-large-editor-text button,.slick-large-editor-text textarea{color:var(--alpine-large-editor-color,#181d1f);font-family:var(--alpine-large-editor-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif);font-size:var(--alpine-large-editor-font-size,13px)}button.slick-btn{border:var(--alpine-button-border,1px solid #ccc);border-radius:var(--alpine-button-radius,2px);cursor:pointer;padding:var(--alpine-button-padding,2px 4px)}button.slick-btn.slick-btn-default{background-color:var(--alpine-button-bg-color,#fff)}button.slick-btn.slick-btn-default:hover{background-color:var(--alpine-button-default-hover-color,rgba(68,68,68,.1));border:var(--alpine-button-default-hover-border,1px solid #9c9c9c)}button.slick-btn.slick-btn-primary{background-color:var(--alpine-button-primary-bg-color,#fff);border-color:var(--alpine-button-primary-border-color,#2196f3);color:var(--alpine-button-primary-color,#2196f3)}button.slick-btn.slick-btn-primary:active{background-color:var(--alpine-button-primary-active-color,#2196f3)}button.slick-btn.slick-btn-primary:hover{background-color:var(--alpine-button-primary-hover-color,rgba(33,150,243,.1))}\r\n";
 
 const DataGrid = _ref => {
   let {
@@ -23259,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,
@@ -25047,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%",
@@ -25257,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),
@@ -25301,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),
@@ -25339,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),
@@ -28157,7 +28218,7 @@ const useObserveRect = () => {
 
     return () => rectObserver.current && rectObserver.current.unobserve();
   }, [node]);
-  const ref = useCallback(onSetNode, []);
+  const ref = useCallback(onSetNode, [onSetNode]);
   return [ref, rect];
 };
 
@@ -31240,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, 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, 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, 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, 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 };
+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