@rocket.chat/fuselage 0.6.3-dev.442 → 0.6.3-dev.443

package/dist/fuselage.development.js

@@ -45,36 +45,6 @@ module.exports = _arrayWithHoles;
 
 /***/ }),
 
-/***/ "../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js":
-/*!**********************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js ***!
-  \**********************************************************************/
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-var arrayLikeToArray = __webpack_require__(/*! ./arrayLikeToArray */ "../../node_modules/@babel/runtime/helpers/arrayLikeToArray.js");
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return arrayLikeToArray(arr);
-}
-
-module.exports = _arrayWithoutHoles;
-
-/***/ }),
-
-/***/ "../../node_modules/@babel/runtime/helpers/iterableToArray.js":
-/*!********************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/iterableToArray.js ***!
-  \********************************************************************/
-/***/ (function(module) {
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-module.exports = _iterableToArray;
-
-/***/ }),
-
 /***/ "../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js":
 /*!*************************************************************************!*\
   !*** ../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js ***!
@@ -126,20 +96,6 @@ module.exports = _nonIterableRest;
 
 /***/ }),
 
-/***/ "../../node_modules/@babel/runtime/helpers/nonIterableSpread.js":
-/*!**********************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/nonIterableSpread.js ***!
-  \**********************************************************************/
-/***/ (function(module) {
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableSpread;
-
-/***/ }),
-
 /***/ "../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js":
 /*!****************************************************************************!*\
   !*** ../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js ***!
@@ -240,28 +196,6 @@ module.exports = _taggedTemplateLiteral;
 
 /***/ }),
 
-/***/ "../../node_modules/@babel/runtime/helpers/toConsumableArray.js":
-/*!**********************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/toConsumableArray.js ***!
-  \**********************************************************************/
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-var arrayWithoutHoles = __webpack_require__(/*! ./arrayWithoutHoles */ "../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js");
-
-var iterableToArray = __webpack_require__(/*! ./iterableToArray */ "../../node_modules/@babel/runtime/helpers/iterableToArray.js");
-
-var unsupportedIterableToArray = __webpack_require__(/*! ./unsupportedIterableToArray */ "../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");
-
-var nonIterableSpread = __webpack_require__(/*! ./nonIterableSpread */ "../../node_modules/@babel/runtime/helpers/nonIterableSpread.js");
-
-function _toConsumableArray(arr) {
-  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
-}
-
-module.exports = _toConsumableArray;
-
-/***/ }),
-
 /***/ "../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js":
 /*!*******************************************************************************!*\
   !*** ../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js ***!
@@ -3804,438 +3738,6 @@ var withBoxStyling = function withBoxStyling(component) {
 
 /***/ }),
 
