@activecollab/components 1.0.105 → 1.0.108

package/dist/index.js

@@ -468,22 +468,6 @@
   AddCrossIcon.displayName = "AddCrossIcon";
   var AddCrossIcon$1 = AddCrossIcon;
 
-  var ArrowBackIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
-    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
-      width: 7,
-      height: 13,
-      viewBox: "0 0 7 13",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "var(--color-theme-600)",
-      ref: svgRef
-    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
-      d: "M1.839 6.425l4.586-4.586V.425l-6 6 6 6V11.01z",
-      fillRule: "nonzero"
-    }));
-  });
-  ArrowBackIcon.displayName = "ArrowBackIcon";
-  var ArrowBackIcon$1 = ArrowBackIcon;
-
   var ArrowCollapseMultipleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -532,6 +516,22 @@
   ArrowLeftBoxIcon.displayName = "ArrowLeftBoxIcon";
   var ArrowLeftBoxIcon$1 = ArrowLeftBoxIcon;
 
+  var ArrowLeftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-theme-600)",
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M13.45 6.337l-5.657 5.657 5.657 5.657a1 1 0 101.414-1.414l-4.241-4.243 4.241-4.243a1 1 0 00-1.414-1.414z",
+      fillRule: "evenodd"
+    }));
+  });
+  ArrowLeftIcon.displayName = "ArrowLeftIcon";
+  var ArrowLeftIcon$1 = ArrowLeftIcon;
+
   var ArrowRefreshIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -1689,22 +1689,6 @@
   MarkerIcon.displayName = "MarkerIcon";
   var MarkerIcon$1 = MarkerIcon;
 
-  var MenuNavIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
-    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
-      width: 24,
-      height: 24,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "var(--color-theme-600)",
-      ref: svgRef
-    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
-      d: "M13.45 6.337l-5.657 5.657 5.657 5.657a1 1 0 101.414-1.414l-4.241-4.243 4.241-4.243a1 1 0 00-1.414-1.414z",
-      fillRule: "evenodd"
-    }));
-  });
-  MenuNavIcon.displayName = "MenuNavIcon";
-  var MenuNavIcon$1 = MenuNavIcon;
-
   var MessageAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -3887,15 +3871,9 @@
   }, function (props) {
     return props.$direction === "next" && styled.css(["right:1px;"]);
   });
-  var StyledMenuNavIcon = styled__default["default"](MenuNavIcon$1).withConfig({
-    displayName: "Styles__StyledMenuNavIcon",
-    componentId: "sc-1owijsg-1"
-  })(["", " transform:rotate(180deg);"], {
-    "transform": "var(--tw-transform)"
-  });
   var StyledMonths = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledMonths",
-    componentId: "sc-1owijsg-2"
+    componentId: "sc-1owijsg-1"
   })(["top:30px;height:230px;", ""], {
     "position": "absolute",
     "left": "0px",
@@ -3907,7 +3885,7 @@
   });
   var StyledMonth = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledMonth",
-    componentId: "sc-1owijsg-3"
+    componentId: "sc-1owijsg-2"
   })(["width:26%;transition-duration:0.3s;", " ", " ", " ", " ", ""], {
     "margin": "auto",
     "cursor": "pointer",
@@ -3930,25 +3908,24 @@
   });
   var StyledYearMonthPicker = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledYearMonthPicker",
-    componentId: "sc-1owijsg-4"
+    componentId: "sc-1owijsg-3"
   })(["display:table-caption;margin-bottom:0.5rem;padding:0 0.5rem;", " &> div{font-weight:500;font-size:1.15rem;}"], {
     "textAlign": "center",
     "color": "var(--color-theme-900)"
   });
   var StyledYearMonthPickerNavBar = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledYearMonthPickerNavBar",
-    componentId: "sc-1owijsg-5"
+    componentId: "sc-1owijsg-4"
   })(["width:auto;margin:0 auto;"]);
   var StyledYearMonthPickerNavBarItem = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledYearMonthPickerNavBarItem",
