@activecollab/components 2.0.90 → 2.0.91

package/dist/esm/components/Choose/Styles.js

@@ -1,15 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledChoose = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _BoxSizingStyle = require("../BoxSizingStyle");
-var _FontStyle = require("../FontStyle");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledChoose = exports.StyledChoose = _styledComponents.default.button.withConfig({
+import styled, { css } from "styled-components";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+import { FontStyle } from "../FontStyle";
+export const StyledChoose = styled.button.withConfig({
   displayName: "Styles__StyledChoose",
   componentId: "sc-1j2qv02-0"
 })(["", " ", " ", " ", " height:32px;padding:0 16px;transition:all 0.3s ease;border:1px solid var(--border-primary);font-size:13px;transition-duration:0.3s;&:hover{", " box-shadow:inset 0 0 5px 3px var(--color-primary-300);}", ""], {
@@ -27,9 +19,9 @@ const StyledChoose = exports.StyledChoose = _styledComponents.default.button.wit
   "borderRadius": "0.5rem",
   "textAlign": "center",
   "color": "var(--color-theme-700)"
-}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
+}, FontStyle, BoxSizingStyle, {
   "borderColor": "var(--color-primary)"
-}, props => props.active && (0, _styledComponents.css)(["", " background-color:var(--color-primary-300);"], {
+}, props => props.active && css(["", " background-color:var(--color-primary-300);"], {
   "zIndex": "0",
   "borderColor": "var(--color-primary)"
 }));

package/dist/esm/components/Choose/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledChoose","exports","styled","button","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","active","css"],"sources":["../../../../src/components/Choose/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { IChooseProps } from \"./Choose\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledChoose = styled.button<IChooseProps>`\n  ${tw`tw-antialiased tw-align-middle tw-font-medium tw-inline-block tw-leading-none tw-m-0 tw-no-underline`}\n  ${tw`tw-select-none tw-cursor-pointer tw-text-center tw-rounded-lg tw-text-theme-700`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n  height: 32px;\n  padding: 0 16px;\n  transition: all 0.3s ease;\n  border: 1px solid var(--border-primary);\n  font-size: 13px;\n  transition-duration: 0.3s;\n  &:hover {\n    ${tw`tw-border-primary`}\n    box-shadow: inset 0 0 5px 3px var(--color-primary-300);\n  }\n  ${(props) =>\n    props.active &&\n    css`\n      ${tw`tw-border-primary tw-z-0`}\n      background-color: var(--color-primary-300);\n    `}\n`;\n\nStyledChoose.displayName = \"StyledChoose\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAyC,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAElC,MAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wOACnC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAqG,CAAC,EACtG;EAAA;EAAA;EAAA;EAAA;EAAA;AAAgF,CAAC,EACnFC,oBAAS,EACTC,8BAAc,EAQV;EAAA;AAAkB,CAAC,EAGtBC,KAAK,IACNA,KAAK,CAACC,MAAM,QACZC,qBAAG,uDACG;EAAA;EAAA;AAAyB,CAAC,CAE/B,CACJ;AAEDX,YAAY,CAACK,WAAW,GAAG,cAAc"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledChoose","button","withConfig","displayName","componentId","props","active"],"sources":["../../../../src/components/Choose/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { IChooseProps } from \"./Choose\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledChoose = styled.button<IChooseProps>`\n  ${tw`tw-antialiased tw-align-middle tw-font-medium tw-inline-block tw-leading-none tw-m-0 tw-no-underline`}\n  ${tw`tw-select-none tw-cursor-pointer tw-text-center tw-rounded-lg tw-text-theme-700`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n  height: 32px;\n  padding: 0 16px;\n  transition: all 0.3s ease;\n  border: 1px solid var(--border-primary);\n  font-size: 13px;\n  transition-duration: 0.3s;\n  &:hover {\n    ${tw`tw-border-primary`}\n    box-shadow: inset 0 0 5px 3px var(--color-primary-300);\n  }\n  ${(props) =>\n    props.active &&\n    css`\n      ${tw`tw-border-primary tw-z-0`}\n      background-color: var(--color-primary-300);\n    `}\n`;\n\nStyledChoose.displayName = \"StyledChoose\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,YAAY,GAAGJ,MAAM,CAACK,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wOACnC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAqG,CAAC,EACtG;EAAA;EAAA;EAAA;EAAA;EAAA;AAAgF,CAAC,EACnFL,SAAS,EACTD,cAAc,EAQV;EAAA;AAAkB,CAAC,EAGtBO,KAAK,IACNA,KAAK,CAACC,MAAM,IACZT,GAAG,sDACG;EAAA;EAAA;AAAyB,CAAC,CAE/B,CACJ;AAEDG,YAAY,CAACG,WAAW,GAAG,cAAc"}

package/dist/esm/components/Choose/index.js

@@ -1,17 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Choose = require("./Choose");
-Object.keys(_Choose).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Choose[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Choose[key];
-    }
-  });
-});
+export * from "./Choose";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Choose/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Choose","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/Choose/index.ts"],"sourcesContent":["export * from \"./Choose\";\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Choose/index.ts"],"sourcesContent":["export * from \"./Choose\";\n"],"mappings":"AAAA,cAAc,UAAU"}

