@janiscommerce/ui-web 0.16.0 → 0.18.0

package/dist/index.umd.js

@@ -1,13 +1,13 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('react-dom')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$f, global.require$$1));
-})(this, (function (exports, React, styled$f, require$$1) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$g, global.require$$1));
+})(this, (function (exports, React, styled$g, require$$1) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$f);
+  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$g);
   var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 
   function _classCallCheck$2(instance, Constructor) {
@@ -430,25 +430,25 @@
   };
   var mediaBreaks = {
     mobile: function mobile() {
-      return styled$f.css(["", "{", "}"], devices.mobile, styled$f.css.apply(void 0, arguments));
+      return styled$g.css(["", "{", "}"], devices.mobile, styled$g.css.apply(void 0, arguments));
     },
     tablet: function tablet() {
-      return styled$f.css(["", "{", "}"], devices.tablet, styled$f.css.apply(void 0, arguments));
+      return styled$g.css(["", "{", "}"], devices.tablet, styled$g.css.apply(void 0, arguments));
     },
     tabletLg: function tabletLg() {
-      return styled$f.css(["", "{", "}"], devices.tabletLg, styled$f.css.apply(void 0, arguments));
+      return styled$g.css(["", "{", "}"], devices.tabletLg, styled$g.css.apply(void 0, arguments));
     },
     onlyDesktop: function onlyDesktop() {
-      return styled$f.css(["", "{", "}"], devices.onlyDesktop, styled$f.css.apply(void 0, arguments));
+      return styled$g.css(["", "{", "}"], devices.onlyDesktop, styled$g.css.apply(void 0, arguments));
     },
     desktopSm: function desktopSm() {
-      return styled$f.css(["", "{", "}"], devices.desktopSm, styled$f.css.apply(void 0, arguments));
+      return styled$g.css(["", "{", "}"], devices.desktopSm, styled$g.css.apply(void 0, arguments));
     },
     desktopLg: function desktopLg() {
-      return styled$f.css(["", "{", "}"], devices.desktopLg, styled$f.css.apply(void 0, arguments));
+      return styled$g.css(["", "{", "}"], devices.desktopLg, styled$g.css.apply(void 0, arguments));
     },
     onlyPrint: function onlyPrint() {
-      return styled$f.css(["@media print{", "}"], styled$f.css.apply(void 0, arguments));
+      return styled$g.css(["@media print{", "}"], styled$g.css.apply(void 0, arguments));
     }
   };
 
@@ -555,6 +555,7 @@
     blueDisabled: '#93BBFF',
     blueHover: '#5393FF',
     bluePressed: '#1759FF',
+    blueAvailable: '#E4ECFA',
     darkGrey: '#939598',
     darkGreyHover: '#A8AAAC',
     darkGreyPressed: '#747679',
@@ -566,6 +567,7 @@
     greenPressed: '#54B039',
     grey: '#D5D7DB',
     greyHover: '#DDDFE2',
+    greyHoverLight: '#EAEBED',
     greyPressed: '#C4C6CC',
     lightBlue: '#08C4C4',
     lightBlueHover: '#39CFCF',
@@ -573,12 +575,15 @@
     lightGrey: '#E8EAF6',
     lightGreyHover: '#F4F5FB',
     lightGreyPressed: '#D0D3E3',
+    lightGreySelected: '#E4ECFA',
     orange: '#FF8D10',
     orangeHover: '#FFA33F',
+    orangeLight: '#ffead3',
     orangePressed: '#FF6E08',
     red: '#F13B70',
     redHover: '#F3628C',
     redPressed: '#EB2450',
+    redUnavailable: '#FFD9D9',
     skyBlue: '#02BFFB',
     skyBluePressed: '#00A6FA',
     statusRed: '#FF4343',
@@ -634,7 +639,7 @@
     return imageSizes[size] || imageSizes.small;
   };
 