-    componentId: "sc-1owijsg-6"
+    componentId: "sc-1owijsg-5"
   })(["", " transition-duration:0.3s;display:inline-block;&:hover{background-color:var(--color-primary-300);border-radius:15px;}"], {
     "paddingLeft": "1rem",
     "paddingRight": "1rem",
     "cursor": "pointer"
   });
   StyledNavBarButton.displayName = "StyledNavBarButton";
-  StyledMenuNavIcon.displayName = "StyledMenuNavIcon";
   StyledMonths.displayName = "StyledMonths";
   StyledMonth.displayName = "StyledMonth";
 
@@ -4034,7 +4011,7 @@
       tabIndex: 0,
       onClick: onPrevious,
       $direction: "previous"
-    }, /*#__PURE__*/React__default["default"].createElement(MenuNavIcon$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, {
       "aria-label": "Previous Month",
       width: "24",
       height: "24"
@@ -4045,7 +4022,7 @@
       tabIndex: 0,
       onClick: onNext,
       $direction: "next"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledMenuNavIcon, {
+    }, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, {
       "aria-label": "Next Month",
       width: "24",
       height: "24"
@@ -4808,7 +4785,7 @@
       variant: "secondary",
       onClick: onLeftClickHandler,
       disabled: isBeforeMinDate
-    }, /*#__PURE__*/React__default["default"].createElement(MenuNavIcon$1, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
+    }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       $isTargetable: step === "yearly" || !withDatePicker,
       $isRounded: step === "custom",
       style: dateStepperWidth(fromDate, toDate, step)
@@ -4842,11 +4819,7 @@
       variant: "secondary",
       onClick: onRightClickHandler,
       disabled: isAfterMaxDate
-    }, /*#__PURE__*/React__default["default"].createElement(MenuNavIcon$1, {
-      style: {
-        transform: "rotate(180deg)"
-      }
-    })) : null);
+    }, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null)) : null);
   };
   DateStepper.displayName = "DateStepper";
 
@@ -6068,114 +6041,6 @@
   });
   SpinnerLoader.displayName = "SpinnerLoader";
 