-/***/ "./src/components/MultiSelect/MultiSelect.js":
-/*!***************************************************!*\
-  !*** ./src/components/MultiSelect/MultiSelect.js ***!
-  \***************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "MultiSelect": function() { return /* binding */ MultiSelect; }
-/* harmony export */ });
-/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "../../node_modules/@babel/runtime/helpers/toConsumableArray.js");
-/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../node_modules/@babel/runtime/helpers/slicedToArray.js");
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _helpers_isForwardRefType__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../helpers/isForwardRefType */ "./src/helpers/isForwardRefType.ts");
-/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
-/* harmony import */ var _Flex__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
-/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
-/* harmony import */ var _Select_SelectAddon__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx");
-/* harmony import */ var _MultiSelectAnchor__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./MultiSelectAnchor */ "./src/components/MultiSelect/MultiSelectAnchor.tsx");
-
-
-
-var _excluded = ["value", "filter", "options", "error", "disabled", "anchor", "onChange", "getLabel", "getValue", "placeholder", "renderOptions", "customEmpty", "onSelect"];
-
-var _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/packages/fuselage/src/components/MultiSelect/MultiSelect.js",
-    _this = undefined;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var SelectedOptions = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.memo)(function (props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_8__["default"], Object.assign({}, props, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 16,
-      columnNumber: 41
-    }
-  }));
-});
-
-var prevent = function prevent(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  e.nativeEvent.stopImmediatePropagation();
-};
-
-var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)(function MultiSelect(_ref, ref) {
-  var _this2 = this;
-
-  var value = _ref.value,
-      filter = _ref.filter,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      error = _ref.error,
-      disabled = _ref.disabled,
-      _ref$anchor = _ref.anchor,
-      Anchor = _ref$anchor === void 0 ? _MultiSelectAnchor__WEBPACK_IMPORTED_MODULE_15__["default"] : _ref$anchor,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$getLabel = _ref.getLabel,
-      getLabel = _ref$getLabel === void 0 ? function () {
-    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [],
-        _ref3 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_ref2, 2),
-        label = _ref3[1];
-
-    return label;
-  } : _ref$getLabel,
-      _ref$getValue = _ref.getValue,
-      getValue = _ref$getValue === void 0 ? function (_ref4) {
-    var _ref5 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_ref4, 1),
-        value = _ref5[0];
-
-    return value;
-  } : _ref$getValue,
-      placeholder = _ref.placeholder,
-      _ref$renderOptions = _ref.renderOptions,
-      _Options = _ref$renderOptions === void 0 ? _Options__WEBPACK_IMPORTED_MODULE_12__.Options : _ref$renderOptions,
-      customEmpty = _ref.customEmpty,
-      onSelect = _ref.onSelect,
-      props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(_ref, _excluded);
-
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(value || []),
-      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
-      internalValue = _useState2[0],
-      setInternalValue = _useState2[1];
-
-  var option = options.find(function (option) {
-    return getValue(option) === internalValue;
-  });
-  var index = options.indexOf(option);
-
-  var internalChanged = function internalChanged(_ref6) {
-    var _ref7 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_ref6, 1),
-        value = _ref7[0];
-
-    if (internalValue.includes(value)) {
-      var _newValue = internalValue.filter(function (item) {
-        return item !== value;
-      });
-
-      setInternalValue(_newValue);
-      return onChange(_newValue);
-    }
-
-    var newValue = [].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(internalValue), [value]);
-    setInternalValue(newValue);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect();
-    return onChange(newValue);
-  };
-
-  var mapOptions = function mapOptions(_ref8) {
-    var _ref9 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_ref8, 2),
-        value = _ref9[0],
-        label = _ref9[1];
-
-    if (internalValue.includes(value)) {
-      return [value, label, true];
-    }
-
-    return [value, label];
-  };
-
-  var applyFilter = function applyFilter(_ref10) {
-    var _ref11 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_ref10, 2),
-        option = _ref11[1];
-
-    return !filter || ~option.toLowerCase().indexOf(filter.toLowerCase());
-  };
-
-  var filteredOptions = options.filter(applyFilter).map(mapOptions);
-
-  var _useCursor = (0,_Options__WEBPACK_IMPORTED_MODULE_12__.useCursor)(index, filteredOptions, internalChanged),
-      _useCursor2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useCursor, 5),
-      cursor = _useCursor2[0],
-      handleKeyDown = _useCursor2[1],
-      handleKeyUp = _useCursor2[2],
-      reset = _useCursor2[3],
-      _useCursor2$ = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useCursor2[4], 3),
-      visible = _useCursor2$[0],
-      hide = _useCursor2$[1],
-      show = _useCursor2$[2];
-
-  (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(reset, [filter]);
-  var innerRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();
-  var anchorRef = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_3__.useMergedRefs)(ref, innerRef);
-
-  var _useResizeObserver = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_3__.useResizeObserver)(),
-      containerRef = _useResizeObserver.ref,
-      borderBoxSize = _useResizeObserver.borderBoxSize;
-
-  var handleClick = function handleClick() {
-    var _innerRef$current;
-
-    (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
-    return visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_6__["default"].VISIBLE ? hide() : show();
-  };
-
-  var handleAddonClick = function handleAddonClick(e) {
-    e.stopPropagation();
-    return visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_6__["default"].VISIBLE ? hide() : show();
-  };
-
-  var renderAnchor = (0,_helpers_isForwardRefType__WEBPACK_IMPORTED_MODULE_5__.isForwardRefType)(Anchor) ? function (params) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(Anchor, Object.assign({}, params, {
-      __self: _this2,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 90,
-        columnNumber: 19
-      }
-    }));
-  } : Anchor;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_7__.Box, Object.assign({
-    is: "div",
-    "rcx-select": true,
-    className: [error && 'invalid', disabled && 'disabled'],
-    ref: containerRef,
-    onClick: handleClick,
-    disabled: disabled
-  }, props, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 94,
-      columnNumber: 5
-    }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_9__["default"].Item, {
-    grow: 1,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 103,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_11__["default"], {
-    inline: "x4",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 104,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_9__["default"].Container, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 105,
-      columnNumber: 11
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_7__.Box, {
-    is: "div",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 106,
-      columnNumber: 13
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_7__.Box, {
-    is: "div",
-    display: "flex",
-    alignItems: "center",
-    flexWrap: "wrap",
-    margin: "-x8",
-    role: "listbox",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 107,
-      columnNumber: 15
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_11__["default"], {
-    all: "x4",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 115,
-      columnNumber: 17
-    }
-  }, renderAnchor({
-    ref: anchorRef,
-    children: !value ? option || placeholder : null,
-    disabled: disabled,
-    onClick: show,
-    onBlur: hide,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp
-  }), internalValue.map(function (value) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(SelectedOptions, {
-      tabIndex: -1,
-      role: "option",
-      key: value,
-      onMouseDown: function onMouseDown(e) {
-        return prevent(e) & internalChanged([value]) && false;
-      },
-      children: getLabel(options.find(function (_ref12) {
-        var _ref13 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_ref12, 1),
-            val = _ref13[0];
-
-        return val === value;
-      })),
-      __self: _this2,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 126,
-        columnNumber: 21
-      }
-    });
-  }))))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_9__["default"].Item, {
-    grow: 0,
-    shrink: 0,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 144,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_11__["default"], {
-    inline: "x4",
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 145,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Select_SelectAddon__WEBPACK_IMPORTED_MODULE_14__["default"], {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 146,
-      columnNumber: 11
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_10__.Icon, {
-    name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_6__["default"].VISIBLE ? 'cross' : 'chevron-down',
-    size: "x20",
-    onClick: handleAddonClick,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 147,
-      columnNumber: 13
-    }
-  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    visibility: visible,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 159,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Position__WEBPACK_IMPORTED_MODULE_13__["default"], {
-    anchor: containerRef,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 160,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Options, {
-    width: borderBoxSize.inlineSize,
-    onMouseDown: prevent,
-    multiple: true,
-    filter: filter,
-    renderItem: _Options__WEBPACK_IMPORTED_MODULE_12__.CheckOption,
-    role: "listbox",
-    options: filteredOptions,
-    onSelect: internalChanged,
-    cursor: cursor,
-    customEmpty: customEmpty,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 161,
-      columnNumber: 11
-    }
-  }))));
-});
-
-/***/ }),
-
-/***/ "./src/components/MultiSelect/MultiSelectFiltered.js":
-/*!***********************************************************!*\
-  !*** ./src/components/MultiSelect/MultiSelectFiltered.js ***!
-  \***********************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "MultiSelectFiltered": function() { return /* binding */ MultiSelectFiltered; }
-/* harmony export */ });
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../node_modules/@babel/runtime/helpers/slicedToArray.js");
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/MultiSelect.js");
-/* harmony import */ var _MultiSelectFilteredAnchor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./MultiSelectFilteredAnchor */ "./src/components/MultiSelect/MultiSelectFilteredAnchor.tsx");
-
-
-var _excluded = ["placeholder"];
-
-var _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/packages/fuselage/src/components/MultiSelect/MultiSelectFiltered.js",
-    _this = undefined;
-
-
-
-
-var MultiSelectFiltered = function MultiSelectFiltered(_ref) {
-  var placeholder = _ref.placeholder,
-      props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, _excluded);
-
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(''),
-      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
-
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_MultiSelect__WEBPACK_IMPORTED_MODULE_3__.MultiSelect, Object.assign({
-    filter: filter
-  }, props, {
-    anchor: function anchor(params) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_MultiSelectFilteredAnchor__WEBPACK_IMPORTED_MODULE_4__["default"], Object.assign({
-        placeholder: placeholder,
-        filter: filter,
-        onChangeFilter: setFilter
-      }, params, {
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 14,
-          columnNumber: 9
-        }
-      }));
-    },
-    onSelect: function onSelect() {
-      return setFilter('');
-    },
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 10,
-      columnNumber: 5
-    }
-  }));
-};
-
-/***/ }),
-
 /***/ "../memo/dist/esm/index.js":
 /*!*********************************!*\
   !*** ../memo/dist/esm/index.js ***!
@@ -10986,6 +10488,195 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./src/components/MultiSelect/MultiSelect.tsx":
+/*!****************************************************!*\
+  !*** ./src/components/MultiSelect/MultiSelect.tsx ***!
+  \****************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MultiSelect": function() { return /* binding */ MultiSelect; }
+/* harmony export */ });
+/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
+/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _helpers_isForwardRefType__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../helpers/isForwardRefType */ "./src/helpers/isForwardRefType.ts");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Flex__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
+/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
+/* harmony import */ var _Select_SelectAddon__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx");
+/* harmony import */ var _MultiSelectAnchor__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./MultiSelectAnchor */ "./src/components/MultiSelect/MultiSelectAnchor.tsx");
+/* harmony import */ var _SelectedOptions__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./SelectedOptions */ "./src/components/MultiSelect/SelectedOptions.tsx");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (undefined && undefined.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+var prevent = function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+};
+var MultiSelect = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref) {
+    var value = _a.value, filter = _a.filter, _b = _a.options, options = _b === void 0 ? [] : _b, error = _a.error, disabled = _a.disabled, _c = _a.anchor, Anchor = _c === void 0 ? _MultiSelectAnchor__WEBPACK_IMPORTED_MODULE_11__["default"] : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.getLabel, getLabel = _e === void 0 ? function (_a) {
+        var _b = _a === void 0 ? ['', ''] : _a, _c = __read(_b, 2), label = _c[1];
+        return label;
+    } : _e, _f = _a.getValue, getValue = _f === void 0 ? function (_a) {
+        var _b = __read(_a, 1), value = _b[0];
+        return value;
+    } : _f, placeholder = _a.placeholder, _g = _a.renderOptions, _Options = _g === void 0 ? _Options__WEBPACK_IMPORTED_MODULE_8__.Options : _g, renderItem = _a.renderItem, customEmpty = _a.customEmpty, RenderSelected = _a.renderSelected, addonIcon = _a.addonIcon, props = __rest(_a, ["value", "filter", "options", "error", "disabled", "anchor", "onChange", "getLabel", "getValue", "placeholder", "renderOptions", "renderItem", "customEmpty", "renderSelected", "addonIcon"]);
+    var _h = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value || []), 2), internalValue = _h[0], setInternalValue = _h[1];
+    var _j = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(), 2), currentOptionValue = _j[0], setCurrentOption = _j[1];
+    var option = options.find(function (option) { return getValue(option) === currentOptionValue; });
+    var index = options.findIndex(function (option) { return getValue(option) === currentOptionValue; });
+    var internalChanged = function (_a) {
+        var _b = __read(_a, 1), value = _b[0];
+        if (internalValue.includes(value)) {
+            setCurrentOption(undefined);
+            var newValue_1 = internalValue.filter(function (item) { return item !== value; });
+            setInternalValue(newValue_1);
+            return onChange(newValue_1);
+        }
+        setCurrentOption(value);
+        var newValue = __spreadArray(__spreadArray([], __read(internalValue)), [value]);
+        setInternalValue(newValue);
+        return onChange(newValue);
+    };
+    var mapOptions = function (_a) {
+        var _b = __read(_a, 2), value = _b[0], label = _b[1];
+        if (internalValue.includes(value)) {
+            return [value, label, true];
+        }
+        return [value, label];
+    };
+    var applyFilter = function (_a) {
+        var _b = __read(_a, 2), option = _b[1];
+        return !filter || option.toLowerCase().includes(filter.toLowerCase());
+    };
+    var filteredOptions = options
+        .filter(applyFilter)
+        .map(mapOptions);
+    var _k = __read((0,_Options__WEBPACK_IMPORTED_MODULE_8__.useCursor)(index, filteredOptions, internalChanged), 5), cursor = _k[0], handleKeyDown = _k[1], handleKeyUp = _k[2], reset = _k[3], _l = __read(_k[4], 3), visible = _l[0], hide = _l[1], show = _l[2];
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(reset, [filter]);
+    var innerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    var anchorRef = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMergedRefs)(ref, innerRef);
+    var _m = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _m.ref, borderBoxSize = _m.borderBoxSize;
+    var renderAnchor = function (params) {
+        if ((0,_helpers_isForwardRefType__WEBPACK_IMPORTED_MODULE_2__.isForwardRefType)(Anchor)) {
+            return react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Anchor, __assign({}, params));
+        }
+        if (typeof Anchor === 'function') {
+            return Anchor(params);
+        }
+        return null;
+    };
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, __assign({ is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () {
+            var _a;
+            if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].VISIBLE) {
+                return hide();
+            }
+            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return show();
+        }), disabled: disabled }, props),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_5__["default"].Item, { grow: 1 },
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_7__["default"], { inline: 'x4' },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_5__["default"].Container, null,
+                    react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, { is: 'div' },
+                        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox' },
+                            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_7__["default"], { all: 'x4' },
+                                renderAnchor({
+                                    ref: anchorRef,
+                                    children: !value ? option || placeholder : null,
+                                    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+                                    onClick: show,
+                                    onBlur: hide,
+                                    onKeyDown: handleKeyDown,
+                                    onKeyUp: handleKeyUp,
+                                }),
+                                internalValue.map(function (value) {
+                                    var currentOption = options.find(function (_a) {
+                                        var _b = __read(_a, 1), val = _b[0];
+                                        return val === value;
+                                    });
+                                    return RenderSelected ? (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RenderSelected, { role: 'option', value: value, key: value, label: getLabel(currentOption), onMouseDown: function (e) {
+                                            prevent(e);
+                                            internalChanged(currentOption);
+                                        }, children: getLabel(currentOption) })) : (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_SelectedOptions__WEBPACK_IMPORTED_MODULE_12__.SelectedOptions, { tabIndex: -1, role: 'option', key: String(value), onMouseDown: function (e) {
+                                            prevent(e);
+                                            internalChanged(currentOption);
+                                        }, children: getLabel(currentOption) }));
+                                }))))))),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_5__["default"].Item, { grow: 0, shrink: 0 },
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_7__["default"], { inline: 'x4' },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Select_SelectAddon__WEBPACK_IMPORTED_MODULE_10__["default"], { children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_6__.Icon, { name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].VISIBLE
+                            ? 'cross'
+                            : addonIcon || 'chevron-down', size: 'x20' }) }))),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"], { visibility: visible },
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Position__WEBPACK_IMPORTED_MODULE_9__["default"], { anchor: containerRef },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options, { width: borderBoxSize.inlineSize, onMouseDown: prevent, multiple: true, filter: filter, renderItem: renderItem || _Options__WEBPACK_IMPORTED_MODULE_8__.CheckOption, role: 'listbox', options: filteredOptions, onSelect: internalChanged, cursor: cursor, customEmpty: customEmpty })))));
+});
+
+
 /***/ }),
 
 /***/ "./src/components/MultiSelect/MultiSelectAnchor.tsx":
