@dspworkplace/ui 1.5.60 → 2.0.1

package/dist/index.es.js

@@ -1,43 +1,45 @@
 import React, { forwardRef, useState, Fragment, useCallback, useEffect, useRef, Children } from 'react';
 import styled, { keyframes } from 'styled-components';
+import { supercomplete, useCombobox } from '@szhsin/react-autocomplete';
 
-var defaultRadius = '2px';
+var defaultRadius = '4px';
 var colors = {
-  primary: "#F7931E",
-  secondary: "#0071BC",
-  action: "#9DDDF4",
+  primary: '#F7931E',
+  secondary: '#0071BC',
+  action: '#9DDDF4',
   neutrals: {
-    black: "#000000",
-    gray: "#333333",
-    medium: "#707070",
-    silver: "#CCCCCC",
-    white: "#FFFFFF"
+    black: '#000000',
+    gray: '#333333',
+    medium: '#707070',
+    silver: '#CCCCCC',
+    white: '#FFFFFF'
   },
   warnings: {
-    border: "#F5C26B",
-    text: "#DBAE60",
-    shadow: "#FAE0B5",
-    bg: "#FEF8F0"
+    border: '#e7a73b',
+    text: '#9c6505',
+    shadow: '#FAE0B5',
+    bg: '#FEF8F0'
   },
   success: {
-    border: "#00BDA5",
-    text: "#00A38D",
-    shadow: "#7FDED2",
-    bg: "#E5F8F6"
+    border: '#00BDA5',
+    text: '#007d6c',
+    shadow: '#7FDED2',
+    bg: '#E5F8F6'
   },
   error: {
-    border: "#F2545B",
-    text: "#D94C53",
-    shadow: "#F8A9AD",
-    bg: "#FDEDEE"
+    border: '#F2545B',
+    text: '#bd4248',
+    shadow: '#F8A9AD',
+    bg: '#FDEDEE'
   },
   info: {
-    border: "#7C98B6",
-    text: "#516F90",
-    shadow: "#CBD6E2",
-    bg: "#EAF0F6"
+    border: '#7C98B6',
+    text: '#11598b',
+    shadow: '#CBD6E2',
+    bg: '#EAF0F6'
   },
   extra: {
+    blueishWhite: '#fafbfc',
     whiteSmoke: '#F5F5F5',
     gray93: '#FAFAFA'
   }
@@ -48,27 +50,27 @@ var font = {
     lineHeight: '20px'
   },
   medium: {
-    size: '16px',
+    size: '14px',
     lineHeight: '16px'
   },
   small: {
-    size: '14px',
+    size: '12px',
     lineHeight: '16px'
   },
   extraSmall: {
-    size: '12px',
+    size: '10px',
     lineHeight: '12px'
   },
   tiny: {
     size: '8px',
     lineHeight: '12px'
   },
-  main: 'circe-rounded',
+  main: '"Huninn", sans-serif',
   body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
 };
 var form = {
   input: {
-    radius: '2px',
+    radius: defaultRadius,
     padding: '12px 8px'
   },
   button: {
@@ -318,7 +320,7 @@ function _templateObject9() {
 }
 
 function _templateObject8() {
-  var data = taggedTemplateLiteral(["\n  padding:0;\n  margin:4px 0 0 0;\n  background:white;\n  border:1px solid ", ";\n  box-shadow:0 0 6px ", ";\n  border-radius:2px;\n  list-style:none;\n  width:auto;\n  display:inline-block;\n  position: absolute;\n  top: 107%;\n  left: -1px;\n  z-index:10;\n\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\n    &:hover,\n    &.selected {\n      background:", ";\n\n      >ul {\n        display:inline-block;\n      }\n    }\n\n    &.alone {\n      border-top:1px solid ", ";\n    }\n\n  }\n"]);
+  var data = taggedTemplateLiteral(["\n  padding:0;\n  margin:4px 0 0 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: 107%;\n  left: -1px;\n  z-index:10;\n\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\n    &:hover,\n    &.selected {\n      background:", ";\n\n      >ul {\n        display:inline-block;\n      }\n    }\n\n    &.alone {\n      border-top:1px solid ", ";\n    }\n\n  }\n"]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -338,7 +340,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = taggedTemplateLiteral(["\n  width:", ";\n  height:40px;\n  background:white;\n  border-radius:2px;\n  border:1px solid ", ";\n  cursor:pointer;\n  position:relative;\n  box-sizing:border-box;\n  padding:12px 8px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n\n  &.open {\n      border-color:", ";\n      box-shadow:0 0 6px ", ";\n  }\n\n  &.error {\n    border-color:", ";\n  }\n\n  &.error.open {\n    border-color:", ";\n    box-shadow:0 0 6px ", ";\n  }\n\n  &.valid {\n    border-color:", ";\n  }\n\n   &.valid.open {\n    border-color:", ";\n    box-shadow:0 0 6px ", ";\n  }\n"]);
+  var data = taggedTemplateLiteral(["\n  width:", ";\n  height:40px;\n  background:white;\n  border-radius:", ";\n  border:1px solid ", ";\n  cursor:pointer;\n  position:relative;\n  box-sizing:border-box;\n  padding:12px 8px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n\n  &.open {\n      border-color:", ";\n      box-shadow:0 0 6px ", ";\n  }\n\n  &.error {\n    border-color:", ";\n  }\n\n  &.error.open {\n    border-color:", ";\n    box-shadow:0 0 6px ", ";\n  }\n\n  &.valid {\n    border-color:", ";\n  }\n\n   &.valid.open {\n    border-color:", ";\n    box-shadow:0 0 6px ", ";\n  }\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -358,7 +360,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:Circe-Rounded;\n  display:block;\n  color:#516F90;\n  margin-top:4px;\n"]);
+  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"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -378,7 +380,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:Circe-Rounded;\n  display:block;\n  padding-bottom:2px;\n  color:#707070;\n\n  >.requiredField {\n    color:", ";\n  }\n\n"]);
+  var data = taggedTemplateLiteral(["\n  font-size:", ";\n    line-height: ", ";\n  font-weight:normal;\n  font-family:\"Huninn\", sans-serif;\n  display:block;\n  padding-bottom:4px;\n  color: ", ";\n\n  >.requiredField {\n    color:", ";\n  }\n\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -414,7 +416,7 @@ var handleSize = function handleSize(sizeType) {
 };
 
 var Frag = styled.div(_templateObject$1());
-var Label = styled.label(_templateObject2(), theme.font.medium.size, theme.colors.error.text);
+var Label = styled.label(_templateObject2(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.medium, theme.colors.error.text);
 var borderDefault = "\n    border-width:1px;\n    border-style:solid;\n";
 var InputBase = styled.input(_templateObject3(), theme.colors.neutrals.white, theme.colors.neutrals.silver, theme.form.input.radius, theme.font.small.size, theme.font.small.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
   var size = _ref.size;
@@ -432,13 +434,13 @@ var RequiredText = function RequiredText() {
 var SelectUi = styled.div(_templateObject6(), function (_ref2) {
   var size = _ref2.size;
   return handleSize(size);
-}, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow);
+}, theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow);
 var Value = styled.span(_templateObject7(), function (props) {
   return props.option ? '#707070' : theme.colors.neutrals.gray;
 }, function (props) {
   return props.option && "\n    display:inline-block;\n    flex:1;\n  ";
 });
-var Options = styled.ul(_templateObject8(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
+var Options = styled.ul(_templateObject8(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
   return props.isChild && "\n    position:absolute;\n    left:100%;\n    margin-left:6px;\n    top:-4px;\n\n    &::before {\n        content: \" \";\n        height: 100%;\n        width: 6px;\n        background: transparent;\n        display: block;\n        position: absolute;\n        left: -7px;\n    }\n  ";
 }, theme.font.small.size, theme.colors.info.bg, theme.colors.neutrals.silver);
 var OptionGroup = styled.div(_templateObject9());
@@ -458,7 +460,7 @@ 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"]);
+  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;
@@ -478,7 +480,7 @@ function _templateObject3$1() {
 }
 
 function _templateObject2$1() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:Circe-Rounded;\n  display:block;\n  color:#516F90;\n  margin-top:4px;\n"]);
+  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"]);
 
   _templateObject2$1 = function _templateObject2() {
     return data;
@@ -488,7 +490,7 @@ function _templateObject2$1() {
 }
 
 function _templateObject$2() {
-  var data = taggedTemplateLiteral(["\n    background:", ";\n    border-color:", ";\n    border-width:1px;\n    border-style:solid;\n    border-radius:", ";\n    font-size:", ";\n    line-height:", ";\n    height:40px;\n    padding:", ";\n    color:", ";\n    width:", ";\n\n    &.hasChildren {\n      padding-right:40px;\n    }\n\n    &.hasChildren.childrenLeft {\n      padding-right:", ";\n      padding-left:40px;\n    }\n\n    &:disabled {\n        background: ", ";\n        ", ";\n        border-color: ", ";\n        color: ", ";\n    }\n\n    &:disabled::placeholder {\n        color:#eee;\n    }\n\n   &:hover {\n      ", " ;\n      border-color:", ";\n   }\n\n   &:active {\n      ", ";\n      border-color:", ";\n   }\n\n   &:focus {\n    ", ";\n    box-shadow:0px 0px 6px ", ";\n    border-color:", ";\n   }\n\n   &::placeholder {\n      color:", ";\n      font-size:", ";\n   }\n\n   &:read-only {\n    background:", ";\n    border-color:", ";\n    color:#707070;\n   }\n"]);
+  var data = taggedTemplateLiteral(["\n    background: ", ";\n    border-color: ", ";\n    border-width: 1px;\n    border-style: solid;\n    border-radius: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: 40px;\n    padding: ", ";\n    color: ", ";\n    width: ", ";\n\n    &.hasChildren {\n        padding-right: 40px;\n    }\n\n    &.hasChildren.childrenLeft {\n        padding-right: ", ";\n        padding-left: 40px;\n    }\n\n    &:disabled {\n        background: ", ";\n        ", ";\n        border-color: ", ";\n        color: ", ";\n    }\n\n    &:disabled::placeholder {\n        color: #eee;\n    }\n\n    &:hover {\n        border-width: 1px;\n        border-style: solid;\n        border-color: ", ";\n        border-color: ", ";\n    }\n\n    &:active {\n        ", ";\n        border-color: ", ";\n    }\n\n    &:focus {\n        ", ";\n        box-shadow: 0px 0px 6px ", ";\n        border-color: ", ";\n    }\n\n    &::placeholder {\n        color: ", ";\n        font-size: ", ";\n    }\n\n    &:read-only {\n        background: ", ";\n        border-color: ", ";\n        color: #707070;\n    }\n"]);
 
   _templateObject$2 = function _templateObject() {
     return data;
@@ -510,7 +512,7 @@ var handleSize$1 = function handleSize(sizeType) {
       return '460px';
 
     default:
-      return '300px';
+      return '100%';
   }
 };
 
@@ -523,7 +525,7 @@ var handlerColor = function handlerColor(typeColor) {
       return theme.colors.success.text;
 
     default:
-      return theme.colors.neutrals.silver;
+      return null;
   }
 };
 
@@ -540,12 +542,10 @@ var handleMask = function handleMask(type) {
   }
 };
 
-var InputBase$1 = styled.input(_templateObject$2(), theme.colors.neutrals.white, function (props) {
-  return handlerColor(props.validation);
-}, theme.form.input.radius, theme.font.small.size, theme.font.small.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
+var InputBase$1 = styled.input(_templateObject$2(), theme.colors.neutrals.white, theme.colors.neutrals.silver, theme.form.input.radius, theme.font.medium.size, theme.font.medium.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
   var size = _ref.size;
   return handleSize$1(size);
-}, theme.form.input.padding, theme.colors.extra.whiteSmoke, borderDefault$1, theme.colors.neutrals.silver, theme.colors.neutrals.medium, borderDefault$1, function (props) {
+}, theme.form.input.padding, theme.colors.extra.whiteSmoke, borderDefault$1, theme.colors.neutrals.silver, theme.colors.neutrals.medium, theme.colors.secondary, function (props) {
   return handlerColor(props.validation);
 }, borderDefault$1, function (props) {
   return handlerColor(props.validation);
@@ -555,7 +555,7 @@ var SpanError$1 = styled(Span)(_templateObject3$1(), theme.colors.error.text);
 var Frag$1 = styled.div(_templateObject4$1(), function (_ref2) {
   var size = _ref2.size;
   return handleSize$1(size);
-});
+}, theme.colors.secondary);
 var Input = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var name = _ref3.name,
       label = _ref3.label,
@@ -598,14 +598,19 @@ var Input = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   }
 
   var maskFunction = null;
-  if (mask) maskFunction = handleMask(mask);
+
+  if (mask) {
+    maskFunction = handleMask(mask);
+  }
 
   var handleChange = function handleChange(e) {
     if (onChange) {
       onChange(e);
     }
 
-    if (maskFunction) e.target.value = maskFunction(e.target.value);
+    if (maskFunction) {
+      e.target.value = maskFunction(e.target.value);
+    }
   };
 
   return /*#__PURE__*/React.createElement(Frag$1, {
@@ -3950,7 +3955,7 @@ var Wrapper = function Wrapper(Element) {
   }, function (props) {
     return props.onClick && "\n        cursor: pointer;\n        ";
   }, function (props) {
-    return props.color ? props.color + ' !important' : theme.colors.secondary;
+    return props.color ? props.color + ' !important' : 'currentColor';
   }, function (props) {
     return props.strokeColor && "stroke: ".concat(props.strokeColor, " !important;");
   }, function (props) {
@@ -4143,7 +4148,7 @@ Items.forEach(function (key) {
 });
 
 function _templateObject$4() {
-  var data = taggedTemplateLiteral(["\n  height:14px;\n  width:14px;\n  border-radius: 100%;\n  background: ", "; \n  border: 1px solid ", ";\n  color:", ";\n  font-family:Circe-Rounded;\n  display: inline-block;\n  font-size: 10px;\n  text-align:center;\n  font-weight:bold;\n  position:relative;\n  top:-2px;\n  left:5px;\n  \n   >div {\n      display:none;\n      background:white;\n      padding:7px;\n      position:absolute;\n      top:-40px;\n      left:-4px;\n      white-space: nowrap;\n      font-weight:300;\n      color:#707070;  \n      box-shadow:0 0 6px #ccc;\n    \n      &::before {\n        content: \" \";\n        width: 0;\n        height: 0;\n        border-left: 5px solid transparent;\n        border-right: 5px solid transparent;\n        border-top: 5px solid white;\n        position: absolute;\n        bottom: -5px;\n      }\n  }\n  \n  &:hover {\n    div {\n      display:inline-block;\n    }  \n  }\n"]);
+  var data = taggedTemplateLiteral(["\n  height:14px;\n  width:14px;\n  border-radius: 100%;\n  background: ", "; \n  border: 1px solid ", ";\n  color:", ";\n  font-family:\"Huninn\", sans-serif;\n  display: inline-block;\n  font-size: 10px;\n  text-align:center;\n  font-weight:bold;\n  position:relative;\n  top:-2px;\n  left:5px;\n  \n   >div {\n      display:none;\n      background:white;\n      padding:7px;\n      position:absolute;\n      top:-40px;\n      left:-4px;\n      white-space: nowrap;\n      font-weight:300;\n      color:#707070;  \n      box-shadow:0 0 6px #ccc;\n    \n      &::before {\n        content: \" \";\n        width: 0;\n        height: 0;\n        border-left: 5px solid transparent;\n        border-right: 5px solid transparent;\n        border-top: 5px solid white;\n        position: absolute;\n        bottom: -5px;\n      }\n  }\n  \n  &:hover {\n    div {\n      display:inline-block;\n    }  \n  }\n"]);
 
   _templateObject$4 = function _templateObject() {
     return data;
@@ -4171,7 +4176,7 @@ var mergeRefs = function mergeRefs(refs) {
 };
 
 function _templateObject4$2() {
-  var data = taggedTemplateLiteral(["\n  font-size:14px;\n  line-height:16px;\n  color:", ";\n"]);
+  var data = taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n\n    ", "\n}\n"]);
 
   _templateObject4$2 = function _templateObject4() {
     return data;
@@ -4181,7 +4186,7 @@ function _templateObject4$2() {
 }
 
 function _templateObject3$2() {
-  var data = taggedTemplateLiteral(["\n   font-size:16px;\n   line-height:20px;\n"]);
+  var data = taggedTemplateLiteral(["\n    font-size: 16px;\n    line-height: 20px;\n"]);
 
   _templateObject3$2 = function _templateObject3() {
     return data;
@@ -4191,7 +4196,7 @@ function _templateObject3$2() {
 }
 
 function _templateObject2$2() {
-  var data = taggedTemplateLiteral(["\n  font-family:circe-rounded;\n  font-weight:bold;\n  font-size:22px;\n  line-height:28px;\n  color: ", ";\n"]);
+  var data = taggedTemplateLiteral(["\n    font-family: \"Huninn\", sans-serif;\n    font-weight: bold;\n    font-size: 24px;\n    line-height: 28px;\n    color: ", ";\n"]);
 
   _templateObject2$2 = function _templateObject2() {
     return data;
@@ -4201,7 +4206,7 @@ function _templateObject2$2() {
 }
 
 function _templateObject$5() {
-  var data = taggedTemplateLiteral(["\n  font-family:circe-rounded;\n  font-weight:bold;\n  font-size:36px;\n  line-height:44px;\n  color: ", ";\n"]);
+  var data = taggedTemplateLiteral(["\n    font-family: \"Huninn\", sans-serif;\n    font-weight: bold;\n    font-size: 36px;\n    line-height: 40px;\n    color: ", ";\n"]);
 
   _templateObject$5 = function _templateObject() {
     return data;
@@ -4209,13 +4214,36 @@ function _templateObject$5() {
 
   return data;
 }
-var Title = styled.h1(_templateObject$5(), theme.colors.secondary);
+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);
+var Text = styled.p(_templateObject4$2(), theme.colors.neutrals.gray, function (_ref) {
+  var subtle = _ref.subtle;
+  return subtle && "\n    color:".concat(theme.colors.neutrals.medium, ";\n    ");
+});
+
+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    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"]);
 
   _templateObject12 = function _templateObject12() {
     return data;
@@ -4225,7 +4253,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    color: #707070;\n    font-size: 12px;\n    padding: 8px;\n    font-weight: bold;\n    cursor: default;\n    white-space: nowrap;\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -4235,7 +4263,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:2px;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin-right:9px;\n  &:focus{\n      border-color:", ";\n      box-shadow:0 0 6px ", ";\n  }\n\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"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -4245,7 +4273,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    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"]);
 
   _templateObject9$1 = function _templateObject9() {
     return data;
@@ -4265,7 +4293,7 @@ function _templateObject8$1() {
 }
 
 function _templateObject7$1() {
-  var data = taggedTemplateLiteral(["\n  color:", "\n"]);
+  var data = taggedTemplateLiteral(["\n    color: ", "\n"]);
 
   _templateObject7$1 = function _templateObject7() {
     return data;
@@ -4275,7 +4303,7 @@ function _templateObject7$1() {
 }
 
 function _templateObject6$1() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:Circe-Rounded;\n  display:block;\n  color:#516F90;\n  margin-top:4px;\n"]);
+  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"]);
 
   _templateObject6$1 = function _templateObject6() {
     return data;
@@ -4285,7 +4313,7 @@ function _templateObject6$1() {
 }
 
 function _templateObject5$1() {
-  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"]);
+  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() {
     return data;
@@ -4295,7 +4323,7 @@ function _templateObject5$1() {
 }
 
 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:2px;\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  ", "\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"]);
+  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"]);
 
   _templateObject4$3 = function _templateObject4() {
     return data;
@@ -4305,7 +4333,7 @@ function _templateObject4$3() {
 }
 
 function _templateObject3$3() {
-  var data = taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow:hidden;\n  color: ", ";\n\n  ", "\n\n  >span {\n    color:#707070;\n  }\n"]);
+  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() {
     return data;
@@ -4315,7 +4343,7 @@ function _templateObject3$3() {
 }
 
 function _templateObject2$3() {
-  var data = taggedTemplateLiteral(["\n  width:", ";\n  height:40px;\n  background:white;\n  border-radius:2px;\n  border:1px solid ", ";\n  cursor:pointer;\n  position:relative;\n  box-sizing:border-box;\n  padding:12px 8px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n\n  &.open {\n      border-color:", ";\n      box-shadow:0 0 6px ", ";\n  }\n\n  &.error {\n    border-color:", ";\n  }\n\n  &.error.open {\n    border-color:", ";\n    box-shadow:0 0 6px ", ";\n  }\n\n  &.valid {\n    border-color:", ";\n  }\n\n   &.valid.open {\n    border-color:", ";\n    box-shadow:0 0 6px ", ";\n  }\n\n    &[disabled] {\n        cursor: not-allowed;\n        background: ", ";\n        border-color: ", ";\n        color: ", ";\n    }\n\n    &[disabled] input::placeholder {\n        color:#eee;\n    }\n"]);
+  var data = taggedTemplateLiteral(["\n    width: ", ";\n    height: 40px;\n    background: white;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    cursor: pointer;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    &:hover {\n        border-color: ", ";\n    }\n\n    &.open {\n        border-color: ", ";\n        box-shadow: 0 0 6px ", ";\n    }\n\n    &.error {\n        border-color: ", ";\n    }\n\n    &.error.open {\n        border-color: ", ";\n        box-shadow: 0 0 6px ", ";\n    }\n\n    &.valid {\n        border-color: ", ";\n    }\n\n    &.valid.open {\n        border-color: ", ";\n        box-shadow: 0 0 6px ", ";\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n        background: ", ";\n        border-color: ", ";\n        color: ", ";\n    }\n\n    &[disabled] input::placeholder {\n        color: #eee;\n    }\n"]);
 
   _templateObject2$3 = function _templateObject2() {
     return data;
@@ -4325,7 +4353,7 @@ function _templateObject2$3() {
 }
 
 function _templateObject$6() {
-  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$6 = function _templateObject() {
     return data;
@@ -4333,7 +4361,10 @@ function _templateObject$6() {
 
   return data;
 }
-var Frag$2 = styled.div(_templateObject$6());
+var Frag$2 = styled.div(_templateObject$6(), function (_ref) {
+  var fullWidth = _ref.fullWidth;
+  return fullWidth && 'width: 100%;';
+});
 
 var handleSize$2 = function handleSize(sizeType) {
   switch (sizeType) {
@@ -4347,14 +4378,14 @@ var handleSize$2 = function handleSize(sizeType) {
       return '460px';
 
     default:
-      return '300px';
+      return '100%';
   }
 };
 
-var SelectUi$1 = styled.div(_templateObject2$3(), function (_ref) {
-  var size = _ref.size;
+var SelectUi$1 = styled.div(_templateObject2$3(), function (_ref2) {
+  var size = _ref2.size;
   return handleSize$2(size);
-}, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow, theme.colors.extra.whiteSmoke, theme.colors.neutrals.silver, theme.colors.neutrals.medium);
+}, theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.info.border, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow, theme.colors.extra.whiteSmoke, theme.colors.neutrals.silver, theme.colors.neutrals.medium);
 var Value$1 = styled(Text).attrs(function (props) {
   return {
     as: 'span'
@@ -4364,7 +4395,7 @@ var Value$1 = styled(Text).attrs(function (props) {
 });
 var maxOptions = 3;
 var optionsSize = 32;
-var Options$1 = styled.ul(_templateObject4$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
+var Options$1 = styled.ul(_templateObject4$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.hasChildren && "\n    max-height: ".concat(props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : maxOptions * optionsSize, "px;\n    overflow-x:hidden;\n    overflow-y:scroll;\n  ");
@@ -4379,7 +4410,7 @@ 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.colors.secondary, theme.colors.action);
+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) {
   return props.color ? props.color : 'black';
@@ -4397,48 +4428,465 @@ var getSelected = function getSelected(options, defaultValue) {
   return selected;
 };
 
-var Dropdown = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var name = _ref2.name,
-      label = _ref2.label,
-      help = _ref2.help,
-      error = _ref2.error,
-      valid = _ref2.valid,
-      options = _ref2.options,
-      placeholder = _ref2.placeholder,
-      onChange = _ref2.onChange,
-      defaultValue = _ref2.defaultValue,
-      visibleOptionsQty = _ref2.visibleOptionsQty,
-      openTo = _ref2.openTo,
-      _ref2$startOpen = _ref2.startOpen,
-      startOpen = _ref2$startOpen === void 0 ? false : _ref2$startOpen,
-      props = objectWithoutProperties(_ref2, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
+var SearchInput = styled.input(_templateObject13(), 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 defaultSelected = {
-    value: '',
-    desc: ''
-  };
+var isOption = function isOption(item) {
+  return item.value !== undefined && item.value !== null;
+};
+
+var flattenOptions = function flattenOptions(options) {
+  var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return (options || []).reduce(function (rows, item) {
+    return rows.concat({
+      item: item,
+      depth: depth
+    }, flattenOptions(item.options, depth + 1));
+  }, []);
+}; // option names can be React elements, typing and inline completion need their text
+
+
+var optionText = function optionText(node) {
+  if (node === undefined || node === null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return node.toString();
+  if (Array.isArray(node)) return node.map(optionText).join('');
+  return node.props ? optionText(node.props.children) : '';
+};
 
-  var _useState = useState(startOpen),
+var keepInViewport = function keepInViewport(node) {
+  if (node && node.getBoundingClientRect().right > window.innerWidth) {
+    node.style.left = 'unset';
+    node.style.right = '0px';
+  }
+}; // eslint-disable-next-line react/prop-types
+
+
+var AutocompleteSelect = function AutocompleteSelect(_ref3) {
+  var options = _ref3.options,
+      selectedOpt = _ref3.selectedOpt,
+      setSelected = _ref3.setSelected,
+      onChange = _ref3.onChange,
+      onSelect = _ref3.onSelect,
+      placeholder = _ref3.placeholder,
+      error = _ref3.error,
+      valid = _ref3.valid,
+      noOptions = _ref3.noOptions,
+      visibleOptionsQty = _ref3.visibleOptionsQty,
+      openTo = _ref3.openTo,
+      startOpen = _ref3.startOpen,
+      resetCallback = _ref3.resetCallback,
+      props = objectWithoutProperties(_ref3, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
+
+  var _useState = useState(),
       _useState2 = slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
+      search = _useState2[0],
+      setSearch = _useState2[1];
+
+  var rows = flattenOptions(options);
+  var selectable = rows.filter(function (row) {
+    return isOption(row.item);
+  }).map(function (row) {
+    return row.item;
+  });
+
+  var filterItems = function filterItems(text) {
+    return text ? selectable.filter(function (item) {
+      return optionText(item.name).toLowerCase().startsWith(text.toLowerCase());
+    }) : selectable;
+  };
+
+  var items = filterItems(search);
+  var hasSelection = selectedOpt.value.length > 0;
+  var selectedText = optionText(selectedOpt.desc);
+
+  var _useCombobox = useCombobox({
+    items: items,
+    value: search || '',
+    onChange: setSearch,
+    selected: selectable.find(function (item) {
+      return item.value.toString() === selectedOpt.value;
+    }),
+    onSelectChange: function onSelectChange(item) {
+      if (!item) return;
+      if (onSelect) onSelect(item);
+      setSelected({
+        value: item.value.toString(),
+        desc: item.name
+      });
+      if (onChange) onChange(item);
+    },
+    isEqual: function isEqual(a, b) {
+      return a === b || !!a && !!b && a.value == b.value;
+    },
+    getItemValue: function getItemValue(item) {
+      return optionText(item.name);
+    },
+    disabled: props.disabled,
+    feature: supercomplete({
+      onRequestItem: function onRequestItem(_ref4, res) {
+        var value = _ref4.value;
+        var matches = filterItems(value);
+        if (matches.length > 0) res({
+          index: 0,
+          item: matches[0]
+        });
+      },
+      select: true,
+      deselectOnClear: false
+    })
+  }),
+      getInputProps = _useCombobox.getInputProps,
+      getToggleProps = _useCombobox.getToggleProps,
+      getListProps = _useCombobox.getListProps,
+      getItemProps = _useCombobox.getItemProps,
+      open = _useCombobox.open,
+      setOpen = _useCombobox.setOpen,
+      focusIndex = _useCombobox.focusIndex;
+
+  useEffect(function () {
+    if (startOpen) setOpen(true);
+  }, []);
+  var index = -1;
+  return /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
+    className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
+  }, props, {
+    title: selectedText
+  }), /*#__PURE__*/React.createElement(SearchInput, _extends_1({
+    placeholder: hasSelection ? selectedText : placeholder,
+    hasSelection: hasSelection
+  }, getInputProps())), /*#__PURE__*/React.createElement(ToggleButton, getToggleProps(), open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
+    size: "15px",
+    color: theme.colors.info.border
+  }) : /*#__PURE__*/React.createElement(Icons.ArrowDown, {
+    size: "15px",
+    color: theme.colors.info.border
+  })), open && /*#__PURE__*/React.createElement(Options$1, _extends_1({
+    visibleOptionsQty: visibleOptionsQty,
+    openTo: openTo,
+    ref: keepInViewport
+  }, getListProps()), items.length === 0 && /*#__PURE__*/React.createElement("li", {
+    style: {
+      paddingRight: '8px'
+    }
+  }, noOptions || 'No data found'), (search ? items.map(function (item) {
+    return {
+      item: item,
+      depth: 0
+    };
+  }) : rows).map(function (_ref5, key) {
+    var item = _ref5.item,
+        depth = _ref5.depth;
+
+    if (!isOption(item)) {
+      return /*#__PURE__*/React.createElement(OptionGroup$1, {
+        key: key,
+        style: {
+          paddingLeft: 8 + depth * 16
+        }
+      }, item.name);
+    }
+
+    index++;
+    return /*#__PURE__*/React.createElement("li", _extends_1({
+      key: key,
+      className: item.divider ? 'alone' : '',
+      style: {
+        paddingLeft: 8 + depth * 16,
+        background: focusIndex === index ? theme.colors.info.bg : undefined
+      }
+    }, getItemProps({
+      item: item,
+      index: index
+    })), /*#__PURE__*/React.createElement(Value$1, {
+      option: true,
+      style: {
+        marginRight: 4
+      }
+    }, item.name));
+  })));
+};
+
+var summarizeSelection = function summarizeSelection(names) {
+  if (names.length <= 2) return names.join(', ');
+  var others = names.length - 2;
+  return "".concat(names[0], ", ").concat(names[1], " and ").concat(others, " other").concat(others > 1 ? 's' : '');
+}; // eslint-disable-next-line react/prop-types
+
 
-  var _useState3 = useState(defaultSelected),
+var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref6) {
+  var options = _ref6.options,
+      selectedValues = _ref6.selectedValues,
+      onToggle = _ref6.onToggle,
+      placeholder = _ref6.placeholder,
+      error = _ref6.error,
+      valid = _ref6.valid,
+      noOptions = _ref6.noOptions,
+      visibleOptionsQty = _ref6.visibleOptionsQty,
+      openTo = _ref6.openTo,
+      startOpen = _ref6.startOpen,
+      props = objectWithoutProperties(_ref6, ["options", "selectedValues", "onToggle", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen"]);
+
+  var _useState3 = useState(''),
       _useState4 = slicedToArray(_useState3, 2),
-      selectedOpt = _useState4[0],
-      setSelected = _useState4[1];
+      search = _useState4[0],
+      setSearch = _useState4[1];
+
+  var _useState5 = useState(startOpen),
+      _useState6 = slicedToArray(_useState5, 2),
+      open = _useState6[0],
+      setOpen = _useState6[1];
+
+  var nodeRef = useRef();
+  useEffect(function () {
+    var closeOnOutsideClick = function closeOnOutsideClick(e) {
+      if (nodeRef.current && !nodeRef.current.contains(e.target)) {
+        setOpen(false);
+        setSearch('');
+      }
+    };
+
+    document.addEventListener('mousedown', closeOnOutsideClick);
+    return function () {
+      return document.removeEventListener('mousedown', closeOnOutsideClick);
+    };
+  }, []);
+  var rows = flattenOptions(options);
+  var selectable = rows.filter(function (row) {
+    return isOption(row.item);
+  }).map(function (row) {
+    return row.item;
+  });
+  var items = search ? selectable.filter(function (item) {
+    return optionText(item.name).toLowerCase().startsWith(search.toLowerCase());
+  }) : selectable;
+  var summary = summarizeSelection(selectable.filter(function (item) {
+    return selectedValues.includes(item.value.toString());
+  }).map(function (item) {
+    return optionText(item.name);
+  }));
+  return /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
+    ref: nodeRef,
+    className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
+  }, props, {
+    title: summary,
+    onClick: function onClick() {
+      return !props.disabled && setOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(SearchInput, {
+    value: search,
+    placeholder: summary || placeholder,
+    hasSelection: summary.length > 0,
+    disabled: props.disabled,
+    onChange: function onChange(e) {
+      setSearch(e.target.value);
+      setOpen(true);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        setSearch('');
+      }
+    }
+  }), /*#__PURE__*/React.createElement(ToggleButton, {
+    type: "button",
+    tabIndex: -1,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (!props.disabled) setOpen(!open);
+    }
+  }, open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
+    size: "15px",
+    color: theme.colors.info.border
+  }) : /*#__PURE__*/React.createElement(Icons.ArrowDown, {
+    size: "15px",
+    color: theme.colors.info.border
+  })), open && /*#__PURE__*/React.createElement(Options$1, {
+    visibleOptionsQty: visibleOptionsQty,
+    openTo: openTo,
+    ref: keepInViewport
+  }, items.length === 0 && /*#__PURE__*/React.createElement("li", {
+    style: {
+      paddingRight: '8px'
+    }
+  }, noOptions || 'No data found'), (search ? items.map(function (item) {
+    return {
+      item: item,
+      depth: 0
+    };
+  }) : rows).map(function (_ref7, key) {
+    var item = _ref7.item,
+        depth = _ref7.depth;
+
+    if (!isOption(item)) {
+      return /*#__PURE__*/React.createElement(OptionGroup$1, {
+        key: key,
+        style: {
+          paddingLeft: 8 + depth * 16
+        }
+      }, item.name);
+    }
+
+    return /*#__PURE__*/React.createElement("li", {
+      key: key,
+      style: {
+        paddingLeft: 8 + depth * 16,
+        justifyContent: 'flex-start'
+      },
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onToggle(item);
+      }
+    }, /*#__PURE__*/React.createElement(CustomCheckBox, null, selectedValues.includes(item.value.toString()) && /*#__PURE__*/React.createElement(Icons.Check, {
+      size: "17px"
+    })), /*#__PURE__*/React.createElement(Value$1, {
+      option: true,
+      style: {
+        marginRight: 4
+      }
+    }, item.name));
+  })));
+};
+
+var MultiDropdown = /*#__PURE__*/forwardRef(function (_ref8, ref) {
+  var name = _ref8.name,
+      label = _ref8.label,
+      help = _ref8.help,
+      error = _ref8.error,
+      valid = _ref8.valid,
+      options = _ref8.options,
+      placeholder = _ref8.placeholder,
+      onChange = _ref8.onChange,
+      defaultValue = _ref8.defaultValue,
+      visibleOptionsQty = _ref8.visibleOptionsQty,
+      openTo = _ref8.openTo,
+      _ref8$startOpen = _ref8.startOpen,
+      startOpen = _ref8$startOpen === void 0 ? false : _ref8$startOpen,
+      resetCallback = _ref8.resetCallback,
+      props = objectWithoutProperties(_ref8, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
+
+  var _useState7 = useState([]),
+      _useState8 = slicedToArray(_useState7, 2),
+      selectedValues = _useState8[0],
+      setSelectedValues = _useState8[1];
 
-  var nodeSelect = useRef();
   var valueRef = useRef();
+  var selectable = flattenOptions(options).filter(function (row) {
+    return isOption(row.item);
+  }).map(function (row) {
+    return row.item;
+  });
 
-  var handleClick = function handleClick(e) {
-    if (nodeSelect.current.contains(e.target)) {
-      return;
+  if (resetCallback) {
+    resetCallback(function () {
+      return setSelectedValues([]);
+    });
+  }
+
+  var hasDefaultValue = defaultValue !== undefined && defaultValue !== null && defaultValue !== '';
+  var defaults = (Array.isArray(defaultValue) ? defaultValue : hasDefaultValue ? [defaultValue] : selectable.filter(function (item) {
+    return item.selected;
+  }).map(function (item) {
+    return item.value;
+  })).map(String);
+  var defaultsKey = defaults.join("\0");
+  useEffect(function () {
+    setSelectedValues(defaults);
+  }, [defaultsKey]);
+  useEffect(function () {
+    if (!valueRef.current) return;
+    Array.from(valueRef.current.options).forEach(function (opt) {
+      opt.selected = selectedValues.includes(opt.value);
+    });
+    valueRef.current.dispatchEvent(new Event('blur'));
+  }, [selectedValues, options]);
+
+  var toggle = function toggle(item) {
+    var value = item.value.toString();
+    var next = selectedValues.includes(value) ? selectedValues.filter(function (v) {
+      return v !== value;
+    }) : [].concat(toConsumableArray(selectedValues), [value]);
+    setSelectedValues(next);
+    if (onChange) onChange(selectable.filter(function (opt) {
+      return next.includes(opt.value.toString());
+    }));
+  };
+
+  var useIcon = false;
+  if (props.Required) useIcon = /*#__PURE__*/React.createElement(RequiredText, null);
+
+  if (valid) {
+    useIcon = /*#__PURE__*/React.createElement("img", {
+      src: Check
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Frag$2, {
+    fullWidth: !props.size
+  }, label && !useIcon && /*#__PURE__*/React.createElement(Label, {
+    htmlFor: name
+  }, label), label && useIcon && /*#__PURE__*/React.createElement(Label, {
+    htmlFor: name
+  }, label, " ", useIcon), /*#__PURE__*/React.createElement(MultiAutocompleteSelect, _extends_1({
+    options: options,
+    selectedValues: selectedValues,
+    onToggle: toggle,
+    placeholder: placeholder,
+    error: error,
+    valid: valid,
+    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", {
+    src: Ex,
+    style: {
+      marginRight: '6px'
     }
+  }), " ", error), /*#__PURE__*/React.createElement(SelectHidden, {
+    name: name,
+    multiple: true,
+    ref: mergeRefs([valueRef, ref]),
+    tabIndex: -1,
+    disabled: props.disabled
+  }, selectable.map(function (item, k) {
+    return /*#__PURE__*/React.createElement("option", {
+      value: item.value,
+      key: k
+    }, optionText(item.name));
+  })));
+});
+var SingleDropdown = /*#__PURE__*/forwardRef(function (_ref9, ref) {
+  var name = _ref9.name,
+      label = _ref9.label,
+      help = _ref9.help,
+      error = _ref9.error,
+      valid = _ref9.valid,
+      options = _ref9.options,
+      placeholder = _ref9.placeholder,
+      onChange = _ref9.onChange,
+      defaultValue = _ref9.defaultValue,
+      visibleOptionsQty = _ref9.visibleOptionsQty,
+      openTo = _ref9.openTo,
+      _ref9$startOpen = _ref9.startOpen,
+      startOpen = _ref9$startOpen === void 0 ? false : _ref9$startOpen,
+      props = objectWithoutProperties(_ref9, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
 
-    setOpen(false);
+  var defaultSelected = {
+    value: '',
+    desc: ''
   };
 
+  var _useState9 = useState(defaultSelected),
+      _useState10 = slicedToArray(_useState9, 2),
+      selectedOpt = _useState10[0],
+      setSelected = _useState10[1];
+
+  var valueRef = useRef();
+
   var reset = function reset() {
     setSelected(defaultSelected);
   };
@@ -4457,28 +4905,28 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       };
       setSelected(defaultSelected);
     } else {
-      if (!valueRef.current.value) return;
+      if (!valueRef.current.value) {
+        return;
+      }
+
       var selected = getSelected(options, valueRef.current.value);
-      if (selected && selected.value && selected.value !== selectedOpt.value) setSelected({
-        value: selected.value.toString(),
-        desc: selected.name
-      });
+
+      if (selected && selected.value && selected.value !== selectedOpt.value) {
+        setSelected({
+          value: selected.value.toString(),
+          desc: selected.name
+        });
+      }
     }
   });
   useEffect(function () {
-    //if(defaultValue){
-    if (options) setDefaultValues(); //}
+    // if(defaultValue){
+    if (options) setDefaultValues(); // }
   }, [options, defaultValue]);
   useEffect(function () {
     valueRef.current.value = selectedOpt.value;
     valueRef.current.dispatchEvent(new Event('blur'));
   }, [selectedOpt]);
-  useEffect(function () {
-    document.addEventListener("mousedown", handleClick);
-    return function () {
-      document.removeEventListener("mousedown", handleClick);
-    };
-  }, []);
   var useIcon = false;
   if (props.Required) useIcon = /*#__PURE__*/React.createElement(RequiredText, null);
 
@@ -4488,36 +4936,24 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(Frag$2, null, label && !useIcon && /*#__PURE__*/React.createElement(Label, {
+  return /*#__PURE__*/React.createElement(Frag$2, {
+    fullWidth: !props.size
+  }, label && !useIcon && /*#__PURE__*/React.createElement(Label, {
     htmlFor: name
   }, label), label && useIcon && /*#__PURE__*/React.createElement(Label, {
     htmlFor: name
-  }, label, " ", useIcon), /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
-    onClick: function onClick() {
-      if (!props.disabled) setOpen(!open);
-    },
-    ref: nodeSelect,
-    className: [open && 'open', error && 'error', valid && 'valid']
-  }, props, {
-    title: selectedOpt ? selectedOpt.desc : ''
-  }), /*#__PURE__*/React.createElement(Value$1, null, selectedOpt.value.length > 0 ? selectedOpt.desc : /*#__PURE__*/React.createElement("span", null, placeholder)), open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
-    size: "15px",
-    color: theme.colors.info.border
-  }) : /*#__PURE__*/React.createElement(Icons.ArrowDown, {
-    size: "15px",
-    color: theme.colors.info.border
-  }), open && /*#__PURE__*/React.createElement(BoxOptions, {
+  }, label, " ", useIcon), /*#__PURE__*/React.createElement(AutocompleteSelect, _extends_1({
     options: options,
+    selectedOpt: selectedOpt,
     setSelected: setSelected,
     onChange: onChange,
-    reset: reset,
-    noOptions: props.noOptions,
-    selectedOpt: selectedOpt.value,
-    setOpen: setOpen,
-    onSelect: props.onSelect,
+    placeholder: placeholder,
+    error: error,
+    valid: valid,
     visibleOptionsQty: visibleOptionsQty,
-    openTo: openTo
-  })), help && /*#__PURE__*/React.createElement(Span$1, null, help), error && /*#__PURE__*/React.createElement(SpanError$2, null, /*#__PURE__*/React.createElement("img", {
+    openTo: openTo,
+    startOpen: startOpen
+  }, props)), help && /*#__PURE__*/React.createElement(Span$1, null, help), error && /*#__PURE__*/React.createElement(SpanError$2, null, /*#__PURE__*/React.createElement("img", {
     src: Ex,
     style: {
       marginRight: '6px'
@@ -4528,24 +4964,38 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     ref: mergeRefs([valueRef, ref]),
     disabled: props.disabled
   }));
+});
+var Dropdown = /*#__PURE__*/forwardRef(function (_ref10, ref) {
+  var multiple = _ref10.multiple,
+      props = objectWithoutProperties(_ref10, ["multiple"]);
+
+  return multiple ? /*#__PURE__*/React.createElement(MultiDropdown, _extends_1({
+    ref: ref
+  }, props)) : /*#__PURE__*/React.createElement(SingleDropdown, _extends_1({
+    ref: ref
+  }, props));
 }); // eslint-disable-next-line react/prop-types
 
-var BoxOptions = function BoxOptions(_ref3) {
-  var options = _ref3.options,
-      isChild = _ref3.isChild,
-      setSelected = _ref3.setSelected,
-      onChange = _ref3.onChange,
-      noOptions = _ref3.noOptions,
-      selectedOpt = _ref3.selectedOpt,
-      setOpen = _ref3.setOpen,
-      onSelect = _ref3.onSelect,
-      visibleOptionsQty = _ref3.visibleOptionsQty,
-      openTo = _ref3.openTo;
-  if (!options) return /*#__PURE__*/React.createElement(Options$1, null, /*#__PURE__*/React.createElement("li", {
-    style: {
-      paddingRight: '8px'
-    }
-  }, noOptions ? noOptions : 'No data found'));
+var BoxOptions = function BoxOptions(_ref11) {
+  var options = _ref11.options,
+      isChild = _ref11.isChild,
+      setSelected = _ref11.setSelected,
+      onChange = _ref11.onChange,
+      noOptions = _ref11.noOptions,
+      selectedOpt = _ref11.selectedOpt,
+      setOpen = _ref11.setOpen,
+      onSelect = _ref11.onSelect,
+      visibleOptionsQty = _ref11.visibleOptionsQty,
+      openTo = _ref11.openTo;
+
+  if (!options) {
+    return /*#__PURE__*/React.createElement(Options$1, null, /*#__PURE__*/React.createElement("li", {
+      style: {
+        paddingRight: '8px'
+      }
+    }, noOptions || 'No data found'));
+  }
+
   var optionsRef = useRef();
 
   var handleClick = function handleClick(item, e) {
@@ -4568,8 +5018,8 @@ var BoxOptions = function BoxOptions(_ref3) {
       var optionsBounds = optionsRef.current.getBoundingClientRect();
 
       if (optionsBounds.right > window.innerWidth) {
-        optionsRef.current.style.left = "unset";
-        optionsRef.current.style.right = "0px";
+        optionsRef.current.style.left = 'unset';
+        optionsRef.current.style.right = '0px';
       }
     }
   }, []);
@@ -4608,39 +5058,47 @@ var BoxOptions = function BoxOptions(_ref3) {
     })) : /*#__PURE__*/React.createElement(OptionGroup$1, null, item.name));
   }));
 };
-var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var name = _ref4.name,
-      label = _ref4.label,
-      help = _ref4.help,
-      error = _ref4.error,
-      valid = _ref4.valid,
-      options = _ref4.options,
-      placeholder = _ref4.placeholder,
-      defaultValue = _ref4.defaultValue,
-      multiple = _ref4.multiple,
-      type = _ref4.type,
-      tooltip = _ref4.tooltip,
-      onChange = _ref4.onChange,
-      visibleOptionsQty = _ref4.visibleOptionsQty,
-      openTo = _ref4.openTo,
-      props = objectWithoutProperties(_ref4, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
-
-  var _useState5 = useState(false),
-      _useState6 = slicedToArray(_useState5, 2),
-      open = _useState6[0],
-      setOpen = _useState6[1];
-
-  var _useState7 = useState([]),
-      _useState8 = slicedToArray(_useState7, 2),
-      selectedOpt = _useState8[0],
-      setSelected = _useState8[1];
+var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref12, ref) {
+  var name = _ref12.name,
+      label = _ref12.label,
+      help = _ref12.help,
+      error = _ref12.error,
+      valid = _ref12.valid,
+      options = _ref12.options,
+      placeholder = _ref12.placeholder,
+      defaultValue = _ref12.defaultValue,
+      multiple = _ref12.multiple,
+      type = _ref12.type,
+      tooltip = _ref12.tooltip,
+      onChange = _ref12.onChange,
+      visibleOptionsQty = _ref12.visibleOptionsQty,
+      openTo = _ref12.openTo,
+      props = objectWithoutProperties(_ref12, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
+
+  var _useState11 = useState(false),
+      _useState12 = slicedToArray(_useState11, 2),
+      open = _useState12[0],
+      setOpen = _useState12[1];
+
+  var _useState13 = useState([]),
+      _useState14 = slicedToArray(_useState13, 2),
+      selectedOpt = _useState14[0],
+      setSelected = _useState14[1];
 
   var nodeSelect = useRef();
   var valueRef = useRef();
 
   var handlOpenSelect = function handlOpenSelect(e) {
-    if (props.disabled) return;
-    if (multiple) if (e.target.classList.contains('1010list-option')) return;
+    if (props.disabled) {
+      return;
+    }
+
+    if (multiple) {
+      if (e.target.classList.contains('1010list-option')) {
+        return;
+      }
+    }
+
     setOpen(!open);
   };
 
@@ -4653,14 +5111,17 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   }
 
   var handleClick = function handleClick(e) {
-    if (nodeSelect.current.contains(e.target)) return;
+    if (nodeSelect.current.contains(e.target)) {
+      return;
+    }
+
     setOpen(false);
   };
 
   useEffect(function () {
-    document.addEventListener("mousedown", handleClick);
+    document.addEventListener('mousedown', handleClick);
     return function () {
-      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener('mousedown', handleClick);
     };
   }, []);
   var setDefaultValues = useCallback(function () {
@@ -4673,7 +5134,9 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
         }).map(function (opt) {
           return opt.value;
         });
-      } else defaultValue = defaultValue || valueRef.current.value;
+      } else {
+        defaultValue = defaultValue || valueRef.current.value;
+      }
     }
 
     if (options) {
@@ -4700,9 +5163,13 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       if (multiple) {
         if (selectedOpt.length !== defaults.length || !selectedOpt.every(function (value, index) {
           return value === defaults[index];
-        })) setSelected(defaults);
+        })) {
+          setSelected(defaults);
+        }
       } else {
-        if (selectedOpt[0] !== defaults[0]) setSelected([defaults[0]]);
+        if (selectedOpt[0] !== defaults[0]) {
+          setSelected([defaults[0]]);
+        }
       }
     } // const hasDefault = getSelected(options,defaultValue);
     //
@@ -4720,13 +5187,20 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
 
   });
   useEffect(function () {
-    //if(defaultValue){
-    if (options) setDefaultValues(); //}
+    // if(defaultValue){
+    if (options) setDefaultValues(); // }
   }, [options, defaultValue]);
   useEffect(function () {
-    if (valueRef.current) if (multiple) Array.from(valueRef.current.children).map(function (opt, k) {
-      return opt.selected = selectedOpt.indexOf(k) !== -1;
-    });else if (options[selectedOpt]) valueRef.current.value = options[selectedOpt].value;
+    if (valueRef.current) {
+      if (multiple) {
+        Array.from(valueRef.current.children).map(function (opt, k) {
+          return opt.selected = selectedOpt.indexOf(k) !== -1;
+        });
+      } else if (options[selectedOpt]) {
+        valueRef.current.value = options[selectedOpt].value;
+      }
+    }
+
     valueRef.current.dispatchEvent(new Event('blur'));
   }, [selectedOpt]);
   var useIcon = false;
@@ -4738,7 +5212,9 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(Frag$2, null, label && !useIcon && /*#__PURE__*/React.createElement(Label, {
+  return /*#__PURE__*/React.createElement(Frag$2, {
+    fullWidth: !props.size
+  }, label && !useIcon && /*#__PURE__*/React.createElement(Label, {
     htmlFor: name
   }, label, " ", tooltip && /*#__PURE__*/React.createElement(App, {
     text: tooltip
@@ -4816,27 +5292,38 @@ var HandleState = function HandleState(index, setSelected, selectedOpt, multiple
     }
   }
 
-  if (!multiple && ret.toString() === selectedOpt.toString()) return;
+  if (!multiple && ret.toString() === selectedOpt.toString()) {
+    return;
+  }
+
   var stateMap = options.filter(function (opt, index) {
     return ret.indexOf(index) !== -1;
   }).map(function (opt) {
     return opt.value;
   });
-  if (typeof onChange === 'function') onChange(multiple ? stateMap : stateMap[0]);
+
+  if (typeof onChange === 'function') {
+    onChange(multiple ? stateMap : stateMap[0]);
+  }
+
   setSelected(ret);
 };
 
-var SelectOption = function SelectOption(_ref5) {
-  var options = _ref5.options,
-      setSelected = _ref5.setSelected,
-      selectedOpt = _ref5.selectedOpt,
-      multiple = _ref5.multiple,
-      type = _ref5.type,
-      onChange = _ref5.onChange,
-      noOptions = _ref5.noOptions,
-      visibleOptionsQty = _ref5.visibleOptionsQty,
-      openTo = _ref5.openTo;
-  if (!options) return /*#__PURE__*/React.createElement(OptionsPeople, null, /*#__PURE__*/React.createElement("li", null, noOptions ? noOptions : 'No data found'));
+var SelectOption = function SelectOption(_ref13) {
+  var options = _ref13.options,
+      setSelected = _ref13.setSelected,
+      selectedOpt = _ref13.selectedOpt,
+      multiple = _ref13.multiple,
+      type = _ref13.type,
+      onChange = _ref13.onChange,
+      noOptions = _ref13.noOptions,
+      visibleOptionsQty = _ref13.visibleOptionsQty,
+      openTo = _ref13.openTo;
+
+  if (!options) {
+    return /*#__PURE__*/React.createElement(OptionsPeople, null, /*#__PURE__*/React.createElement("li", null, noOptions || 'No data found'));
+  }
+
   return /*#__PURE__*/React.createElement(OptionsPeople, {
     visibleOptionsQty: visibleOptionsQty,
     openTo: openTo
@@ -4866,9 +5353,9 @@ var SelectOption = function SelectOption(_ref5) {
   }));
 };
 
-var PhotoComponent = function PhotoComponent(_ref6) {
-  var profile = _ref6.profile,
-      index = _ref6.index;
+var PhotoComponent = function PhotoComponent(_ref14) {
+  var profile = _ref14.profile,
+      index = _ref14.index;
   var customStyle = {
     position: 'relative',
     display: 'inline-flex',
@@ -4892,18 +5379,18 @@ var PhotoComponent = function PhotoComponent(_ref6) {
   }));
 };
 
-var SelectValueRender = function SelectValueRender(_ref7) {
-  var options = _ref7.options,
-      selectedOpt = _ref7.selectedOpt,
-      type = _ref7.type,
-      noOptions = _ref7.noOptions;
+var SelectValueRender = function SelectValueRender(_ref15) {
+  var options = _ref15.options,
+      selectedOpt = _ref15.selectedOpt,
+      type = _ref15.type,
+      noOptions = _ref15.noOptions;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
       style: {
         display: 'flex'
       }
-    }), /*#__PURE__*/React.createElement(Value$1, null, noOptions ? noOptions : 'No Data'));
+    }), /*#__PURE__*/React.createElement(Value$1, null, noOptions || 'No Data'));
   }
 
   var Pictures = [];
@@ -5032,7 +5519,7 @@ function _templateObject8$2() {
 }
 
 function _templateObject7$2() {
-  var data = taggedTemplateLiteral(["\n    font-size:", ";\n    font-weight:normal;\n    font-family:Circe-Rounded;\n    display:block;\n    color:#516F90;\n    margin-top:4px;\n"]);
+  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"]);
 
   _templateObject7$2 = function _templateObject7() {
     return data;
@@ -5052,7 +5539,7 @@ function _templateObject6$2() {
 }
 
 function _templateObject5$2() {
-  var data = taggedTemplateLiteral(["\n    font-family:circe-rounded;\n    font-weight:normal;\n    font-size:16px;\n    color: #707070;\n\n    >.requiredField {\n        color:", ";\n    }\n"]);
+  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() {
     return data;
@@ -5347,7 +5834,7 @@ function _templateObject7$3() {
 }
 
 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:2px;\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"]);
+  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;
@@ -5357,7 +5844,7 @@ function _templateObject6$3() {
 }
 
 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:2px;\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"]);
+  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;
@@ -5387,7 +5874,7 @@ function _templateObject3$5() {
 }
 
 function _templateObject2$5() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:Circe-Rounded;\n  display:block;\n  color:#516F90;\n  margin-top:4px;\n"]);
+  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"]);
 
   _templateObject2$5 = function _templateObject2() {
     return data;
@@ -5411,12 +5898,12 @@ 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 maxOptions$1 = 5;
 var optionsSize$1 = 32;
-var Options$2 = styled.ul(_templateObject5$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
+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());
+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,
@@ -5846,7 +6333,7 @@ function _templateObject5$4() {
 }
 
 function _templateObject4$6() {
-  var data = taggedTemplateLiteral(["\n  background:#fff;\n  border-radius:2px;\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"]);
+  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"]);
 
   _templateObject4$6 = function _templateObject4() {
     return data;
@@ -5889,7 +6376,7 @@ 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.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
+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,
@@ -6769,7 +7256,7 @@ function _templateObject2$7() {
 }
 
 function _templateObject$b() {
-  var data = taggedTemplateLiteral(["\n    font-family:circe-rounded;\n    font-weight:bold;\n    border-radius:", ";\n    cursor:pointer;\n    display:inline-block;\n    background:", "\n    color:", "\n    height:40px;\n    line-height:40px;\n    padding:0 16px;\n    font-size: ", ";\n\n    > * {\n        border-color: ", ";\n    }\n\n    svg path {\n        fill: ", ";\n    }\n\n    &:hover,\n    &.hover {\n        background:", ";\n    }\n\n    &:focus,\n    &.focus {\n        background:", ";\n        box-shadow:", ";\n    }\n\n    &:active,\n    &.active {\n        background:", ";\n        box-shadow:", ";\n    }\n\n    &.selected {\n        border: 1px solid ", ";\n    }\n\n    &[disabled] {\n        opacity: .5;\n        cursor: not-allowed;\n    }\n"]);
+  var data = taggedTemplateLiteral(["\n    font-family: ", ";\n    font-weight:bold;\n    border-radius:", ";\n    cursor:pointer;\n    display:inline-flex;\n    background:", "\n    color:", "\n    height:40px;\n    line-height:40px;\n    padding:0 16px;\n    font-size: ", ";\n    align-items: center;\n    gap: 4px;\n    white-space: nowrap;\n    justify-content: center;\n    text-align: center;\n\n    > * {\n        border-color: ", ";\n    }\n\n    svg path {\n        fill: currentColor;\n    }\n\n    &:hover,\n    &.hover {\n        background:", ";\n    }\n\n    &:focus,\n    &.focus {\n        background:", ";\n        box-shadow:", ";\n    }\n\n    &:active,\n    &.active {\n        background:", ";\n        box-shadow:", ";\n    }\n\n    &.selected {\n        outline: 1px solid ", ";\n        position: relative;\n        z-index: 1;\n    }\n\n    &[disabled] {\n        opacity: .5;\n        cursor: not-allowed;\n    }\n"]);
 
   _templateObject$b = function _templateObject() {
     return data;
@@ -6782,7 +7269,7 @@ var defaultShadow = function defaultShadow(color) {
   return "0px 0px 6px ".concat(color);
 };
 
-var Base = styled.button(_templateObject$b(), theme.defaultRadius, theme.colors.info.bg, theme.colors.secondary, theme.font.medium.size, theme.colors.info.shadow, theme.colors.secondary, theme.colors.info.shadow, theme.colors.info.bg, defaultShadow(theme.form.button.secondary.bg), theme.colors.info.shadow, defaultShadow(theme.form.button.secondary.bg), theme.form.button.secondary.bg);
+var Base = styled.button(_templateObject$b(), theme.font.main, theme.defaultRadius, theme.colors.info.bg, theme.colors.secondary, theme.font.medium.size, theme.colors.info.shadow, theme.colors.info.shadow, theme.colors.info.bg, defaultShadow(theme.form.button.secondary.bg), theme.colors.info.shadow, defaultShadow(theme.form.button.secondary.bg), theme.colors.secondary);
 var Primary = "\n    background:".concat(theme.form.button.primary.bg, ";\n    color:").concat(theme.colors.neutrals.white, ";\n\n    > * {\n        border-color: ").concat(theme.colors.neutrals.white, ";\n    }\n\n    svg path {\n        fill: ").concat(theme.colors.neutrals.white, ";\n    }\n\n    &:hover,\n    &.hover {\n        background:").concat(theme.form.button.primary.hover, "\n    }\n\n    &:focus,\n    &.focus {\n        background:").concat(theme.form.button.primary.bg, ";\n        box-shadow:").concat(defaultShadow(theme.form.button.primary.bg), ";\n    }\n\n    &:active,\n    &.active {\n        background:").concat(theme.form.button.primary.hover, "\n        box-shadow:").concat(defaultShadow(theme.form.button.primary.bg), ";\n    }\n\n    &.selected {\n        border: 1px solid ").concat(theme.colors.neutrals.white, ";\n    }\n");
 var Secondary = "\n    background:".concat(theme.form.button.secondary.bg, ";\n    color:").concat(theme.colors.neutrals.white, ";\n\n    > * {\n        border-color: ").concat(theme.colors.neutrals.white, ";\n    }\n\n    svg path {\n        fill: ").concat(theme.colors.neutrals.white, ";\n    }\n\n    &:hover {\n        background:").concat(theme.form.button.secondary.hover, "\n    }\n\n    &:focus {\n        background:").concat(theme.form.button.secondary.bg, ";\n        box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n    }\n\n    &:active,\n    &.active {\n        background:").concat(theme.form.button.secondary.hover, "\n        box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n    }\n\n    &.selected {\n        border: 1px solid ").concat(theme.colors.neutrals.white, ";\n    }\n");
 var Cancel = "\n    background:transparent;\n    color:".concat(theme.form.button.secondary.bg, ";\n\n    > * {\n        border-color: ").concat(theme.colors.info.shadow, ";\n    }\n\n    svg path {\n        fill: ").concat(theme.colors.secondary, ";\n    }\n\n    &:hover {\n        background:transparent;\n        text-decoration:underline;\n    }\n\n    &:focus {\n        background:").concat(theme.colors.neutrals.white, ";\n        box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n    }\n\n    &:active,\n    &.active {\n        background:").concat(theme.colors.neutrals.white, ";\n        box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n        text-decoration:underline;\n    }\n\n    &.selected {\n        border: 1px solid ").concat(theme.form.button.secondary.bg, ";\n    }\n");
@@ -6811,7 +7298,7 @@ var Exported = function Exported(_ref) {
       props = objectWithoutProperties(_ref, ["size", "type", "children", "Type"]);
 
   return /*#__PURE__*/React.createElement(Exportedd, _extends_1({
-    type: Type ? Type : type === 'cancel' ? 'button' : undefined,
+    type: Type || (type === 'cancel' ? 'button' : undefined),
     size: size,
     typeStyle: type,
     children: children
@@ -7260,7 +7747,7 @@ var DropUploader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
 });
 
 function _templateObject5$6() {
-  var data = taggedTemplateLiteral(["\n    display: inline-block;\n    color: ", ";\n    font-size: ", ";\n    vertical-align: top;\n    margin-left: 8px;\n    outline: none;\n"]);
+  var data = taggedTemplateLiteral(["\n    display: inline-block;\n    color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: normal;\n    font-family: \"Huninn\", sans-serif;\n    vertical-align: top;\n    padding-left: 8px;\n    outline: none;\n    cursor: pointer;\n"]);
 
   _templateObject5$6 = function _templateObject5() {
     return data;
@@ -7270,7 +7757,7 @@ function _templateObject5$6() {
 }
 
 function _templateObject4$8() {
-  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: 20px;\n        }\n    }\n"]);
+  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() {
     return data;
@@ -7280,7 +7767,7 @@ function _templateObject4$8() {
 }
 
 function _templateObject3$8() {
-  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\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: #ccc;\n        transition: 0.2s;\n    }\n"]);
+  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() {
     return data;
@@ -7310,9 +7797,9 @@ function _templateObject$d() {
 }
 var Frag$6 = styled.div(_templateObject$d());
 var CheckBoxWrapper = styled.div(_templateObject2$9());
-var CheckBoxLabel = styled.label(_templateObject3$8(), theme.colors.neutrals.white, theme.colors.neutrals.silver, theme.colors.action, theme.colors.secondary);
-var CheckBox$1 = styled.input(_templateObject4$8(), CheckBoxLabel, theme.colors.info.bg, theme.colors.info.border, theme.colors.info.text);
-var ToggleLabel = styled.label(_templateObject5$6(), theme.colors.neutrals.medium, theme.font.small.size);
+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 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,
       label = _ref.label,
@@ -7370,7 +7857,7 @@ var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), /*#__PURE__*/React.createElement(ToggleLabel, {
     htmlFor: id,
     tabIndex: -1
-  }, singleText ? singleText : value ? textOn : textOff)), help && /*#__PURE__*/React.createElement(SpanHelp, null, help));
+  }, singleText || (value ? textOn : textOff))), help && /*#__PURE__*/React.createElement(SpanHelp, null, help));
 });
 
 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; }
@@ -7896,7 +8383,7 @@ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if
 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(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; }
 
 function _templateObject$g() {
-  var data = taggedTemplateLiteral(["\n    display: inline-flex;\n    flex-wrap: nowrap;\n\n    > * {\n        &:first-child:not(:last-child) {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n\n        &:last-child:not(:first-child) {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n        }\n    }\n"]);
+  var data = taggedTemplateLiteral(["\n    display: inline-flex;\n    flex-wrap: nowrap;\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    > *:not(.selected) {\n        border-radius: 0;\n\n        &:first-child {\n            border-top-left-radius: ", ";\n            border-bottom-left-radius: ", ";\n        }\n\n        &:last-child {\n            border-top-right-radius: ", ";\n            border-bottom-right-radius: ", ";\n        }\n    }\n"]);
 
   _templateObject$g = function _templateObject() {
     return data;
@@ -7904,7 +8391,7 @@ function _templateObject$g() {
 
   return data;
 }
-var BtnGroup = styled.div(_templateObject$g());
+var BtnGroup = styled.div(_templateObject$g(), theme.colors.neutrals.silver, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius);
 
 var ButtonGroup = function ButtonGroup(_ref) {
   var children = _ref.children,
@@ -7913,7 +8400,11 @@ var ButtonGroup = function ButtonGroup(_ref) {
   var generateClassName = function generateClassName(btnProps) {
     var cn = btnProps.className || '';
     var track = btnProps.track;
-    if (props.active === track) cn += ' selected ';
+
+    if (props.active === track) {
+      cn += ' selected ';
+    }
+
     return cn;
   };
 
@@ -8244,7 +8735,11 @@ var Close = styled.button.attrs(function (props) {
 
 var solveContent = function solveContent(size, title, content) {
   var isSmall = size === 'small';
-  if (isSmall) return /*#__PURE__*/React.createElement(Title$2, null, /*#__PURE__*/React.createElement(SmallContent, null, title));
+
+  if (isSmall) {
+    return /*#__PURE__*/React.createElement(Title$2, null, /*#__PURE__*/React.createElement(SmallContent, null, title));
+  }
+
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Title$2, null, title), /*#__PURE__*/React.createElement(Content, null, content));
 };