-  var StyledInput$1 = styled__default["default"].input.withConfig({
-    displayName: "Styles__StyledInput",
-    componentId: "sc-y7zymm-0"
-  })(["display:none;"]);
-  StyledInput$1.displayName = "StyledInput";
-  var StyledLabel = styled__default["default"].label.withConfig({
-    displayName: "Styles__StyledLabel",
-    componentId: "sc-y7zymm-1"
-  })([""]);
-  StyledLabel.displayName = "StyledLabel";
-  var StyledCheckbox = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledCheckbox",
-    componentId: "sc-y7zymm-2"
-  })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput$1, StyledLabel, StyledInput$1, StyledLabel, StyledInput$1, StyledLabel, function (props) {
-    return props.hover && styled.css(["", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}"], StyledLabel);
-  }, StyledInput$1, StyledLabel);
-  StyledCheckbox.displayName = "StyledCheckbox";
-
-  var _excluded$u = ["className", "hover", "id"];
-
-  /**
-   * Checkbox component
-   */
-  var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-        hover = _ref.hover,
-        _ref$id = _ref.id,
-        id = _ref$id === void 0 ? "checkbox" : _ref$id,
-        rest = _objectWithoutProperties(_ref, _excluded$u);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, {
-      className: classnames__default["default"]("c-checkbox", {
-        "c-checkbox__hover": hover,
-        "c-checkbox__controlled": typeof hover === "boolean"
-      }, className),
-      hover: hover
-    }, /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({
-      id: id,
-      className: "c-checkbox--input",
-      type: "checkbox",
-      ref: ref
-    }, rest)), /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
-      htmlFor: id,
-      className: "c-checkbox--label"
-    }, /*#__PURE__*/React__default["default"].createElement(CheckboxIcon$1, {
-      height: 16,
-      width: 16
-    })));
-  });
-  Checkbox.displayName = "Checkbox";
-
-  var StyledRadioInput = styled__default["default"].input.withConfig({
-    displayName: "Styles__StyledRadioInput",
-    componentId: "sc-1xh9uc2-0"
-  })(["display:none;"]);
-  StyledRadioInput.displayName = "StyledRadioInput";
-  var StyledRadioLabel = styled__default["default"].label.withConfig({
-    displayName: "Styles__StyledRadioLabel",
-    componentId: "sc-1xh9uc2-1"
-  })(["", ""], {
-    "display": "inline-flex",
-    "alignItems": "center"
-  });
-  StyledRadioLabel.displayName = "StyledRadioLabel";
-  var StyledRadioButton = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledRadioButton",
-    componentId: "sc-1xh9uc2-2"
-  })(["", " ", " height:16px;width:16px;position:relative;svg{cursor:pointer;fill:transparent;}circle:first-child{transition-duration:0.2s;stroke:var(--color-theme-500);}circle:last-child{transition-duration:0.2s;transform-origin:center;transform:scale(0);fill:var(--color-secondary-500);}input:focus ~ ", "{circle:first-child{stroke:var(--color-secondary);}}input:disabled ~ ", "{pointer-events:none;opacity:0.5;}", " ", " input:checked ~ ", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);fill:var(--color-secondary);}}"], BoxSizingStyle, {
-    "display": "inline-flex",
-    "alignItems": "center"
-  }, StyledRadioLabel, StyledRadioLabel, function (props) {
-    return props.$isControlled !== true && styled.css(["input:hover ~ ", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);}}"], StyledRadioLabel);
-  }, function (props) {
-    return props.$isHovered && styled.css(["", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);}}"], StyledRadioLabel);
-  }, StyledRadioLabel);
-  StyledRadioButton.displayName = "StyledRadioButton";
-
-  var _excluded$t = ["className", "id", "hover"];
-  var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var _ref$className = _ref.className,
-        className = _ref$className === void 0 ? "" : _ref$className,
-        _ref$id = _ref.id,
-        id = _ref$id === void 0 ? "radio" : _ref$id,
-        hover = _ref.hover,
-        props = _objectWithoutProperties(_ref, _excluded$t);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, {
-      className: classnames__default["default"]("c-radio-btn", {
-        "c-radio-btn__hover": hover,
-        "c-radio-btn__controlled": typeof hover === "boolean"
-      }, className),
-      $isHovered: hover,
-      $isControlled: typeof hover === "boolean"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledRadioInput, _extends({
-      id: id,
-      className: "c-radio-btn--input",
-      type: "radio",
-      ref: ref
-    }, props)), /*#__PURE__*/React__default["default"].createElement(StyledRadioLabel, {
-      htmlFor: id,
-      className: "c-radio-btn--label"
-    }, /*#__PURE__*/React__default["default"].createElement(RadioButtonIcon$1, {
-      width: "16",
-      height: "16"
-    })));
-  });
-  RadioButton.displayName = "RadioButton";
-
   var StyledHiglightedText = styled__default["default"].span.withConfig({
     displayName: "useHighlightText__StyledHiglightedText",
     componentId: "sc-13agf6o-0"
@@ -6268,6 +6133,57 @@
   });
   Option.displayName = "Option";
 
+  var StyledInput$1 = styled__default["default"].input.withConfig({
+    displayName: "Styles__StyledInput",
+    componentId: "sc-y7zymm-0"
+  })(["display:none;"]);
+  StyledInput$1.displayName = "StyledInput";
+  var StyledLabel = styled__default["default"].label.withConfig({
+    displayName: "Styles__StyledLabel",
+    componentId: "sc-y7zymm-1"
+  })([""]);
+  StyledLabel.displayName = "StyledLabel";
+  var StyledCheckbox$1 = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledCheckbox",
+    componentId: "sc-y7zymm-2"
+  })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput$1, StyledLabel, StyledInput$1, StyledLabel, StyledInput$1, StyledLabel, function (props) {
+    return props.hover && styled.css(["", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}"], StyledLabel);
+  }, StyledInput$1, StyledLabel);
+  StyledCheckbox$1.displayName = "StyledCheckbox";
+
+  var _excluded$u = ["className", "hover", "id"];
+
+  /**
+   * Checkbox component
+   */
+  var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+        hover = _ref.hover,
+        _ref$id = _ref.id,
+        id = _ref$id === void 0 ? "checkbox" : _ref$id,
+        rest = _objectWithoutProperties(_ref, _excluded$u);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
+      className: classnames__default["default"]("c-checkbox", {
+        "c-checkbox__hover": hover,
+        "c-checkbox__controlled": typeof hover === "boolean"
+      }, className),
+      hover: hover
+    }, /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({
+      id: id,
+      className: "c-checkbox--input",
+      type: "checkbox",
+      ref: ref
+    }, rest)), /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
+      htmlFor: id,
+      className: "c-checkbox--label"
+    }, /*#__PURE__*/React__default["default"].createElement(CheckboxIcon$1, {
+      height: 16,
+      width: 16
+    })));
+  });
+  Checkbox.displayName = "Checkbox";
+
   var StyledOptionGroup = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionGroup",
     componentId: "sc-16v5afu-0"
