@dspworkplace/ui 2.0.2 → 2.1.0

package/dist/index.es.js

@@ -362,7 +362,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:\"Huninn\", sans-serif;\n  display:block;\n  color:#516F90;\n  margin-top:4px;\n"]);
+  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  line-height: ", ";\n  font-weight:normal;\n  font-family: ", ";\n  display:block;\n  color: ", ";\n  margin-top:4px;\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -424,7 +424,7 @@ var InputBase = styled.input(_templateObject3(), theme.colors.neutrals.white, th
   var size = _ref.size;
   return handleSize(size);
 }, theme.colors.extra.whiteSmoke, borderDefault, theme.colors.neutrals.silver, theme.colors.neutrals.medium, borderDefault, borderDefault, borderDefault, theme.colors.action, theme.colors.secondary, theme.colors.neutrals.silver, theme.font.small);
-var SpanHelp = styled.span(_templateObject4(), theme.font.extraSmall.size);
+var SpanHelp = styled.span(_templateObject4(), theme.font.small.size, theme.font.small.lineHeight, theme.font.main, theme.colors.info.text);
 var SpanError = styled(SpanHelp)(_templateObject5(), theme.colors.error.text);
 
 var RequiredText = function RequiredText() {
@@ -461,28 +461,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _templateObject4$1() {
-  var data = taggedTemplateLiteral(["\n  width:", "\n  display:inline-block;\n  vertical-align:top;\n\n  svg path {\n    fill: ", ";\n  }\n"]);
-
-  _templateObject4$1 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$1() {
-  var data = taggedTemplateLiteral(["\n  color:", "\n"]);
-
-  _templateObject3$1 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject2$1() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:\"Huninn\", sans-serif;\n  display:block;\n  color:#516F90;\n  margin-top:4px;\n"]);
+  var data = taggedTemplateLiteral(["\n  width:", "\n  display:inline-block;\n  vertical-align:top;\n\n  svg path {\n    fill: ", ";\n  }\n"]);
 
   _templateObject2$1 = function _templateObject2() {
     return data;
@@ -552,9 +532,7 @@ var InputBase$1 = styled.input(_templateObject$2(), theme.colors.neutrals.white,
 }, borderDefault$1, function (props) {
   return handlerColor(props.validation);
 }, borderDefault$1, theme.colors.action, theme.colors.secondary, theme.colors.neutrals.silver, theme.font.small, theme.colors.info.bg, theme.colors.neutrals.silver);
-var Span = styled.span(_templateObject2$1(), theme.font.extraSmall.size);
-var SpanError$1 = styled(Span)(_templateObject3$1(), theme.colors.error.text);
-var Frag$1 = styled.div(_templateObject4$1(), function (_ref2) {
+var Frag$1 = styled.div(_templateObject2$1(), function (_ref2) {
   var size = _ref2.size;
   return handleSize$1(size);
 }, theme.colors.secondary);
@@ -643,7 +621,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     validation: validationType,
     ref: ref,
     onChange: handleChange
-  })), iconAction && iconAction), help && /*#__PURE__*/React.createElement(Span, null, help), error && /*#__PURE__*/React.createElement(SpanError$1, null, /*#__PURE__*/React.createElement("img", {
+  })), iconAction && iconAction), help && /*#__PURE__*/React.createElement(SpanHelp, null, help), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -4177,20 +4155,30 @@ var mergeRefs = function mergeRefs(refs) {
   };
 };
 