package/dist/esm/components/ComboBox/ComboBox.js

@@ -1,39 +1,31 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ComboBox = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRemoveScroll = require("react-remove-scroll");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Styles = require("./Styles");
-var _helpers = require("../../helpers");
-var _ConditionWrapper = require("../../helpers/ConditionWrapper/ConditionWrapper");
-var _useIsFirstRender = require("../../hooks/useIsFirstRender");
-var _useOnClickOutside = require("../../hooks/useOnClickOutside");
-var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
-var _Autocomplete = require("../Autocomplete");
-var _Autocomplete2 = require("../Autocomplete/Autocomplete");
-var _Avatar = require("../Avatar");
-var _Checkbox = require("../Checkbox");
-var _Chip = require("../Chip");
-var _IconButton = require("../IconButton");
-var _InputAdornment = require("../Input/InputAdornment");
-var _Styles2 = require("../Input/Styles");
-var _SpinnerLoader = require("../Loaders/Spinner/SpinnerLoader");
-var _MultiAvatar = require("../MultiAvatar");
-var _Popper = require("../Popper");
-var _RadioButton = require("../RadioButton");
-var _OptionContent = require("../Select/OptionContent/OptionContent");
-var _Trigger = require("../Trigger");
-var _Typography = require("../Typography/Typography");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const ComboBox = _ref => {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _styled from "styled-components";
+import React, { useCallback, useState, useEffect, useRef, useMemo, Fragment } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+import classNames from "classnames";
+import { StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxInput, StyledComboBoxList, StyledChipWrapper } from "./Styles";
+import { Portal } from "../../helpers";
+import { ConditionalWrapper } from "../../helpers/ConditionWrapper/ConditionWrapper";
+import { useIsFirstRender } from "../../hooks/useIsFirstRender";
+import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import useForkRef from "../../utils/useForkRef";
+import { Autocomplete } from "../Autocomplete";
+import { isOptionGroup } from "../Autocomplete/Autocomplete";
+import { Avatar } from "../Avatar";
+import { Checkbox } from "../Checkbox";
+import { Chip } from "../Chip";
+import { IconButton } from "../IconButton";
+import { InputAdornment } from "../Input/InputAdornment";
+import { StyledInput, StyledInputWrapper } from "../Input/Styles";
+import { SpinnerLoader } from "../Loaders/Spinner/SpinnerLoader";
+import { MultiAvatar } from "../MultiAvatar";
+import { Popper } from "../Popper";
+import { RadioButton } from "../RadioButton";
+import { OptionContent } from "../Select/OptionContent/OptionContent";
+import { Trigger } from "../Trigger";
+import { Typography } from "../Typography/Typography";
+export const ComboBox = _ref => {
+  var _comboBoxRef$current2, _comboBoxRef$current3;
   let {
     options = [],
     selected,
@@ -60,13 +52,13 @@ const ComboBox = _ref => {
     defaultValue,
     ...prop
   } = _ref;
-  const selectedName = (0, _react.useMemo)(() => {
+  const selectedName = useMemo(() => {
     let value = "";
     if (!selected) {
       return value;
     }
     options.map(v => {
-      if (v?.options) {
+      if (v != null && v.options) {
         return v.options.find(q => {
           if (q.id === selected) {
             value = q.name;
@@ -82,24 +74,25 @@ const ComboBox = _ref => {
     });
     return value;
   }, [options, selected]);
-  const [value, setValue] = (0, _react.useState)(selectedName);
-  const [focused, setFocused] = (0, _react.useState)(false);
-  const handleOnChange = (0, _react.useCallback)(e => setValue(e.target.value), []);
-  const childNode = (0, _react.useRef)();
-  const elementRef = (0, _react.useRef)(null);
-  const handleRef = (0, _useForkRef.default)(childNode, elementRef);
-  const wrapperRef = (0, _react.useRef)(null);
-  const chipWrapper = (0, _react.useRef)(null);
-  const comboBoxRef = (0, _react.useRef)(null);
-  const [open, setOpen] = (0, _react.useState)(false);
-  const isFirstRender = (0, _useIsFirstRender.useIsFirstRender)();
-  (0, _useOnClickOutside.useOnClickOutside)(wrapperRef, e => {
-    if (e.target && comboBoxRef.current?.contains(e.target)) {
+  const [value, setValue] = useState(selectedName);
+  const [focused, setFocused] = useState(false);
+  const handleOnChange = useCallback(e => setValue(e.target.value), []);
+  const childNode = useRef();
+  const elementRef = useRef(null);
+  const handleRef = useForkRef(childNode, elementRef);
+  const wrapperRef = useRef(null);
+  const chipWrapper = useRef(null);
+  const comboBoxRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const isFirstRender = useIsFirstRender();
+  useOnClickOutside(wrapperRef, e => {
+    var _comboBoxRef$current;
+    if (e.target && (_comboBoxRef$current = comboBoxRef.current) != null && _comboBoxRef$current.contains(e.target)) {
       return;
     }
     setOpen(false);
   });
-  const handleOnKeyDown = (0, _react.useCallback)(e => {
+  const handleOnKeyDown = useCallback(e => {
     if (e.key === "Escape" && open) {
       setOpen(false);
       setValue(selectedName);
@@ -112,25 +105,26 @@ const ComboBox = _ref => {
       setOpen(true);
     }
   }, [focused, open, selectedName, type]);
-  (0, _react.useEffect)(() => {
-    open && childNode?.current?.focus();
-    !open && childNode?.current?.blur();
+  useEffect(() => {
+    var _childNode$current, _childNode$current2;
+    open && (childNode == null || (_childNode$current = childNode.current) == null ? void 0 : _childNode$current.focus());
+    !open && (childNode == null || (_childNode$current2 = childNode.current) == null ? void 0 : _childNode$current2.blur());
   }, [childNode, open]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     setValue(selectedName);
   }, [selectedName]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (!open && !isFirstRender && !focused) {
       if (typeof onClose === "function") {
         onClose();
       }
     }
   }, [focused, isFirstRender, onClose, open]);
-  const emptyAction = (0, _react.useCallback)(v => {
-    handleEmptyAction?.(v);
+  const emptyAction = useCallback(v => {
+    handleEmptyAction == null || handleEmptyAction(v);
     setOpen(false);
   }, [handleEmptyAction]);
-  const handleChange = (0, _react.useCallback)(selectedValue => {
+  const handleChange = useCallback(selectedValue => {
     if (selectedValue !== selected && typeof onChange === "function") {
       onChange(selectedValue);
     }
@@ -138,50 +132,50 @@ const ComboBox = _ref => {
       setOpen(false);
     }
   }, [forceCloseMenu, onChange, selected]);
-  const onOpen = (0, _react.useCallback)(() => {
+  const onOpen = useCallback(() => {
     if (!disabled) {
       setOpen(true);
     }
   }, [disabled]);
-  const handleRenderOption = (0, _react.useCallback)((option, props) => {
+  const handleRenderOption = useCallback((option, props) => {
     if (typeof renderOption === "function") {
       return renderOption(option, props);
     }
     if (type === "multiple") {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OptionContent.OptionContent, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionContent, {
         imageUrl: option.image,
         color: option.color,
         textColor: option.textColor,
         name: option.name
-      }), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
+      }), /*#__PURE__*/React.createElement(Checkbox, props));
     }
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OptionContent.OptionContent, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionContent, {
       imageUrl: option.image,
       color: option.color,
       textColor: option.textColor,
       name: option.name
-    }), /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, props));
+    }), /*#__PURE__*/React.createElement(RadioButton, props));
   }, [type, renderOption]);
-  const handleDeselect = (0, _react.useCallback)(e => {
+  const handleDeselect = useCallback(e => {
     e.stopPropagation();
     if (typeof onDeselect === "function") {
       onDeselect();
     } else if (type === "multiple") {
-      onChange?.([]);
+      onChange == null || onChange([]);
     } else {
-      onChange?.("");
+      onChange == null || onChange("");
     }
-    onClear?.();
+    onClear == null || onClear();
     setOpen(false);
   }, [type, onChange, onClear, onDeselect]);
-  const handleMouseDown = (0, _react.useCallback)(e => {
+  const handleMouseDown = useCallback(e => {
     e.preventDefault();
   }, []);
-  const handleBlur = (0, _react.useCallback)(() => {
+  const handleBlur = useCallback(() => {
     setValue(selectedName);
     setFocused(!focused);
   }, [focused, selectedName]);
-  const renderChipAdornment = (0, _react.useCallback)((option, index) => {
+  const renderChipAdornment = useCallback((option, index) => {
     if (typeof renderChip === "function") {
       return renderChip(option, index);
     }
@@ -196,7 +190,7 @@ const ComboBox = _ref => {
         avatarProps.size = 14;
         break;
     }
-    const leftAdornment = option.image ? /*#__PURE__*/_react.default.createElement(_StyledAvatar, (0, _extends2.default)({
+    const leftAdornment = option.image ? /*#__PURE__*/React.createElement(_StyledAvatar, _extends({
       url: option.image
     }, avatarProps, {
       $_css: {
@@ -224,7 +218,7 @@ const ComboBox = _ref => {
     if (option.color) {
       showOnClose = false;
     }
-    return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
+    return /*#__PURE__*/React.createElement(Chip, {
       className: "c-combo-box-chip",
       leftAdornment: leftAdornment,
       label: option.name,
@@ -236,18 +230,18 @@ const ComboBox = _ref => {
       variant: "Caption 1"
     });
   }, [disabled, onChange, renderChip, selected, size]);
-  const autoSize = (0, _react.useMemo)(() => {
+  const autoSize = useMemo(() => {
     if (type === "multiple" && open && Array.isArray(selected) && selected.length > 1) {
       return "auto";
     }
     return size;
   }, [open, selected, size, type]);
-  const startAdornment = (0, _react.useMemo)(() => {
+  const startAdornment = useMemo(() => {
     if (type === "multiple" && Array.isArray(selected) && selected.length > 0) {
       const elements = [];
       let total = 0;
       options.forEach((option, index) => {
-        const isGrouped = (0, _Autocomplete2.isOptionGroup)(option);
+        const isGrouped = isOptionGroup(option);
         if (selected.includes(option.id) && !isGrouped) {
           total = total + 1;
           elements.push(renderChipAdornment(option, index));
@@ -256,7 +250,7 @@ const ComboBox = _ref => {
           total = total + groupedOptions.length;
           if (groupedOptions.length > 0) {
             groupedOptions.forEach((o, _index) => {
-              elements.push(renderChipAdornment(o, `${index}_${_index}`));
+              elements.push(renderChipAdornment(o, index + "_" + _index));
             });
           }
         }
@@ -265,14 +259,14 @@ const ComboBox = _ref => {
       if (!open && limitChips > 0 && elements.length > limitChips) {
         hidden = elements.splice(limitChips, elements.length - limitChips).length;
       }
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, elements, hidden > 0 && /*#__PURE__*/_react.default.createElement(_StyledTypography, {
+      return /*#__PURE__*/React.createElement(Fragment, null, elements, hidden > 0 && /*#__PURE__*/React.createElement(_StyledTypography, {
         variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1"
-      }, typeof hiddenNumberText === "function" ? hiddenNumberText(hidden) : `+${hidden}`));
+      }, typeof hiddenNumberText === "function" ? hiddenNumberText(hidden) : "+" + hidden));
     }
     if (type === "single" && selected) {
       let optionItem;
       options.forEach(option => {
-        if ((0, _Autocomplete2.isOptionGroup)(option)) {
+        if (isOptionGroup(option)) {
           optionItem = option.options.find(child => child.id === selected);
         } else if (!optionItem && option.id === selected) {
           optionItem = option;
@@ -281,12 +275,12 @@ const ComboBox = _ref => {
       if (optionItem && optionItem.image) {
         const avatarSize = size === "big" ? 22 : size === "regular" ? 18 : 14;
         if (Array.isArray(optionItem.image)) {
-          return /*#__PURE__*/_react.default.createElement(_MultiAvatar.MultiAvatar, {
+          return /*#__PURE__*/React.createElement(MultiAvatar, {
             url: optionItem.image,
             size: avatarSize
           });
         }
-        return /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
+        return /*#__PURE__*/React.createElement(Avatar, {
           url: optionItem.image,
           size: avatarSize
         });
@@ -296,26 +290,27 @@ const ComboBox = _ref => {
   }, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
   const showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
   const hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
-  const showMenu = (0, _react.useMemo)(() => Boolean(options.length || defaultValue || Number(value.length) > 0), [defaultValue, options.length, value]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  const showMenu = useMemo(() => Boolean(options.length || defaultValue || Number(value.length) > 0), [defaultValue, options.length, value]);
+  return /*#__PURE__*/React.createElement("div", {
     className: "c-combo-box"
-  }, type === "multiple" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StyledStyledInputWrapper, {
+  }, type === "multiple" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StyledStyledInputWrapper, {
     $disabled: disabled,
     $size: size,
     $invalid: invalid,
     ref: comboBoxRef,
-    className: (0, _classnames.default)("c-combo-box-input-wrapper", inputWrapperClassName),
+    className: classNames("c-combo-box-input-wrapper", inputWrapperClassName),
     onClick: () => {
-      elementRef.current?.click();
+      var _elementRef$current;
+      (_elementRef$current = elementRef.current) == null || _elementRef$current.click();
     },
     $_css3: autoSize === "auto" ? "auto" : undefined,
     $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
     $_css5: autoSize === "auto" && scrollWrapper ? "80px" : undefined
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledChipWrapper, {
+  }, /*#__PURE__*/React.createElement(StyledChipWrapper, {
     $autoSize: autoSize,
     $open: open,
     ref: chipWrapper
-  }, startAdornment, /*#__PURE__*/_react.default.createElement(_Styles2.StyledInput, {
+  }, startAdornment, /*#__PURE__*/React.createElement(StyledInput, {
     className: "c-combo-box-input",
     onBlur: handleBlur,
     onFocus: () => {
@@ -336,14 +331,14 @@ const ComboBox = _ref => {
       alignSelf: "center",
       width: autoSize === "auto" ? "auto" : "100%"
     }
-  })), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showXIcon && /*#__PURE__*/_react.default.createElement(_StyledTrigger, {
+  })), !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, showXIcon && /*#__PURE__*/React.createElement(_StyledTrigger, {
     onMouseDown: handleMouseDown,
     onClick: handleDeselect,
     "data-testid": "deselect-all"
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)), showMenu && /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
+  }, /*#__PURE__*/React.createElement(StyledComboBoxCloseSmallIcon, null)), showMenu && /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
     $open: open
-  }))))) : /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
-    className: (0, _classnames.default)("c-combo-box-input", inputWrapperClassName),
+  }))))) : /*#__PURE__*/React.createElement(StyledComboBoxInput, {
+    className: classNames("c-combo-box-input", inputWrapperClassName),
     onBlur: handleBlur,
     wrapperClick: onOpen,
     onFocus: () => {
@@ -362,36 +357,36 @@ const ComboBox = _ref => {
     invalid: invalid,
     $loading: loading,
     startAdornment: startAdornment,
-    endAdornment: !disabled ? /*#__PURE__*/_react.default.createElement(_InputAdornment.InputAdornment, {
+    endAdornment: !disabled ? /*#__PURE__*/React.createElement(InputAdornment, {
       disablePointerEvents: disabled
-    }, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : selected ? /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    }, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(IconButton, {
       onMouseDown: handleMouseDown,
       onClick: handleDeselect,
       variant: "text gray",
       size: "small"
-    }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)) : null, showMenu && /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
+    }, /*#__PURE__*/React.createElement(StyledComboBoxCloseSmallIcon, null)) : null, showMenu && /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
       $open: open
     })) : null
-  }), !disabled ? /*#__PURE__*/_react.default.createElement(_ConditionWrapper.ConditionalWrapper, {
+  }), !disabled ? /*#__PURE__*/React.createElement(ConditionalWrapper, {
     condition: inPortal,
-    wrap: children => /*#__PURE__*/_react.default.createElement(_helpers.Portal, null, children)
-  }, /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
+    wrap: children => /*#__PURE__*/React.createElement(Portal, null, children)
+  }, /*#__PURE__*/React.createElement(Popper, {
     anchorEl: comboBoxRef.current,
     open: open,
     placement: "bottom",
     style: {
       zIndex: 10,
-      width: comboBoxRef.current?.clientWidth
+      width: (_comboBoxRef$current2 = comboBoxRef.current) == null ? void 0 : _comboBoxRef$current2.clientWidth
     },
     ref: wrapperRef,
     strategy: "fixed"
-  }, /*#__PURE__*/_react.default.createElement(_reactRemoveScroll.RemoveScroll, {
+  }, /*#__PURE__*/React.createElement(RemoveScroll, {
     noIsolation: true,
     allowPinchZoom: true
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxList, {
-    $width: comboBoxRef.current?.clientWidth,
+  }, /*#__PURE__*/React.createElement(StyledComboBoxList, {
+    $width: (_comboBoxRef$current3 = comboBoxRef.current) == null ? void 0 : _comboBoxRef$current3.clientWidth,
     $hide: !showMenu
-  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, (0, _extends2.default)({}, prop, {
+  }, /*#__PURE__*/React.createElement(Autocomplete, _extends({}, prop, {
     inputEl: childNode,
     selected: selected,
     handleChange: handleChange,
@@ -402,21 +397,20 @@ const ComboBox = _ref => {
     handleEmptyAction: emptyAction
   })))))) : null);
 };
-exports.ComboBox = ComboBox;
 ComboBox.displayName = "ComboBox";
-var _StyledAvatar = (0, _styledComponents.default)(_Avatar.Avatar).withConfig({
+var _StyledAvatar = _styled(Avatar).withConfig({
   displayName: "ComboBox___StyledAvatar",
   componentId: "sc-uvsz9l-0"
 })(["", " ", ""], p => p.$_css, p => p.$_css2);
-var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).withConfig({
+var _StyledTypography = _styled(Typography).withConfig({
   displayName: "ComboBox___StyledTypography",
   componentId: "sc-uvsz9l-1"
 })(["display:flex;flex-shrink:0;align-items:center;"]);
-var _StyledStyledInputWrapper = (0, _styledComponents.default)(_Styles2.StyledInputWrapper).withConfig({
+var _StyledStyledInputWrapper = _styled(StyledInputWrapper).withConfig({
   displayName: "ComboBox___StyledStyledInputWrapper",
   componentId: "sc-uvsz9l-2"
 })(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], p => p.$_css3, p => p.$_css4, p => p.$_css5);
-var _StyledTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
+var _StyledTrigger = _styled(Trigger).withConfig({
   displayName: "ComboBox___StyledTrigger",
   componentId: "sc-uvsz9l-3"
 })(["display:flex;justify-content:center;"]);