-  var styled$e = {
+  var styled$f = {
     SkeletonContainer: styled__default["default"].div.withConfig({
       displayName: "styles__SkeletonContainer",
       componentId: "sc-1xnupv9-0"
@@ -664,7 +669,7 @@
     var skeletons = Array.from({
       length: count
     }, function (_, index) {
-      return /*#__PURE__*/React__default["default"].createElement(styled$e.SkeletonContainer, {
+      return /*#__PURE__*/React__default["default"].createElement(styled$f.SkeletonContainer, {
         key: index,
         width: currentWidth,
         height: currentHeight,
@@ -681,7 +686,7 @@
     width: '100%'
   };
 
-  var styled$d = {
+  var styled$e = {
     Image: styled__default["default"].img.withConfig({
       displayName: "styles__Image",
       componentId: "sc-uljfj3-0"
@@ -706,9 +711,9 @@
     accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
   };
   var mixins = {
-    flexCenter: styled$f.css(["display:flex;align-items:center;justify-content:center;"]),
+    flexCenter: styled$g.css(["display:flex;align-items:center;justify-content:center;"]),
     placeholder: function placeholder(styles) {
-      return styled$f.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
+      return styled$g.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
     },
     transition: function transition() {
       var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
@@ -716,14 +721,14 @@
       var transitionProperty;
       if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
       var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
-      return styled$f.css(["transition:", ";", ";"], transition, transitionProperty);
+      return styled$g.css(["transition:", ";", ";"], transition, transitionProperty);
     },
     scrollbar: function scrollbar(thumbColor, shadowColor) {
-      return styled$f.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || viewsPalette.white, thumbColor);
+      return styled$g.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || viewsPalette.white, thumbColor);
     }
   };
 
-  var styled$c = {
+  var styled$d = {
     Initials: styled__default["default"].div.withConfig({
       displayName: "styles__Initials",
       componentId: "sc-qlu7od-0"
@@ -747,7 +752,7 @@
         mainColor = _ref.mainColor,
         imageSize = _ref.imageSize,
         rounded = _ref.rounded;
-    return /*#__PURE__*/React__default["default"].createElement(styled$c.Initials, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$d.Initials, {
       color: mainColor,
       size: imageSize,
       rounded: rounded
@@ -834,7 +839,7 @@
       imageSize: imageSize,
       rounded: rounded
     });
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$d.Image, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$e.Image, {
       ref: imageRef,
       src: url,
       alt: "".concat(firstname, " ").concat(lastname),
@@ -861,6 +866,38 @@
     mainColor: viewsPalette.grey
   };
 
+  var _templateObject$4;
+  var styles = {
+    Svg: styled__default["default"].svg.withConfig({
+      displayName: "styles__Svg",
+      componentId: "sc-jf3e5i-0"
+    })(["fill:", ";", " ", ";"], function (props) {
+      return getColor(props.color);
+    }, mediaBreaks.onlyPrint(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), viewsPalette.darkGrey), function (props) {
+      return props.styles;
+    }),
+    Path: styled__default["default"].path.withConfig({
+      displayName: "styles__Path",
+      componentId: "sc-jf3e5i-1"
+    })(["fill:inherit;", ";"], function (props) {
+      return props.styles;
+    })
+  };
+  ({
+    Grid: styled__default["default"].div.withConfig({
+      displayName: "styles__Grid",
+      componentId: "sc-jf3e5i-2"
+    })(["display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:15px;"]),
+    Item: styled__default["default"].div.withConfig({
+      displayName: "styles__Item",
+      componentId: "sc-jf3e5i-3"
+    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), viewsPalette.blue, styles.Svg, viewsPalette.blue),
+    SearchInput: styled__default["default"].input.withConfig({
+      displayName: "styles__SearchInput",
+      componentId: "sc-jf3e5i-4"
+    })(["margin-bottom:10px;padding:5px;"])
+  });
+
   var API_key = {
   	path: "M408.747 682.667h-85.333l-17.92 51.627h-41.387l85.333-222.72h34.56l85.333 222.72h-42.667zM333.227 651.093h64.427l-32.427-92.16z M531.2 651.947v82.773h-38.827v-222.72h85.333c1.405-0.083 3.049-0.13 4.704-0.13 20.832 0 39.92 7.465 54.736 19.865l-0.134-0.109c13.282 13.021 21.514 31.149 21.514 51.2s-8.233 38.179-21.503 51.189l-0.012 0.011c-15.119 11.289-34.176 18.075-54.817 18.075-1.88 0-3.746-0.056-5.598-0.167l0.255 0.012zM531.2 620.8h46.507c1.015 0.079 2.199 0.124 3.393 0.124 10.644 0 20.453-3.576 28.291-9.592l-0.11 0.081c6.632-6.639 10.734-15.807 10.734-25.933 0-0.783-0.025-1.561-0.073-2.332l0.005 0.106c0.017-0.437 0.027-0.95 0.027-1.466 0-10.706-4.24-20.421-11.132-27.559l0.011 0.012c-7.552-6.897-17.648-11.122-28.729-11.122-0.55 0-1.098 0.010-1.642 0.031l0.079-0.002h-47.36z M733.44 734.72h-38.4v-222.72h38.4z M873.813 113.493h-725.333c-34.83 0.478-62.91 28.708-63.147 63.551l-0 0.023v669.44c0 35.346 28.654 64 64 64v0h725.333c35.346 0 64-28.654 64-64v0-669.44c-0.239-35.165-28.8-63.579-63.999-63.579-0.301 0-0.601 0.002-0.9 0.006l0.045-0zM148.48 156.16h725.333c0.001-0 0.003-0 0.004-0 11.632 0 21.090 9.31 21.329 20.884l0 0.022v149.333h-767.147v-149.333c0.23-11.605 9.691-20.924 21.329-20.924 0.301 0 0.602 0.006 0.9 0.019l-0.043-0.001zM873.813 867.84h-725.333c-11.782 0-21.333-9.551-21.333-21.333v0-478.293h768.853v478.293c0 0.005 0 0.011 0 0.017 0 11.782-9.551 21.333-21.333 21.333-0.3 0-0.599-0.006-0.896-0.018l0.043 0.001z M200.96 277.333c0.127 0.002 0.277 0.003 0.427 0.003 16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.965 0-30.718 13.752-30.72 30.717l-0 0c-0 0.001-0 0.002-0 0.003 0 16.816 13.512 30.477 30.271 30.717l0.023 0z M294.827 277.333c16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.966 0-30.72 13.754-30.72 30.72v0c0 16.966 13.754 30.72 30.72 30.72h-0z M388.267 277.333c16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.966 0-30.72 13.754-30.72 30.72h0c0.237 16.87 13.85 30.483 30.698 30.72l0.022 0z",
   	size: 24
@@ -2199,63 +2236,6 @@
   	zip_file: zip_file
   };
 
-  PropTypes.oneOfType([PropTypes.oneOf(Object.keys(icons)), PropTypes.bool]);
-  PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func]))]);
-  var itemsCheckListPropTypes = PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    translateLabel: PropTypes.bool,
-    value: PropTypes.number
-  }));
-  var groupsCheckListPropTypes = PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    translateLabel: PropTypes.bool,
-    items: itemsCheckListPropTypes
-  }));
-  PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    translateLabel: PropTypes.bool,
-    groups: groupsCheckListPropTypes
-  }));
-  PropTypes.shape({
-    status: PropTypes.number
-  });
-  PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.shape({})]);
-
-  var _templateObject$4;
-  var styles = {
-    Svg: styled__default["default"].svg.withConfig({
-      displayName: "styles__Svg",
-      componentId: "sc-jf3e5i-0"
-    })(["fill:", ";", " ", ";"], function (props) {
-      return getColor(props.color);
-    }, mediaBreaks.onlyPrint(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), viewsPalette.darkGrey), function (props) {
-      return props.styles;
-    }),
-    Path: styled__default["default"].path.withConfig({
-      displayName: "styles__Path",
-      componentId: "sc-jf3e5i-1"
-    })(["fill:inherit;", ";"], function (props) {
-      return props.styles;
-    })
-  };
-  ({
-    Grid: styled__default["default"].div.withConfig({
-      displayName: "styles__Grid",
-      componentId: "sc-jf3e5i-2"
-    })(["display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:15px;"]),
-    Item: styled__default["default"].div.withConfig({
-      displayName: "styles__Item",
-      componentId: "sc-jf3e5i-3"
-    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), viewsPalette.blue, styles.Svg, viewsPalette.blue),
-    SearchInput: styled__default["default"].input.withConfig({
-      displayName: "styles__SearchInput",
-      componentId: "sc-jf3e5i-4"
-    })(["margin-bottom:10px;padding:5px;"])
-  });
-
   var _excluded$8 = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
 
   var Icon = function Icon(_ref) {
@@ -2293,6 +2273,216 @@
     viewBox: '0 0 1024 1024'
   };
 