@@ -11018,6 +10709,71 @@ var MultiSelectAnchor = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(functi
 /* harmony default export */ __webpack_exports__["default"] = (MultiSelectAnchor);
 
 
+/***/ }),
+
+/***/ "./src/components/MultiSelect/MultiSelectFiltered.tsx":
+/*!************************************************************!*\
+  !*** ./src/components/MultiSelect/MultiSelectFiltered.tsx ***!
+  \************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MultiSelectFiltered": function() { return /* binding */ MultiSelectFiltered; }
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/MultiSelect.tsx");
+/* harmony import */ var _MultiSelectFilteredAnchor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./MultiSelectFilteredAnchor */ "./src/components/MultiSelect/MultiSelectFilteredAnchor.tsx");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (undefined && undefined.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+
+
+
+var MultiSelectFiltered = function (_a) {
+    var options = _a.options, placeholder = _a.placeholder, propFilter = _a.filter, propSetFilter = _a.setFilter, props = __rest(_a, ["options", "placeholder", "filter", "setFilter"]);
+    var _b = __read((0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''), 2), filter = _b[0], setFilter = _b[1];
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiSelect__WEBPACK_IMPORTED_MODULE_1__.MultiSelect, __assign({}, props, { filter: filter, options: options, anchor: function (params) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiSelectFilteredAnchor__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ placeholder: placeholder, filter: filter, onChangeFilter: setFilter }, params))); } })));
+};
+
+
 /***/ }),
 
 /***/ "./src/components/MultiSelect/MultiSelectFilteredAnchor.tsx":
