@activecollab/components 1.0.121 → 1.0.122

package/dist/index.js

@@ -314,7 +314,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$_ = ["children", "variant", "size", "disabled", "className"];
+  var _excluded$$ = ["children", "variant", "size", "disabled", "className"];
 
   /**
    * Button component
@@ -328,7 +328,7 @@
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$_);
+        args = _objectWithoutProperties(_ref, _excluded$$);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$1, _extends({
       disabled: disabled,
@@ -381,12 +381,12 @@
   })(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
   StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
 
-  var _excluded$Z = ["className", "disabled"];
+  var _excluded$_ = ["className", "disabled"];
   var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        rest = _objectWithoutProperties(_ref, _excluded$Z);
+        rest = _objectWithoutProperties(_ref, _excluded$_);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
@@ -419,11 +419,11 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$Y = ["children", "className"];
+  var _excluded$Z = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$Y);
+        rest = _objectWithoutProperties(_ref, _excluded$Z);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
@@ -486,7 +486,7 @@
     return React.useContext(MenuContext);
   };
 
-  var _excluded$X = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
+  var _excluded$Y = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         anchorEl = _ref.anchorEl,
@@ -499,7 +499,7 @@
         initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
         _ref$strategy = _ref.strategy,
         strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
-        rest = _objectWithoutProperties(_ref, _excluded$X);
+        rest = _objectWithoutProperties(_ref, _excluded$Y);
 
     var _useState = React.useState(true),
         _useState2 = _slicedToArray(_useState, 2),
@@ -605,12 +605,12 @@
   });
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$W = ["className", "disableBackgroundColor"];
+  var _excluded$X = ["className", "disableBackgroundColor"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
         _ref$disableBackgroun = _ref.disableBackgroundColor,
         disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-        rest = _objectWithoutProperties(_ref, _excluded$W);
+        rest = _objectWithoutProperties(_ref, _excluded$X);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classnames__default["default"]("c-overlay", className),
@@ -654,7 +654,7 @@
   })(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
   StyledWindow.displayName = "StyledWindow";
 
-  var _excluded$V = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
+  var _excluded$W = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -671,7 +671,7 @@
         _ref$preventClickEven = _ref.preventClickEventBubbling,
         preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         onClick = _ref.onClick,
-        rest = _objectWithoutProperties(_ref, _excluded$V);
+        rest = _objectWithoutProperties(_ref, _excluded$W);
 
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
@@ -745,7 +745,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$U = ["children", "className", "innerRef", "style"];
+  var _excluded$V = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -753,7 +753,7 @@
         innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
         _ref$style = _ref.style,
         style = _ref$style === void 0 ? {} : _ref$style,
-        rest = _objectWithoutProperties(_ref, _excluded$U);
+        rest = _objectWithoutProperties(_ref, _excluded$V);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
@@ -1061,7 +1061,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$T = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$U = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
   var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$variant = _ref.variant,
         variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
@@ -1092,7 +1092,7 @@
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         className = _ref.className,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$T);
+        props = _objectWithoutProperties(_ref, _excluded$U);
 
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
@@ -1116,13 +1116,13 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$S = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$T = ["title", "className", "leftElement", "rightElement"];
   var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
         className = _ref.className,
         leftElement = _ref.leftElement,
         rightElement = _ref.rightElement,
-        props = _objectWithoutProperties(_ref, _excluded$S);
+        props = _objectWithoutProperties(_ref, _excluded$T);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classnames__default["default"]("c-menu-header", className),
@@ -1148,11 +1148,11 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$R = ["children", "className"];
+  var _excluded$S = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$R);
+        props = _objectWithoutProperties(_ref, _excluded$S);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, _extends({}, props, {
       className: classnames__default["default"]("c-menu-footer", className),
@@ -1193,11 +1193,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$Q = ["children", "className"];
+  var _excluded$R = ["children", "className"];
   var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$Q);
+        props = _objectWithoutProperties(_ref, _excluded$R);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
       className: className,
@@ -1206,11 +1206,11 @@
   });
   List.displayName = "List";
 
-  var _excluded$P = ["children", "className"];
+  var _excluded$Q = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$P);
+        props = _objectWithoutProperties(_ref, _excluded$Q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
       className: classnames__default["default"]("c-list-item", className),
@@ -3620,7 +3620,7 @@
   });
   StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
 
-  var _excluded$O = ["children", "className", "separator"];
+  var _excluded$P = ["children", "className", "separator"];
   var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _dimensions$width, _childDimensions$widt;
 
@@ -3628,7 +3628,7 @@
         className = _ref.className,
         _ref$separator = _ref.separator,
         separator = _ref$separator === void 0 ? "/" : _ref$separator,
-        rest = _objectWithoutProperties(_ref, _excluded$O);
+        rest = _objectWithoutProperties(_ref, _excluded$P);
 
     var internalRef = React.useRef(null);
     var listWrapperRef = React.useRef(null);
@@ -3815,11 +3815,11 @@
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
   });
 
-  var _excluded$N = ["children"];
+  var _excluded$O = ["children"];
 
   var TooltipAnimation = function TooltipAnimation(_ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$N);
+        props = _objectWithoutProperties(_ref, _excluded$O);
 
     return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
       timeout: 0
@@ -3906,12 +3906,12 @@
   });
   Tooltip.displayName = "Tooltip";
 
-  var _excluded$M = ["weight", "children"];
+  var _excluded$N = ["weight", "children"];
   var Body2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$M);
+        props = _objectWithoutProperties(_ref, _excluded$N);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 2",
@@ -3959,7 +3959,7 @@
   });
   StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
 
-  var _excluded$L = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
+  var _excluded$M = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
   var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var label = _ref.label,
         icon = _ref.icon,
@@ -3969,7 +3969,7 @@
         tooltipText = _ref.tooltipText,
         onClearAll = _ref.onClearAll,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$L);
+        args = _objectWithoutProperties(_ref, _excluded$M);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
       className: className
@@ -4284,7 +4284,7 @@
   StyledDatePicker.displayName = "StyledDatePicker";
   StyledDayPicker.displayName = "StyledDayPicker";
 
-  var _excluded$K = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
+  var _excluded$L = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
   var DatePicker = function DatePicker(_ref) {
     var className = _ref.className,
         onChange = _ref.onChange,
@@ -4306,7 +4306,7 @@
         _ref$fixedWeeks = _ref.fixedWeeks,
         fixedWeeks = _ref$fixedWeeks === void 0 ? true : _ref$fixedWeeks,
         defaultModifiers = _ref.modifiers,
-        rest = _objectWithoutProperties(_ref, _excluded$K);
+        rest = _objectWithoutProperties(_ref, _excluded$L);
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -5231,7 +5231,7 @@
   };
   Tbody.displayName = "Tbody";
 
-  var _excluded$J = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue"];
+  var _excluded$K = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue"];
   exports.SortDirection = void 0;
 
   (function (SortDirection) {
@@ -5281,7 +5281,7 @@
     } : _ref$groupHead,
         isCollapsible = _ref.isCollapsible,
         emptyValue = _ref.emptyValue,
-        args = _objectWithoutProperties(_ref, _excluded$J);
+        args = _objectWithoutProperties(_ref, _excluded$K);
 
     var _useState = React.useState(sortDirection),
         _useState2 = _slicedToArray(_useState, 2),
@@ -5701,7 +5701,7 @@
   });
   StyledPaper.displayName = "StyledPaper";
 
-  var _excluded$I = ["children", "className", "type", "hover", "useOptimizedShadow"];
+  var _excluded$J = ["children", "className", "type", "hover", "useOptimizedShadow"];
 
   /**
    * This is a component description and should sit directly above your component
@@ -5715,7 +5715,7 @@
         hover = _ref$hover === void 0 ? false : _ref$hover,
         _ref$useOptimizedShad = _ref.useOptimizedShadow,
         useOptimizedShadow = _ref$useOptimizedShad === void 0 ? false : _ref$useOptimizedShad,
-        rest = _objectWithoutProperties(_ref, _excluded$I);
+        rest = _objectWithoutProperties(_ref, _excluded$J);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
       className: classnames__default["default"](className, {
@@ -5769,7 +5769,7 @@
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$H = ["children", "className", "hoverable", "paperType"];
+  var _excluded$I = ["children", "className", "hoverable", "paperType"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -5777,7 +5777,7 @@
         hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
         _ref$paperType = _ref.paperType,
         paperType = _ref$paperType === void 0 ? "paper-2" : _ref$paperType,
-        rest = _objectWithoutProperties(_ref, _excluded$H);
+        rest = _objectWithoutProperties(_ref, _excluded$I);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
@@ -5859,12 +5859,12 @@
   });
   EntityCard.displayName = "EntityCard";
 
-  var _excluded$G = ["weight", "children"];
+  var _excluded$H = ["weight", "children"];
   var Title1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "light" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$G);
+        props = _objectWithoutProperties(_ref, _excluded$H);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -5874,12 +5874,12 @@
   });
   Title1.displayName = "Title1";
 
-  var _excluded$F = ["weight", "children"];
+  var _excluded$G = ["weight", "children"];
   var Title2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "light" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$F);
+        props = _objectWithoutProperties(_ref, _excluded$G);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -5889,10 +5889,10 @@
   });
   Title2.displayName = "Title2";
 
-  var _excluded$E = ["children"];
+  var _excluded$F = ["children"];
   var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$E);
+        props = _objectWithoutProperties(_ref, _excluded$F);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -5902,10 +5902,10 @@
   });
   Header2.displayName = "Header2";
 
-  var _excluded$D = ["children"];
+  var _excluded$E = ["children"];
   var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$D);
+        props = _objectWithoutProperties(_ref, _excluded$E);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -5915,12 +5915,12 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$C = ["weight", "children"];
+  var _excluded$D = ["weight", "children"];
   var Body1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$C);
+        props = _objectWithoutProperties(_ref, _excluded$D);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 1",
@@ -5930,12 +5930,12 @@
   });
   Body1.displayName = "Body1";
 
-  var _excluded$B = ["weight", "children"];
+  var _excluded$C = ["weight", "children"];
   var Caption1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$B);
+        props = _objectWithoutProperties(_ref, _excluded$C);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 1",
@@ -5945,12 +5945,12 @@
   });
   Caption1.displayName = "Caption1";
 
-  var _excluded$A = ["weight", "children"];
+  var _excluded$B = ["weight", "children"];
   var Caption2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$A);
+        props = _objectWithoutProperties(_ref, _excluded$B);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 2",
@@ -6069,7 +6069,7 @@
     "borderRadius": "9999px"
   });
 
-  var _excluded$z = ["url", "alt", "size", "className"];
+  var _excluded$A = ["url", "alt", "size", "className"];
   var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var url = _ref.url,
         _ref$alt = _ref.alt,
@@ -6077,7 +6077,7 @@
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? 24 : _ref$size,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$z);
+        rest = _objectWithoutProperties(_ref, _excluded$A);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({}, rest, {
       ref: ref,
@@ -6124,7 +6124,7 @@
   });
   StyledTagText.displayName = "StyledTagText";
 
-  var _excluded$y = ["name", "color", "showText", "showDot", "className"];
+  var _excluded$z = ["name", "color", "showText", "showDot", "className"];
   var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var name = _ref.name,
         color = _ref.color,
@@ -6133,7 +6133,7 @@
         _ref$showDot = _ref.showDot,
         showDot = _ref$showDot === void 0 ? true : _ref$showDot,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$y);
+        rest = _objectWithoutProperties(_ref, _excluded$z);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
       className: classnames__default["default"]("c-tag", className),
@@ -6153,10 +6153,10 @@
     componentId: "sc-x4ge7a-0"
   })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
 
-  var _excluded$x = ["className"];
+  var _excluded$y = ["className"];
   var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$x);
+        rest = _objectWithoutProperties(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
@@ -6171,10 +6171,10 @@
     componentId: "sc-1f35d5h-0"
   })(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
 
-  var _excluded$w = ["className"];
+  var _excluded$x = ["className"];
   var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$w);
+        rest = _objectWithoutProperties(_ref, _excluded$x);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
@@ -6190,10 +6190,10 @@
     componentId: "sc-1ht53g9-0"
   })(["position:relative;width:20px;&:before{content:\"\";display:block;padding-top:100%;}svg{animation:", " 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;circle{stroke-dasharray:1,200;stroke-dashoffset:0;stroke:var(--color-theme-600);animation:", " 1.5s ease-in-out infinite;stroke-linecap:round;}}"], rotateAnimation, dashAnimation);
 
-  var _excluded$v = ["className"];
+  var _excluded$w = ["className"];
   var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$v);
+        rest = _objectWithoutProperties(_ref, _excluded$w);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
       ref: ref,
@@ -6321,7 +6321,7 @@
   }, StyledInput$1, StyledLabel);
   StyledCheckbox$1.displayName = "StyledCheckbox";
 
-  var _excluded$u = ["className", "hover", "id"];
+  var _excluded$v = ["className", "hover", "id"];
 
   /**
    * Checkbox component
@@ -6331,7 +6331,7 @@
         hover = _ref.hover,
         _ref$id = _ref.id,
         id = _ref$id === void 0 ? "checkbox" : _ref$id,
-        rest = _objectWithoutProperties(_ref, _excluded$u);
+        rest = _objectWithoutProperties(_ref, _excluded$v);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
       className: classnames__default["default"]("c-checkbox", {
@@ -6506,7 +6506,7 @@
   StyledScrollShadowLeft.displayName = "StyledScrollShadowLeft";
   StyledScrollShadowRight.displayName = "StyledScrollShadowRight";
 
-  var _excluded$t = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
+  var _excluded$u = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
   var ScrollShadow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -6520,7 +6520,7 @@
         invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
         innerColor = _ref.innerColor,
         outerColor = _ref.outerColor,
-        rest = _objectWithoutProperties(_ref, _excluded$t);
+        rest = _objectWithoutProperties(_ref, _excluded$u);
 
     var _useState = React.useState({
       top: 0,
@@ -6650,7 +6650,7 @@
     return height;
   };
 
-  var _excluded$s = ["as", "className", "invert", "style"];
+  var _excluded$t = ["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,
@@ -6658,7 +6658,7 @@
         _ref$invert = _ref.invert,
         invert = _ref$invert === void 0 ? false : _ref$invert,
         style = _ref.style,
-        rest = _objectWithoutProperties(_ref, _excluded$s);
+        rest = _objectWithoutProperties(_ref, _excluded$t);
 
     var internalRef = useInitScrollRef(null, invert);
     var handleRef = useForkRef(internalRef, ref);
@@ -6700,10 +6700,10 @@
   var StyledAutocompleteNewItem = styled__default["default"].label.withConfig({
     displayName: "Styles__StyledAutocompleteNewItem",
     componentId: "sc-1bc1vz9-3"
-  })(["", ";padding:6px 16px;margin:4px 0;font-weight:normal;color:var(--color-primary);&:before{content:\"+ \";}", ""], {
+  })(["", ";", " padding:6px 16px;margin:4px 0;font-weight:normal;color:var(--color-primary);&:before{content:\"+ \";}", ""], {
     "cursor": "pointer",
     "userSelect": "none"
-  }, function (props) {
+  }, FontStyle, function (props) {
     return props.hover && styled.css(["background-color:var(--color-theme-200);content:\"+ \";"]);
   });
   StyledAutocompleteNewItem.displayName = "StyledAutocompleteNewItem";
@@ -7074,49 +7074,69 @@
   };
   Autocomplete.displayName = "Autocomplete";
 
-  var StyledInput = styled__default["default"].input.withConfig({
-    displayName: "Styles__StyledInput",
+  var StyledInputWrapper = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledInputWrapper",
     componentId: "sc-ce8kcp-0"
-  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " ", " &::placeholder{", "}", ""], {
-    "fontSize": "0.875rem"
-  }, {
-    "color": "var(--color-theme-900)"
-  }, {
-    "lineHeight": "1.375"
+  })(["", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", ""], {
+    "cursor": "text"
   }, {
-    "letterSpacing": "0.02em"
+    "display": "flex"
   }, {
-    "fontWeight": "400"
+    "alignItems": "center"
   }, {
     "borderColor": "var(--color-theme-500)"
   }, FontStyle, BoxSizingStyle, function (props) {
     return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
   }, function (props) {
-    return props.$size === "big" && styled.css(["", " height:40px;"], {
-      "fontSize": "1rem"
-    });
+    return props.$size === "big" && styled.css(["height:40px;"]);
   }, function (props) {
-    return props.disabled && styled.css(["", ""], {
+    return props.$disabled && styled.css(["", ""], {
       "cursor": "not-allowed",
       "opacity": "0.5"
     });
   }, function (props) {
-    return !props.disabled && !props.$invalid && styled.css(["&:active,&:focus,&:hover{", "}"], {
+    return !props.$disabled && !props.$invalid && styled.css(["&:focus-within,&:hover{", "}"], {
       "borderColor": "var(--color-primary)"
     });
+  }, function (props) {
+    return !props.$disabled && props.$invalid && styled.css(["", ""], {
+      "borderColor": "var(--red-alert)"
+    });
+  });
+  StyledInputWrapper.displayName = "StyledInputWrapper";
+  var StyledInput = styled__default["default"].input.withConfig({
+    displayName: "Styles__StyledInput",
+    componentId: "sc-ce8kcp-1"
+  })(["", " ", " ", " ", " ", " ", " padding:0px;margin:0 4px;background-color:var(--input-background-color);border:none;outline:none;&::placeholder{", "}", " ", ""], {
+    "fontSize": "0.875rem"
+  }, {
+    "color": "var(--color-theme-900)"
+  }, {
+    "lineHeight": "1.375"
+  }, {
+    "letterSpacing": "0.02em"
+  }, {
+    "fontWeight": "400"
+  }, {
+    "width": "100%"
   }, {
     "color": "var(--color-theme-transparent-500)"
   }, function (props) {
-    return !props.disabled && props.$invalid && styled.css(["", ""], {
-      "borderColor": "var(--red-alert)"
+    return props.$size === "big" && styled.css(["", ""], {
+      "fontSize": "1rem"
+    });
+  }, function (props) {
+    return props.disabled && styled.css(["", ""], {
+      "cursor": "not-allowed"
     });
   });
   StyledInput.displayName = "StyledInput";
 
-  var _excluded$r = ["className", "type", "disabled", "size", "invalid"];
-  var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _excluded$s = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "inputRef"];
+  var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
         className = _ref$className === void 0 ? "" : _ref$className,
+        style = _ref.style,
         _ref$type = _ref.type,
         type = _ref$type === void 0 ? "text" : _ref$type,
         _ref$disabled = _ref.disabled,
@@ -7125,16 +7145,32 @@
         size = _ref$size === void 0 ? "regular" : _ref$size,
         _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-        rest = _objectWithoutProperties(_ref, _excluded$r);
+        startAdornment = _ref.startAdornment,
+        endAdornment = _ref.endAdornment,
+        inputRef = _ref.inputRef,
+        rest = _objectWithoutProperties(_ref, _excluded$s);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
-      ref: ref,
-      type: type,
-      disabled: disabled,
+    var intInputRef = React.useRef(null);
+    var handleRef = useForkRef(inputRef, intInputRef);
+    var handleWrapperClick = React.useCallback(function () {
+      var _intInputRef$current;
+
+      (_intInputRef$current = intInputRef.current) === null || _intInputRef$current === void 0 ? void 0 : _intInputRef$current.focus();
+    }, []);
+    return /*#__PURE__*/React__default["default"].createElement(StyledInputWrapper, {
+      $size: size,
+      $invalid: invalid,
+      $disabled: disabled,
       className: classnames__default["default"]("c-input", className),
+      style: style,
+      onClick: handleWrapperClick,
+      ref: ref
+    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
+      ref: handleRef,
+      type: type,
       $size: size,
-      $invalid: invalid
-    }, rest));
+      disabled: disabled
+    }, rest)), endAdornment);
   });
   Input.displayName = "Input";
 
