@lanaco/lnc-react-ui 2.1.15 → 2.1.19

package/lib/index.js

@@ -4616,7 +4616,7 @@ if (process.env.NODE_ENV !== 'production') {
   }
 }
 
-var _templateObject$p;
+var _templateObject$q;
 
 var getCheckboxCss = function getCheckboxCss(props) {
   var left, top, width, height, checkWidth, checkHeight, margin, marginLeft, padingLeft, paddingTop;
@@ -4661,7 +4661,7 @@ var getCheckboxCss = function getCheckboxCss(props) {
     height = "1.6875rem";
   }
 
-  return css(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral__default['default'](["\n    .c-", "-container {\n      font-family: ", ";\n      display: inline-block;\n      position: relative;\n      padding: 0.25rem;\n      padding-left: ", ";\n      ", "\n      cursor: pointer;\n      font-size: ", ";\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      margin: ", ";\n      margin-left: ", ";\n      cursor: pointer;\n    }\n\n    /* Hide the browser's default checkbox */\n    .c-", "-container input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    /* Create a custom checkbox */\n    .c-", "-checkmark {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: ", ";\n      width: ", ";\n      background-color: #eee;\n      border: 0.0625rem solid ", ";\n      border-radius: 2px;\n      transition: all 200ms ease;\n    }\n\n    /* On mouse-over, add a grey background color */\n    .c-", "-container:hover input ~ .c-", "-checkmark {\n      cursor: pointer;\n    }\n\n    .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      cursor: default;\n    }\n\n    .c-", "-container input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    /* When the checkbox is checked, add a blue background */\n    .c-", "-container input:checked ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      border: 0.0625rem solid ", ";\n      cursor: default;\n    }\n\n    /* Create the checkmark/indicator (hidden when not checked) */\n    .c-", "-checkmark:after {\n      content: \"\";\n      position: absolute;\n      display: none;\n    }\n\n    /* Show the checkmark when checked */\n    .c-", "-container input:checked ~ .c-", "-checkmark:after {\n      display: block;\n    }\n\n    /* Style the checkmark/indicator */\n    .c-", "-container .c-", "-checkmark:after {\n      left: ", ";\n      top: ", ";\n      width: ", ";\n      height: ", ";\n      border: solid white;\n      border-width: 0 0.21875rem 0.21875rem 0;\n      -webkit-transform: rotate(35deg);\n      -ms-transform: rotate(35deg);\n      transform: rotate(35deg);\n    }\n  "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
+  return css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral__default['default'](["\n    .c-", "-container {\n      font-family: ", ";\n      display: inline-block;\n      position: relative;\n      padding: 0.25rem;\n      padding-left: ", ";\n      ", "\n      cursor: pointer;\n      font-size: ", ";\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      margin: ", ";\n      margin-left: ", ";\n      cursor: pointer;\n    }\n\n    /* Hide the browser's default checkbox */\n    .c-", "-container input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    /* Create a custom checkbox */\n    .c-", "-checkmark {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: ", ";\n      width: ", ";\n      background-color: #eee;\n      border: 0.0625rem solid ", ";\n      border-radius: 2px;\n      transition: all 200ms ease;\n    }\n\n    /* On mouse-over, add a grey background color */\n    .c-", "-container:hover input ~ .c-", "-checkmark {\n      cursor: pointer;\n    }\n\n    .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      cursor: default;\n    }\n\n    .c-", "-container input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    /* When the checkbox is checked, add a blue background */\n    .c-", "-container input:checked ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      border: 0.0625rem solid ", ";\n      cursor: default;\n    }\n\n    /* Create the checkmark/indicator (hidden when not checked) */\n    .c-", "-checkmark:after {\n      content: \"\";\n      position: absolute;\n      display: none;\n    }\n\n    /* Show the checkmark when checked */\n    .c-", "-container input:checked ~ .c-", "-checkmark:after {\n      display: block;\n    }\n\n    /* Style the checkmark/indicator */\n    .c-", "-container .c-", "-checkmark:after {\n      left: ", ";\n      top: ", ";\n      width: ", ";\n      height: ", ";\n      border: solid white;\n      border-width: 0 0.21875rem 0.21875rem 0;\n      -webkit-transform: rotate(35deg);\n      -ms-transform: rotate(35deg);\n      transform: rotate(35deg);\n    }\n  "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
 };
 
 var CheckBox = function CheckBox(props) {
@@ -4716,7 +4716,7 @@ CheckBox.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$o, _templateObject2$j, _templateObject3$e;
+var _templateObject$p, _templateObject2$k, _templateObject3$e;
 
 var getLabelAndTextProps = function getLabelAndTextProps() {
   return {
@@ -4787,14 +4787,14 @@ var Label = newStyled.label(function (props) {
     }
   };
 });
-var Text$2 = newStyled.label(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral__default['default'](["\n  position: relative;\n  font-family: ", ";\n  font-size: ", ";\n  top: ", ";\n"])), function (props) {
+var Text$2 = newStyled.label(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral__default['default'](["\n  position: relative;\n  font-family: ", ";\n  font-size: ", ";\n  top: ", ";\n"])), function (props) {
   return props.theme.typography.fontFamily;
 }, function (props) {
   return props.theme.typography[props.size].fontSize;
 }, function (props) {
   return getLabelAndTextProps()[props.size].top;
 });
-var Input$4 = newStyled.input(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral__default['default'](["\n  &:checked + span {\n    background-color: ", ";\n  }\n\n  &:focus + span {\n    box-shadow: 0 0 0.0625rem\n      ", ";\n  }\n\n  &:checked + span:before {\n    transform: translateX(90%);\n  }\n\n  &:checked:disabled + span {\n  }\n\n  &:checked:disabled + span:before {\n    backround-color: red;\n  }\n\n  &:disabled + span {\n    position: absolute;\n    cursor: pointer;\n    top: ", ";\n    left: ", ";\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    height: ", ";\n    width: ", ";\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:checked:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
+var Input$4 = newStyled.input(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral__default['default'](["\n  &:checked + span {\n    background-color: ", ";\n  }\n\n  &:focus + span {\n    box-shadow: 0 0 0.0625rem\n      ", ";\n  }\n\n  &:checked + span:before {\n    transform: translateX(90%);\n  }\n\n  &:checked:disabled + span {\n  }\n\n  &:checked:disabled + span:before {\n    backround-color: red;\n  }\n\n  &:disabled + span {\n    position: absolute;\n    cursor: pointer;\n    top: ", ";\n    left: ", ";\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    height: ", ";\n    width: ", ";\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:checked:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
   return props.theme.palette[props.color].main;
 }, function (props) {
   return props.theme.palette[props.color].main;
@@ -6554,11 +6554,11 @@ SwitchTransition.defaultProps = {
 };
 var SwitchTransition$1 = SwitchTransition;
 
-var _templateObject$n, _templateObject2$i, _templateObject3$d, _templateObject4$b, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$3;
-var Container$k = newStyled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  box-shadow: 0 0 6px #bebebe;\n  border-radius: 0.175rem;\n  padding: 8px;\n  width: ", ";\n\n  font-family: ", ";\n"])), function (props) {
+var _templateObject$o, _templateObject2$j, _templateObject3$d, _templateObject4$b, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$3;
+var Container$l = newStyled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  box-shadow: 0 0 6px #bebebe;\n  border-radius: 0.175rem;\n  padding: 8px;\n  width: ", ";\n\n  font-family: ", ";\n"])), function (props) {
   return props.width && props.width !== "" ? props.width : "fit-content";
 }, theme.typography.fontFamily);
-var Table$1 = newStyled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: column;\n  border: 1.7px solid #80808060;\n  background-color: whitesmoke;\n  border-radius: 0.175rem;\n"])));
+var Table$1 = newStyled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: column;\n  border: 1.7px solid #80808060;\n  background-color: whitesmoke;\n  border-radius: 0.175rem;\n"])));
 var Body = newStyled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: column;\n  &::-webkit-scrollbar {\n    background: white;\n    height: 0;\n    width: 0;\n  }\n  overflow: auto;\n  height: ", ";\n"])), function (props) {
   return props.height && props.height !== "" ? props.height : "auto";
 });
@@ -6636,7 +6636,7 @@ var CheckboxLookup = function CheckboxLookup(props) {
 
   var _options = pagination ? options.slice((page - 1) * displayedItemsCount, page * displayedItemsCount) : options;
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$k, _extends__default['default']({}, themeProps, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$l, _extends__default['default']({}, themeProps, {
     className: className
   }), /*#__PURE__*/React__default['default'].createElement(Global, {
     styles: css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral__default['default'](["\n          .item-enter {\n            opacity: 0;\n          }\n\n          .item-enter-active {\n            transition: all 0.4s ease-in;\n            opacity: 1;\n          }\n\n          .item-exit {\n          }\n\n          .item-exit-active {\n            opacity: 0;\n            transition: opacity 400ms ease-out;\n          }\n        "])))
@@ -22432,7 +22432,7 @@ var heightBySize$d = function heightBySize(size, hasText) {
   if (size === "large") return "2.375rem";
 };
 
-var Container$j = newStyled.span(function (props) {
+var Container$k = newStyled.span(function (props) {
   return {
     "& .react-datepicker__triangle": {
       display: "none"
@@ -22529,7 +22529,7 @@ var DateInput = function DateInput(props) {
     setDateText(moment(jsDateObject).format("DD.MM.YYYY."));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$j, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$k, {
     theme: theme,
     size: size,
     color: color
@@ -22694,13 +22694,13 @@ DropDown.propTypes = {
 
 var _excluded = ["duration", "delay", "children"];
 
-var _templateObject$m, _templateObject2$h;
+var _templateObject$n, _templateObject2$i;
 
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var fadeIn = keyframes$2(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral__default['default'](["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var Wrapper$2 = newStyled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral__default['default'](["\n  @media (prefers-reduced-motion: no-preference) {\n    animation-name: ", ";\n    animation-fill-mode: backwards;\n  }\n"])), fadeIn);
+var fadeIn = keyframes$2(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral__default['default'](["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var Wrapper$2 = newStyled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral__default['default'](["\n  @media (prefers-reduced-motion: no-preference) {\n    animation-name: ", ";\n    animation-fill-mode: backwards;\n  }\n"])), fadeIn);
 
 var FadeIn = function FadeIn(_ref) {
   var _ref$duration = _ref.duration,
@@ -22718,7 +22718,7 @@ var FadeIn = function FadeIn(_ref) {
   }), children);
 };
 
-var _templateObject$l, _templateObject2$g, _templateObject3$c, _templateObject4$a, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$6, _DropdownLookup$propT;
+var _templateObject$m, _templateObject2$h, _templateObject3$c, _templateObject4$a, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$6, _DropdownLookup$propT;
 
 var paddingBySize$a = function paddingBySize(size) {
   if (size === "small") return "0.325rem 0.375rem";
@@ -22732,8 +22732,8 @@ var heightBySize$b = function heightBySize(size) {
   if (size === "large") return "2.25rem";
 };
 
-var spin$2 = keyframes$2(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral__default['default'](["\n    100% {\n      transform: rotate(360deg);\n    }\n\n    0% {\n      transform: rotate(0deg);\n    }\n"])));
-var Container$i = newStyled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  border-bottom: 0.125rem solid\n    ", ";\n  min-height: ", ";\n  max-height: ", ";\n  transition: all 250ms ease;\n  border-radius: 0.125rem;\n  background-color: ", ";\n"])), function (props) {
+var spin$2 = keyframes$2(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral__default['default'](["\n    100% {\n      transform: rotate(360deg);\n    }\n\n    0% {\n      transform: rotate(0deg);\n    }\n"])));
+var Container$j = newStyled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  border-bottom: 0.125rem solid\n    ", ";\n  min-height: ", ";\n  max-height: ", ";\n  transition: all 250ms ease;\n  border-radius: 0.125rem;\n  background-color: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.palette.gray[900] : props.theme.palette[props.color].main;
 }, function (props) {
   return heightBySize$b(props.size);
@@ -22959,7 +22959,7 @@ var DropdownLookup = function DropdownLookup(props) {
     }
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$i, themeProps, /*#__PURE__*/React__default['default'].createElement(Inner$4, themeProps, /*#__PURE__*/React__default['default'].createElement(InputContainer$2, themeProps, /*#__PURE__*/React__default['default'].createElement(Input$3, _extends__default['default']({}, themeProps, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$j, themeProps, /*#__PURE__*/React__default['default'].createElement(Inner$4, themeProps, /*#__PURE__*/React__default['default'].createElement(InputContainer$2, themeProps, /*#__PURE__*/React__default['default'].createElement(Input$3, _extends__default['default']({}, themeProps, {
     ref: InputRef,
     autoComplete: "off",
     id: id,
@@ -23019,7 +23019,7 @@ DropdownLookup.propTypes = (_DropdownLookup$propT = {
   onChange: PropTypes__default['default'].func
 }, _defineProperty__default['default'](_DropdownLookup$propT, "load", PropTypes__default['default'].func), _defineProperty__default['default'](_DropdownLookup$propT, "clear", PropTypes__default['default'].func), _defineProperty__default['default'](_DropdownLookup$propT, "className", PropTypes__default['default'].string), _defineProperty__default['default'](_DropdownLookup$propT, "initialValue", PropTypes__default['default'].object), _defineProperty__default['default'](_DropdownLookup$propT, "notItemsFoundText", PropTypes__default['default'].string), _defineProperty__default['default'](_DropdownLookup$propT, "size", PropTypes__default['default'].oneOf(["small", "medium", "large"])), _defineProperty__default['default'](_DropdownLookup$propT, "color", PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])), _DropdownLookup$propT);
 
-var _templateObject$k;
+var _templateObject$l;
 
 var getPadding = function getPadding(size) {
   if (size === "small") return "0.4125rem 0.34375rem";
@@ -23033,7 +23033,7 @@ var heightBySize$a = function heightBySize(size) {
   if (size === "large") return "max-height: 2.375rem; min-height: 2.375rem;";
 };
 
-var Span$1 = newStyled.span(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n  background-color: inherit;\n  font-size: ", ";\n  padding: ", ";\n  color: ", ";\n  ", "\n"])), function (props) {
+var Span$1 = newStyled.span(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n  background-color: inherit;\n  font-size: ", ";\n  padding: ", ";\n  color: ", ";\n  ", "\n"])), function (props) {
   return props.theme.typography[props.size].fontSize;
 }, function (props) {
   return getPadding(props.size);
@@ -23290,7 +23290,7 @@ var Icon = newStyled.i(function (props) {
     fontSize: props.theme.typography[props.size].fontSize
   };
 });
-var Container$h = newStyled.div(function (props) {
+var Container$i = newStyled.div(function (props) {
   return {
     display: "flex",
     fontFamily: props.theme.typography.fontFamily,
@@ -23374,7 +23374,7 @@ var PasswordInput = /*#__PURE__*/React__default['default'].forwardRef(function (
     size: size,
     color: color
   };
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Container$h, themeProps, /*#__PURE__*/React__default['default'].createElement(Input$2, _extends__default['default']({}, themeProps, {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Container$i, themeProps, /*#__PURE__*/React__default['default'].createElement(Input$2, _extends__default['default']({}, themeProps, {
     type: locked ? "password" : "text",
     autoComplete: autoComplete ? "true" : "false",
     value: value,
@@ -31314,11 +31314,11 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return React.cloneElement(child); })));
 };
 
-var _templateObject$j, _templateObject2$f;
-var Overlay = newStyled(motion.div)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral__default['default'](["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n"])), function (props) {
+var _templateObject$k, _templateObject2$g;
+var Overlay = newStyled(motion.div)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral__default['default'](["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n"])), function (props) {
   return props.zIndex;
 });
-var ModalContainer = newStyled(motion.div)(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default['default'](["\n  width: 50%;\n  background-color: white;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  border-radius: 0.2rem;\n  background: white;\n  z-index: ", ";\n"])), function (props) {
+var ModalContainer = newStyled(motion.div)(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral__default['default'](["\n  width: 50%;\n  background-color: white;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  border-radius: 0.2rem;\n  background: white;\n  z-index: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.zIndex;
@@ -31354,7 +31354,9 @@ var Content$4 = newStyled.div(function (props) {
     padding: "0.3125rem",
     border: "0.065rem solid ".concat(props.theme.palette.gray[600]),
     borderTop: props.basic ? "none" : "0.065rem solid ".concat(props.theme.palette.gray[600]),
-    borderRadius: "0 0 0.2rem 0.2rem"
+    borderRadius: "0 0 0.2rem 0.2rem",
+    maxHeight: "calc(100vh - 220px)",
+    overflowY: "auto"
   };
 });
 
@@ -31447,7 +31449,7 @@ Modal$1.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background"])
 };
 
-var Container$g = newStyled.div(function (props) {
+var Container$h = newStyled.div(function (props) {
   return {
     position: "fixed",
     alignItems: "center",
@@ -31550,7 +31552,7 @@ var ConfirmationForm = function ConfirmationForm(props) {
     if (clickOutsideToClose || !showHeader) onClose();
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$g, _extends__default['default']({}, themeProps, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$h, _extends__default['default']({}, themeProps, {
     className: className,
     onClick: onClickOutsideModal
   }), /*#__PURE__*/React__default['default'].createElement(Modal, themeProps, showHeader ? /*#__PURE__*/React__default['default'].createElement(Header, themeProps, /*#__PURE__*/React__default['default'].createElement(Title, themeProps, header), /*#__PURE__*/React__default['default'].createElement(CloseButton, themeProps, /*#__PURE__*/React__default['default'].createElement(Button$1, {
@@ -31621,12 +31623,12 @@ var css_248z$6 = ".styles-module_dropbtn__3BuA0 {\n  font-size: var(--base-addit
 var styles$1 = {"dropbtn":"styles-module_dropbtn__3BuA0","disabled":"styles-module_disabled__3pCU6","dropdownContent":"styles-module_dropdownContent__2g5rN","dropdown":"styles-module_dropdown__zPTAO","linkInnerSpan":"styles-module_linkInnerSpan__2Gjny","linkIconSpan":"styles-module_linkIconSpan__1IQ0O","iconSpan":"styles-module_iconSpan__2IYf9","mymove":"styles-module_mymove__2DflL"};
 styleInject(css_248z$6);
 
-var _templateObject$i, _templateObject2$e, _templateObject3$b;
+var _templateObject$j, _templateObject2$f, _templateObject3$b;
 
-var Dropdown = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n  display: ", ";\n  position: absolute;\n  background-color: white;\n  min-width: 160px;\n  border-radius: 3.5px;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n"])), function (props) {
+var Dropdown = newStyled.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral__default['default'](["\n  display: ", ";\n  position: absolute;\n  background-color: white;\n  min-width: 160px;\n  border-radius: 3.5px;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n"])), function (props) {
   return props.show ? "block" : "none";
 });
-var ItemWrapper$2 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral__default['default'](["\n  padding: 2px;\n"])));
+var ItemWrapper$2 = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default['default'](["\n  padding: 2px;\n"])));
 var Item$4 = newStyled.a(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral__default['default'](["\n  background-color: white;\n  color: ", ";\n  padding: 6px 6px;\n  text-decoration: none;\n  display: block;\n  font-size: 12px;\n  padding: 2px;\n\n  &:hover {\n    background-color: whitesmoke;\n    color: ", ";\n  }\n"])), theme.palette.primary.main, theme.palette.primary.light); //============================================================
 
 var DropdownMenu = function DropdownMenu(props) {
@@ -31703,13 +31705,13 @@ var freeze = function freeze(dependcies) {
   return freeze;
 };
 
-var _templateObject$h, _templateObject2$d;
-var Container$f = newStyled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  font-size: ", ";\n  font-family: ", ";\n  padding: 0px 8px;\n"])), function (props) {
+var _templateObject$i, _templateObject2$e;
+var Container$g = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  font-size: ", ";\n  font-family: ", ";\n  padding: 0px 8px;\n"])), function (props) {
   return props.theme.typography.small.fontSize;
 }, function (props) {
   return props.theme.typography.fontFamily;
 });
-var Item$3 = newStyled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var Item$3 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.first ? "0" : "6px";
 });
 
@@ -31786,7 +31788,7 @@ var FormViewMovement = function FormViewMovement(props) {
     })));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$f, themeProps, renderFirst(), renderPrevious(), renderNext(), renderLast());
+  return /*#__PURE__*/React__default['default'].createElement(Container$g, themeProps, renderFirst(), renderPrevious(), renderNext(), renderLast());
 };
 
 FormViewMovement.defaultProps = {
@@ -49026,13 +49028,13 @@ var TableSelectionType = {
   MULTIPLE: "multiple"
 };
 
-var _templateObject$g, _templateObject2$c, _templateObject3$a, _templateObject4$9, _templateObject5$9, _templateObject6$7;
-var Container$e = newStyled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
+var _templateObject$h, _templateObject2$d, _templateObject3$a, _templateObject4$9, _templateObject5$9, _templateObject6$7;
+var Container$f = newStyled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
   return props.theme.typography.small.fontSize;
 }, function (props) {
   return props.theme.typography.fontFamily;
 });
-var Item$2 = newStyled.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var Item$2 = newStyled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.first ? "0" : "6px";
 });
 var ExportItem = newStyled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
@@ -49206,7 +49208,7 @@ var Pagination = function Pagination(props) {
     })));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$e, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
+  return /*#__PURE__*/React__default['default'].createElement(Container$f, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
 };
 
 Pagination.defaultProps = {
@@ -49271,9 +49273,9 @@ Pagination.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$f, _templateObject2$b, _templateObject3$9, _templateObject4$8, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
-var Container$d = newStyled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
-var Wrapper$1 = newStyled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral__default['default'](["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
+var _templateObject$g, _templateObject2$c, _templateObject3$9, _templateObject4$8, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
+var Container$e = newStyled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
+var Wrapper$1 = newStyled.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral__default['default'](["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
 var TableTable$1 = newStyled.table(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral__default['default'](["\n  border-collapse: collapse;\n  width: 100%;\n"])));
 var TableHead$1 = newStyled.thead(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
 var TableHeadRow$1 = newStyled.tr(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid #80808025;\n"])));
@@ -49321,7 +49323,9 @@ var TableView = function TableView(props) {
       OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
       ReadOnly = _props$Config.ReadOnly,
       _props$Config$IsLooku = _props$Config.IsLookup,
-      IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku;
+      IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
+      _props$Config$LookupT = _props$Config.LookupTakeItem,
+      LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
   var _props$Localization = props.Localization,
       Localization = _props$Localization === void 0 ? {} : _props$Localization;
       props.Export;
@@ -49375,7 +49379,16 @@ var TableView = function TableView(props) {
       ChangeToFormView(dataItem);
     } : function () {};
     if (!EnableFormView) onClick = function onClick() {};
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) onClick = function onClick() {};
+    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
+
+    if (IsLookup) {
+      onClick = function onClick() {
+        if (!IsLoading) {
+          LookupTakeItem(dataItem);
+        }
+      };
+    }
+
     var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
     return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
       key: tabIndex,
@@ -49384,7 +49397,22 @@ var TableView = function TableView(props) {
   };
 
   var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    if (IsLookup) {
+      return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+        selectionCell: true,
+        key: -1
+      }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+        inverted: true,
+        onClick: function onClick() {
+          if (!IsLoading) {
+            LookupTakeItem(dataItem);
+          }
+        },
+        icon: "arrow-right"
+      }));
+    }
+
+    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
     return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
       selectionCell: true,
       key: -1
@@ -49431,6 +49459,10 @@ var TableView = function TableView(props) {
   };
 
   var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
+    if (IsLookup) return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1
+    });
     if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
     if (SelectedEntirePage && Localization.DeselectAll) ;
     if (!SelectedEntirePage && Localization.SelectAll) ;
@@ -49446,7 +49478,7 @@ var TableView = function TableView(props) {
     }));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$d, null, /*#__PURE__*/React__default['default'].createElement(Wrapper$1, null, /*#__PURE__*/React__default['default'].createElement(TableTable$1, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$e, null, /*#__PURE__*/React__default['default'].createElement(Wrapper$1, null, /*#__PURE__*/React__default['default'].createElement(TableTable$1, {
     cellSpacing: 0
   }, /*#__PURE__*/React__default['default'].createElement(TableHead$1, null, /*#__PURE__*/React__default['default'].createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
     return x.hide !== true;
@@ -49455,7 +49487,7 @@ var TableView = function TableView(props) {
   }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody()))));
 };
 
-var _templateObject$e, _templateObject2$a;
+var _templateObject$f, _templateObject2$b;
 
 var heightBySize$5 = function heightBySize(size) {
   if (size === "small") return "\n          width: 1.4rem;\n          height: 1.4rem;\n        ";
@@ -49463,8 +49495,8 @@ var heightBySize$5 = function heightBySize(size) {
   if (size === "large") return "\n          width: 1.8rem;\n          height: 1.8rem;\n        ";
 };
 
-var spin$1 = keyframes$2(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var StyledSpinner = newStyled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  ", "\n  border: 0.3125rem solid ", ";\n  border-radius: 50%;\n  border-top-color: ", ";\n  animation: ", " 0.8s ease-in-out infinite;\n"])), function (props) {
+var spin$1 = keyframes$2(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var StyledSpinner = newStyled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  ", "\n  border: 0.3125rem solid ", ";\n  border-radius: 50%;\n  border-top-color: ", ";\n  animation: ", " 0.8s ease-in-out infinite;\n"])), function (props) {
   return heightBySize$5(props.size);
 }, function (props) {
   return props.theme.palette[props.color].lighter;
@@ -49503,7 +49535,7 @@ Spinner.propTypes = {
 var css_248z$4 = ".fade1-enter {\n  opacity: 0;\n}\n.fade1-exit {\n  opacity: 1;\n}\n.fade1-enter-active {\n  opacity: 1;\n}\n.fade1-exit-active {\n  opacity: 0;\n}\n.fade1-enter-active,\n.fade1-exit-active {\n  transition: opacity 330ms;\n}\n\n.fade2-enter {\n  opacity: 0;\n}\n.fade2-exit {\n  opacity: 1;\n}\n.fade2-enter-active {\n  opacity: 1;\n}\n.fade2-exit-active {\n  opacity: 0;\n}\n.fade2-enter-active,\n.fade2-exit-active {\n  transition: opacity 330ms;\n}\n";
 styleInject(css_248z$4);
 
-var _templateObject$d, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
+var _templateObject$e, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
 
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -49533,10 +49565,10 @@ var getBorderSyle$1 = function getBorderSyle(borderStyle, read, theme, color) {
   return css;
 };
 
-var Container$c = newStyled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n  box-shadow: ", ";\n  border-radius: 3px;\n  padding: 0 4px;\n"])), function (props) {
+var Container$d = newStyled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n  box-shadow: ", ";\n  border-radius: 3px;\n  padding: 0 4px;\n"])), function (props) {
   return props.shadow === false ? "0" : "0 0 12px #bebebe";
 });
-var TableContainer$1 = newStyled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default'](["\n  font-family: var(--font-base-ubuntu);\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n"])));
+var TableContainer$1 = newStyled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n  font-family: var(--font-base-ubuntu);\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n"])));
 var PaginationContainer$1 = newStyled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n  border-top: 1px solid #80808025;\n"])));
 var FormContainer$2 = newStyled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral__default['default'](["\n  height: 100%;\n  // overflow-y: auto;\n  // max-height: calc(100vh - 120px);\n  border-radius: 3px;\n\n  ", "\n"])), function (props) {
   return getBorderSyle$1(props.borderStyle, props.read, props.theme, props.color);
@@ -49598,12 +49630,10 @@ var DataView = function DataView(props) {
       GoToAdd = _props$GoToAdd === void 0 ? emptyFunc : _props$GoToAdd;
       props.GoToAddWithCopy;
       var _props$DiscardEdited = props.DiscardEdited,
-      DiscardEdited = _props$DiscardEdited === void 0 ? emptyFunc : _props$DiscardEdited,
-      _props$SetSelectedDat = props.SetSelectedData,
-      SetSelectedData = _props$SetSelectedDat === void 0 ? emptyFunc : _props$SetSelectedDat,
-      _props$ClearSelectedD = props.ClearSelectedData,
-      ClearSelectedData = _props$ClearSelectedD === void 0 ? emptyFunc : _props$ClearSelectedD,
-      _props$Localization = props.Localization,
+      DiscardEdited = _props$DiscardEdited === void 0 ? emptyFunc : _props$DiscardEdited;
+      props.SetSelectedData;
+      props.ClearSelectedData;
+      var _props$Localization = props.Localization,
       Localization = _props$Localization === void 0 ? {} : _props$Localization,
       _props$Export = props.Export,
       Export = _props$Export === void 0 ? function () {} : _props$Export,
@@ -49679,15 +49709,15 @@ var DataView = function DataView(props) {
     size: size,
     color: color
   }; //======== LOOKUP ========
-
-  React.useEffect(function () {
-    if (General.IsLookup) SetSelectedData(Lookup.SelectedData);
-  }, [Lookup.SelectedData]);
-  React.useEffect(function () {
-    return function cleanup() {
-      if (General.IsLookup) ClearSelectedData();
-    };
-  }, []); //======== CONFIGS ========
+  // useEffect(() => {
+  //   if (General.IsLookup) SetSelectedData(Lookup.SelectedData);
+  // }, [Lookup.SelectedData]);
+  // useEffect(() => {
+  //   return function cleanup() {
+  //     if (General.IsLookup) ClearSelectedData();
+  //   };
+  // }, []);
+  //======== CONFIGS ========
 
   var formViewMovementConfig = {
     Dirty: Form.Dirty,
@@ -49719,6 +49749,9 @@ var DataView = function DataView(props) {
     SelectedData: Table.SelectedData,
     ChangeToFormView: ChangeToFormView,
     //---------------------------
+    IsLookup: General.IsLookup,
+    LookupTakeItem: Lookup.LookupTakeItem ? Lookup.LookupTakeItem : function () {},
+    //---------------------------
     EnableOrdering: Options.EnableOrdering,
     Column: Ordering.Column,
     Accessor: Ordering.Accessor,
@@ -49749,27 +49782,6 @@ var DataView = function DataView(props) {
     if (Form.Mode === FormMode.ADD) return "add";
   }; //======== RENDER ========
 
-
-  var renderLookupTakeValues = function renderLookupTakeValues() {
-    if (General.IsLookup) {
-      var loading = freezeLoading([Table.SelectedData.length === 0]);
-      return /*#__PURE__*/React__default['default'].createElement(FlexItem$1, null, /*#__PURE__*/React__default['default'].createElement(Button$1, {
-        tooltip: Localization.TakeValues,
-        onClick: function onClick() {
-          if (!loading) {
-            Lookup.TakeValues(Table.SelectedData);
-            if (ClearSelectedData) ClearSelectedData();
-          }
-        },
-        disabled: Table.SelectedData.length === 0,
-        icon: "arrow-circle-down",
-        inverted: true
-      }));
-    }
-
-    return false;
-  };
-
   var renderContextMenu = function renderContextMenu() {
     if (Options.EnableActions && General.CurrentView === ViewType.TABLE_VIEW && Table.Actions && Table.Actions.length > 0) {
       return /*#__PURE__*/React__default['default'].createElement(FlexItem$1, null, /*#__PURE__*/React__default['default'].createElement(DropdownMenu, {
@@ -49895,7 +49907,7 @@ var DataView = function DataView(props) {
     var x6 = General.CurrentView !== "TableView" ? false : true;
     var x7 = General.IsLookup && Table.SelectionType === "multiple" ? true : false;
     var x8 = Options.EnableActions && General.CurrentView === ViewType.TABLE_VIEW && Table.Actions && Table.Actions.length > 0;
-    if (x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8) return /*#__PURE__*/React__default['default'].createElement(HeaderContainer$1, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderLookupTakeValues(), renderContextMenu());
+    if (x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8) return /*#__PURE__*/React__default['default'].createElement(HeaderContainer$1, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderContextMenu());
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
   };
 
@@ -49947,7 +49959,7 @@ var DataView = function DataView(props) {
 
   var renderComponent = function renderComponent() {
     var key = General.CurrentView !== "TableView" && General.DataFromBackend;
-    return /*#__PURE__*/React__default['default'].createElement(Container$c, _extends__default['default']({}, themeProps, {
+    return /*#__PURE__*/React__default['default'].createElement(Container$d, _extends__default['default']({}, themeProps, {
       shadow: Shadow
     }), renderFiltering(), renderHeader(), /*#__PURE__*/React__default['default'].createElement(SwitchTransition$1, {
       mode: "out-in"
@@ -49982,8 +49994,8 @@ DataView.propTypes = {
   color: PropTypes__default['default'].string
 };
 
-var _templateObject$c;
-var Item$1 = newStyled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\n  padding-left: 0.1875rem;\n  padding-right: 0.25rem;\n"])));
+var _templateObject$d;
+var Item$1 = newStyled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n  padding-left: 0.1875rem;\n  padding-right: 0.25rem;\n"])));
 
 var FormMovement = function FormMovement(props) {
   //====== PROPS ======
@@ -50093,9 +50105,9 @@ FormMovement.propTypes = {
 var css_248z$3 = "@charset \"UTF-8\";\n@import \"https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap\";\n\n:root {\n  /* BASE COLORS */\n  --color-base-blue: #00537a;\n  --color-base-blue-darker: #003b57;\n  --color-base-blue-lighter: #006999;\n  --color-base-gray: #a2a5ab;\n  --color-base-gray-darker: #777a80;\n  --color-base-gray-lighter: #dee1e6;\n  --color-base-gray-lightest: #f0f2f7;\n  --color-base-green: #2a963c;\n  --color-base-green-darker: #21732f;\n  --color-base-green-ligher: #3eb051;\n  --color-base-red: #e0223e;\n  --color-base-red-darker: #e3566b;\n  --color-base-red-ligher: #9c1f32;\n  --color-base-dirty-white: #fcfcfc;\n  --color-base-white: white;\n  --color-base-backgroud: #dceff5;\n\n  /* BASE FONTS */\n  --font-base-ubuntu: \"Ubuntu\", sans-serif;\n  --font-size-base: 14px;\n\n  /* DISABLED */\n  --disabled-bg-color: #dedede;\n  --disabled-text-color: #666666;\n\n  /* TRANSITIONS */\n  --transition-base-duration: 220ms;\n}\n\n.styles-module_baseContainer__38IbG {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 1px;\n  background-color: inherit;\n  background: inherit;\n  color: inherit;\n  width: max-content;\n  font-family: var(--font-base-ubuntu);\n}\n\n.styles-module_baseContainerWithSideLabel__2emzZ {\n  width: min-content;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  padding: 1px;\n  background-color: inherit;\n  background: inherit;\n  color: inherit;\n  width: max-content;\n  font-family: var(--font-base-ubuntu);\n}\n\n.styles-module_baseContainerWithSideLabel__2emzZ .styles-module_baseLabel__2rgVW {\n  width: auto;\n}\n\n.styles-module_baseLabel__2rgVW {\n  font-size: 0.8em;\n  font-weight: 400;\n  color: var(--color-base-gray-darker);\n  width: 100%;\n  display: flex;\n  justify-content: left;\n  align-items: flex-end;\n  height: 1em;\n  min-height: 1em;\n}\n\n.styles-module_baseInputHolder__3VF0D {\n  border: 0px;\n  height: 2em;\n  min-height: 2em;\n  width: 100%;\n}\n\n.styles-module_baseInputHolder__3VF0D > div {\n  min-height: 100%;\n}\n\n.styles-module_baseInputHolder__3VF0D > div > div {\n  min-height: 100%;\n}\n\n.styles-module_baseErrorText__M44G8 {\n  font-size: 0.8em;\n  font-weight: 400;\n  color: var(--color-base-red);\n  width: 100%;\n  display: flex;\n  justify-content: left;\n  align-items: flex-start;\n  height: 1em;\n  min-height: 1em;\n}\n\n/*----------------- ICONS AND FONTS ------------------------*/\n\n.styles-module_lnc__16g9S {\n  font-family: \"lnclines\";\n  font-size: 12px;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.styles-module_ubuntuFont__ybxMw {\n  font-family: var(--font-base-ubuntu);\n}\n\n.styles-module_lnc_anchor__1mOUZ:before {\n  content: \"\\61\";\n}\n.styles-module_lnc_armchair__1ya1K:before {\n  content: \"\\62\";\n}\n.styles-module_lnc_arrow_contract__g0Nfy:before {\n  content: \"\\63\";\n}\n.styles-module_lnc_arrow_down__3vJHh:before {\n  content: \"\\64\";\n}\n.styles-module_lnc_arrow_down_up__35ACC:before {\n  content: \"\\65\";\n}\n.styles-module_lnc_arrow_expand__wPIqf:before {\n  content: \"\\66\";\n}\n.styles-module_lnc_arrow_left___DGbf:before {\n  content: \"\\67\";\n}\n.styles-module_lnc_arrow_left_right__1PiwM:before {\n  content: \"\\68\";\n}\n.styles-module_lnc_arrow_right__1buc1:before {\n  content: \"\\69\";\n}\n.styles-module_lnc_arrow_right_left__A_6hC:before {\n  content: \"\\6a\";\n}\n.styles-module_lnc_arrow_up__27fzF:before {\n  content: \"\\6b\";\n}\n.styles-module_lnc_arrow_up_down__3XdKK:before {\n  content: \"\\6c\";\n}\n.styles-module_lnc_arrow_x__2PHh1:before {\n  content: \"\\6d\";\n}\n.styles-module_lnc_arrow_y__2IWUO:before {\n  content: \"\\6e\";\n}\n.styles-module_lnc_at__2SfkV:before {\n  content: \"\\6f\";\n}\n.styles-module_lnc_badge__1ar9m:before {\n  content: \"\\70\";\n}\n.styles-module_lnc_battery_empty__2UtUR:before {\n  content: \"\\71\";\n}\n.styles-module_lnc_battery_full__3iSFV:before {\n  content: \"\\72\";\n}\n.styles-module_lnc_battery_halfempty__HJsq8:before {\n  content: \"\\73\";\n}\n.styles-module_lnc_battery_halffull__34JQt:before {\n  content: \"\\74\";\n}\n.styles-module_lnc_bed__2Bv8u:before {\n  content: \"\\75\";\n}\n.styles-module_lnc_bell__3-99o:before {\n  content: \"\\76\";\n}\n.styles-module_lnc_bill__2WK08:before {\n  content: \"\\77\";\n}\n.styles-module_lnc_book__2uUqR:before {\n  content: \"\\78\";\n}\n.styles-module_lnc_bookmark__3xtMI:before {\n  content: \"\\79\";\n}\n.styles-module_lnc_box__1GQ6r:before {\n  content: \"\\7a\";\n}\n.styles-module_lnc_box2__1mgu3:before {\n  content: \"\\41\";\n}\n.styles-module_lnc_briefcase__1WEOE:before {\n  content: \"\\42\";\n}\n.styles-module_lnc_brightness__2b3sQ:before {\n  content: \"\\43\";\n}\n.styles-module_lnc_broom__lxEs9:before {\n  content: \"\\44\";\n}\n.styles-module_lnc_browser__11uX3:before {\n  content: \"\\45\";\n}\n.styles-module_lnc_browser_software__3WUtv:before {\n  content: \"\\46\";\n}\n.styles-module_lnc_brush__6mPfK:before {\n  content: \"\\47\";\n}\n.styles-module_lnc_bubble__19XCr:before {\n  content: \"\\48\";\n}\n.styles-module_lnc_bubble_check__3EDz2:before {\n  content: \"\\49\";\n}\n.styles-module_lnc_bubble_dots__3UiH_:before {\n  content: \"\\4a\";\n}\n.styles-module_lnc_bubbles__3IArb:before {\n  content: \"\\4b\";\n}\n.styles-module_lnc_building__2xoeI:before {\n  content: \"\\4c\";\n}\n.styles-module_lnc_bulb__o7i2f:before {\n  content: \"\\4d\";\n}\n.styles-module_lnc_calculations__1xUSk:before {\n  content: \"\\4e\";\n}\n.styles-module_lnc_calendar__3FtsF:before {\n  content: \"\\4f\";\n}\n.styles-module_lnc_cctv__3RxxA:before {\n  content: \"\\50\";\n}\n.styles-module_lnc_chart__1vxPE:before {\n  content: \"\\51\";\n}\n.styles-module_lnc_chart_down__3lKSV:before {\n  content: \"\\52\";\n}\n.styles-module_lnc_chart_pie__-pJZV:before {\n  content: \"\\53\";\n}\n.styles-module_lnc_chart_up__1ZO5x:before {\n  content: \"\\54\";\n}\n.styles-module_lnc_check__1RPUp:before {\n  content: \"\\55\";\n}\n.styles-module_lnc_checkbox__2Dzv0:before {\n  content: \"\\56\";\n}\n.styles-module_lnc_clock__1_sBx:before {\n  content: \"\\57\";\n}\n.styles-module_lnc_clone__3EVg8:before {\n  content: \"\\58\";\n}\n.styles-module_lnc_cloud__3G0gK:before {\n  content: \"\\59\";\n}\n.styles-module_lnc_cloud_download__3wjl3:before {\n  content: \"\\5a\";\n}\n.styles-module_lnc_cloud_no__2_RSN:before {\n  content: \"\\30\";\n}\n.styles-module_lnc_cloud_upload__UtjX8:before {\n  content: \"\\31\";\n}\n.styles-module_lnc_code__83D7f:before {\n  content: \"\\32\";\n}\n.styles-module_lnc_coffe__3lvps:before {\n  content: \"\\33\";\n}\n.styles-module_lnc_cog__1cfYg:before {\n  content: \"\\34\";\n}\n.styles-module_lnc_comparation__15_VM:before {\n  content: \"\\35\";\n}\n.styles-module_lnc_contract__3vyx2:before {\n  content: \"\\36\";\n}\n.styles-module_lnc_cpu__1ASGP:before {\n  content: \"\\37\";\n}\n.styles-module_lnc_creditcard__2wdg_:before {\n  content: \"\\38\";\n}\n.styles-module_lnc_cursor__1keXd:before {\n  content: \"\\39\";\n}\n.styles-module_lnc_cut__3n_2y:before {\n  content: \"\\21\";\n}\n.styles-module_lnc_dashboard__3nW31:before {\n  content: \"\\22\";\n}\n.styles-module_lnc_database__2n8Gb:before {\n  content: \"\\23\";\n}\n.styles-module_lnc_down__2C-R7:before {\n  content: \"\\24\";\n}\n.styles-module_lnc_download__3W4eN:before {\n  content: \"\\25\";\n}\n.styles-module_lnc_download2__FQJRc:before {\n  content: \"\\26\";\n}\n.styles-module_lnc_drop__prcFy:before {\n  content: \"\\27\";\n}\n.styles-module_lnc_earth__2kk6C:before {\n  content: \"\\28\";\n}\n.styles-module_lnc_equal__1idc4:before {\n  content: \"\\29\";\n}\n.styles-module_lnc_eraser__140Tm:before {\n  content: \"\\2a\";\n}\n.styles-module_lnc_exchange__1F8Xe:before {\n  content: \"\\2b\";\n}\n.styles-module_lnc_exchange2__TK1ey:before {\n  content: \"\\2c\";\n}\n.styles-module_lnc_expand__SuCNT:before {\n  content: \"\\2d\";\n}\n.styles-module_lnc_eyedropper__ztoSi:before {\n  content: \"\\2e\";\n}\n.styles-module_lnc_file__1qiUG:before {\n  content: \"\\2f\";\n}\n.styles-module_lnc_file_broken__1fRaz:before {\n  content: \"\\3a\";\n}\n.styles-module_lnc_file_check__1Afkt:before {\n  content: \"\\3b\";\n}\n.styles-module_lnc_file_download__B7cX-:before {\n  content: \"\\3c\";\n}\n.styles-module_lnc_file_image__2li0v:before {\n  content: \"\\3d\";\n}\n.styles-module_lnc_file_minus__2GUoy:before {\n  content: \"\\3e\";\n}\n.styles-module_lnc_file_plus__1tiZy:before {\n  content: \"\\3f\";\n}\n.styles-module_lnc_file_text__NwM9m:before {\n  content: \"\\40\";\n}\n.styles-module_lnc_file_upload__1IwPA:before {\n  content: \"\\5b\";\n}\n.styles-module_lnc_file_warning__2e102:before {\n  content: \"\\5d\";\n}\n.styles-module_lnc_file_x__BSBn1:before {\n  content: \"\\5e\";\n}\n.styles-module_lnc_filter__1gYeq:before {\n  content: \"\\5f\";\n}\n.styles-module_lnc_fingerprint__L3_2j:before {\n  content: \"\\60\";\n}\n.styles-module_lnc_flag__3FTpw:before {\n  content: \"\\7b\";\n}\n.styles-module_lnc_flashdrive__11xkO:before {\n  content: \"\\7c\";\n}\n.styles-module_lnc_folder__1mArN:before {\n  content: \"\\7d\";\n}\n.styles-module_lnc_fragile__a_RLx:before {\n  content: \"\\7e\";\n}\n.styles-module_lnc_glass__wBAnb:before {\n  content: \"\\5c\";\n}\n.styles-module_lnc_grid__1B2cs:before {\n  content: \"\\e000\";\n}\n.styles-module_lnc_grid_masonery__6vAwP:before {\n  content: \"\\e001\";\n}\n.styles-module_lnc_harddrive__3HecB:before {\n  content: \"\\e002\";\n}\n.styles-module_lnc_headphones__1IRid:before {\n  content: \"\\e003\";\n}\n.styles-module_lnc_heart__30_Dc:before {\n  content: \"\\e004\";\n}\n.styles-module_lnc_home__1LWG5:before {\n  content: \"\\e005\";\n}\n.styles-module_lnc_image__3XWmh:before {\n  content: \"\\e006\";\n}\n.styles-module_lnc_in__IuJWj:before {\n  content: \"\\e007\";\n}\n.styles-module_lnc_inbox__E74SS:before {\n  content: \"\\e008\";\n}\n.styles-module_lnc_infinity__1RvvQ:before {\n  content: \"\\e009\";\n}\n.styles-module_lnc_info__z95Ob:before {\n  content: \"\\e00a\";\n}\n.styles-module_lnc_injection__2IsuK:before {\n  content: \"\\e00b\";\n}\n.styles-module_lnc_internet__cxoEO:before {\n  content: \"\\e00c\";\n}\n.styles-module_lnc_internet2__3LMdv:before {\n  content: \"\\e00d\";\n}\n.styles-module_lnc_intersect__39vbH:before {\n  content: \"\\e00e\";\n}\n.styles-module_lnc_key__2y70L:before {\n  content: \"\\e00f\";\n}\n.styles-module_lnc_laptop__34gQU:before {\n  content: \"\\e010\";\n}\n.styles-module_lnc_layers__36j1J:before {\n  content: \"\\e011\";\n}\n.styles-module_lnc_layout__3Nu0-:before {\n  content: \"\\e012\";\n}\n.styles-module_lnc_leaf__TnTjW:before {\n  content: \"\\e013\";\n}\n.styles-module_lnc_left__10F5v:before {\n  content: \"\\e014\";\n}\n.styles-module_lnc_lifering__2xRtL:before {\n  content: \"\\e015\";\n}\n.styles-module_lnc_link__1L7Lq:before {\n  content: \"\\e016\";\n}\n.styles-module_lnc_list__3cGnx:before {\n  content: \"\\e017\";\n}\n.styles-module_lnc_list2__1g9i8:before {\n  content: \"\\e018\";\n}\n.styles-module_lnc_location__2K1vc:before {\n  content: \"\\e019\";\n}\n.styles-module_lnc_lock_off__1pwfe:before {\n  content: \"\\e01a\";\n}\n.styles-module_lnc_lock_on__R7CsM:before {\n  content: \"\\e01b\";\n}\n.styles-module_lnc_magnet__1xUko:before {\n  content: \"\\e01c\";\n}\n.styles-module_lnc_mail__1-4Wq:before {\n  content: \"\\e01d\";\n}\n.styles-module_lnc_map__2G6fo:before {\n  content: \"\\e01e\";\n}\n.styles-module_lnc_megaphone__1U1Tj:before {\n  content: \"\\e01f\";\n}\n.styles-module_lnc_microphone__1NMns:before {\n  content: \"\\e020\";\n}\n.styles-module_lnc_microphone_no__2RWUY:before {\n  content: \"\\e021\";\n}\n.styles-module_lnc_microscope__2AQCZ:before {\n  content: \"\\e022\";\n}\n.styles-module_lnc_minus__28NzW:before {\n  content: \"\\e023\";\n}\n.styles-module_lnc_mobile__3U8Lo:before {\n  content: \"\\e024\";\n}\n.styles-module_lnc_monitor__1FYh4:before {\n  content: \"\\e025\";\n}\n.styles-module_lnc_move__2cnG4:before {\n  content: \"\\e026\";\n}\n.styles-module_lnc_move2__2-1c-:before {\n  content: \"\\e027\";\n}\n.styles-module_lnc_network__1MijV:before {\n  content: \"\\e028\";\n}\n.styles-module_lnc_onoff__1ZOVJ:before {\n  content: \"\\e029\";\n}\n.styles-module_lnc_out___Zvj0:before {\n  content: \"\\e02a\";\n}\n.styles-module_lnc_pause__2GVgP:before {\n  content: \"\\e02b\";\n}\n.styles-module_lnc_pencil__2agKN:before {\n  content: \"\\e02c\";\n}\n.styles-module_lnc_pencil_ruler__24nqS:before {\n  content: \"\\e02d\";\n}\n.styles-module_lnc_peper_plane__1qFRM:before {\n  content: \"\\e02e\";\n}\n.styles-module_lnc_peperclip__13DaN:before {\n  content: \"\\e02f\";\n}\n.styles-module_lnc_phone__19YBI:before {\n  content: \"\\e030\";\n}\n.styles-module_lnc_phone_ringing__a3Kv8:before {\n  content: \"\\e031\";\n}\n.styles-module_lnc_photo__18Q1V:before {\n  content: \"\\e032\";\n}\n.styles-module_lnc_photo_no__3oatk:before {\n  content: \"\\e033\";\n}\n.styles-module_lnc_pin__3lM5Z:before {\n  content: \"\\e034\";\n}\n.styles-module_lnc_plaster__2vI3i:before {\n  content: \"\\e035\";\n}\n.styles-module_lnc_play__1OC8v:before {\n  content: \"\\e036\";\n}\n.styles-module_lnc_plus__1c00f:before {\n  content: \"\\e037\";\n}\n.styles-module_lnc_power_cable__Kxpjn:before {\n  content: \"\\e038\";\n}\n.styles-module_lnc_presentation__34sFZ:before {\n  content: \"\\e039\";\n}\n.styles-module_lnc_printer__CTvDs:before {\n  content: \"\\e03a\";\n}\n.styles-module_lnc_question__Fx68o:before {\n  content: \"\\e03b\";\n}\n.styles-module_lnc_redo__128IY:before {\n  content: \"\\e03c\";\n}\n.styles-module_lnc_refresh__MrGzd:before {\n  content: \"\\e03d\";\n}\n.styles-module_lnc_reload__9QGWt:before {\n  content: \"\\e03e\";\n}\n.styles-module_lnc_repeat__2zF-q:before {\n  content: \"\\e03f\";\n}\n.styles-module_lnc_replace__2NrlU:before {\n  content: \"\\e040\";\n}\n.styles-module_lnc_right__1Tjn9:before {\n  content: \"\\e041\";\n}\n.styles-module_lnc_rocket__2IgNF:before {\n  content: \"\\e042\";\n}\n.styles-module_lnc_router__3Lmyt:before {\n  content: \"\\e043\";\n}\n.styles-module_lnc_ruler__1zJy4:before {\n  content: \"\\e044\";\n}\n.styles-module_lnc_safety__ODng_:before {\n  content: \"\\e045\";\n}\n.styles-module_lnc_search__3fsCd:before {\n  content: \"\\e047\";\n}\n.styles-module_lnc_settings__aYSqN:before {\n  content: \"\\e048\";\n}\n.styles-module_lnc_settings2__1QxU2:before {\n  content: \"\\e049\";\n}\n.styles-module_lnc_share__u6ngi:before {\n  content: \"\\e04a\";\n}\n.styles-module_lnc_shield_check__2EWRM:before {\n  content: \"\\e04b\";\n}\n.styles-module_lnc_shop_basket__26vEs:before {\n  content: \"\\e04c\";\n}\n.styles-module_lnc_shop_cart__3N0Nv:before {\n  content: \"\\e04d\";\n}\n.styles-module_lnc_shop_cart2__1TlL0:before {\n  content: \"\\e04e\";\n}\n.styles-module_lnc_shuffle__vZLlv:before {\n  content: \"\\e04f\";\n}\n.styles-module_lnc_slash__2YK_q:before {\n  content: \"\\e050\";\n}\n.styles-module_lnc_spanner__129hA:before {\n  content: \"\\e051\";\n}\n.styles-module_lnc_speaker__19oJH:before {\n  content: \"\\e052\";\n}\n.styles-module_lnc_speaker_minus__BLI9-:before {\n  content: \"\\e053\";\n}\n.styles-module_lnc_speaker_plus__1QtrR:before {\n  content: \"\\e054\";\n}\n.styles-module_lnc_speaker_x__1VIfZ:before {\n  content: \"\\e055\";\n}\n.styles-module_lnc_star__3kpNQ:before {\n  content: \"\\e056\";\n}\n.styles-module_lnc_stop__tNiYb:before {\n  content: \"\\e057\";\n}\n.styles-module_lnc_tag__2Fv-2:before {\n  content: \"\\e059\";\n}\n.styles-module_lnc_target__VrxN8:before {\n  content: \"\\e05a\";\n}\n.styles-module_lnc_trash__3cF6w:before {\n  content: \"\\e05b\";\n}\n.styles-module_lnc_trolley__3OvXo:before {\n  content: \"\\e05c\";\n}\n.styles-module_lnc_undo__1tJoX:before {\n  content: \"\\e05d\";\n}\n.styles-module_lnc_up__3eKPI:before {\n  content: \"\\e05e\";\n}\n.styles-module_lnc_upload__3gwmX:before {\n  content: \"\\e05f\";\n}\n.styles-module_lnc_upload2__3hTP1:before {\n  content: \"\\e060\";\n}\n.styles-module_lnc_user__1942u:before {\n  content: \"\\e061\";\n}\n.styles-module_lnc_user2__21L0B:before {\n  content: \"\\e062\";\n}\n.styles-module_lnc_user3__12PJt:before {\n  content: \"\\e063\";\n}\n.styles-module_lnc_users__uUh5y:before {\n  content: \"\\e064\";\n}\n.styles-module_lnc_video_player__eTudW:before {\n  content: \"\\e065\";\n}\n.styles-module_lnc_wallet__NWMof:before {\n  content: \"\\e066\";\n}\n.styles-module_lnc_warning__1XnCh:before {\n  content: \"\\e067\";\n}\n.styles-module_lnc_wheelchair__-fneh:before {\n  content: \"\\e068\";\n}\n.styles-module_lnc_wifi__1PB6c:before {\n  content: \"\\e069\";\n}\n.styles-module_lnc_x__2NqwY:before {\n  content: \"\\e06a\";\n}\n.styles-module_lnc_zoom_in__2p5NL:before {\n  content: \"\\e06b\";\n}\n.styles-module_lnc_zoom_out__3-N8X:before {\n  content: \"\\e06c\";\n}\n.styles-module_lnc_firewall__1T-xo:before {\n  content: \"\\e06d\";\n}\n.styles-module_lnc_down_double__eQn46:before {\n  content: \"\\e046\";\n}\n.styles-module_lnc_file_search__2NdXs:before {\n  content: \"\\e06e\";\n}\n.styles-module_lnc_filter2__25zUC:before {\n  content: \"\\e06f\";\n}\n.styles-module_lnc_flash__2spoO:before {\n  content: \"\\e070\";\n}\n.styles-module_lnc_left_double__lGlAL:before {\n  content: \"\\e071\";\n}\n.styles-module_lnc_right_double__2LGrY:before {\n  content: \"\\e072\";\n}\n.styles-module_lnc_save__1es4N:before {\n  content: \"\\e073\";\n}\n.styles-module_lnc_save_plus__3mggy:before {\n  content: \"\\e074\";\n}\n.styles-module_lnc_server__npXWA:before {\n  content: \"\\e075\";\n}\n.styles-module_lnc_table__Wz3bc:before {\n  content: \"\\e076\";\n}\n.styles-module_lnc_table2__11-XY:before {\n  content: \"\\e077\";\n}\n.styles-module_lnc_time_back__3_jgl:before {\n  content: \"\\e078\";\n}\n.styles-module_lnc_time_forward__3ttuV:before {\n  content: \"\\e079\";\n}\n.styles-module_lnc_up_double__2McTh:before {\n  content: \"\\e07a\";\n}\n.styles-module_lnc_align_center__1lFF1:before {\n  content: \"\\e058\";\n}\n.styles-module_lnc_align_left__2EEHH:before {\n  content: \"\\e07b\";\n}\n.styles-module_lnc_align_right__wdwMo:before {\n  content: \"\\e07c\";\n}\n.styles-module_lnc_car__2O1gg:before {\n  content: \"\\e07d\";\n}\n.styles-module_lnc_cashregister__29tQ6:before {\n  content: \"\\e07e\";\n}\n.styles-module_lnc_file_excel__1vcQh:before {\n  content: \"\\e07f\";\n}\n.styles-module_lnc_file_pdf__2t9O1:before {\n  content: \"\\e080\";\n}\n.styles-module_lnc_file_word__2DGwd:before {\n  content: \"\\e081\";\n}\n.styles-module_lnc_puzzle__2C4g9:before {\n  content: \"\\e082\";\n}\n.styles-module_lnc_rotate_vertical__NlAcx:before {\n  content: \"\\e083\";\n}\n.styles-module_lnc_rotate_horizontal__1A2w-:before {\n  content: \"\\e084\";\n}\n.styles-module_lnc_sum__10wqe:before {\n  content: \"\\e085\";\n}\n.styles-module_lnc_usb__12ZHW:before {\n  content: \"\\e086\";\n}\n.styles-module_lnc_checklist__2Sfo3:before {\n  content: \"\\e087\";\n}\n.styles-module_lnc_checklist2__3UhHY:before {\n  content: \"\\e088\";\n}\n.styles-module_lnc_concentrate__umSCo:before {\n  content: \"\\e089\";\n}\n.styles-module_lnc_cutlery__13cgD:before {\n  content: \"\\e08a\";\n}\n.styles-module_lnc_exchange3__3AZld:before {\n  content: \"\\e08b\";\n}\n.styles-module_lnc_graduate_cap__1ByaN:before {\n  content: \"\\e08c\";\n}\n.styles-module_lnc_id__2geFo:before {\n  content: \"\\e08d\";\n}\n.styles-module_lnc_printer_check__3iWO0:before {\n  content: \"\\e08e\";\n}\n.styles-module_lnc_slide_left__1lNSO:before {\n  content: \"\\e08f\";\n}\n.styles-module_lnc_slide_right__2Kkpl:before {\n  content: \"\\e090\";\n}\n.styles-module_lnc_user_switch__2Hki4:before {\n  content: \"\\e091\";\n}\n.styles-module_lnc_aggregate__1b8Xb:before {\n  content: \"\\e092\";\n}\n.styles-module_lnc_backspace__2SgjG:before {\n  content: \"\\e093\";\n}\n.styles-module_lnc_code2__1EbMZ:before {\n  content: \"\\e094\";\n}\n.styles-module_lnc_edit__3BwLt:before {\n  content: \"\\e095\";\n}\n.styles-module_lnc_handshake__k9t7X:before {\n  content: \"\\e096\";\n}\n.styles-module_lnc_input__1BsI_:before {\n  content: \"\\e097\";\n}\n.styles-module_lnc_intersect2__D0t4N:before {\n  content: \"\\e098\";\n}\n.styles-module_lnc_logo_dropbox__1bBky:before {\n  content: \"\\e099\";\n}\n.styles-module_lnc_logo_facebook__2LFx7:before {\n  content: \"\\e09a\";\n}\n.styles-module_lnc_logo_gdrive__lm2Xx:before {\n  content: \"\\e09b\";\n}\n.styles-module_lnc_logo_hangouts__3mBpc:before {\n  content: \"\\e09c\";\n}\n.styles-module_lnc_logo_instagram__1yoE_:before {\n  content: \"\\e09d\";\n}\n.styles-module_lnc_logo_linkedin___bnn1:before {\n  content: \"\\e09e\";\n}\n.styles-module_lnc_logo_messenger__22UXJ:before {\n  content: \"\\e09f\";\n}\n.styles-module_lnc_logo_paypal__1ctNm:before {\n  content: \"\\e0a0\";\n}\n.styles-module_lnc_logo_pinterest__2WBvf:before {\n  content: \"\\e0a1\";\n}\n.styles-module_lnc_logo_playstore__2dNKy:before {\n  content: \"\\e0a2\";\n}\n.styles-module_lnc_logo_skype__4zqs0:before {\n  content: \"\\e0a3\";\n}\n.styles-module_lnc_logo_twitter__2qNGG:before {\n  content: \"\\e0a4\";\n}\n.styles-module_lnc_logo_viber__a0Vu8:before {\n  content: \"\\e0a5\";\n}\n.styles-module_lnc_logo_whatsapp__1pRGX:before {\n  content: \"\\e0a6\";\n}\n.styles-module_lnc_logo_youtube__2rBKz:before {\n  content: \"\\e0a7\";\n}\n.styles-module_lnc_measure__7wXpY:before {\n  content: \"\\e0a8\";\n}\n.styles-module_lnc_percent__3qmzf:before {\n  content: \"\\e0a9\";\n}\n.styles-module_lnc_scan_barcode__2BfUT:before {\n  content: \"\\e0aa\";\n}\n.styles-module_lnc_scan_number__20DM5:before {\n  content: \"\\e0ab\";\n}\n.styles-module_lnc_scan_qr__2TG1C:before {\n  content: \"\\e0ac\";\n}\n.styles-module_lnc_user_speaker__2XqGz:before {\n  content: \"\\e0ad\";\n}\n.styles-module_lnc_users_connected__2gVEp:before {\n  content: \"\\e0ae\";\n}\n.styles-module_lnc_dots__iFPx7:before {\n  content: \"\\e0af\";\n}\n.styles-module_lnc_grid_plus__13nKs:before {\n  content: \"\\e0b0\";\n}\n.styles-module_lnc_sort_vertical__27lK1:before {\n  content: \"\\e0b1\";\n}\n.styles-module_lnc_sort_horizontal__NCpoS:before {\n  content: \"\\e0b2\";\n}\n.styles-module_lnc_grid_minus__YaD5A:before {\n  content: \"\\e0b3\";\n}\n.styles-module_lnc_calendar_check__Xk2zp:before {\n  content: \"\\e0b4\";\n}\n.styles-module_lnc_calendar_minus__1WJp0:before {\n  content: \"\\e0b5\";\n}\n.styles-module_lnc_calendar_plus__3dmG_:before {\n  content: \"\\e0b6\";\n}\n.styles-module_lnc_calendar_x__MI4zD:before {\n  content: \"\\e0b7\";\n}\n.styles-module_lnc_eye__3StZy:before {\n  content: \"\\e0b8\";\n}\n.styles-module_lnc_eye_no__3YiHU:before {\n  content: \"\\e0b9\";\n}\n";
 styleInject(css_248z$3);
 
-var _templateObject$b, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$6, _templateObject6$4, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1;
-var Container$b = newStyled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
-var Wrapper = newStyled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default']([""])));
+var _templateObject$c, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$6, _templateObject6$4, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1;
+var Container$c = newStyled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
+var Wrapper = newStyled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default']([""])));
 var TableTable = newStyled.table(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n  border-collapse: collapse;\n  width: 100%;\n"])));
 var TableHead = newStyled.thead(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
 var TableHeadRow = newStyled.tr(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid #80808025;\n"])));
@@ -50302,7 +50314,7 @@ var Table = function Table(props) {
     }));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$b, null, /*#__PURE__*/React__default['default'].createElement(Wrapper, null, /*#__PURE__*/React__default['default'].createElement(TableTable, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$c, null, /*#__PURE__*/React__default['default'].createElement(Wrapper, null, /*#__PURE__*/React__default['default'].createElement(TableTable, {
     cellSpacing: 0
   }, /*#__PURE__*/React__default['default'].createElement(TableHead, null, /*#__PURE__*/React__default['default'].createElement(TableHeadRow, null, renderSelectAllHeaderCell(), /*#__PURE__*/React__default['default'].createElement("th", {
     style: {
@@ -50592,7 +50604,7 @@ uuid.v4 = v4;
 
 var uuid_1 = uuid;
 
-var _templateObject$a, _templateObject2$7, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12$1;
+var _templateObject$b, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12$1;
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -50700,8 +50712,8 @@ var getBorderSyle = function getBorderSyle(borderStyle, read, theme, color) {
   return css;
 };
 
-var Container$a = newStyled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n  box-shadow: 0 0 12px #bebebe;\n  borderradius: 3px;\n  padding: 4px;\n"])));
-var TableContainer = newStyled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n  font-family: var(--font-base-ubuntu);\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n"])));
+var Container$b = newStyled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral__default['default'](["\n  box-shadow: 0 0 12px #bebebe;\n  borderradius: 3px;\n  padding: 4px;\n"])));
+var TableContainer = newStyled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n  font-family: var(--font-base-ubuntu);\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n"])));
 var PaginationContainer = newStyled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n  margin-top: 6px;\n  border-top: 1px solid #80808025;\n"])));
 var FormContainer$1 = newStyled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n  height: 100%;\n  overflow-y: auto;\n  max-height: calc(100vh - 120px);\n  ", "\n"])), function (props) {
   return getBorderSyle(props.borderStyle, props.read, props.theme, props.color);
@@ -51958,7 +51970,7 @@ var Grid = /*#__PURE__*/React__default['default'].forwardRef(function (props, re
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$a, themeProps, renderHeader(), /*#__PURE__*/React__default['default'].createElement(TableContainer, themeProps, renderDeleteConfirmationBox(), renderTable(), renderForm(), renderDeveloperMessages()), renderPagination());
+  return /*#__PURE__*/React__default['default'].createElement(Container$b, themeProps, renderHeader(), /*#__PURE__*/React__default['default'].createElement(TableContainer, themeProps, renderDeleteConfirmationBox(), renderTable(), renderForm(), renderDeveloperMessages()), renderPagination());
 });
 Grid.defaultProps = {
   theme: theme,
@@ -51991,7 +52003,7 @@ Grid.propTypes = {
   Developer: PropTypes__default['default'].bool
 };
 
-var _templateObject$9;
+var _templateObject$a;
 
 var paddingBySize$5 = function paddingBySize(size, hasText) {
   if (size === "small") return "0.34375rem 0.4rem";
@@ -52005,7 +52017,7 @@ var heightBySize$4 = function heightBySize(size) {
   if (size === "large") return "2.375rem";
 };
 
-var Button = newStyled.button(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral__default['default'](["\n  font-size: ", ";\n  font-family: ", ";\n  padding: ", ";\n  max-height: ", ";\n  min-height: ", ";\n  flex-grow: 1;\n  appearance: none;\n  outline: none;\n  border: none;\n  transition: all 220ms;\n  display: inline-block;\n  cursor: pointer;\n  margin: 0.125rem;\n  border-radius: 0.125rem;\n  border: 0.09375rem solid transparent;\n  ", "\n  color: ", ";\n  background-color: ", ";\n\n  &:hover {\n    ", "\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n\n    color: ", ";\n    opacity: 0.7;\n    cursor: default;\n    border: 0.09375rem solid #bfbfbf80;\n  }\n"])), function (props) {
+var Button = newStyled.button(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n  font-size: ", ";\n  font-family: ", ";\n  padding: ", ";\n  max-height: ", ";\n  min-height: ", ";\n  flex-grow: 1;\n  appearance: none;\n  outline: none;\n  border: none;\n  transition: all 220ms;\n  display: inline-block;\n  cursor: pointer;\n  margin: 0.125rem;\n  border-radius: 0.125rem;\n  border: 0.09375rem solid transparent;\n  ", "\n  color: ", ";\n  background-color: ", ";\n\n  &:hover {\n    ", "\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n\n    color: ", ";\n    opacity: 0.7;\n    cursor: default;\n    border: 0.09375rem solid #bfbfbf80;\n  }\n"])), function (props) {
   return props.theme.typography[props.size].fontSize;
 }, function (props) {
   return props.theme.typography.fontFamily;
@@ -52055,8 +52067,8 @@ var TagItem = function TagItem(props) {
   }, text);
 };
 
-var _templateObject$8;
-var Container$9 = newStyled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  width: fit-content;\n  flex-direction: row;\n  padding: 3px;\n  border: 1.5px solid #bfbfbf80;\n  border-radius: 2px;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n"])));
+var _templateObject$9;
+var Container$a = newStyled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  width: fit-content;\n  flex-direction: row;\n  padding: 3px;\n  border: 1.5px solid #bfbfbf80;\n  border-radius: 2px;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n"])));
 
 var TagSelector = function TagSelector(props) {
   var _props$tags = props.tags,
@@ -52095,7 +52107,7 @@ var TagSelector = function TagSelector(props) {
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$9, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$a, {
     size: size,
     color: color,
     theme: theme,
@@ -52177,7 +52189,7 @@ var ItemCounter = function ItemCounter(props) {
   }
 };
 
-var _templateObject$7, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$2;
+var _templateObject$8, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$2;
 
 var getBtnContainerColor = function getBtnContainerColor(props) {
   if (props.additional && props.inactive) return props.theme.palette.gray[100];
@@ -52205,8 +52217,8 @@ var heightBySize$3 = function heightBySize(size) {
   if (size === "large") return "2.25rem";
 };
 
-var Container$8 = newStyled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n"])));
-var Inner$3 = newStyled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: row;\n  border: 0.0625rem solid #bfbfbf80;\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0;\n  margin: 0;\n  border-radius: 0.5rem;\n  cursor: pointer;\n\n  min-height: ", ";\n  max-height: ", ";\n"])), function (props) {
+var Container$9 = newStyled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n"])));
+var Inner$3 = newStyled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: row;\n  border: 0.0625rem solid #bfbfbf80;\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0;\n  margin: 0;\n  border-radius: 0.5rem;\n  cursor: pointer;\n\n  min-height: ", ";\n  max-height: ", ";\n"])), function (props) {
   return props.theme.typography.fontFamily;
 }, function (props) {
   return props.theme.typography[props.size].fontSize;
@@ -52261,7 +52273,7 @@ var Chip = function Chip(props) {
     disabled: disabled,
     inactive: inactive
   };
-  return /*#__PURE__*/React__default['default'].createElement(Container$8, _extends__default['default']({}, themeProps, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$9, _extends__default['default']({}, themeProps, {
     className: className
   }), /*#__PURE__*/React__default['default'].createElement(Inner$3, themeProps, /*#__PURE__*/React__default['default'].createElement(Text$1, _extends__default['default']({}, themeProps, {
     onClick: function onClick() {
@@ -52316,7 +52328,7 @@ Chip.propTypes = {
 var css_248z$1 = ".item-enter {\n  opacity: 0;\n}\n\n.item-enter-active {\n  transition: all 0.2s ease-in;\n  opacity: 1;\n}\n\n.item-exit {\n}\n\n.item-exit-active {\n  opacity: 0;\n  transition: opacity 200ms ease-out;\n}\n";
 styleInject(css_248z$1);
 
-var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1;
+var _templateObject$7, _templateObject2$6, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -52340,8 +52352,8 @@ var iconPaddingBySize$1 = function iconPaddingBySize(size) {
   if (size === "large") return "0.78125rem 0.625rem 0.375rem 0.625rem";
 };
 
-var Container$7 = newStyled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box;\n  border: 0.09375rem solid #bfbfbf;\n  background-color: white;\n  border-radius: 0.1875rem;\n  width: 100%;\n\n  transition: all 250ms ease;\n"])));
-var ItemContainer$1 = newStyled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n  padding: 0.15rem;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-grow: 10;\n  transition: all 250ms ease;\n"])));
+var Container$8 = newStyled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box;\n  border: 0.09375rem solid #bfbfbf;\n  background-color: white;\n  border-radius: 0.1875rem;\n  width: 100%;\n\n  transition: all 250ms ease;\n"])));
+var ItemContainer$1 = newStyled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default['default'](["\n  padding: 0.15rem;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-grow: 10;\n  transition: all 250ms ease;\n"])));
 var ItemWrapper$1 = newStyled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  margin: 0.125rem;\n  flex-grow: 1;\n  transition: all 250ms ease;\n\n  & > div {\n    width: 100%;\n  }\n"])));
 var InputContainer$1 = newStyled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n  margin: 0.125rem;\n  margin-left: 0.25rem;\n  flex-grow: 1;\n  transition: all 250ms ease;\n"])));
 var Input$1 = newStyled.input(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n  width: 100%;\n  transition: all 250ms ease;\n  text-decoration: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  box-sizing: border-box;\n  outline: none;\n  border: none;\n  padding: ", ";\n  background-color: transparent;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n  border-radius: 0.1875rem;\n"])), function (props) {
@@ -52499,7 +52511,7 @@ var SearchBar = function SearchBar(props) {
     }
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$7, _extends__default['default']({
+  return /*#__PURE__*/React__default['default'].createElement(Container$8, _extends__default['default']({
     className: className
   }, themeProps), /*#__PURE__*/React__default['default'].createElement(Inner$2, themeProps, /*#__PURE__*/React__default['default'].createElement(SearchIcon, themeProps, /*#__PURE__*/React__default['default'].createElement("i", {
     className: "fas fa-search fa-fw"
@@ -52561,7 +52573,7 @@ SearchBar.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"])
 };
 
-var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$2;
+var _templateObject$6, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$2;
 
 var paddingBySize$3 = function paddingBySize(size) {
   if (size === "small") {
@@ -52583,10 +52595,10 @@ var heightBySize$2 = function heightBySize(size, hasText) {
   if (size === "large") return "max-height: 2.375rem; min-height: 2.375rem;";
 };
 
-var Container$6 = newStyled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral__default['default'](["\n  overflow: hidden;\n  background-color: #f1f1f1;\n  border-radius: 0.1875rem 0.1875rem 0 0;\n  background-color: ", ";\n"])), function (props) {
+var Container$7 = newStyled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default['default'](["\n  overflow: hidden;\n  background-color: #f1f1f1;\n  border-radius: 0.1875rem 0.1875rem 0 0;\n  background-color: ", ";\n"])), function (props) {
   return props.theme.palette[props.color].main;
 });
-var Tab = newStyled.button(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n  ", "\n  background-color: inherit;\n  float: left;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  ", "\n  transition: 0.25s;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  background-color: ", ";\n"])), function (props) {
+var Tab = newStyled.button(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n  ", "\n  background-color: inherit;\n  float: left;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  ", "\n  transition: 0.25s;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  background-color: ", ";\n"])), function (props) {
   return heightBySize$2(props.size);
 }, function (props) {
   return paddingBySize$3(props.size);
@@ -52646,7 +52658,7 @@ var Tabs = function Tabs(props) {
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Container$6, _extends__default['default']({}, themeProps, {
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Container$7, _extends__default['default']({}, themeProps, {
     className: className
   }), tabs.map(function (tab) {
     return /*#__PURE__*/React__default['default'].createElement(Tab, _extends__default['default']({
@@ -52677,7 +52689,7 @@ Tabs.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$4, _templateObject2$3;
+var _templateObject$5, _templateObject2$4;
 
 var fontSize$1 = function fontSize(props) {
   var fontSize = props.theme.typography[props.size].fontSize;
@@ -52706,7 +52718,7 @@ var paddingBySizeContainerBox = function paddingBySizeContainerBox(size) {
   if (size === "large") return "0.3125rem 0.5rem";
 };
 
-var ContainerBox = newStyled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default'](["\n  border: 0.0625rem solid ", ";\n  border-radius: 0.15625rem;\n  background-color: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  padding: ", ";\n  word-wrap: break-word;\n  box-sizing: border-box;\n"])), function (props) {
+var ContainerBox = newStyled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral__default['default'](["\n  border: 0.0625rem solid ", ";\n  border-radius: 0.15625rem;\n  background-color: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  padding: ", ";\n  word-wrap: break-word;\n  box-sizing: border-box;\n"])), function (props) {
   return props.theme.palette[props.color].dark;
 }, function (props) {
   return props.theme.palette[props.color].lighter;
@@ -52719,7 +52731,7 @@ var ContainerBox = newStyled.div(_templateObject$4 || (_templateObject$4 = _tagg
 }, function (props) {
   return paddingBySizeContainerBox(props.size);
 });
-var Container$5 = newStyled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  padding: ", ";\n  padding-left: 0px;\n  word-wrap: break-word;\n  box-sizing: border-box;\n"])), function (props) {
+var Container$6 = newStyled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  padding: ", ";\n  padding-left: 0px;\n  word-wrap: break-word;\n  box-sizing: border-box;\n"])), function (props) {
   return props.theme.palette[props.color].dark;
 }, function (props) {
   return fontSize$1(props);
@@ -52744,7 +52756,7 @@ var Alet = function Alet(props) {
   if (hasContainer) return /*#__PURE__*/React__default['default'].createElement(ContainerBox, _extends__default['default']({}, themeProps, {
     className: className
   }), message);
-  if (!hasContainer) return /*#__PURE__*/React__default['default'].createElement(Container$5, _extends__default['default']({}, themeProps, {
+  if (!hasContainer) return /*#__PURE__*/React__default['default'].createElement(Container$6, _extends__default['default']({}, themeProps, {
     className: className
   }), message);
 };
@@ -52754,9 +52766,11 @@ Alet.defaultProps = {
   size: "small",
   theme: theme,
   color: "primary",
-  hasContainer: true
+  hasContainer: true,
+  message: ""
 };
 Alet.propTypes = {
+  message: PropTypes__default['default'].string,
   theme: PropTypes__default['default'].object.isRequired,
   className: PropTypes__default['default'].string,
   hasContainer: PropTypes__default['default'].bool,
@@ -52764,7 +52778,7 @@ Alet.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background"])
 };
 
-var _templateObject$3, _templateObject2$2, _templateObject3$2;
+var _templateObject$4, _templateObject2$3, _templateObject3$2;
 
 var fontSize = function fontSize(props) {
   var fontSize = props.theme.typography[props.size].fontSize;
@@ -52781,12 +52795,12 @@ var fontSize = function fontSize(props) {
   return newFontSize;
 };
 
-var Container$4 = newStyled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
+var Container$5 = newStyled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default'](["\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
   return props.theme.typography[props.size].fontSize;
 }, function (props) {
   return props.theme.typography.fontFamily;
 });
-var LabelContainer = newStyled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default['default'](["\n  font-size: ", ";\n  font-family: ", ";\n  margin-bottom: 0.1875rem;\n  color: #777a80;\n"])), function (props) {
+var LabelContainer = newStyled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral__default['default'](["\n  font-size: ", ";\n  font-family: ", ";\n  margin-bottom: 0.1875rem;\n  color: #777a80;\n"])), function (props) {
   return fontSize(props);
 }, function (props) {
   return props.theme.typography.fontFamily;
@@ -52810,7 +52824,7 @@ var FormField = function FormField(props) {
     size: size,
     color: color
   };
-  return /*#__PURE__*/React__default['default'].createElement(Container$4, _extends__default['default']({}, themeProps, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$5, _extends__default['default']({}, themeProps, {
     className: className
   }), label && label !== null && /*#__PURE__*/React__default['default'].createElement(LabelContainer, themeProps, label, required ? "*" : ""), children, errorMessage && errorMessage !== "" && /*#__PURE__*/React__default['default'].createElement(ErrorContainer, _extends__default['default']({}, themeProps, {
     hasContainer: hasContainer
@@ -52840,7 +52854,7 @@ FormField.propTypes = {
   size: PropTypes__default['default'].oneOf(["small", "medium", "large"])
 };
 
-var _templateObject$2;
+var _templateObject$3;
 
 var getColumns = function getColumns(columns) {
   var frs = "";
@@ -52852,7 +52866,7 @@ var getColumns = function getColumns(columns) {
   return frs;
 };
 
-var Container$3 = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n  display: grid;\n  grid-template-columns: ", ";\n\n  & > div {\n    margin: ", ";\n  }\n"])), function (props) {
+var Container$4 = newStyled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n  display: grid;\n  grid-template-columns: ", ";\n\n  & > div {\n    margin: ", ";\n  }\n"])), function (props) {
   return getColumns(props.columns);
 }, function (props) {
   return props.fieldMargin;
@@ -52863,7 +52877,7 @@ var FormContainer = function FormContainer(props) {
       columns = props.columns,
       children = props.children,
       fieldMargin = props.fieldMargin;
-  return /*#__PURE__*/React__default['default'].createElement(Container$3, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$4, {
     columns: columns,
     fieldMargin: fieldMargin,
     className: className
@@ -52893,13 +52907,13 @@ var heightBySize$1 = function heightBySize(size, hasText) {
   if (size === "large") return "2.375rem";
 };
 
-var Container$2 = newStyled.span(function (props) {
+var Container$3 = newStyled.span(function (props) {
   return {
     "& .react-datepicker__triangle": {
       display: "none"
     },
     "& .react-datepicker-wrapper": {
-      width: "100%",
+      width: "25%",
       boxSizing: "border-box"
     },
     "& input": {
@@ -53031,7 +53045,7 @@ var PeriodSelector = function PeriodSelector(props) {
     setEndDateText(moment(jsDateObject).format("DD.MM.YYYY."));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$2, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$3, {
     theme: theme,
     size: size,
     color: color
@@ -53041,7 +53055,7 @@ var PeriodSelector = function PeriodSelector(props) {
     dateFormat: dateFormat ? dateFormat : "dd.MM.yyyy.",
     disabled: disabled,
     className: className
-  }), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement(DatePicker, {
+  }), " ", /*#__PURE__*/React__default['default'].createElement(DatePicker, {
     selected: getEndDate(),
     onChange: handleOnEndDateChange,
     dateFormat: dateFormat ? dateFormat : "dd.MM.yyyy.",
@@ -53079,10 +53093,10 @@ PeriodSelector.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1;
+var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1;
 
 var paddingBySize = function paddingBySize(size) {
-  if (size === "small") return "0.2rem 0.4rem 0.2rem 0.4rem";
+  if (size === "small") return "0.25rem 0.4rem 0.2rem 0.4rem";
   if (size === "medium") return "0.2625rem 0.5rem 0.2625rem 0.5rem";
   if (size === "large") return "0.35rem 0.7rem 0.35rem 0.7rem";
 };
@@ -53093,8 +53107,8 @@ var heightBySize = function heightBySize(size) {
   if (size === "large") return "2rem";
 };
 
-var Container$1 = newStyled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n"])));
-var Inner$1 = newStyled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: row;\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0;\n  margin: 0;\n  border-radius: 0.5rem;\n\n  min-height: ", ";\n  max-height: ", ";\n"])), function (props) {
+var Container$2 = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n"])));
+var Inner$1 = newStyled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: row;\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0;\n  margin: 0;\n  border-radius: 0.5rem;\n\n  min-height: ", ";\n  max-height: ", ";\n"])), function (props) {
   return props.theme.typography.fontFamily;
 }, function (props) {
   return props.theme.typography[props.size].fontSize;
@@ -53137,7 +53151,7 @@ var Item = function Item(props) {
     color: color,
     disabled: disabled
   };
-  return /*#__PURE__*/React__default['default'].createElement(Container$1, _extends__default['default']({}, themeProps, {
+  return /*#__PURE__*/React__default['default'].createElement(Container$2, _extends__default['default']({}, themeProps, {
     className: className
   }), /*#__PURE__*/React__default['default'].createElement(Inner$1, themeProps, /*#__PURE__*/React__default['default'].createElement(Text, _extends__default['default']({}, themeProps, {
     title: tooltip
@@ -53177,8 +53191,8 @@ Item.propTypes = {
 var css_248z = ".option-item-enter {\n  opacity: 0;\n}\n\n.option-item-enter-active {\n  transition: all 0.2s ease-in;\n  opacity: 1;\n}\n\n.option-item-exit {\n}\n\n.option--exit-active {\n  opacity: 0;\n  transition: opacity 200ms ease-out;\n}\n";
 styleInject(css_248z);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-var spin = keyframes$2(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    100% {\n      transform: rotate(360deg);\n    }\n\n    0% {\n      transform: rotate(0deg);\n    }\n"])));
+var _templateObject$1, _templateObject2$1, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var spin = keyframes$2(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default['default'](["\n    100% {\n      transform: rotate(360deg);\n    }\n\n    0% {\n      transform: rotate(0deg);\n    }\n"])));
 
 var getIconFontSize = function getIconFontSize(props) {
   if (props.size === "small") return props.theme.typography.small.fontSize;
@@ -53204,7 +53218,7 @@ var containerColor = function containerColor(props) {
   return props.theme.palette[props.color].lighter;
 };
 
-var Container = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 0.125rem solid\n    ", ";\n  background-color: ", ";\n  border-radius: 0.125rem;\n  width: 100%;\n  transition: all 250ms ease;\n"])), function (props) {
+var Container$1 = newStyled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 0.125rem solid\n    ", ";\n  background-color: ", ";\n  border-radius: 0.125rem;\n  width: 100%;\n  transition: all 250ms ease;\n"])), function (props) {
   return props.disabled ? props.theme.palette.gray[900] : props.theme.palette[props.color].main;
 }, function (props) {
   return containerColor(props);
@@ -53439,7 +53453,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
     }
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container, _extends__default['default']({
+  return /*#__PURE__*/React__default['default'].createElement(Container$1, _extends__default['default']({
     className: className
   }, themeProps, {
     focus: inputFocus
@@ -53528,6 +53542,228 @@ MultiSelectDropdown.propTypes = {
   addOptionText: PropTypes__default['default'].string
 };
 
+var _templateObject, _templateObject2;
+var Container = newStyled.div(function (props) {
+  return {
+    gridArea: "timeSpentItem",
+    display: "flex",
+    columnGap: "2px",
+    justifyContent: "start"
+  };
+});
+var FlexCenter = newStyled.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  justify-content: center;\n  align-items: end;\n"])));
+var ButtonWraper = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n  padding-right: 2%;\n"])));
+
+var TimeInput = function TimeInput(props) {
+  var id = props.id,
+      value = props.value,
+      size = props.size,
+      color = props.color,
+      theme = props.theme,
+      className = props.className,
+      onChange = props.onChange,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step;
+
+  var _useState = React.useState(value),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      val = _useState2[0],
+      setVal = _useState2[1];
+
+  var _useState3 = React.useState(Math.trunc(props.value)),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      spentHours = _useState4[0],
+      setSpentHours = _useState4[1];
+
+  var _useState5 = React.useState(Math.trunc(props.value % 1 * 60)),
+      _useState6 = _slicedToArray__default['default'](_useState5, 2),
+      spentMinutes = _useState6[0],
+      setSpentMinutes = _useState6[1];
+
+  var stepDecimal = step / 60;
+  var stepValue = parseInt(step);
+  React.useEffect(function () {
+    setVal(value);
+    setSpentHours(Math.trunc(props.value));
+    setSpentMinutes(Math.trunc(props.value % 1 * 60));
+  }, [value]);
+
+  var ConvertMinutesToDecimal = function ConvertMinutesToDecimal(newMinutesValue) {
+    var timeSpent = parseFloat(newMinutesValue);
+
+    if (isNaN(timeSpent) || timeSpent === undefined) {
+      timeSpent = 0;
+    }
+
+    if (!Number.isInteger(timeSpent)) {
+      timeSpent = Math.trunc(timeSpent);
+    }
+
+    var hoursToAdd = 0;
+
+    if (timeSpent > 60) {
+      hoursToAdd = Math.trunc(timeSpent / 60);
+      timeSpent %= 60;
+    }
+
+    timeSpent = Math.trunc(timeSpent / stepValue) * stepValue;
+    var oldTime = val;
+
+    if (oldTime <= stepDecimal) {
+      if (timeSpent <= stepValue || isNaN(timeSpent) || timeSpent === undefined) {
+        timeSpent = stepValue;
+      }
+    }
+
+    if (oldTime <= 24) {
+      var oldHours = Math.trunc(val);
+      var newTimeSpent = oldHours + hoursToAdd + timeSpent / 60;
+      newTimeSpent = parseFloat(newTimeSpent.toFixed(5));
+      if (newTimeSpent > 24) return 24;
+      return newTimeSpent;
+    }
+  };
+
+  var ConvertHoursToDecimal = function ConvertHoursToDecimal(newHoursValue) {
+    var timeSpent = parseFloat(newHoursValue);
+
+    if (isNaN(timeSpent) || timeSpent === undefined) {
+      timeSpent = 0;
+    }
+
+    if (timeSpent >= 24) {
+      return 24.0;
+    } else if (parseInt(timeSpent) === 0) {
+      var oldTime = parseFloat(val);
+
+      if (oldTime % 1 <= stepDecimal) {
+        return stepDecimal;
+      } else {
+        return oldTime % 1;
+      }
+    } else {
+      var _oldTime = val;
+
+      var oldDecimalValue = ("" + _oldTime).split(".")[1];
+
+      if (oldDecimalValue === undefined || oldDecimalValue === "") {
+        oldDecimalValue = "0.0";
+      }
+
+      oldDecimalValue = "0." + oldDecimalValue;
+      var newTimeSpent = timeSpent + parseFloat(oldDecimalValue);
+      newTimeSpent = newTimeSpent.toFixed(2);
+      return parseFloat(newTimeSpent);
+    }
+  };
+
+  var plusButtonClickHandler = function plusButtonClickHandler() {
+    var time = ConvertMinutesToDecimal(spentMinutes + stepValue);
+    setSpentHours(Math.trunc(time));
+    setSpentMinutes(Math.round(time % 1 * 60));
+    setVal(time);
+    onChange(id, time);
+  };
+
+  var minusButtonClickHandler = function minusButtonClickHandler() {
+    var time = ConvertMinutesToDecimal(spentMinutes - stepValue);
+    setSpentHours(Math.trunc(time));
+    setSpentMinutes(Math.round(time % 1 * 60));
+    setVal(time);
+    onChange(id, time);
+  };
+
+  var minutesChangeHandler = function minutesChangeHandler(_, value) {
+    setSpentMinutes(value);
+    var time = ConvertMinutesToDecimal(value);
+    setTimeout(function () {
+      setSpentHours(Math.trunc(time));
+      setSpentMinutes(Math.round(time % 1 * 60));
+      setVal(time);
+    }, 100);
+    onChange(id, time);
+  };
+
+  var hoursChangeHandler = function hoursChangeHandler(_, value) {
+    setSpentHours(value);
+    var time = ConvertHoursToDecimal(value);
+    setTimeout(function () {
+      setSpentHours(Math.trunc(time));
+      setSpentMinutes(Math.round(time % 1 * 60));
+      setVal(time);
+    }, 100);
+    onChange(id, time);
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Container, {
+    className: className
+  }, /*#__PURE__*/React__default['default'].createElement(FlexCenter, null, /*#__PURE__*/React__default['default'].createElement(ButtonWraper, null, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    icon: "minus",
+    onClick: minusButtonClickHandler,
+    disabled: disabled,
+    size: size,
+    color: color,
+    theme: theme
+  })), /*#__PURE__*/React__default['default'].createElement(ButtonWraper, null, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    id: "addButton",
+    icon: "plus",
+    onClick: plusButtonClickHandler,
+    disabled: disabled,
+    size: size,
+    color: color,
+    theme: theme
+  }))), /*#__PURE__*/React__default['default'].createElement(FormField, {
+    label: "h",
+    required: true
+  }, /*#__PURE__*/React__default['default'].createElement(NumberInput, {
+    id: "timeSpentHours",
+    value: spentHours,
+    onChange: hoursChangeHandler,
+    disabled: disabled,
+    size: size,
+    color: color,
+    theme: theme
+  })), /*#__PURE__*/React__default['default'].createElement(FormField, {
+    label: "min",
+    required: true
+  }, /*#__PURE__*/React__default['default'].createElement(NumberInput, {
+    id: "timeSpentMinutes",
+    value: spentMinutes,
+    onChange: minutesChangeHandler,
+    label: "min",
+    disabled: disabled,
+    size: size,
+    color: color,
+    theme: theme
+  })));
+};
+
+TimeInput.defaultProps = {
+  id: "",
+  theme: theme,
+  disabled: false,
+  onChange: function onChange() {},
+  className: "",
+  preventDefault: true,
+  size: "small",
+  color: "primary",
+  value: "",
+  step: ""
+};
+TimeInput.propTypes = {
+  theme: PropTypes__default['default'].object.isRequired,
+  id: PropTypes__default['default'].string,
+  disabled: PropTypes__default['default'].bool,
+  onChange: PropTypes__default['default'].func,
+  className: PropTypes__default['default'].string,
+  value: PropTypes__default['default'].string,
+  size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
+  color: PropTypes__default['default'].oneOf(["primary", "secondary", "gray"]),
+  step: PropTypes__default['default'].string
+};
+
 exports.Alert = Alet;
 exports.Button = Button$1;
 exports.CheckBox = CheckBox;
@@ -53555,5 +53791,6 @@ exports.Tabs = Tabs;
 exports.TagSelector = TagSelector;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
+exports.TimeInput = TimeInput;
 exports.ToggleSwitch = ToggleSwitch;
 exports.theme = theme;