+  var _templateObject$3;
+  var styled$c = {
+    Chip: styled__default["default"].button.withConfig({
+      displayName: "styles__Chip",
+      componentId: "sc-1vnh4co-0"
+    })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", " ", ";", " ", " ", " ", ""], function (props) {
+      return !props.onlyIcon ? '0 12px' : '0';
+    }, function (props) {
+      return props.clickable ? 'pointer' : 'default';
+    }, viewsPalette.black, function (props) {
+      return !props.onlyIcon ? '32px' : '36px';
+    }, function (props) {
+      return props.onlyIcon && '36px';
+    }, function (props) {
+      return !props.onlyIcon ? '50px' : '50%';
+    }, function (props) {
+      return props.clickable || props.hasLink ? 'auto' : 'none';
+    }, function (props) {
+      return !props.onlyIcon && 'margin-right: 8px';
+    }, function (props) {
+      switch (props.variant) {
+        case 'outlined':
+          return styled$g.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
+
+        case 'contained':
+          return styled$g.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
+
+        case 'status':
+          return styled$g.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(props.color || 'grey'), getColor(props.sizeColor || 'white'));
+
+        default:
+          return '';
+      }
+    }, function (props) {
+      return props.styles;
+    }, function (props) {
+      return props.borderColor && "border: solid 1px ".concat(getColor(props.borderColor), ";");
+    }, function (props) {
+      return props.backgroundColor && "background-color: ".concat(getColor(props.backgroundColor), ";");
+    }, function (props) {
+      return props.textColor && "color: ".concat(getColor(props.textColor), ";");
+    }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), viewsPalette.darkGrey)),
+    iconPathStyles: styled$g.css(["", ";"], mixins.transition('fill')),
+    DeleteButton: styled__default["default"].button.withConfig({
+      displayName: "styles__DeleteButton",
+      componentId: "sc-1vnh4co-1"
+    })(["width:16px;height:16px;margin-left:12px;"]),
+    deleteButtonPathStyles: styled$g.css(["", ";"], mixins.transition('fill')),
+    Children: styled__default["default"].div.withConfig({
+      displayName: "styles__Children",
+      componentId: "sc-1vnh4co-2"
+    })(["text-overflow:ellipsis;overflow:hidden;"])
+  };
+
+  var _excluded$7 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
+
+  var Chip = function Chip(_ref) {
+    var backgroundColor = _ref.backgroundColor,
+        borderColor = _ref.borderColor,
+        children = _ref.children,
+        disabled = _ref.disabled,
+        icon = _ref.icon,
+        iconColor = _ref.iconColor,
+        onClick = _ref.onClick,
+        onDelete = _ref.onDelete,
+        selected = _ref.selected,
+        textColor = _ref.textColor,
+        variant = _ref.variant,
+        hasLink = _ref.hasLink,
+        props = _objectWithoutProperties(_ref, _excluded$7);
+
+    if (!children && !icon) return null;
+    return /*#__PURE__*/React__default["default"].createElement(styled$c.Chip, _extends$1({
+      as: props.onClick ? 'button' : 'div',
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      hasIcon: !!icon,
+      disabled: disabled,
+      clickable: (onClick || onDelete) && !disabled,
+      onClick: disabled ? undefined : onClick,
+      selected: selected,
+      textColor: textColor,
+      variant: variant,
+      iconColor: iconColor,
+      hasLink: hasLink,
+      onlyIcon: !children && icon
+    }, props), icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+      className: "chip-icon",
+      name: icon,
+      color: iconColor,
+      pathStyles: styled$c.iconPathStyles
+    }), children && /*#__PURE__*/React__default["default"].createElement(styled$c.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$c.DeleteButton, {
+      type: "button",
+      onClick: onDelete
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      color: "black",
+      pathStyles: styled$c.deleteButtonPathStyles,
+      className: "delete-button",
+      name: "cross_circle_flat",
+      size: 16
+    })));
+  };
+
+  Chip.defaultProps = {
+    backgroundColor: '',
+    borderColor: '',
+    disabled: false,
+    iconColor: 'grey',
+    selected: false,
+    textColor: '',
+    variant: 'outlined',
+    hasLink: false
+  };
+
+  var styled$b = {
+    AvatarGroup: styled__default["default"](Chip).withConfig({
+      displayName: "styles__AvatarGroup",
+      componentId: "sc-1jnt2lr-0"
+    })(["pointer-events:none;", " background:", ";", " & div{display:flex;& div,img,span{&:not(:first-child){margin-left:-4px;}}span:first-of-type{margin-left:0px;}}"], function (_ref) {
+      var showFull = _ref.showFull,
+          backgroundColor = _ref.backgroundColor;
+      return showFull ? styled$g.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || viewsPalette.white) : styled$g.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
+    }, function (_ref2) {
+      var backgroundColor = _ref2.backgroundColor;
+      return backgroundColor || viewsPalette.white;
+    }, function (_ref3) {
+      var inactive = _ref3.inactive;
+      return inactive && "\n           &:hover {\n               background: ".concat(viewsPalette.white, ";\n           }\n           &:active {\n               border-color: #EAEBED;\n           }\n    ");
+    })
+  };
+
+  var AvatarList = function AvatarList(_ref) {
+    var userList = _ref.userList,
+        hasExtraCount = _ref.hasExtraCount,
+        extraCount = _ref.extraCount,
+        showFull = _ref.showFull;
+    return userList.map(function (_ref2, index) {
+      var firstname = _ref2.firstname,
+          lastname = _ref2.lastname,
+          url = _ref2.url,
+          id = _ref2.id,
+          mainColor = _ref2.mainColor;
+      if (hasExtraCount && index < extraCount) return null;
+      return /*#__PURE__*/React__default["default"].createElement(Avatar, {
+        key: id,
+        firstname: firstname,
+        lastname: lastname,
+        url: url,
+        size: showFull ? 'large' : 'small',
+        mainColor: mainColor
+      });
+    });
+  };
+
+  var AvatarGroup = function AvatarGroup(_ref) {
+    var users = _ref.users,
+        usersToDisplay = _ref.usersToDisplay,
+        showFull = _ref.showFull,
+        badgeColor = _ref.badgeColor;
+    var extraCount = users.length > usersToDisplay ? users.length - usersToDisplay : 0;
+    var hasExtraCount = extraCount > 0;
+    return /*#__PURE__*/React__default["default"].createElement(styled$b.AvatarGroup, {
+      disabled: true,
+      showFull: showFull
+    }, /*#__PURE__*/React__default["default"].createElement(AvatarList, {
+      userList: users,
+      hasExtraCount: hasExtraCount,
+      extraCount: extraCount,
+      showFull: showFull
+    }), hasExtraCount && /*#__PURE__*/React__default["default"].createElement(Avatar, {
+      firstname: "+",
+      lastname: "".concat(extraCount),
+      mainColor: badgeColor,
+      size: showFull ? 'large' : 'small'
+    }));
+  };
+
+  AvatarGroup.defaultProps = {
+    badgeColor: viewsPalette.blue,
+    users: [],
+    usersToDisplay: 5,
+    showFull: false
+  };
+  var AvatarGroup$1 = /*#__PURE__*/React__default["default"].memo(AvatarGroup);
+
+  PropTypes.oneOfType([PropTypes.oneOf(Object.keys(icons)), PropTypes.bool]);
+  PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func]))]);
+  var itemsCheckListPropTypes = PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    translateLabel: PropTypes.bool,
+    value: PropTypes.number
+  }));
+  var groupsCheckListPropTypes = PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    translateLabel: PropTypes.bool,
+    items: itemsCheckListPropTypes
+  }));
+  PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    translateLabel: PropTypes.bool,
+    groups: groupsCheckListPropTypes
+  }));
+  PropTypes.shape({
+    status: PropTypes.number
+  });
+  PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.shape({})]);
+
   var validColors = ['black', 'blue', 'darkGrey', 'fizzGreen', 'green', 'grey', 'lightBlue', 'lightGrey', 'orange', 'red', 'statusRed', 'white', 'yellow'];
   var white = viewsPalette.white,
       grey = viewsPalette.grey,
