@dspworkplace/ui 2.0.0 → 2.0.2

package/dist/index.es.js

@@ -1,6 +1,8 @@
 import React, { forwardRef, useState, Fragment, useCallback, useEffect, useRef, Children } from 'react';
 import styled, { keyframes } from 'styled-components';
+import { createPortal } from 'react-dom';
 import { supercomplete, useCombobox } from '@szhsin/react-autocomplete';
+import { usePopper } from 'react-popper';
 
 var defaultRadius = '4px';
 var colors = {
@@ -15,8 +17,8 @@ var colors = {
     white: '#FFFFFF'
   },
   warnings: {
-    border: '#F5C26B',
-    text: '#DBAE60',
+    border: '#e7a73b',
+    text: '#9c6505',
     shadow: '#FAE0B5',
     bg: '#FEF8F0'
   },
@@ -380,7 +382,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = taggedTemplateLiteral(["\n  font-size:", ";\n  font-weight:normal;\n  font-family:\"Huninn\", sans-serif;\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;
@@ -416,7 +418,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;
@@ -460,7 +462,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;
@@ -512,7 +514,7 @@ var handleSize$1 = function handleSize(sizeType) {
       return '460px';
 
     default:
-      return '300px';
+      return '100%';
   }
 };
 
@@ -555,7 +557,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,
@@ -4196,7 +4198,7 @@ function _templateObject3$2() {
 }
 
 function _templateObject2$2() {
-  var data = taggedTemplateLiteral(["\n    font-family: \"Huninn\", sans-serif;\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;
@@ -4222,6 +4224,10 @@ var Text = styled.p(_templateObject4$2(), theme.colors.neutrals.gray, function (
   return subtle && "\n    color:".concat(theme.colors.neutrals.medium, ";\n    ");
 });
 
+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"]);
 
@@ -4353,7 +4359,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;
@@ -4361,7 +4367,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) {
@@ -4375,12 +4384,12 @@ 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.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) {
@@ -4450,36 +4459,70 @@ var optionText = function optionText(node) {
   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) : '';
-};
+}; // rendered in document.body so overflow on any ancestor cannot clip it; popper flips and shifts it to stay in the viewport
+// eslint-disable-next-line react/prop-types
 
-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 FloatingOptions = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var anchor = _ref3.anchor,
+      openTo = _ref3.openTo,
+      style = _ref3.style,
+      props = objectWithoutProperties(_ref3, ["anchor", "openTo", "style"]);
 
-var AutocompleteSelect = function AutocompleteSelect(_ref2) {
-  var options = _ref2.options,
-      selectedOpt = _ref2.selectedOpt,
-      setSelected = _ref2.setSelected,
-      onChange = _ref2.onChange,
-      onSelect = _ref2.onSelect,
-      placeholder = _ref2.placeholder,
-      error = _ref2.error,
-      valid = _ref2.valid,
-      noOptions = _ref2.noOptions,
-      visibleOptionsQty = _ref2.visibleOptionsQty,
-      openTo = _ref2.openTo,
-      startOpen = _ref2.startOpen,
-      resetCallback = _ref2.resetCallback,
-      props = objectWithoutProperties(_ref2, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
-
-  var _useState = useState(),
+  var _useState = useState(null),
       _useState2 = slicedToArray(_useState, 2),
-      search = _useState2[0],
-      setSearch = _useState2[1];
+      list = _useState2[0],
+      setList = _useState2[1];
+
+  var listRef = useCallback(mergeRefs([setList, ref]), [ref]);
+
+  var _usePopper = usePopper(anchor, list, {
+    strategy: 'fixed',
+    placement: openTo === 'top' ? 'top-start' : 'bottom-start',
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: [0, 4]
+      }
+    }]
+  }),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Options$1, _extends_1({
+    ref: listRef,
+    style: _objectSpread$1(_objectSpread$1(_objectSpread$1({}, style), styles.popper), {}, {
+      margin: 0,
+      zIndex: 1000000
+    })
+  }, attributes.popper, props)), document.body);
+}); // eslint-disable-next-line react/prop-types
+
+var AutocompleteSelect = function AutocompleteSelect(_ref4) {
+  var options = _ref4.options,
+      selectedOpt = _ref4.selectedOpt,
+      setSelected = _ref4.setSelected,
+      onChange = _ref4.onChange,
+      onSelect = _ref4.onSelect,
+      placeholder = _ref4.placeholder,
+      error = _ref4.error,
+      valid = _ref4.valid,
+      noOptions = _ref4.noOptions,
+      visibleOptionsQty = _ref4.visibleOptionsQty,
+      openTo = _ref4.openTo,
+      startOpen = _ref4.startOpen,
+      resetCallback = _ref4.resetCallback,
+      props = objectWithoutProperties(_ref4, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
+
+  var _useState3 = useState(),
+      _useState4 = slicedToArray(_useState3, 2),
+      search = _useState4[0],
+      setSearch = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = slicedToArray(_useState5, 2),
+      anchor = _useState6[0],
+      setAnchor = _useState6[1];
 
   var rows = flattenOptions(options);
   var selectable = rows.filter(function (row) {
@@ -4522,8 +4565,8 @@ var AutocompleteSelect = function AutocompleteSelect(_ref2) {
     },
     disabled: props.disabled,
     feature: supercomplete({
-      onRequestItem: function onRequestItem(_ref3, res) {
-        var value = _ref3.value;
+      onRequestItem: function onRequestItem(_ref5, res) {
+        var value = _ref5.value;
         var matches = filterItems(value);
         if (matches.length > 0) res({
           index: 0,
@@ -4547,6 +4590,7 @@ var AutocompleteSelect = function AutocompleteSelect(_ref2) {
   }, []);
   var index = -1;
   return /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
+    ref: setAnchor,
     className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
   }, props, {
     title: selectedText
@@ -4559,10 +4603,10 @@ var AutocompleteSelect = function AutocompleteSelect(_ref2) {
   }) : /*#__PURE__*/React.createElement(Icons.ArrowDown, {
     size: "15px",
     color: theme.colors.info.border
-  })), open && /*#__PURE__*/React.createElement(Options$1, _extends_1({
+  })), open && /*#__PURE__*/React.createElement(FloatingOptions, _extends_1({
+    anchor: anchor,
     visibleOptionsQty: visibleOptionsQty,
-    openTo: openTo,
-    ref: keepInViewport
+    openTo: openTo
   }, getListProps()), items.length === 0 && /*#__PURE__*/React.createElement("li", {
     style: {
       paddingRight: '8px'
@@ -4572,9 +4616,9 @@ var AutocompleteSelect = function AutocompleteSelect(_ref2) {
       item: item,
       depth: 0
     };
-  }) : rows).map(function (_ref4, key) {
-    var item = _ref4.item,
-        depth = _ref4.depth;
+  }) : rows).map(function (_ref6, key) {
+    var item = _ref6.item,
+        depth = _ref6.depth;
 
     if (!isOption(item)) {
       return /*#__PURE__*/React.createElement(OptionGroup$1, {
@@ -4605,31 +4649,292 @@ var AutocompleteSelect = function AutocompleteSelect(_ref2) {
   })));
 };
 
-var Dropdown = /*#__PURE__*/forwardRef(function (_ref5, ref) {
-  var name = _ref5.name,
-      label = _ref5.label,
-      help = _ref5.help,
-      error = _ref5.error,
-      valid = _ref5.valid,
-      options = _ref5.options,
-      placeholder = _ref5.placeholder,
-      onChange = _ref5.onChange,
-      defaultValue = _ref5.defaultValue,
-      visibleOptionsQty = _ref5.visibleOptionsQty,
-      openTo = _ref5.openTo,
-      _ref5$startOpen = _ref5.startOpen,
-      startOpen = _ref5$startOpen === void 0 ? false : _ref5$startOpen,
-      props = objectWithoutProperties(_ref5, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
+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 MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
+  var options = _ref7.options,
+      selectedValues = _ref7.selectedValues,
+      onToggle = _ref7.onToggle,
+      placeholder = _ref7.placeholder,
+      error = _ref7.error,
+      valid = _ref7.valid,
+      noOptions = _ref7.noOptions,
+      visibleOptionsQty = _ref7.visibleOptionsQty,
+      openTo = _ref7.openTo,
+      startOpen = _ref7.startOpen,
+      props = objectWithoutProperties(_ref7, ["options", "selectedValues", "onToggle", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen"]);
+
+  var _useState7 = useState(''),
+      _useState8 = slicedToArray(_useState7, 2),
+      search = _useState8[0],
+      setSearch = _useState8[1];
+
+  var _useState9 = useState(startOpen),
+      _useState10 = slicedToArray(_useState9, 2),
+      open = _useState10[0],
+      setOpen = _useState10[1];
+
+  var _useState11 = useState(null),
+      _useState12 = slicedToArray(_useState11, 2),
+      anchor = _useState12[0],
+      setAnchor = _useState12[1];
+
+  var nodeRef = useRef();
+  var listRef = useRef();
+  var setNode = useCallback(mergeRefs([nodeRef, setAnchor]), []);
+  useEffect(function () {
+    var closeOnOutsideClick = function closeOnOutsideClick(e) {
+      var inList = listRef.current && listRef.current.contains(e.target);
+
+      if (nodeRef.current && !nodeRef.current.contains(e.target) && !inList) {
+        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: setNode,
+    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(FloatingOptions, {
+    anchor: anchor,
+    visibleOptionsQty: visibleOptionsQty,
+    openTo: openTo,
+    ref: listRef
+  }, 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 (_ref8, key) {
+    var item = _ref8.item,
+        depth = _ref8.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 (_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,
+      resetCallback = _ref9.resetCallback,
+      props = objectWithoutProperties(_ref9, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
+
+  var _useState13 = useState([]),
+      _useState14 = slicedToArray(_useState13, 2),
+      selectedValues = _useState14[0],
+      setSelectedValues = _useState14[1];
+
+  var valueRef = useRef();
+  var selectable = flattenOptions(options).filter(function (row) {
+    return isOption(row.item);
+  }).map(function (row) {
+    return row.item;
+  });
+
+  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 (_ref10, ref) {
+  var name = _ref10.name,
+      label = _ref10.label,
+      help = _ref10.help,
+      error = _ref10.error,
+      valid = _ref10.valid,
+      options = _ref10.options,
+      placeholder = _ref10.placeholder,
+      onChange = _ref10.onChange,
+      defaultValue = _ref10.defaultValue,
+      visibleOptionsQty = _ref10.visibleOptionsQty,
+      openTo = _ref10.openTo,
+      _ref10$startOpen = _ref10.startOpen,
+      startOpen = _ref10$startOpen === void 0 ? false : _ref10$startOpen,
+      props = objectWithoutProperties(_ref10, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
 
   var defaultSelected = {
     value: '',
     desc: ''
   };
 
-  var _useState3 = useState(defaultSelected),
-      _useState4 = slicedToArray(_useState3, 2),
-      selectedOpt = _useState4[0],
-      setSelected = _useState4[1];
+  var _useState15 = useState(defaultSelected),
+      _useState16 = slicedToArray(_useState15, 2),
+      selectedOpt = _useState16[0],
+      setSelected = _useState16[1];
 
   var valueRef = useRef();
 
@@ -4682,7 +4987,9 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref5, 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
@@ -4708,19 +5015,29 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     ref: mergeRefs([valueRef, ref]),
     disabled: props.disabled
   }));
+});
+var Dropdown = /*#__PURE__*/forwardRef(function (_ref11, ref) {
+  var multiple = _ref11.multiple,
+      props = objectWithoutProperties(_ref11, ["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(_ref6) {
-  var options = _ref6.options,
-      isChild = _ref6.isChild,
-      setSelected = _ref6.setSelected,
-      onChange = _ref6.onChange,
-      noOptions = _ref6.noOptions,
-      selectedOpt = _ref6.selectedOpt,
-      setOpen = _ref6.setOpen,
-      onSelect = _ref6.onSelect,
-      visibleOptionsQty = _ref6.visibleOptionsQty,
-      openTo = _ref6.openTo;
+var BoxOptions = function BoxOptions(_ref12) {
+  var options = _ref12.options,
+      isChild = _ref12.isChild,
+      setSelected = _ref12.setSelected,
+      onChange = _ref12.onChange,
+      noOptions = _ref12.noOptions,
+      selectedOpt = _ref12.selectedOpt,
+      setOpen = _ref12.setOpen,
+      onSelect = _ref12.onSelect,
+      visibleOptionsQty = _ref12.visibleOptionsQty,
+      openTo = _ref12.openTo;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(Options$1, null, /*#__PURE__*/React.createElement("li", {
@@ -4792,32 +5109,32 @@ var BoxOptions = function BoxOptions(_ref6) {
     })) : /*#__PURE__*/React.createElement(OptionGroup$1, null, item.name));
   }));
 };
-var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref7, ref) {
-  var name = _ref7.name,
-      label = _ref7.label,
-      help = _ref7.help,
-      error = _ref7.error,
-      valid = _ref7.valid,
-      options = _ref7.options,
-      placeholder = _ref7.placeholder,
-      defaultValue = _ref7.defaultValue,
-      multiple = _ref7.multiple,
-      type = _ref7.type,
-      tooltip = _ref7.tooltip,
-      onChange = _ref7.onChange,
-      visibleOptionsQty = _ref7.visibleOptionsQty,
-      openTo = _ref7.openTo,
-      props = objectWithoutProperties(_ref7, ["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 (_ref13, ref) {
+  var name = _ref13.name,
+      label = _ref13.label,
+      help = _ref13.help,
+      error = _ref13.error,
+      valid = _ref13.valid,
+      options = _ref13.options,
+      placeholder = _ref13.placeholder,
+      defaultValue = _ref13.defaultValue,
+      multiple = _ref13.multiple,
+      type = _ref13.type,
+      tooltip = _ref13.tooltip,
+      onChange = _ref13.onChange,
+      visibleOptionsQty = _ref13.visibleOptionsQty,
+      openTo = _ref13.openTo,
+      props = objectWithoutProperties(_ref13, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
+
+  var _useState17 = useState(false),
+      _useState18 = slicedToArray(_useState17, 2),
+      open = _useState18[0],
+      setOpen = _useState18[1];
+
+  var _useState19 = useState([]),
+      _useState20 = slicedToArray(_useState19, 2),
+      selectedOpt = _useState20[0],
+      setSelected = _useState20[1];
 
   var nodeSelect = useRef();
   var valueRef = useRef();
@@ -4946,7 +5263,9 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref7, 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
@@ -5041,16 +5360,16 @@ var HandleState = function HandleState(index, setSelected, selectedOpt, multiple
   setSelected(ret);
 };
 
-var SelectOption = function SelectOption(_ref8) {
-  var options = _ref8.options,
-      setSelected = _ref8.setSelected,
-      selectedOpt = _ref8.selectedOpt,
-      multiple = _ref8.multiple,
-      type = _ref8.type,
-      onChange = _ref8.onChange,
-      noOptions = _ref8.noOptions,
-      visibleOptionsQty = _ref8.visibleOptionsQty,
-      openTo = _ref8.openTo;
+var SelectOption = function SelectOption(_ref14) {
+  var options = _ref14.options,
+      setSelected = _ref14.setSelected,
+      selectedOpt = _ref14.selectedOpt,
+      multiple = _ref14.multiple,
+      type = _ref14.type,
+      onChange = _ref14.onChange,
+      noOptions = _ref14.noOptions,
+      visibleOptionsQty = _ref14.visibleOptionsQty,
+      openTo = _ref14.openTo;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(OptionsPeople, null, /*#__PURE__*/React.createElement("li", null, noOptions || 'No data found'));
@@ -5085,9 +5404,9 @@ var SelectOption = function SelectOption(_ref8) {
   }));
 };
 
-var PhotoComponent = function PhotoComponent(_ref9) {
-  var profile = _ref9.profile,
-      index = _ref9.index;
+var PhotoComponent = function PhotoComponent(_ref15) {
+  var profile = _ref15.profile,
+      index = _ref15.index;
   var customStyle = {
     position: 'relative',
     display: 'inline-flex',
@@ -5111,11 +5430,11 @@ var PhotoComponent = function PhotoComponent(_ref9) {
   }));
 };
 
-var SelectValueRender = function SelectValueRender(_ref10) {
-  var options = _ref10.options,
-      selectedOpt = _ref10.selectedOpt,
-      type = _ref10.type,
-      noOptions = _ref10.noOptions;
+var SelectValueRender = function SelectValueRender(_ref16) {
+  var options = _ref16.options,
+      selectedOpt = _ref16.selectedOpt,
+      type = _ref16.type,
+      noOptions = _ref16.noOptions;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -5551,9 +5870,77 @@ var Password = /*#__PURE__*/forwardRef(function (_ref, ref) {
   })));
 });
 
-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 _templateObject$9() {
+  var data = taggedTemplateLiteral(["\n    display: block;\n    height: auto;\n    min-height: 80px;\n    resize: vertical;\n    font-family: inherit;\n"]);
 
-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; }
+  _templateObject$9 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var TextAreaBase = styled(InputBase$1).attrs({
+  as: 'textarea'
+})(_templateObject$9());
+var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+      label = _ref.label,
+      help = _ref.help,
+      invalid = _ref.invalid,
+      valid = _ref.valid,
+      error = _ref.error,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 4 : _ref$rows,
+      props = objectWithoutProperties(_ref, ["name", "label", "help", "invalid", "valid", "error", "rows"]);
+
+  var validationType = null;
+  var useIcon = false;
+
+  if (invalid) {
+    useIcon = /*#__PURE__*/React.createElement("span", {
+      className: "requiredField"
+    }, "*");
+    validationType = 'error';
+  }
+
+  if (props.Required) useIcon = /*#__PURE__*/React.createElement(RequiredText, null);
+
+  if (error) {
+    validationType = 'error';
+  }
+
+  if (valid) {
+    useIcon = /*#__PURE__*/React.createElement("img", {
+      src: Check
+    });
+    validationType = 'valid';
+  }
+
+  return /*#__PURE__*/React.createElement(Frag$1, {
+    size: props.size,
+    className: "formAligner"
+  }, label && !useIcon && /*#__PURE__*/React.createElement(Label, {
+    htmlFor: name
+  }, label), label && useIcon && /*#__PURE__*/React.createElement(Label, {
+    htmlFor: name
+  }, label, " ", useIcon), /*#__PURE__*/React.createElement(TextAreaBase, _extends_1({
+    name: name,
+    id: name,
+    rows: rows
+  }, props, {
+    validation: validationType,
+    ref: ref
+  })), help && /*#__PURE__*/React.createElement(Span, null, help), error && /*#__PURE__*/React.createElement(SpanError$1, null, /*#__PURE__*/React.createElement("img", {
+    src: Ex,
+    style: {
+      marginRight: '6px'
+    }
+  }), " ", error));
+});
+
+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; }
+
+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() {
   var data = taggedTemplateLiteral(["\n    position: absolute;\n    height: 1px;\n    width: 1px;\n    z-index: -1;\n    opacity: 0;\n"]);
@@ -5615,16 +6002,16 @@ function _templateObject2$5() {
   return data;
 }
 
-function _templateObject$9() {
+function _templateObject$a() {
   var data = taggedTemplateLiteral(["\n    display:inline-block;\n    vertical-align: top;\n"]);
 
-  _templateObject$9 = function _templateObject() {
+  _templateObject$a = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var Frag$3 = styled.div(_templateObject$9());
+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);
@@ -5820,7 +6207,7 @@ var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
 
   var addNewOption = function addNewOption(newObj) {
-    newObj = _objectSpread$1(_objectSpread$1({}, newObj), {}, {
+    newObj = _objectSpread$2(_objectSpread$2({}, newObj), {}, {
       value: newObj.name,
       "new": true
     });
@@ -6094,16 +6481,16 @@ function _templateObject2$6() {
   return data;
 }
 
-function _templateObject$a() {
+function _templateObject$b() {
   var data = taggedTemplateLiteral(["\n    display:inline-block;\n    vertical-align: top;\n"]);
 
-  _templateObject$a = function _templateObject() {
+  _templateObject$b = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var Frag$4 = styled.div(_templateObject$a());
+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;
@@ -6987,10 +7374,10 @@ function _templateObject2$7() {
   return data;
 }
 
-function _templateObject$b() {
-  var data = taggedTemplateLiteral(["\n    font-family:\"Huninn\", sans-serif;\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\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"]);
+function _templateObject$c() {
+  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() {
+  _templateObject$c = function _templateObject() {
     return data;
   };
 
@@ -7001,7 +7388,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.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 Base = styled.button(_templateObject$c(), 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");
@@ -7097,16 +7484,16 @@ function _templateObject2$8() {
   return data;
 }
 
-function _templateObject$c() {
+function _templateObject$d() {
   var data = taggedTemplateLiteral(["\n    display:inline-block;\n    vertical-align: top;\n"]);
 
-  _templateObject$c = function _templateObject() {
+  _templateObject$d = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var Frag$5 = styled.div(_templateObject$c());
+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);
@@ -7479,7 +7866,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;
@@ -7489,7 +7876,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;
@@ -7499,7 +7886,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;
@@ -7518,20 +7905,20 @@ function _templateObject2$9() {
   return data;
 }
 
-function _templateObject$d() {
+function _templateObject$e() {
   var data = taggedTemplateLiteral(["\n    display:inline-block;\n    vertical-align: top;\n"]);
 
-  _templateObject$d = function _templateObject() {
+  _templateObject$e = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var Frag$6 = styled.div(_templateObject$d());
+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.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,
@@ -7589,17 +7976,17 @@ 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; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$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 _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$e() {
+function _templateObject$f() {
   var data = taggedTemplateLiteral(["\n    position: relative;\n\n    ", " {\n        left: 0;\n        top: -21px;\n        height: 192px;\n        overflow: auto;\n\n        li {\n            padding-right: 8px;\n        }\n    }\n\n    ", " {\n        font-size: ", ";\n        line-height: ", ";\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        background: ", ";\n\n        &:hover {\n            background: ", ";\n        }\n    }\n"]);
 
-  _templateObject$e = function _templateObject() {
+  _templateObject$f = function _templateObject() {
     return data;
   };
 
@@ -7750,7 +8137,7 @@ var fromMilliseconds = function fromMilliseconds(milliseconds) {
   };
 };
 
-var TimePickerOptionsStyle = styled.div(_templateObject$e(), Options, OptionGroup, theme.font.extraSmall.size, theme.font.extraSmall.lineHeight, theme.colors.neutrals.white, theme.colors.neutrals.white);
+var TimePickerOptionsStyle = styled.div(_templateObject$f(), Options, OptionGroup, theme.font.extraSmall.size, theme.font.extraSmall.lineHeight, theme.colors.neutrals.white, theme.colors.neutrals.white);
 
 var TimePickerOptions = function TimePickerOptions(_ref5) {
   var time = _ref5.time,
@@ -7789,7 +8176,7 @@ var TimePickerOptions = function TimePickerOptions(_ref5) {
   }
 
   var handleSelect = function handleSelect(what, value) {
-    var newTime = _objectSpread$2({}, time);
+    var newTime = _objectSpread$3({}, time);
 
     newTime[what] = value;
     setTime(newTime);
@@ -8002,10 +8389,10 @@ function _templateObject2$a() {
   return data;
 }
 
-function _templateObject$f() {
+function _templateObject$g() {
   var data = taggedTemplateLiteral(["\n    display: inline-flex;\n    align-items: stretch;\n    padding: 0;\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n"]);
 
-  _templateObject$f = function _templateObject() {
+  _templateObject$g = function _templateObject() {
     return data;
   };
 
@@ -8015,7 +8402,7 @@ var Container = styled(Base).attrs(function (props) {
   return {
     as: 'div'
   };
-})(_templateObject$f(), function (props) {
+})(_templateObject$g(), function (props) {
   return props.type === 'primary' && Primary;
 }, function (props) {
   return props.type === 'secondary' && Secondary;
@@ -8110,20 +8497,20 @@ var Dropdown$1 = function Dropdown$$1(_ref) {
   })));
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { defineProperty(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 _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(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"]);
+function _templateObject$h() {
+  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() {
+  _templateObject$h = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var BtnGroup = styled.div(_templateObject$g());
+var BtnGroup = styled.div(_templateObject$h(), theme.colors.neutrals.silver, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius, theme.defaultRadius);
 
 var ButtonGroup = function ButtonGroup(_ref) {
   var children = _ref.children,
@@ -8132,12 +8519,16 @@ 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;
   };
 
   return /*#__PURE__*/React.createElement(BtnGroup, null, children.map(function (btn, k) {
-    return btn.type(_objectSpread$3(_objectSpread$3(_objectSpread$3({}, props), btn.props), {}, {
+    return btn.type(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, props), btn.props), {}, {
       key: k,
       className: generateClassName(btn.props)
     }));
@@ -8174,16 +8565,16 @@ function _templateObject2$b() {
   return data;
 }
 
-function _templateObject$h() {
+function _templateObject$i() {
   var data = taggedTemplateLiteral(["\n    0% {\n        opacity:0;\n        visibility: hidden;\n        transform: scale(0.6) translateY(-8px);\n    }\n\n    100% {\n        visibility: visible;\n        opacity:1;\n    }\n"]);
 
-  _templateObject$h = function _templateObject() {
+  _templateObject$i = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var listAnimation = keyframes(_templateObject$h());
+var listAnimation = keyframes(_templateObject$i());
 var POSITION_LIST = '100%';
 var POSITION_LIST_DISTANCE = '10%';
 
@@ -8440,16 +8831,16 @@ function _templateObject2$c() {
   return data;
 }
 
-function _templateObject$i() {
+function _templateObject$j() {
   var data = taggedTemplateLiteral(["\n    padding: 7px;\n    border-radius: ", ";\n    border-width:1px;\n    border-style:solid;\n    display:flex;\n    align-items:center;\n    position:relative;\n\n    ", "\n\n    svg {\n        margin-right: 8px;\n        display: block;\n    }\n"]);
 
-  _templateObject$i = function _templateObject() {
+  _templateObject$j = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var Div = styled.div(_templateObject$i(), theme.defaultRadius, function (props) {
+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);
@@ -8463,7 +8854,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));
 };
 
@@ -8540,5 +8935,5 @@ var index = {
   Error: AlertError
 };
 
-export { theme as Theme, ButtonIcon, Exported as Button, Dropdown$1 as ButtonDropdown, ButtonGroup, Form, Input, 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, index as Alert, Spacer, Icons as Icon, logo as Logo, dspwLoading as Loading };
 //# sourceMappingURL=index.es.js.map