@@ -6420,7 +6336,7 @@
   StyledScrollShadowLeft.displayName = "StyledScrollShadowLeft";
   StyledScrollShadowRight.displayName = "StyledScrollShadowRight";
 
-  var _excluded$s = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
+  var _excluded$t = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
   var ScrollShadow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -6434,7 +6350,7 @@
         invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
         innerColor = _ref.innerColor,
         outerColor = _ref.outerColor,
-        rest = _objectWithoutProperties(_ref, _excluded$s);
+        rest = _objectWithoutProperties(_ref, _excluded$t);
 
     var _useState = React.useState({
       top: 0,
@@ -6564,7 +6480,7 @@
     return height;
   };
 
-  var _excluded$r = ["as", "className", "invert", "style"];
+  var _excluded$s = ["as", "className", "invert", "style"];
   var ScrollElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$as = _ref.as,
         as = _ref$as === void 0 ? "div" : _ref$as,
@@ -6572,7 +6488,7 @@
         _ref$invert = _ref.invert,
         invert = _ref$invert === void 0 ? false : _ref$invert,
         style = _ref.style,
-        rest = _objectWithoutProperties(_ref, _excluded$r);
+        rest = _objectWithoutProperties(_ref, _excluded$s);
 
     var internalRef = useInitScrollRef(null, invert);
     var handleRef = useForkRef(internalRef, ref);
@@ -7027,7 +6943,7 @@
   });
   StyledInput.displayName = "StyledInput";
 
-  var _excluded$q = ["className", "type", "disabled", "size", "invalid"];
+  var _excluded$r = ["className", "type", "disabled", "size", "invalid"];
   var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
         className = _ref$className === void 0 ? "" : _ref$className,
@@ -7039,7 +6955,7 @@
         size = _ref$size === void 0 ? "regular" : _ref$size,
         _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-        rest = _objectWithoutProperties(_ref, _excluded$q);
+        rest = _objectWithoutProperties(_ref, _excluded$r);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
       ref: ref,
@@ -7052,6 +6968,63 @@
   });
   Input.displayName = "Input";
 