@@ -7164,14 +7200,14 @@
   }, StyledRadioLabel);
   StyledRadioButton$1.displayName = "StyledRadioButton";
 
-  var _excluded$q = ["className", "id", "hover"];
+  var _excluded$r = ["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);
+        props = _objectWithoutProperties(_ref, _excluded$r);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton$1, {
       className: classnames__default["default"]("c-radio-btn", {
@@ -7264,7 +7300,7 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$p = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose"];
+  var _excluded$q = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose"];
   var Select = function Select(_ref) {
     var _ref$type = _ref.type,
         type = _ref$type === void 0 ? "single" : _ref$type,
@@ -7294,7 +7330,7 @@
         keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
         onSelectOpen = _ref.onSelectOpen,
         onSelectClose = _ref.onSelectClose,
-        prop = _objectWithoutProperties(_ref, _excluded$p);
+        prop = _objectWithoutProperties(_ref, _excluded$q);
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -7454,7 +7490,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Tag, props, /*#__PURE__*/React__default["default"].createElement("div", null, !disableSearch ? /*#__PURE__*/React__default["default"].createElement(StyledSelectForm, {
       ref: formRef
     }, /*#__PURE__*/React__default["default"].createElement(StyledSelectInput, {
-      ref: handleRef,
+      inputRef: handleRef,
       autoFocus: true,
       placeholder: placeholder
     }), actionIcon && actionLabel && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -7570,7 +7606,7 @@
   });
   StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
 
-  var _excluded$o = ["children", "active", "disabled", "className", "role"];
+  var _excluded$p = ["children", "active", "disabled", "className", "role"];
   var Item = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var children = _ref.children,
         _ref$active = _ref.active,
@@ -7579,7 +7615,7 @@
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
         role = _ref.role,
-        rest = _objectWithoutProperties(_ref, _excluded$o);
+        rest = _objectWithoutProperties(_ref, _excluded$p);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
       className: classnames__default["default"]("c-nav__item", {
@@ -7621,11 +7657,11 @@
   });
   StyledExpandSingle.displayName = "StyledExpandSingle";
 
-  var _excluded$n = ["expanded"];
+  var _excluded$o = ["expanded"];
   var ExpandSingle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
         expanded = _ref$expanded === void 0 ? false : _ref$expanded,
-        rest = _objectWithoutProperties(_ref, _excluded$n);
+        rest = _objectWithoutProperties(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledExpandSingle, _extends({
       ref: ref,
@@ -7938,6 +7974,34 @@
   };
   Nav.displayName = "Nav";
 
+  var _excluded$n = ["children", "as", "disablePointerEvents"];
+  var InputAdornmentBase = styled__default["default"].div.withConfig({
+    displayName: "InputAdornment__InputAdornmentBase",
+    componentId: "sc-1xfjx1z-0"
+  })(["", " ", " ", ""], {
+    "display": "flex"
+  }, {
+    "alignItems": "center"
+  }, function (props) {
+    return props.$disablePointerEvents && styled.css(["", ""], {
+      "pointerEvents": "none"
+    });
+  });
+  var InputAdornment = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+    var children = _ref.children,
+        as = _ref.as,
+        disablePointerEvents = _ref.disablePointerEvents,
+        rest = _objectWithoutProperties(_ref, _excluded$n);
+
+    var Component = as || "div";
+    return /*#__PURE__*/React__default["default"].createElement(InputAdornmentBase, _extends({}, rest, {
+      as: Component,
+      $disablePointerEvents: disablePointerEvents,
+      ref: ref
+    }), children);
+  });
+  InputAdornment.displayName = "InputAdornment";
+
   var _excluded$m = ["expanded"];
   var ExpandAll = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
@@ -10196,41 +10260,29 @@
   });
   Toggle.displayName = "Toggle";
 
-  var StyledComboBox = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledComboBox",
+  var StyledComboBoxInput = styled__default["default"](Input).withConfig({
+    displayName: "Styles__StyledComboBoxInput",
     componentId: "sc-5qvkpb-0"
-  })(["position:relative;cursor:text;", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+  })(["overflow:hidden;text-overflow:ellipsis;width:100%;", ""], function (props) {
     return props.$loading && styled.css(["cursor:progress;"]);
   });
-  StyledComboBox.displayName = "StyledComboBox";
-  var StyledComboBoxControls = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledComboBoxControls",
-    componentId: "sc-5qvkpb-1"
-  })(["position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;"]);
-  StyledComboBoxControls.displayName = "StyledComboBoxControls";
+  StyledComboBoxInput.displayName = "StyledComboBoxInput";
   var StyledIconDefaults = styled.css(["flex-shrink:0;cursor:pointer;"]);
-  var StyledComboBoxCloseSmallIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
-    displayName: "Styles__StyledComboBoxCloseSmallIcon",
-    componentId: "sc-5qvkpb-2"
-  })(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBox);
-  StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
   var StyledComboBoxCollapseExpandSingleIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
     displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