@@ -11067,6 +10823,38 @@ var MultiSelectFilteredAnchor = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef
 /* harmony default export */ __webpack_exports__["default"] = (MultiSelectFilteredAnchor);
 
 
+/***/ }),
+
+/***/ "./src/components/MultiSelect/SelectedOptions.tsx":
+/*!********************************************************!*\
+  !*** ./src/components/MultiSelect/SelectedOptions.tsx ***!
+  \********************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "SelectedOptions": function() { return /* binding */ SelectedOptions; }
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+
+var SelectedOptions = (0,react__WEBPACK_IMPORTED_MODULE_0__.memo)(function (props) { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({}, props)); });
+
+
 /***/ }),
 
 /***/ "./src/components/MultiSelect/index.ts":
@@ -11081,8 +10869,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "MultiSelect": function() { return /* reexport safe */ _MultiSelect__WEBPACK_IMPORTED_MODULE_0__.MultiSelect; },
 /* harmony export */   "MultiSelectFiltered": function() { return /* reexport safe */ _MultiSelectFiltered__WEBPACK_IMPORTED_MODULE_1__.MultiSelectFiltered; }
 /* harmony export */ });
-/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/MultiSelect.js");
-/* harmony import */ var _MultiSelectFiltered__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MultiSelectFiltered */ "./src/components/MultiSelect/MultiSelectFiltered.js");
+/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/MultiSelect.tsx");
+/* harmony import */ var _MultiSelectFiltered__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MultiSelectFiltered */ "./src/components/MultiSelect/MultiSelectFiltered.tsx");
 
 
 