+  var StyledRadioInput = styled__default["default"].input.withConfig({
+    displayName: "Styles__StyledRadioInput",
+    componentId: "sc-1xh9uc2-0"
+  })(["display:none;"]);
+  StyledRadioInput.displayName = "StyledRadioInput";
+  var StyledRadioLabel = styled__default["default"].label.withConfig({
+    displayName: "Styles__StyledRadioLabel",
+    componentId: "sc-1xh9uc2-1"
+  })(["", ""], {
+    "display": "inline-flex",
+    "alignItems": "center"
+  });
+  StyledRadioLabel.displayName = "StyledRadioLabel";
+  var StyledRadioButton$1 = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledRadioButton",
+    componentId: "sc-1xh9uc2-2"
+  })(["", " ", " height:16px;width:16px;position:relative;svg{cursor:pointer;fill:transparent;}circle:first-child{transition-duration:0.2s;stroke:var(--color-theme-500);}circle:last-child{transition-duration:0.2s;transform-origin:center;transform:scale(0);fill:var(--color-secondary-500);}input:focus ~ ", "{circle:first-child{stroke:var(--color-secondary);}}input:disabled ~ ", "{pointer-events:none;opacity:0.5;}", " ", " input:checked ~ ", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);fill:var(--color-secondary);}}"], BoxSizingStyle, {
+    "display": "inline-flex",
+    "alignItems": "center"
+  }, StyledRadioLabel, StyledRadioLabel, function (props) {
+    return props.$isControlled !== true && styled.css(["input:hover ~ ", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);}}"], StyledRadioLabel);
+  }, function (props) {
+    return props.$isHovered && styled.css(["", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);}}"], StyledRadioLabel);
+  }, StyledRadioLabel);
+  StyledRadioButton$1.displayName = "StyledRadioButton";
+
+  var _excluded$q = ["className", "id", "hover"];
+  var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _ref$className = _ref.className,
+        className = _ref$className === void 0 ? "" : _ref$className,
+        _ref$id = _ref.id,
+        id = _ref$id === void 0 ? "radio" : _ref$id,
+        hover = _ref.hover,
+        props = _objectWithoutProperties(_ref, _excluded$q);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton$1, {
+      className: classnames__default["default"]("c-radio-btn", {
+        "c-radio-btn__hover": hover,
+        "c-radio-btn__controlled": typeof hover === "boolean"
+      }, className),
+      $isHovered: hover,
+      $isControlled: typeof hover === "boolean"
+    }, /*#__PURE__*/React__default["default"].createElement(StyledRadioInput, _extends({
+      id: id,
+      className: "c-radio-btn--input",
+      type: "radio",
+      ref: ref
+    }, props)), /*#__PURE__*/React__default["default"].createElement(StyledRadioLabel, {
+      htmlFor: id,
+      className: "c-radio-btn--label"
+    }, /*#__PURE__*/React__default["default"].createElement(RadioButtonIcon$1, {
+      width: "16",
+      height: "16"
+    })));
+  });
+  RadioButton.displayName = "RadioButton";
+
   var StyledSelectInput = styled__default["default"](Input).withConfig({
     displayName: "Styles__StyledSelectInput",
     componentId: "sc-gfxqpu-0"
@@ -7062,18 +7035,28 @@
     componentId: "sc-gfxqpu-1"
   })(["margin:12px 12px 0 12px;display:flex;", "{width:100%;border-radius:4px;}*{margin:auto 0;}"], StyledSelectInput);
   StyledSelectForm.displayName = "StyledSelectForm";
+  var StyledCheckbox = styled__default["default"](Checkbox).withConfig({
+    displayName: "Styles__StyledCheckbox",
+    componentId: "sc-gfxqpu-2"
+  })(["margin-left:12px;"]);
+  StyledCheckbox.displayName = "StyledCheckbox";
+  var StyledRadioButton = styled__default["default"](RadioButton).withConfig({
+    displayName: "Styles__StyledRadioButton",
+    componentId: "sc-gfxqpu-3"
+  })(["margin-left:12px;"]);
+  StyledRadioButton.displayName = "StyledRadioButton";
 
   var StyledOptionIndicator = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionIndicator",
     componentId: "sc-6fiqyy-0"
-  })(["height:24px;width:24px;border-radius:100%;margin-right:8px;", ""], function (props) {
+  })(["height:24px;width:24px;border-radius:100%;margin-right:8px;flex-shrink:0;", ""], function (props) {
     return props.backgroundColor && !props.children && styled.css(["background-color:", ";"], props.backgroundColor);
   });
   StyledOptionIndicator.displayName = "StyledOptionIndicator";
   var StyledOptionText = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledOptionText",
     componentId: "sc-6fiqyy-1"
-  })(["", " width:calc(100% - 50px);line-height:18px;", ""], {
+  })(["", " flex-grow:1;line-height:18px;", ""], {
     "overflow": "hidden",
     "textOverflow": "ellipsis",
     "whiteSpace": "nowrap"
@@ -7081,12 +7064,18 @@
     return props.textColor && styled.css(["color:", ";"], props.textColor);
   });
   StyledOptionText.displayName = "StyledOptionText";