-    componentId: "sc-5qvkpb-3"
-  })(["", " margin:0 4px 0 0;color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, function (props) {
+    componentId: "sc-5qvkpb-1"
+  })(["", " color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, function (props) {
     return props.$open && styled.css(["transform:rotate(0deg);"]);
   });
   StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpandSingleIcon";
-  var StyledComboBoxInput = styled__default["default"](Input).withConfig({
-    displayName: "Styles__StyledComboBoxInput",
-    componentId: "sc-5qvkpb-4"
-  })(["overflow:hidden;text-overflow:ellipsis;width:100%;padding-right:80px;", ":hover &{", "}"], StyledComboBox, {
-    "borderColor": "var(--color-primary)"
-  });
-  StyledComboBoxInput.displayName = "StyledComboBoxInput";
+  var StyledComboBoxCloseSmallIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
+    displayName: "Styles__StyledComboBoxCloseSmallIcon",
+    componentId: "sc-5qvkpb-2"
+  })(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput);
+  StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
   var StyledComboBoxList = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledComboBoxList",
-    componentId: "sc-5qvkpb-5"
+    componentId: "sc-5qvkpb-3"
   })(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";"], function (props) {
     return "".concat(props.$width, "px");
   });
@@ -10257,6 +10309,7 @@
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
         prop = _objectWithoutProperties(_ref, _excluded$2);
 