@@ -11824,8 +11612,7 @@ var useCursor = function (initial, options, onChange) {
     var reset = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setCursor(0); });
     var handleKeyUp = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (e) {
         var keyCode = e.keyCode;
-        if (_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN === visibility &&
-            keyCode === keyCodes.TAB) {
+        if (_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN === visibility && keyCode === keyCodes.TAB) {
             return show();
         }
     });
@@ -11892,7 +11679,7 @@ var useCursor = function (initial, options, onChange) {
                             return false;
                         }
                         var _a = __read(option, 2), label = _a[1];
-                        return (typeof label === 'string' && label[0].toLowerCase() === key);
+                        return typeof label === 'string' && label[0].toLowerCase() === key;
                     });
                     ~index && setCursor(index);
                 }
@@ -12782,14 +12569,14 @@ var useDidUpdate = function (func, deps) {
     }, deps || []);
 };
 var Select = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref) {
-    var value = _a.value, filter = _a.filter, error = _a.error, disabled = _a.disabled, options = _a.options, _b = _a.anchor, Anchor = _b === void 0 ? _SelectFocus__WEBPACK_IMPORTED_MODULE_9__["default"] : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.getValue, getValue = _d === void 0 ? function (_a) {
+    var value = _a.value, filter = _a.filter, error = _a.error, disabled = _a.disabled, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.anchor, Anchor = _c === void 0 ? _SelectFocus__WEBPACK_IMPORTED_MODULE_9__["default"] : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.getValue, getValue = _e === void 0 ? function (_a) {
         var _b = _a === void 0 ? ['', ''] : _a, _c = __read(_b, 1), value = _c[0];
         return value;
-    } : _d, _e = _a.getLabel, getLabel = _e === void 0 ? function (_a) {
+    } : _e, _f = _a.getLabel, getLabel = _f === void 0 ? function (_a) {
         var _b = _a === void 0 ? ['', ''] : _a, _c = __read(_b, 2), _ = _c[0], label = _c[1];
         return label;
-    } : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.renderOptions, _Options = _g === void 0 ? _Options__WEBPACK_IMPORTED_MODULE_6__.Options : _g, addonIcon = _a.addonIcon, customEmpty = _a.customEmpty, props = __rest(_a, ["value", "filter", "error", "disabled", "options", "anchor", "onChange", "getValue", "getLabel", "placeholder", "renderOptions", "addonIcon", "customEmpty"]);
-    var _h = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value), 2), internalValue = _h[0], setInternalValue = _h[1];
+    } : _f, _g = _a.placeholder, placeholder = _g === void 0 ? '' : _g, renderItem = _a.renderItem, RenderSelected = _a.renderSelected, _h = _a.renderOptions, _Options = _h === void 0 ? _Options__WEBPACK_IMPORTED_MODULE_6__.Options : _h, addonIcon = _a.addonIcon, customEmpty = _a.customEmpty, props = __rest(_a, ["value", "filter", "error", "disabled", "options", "anchor", "onChange", "getValue", "getLabel", "placeholder", "renderItem", "renderSelected", "renderOptions", "addonIcon", "customEmpty"]);
+    var _j = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value || ''), 2), internalValue = _j[0], setInternalValue = _j[1];
     var internalChangedByKeyboard = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