@@ -2313,7 +2503,7 @@
   };
 
   var commonStyles = function commonStyles(iconColor, fontColor, color) {
-    return styled$f.css(["color:", ";.button-icon{fill:", ";}background:none;&:focus,&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{color:", ";.button-icon{fill:", ";}}"], getColor(fontColor || color || blue), getColor(iconColor || color || blue), lightGreyHover, lightGrey, grey, grey);
+    return styled$g.css(["color:", ";.button-icon{fill:", ";}background:none;&:focus,&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{color:", ";.button-icon{fill:", ";}}"], getColor(fontColor || color || blue), getColor(iconColor || color || blue), lightGreyHover, lightGrey, grey, grey);
   };
 
   var getButtonStyles = function getButtonStyles(_ref) {
@@ -2323,10 +2513,10 @@
         iconColor = _ref.iconColor;
     var variantStyles = {
       contained: function contained() {
-        return styled$f.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor(fontColor || 'white'), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
+        return styled$g.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor(fontColor || 'white'), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
       },
       outlined: function outlined() {
-        return styled$f.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
+        return styled$g.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
       },
       cleaned: function cleaned() {
         return commonStyles(iconColor, fontColor, color);
@@ -2335,7 +2525,7 @@
     return variantStyles[variant] || '';
   };
 
-  var styled$b = {
+  var styled$a = {
     Button: styled__default["default"].button.withConfig({
       displayName: "styles__Button",
       componentId: "sc-buf2do-0"
@@ -2368,7 +2558,7 @@
     })
   };
 
-  var _excluded$7 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
+  var _excluded$6 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
 
   var Button = function Button(_ref) {
     var children = _ref.children,
@@ -2382,9 +2572,9 @@
         styles = _ref.styles,
         variant = _ref.variant,
         disabled = _ref.disabled,
-        props = _objectWithoutProperties(_ref, _excluded$7);
+        props = _objectWithoutProperties(_ref, _excluded$6);
 
-    return /*#__PURE__*/React__default["default"].createElement(styled$b.Button, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styled$a.Button, _extends$1({
       color: color,
       iconColor: iconColor || fontColor,
       fontColor: fontColor,
@@ -2409,7 +2599,7 @@
     disabled: false
   };
 
-  var styled$a = {
+  var styled$9 = {
     Container: styled__default["default"].label.withConfig({
       displayName: "styles__Container",
       componentId: "sc-18bfcwf-0"
@@ -2426,12 +2616,12 @@
       displayName: "styles__Input",
       componentId: "sc-18bfcwf-1"
     })(["opacity:0;position:absolute;cursor:pointer;"]),
-    iconCheckStyles: styled$f.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
+    iconCheckStyles: styled$g.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
       return !!props.rounded && "\n\t\t\tflex-shrink: 0;\n\t\t\tpadding-right: 1px;\n\t\t";
     })
   };
 
-  var _excluded$6 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
+  var _excluded$5 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
 
   var Checkbox = function Checkbox(_ref) {
     var autoComplete = _ref.autoComplete,
@@ -2441,7 +2631,7 @@
         rounded = _ref.rounded,
         styles = _ref.styles,
         value = _ref.value,
-        props = _objectWithoutProperties(_ref, _excluded$6);
+        props = _objectWithoutProperties(_ref, _excluded$5);
 
     var _useState = React.useState(!!value || defaultChecked),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2456,18 +2646,18 @@
 
     var _props$checked = props.checked,
         conntroledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$a.Container, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
       checked: conntroledChecked,
       rounded: rounded,
       styles: styles
-    }, /*#__PURE__*/React__default["default"].createElement(styled$a.Input, _extends$1({}, props, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$9.Input, _extends$1({}, props, {
       type: "checkbox",
       disabled: disabled,
       autoComplete: autoComplete ? 'on' : 'off',
       onChange: handleChange
     })), /*#__PURE__*/React__default["default"].createElement(Icon, {
       name: "check_bold",
-      styles: styled$a.iconCheckStyles,
+      styles: styled$9.iconCheckStyles,
       rounded: rounded
     }));
   };
@@ -2479,120 +2669,6 @@
     }
   };
 
-  var _templateObject$3;
-  var styled$9 = {
-    Chip: styled__default["default"].button.withConfig({
-      displayName: "styles__Chip",
-      componentId: "sc-1vnh4co-0"
-    })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", " ", ";", " ", " ", " ", ""], function (props) {
-      return !props.onlyIcon ? '0 12px' : '0';
-    }, function (props) {
-      return props.clickable ? 'pointer' : 'default';
-    }, viewsPalette.black, function (props) {
-      return !props.onlyIcon ? '32px' : '36px';
-    }, function (props) {
-      return props.onlyIcon && '36px';
-    }, function (props) {
-      return !props.onlyIcon ? '50px' : '50%';
-    }, function (props) {
-      return props.clickable || props.hasLink ? 'auto' : 'none';
-    }, function (props) {
-      return !props.onlyIcon && 'margin-right: 8px';
-    }, function (props) {
-      switch (props.variant) {
-        case 'outlined':
-          return styled$f.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
-
-        case 'contained':
-          return styled$f.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
-
-        case 'status':
-          return styled$f.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(props.color || 'grey'), getColor(props.sizeColor || 'white'));
-
-        default:
-          return '';
-      }
-    }, function (props) {
-      return props.styles;
-    }, function (props) {
-      return props.borderColor && "border: solid 1px ".concat(getColor(props.borderColor), ";");
-    }, function (props) {
-      return props.backgroundColor && "background-color: ".concat(getColor(props.backgroundColor), ";");
-    }, function (props) {
-      return props.textColor && "color: ".concat(getColor(props.textColor), ";");
-    }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), viewsPalette.darkGrey)),
-    iconPathStyles: styled$f.css(["", ";"], mixins.transition('fill')),
-    DeleteButton: styled__default["default"].button.withConfig({
-      displayName: "styles__DeleteButton",
-      componentId: "sc-1vnh4co-1"
-    })(["width:16px;height:16px;margin-left:12px;"]),
-    deleteButtonPathStyles: styled$f.css(["", ";"], mixins.transition('fill')),
-    Children: styled__default["default"].div.withConfig({
-      displayName: "styles__Children",
-      componentId: "sc-1vnh4co-2"
-    })(["text-overflow:ellipsis;overflow:hidden;"])
-  };
-
-  var _excluded$5 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
-
-  var Chip = function Chip(_ref) {
-    var backgroundColor = _ref.backgroundColor,
-        borderColor = _ref.borderColor,
-        children = _ref.children,
-        disabled = _ref.disabled,
-        icon = _ref.icon,
-        iconColor = _ref.iconColor,
-        onClick = _ref.onClick,
-        onDelete = _ref.onDelete,
-        selected = _ref.selected,
-        textColor = _ref.textColor,
-        variant = _ref.variant,
-        hasLink = _ref.hasLink,
-        props = _objectWithoutProperties(_ref, _excluded$5);
-
-    if (!children && !icon) return null;
-    return /*#__PURE__*/React__default["default"].createElement(styled$9.Chip, _extends$1({
-      as: props.onClick ? 'button' : 'div',
-      backgroundColor: backgroundColor,
-      borderColor: borderColor,
-      hasIcon: !!icon,
-      disabled: disabled,
-      clickable: (onClick || onDelete) && !disabled,
-      onClick: disabled ? undefined : onClick,
-      selected: selected,
-      textColor: textColor,
-      variant: variant,
-      iconColor: iconColor,
-      hasLink: hasLink,
-      onlyIcon: !children && icon
-    }, props), icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: "chip-icon",
-      name: icon,
-      color: iconColor,
-      pathStyles: styled$9.iconPathStyles
-    }), children && /*#__PURE__*/React__default["default"].createElement(styled$9.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$9.DeleteButton, {
-      type: "button",
-      onClick: onDelete
-    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-      color: "black",
-      pathStyles: styled$9.deleteButtonPathStyles,
-      className: "delete-button",
-      name: "cross_circle_flat",
-      size: 16
-    })));
-  };
-
-  Chip.defaultProps = {
-    backgroundColor: '',
-    borderColor: '',
-    disabled: false,
-    iconColor: 'grey',
-    selected: false,
-    textColor: '',
-    variant: 'outlined',
-    hasLink: false
-  };
-
   var styled$8 = {
     Wrapper: styled__default["default"].div.withConfig({
       displayName: "styles__Wrapper",
@@ -2651,7 +2727,7 @@
   })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], viewsPalette.white, timingFunctions$1.standard, function (props) {
     return props.checked && "\n\t\t\tleft: 100%;\n\t\t\tmargin-left: -20px;\n\t\t";
   });