+  var StyledAdditionalInfo = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledAdditionalInfo",
+    componentId: "sc-6fiqyy-2"
+  })(["margin:0 0 0 5px;line-height:18px;"]);
+  StyledAdditionalInfo.displayName = "StyledAdditionalInfo";
 
   var OptionContent = function OptionContent(_ref) {
     var imageUrl = _ref.imageUrl,
         color = _ref.color,
         textColor = _ref.textColor,
-        name = _ref.name;
+        name = _ref.name,
+        additionalInfo = _ref.additionalInfo;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, imageUrl || color ? /*#__PURE__*/React__default["default"].createElement(StyledOptionIndicator, {
       className: "c-option--label",
       backgroundColor: color
@@ -7096,7 +7085,7 @@
     }) : null) : null, /*#__PURE__*/React__default["default"].createElement(StyledOptionText, {
       className: "c-option--text",
       textColor: textColor
-    }, name));
+    }, name), additionalInfo ? /*#__PURE__*/React__default["default"].createElement(StyledAdditionalInfo, null, additionalInfo) : null);
   };
   OptionContent.displayName = "OptionContent";
 
@@ -7279,12 +7268,13 @@
         imageUrl: option.image,
         color: option.color,
         textColor: option.textColor,
-        name: option.name
-      }), option.id === null ? type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({
+        name: option.name,
+        additionalInfo: option.additionalInfo
+      }), option.id === null ? type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
         checked: isAllOptionsChecked
-      }, props)) : /*#__PURE__*/React__default["default"].createElement(RadioButton, _extends({
+      }, props)) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, _extends({
         checked: selectedOptions.length < 1 || !selectedOptions[0]
-      }, props)) : type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(Checkbox, props) : /*#__PURE__*/React__default["default"].createElement(RadioButton, props));
+      }, props)) : type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, props) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, props));
     }, [isAllOptionsChecked, selectedOptions, type]);
     return /*#__PURE__*/React__default["default"].createElement(Tag, props, /*#__PURE__*/React__default["default"].createElement("div", null, !disableSearch ? /*#__PURE__*/React__default["default"].createElement(StyledSelectForm, {
       ref: formRef
@@ -7799,7 +7789,7 @@
     "marginLeft": "0.5rem"
   });
   StyledMenuSelectorDots.displayName = "StyledMenuSelectorDots";
-  var StyledMenuSelectorBack = styled__default["default"](ArrowBackIcon$1).withConfig({
+  var StyledMenuSelectorBack = styled__default["default"](ArrowLeftIcon$1).withConfig({
     displayName: "Styles__StyledMenuSelectorBack",
     componentId: "sc-1x7qbnu-1"
   })(["", ""], {
@@ -10807,10 +10797,10 @@
   exports.AddCrossIcon = AddCrossIcon$1;
   exports.AddCrossTinyIcon = AddCrossTinyIcon$1;
   exports.ApplauseIcon = ApplauseIcon$1;
-  exports.ArrowBackIcon = ArrowBackIcon$1;
   exports.ArrowCollapseMultipleIcon = ArrowCollapseMultipleIcon$1;
   exports.ArrowExpandeMultipleIcon = ArrowExpandeMultipleIcon$1;
   exports.ArrowLeftBoxIcon = ArrowLeftBoxIcon$1;
+  exports.ArrowLeftIcon = ArrowLeftIcon$1;
   exports.ArrowRefreshIcon = ArrowRefreshIcon$1;
   exports.ArrowRightIcon = ArrowRightIcon$1;
   exports.AssignIcon = AssignIcon$1;
@@ -10937,7 +10927,6 @@
   exports.Menu = Menu;
   exports.MenuFooter = MenuFooter;
   exports.MenuHeader = MenuHeader;
-  exports.MenuNavIcon = MenuNavIcon$1;
   exports.MenuSelector = MenuSelector;
   exports.MessageAddIcon = MessageAddIcon$1;
   exports.MessageEmptyIcon = MessageEmptyIcon$1;