@@ -12811,7 +12598,7 @@ var Select = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref
         };
         return options.filter(applyFilter).map(mapOptions);
     }, [options, internalValue, filter]);
-    var _j = __read((0,_Options__WEBPACK_IMPORTED_MODULE_6__.useCursor)(index, filteredOptions, internalChangedByKeyboard), 5), cursor = _j[0], handleKeyDown = _j[1], handleKeyUp = _j[2], reset = _j[3], _k = __read(_j[4], 3), visible = _k[0], hide = _k[1], show = _k[2];
+    var _k = __read((0,_Options__WEBPACK_IMPORTED_MODULE_6__.useCursor)(index, filteredOptions, internalChangedByKeyboard), 5), cursor = _k[0], handleKeyDown = _k[1], handleKeyUp = _k[2], reset = _k[3], _l = __read(_k[4], 3), visible = _l[0], hide = _l[1], show = _l[2];
     var internalChangedByClick = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
@@ -12820,7 +12607,7 @@ var Select = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref
     });
     var innerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
     var anchorRef = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMergedRefs)(ref, innerRef);
-    var _l = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _l.ref, borderBoxSize = _l.borderBoxSize;
+    var _m = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _m.ref, borderBoxSize = _m.borderBoxSize;
     useDidUpdate(reset, [filter, internalValue]);
     var valueLabel = getLabel(option);
     var visibleText = (filter === undefined || visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN) &&