-  var iconCheckStyles = styled$f.css(["position:absolute;fill:", ";", ""], function (props) {
+  var iconCheckStyles = styled$g.css(["position:absolute;fill:", ";", ""], function (props) {
     return statusColor(props);
   }, onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
     return props.checked ? viewsPalette.black : viewsPalette.darkGrey;
@@ -2835,7 +2911,7 @@
     }, function (_ref4) {
       var hasIcon = _ref4.hasIcon;
       return hasIcon && "padding-left: 32px;";
-    }, mixins.placeholder(styled$f.css(["font-weight:400;color:", ";"], function (_ref5) {
+    }, mixins.placeholder(styled$g.css(["font-weight:400;color:", ";"], function (_ref5) {
       var error = _ref5.error;
       return error ? viewsPalette.statusRed : viewsPalette.darkGreyPressed;
     })), function (props) {
@@ -3054,7 +3130,7 @@
       componentId: "sc-wtau65-1"
     })(["border:none;border-bottom:1px solid ", ";border-radius:0;height:23px;max-height:350px;padding:0 9px 4px 0;resize:none;font-size:", ";font-weight:400;color:", ";", ";width:", ";", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}", " ", ""], viewsPalette.grey, fontSize, viewsPalette.black, mixins.transition('color,border-color', '0.2s'), function (props) {
       return props.fullWidth ? '100%' : 'auto';
-    }, mixins.placeholder(styled$f.css(["opacity:1;color:", ";"], function (props) {
+    }, mixins.placeholder(styled$g.css(["opacity:1;color:", ";"], function (props) {
       return placeholderColor(props);
     })), mixins.scrollbar(viewsPalette.grey, viewsPalette.base), viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.white, viewsPalette.grey, viewsPalette.grey, function (props) {
       return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(viewsPalette.statusRed, "\n\t\t\t}\n\t\t");
@@ -4725,14 +4801,14 @@
   };
 
   var verticalCommonStyles = function verticalCommonStyles(open) {
-    return styled$f.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
+    return styled$g.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
       var fullScreen = _ref.fullScreen;
       return fullScreen && 'height: 100%';
     }, open ? '100%' : 0);
   };
 
   var horizontalCommonStyles = function horizontalCommonStyles(open) {
-    return styled$f.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
+    return styled$g.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
       var fullScreen = _ref2.fullScreen;
       return fullScreen && 'width: 100%';
     }, open ? '100%' : 0);
@@ -4741,16 +4817,16 @@
   var setPosition = function setPosition(position, open) {
     var positions = {
       top: function top() {
-        return styled$f.css(["", ";top:0;"], verticalCommonStyles(open));
+        return styled$g.css(["", ";top:0;"], verticalCommonStyles(open));
       },
       bottom: function bottom() {
-        return styled$f.css(["", ";bottom:0;"], verticalCommonStyles(open));
+        return styled$g.css(["", ";bottom:0;"], verticalCommonStyles(open));
       },
       left: function left() {
-        return styled$f.css(["", ";left:0;"], horizontalCommonStyles(open));
+        return styled$g.css(["", ";left:0;"], horizontalCommonStyles(open));
       },
       right: function right() {
-        return styled$f.css(["", ";right:0;"], horizontalCommonStyles(open));
+        return styled$g.css(["", ";right:0;"], horizontalCommonStyles(open));
       }
     };
     return positions[position];
@@ -4764,7 +4840,7 @@
         open = _ref3.open,
         transitionDuration = _ref3.transitionDuration;
     var transitionTime = transitionDuration / 1000;
-    return styled$f.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
+    return styled$g.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
   });
   var Content = styled__default["default"].div.withConfig({
     displayName: "styles__Content",
@@ -4841,6 +4917,7 @@
   };
 
   exports.Avatar = Avatar;
+  exports.AvatarGroup = AvatarGroup$1;
   exports.Button = Button;
   exports.Checkbox = Checkbox;
   exports.Chip = Chip;