@activecollab/components 1.0.106 → 1.0.109

package/dist/index.js

@@ -6041,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"
@@ -6241,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"
@@ -6393,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,
@@ -6407,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,
@@ -6537,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,
@@ -6545,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);
@@ -7000,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,
@@ -7012,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,
@@ -7025,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"
@@ -7035,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"
@@ -7054,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;flex-shrink:0;"]);
+  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
@@ -7069,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";
 
@@ -7252,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