-function _templateObject4$2() {
+function _templateObject5$1() {
+  var data = taggedTemplateLiteral(["\n    font-family: ", ";\n"]);
+
+  _templateObject5$1 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4$1() {
   var data = taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n\n    ", "\n}\n"]);
 
-  _templateObject4$2 = function _templateObject4() {
+  _templateObject4$1 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$2() {
+function _templateObject3$1() {
   var data = taggedTemplateLiteral(["\n    font-size: 16px;\n    line-height: 20px;\n"]);
 
-  _templateObject3$2 = function _templateObject3() {
+  _templateObject3$1 = function _templateObject3() {
     return data;
   };
 
@@ -4218,38 +4206,19 @@ function _templateObject$5() {
 }
 var Title = styled.h1(_templateObject$5(), theme.colors.info.text);
 var SubTitle = styled.h3(_templateObject2$2(), theme.colors.info.text);
-var ThirdTitle = styled(SubTitle)(_templateObject3$2());
-var Text = styled.p(_templateObject4$2(), theme.colors.neutrals.gray, function (_ref) {
+var ThirdTitle = styled(SubTitle)(_templateObject3$1());
+var Text = styled.p(_templateObject4$1(), theme.colors.neutrals.gray, function (_ref) {
   var subtle = _ref.subtle;
   return subtle && "\n    color:".concat(theme.colors.neutrals.medium, ";\n    ");
 });
+var Emphasis = styled.span(_templateObject5$1(), theme.font.main);
 
 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; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _templateObject14() {
-  var data = taggedTemplateLiteral(["\n    border: 0;\n    padding-right: 8px;\n    background: transparent;\n    cursor: inherit;\n    display: flex;\n    align-items: center;\n    height: 100%;\n"]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = taggedTemplateLiteral(["\n    flex: 1;\n    min-width: 0;\n    border: 0;\n    outline: 0;\n    padding: 0;\n    background: transparent;\n    cursor: inherit;\n    font-family: inherit;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    padding-left: 8px;\n\n\n    &::placeholder {\n        color: ", ";\n        opacity: 1;\n    }\n"]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject12() {
-  var data = taggedTemplateLiteral(["\n    height: 24px;\n    width: 24px;\n    box-sizing: border-box;\n    margin-right: 5px;\n    border-radius: 100%;\n    border: 2px solid white;\n    background: ", "\n    z-index: ", ";\n    margin-left: ", "\n    margin-top: 8px;\n    margin-bottom: 8px;\n    display: inline-block;\n"]);
+  var data = taggedTemplateLiteral(["\n    border: 0;\n    padding-right: 8px;\n    background: transparent;\n    cursor: inherit;\n    display: flex;\n    align-items: center;\n    height: 100%;\n"]);
 
   _templateObject12 = function _templateObject12() {
     return data;
@@ -4259,7 +4228,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = taggedTemplateLiteral(["\n    color: #707070;\n    font-size: 12px;\n    padding: 8px;\n    font-weight: bold;\n    cursor: default;\n    white-space: nowrap;\n"]);
+  var data = taggedTemplateLiteral(["\n    flex: 1;\n    min-width: 0;\n    border: 0;\n    outline: 0;\n    padding: 0;\n    background: transparent;\n    cursor: inherit;\n    font-family: inherit;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    padding-left: 8px;\n\n\n    &::placeholder {\n        color: ", ";\n        opacity: 1;\n    }\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -4269,7 +4238,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = taggedTemplateLiteral(["\n    background: ", ";\n    border-radius: ", ";\n    border: 1px solid ", ";\n    height: 16px;\n    width: 16px;\n    border-radius: ", ";\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 9px;\n\n    &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 6px ", ";\n    }\n\n"]);
+  var data = taggedTemplateLiteral(["\n    height: 24px;\n    width: 24px;\n    box-sizing: border-box;\n    margin-right: 5px;\n    border-radius: 100%;\n    border: 2px solid white;\n    background: ", "\n    z-index: ", ";\n    margin-left: ", "\n    margin-top: 8px;\n    margin-bottom: 8px;\n    display: inline-block;\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -4279,7 +4248,7 @@ function _templateObject10() {
 }
 
 function _templateObject9$1() {
-  var data = taggedTemplateLiteral(["\n    height: 22px;\n    width: 22px;\n    overflow: hidden;\n    border-radius: 100%;\n    border: 1px solid #516F90;\n    background: #EAF0F6;\n    margin-right: 5px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    > svg {\n        margin-top: 2px;\n    }\n\n    > img {\n        width: 25px;\n        height: 25px;\n        object-fit: cover;\n        object-position: center;\n    }\n"]);
+  var data = taggedTemplateLiteral(["\n    color: #707070;\n    font-size: 12px;\n    padding: 8px;\n    font-weight: bold;\n    cursor: default;\n    white-space: nowrap;\n"]);
 
   _templateObject9$1 = function _templateObject9() {
     return data;
@@ -4289,7 +4258,7 @@ function _templateObject9$1() {
 }
 
 function _templateObject8$1() {
-  var data = taggedTemplateLiteral(["\n    position: absolute;\n    height: 1px;\n    width: 1px;\n    z-index: -1;\n    opacity: 0;\n"]);
+  var data = taggedTemplateLiteral(["\n    background: ", ";\n    border-radius: ", ";\n    border: 1px solid ", ";\n    height: 16px;\n    width: 16px;\n    border-radius: ", ";\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 9px;\n\n    &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 6px ", ";\n    }\n\n"]);
 
   _templateObject8$1 = function _templateObject8() {
     return data;
@@ -4299,7 +4268,7 @@ function _templateObject8$1() {
 }
 
 function _templateObject7$1() {
-  var data = taggedTemplateLiteral(["\n    color: ", "\n"]);
+  var data = taggedTemplateLiteral(["\n    height: 22px;\n    width: 22px;\n    overflow: hidden;\n    border-radius: 100%;\n    border: 1px solid #516F90;\n    background: #EAF0F6;\n    margin-right: 5px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    > svg {\n        margin-top: 2px;\n    }\n\n    > img {\n        width: 25px;\n        height: 25px;\n        object-fit: cover;\n        object-position: center;\n    }\n"]);
 
   _templateObject7$1 = function _templateObject7() {
     return data;
@@ -4309,7 +4278,7 @@ function _templateObject7$1() {
 }
 
 function _templateObject6$1() {
-  var data = taggedTemplateLiteral(["\n    font-size: ", ";\n    font-weight: normal;\n    font-family: \"Huninn\", sans-serif;\n    display: block;\n    color: #516F90;\n    margin-top: 4px;\n"]);
+  var data = taggedTemplateLiteral(["\n    position: absolute;\n    height: 1px;\n    width: 1px;\n    z-index: -1;\n    opacity: 0;\n"]);
 
   _templateObject6$1 = function _templateObject6() {
     return data;
@@ -4318,30 +4287,30 @@ function _templateObject6$1() {
   return data;
 }
 
-function _templateObject5$1() {
+function _templateObject5$2() {
   var data = taggedTemplateLiteral(["\n    max-height: ", "px;\n    overflow-y: scroll;\n\n    > li {\n        padding-right: 8px;\n        height: auto;\n        min-height: 32px;\n        justify-content: flex-start;\n    }\n"]);
 
-  _templateObject5$1 = function _templateObject5() {
+  _templateObject5$2 = function _templateObject5() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject4$3() {
-  var data = taggedTemplateLiteral(["\n    padding: 0;\n    margin: 4px 0;\n    background: white;\n    border: 1px solid ", ";\n    box-shadow: 0 0 6px ", ";\n    border-radius: ", ";\n    list-style: none;\n    width: auto;\n    display: inline-block;\n    position: absolute;\n    top: 100%;\n    ", "\n    left: -1px;\n    z-index: 10;\n\n    ", "\n    ", "\n    li {\n        font-size: ", ";\n        color: #707070;\n        height: 32px;\n        cursor: pointer;\n        padding: 0px 4px 0 8px;\n        position: relative;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        > ul {\n            display: none;\n        }\n\n        &::before {\n            content: \" \";\n            height: 100%;\n            width: 6px;\n            background: transparent;\n            display: block;\n            position: absolute;\n            right: -7px;\n        }\n\n\n        &:hover {\n            background: ", ";\n\n            > ul {\n                display: inline-block;\n            }\n        }\n\n        &.alone {\n            border-top: 1px solid ", ";\n        }\n\n    }\n"]);
+function _templateObject4$2() {
+  var data = taggedTemplateLiteral(["\n    padding: 0;\n    margin: 4px 0;\n    background: white;\n    border: 1px solid ", ";\n    box-shadow: 0 0 6px ", ";\n    border-radius: ", ";\n    list-style: none;\n    width: auto;\n    display: inline-block;\n    position: absolute;\n    top: 100%;\n    ", "\n    left: -1px;\n    z-index: 10;\n\n    ", "\n    ", "\n    li {\n        font-size: ", ";\n        color: #707070;\n        height: 32px;\n        cursor: pointer;\n        padding: 0px 4px 0 8px;\n        position: relative;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        > ul {\n            display: none;\n        }\n\n        &::before {\n            content: \" \";\n            height: 100%;\n            width: 6px;\n            background: transparent;\n            display: block;\n            position: absolute;\n            right: -7px;\n        }\n\n\n        &:hover,\n        &.active {\n            background: ", ";\n\n            > ul {\n                display: inline-block;\n            }\n        }\n\n        &.alone {\n            border-top: 1px solid ", ";\n        }\n\n    }\n"]);
 
-  _templateObject4$3 = function _templateObject4() {
+  _templateObject4$2 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$3() {
+function _templateObject3$2() {
   var data = taggedTemplateLiteral(["\n    white-space: nowrap;\n    overflow: hidden;\n    color: ", ";\n\n    ", "\n    > span {\n        color: #707070;\n    }\n"]);
 
-  _templateObject3$3 = function _templateObject3() {
+  _templateObject3$2 = function _templateObject3() {
     return data;
   };
 
@@ -4396,12 +4365,12 @@ var Value$1 = styled(Text).attrs(function (props) {
   return {
     as: 'span'
   };
-})(_templateObject3$3(), theme.colors.neutrals.medium, function (props) {
+})(_templateObject3$2(), theme.colors.neutrals.medium, function (props) {
   return props.option && "\n    display:inline-block;\n    flex:1;\n  ";
 });
 var maxOptions = 3;
 var optionsSize = 32;
-var Options$1 = styled.ul(_templateObject4$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
+var Options$1 = styled.ul(_templateObject4$2(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
   return props.openTo === 'top' && "\n    top:unset;\n    bottom: 100%;\n  ";
 }, function (props) {
   return !props.hasChildren && "\n    max-height: ".concat(props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : maxOptions * optionsSize, "px;\n    overflow-x:hidden;\n    overflow-y:scroll;\n  ");
@@ -4409,16 +4378,14 @@ var Options$1 = styled.ul(_templateObject4$3(), theme.colors.neutrals.silver, th
   return props.isChild && "\n    position:absolute;\n    left:100%;\n    margin-left:4px;\n    top:-4px;\n  ";
 }, theme.font.small.size, theme.colors.info.bg, theme.colors.neutrals.silver);
 var optionsSizeCustom = 42;
-var OptionsPeople = styled(Options$1)(_templateObject5$1(), function (props) {
+var OptionsPeople = styled(Options$1)(_templateObject5$2(), function (props) {
   return props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : optionsSizeCustom * optionsSize;
 });
-var Span$1 = styled.span(_templateObject6$1(), theme.font.extraSmall.size);
-var SpanError$2 = styled(Span$1)(_templateObject7$1(), theme.colors.error.text);
-var SelectHidden = styled.select(_templateObject8$1());
-var PhotoCover = styled.div(_templateObject9$1());
-var CustomCheckBox = styled.div(_templateObject10(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.defaultRadius, theme.colors.secondary, theme.colors.action);
-var OptionGroup$1 = styled.div(_templateObject11());
-var ColorOption = styled.span(_templateObject12(), function (props) {
+var SelectHidden = styled.select(_templateObject6$1());
+var PhotoCover = styled.div(_templateObject7$1());
+var CustomCheckBox = styled.div(_templateObject8$1(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.defaultRadius, theme.colors.secondary, theme.colors.action);
+var OptionGroup$1 = styled.div(_templateObject9$1());
+var ColorOption = styled.span(_templateObject10(), function (props) {
   return props.color ? props.color : 'black';
 }, function (props) {
   return props.index > 0 ? 10 - props.index : 10;
@@ -4434,10 +4401,10 @@ var getSelected = function getSelected(options, defaultValue) {
   return selected;
 };
 
-var SearchInput = styled.input(_templateObject13(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (props) {
+var SearchInput = styled.input(_templateObject11(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (props) {
   return props.hasSelection ? theme.colors.neutrals.gray : theme.colors.neutrals.medium;
 });
-var ToggleButton = styled.button(_templateObject14());
+var ToggleButton = styled.button(_templateObject12());
 
 var isOption = function isOption(item) {
   return item.value !== undefined && item.value !== null;
@@ -4487,8 +4454,21 @@ var FloatingOptions = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     }]
   }),
       styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
+      attributes = _usePopper.attributes,
+      update = _usePopper.update; // popper repositions only on scroll and resize; follow size changes of the anchor and the list
 
+
+  useEffect(function () {
+    if (!anchor || !list || !update) return;
+    var observer = new window.ResizeObserver(function () {
+      return update();
+    });
+    observer.observe(anchor);
+    observer.observe(list);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [anchor, list, update]);
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Options$1, _extends_1({
     ref: listRef,
     style: _objectSpread$1(_objectSpread$1(_objectSpread$1({}, style), styles.popper), {}, {
@@ -4892,7 +4872,7 @@ var MultiDropdown = /*#__PURE__*/forwardRef(function (_ref9, ref) {
     visibleOptionsQty: visibleOptionsQty,
     openTo: openTo,
     startOpen: startOpen
-  }, props)), help && /*#__PURE__*/React.createElement(Span$1, null, help), error && /*#__PURE__*/React.createElement(SpanError$2, null, /*#__PURE__*/React.createElement("img", {
+  }, props)), help && /*#__PURE__*/React.createElement(SpanHelp, null, help), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -5004,7 +4984,7 @@ var SingleDropdown = /*#__PURE__*/forwardRef(function (_ref10, ref) {
     visibleOptionsQty: visibleOptionsQty,
     openTo: openTo,
     startOpen: startOpen
-  }, props)), help && /*#__PURE__*/React.createElement(Span$1, null, help), error && /*#__PURE__*/React.createElement(SpanError$2, null, /*#__PURE__*/React.createElement("img", {
+  }, props)), help && /*#__PURE__*/React.createElement(SpanHelp, null, help), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -5304,7 +5284,7 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref13, ref) {
     noOptions: props.noOptions,
     visibleOptionsQty: visibleOptionsQty,
     openTo: openTo
-  })), help && /*#__PURE__*/React.createElement(Span$1, null, help), error && /*#__PURE__*/React.createElement(SpanError$2, null, /*#__PURE__*/React.createElement("img", {
+  })), help && /*#__PURE__*/React.createElement(SpanHelp, null, help), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -5549,28 +5529,8 @@ var Spacer = function Spacer(_ref) {
   return /*#__PURE__*/React.createElement(BaseSpace, props);
 };
 
-function _templateObject9$2() {
-  var data = taggedTemplateLiteral(["\n    color: ", ";\n"]);
-
-  _templateObject9$2 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8$2() {
-  var data = taggedTemplateLiteral(["\n    color:", ";\n    display:block;\n"]);
-
-  _templateObject8$2 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject7$2() {
-  var data = taggedTemplateLiteral(["\n    font-size:", ";\n    font-weight:normal;\n    font-family:\"Huninn\", sans-serif;\n    display:block;\n    color:#516F90;\n    margin-top:4px;\n"]);
+  var data = taggedTemplateLiteral(["\n    color: ", ";\n"]);
 
   _templateObject7$2 = function _templateObject7() {
     return data;
@@ -5589,30 +5549,30 @@ function _templateObject6$2() {
   return data;
 }
 
-function _templateObject5$2() {
+function _templateObject5$3() {
   var data = taggedTemplateLiteral(["\n    font-family:\"Huninn\", sans-serif;\n    font-weight:normal;\n    font-size:16px;\n    color: #707070;\n\n    >.requiredField {\n        color:", ";\n    }\n"]);
 
-  _templateObject5$2 = function _templateObject5() {
+  _templateObject5$3 = function _templateObject5() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject4$4() {
+function _templateObject4$3() {
   var data = taggedTemplateLiteral(["\n    background: ", ";\n    border-radius: ", ";\n    border:1px solid ", ";\n    height:", ";\n    width:", ";\n    border-radius:", ";\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing:border-box;\n\n    svg {\n        display:none;\n    }\n\n    ", ":focus + &, ", ":focus + & {\n        border-color:", ";\n        box-shadow:0 0 6px ", ";\n    }\n\n    ", ":disabled + &, ", ":disabled + & {\n        background:", ";\n        border-color:#707070;\n        opacity:0.5;\n        cursor:default;\n    }\n\n    ", ":checked + &, ", ":checked + & {\n        svg {\n            display:block;\n        }\n    }\n"]);
 
-  _templateObject4$4 = function _templateObject4() {
+  _templateObject4$3 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$4() {
+function _templateObject3$3() {
   var data = taggedTemplateLiteral(["\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    justify-content: center;\n    cursor:pointer;\n\n    &:focus {\n        outline:none;\n    }\n "]);
 
-  _templateObject3$4 = function _templateObject3() {
+  _templateObject3$3 = function _templateObject3() {
     return data;
   };
 
@@ -5644,19 +5604,17 @@ var HiddenCheckbox = styled.input.attrs({
 var HiddenRadioBox = styled.input.attrs({
   type: 'radio'
 })(_templateObject2$4());
-var CheckboxContainer = styled.label(_templateObject3$4());
-var CustomCheckBox$1 = styled.div(_templateObject4$4(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, function (props) {
+var CheckboxContainer = styled.label(_templateObject3$3());
+var CustomCheckBox$1 = styled.div(_templateObject4$3(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, function (props) {
   return props.radio ? '17px' : '16px';
 }, function (props) {
   return props.radio ? '17px' : '16px';
 }, function (props) {
   return props.radio ? '17px' : '2px';
 }, HiddenCheckbox, HiddenRadioBox, theme.colors.secondary, theme.colors.action, HiddenCheckbox, HiddenRadioBox, theme.colors.neutrals.silver, HiddenCheckbox, HiddenRadioBox);
-var Title$1 = styled.h5(_templateObject5$2(), theme.colors.error.text);
+var Title$1 = styled.h5(_templateObject5$3(), theme.colors.error.text);
 var Label$1 = styled.span(_templateObject6$2());
-var Span$2 = styled.span(_templateObject7$2(), theme.font.extraSmall.size);
-var SpanError$3 = styled(Span$2)(_templateObject8$2(), theme.colors.error.text);
-var NoOptions = styled(Text)(_templateObject9$2(), theme.colors.neutrals.silver);
+var NoOptions = styled(Text)(_templateObject7$2(), theme.colors.neutrals.silver);
 var CheckboxBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var name = _ref.name,
       _ref$checked = _ref.checked,
@@ -5690,7 +5648,7 @@ var CheckboxBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: preventClass ? preventClass : ''
   })), /*#__PURE__*/React.createElement(Label$1, {
     className: preventClass ? preventClass : ''
-  }, label)), error && /*#__PURE__*/React.createElement(SpanError$3, null, /*#__PURE__*/React.createElement("img", {
+  }, label)), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -5732,7 +5690,7 @@ var CheckBox = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       ref: ref,
       checked: checked
     })));
-  }), !options || !options.length && /*#__PURE__*/React.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React.createElement(SpanError$3, null, /*#__PURE__*/React.createElement("img", {
+  }), !options || !options.length && /*#__PURE__*/React.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -5761,7 +5719,7 @@ var RadioBoxBase = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     radio: true
   }, /*#__PURE__*/React.createElement(Icons.Check, {
     size: "17px"
-  })), /*#__PURE__*/React.createElement(Label$1, null, label)), error && /*#__PURE__*/React.createElement(SpanError$3, null, /*#__PURE__*/React.createElement("img", {
+  })), /*#__PURE__*/React.createElement(Label$1, null, label)), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -5811,7 +5769,7 @@ var RadioBox = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     }, props, {
       ref: ref
     })));
-  }), !options || !options.length && /*#__PURE__*/React.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React.createElement(SpanError$3, null, /*#__PURE__*/React.createElement("img", {
+  }), !options || !options.length && /*#__PURE__*/React.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -5930,7 +5888,7 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props, {
     validation: validationType,
     ref: ref
-  })), help && /*#__PURE__*/React.createElement(Span, null, help), error && /*#__PURE__*/React.createElement(SpanError$1, null, /*#__PURE__*/React.createElement("img", {
+  })), help && /*#__PURE__*/React.createElement(SpanHelp, null, help), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -5942,50 +5900,20 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _templateObject7$3() {
+function _templateObject4$4() {
   var data = taggedTemplateLiteral(["\n    position: absolute;\n    height: 1px;\n    width: 1px;\n    z-index: -1;\n    opacity: 0;\n"]);
 
-  _templateObject7$3 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6$3() {
-  var data = taggedTemplateLiteral(["\n  list-style:none;\n  padding:0 5px 3px;\n  margin:0;\n  display:flex;\n  max-width: 300px;\n  flex-wrap: wrap;\n\n  &.small {\n    max-width:140px;\n\n    >li:not(.input) {\n      white-space: pre-wrap;\n    }\n  }\n\n  >li:not(.input) {\n    border:1px solid #7C98B6;\n    color:#516F90;\n    background:#EAF0F6;\n    padding:5px;\n    margin-right:5px;\n    border-radius:", ";\n    font-size:12px;\n    font-weight:500;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    white-space: nowrap;\n\n\n    >svg {\n      padding-left:8px;\n      padding-right:3px;\n    }\n\n  }\n\n  >li {\n    margin-top:5px;\n    input {\n      display: inline-block;\n      height: 30px;\n      width:100%;\n      min-width:80px;\n      color:#333;\n      font-size:14px;\n\n      &::placeholder {\n        color:#ccc;\n      }\n    }\n\n    &.input {\n      flex:1;\n    }\n\n\n  }\n"]);
-
-  _templateObject6$3 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5$3() {
-  var data = taggedTemplateLiteral(["\n  padding:0;\n  margin:4px 0;\n  background:white;\n  border:1px solid ", ";\n  box-shadow:0 0 6px ", ";\n  border-radius:", ";\n  list-style:none;\n  width:auto;\n  display:inline-block;\n  position: absolute;\n  top: 100%;\n  ", "\n  left: -1px;\n  z-index:10;\n  max-height: ", "px;\n  overflow-x:hidden;\n  overflow-y:scroll;\n\n  li {\n    font-size:", ";\n    color:#707070;\n    min-height:32px;\n    cursor:pointer;\n    padding: 8px;\n    position:relative;\n    box-sizing: border-box;\n\n    >ul {\n      display:none;\n    }\n\n    &.active,\n    &:hover {\n      background:", ";\n\n      >ul {\n        display:inline-block;\n      }\n    }\n\n  }\n"]);
-
-  _templateObject5$3 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4$5() {
-  var data = taggedTemplateLiteral(["\n  background:", ";\n  box-sizing:border-box;\n  cursor:pointer;\n  position:relative;\n  box-sizing: border-box;\n  padding:0;\n\n  height:auto;\n  min-height:40px;\n\n\n  &:focus-within {\n   box-shadow:0px 0px 6px ", "\n    border-color:", "\n  }\n\n  &.error {\n    border-color:", ";\n  }\n"]);
-
-  _templateObject4$5 = function _templateObject4() {
+  _templateObject4$4 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$5() {
-  var data = taggedTemplateLiteral(["\n  color:", "\n"]);
+function _templateObject3$4() {
+  var data = taggedTemplateLiteral(["\n  list-style:none;\n  padding:0 5px 3px;\n  margin:0;\n  display:flex;\n  flex-wrap: wrap;\n\n  &.small {\n    max-width:140px;\n\n    >li:not(.input) {\n      white-space: pre-wrap;\n    }\n  }\n\n  >li:not(.input) {\n    border:1px solid #7C98B6;\n    color:#516F90;\n    background:#EAF0F6;\n    padding:5px;\n    margin-right:5px;\n    border-radius:", ";\n    font-size:12px;\n    font-weight:500;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    white-space: nowrap;\n\n\n    >svg {\n      padding-left:8px;\n      padding-right:3px;\n    }\n\n  }\n\n  >li {\n    margin-top:5px;\n    input {\n      display: inline-block;\n      height: 30px;\n      width:100%;\n      min-width:80px;\n      color:#333;\n      font-size:14px;\n\n      &::placeholder {\n        color:#ccc;\n      }\n    }\n\n    &.input {\n      flex:1;\n    }\n\n\n  }\n"]);
 
-  _templateObject3$5 = function _templateObject3() {
+  _templateObject3$4 = function _templateObject3() {
     return data;
   };
 
@@ -5993,7 +5921,7 @@ function _templateObject3$5() {
 }
 
 function _templateObject2$5() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:\"Huninn\", sans-serif;\n  display:block;\n  color:#516F90;\n  margin-top:4px;\n"]);
+  var data = taggedTemplateLiteral(["\n  background:", ";\n  box-sizing:border-box;\n  cursor:pointer;\n  position:relative;\n  box-sizing: border-box;\n  padding:0;\n\n  height:auto;\n  min-height:40px;\n  width:", ";\n\n\n  &:hover {\n    border-color:", ";\n  }\n\n  &.open,\n  &:focus-within {\n    border-color:", ";\n    box-shadow:0 0 6px ", ";\n  }\n\n  &.error {\n    border-color:", ";\n  }\n\n  &.error.open,\n  &.error:focus-within {\n    box-shadow:0 0 6px ", ";\n  }\n\n  &.valid {\n    border-color:", ";\n  }\n\n  &.valid.open,\n  &.valid:focus-within {\n    box-shadow:0 0 6px ", ";\n  }\n"]);
 
   _templateObject2$5 = function _templateObject2() {
     return data;
@@ -6003,7 +5931,7 @@ function _templateObject2$5() {
 }
 
 function _templateObject$a() {
-  var data = taggedTemplateLiteral(["\n    display:inline-block;\n    vertical-align: top;\n"]);
+  var data = taggedTemplateLiteral(["\n    display:inline-block;\n    vertical-align: top;\n    ", "\n"]);
 
   _templateObject$a = function _templateObject() {
     return data;
@@ -6011,35 +5939,33 @@ function _templateObject$a() {
 
   return data;
 }
-var Frag$3 = styled.div(_templateObject$a());
-var Span$3 = styled.span(_templateObject2$5(), theme.font.extraSmall.size);
-var SpanError$4 = styled(Span$3)(_templateObject3$5(), theme.colors.error.text);
-var Select = styled(InputBase)(_templateObject4$5(), theme.colors.neutrals.white, theme.colors.action, theme.colors.secondary, theme.colors.error.border);
+var Frag$3 = styled.div(_templateObject$a(), function (_ref) {
+  var size = _ref.size;
+  return handleSize$1(size) === '100%' && 'width:100%;';
+});
+var Select = styled(InputBase)(_templateObject2$5(), theme.colors.neutrals.white, function (_ref2) {
+  var size = _ref2.size;
+  return handleSize$1(size);
+}, theme.colors.info.border, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.shadow);
 var maxOptions$1 = 5;
-var optionsSize$1 = 32;
-var Options$2 = styled.ul(_templateObject5$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
-  return props.openTo === 'top' && "\n    top:unset;\n    bottom:100%;\n  ";
-}, function (props) {
-  return props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize$1 : maxOptions$1 * optionsSize$1;
-}, theme.font.small.size, theme.colors.info.bg);
-var TagsValues = styled.ul(_templateObject6$3(), theme.defaultRadius);
-var SelectHidden$1 = styled.select(_templateObject7$3());
-var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$name = _ref.name,
-      name = _ref$name === void 0 ? '' : _ref$name,
-      options = _ref.options,
-      error = _ref.error,
-      valid = _ref.valid,
-      help = _ref.help,
-      label = _ref.label,
-      tooltip = _ref.tooltip,
-      canCreate = _ref.canCreate,
-      size = _ref.size,
-      onChange = _ref.onChange,
-      placeholder = _ref.placeholder,
-      visibleOptionsQty = _ref.visibleOptionsQty,
-      openTo = _ref.openTo,
-      props = objectWithoutProperties(_ref, ["name", "options", "error", "valid", "help", "label", "tooltip", "canCreate", "size", "onChange", "placeholder", "visibleOptionsQty", "openTo"]);
+var TagsValues = styled.ul(_templateObject3$4(), theme.defaultRadius);
+var SelectHidden$1 = styled.select(_templateObject4$4());
+var Tag = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var _ref3$name = _ref3.name,
+      name = _ref3$name === void 0 ? '' : _ref3$name,
+      options = _ref3.options,
+      error = _ref3.error,
+      valid = _ref3.valid,
+      help = _ref3.help,
+      label = _ref3.label,
+      tooltip = _ref3.tooltip,
+      canCreate = _ref3.canCreate,
+      size = _ref3.size,
+      onChange = _ref3.onChange,
+      placeholder = _ref3.placeholder,
+      visibleOptionsQty = _ref3.visibleOptionsQty,
+      openTo = _ref3.openTo,
+      props = objectWithoutProperties(_ref3, ["name", "options", "error", "valid", "help", "label", "tooltip", "canCreate", "size", "onChange", "placeholder", "visibleOptionsQty", "openTo"]);
 
   if (!options || !options[0]) options = [];
   var randId = Math.random() * new Date().getTime();
@@ -6073,6 +5999,12 @@ var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var containerRef = useRef();
   var searchRef = useRef();
   var valueRef = useRef();
+  var optionsRef = useRef();
+
+  var _useState11 = useState(null),
+      _useState12 = slicedToArray(_useState11, 2),
+      anchor = _useState12[0],
+      setAnchor = _useState12[1];
 
   var isSelected = function isSelected(value) {
     return selectedOpt.some(function (key) {
@@ -6135,8 +6067,10 @@ var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
 
   var handleClick = function handleClick(e) {
+    var _optionsRef$current;
+
     var elm = e.target;
-    if (containerRef.current.contains(elm)) return;
+    if (containerRef.current.contains(elm) || ((_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.contains(elm))) return;
     setOpen(false);
   };
 
@@ -6271,13 +6205,15 @@ var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   });
   return /*#__PURE__*/React.createElement(Frag$3, {
-    ref: containerRef
+    ref: containerRef,
+    size: size
   }, label && /*#__PURE__*/React.createElement(Label, {
     htmlFor: name
   }, label, " ", tooltip && /*#__PURE__*/React.createElement(App, {
     text: tooltip
   }), " ", props.Required && /*#__PURE__*/React.createElement(RequiredText, null)), /*#__PURE__*/React.createElement(Select, {
     as: "div",
+    ref: setAnchor,
     size: size,
     className: [open && 'open', error && 'error', valid && 'valid', 'tagEventPrevent'],
     onClick: function onClick() {
@@ -6309,6 +6245,8 @@ var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onFocus: handleFocus,
     onBlur: handleBlur
   }))), open && /*#__PURE__*/React.createElement(TagOptions, {
+    anchor: anchor,
+    listRef: optionsRef,
     name: safeName,
     filter: filter,
     handleSelect: handleSelect,
@@ -6318,7 +6256,7 @@ var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     canCreate: canCreate,
     visibleOptionsQty: visibleOptionsQty,
     openTo: openTo
-  })), help && /*#__PURE__*/React.createElement(Span$3, null, help), error && /*#__PURE__*/React.createElement(SpanError$4, null, /*#__PURE__*/React.createElement("img", {
+  })), help && /*#__PURE__*/React.createElement(SpanHelp, null, help), error && /*#__PURE__*/React.createElement(SpanError, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -6336,16 +6274,18 @@ var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   })));
 });
 
-var TagOptions = function TagOptions(_ref2) {
-  var name = _ref2.name,
-      filter = _ref2.filter,
-      handleSelect = _ref2.handleSelect,
-      options = _ref2.options,
-      searchRef = _ref2.searchRef,
-      addNewOption = _ref2.addNewOption,
-      canCreate = _ref2.canCreate,
-      visibleOptionsQty = _ref2.visibleOptionsQty,
-      openTo = _ref2.openTo;
+var TagOptions = function TagOptions(_ref4) {
+  var anchor = _ref4.anchor,
+      listRef = _ref4.listRef,
+      name = _ref4.name,
+      filter = _ref4.filter,
+      handleSelect = _ref4.handleSelect,
+      options = _ref4.options,
+      searchRef = _ref4.searchRef,
+      addNewOption = _ref4.addNewOption,
+      canCreate = _ref4.canCreate,
+      visibleOptionsQty = _ref4.visibleOptionsQty,
+      openTo = _ref4.openTo;
   var CreateOption;
   var underscored;
 
@@ -6362,9 +6302,11 @@ var TagOptions = function TagOptions(_ref2) {
         });
       },
       value: searchRef.current.value
+    }, /*#__PURE__*/React.createElement(Value$1, {
+      option: true
     }, "Create option \"", /*#__PURE__*/React.createElement("u", {
       className: "tagEventPrevent"
-    }, searchRef.current.value), "\"");
+    }, searchRef.current.value), "\""));
     var searchToUnderscore = searchRef.current ? searchRef.current.value.replaceAll('(', '\\(').replaceAll(')', '\\)') : '';
     underscored = new RegExp('(' + searchToUnderscore + ')', 'giu');
   }
@@ -6379,32 +6321,39 @@ var TagOptions = function TagOptions(_ref2) {
     var msg = searchRef.current && searchRef.current.value.length < 1 ? 'No options left' : 'No match for ';
     noDataOption = /*#__PURE__*/React.createElement("li", {
       className: "tagEventPrevent",
-      dangerouslySetInnerHTML: {
-        __html: "".concat(msg, " <u>").concat((_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.value, "</u>")
+      style: {
+        paddingRight: '8px'
       }
-    });
+    }, /*#__PURE__*/React.createElement("span", null, msg, " ", /*#__PURE__*/React.createElement("u", null, (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.value)));
   }
 
-  return /*#__PURE__*/React.createElement(Options$2, {
+  return /*#__PURE__*/React.createElement(FloatingOptions, {
+    ref: listRef,
+    anchor: anchor,
     id: "".concat(name, "-options"),
-    visibleOptionsQty: visibleOptionsQty,
+    visibleOptionsQty: visibleOptionsQty || maxOptions$1,
     openTo: openTo
   }, options.length > 0 ? filter.map(function (key, index) {
-    if (options[key].value === undefined) return !noDataOption ? /*#__PURE__*/React.createElement("li", {
+    if (options[key].value === undefined) return !noDataOption ? /*#__PURE__*/React.createElement(OptionGroup$1, {
       key: key,
       className: "tagEventPrevent"
-    }, /*#__PURE__*/React.createElement("small", null, /*#__PURE__*/React.createElement("strong", null, options[key].name))) : null;else return /*#__PURE__*/React.createElement("li", {
+    }, options[key].name) : null;else return /*#__PURE__*/React.createElement("li", {
       className: "tagEventPrevent ".concat(index === 0 ? 'active' : ''),
       value: options[key].value,
       key: key,
       onClick: function onClick() {
         handleSelect(key);
       }
-    }, underscored ? /*#__PURE__*/React.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: options[key].name.replace(underscored, '<u>$1</u>')
+    }, /*#__PURE__*/React.createElement(Value$1, {
+      option: true,
+      style: {
+        marginRight: 4
       }
-    }) : options[key].name);
+    }, underscored ? options[key].name.split(underscored).map(function (part, i) {
+      return i % 2 ? /*#__PURE__*/React.createElement("u", {
+        key: i
+      }, part) : part;
+    }) : options[key].name));
   }) : null, CreateOption, noDataOption);
 };
 
@@ -6441,9 +6390,19 @@ var calculateContrast = function calculateContrast() {
   return ratio < 1 / 4.5;
 };
 
-function _templateObject5$4() {
+function _templateObject6$3() {
   var data = taggedTemplateLiteral(["\n    position: absolute;\n    height: 1px;\n    width: 1px;\n    z-index: -1;\n    opacity: 0;\n"]);
 
+  _templateObject6$3 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5$4() {
+  var data = taggedTemplateLiteral(["\n  background:#fff;\n  border-radius:", ";\n  padding:5px;\n  list-style:none;\n  margin:0;\n  display: grid;\n  grid-template-columns: 24px 24px 24px 24px 24px 24px 24px 24px;\n  position:absolute;\n  left:48px;\n  top:0;\n  z-index:10;\n  box-shadow: 0px 3px 6px ", "19;\n\n  > li {\n    width:24px;\n    height:24px;\n    cursor:pointer;\n    position: relative;\n\n    &.selected {\n        z-index: 1;\n        box-shadow: 0 0 0 2px ", ";\n        border-radius: ", ";\n    }\n\n    &:hover {\n        z-index: 2;\n        box-shadow: 0 0 0 2px ", ";\n        border-radius: ", ";\n    }\n  }\n"]);
+
   _templateObject5$4 = function _templateObject5() {
     return data;
   };
@@ -6451,20 +6410,20 @@ function _templateObject5$4() {
   return data;
 }
 
-function _templateObject4$6() {
-  var data = taggedTemplateLiteral(["\n  background:#fff;\n  border-radius:", ";\n  padding:5px;\n  list-style:none;\n  margin:0;\n  display: grid;\n  grid-template-columns: 24px 24px 24px 24px 24px 24px 24px 24px;\n  position:absolute;\n  left:48px;\n  top:0;\n  box-shadow: 0px 3px 6px ", "19;\n\n  > li {\n    width:24px;\n    height:24px;\n    cursor:pointer;\n    position: relative;\n\n    &.selected {\n        z-index: 1;\n        box-shadow: 0 0 0 2px ", ";\n        border-radius: ", ";\n    }\n\n    &:hover {\n        z-index: 2;\n        box-shadow: 0 0 0 2px ", ";\n        border-radius: ", ";\n    }\n  }\n"]);
+function _templateObject4$5() {
+  var data = taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: ", ";\n    flex-grow: 1;\n    width: stretch;\n    height: stretch;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 4px;\n"]);
 
-  _templateObject4$6 = function _templateObject4() {
+  _templateObject4$5 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$6() {
-  var data = taggedTemplateLiteral(["\n  height:40px;\n  width:40px;\n  background:", ";\n  border-radius:40px;\n  cursor:pointer;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  box-sizing:border-box;\n\n  &.hover {\n    border:1px solid #0071BC;\n    box-shadow: 0px 0px 6px #9DDDF4;\n  }\n\n  &:focus{\n    box-shadow:0px 0px 6px ", ";\n    border:1px solid ", ";\n    outline:none;\n  }\n\n"]);
+function _templateObject3$5() {
+  var data = taggedTemplateLiteral(["\n  height:40px;\n  width:40px;\n    //padding: 4px;\n  border-radius: ", ";\n    border-color: ", ";\n    border-width: 1px;\n    border-style: solid;\n    cursor:pointer;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  box-sizing:border-box;\n\n  &.hover,\n  &:focus {\n    box-shadow:0px 0px 6px ", ";\n    border:1px solid ", ";\n    outline:none;\n  }\n"]);
 
-  _templateObject3$6 = function _templateObject3() {
+  _templateObject3$5 = function _templateObject3() {
     return data;
   };
 
@@ -6492,19 +6451,21 @@ function _templateObject$b() {
 }
 var Frag$4 = styled.div(_templateObject$b());
 var Field = styled.div(_templateObject2$6());
-var WraperBucket = styled.div(_templateObject3$6(), function (props) {
-  return props.background ? props.background : theme.colors.info.shadow;
-}, theme.colors.action, theme.colors.secondary);
-var ColorBox = styled.ul(_templateObject4$6(), theme.defaultRadius, theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
-var SelectHidden$2 = styled.select(_templateObject5$4());
-var InputColor = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var name = _ref.name,
-      tooltip = _ref.tooltip,
-      value = _ref.value,
-      help = _ref.help,
-      error = _ref.error,
-      label = _ref.label,
-      props = objectWithoutProperties(_ref, ["name", "tooltip", "value", "help", "error", "label"]);
+var WraperBucket = styled.div(_templateObject3$5(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.action, theme.colors.secondary);
+var ColorIndicator = styled.div(_templateObject4$5(), function (_ref) {
+  var background = _ref.background;
+  return background;
+}, theme.defaultRadius);
+var ColorBox = styled.ul(_templateObject5$4(), theme.defaultRadius, theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
+var SelectHidden$2 = styled.select(_templateObject6$3());
+var InputColor = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var name = _ref2.name,
+      tooltip = _ref2.tooltip,
+      value = _ref2.value,
+      help = _ref2.help,
+      error = _ref2.error,
+      label = _ref2.label,
+      props = objectWithoutProperties(_ref2, ["name", "tooltip", "value", "help", "error", "label"]);
 
   var _useState = useState(false),
       _useState2 = slicedToArray(_useState, 2),
@@ -6528,14 +6489,17 @@ var InputColor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setSelectedColor = _useState4[1];
 
   useEffect(function () {
-    document.addEventListener("mousedown", handleClick);
+    document.addEventListener('mousedown', handleClick);
     return function () {
-      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener('mousedown', handleClick);
     };
   }, []);
 
   var handleClick = function handleClick(e) {
-    if (e.target.classList.contains('colorEventPrevent')) return;
+    if (e.target.classList.contains('colorEventPrevent')) {
+      return;
+    }
+
     setOpen(false);
   };
 
@@ -6555,13 +6519,14 @@ var InputColor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: function onClick() {
       return setOpen(!open);
     },
-    className: ['colorEventPrevent', open && 'hover'],
+    className: ['colorEventPrevent', open && 'hover']
+  }, /*#__PURE__*/React.createElement(ColorIndicator, {
     background: selectedColor[0] && selectedColor[0]
   }, /*#__PURE__*/React.createElement(Icons.Bucket, {
     size: "28px",
     className: "colorEventPrevent",
     color: selectedColor[1] ? selectedColor[1] : '#333'
-  })), open && /*#__PURE__*/React.createElement(ColorBox, {
+  }))), open && /*#__PURE__*/React.createElement(ColorBox, {
     className: "colorEventPrevent"
   }, colors.map(function (item, key) {
     return /*#__PURE__*/React.createElement("li", {
@@ -7424,10 +7389,10 @@ var Exported = function Exported(_ref) {
   }, props));
 };
 
-function _templateObject7$4() {
+function _templateObject7$3() {
   var data = taggedTemplateLiteral(["\n    box-sizing: border-box;\n    width: 92px;\n    height: 92px;\n    padding: 4px;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    background-color: ", ";\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n    text-align: center;\n    word-break: break-word;\n    overflow: hidden;\n\n    &::before {\n        content: \"\";\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 0;\n        background-size: cover;\n        background-position: center;\n        background-image: url(", ");\n    }\n\n    + div,\n    + label {\n        margin-left: 8px;\n    }\n\n    button {\n        position: absolute;\n        z-index: 1;\n        top: 4px;\n        right: 4px;\n        padding: 4px;\n        height: auto;\n        line-height: 0;\n    }\n\n    label& {\n        cursor: pointer;\n        border-style: dashed;\n\n        &:hover,\n        &.highlight {\n            background-color: ", ";\n        }\n\n        &:active, {\n        &.highlight {\n            border-color: ", ";\n            box-shadow: 0 0 6px ", ";\n        }\n    }\n"]);
 
-  _templateObject7$4 = function _templateObject7() {
+  _templateObject7$3 = function _templateObject7() {
     return data;
   };
 
@@ -7454,20 +7419,20 @@ function _templateObject5$5() {
   return data;
 }
 
-function _templateObject4$7() {
+function _templateObject4$6() {
   var data = taggedTemplateLiteral(["\n    height:38px;\n    width:38px;\n    border-radius:38px;\n    background:#FAFAFA;\n    border:1px solid ", ";\n    position:absolute;\n    z-index:1;\n    top:0;\n    display: flex;\n    justify-content: center;\n    align-items: flex-end;\n\n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        border-radius: 38px;\n    }\n"]);
 
-  _templateObject4$7 = function _templateObject4() {
+  _templateObject4$6 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$7() {
+function _templateObject3$6() {
   var data = taggedTemplateLiteral(["\n    box-sizing:border-box;\n    background:#FAFAFA;\n    width:140px;\n    border-radius: 20px 2px 2px 20px;\n    border:1px solid transparent;\n\n    &:hover {\n        border:none;\n    }\n\n    >span {\n        text-align: center;\n        display: block;\n        margin-left: 32px;\n        color:#707070;\n        font-size:14px;\n        font-weight:400;\n\n        text-overflow: ellipsis;\n        height: 16px;\n        white-space: nowrap;\n        overflow: hidden;\n    }\n"]);
 
-  _templateObject3$7 = function _templateObject3() {
+  _templateObject3$6 = function _templateObject3() {
     return data;
   };
 
@@ -7495,8 +7460,8 @@ function _templateObject$d() {
 }
 var Frag$5 = styled.div(_templateObject$d());
 var Wrapper$1 = styled.label(_templateObject2$8(), theme.colors.info.bg, theme.colors.secondary, theme.colors.action, theme.colors.secondary, theme.colors.success.border, theme.colors.success.border, theme.colors.error.border, theme.colors.error.border);
-var Input$1 = styled(InputBase)(_templateObject3$7());
-var Profile = styled.div(_templateObject4$7(), theme.colors.neutrals.silver);
+var Input$1 = styled(InputBase)(_templateObject3$6());
+var Profile = styled.div(_templateObject4$6(), theme.colors.neutrals.silver);
 var HiddenInput = styled.input(_templateObject5$5());
 var Uploader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var name = _ref.name,
@@ -7638,7 +7603,7 @@ var processFileList = /*#__PURE__*/function () {
 }();
 
 var DropUploaderList = styled.div(_templateObject6$4());
-var DropUploaderPreview = styled.div(_templateObject7$4(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.extra.whiteSmoke, theme.font.extraSmall.size, theme.font.main, theme.colors.neutrals.silver, function (props) {
+var DropUploaderPreview = styled.div(_templateObject7$3(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.extra.whiteSmoke, theme.font.extraSmall.size, theme.font.main, theme.colors.neutrals.silver, function (props) {
   return typeof props.preview === 'string' && props.preview;
 }, theme.colors.info.bg, theme.colors.secondary, theme.colors.secondary);
 var DropUploader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
@@ -7875,20 +7840,20 @@ function _templateObject5$6() {
   return data;
 }
 
-function _templateObject4$8() {
+function _templateObject4$7() {
   var data = taggedTemplateLiteral(["\n    width: 0;\n    height: 0;\n    margin: 0;\n    visibility: hidden;\n    pointer-events: none;\n\n    &:checked + ", " {\n        background: ", ";\n        border: 1px solid ", ";\n\n        &::after {\n            background:", ";\n            margin-left: 19px;\n        }\n    }\n"]);
 
-  _templateObject4$8 = function _templateObject4() {
+  _templateObject4$7 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$8() {
+function _templateObject3$7() {
   var data = taggedTemplateLiteral(["\n    width: 36px;\n    height: 20px;\n    border-radius: 100px;\n    background: ", ";\n    cursor: pointer;\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    transition: 0.2s;\n\n    &:focus {\n        box-shadow: 0px 0px 6px ", ";\n        border: 1px solid ", ";\n        outline: none;\n    }\n\n    &::after {\n        content: \"\";\n        display: block;\n        border-radius: 100%;\n        width: 12px;\n        height: 12px;\n        margin: 3px;\n        background: ", ";\n        transition: 0.2s;\n    }\n"]);
 
-  _templateObject3$8 = function _templateObject3() {
+  _templateObject3$7 = function _templateObject3() {
     return data;
   };
 
@@ -7896,7 +7861,7 @@ function _templateObject3$8() {
 }
 
 function _templateObject2$9() {
-  var data = taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:focus {\n        outline: none;\n    }\n"]);
+  var data = taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    align-items: center;\n    ", "\n\n    &:focus {\n        outline: none;\n    }\n"]);
 
   _templateObject2$9 = function _templateObject2() {
     return data;
@@ -7915,9 +7880,11 @@ function _templateObject$e() {
   return data;
 }
 var Frag$6 = styled.div(_templateObject$e());
-var CheckBoxWrapper = styled.div(_templateObject2$9());
-var CheckBoxLabel = styled.label(_templateObject3$8(), theme.colors.neutrals.white, theme.colors.info.border, theme.colors.action, theme.colors.secondary, theme.colors.info.border);
-var CheckBox$1 = styled.input(_templateObject4$8(), CheckBoxLabel, theme.colors.info.text, theme.colors.info.border, theme.colors.neutrals.white);
+var CheckBoxWrapper = styled.div(_templateObject2$9(), function (props) {
+  return props.hasLabel && 'height: 40px;';
+});
+var CheckBoxLabel = styled.label(_templateObject3$7(), theme.colors.neutrals.white, theme.colors.info.border, theme.colors.action, theme.colors.secondary, theme.colors.info.border);
+var CheckBox$1 = styled.input(_templateObject4$7(), CheckBoxLabel, theme.colors.info.text, theme.colors.info.border, theme.colors.neutrals.white);
 var ToggleLabel = styled.label(_templateObject5$6(), theme.colors.neutrals.medium, theme.font.medium.size, theme.font.medium.lineHeight);
 var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var name = _ref.name,
@@ -7961,7 +7928,9 @@ var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
     htmlFor: id
   }, label, " ", tooltip && /*#__PURE__*/React.createElement(App, {
     text: tooltip
-  })), /*#__PURE__*/React.createElement(CheckBoxWrapper, null, /*#__PURE__*/React.createElement(CheckBox$1, {
+  })), /*#__PURE__*/React.createElement(CheckBoxWrapper, {
+    hasLabel: !!label
+  }, /*#__PURE__*/React.createElement(CheckBox$1, {
     name: name,
     id: id,
     type: "checkbox",
@@ -8535,20 +8504,20 @@ var ButtonGroup = function ButtonGroup(_ref) {
   }));
 };
 
-function _templateObject4$9() {
+function _templateObject4$8() {
   var data = taggedTemplateLiteral(["\n    position:relative;\n\n    &:hover > ", " {\n        visibility: visible;\n    }\n\n    &:hover > ", " > * {\n        animation-name: ", ";\n        animation-duration: 200ms;\n        animation-fill-mode: backwards;\n        animation-timing-function: ease-in-out;\n    }\n"]);
 
-  _templateObject4$9 = function _templateObject4() {
+  _templateObject4$8 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$9() {
+function _templateObject3$8() {
   var data = taggedTemplateLiteral(["\n    cursor:pointer;\n    background:white;\n    border-radius:100%;\n    padding:8px;\n    display:flex;\n    justify-content:center;\n    border:1px solid rgb(204, 204, 204);\n"]);
 
-  _templateObject3$9 = function _templateObject3() {
+  _templateObject3$8 = function _templateObject3() {
     return data;
   };
 
@@ -8612,8 +8581,8 @@ var ListContent = styled.div(_templateObject2$b(), function (props) {
 }, function (props) {
   return props.direction === 'bottom' && "\n        flex-direction:column;\n        justify-content:start;\n        top:".concat(POSITION_LIST, ";\n        bottom:0;\n        right:0;\n        left:0;\n        padding-top:").concat(POSITION_LIST_DISTANCE, ";\n    ");
 });
-var PreviewContent = styled.div(_templateObject3$9());
-var Container$1 = styled.div(_templateObject4$9(), ListContent, ListContent, listAnimation);
+var PreviewContent = styled.div(_templateObject3$8());
+var Container$1 = styled.div(_templateObject4$8(), ListContent, ListContent, listAnimation);
 
 var ButtonIcon = function ButtonIcon(_ref) {
   var children = _ref.children,
@@ -8801,20 +8770,20 @@ function _templateObject5$7() {
   return data;
 }
 
-function _templateObject4$a() {
+function _templateObject4$9() {
   var data = taggedTemplateLiteral(["\n    font-size: ", ";\n    line-height: ", ";\n"]);
 
-  _templateObject4$a = function _templateObject4() {
+  _templateObject4$9 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$a() {
+function _templateObject3$9() {
   var data = taggedTemplateLiteral(["\n    font-size: ", ";\n    line-height: ", ";\n"]);
 
-  _templateObject3$a = function _templateObject3() {
+  _templateObject3$9 = function _templateObject3() {
     return data;
   };
 
@@ -8844,8 +8813,8 @@ var Div = styled.div(_templateObject$j(), theme.defaultRadius, function (props)
   return props.useClose && "\n    padding-right: 32px;\n    ";
 });
 var Title$2 = styled.h5(_templateObject2$c(), theme.font.main, theme.font.medium.size, theme.font.big.lineHeight);
-var Content = styled.p(_templateObject3$a(), theme.font.extraSmall.size, theme.font.small.lineHeight);
-var SmallContent = styled(Content)(_templateObject4$a(), theme.font.small.size, theme.font.small.lineHeight);
+var Content = styled.p(_templateObject3$9(), theme.font.extraSmall.size, theme.font.small.lineHeight);
+var SmallContent = styled(Content)(_templateObject4$9(), theme.font.small.size, theme.font.small.lineHeight);
 var Close = styled.button.attrs(function (props) {
   return {
     type: 'button'
@@ -8935,5 +8904,5 @@ var index = {
   Error: AlertError
 };
 
-export { theme as Theme, ButtonIcon, Exported as Button, Dropdown$1 as ButtonDropdown, ButtonGroup, Form, Input, Textarea, Password, CheckBox, RadioBox, Dropdown, CustomDropdown, Tag as TagInput, InputColor, Uploader, Toggle, TimePicker, DropUploader, Title, SubTitle, ThirdTitle, Text, index as Alert, Spacer, Icons as Icon, logo as Logo, dspwLoading as Loading };
+export { theme as Theme, ButtonIcon, Exported as Button, Dropdown$1 as ButtonDropdown, ButtonGroup, Form, Input, Textarea, Password, CheckBox, RadioBox, Dropdown, CustomDropdown, Tag as TagInput, InputColor, Uploader, Toggle, TimePicker, DropUploader, Title, SubTitle, ThirdTitle, Text, Emphasis, index as Alert, Spacer, Icons as Icon, logo as Logo, dspwLoading as Loading };
 //# sourceMappingURL=index.es.js.map