+    var timeoutRef = React.useRef();
     var selectedName = React.useMemo(function () {
       var value = "";
 
@@ -10328,12 +10381,6 @@
         setOpen(false);
       }
     }, [onChange]);
-    var onClose = React.useCallback(function () {
-      setTimeout(function () {
-        setOpen(false);
-      }, 200);
-      setValue(selectedName);
-    }, [selectedName]);
     var onOpen = React.useCallback(function () {
       if (!disabled) {
         setOpen(true);
@@ -10356,41 +10403,42 @@
       e.preventDefault();
     }, []);
     var comboBoxRef = React.useRef(null);
-    var clickOutsideCallback = React.useCallback(function (event) {
-      if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {
-        onClose();
-      }
-    }, [onClose]);
+    var handleBlur = React.useCallback(function () {
+      setValue(selectedName);
+      timeoutRef.current = setTimeout(function () {
+        setOpen(false);
+      }, 200);
+    }, [selectedName]);
     React.useEffect(function () {
-      document.addEventListener("click", clickOutsideCallback);
       return function () {
-        document.removeEventListener("click", clickOutsideCallback);
+        timeoutRef.current && clearTimeout(timeoutRef.current);
       };
-    }, [clickOutsideCallback]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledComboBox, {
+    }, []);
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       className: "c-combo-box",
-      $open: open,
-      $loading: loading,
+      onBlur: handleBlur,
+      onFocus: onOpen,
       ref: comboBoxRef,
-      onClick: onOpen,
-      onFocus: onOpen
-    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
-      ref: handleRef,
+      inputRef: handleRef,
       value: loading && loadingText ? loadingText : value,
       onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       placeholder: placeholder,
       disabled: disabled,
       size: size,
-      invalid: invalid
-    }), !disabled ? /*#__PURE__*/React__default["default"].createElement(StyledComboBoxControls, null, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(Button, {
-      onMouseDown: handleMouseDown,
-      onClick: handleDeselect,
-      variant: "text gray",
-      size: "small"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
-      $open: open
-    })) : null, !disabled ? /*#__PURE__*/React__default["default"].createElement(Popper, {
+      invalid: invalid,
+      $loading: loading,
+      endAdornment: !disabled ? /*#__PURE__*/React__default["default"].createElement(InputAdornment, {
+        disablePointerEvents: disabled
+      }, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(Button, {
+        onMouseDown: handleMouseDown,
+        onClick: handleDeselect,
+        variant: "text gray",
+        size: "small"
+      }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
+        $open: open
+      })) : null
+    }), !disabled ? /*#__PURE__*/React__default["default"].createElement(Popper, {
       anchorEl: comboBoxRef.current,
       open: open,
       placement: "bottom",
@@ -11116,6 +11164,7 @@
   exports.InfoIcon = InfoIcon$1;
   exports.InfoSmallIcon = InfoSmallIcon$1;
   exports.Input = Input;
+  exports.InputAdornment = InputAdornment;
   exports.InsertLinkIcon = InsertLinkIcon$1;
   exports.IntegrationsIcon = IntegrationsIcon$1;
   exports.InvoicesIcon = InvoicesIcon$1;