@@ -12835,14 +12622,15 @@ var Select = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref
     });
     return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return [error && 'invalid', disabled && 'disabled']; }, [error, disabled]) }, props),
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Wrapper, { display: 'flex', mi: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText },
-            visibleText && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, { flexGrow: 1, is: 'span', mi: 'x4', "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint' }, visibleText)),
+            visibleText &&
+                (RenderSelected ? (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, key: getValue(option) })) : (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, { flexGrow: 1, is: 'span', mi: 'x4', "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint' }, visibleText))),
             react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: anchorRef, "aria-haspopup": 'listbox', onClick: show, onBlur: hide, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }),
             react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_5__["default"], { inline: 'x4' },
                 react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_SelectAddon__WEBPACK_IMPORTED_MODULE_8__["default"], { children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_4__.Icon, { name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE
                             ? 'cross'
                             : addonIcon || 'chevron-down', size: 'x20' }) }))),
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_PositionAnimated__WEBPACK_IMPORTED_MODULE_7__["default"], { visible: visible, anchor: containerRef },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options, { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: filteredOptions, onSelect: internalChangedByClick, cursor: cursor, customEmpty: customEmpty }))));
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options, { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: filteredOptions, onSelect: internalChangedByClick, renderItem: renderItem, cursor: cursor, customEmpty: customEmpty }))));
 });
 
 
@@ -12940,12 +12728,14 @@ var __read = (undefined && undefined.__read) || function (o, n) {
 
 
 var SelectFiltered = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref) {
-    var options = _a.options, placeholder = _a.placeholder, props = __rest(_a, ["options", "placeholder"]);
+    var options = _a.options, placeholder = _a.placeholder, propFilter = _a.filter, propSetFilter = _a.setFilter, props = __rest(_a, ["options", "placeholder", "filter", "setFilter"]);
     var _b = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), 2), filter = _b[0], setFilter = _b[1];
     var anchor = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref) {
         var children = _a.children, filter = _a.filter, props = __rest(_a, ["children", "filter"]);
-        return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_3__.InputBox.Input, __assign({ mi: 'x4', flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onChange: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (e) {
-                return setFilter(e.currentTarget.value);
+        return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_3__.InputBox.Input, __assign({ mi: 'x4', flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: propFilter || filter, onChange: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (e) {
+                return propSetFilter
+                    ? propSetFilter(e.currentTarget.value)
+                    : setFilter(e.currentTarget.value);
             }) }, props, { "rcx-input-box--undecorated": true })));
     }), []);
     return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(___WEBPACK_IMPORTED_MODULE_2__.Select, __assign({ ref: ref, placeholder: placeholder, filter: filter, options: options }, props, { anchor: anchor })));