@rocket.chat/fuselage 0.31.6-dev.1 → 0.31.6

package/dist/fuselage.development.js

@@ -11862,21 +11862,34 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./src/components/Pagination/Pagination.tsx":
-/*!**************************************************!*\
-  !*** ./src/components/Pagination/Pagination.tsx ***!
-  \**************************************************/
+/***/ "./src/components/PaginatedSelect/PaginatedMultiSelect.tsx":
+/*!*****************************************************************!*\
+  !*** ./src/components/PaginatedSelect/PaginatedMultiSelect.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 */   "Pagination": function() { return /* binding */ Pagination; }
+/* harmony export */   "PaginatedMultiSelect": function() { return /* binding */ PaginatedMultiSelect; },
+/* harmony export */   "PaginatedMultiSelectFiltered": function() { return /* binding */ PaginatedMultiSelectFiltered; }
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-/* harmony import */ var _Chevron__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.tsx");
+/* 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 _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
+/* 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 _InputBox__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
+/* harmony import */ var _Options_useVisible__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
+/* harmony import */ var _OptionsPaginated__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
+/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
+/* harmony import */ var _Select_SelectAddon__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx");
+/* harmony import */ var _Select_SelectFocus__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -11899,102 +11912,149 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
         }
     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;
+};
+// @ts-nocheck
 
 
 
-var defaultItemsPerPageLabel = function () { return 'Items per page:'; };
-var defaultShowingResultsLabel = function (_a) {
-    var count = _a.count, current = _a.current, itemsPerPage = _a.itemsPerPage;
-    return "Showing results " + (current + 1) + " - " + Math.min(current + itemsPerPage, count) + " of " + count;
+
+
+
+
+
+
+
+
+
+
+
+var SelectedOptions = (0,react__WEBPACK_IMPORTED_MODULE_1__.memo)(function (props) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_4__["default"], __assign({ maxWidth: '150px', withTruncatedText: true }, props))); });
+var prevent = function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
 };
-var Pagination = function (_a) {
-    var count = _a.count, _b = _a.current, current = _b === void 0 ? 0 : _b, _c = _a.itemsPerPage, itemsPerPage = _c === void 0 ? 25 : _c, _d = _a.itemsPerPageLabel, itemsPerPageLabel = _d === void 0 ? defaultItemsPerPageLabel : _d, _e = _a.showingResultsLabel, showingResultsLabel = _e === void 0 ? defaultShowingResultsLabel : _e, onSetItemsPerPage = _a.onSetItemsPerPage, onSetCurrent = _a.onSetCurrent, divider = _a.divider, props = __rest(_a, ["count", "current", "itemsPerPage", "itemsPerPageLabel", "showingResultsLabel", "onSetItemsPerPage", "onSetCurrent", "divider"]);
-    var itemsPerPageOptions = [25, 50, 100].filter(function (i) { return i <= count; });
-    var hasItemsPerPageSelection = itemsPerPageOptions.length > 1;
-    var currentPage = Math.floor(current / itemsPerPage);
-    var pages = Math.ceil(count / itemsPerPage);
-    var displayedPages = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
-        if (pages <= 7) {
-            // 0 1 2 3 4 5 6
-            return Array.from({ length: pages }, function (_, i) { return i; });
+var PaginatedMultiSelect = function (_a) {
+    var withTitle = _a.withTitle, 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 ? _Select_SelectFocus__WEBPACK_IMPORTED_MODULE_13__["default"] : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, placeholder = _a.placeholder, _e = _a.renderOptions, _Options = _e === void 0 ? _OptionsPaginated__WEBPACK_IMPORTED_MODULE_10__.OptionsPaginated : _e, endReached = _a.endReached, props = __rest(_a, ["withTitle", "value", "filter", "options", "error", "disabled", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
+    var _f = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value || []), 2), internalValue = _f[0], setInternalValue = _f[1];
+    var currentValue = value !== undefined ? value : internalValue;
+    var option = options.find(function (option) { return option.value === currentValue; });
+    var internalChanged = function (_a) {
+        var _b = __read(_a, 1), value = _b[0];
+        if (currentValue.some(function (item) { return item.value === value.value; })) {
+            var newValue_1 = currentValue.filter(function (item) { return item.value !== value.value; });
+            setInternalValue(newValue_1);
+            return onChange(newValue_1);
         }
-        if (currentPage < 5) {
-            // 0 1 2 3 4 ... N
-            return [0, 1, 2, 3, 4, '⋯', pages - 1];
+        var newValue = __spreadArray(__spreadArray([], __read(currentValue)), [value]);
+        setInternalValue(newValue);
+        return onChange(newValue);
+    };
+    var _g = __read((0,_Options_useVisible__WEBPACK_IMPORTED_MODULE_9__.useVisible)(), 3), visible = _g[0], hide = _g[1], show = _g[2];
+    var ref = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    var _h = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _h.ref, borderBoxSize = _h.borderBoxSize;
+    var handleClick = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () {
+        if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
+            return hide();
         }
-        if (currentPage > pages - 5) {
-            // 0 ... N-4 N-3 N-2 N-1 N
-            return [0, '⋯', pages - 5, pages - 4, pages - 3, pages - 2, pages - 1];
+        if (ref && ref.current) {
+            ref.current.focus();
+            return show();
         }
-        // 0 ... x-1 x x-2 ... N
-        return [
-            0,
-            '⋯',
-            currentPage - 1,
-            currentPage,
-            currentPage + 1,
-            '⋯',
-            pages - 1,
-        ];
-    }, [pages, currentPage]);
-    var renderingContext = { count: count, pages: pages, current: current, currentPage: currentPage, itemsPerPage: itemsPerPage };
-    var handleSetItemsPerPageLinkClick = function (itemsPerPageOption) { return function () {
-        onSetItemsPerPage === null || onSetItemsPerPage === void 0 ? void 0 : onSetItemsPerPage(itemsPerPageOption);
-    }; };
-    var handleSetPageLinkClick = function (page) { return function () {
-        onSetCurrent === null || onSetCurrent === void 0 ? void 0 : onSetCurrent(page * itemsPerPage);
-    }; };
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'nav', "rcx-pagination": true, "rcx-pagination--divider": divider }, props),
-        hasItemsPerPageSelection && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-pagination__left": true },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'span', "rcx-pagination__label": true }, itemsPerPageLabel(renderingContext)),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'ol', "rcx-pagination__list": true }, itemsPerPageOptions.map(function (itemsPerPageOption) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { key: itemsPerPageOption, is: 'li', "rcx-pagination__list-item": true },
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'button', "rcx-pagination__link": true, tabIndex: itemsPerPage === itemsPerPageOption ? -1 : 0, disabled: itemsPerPage === itemsPerPageOption, onClick: handleSetItemsPerPageLinkClick(itemsPerPageOption) }, itemsPerPageOption))); })))),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-pagination__right": true },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'span', "rcx-pagination__label": true }, showingResultsLabel(renderingContext)),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'ol', "rcx-pagination__list": true },
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'li', "rcx-pagination__list-item": true },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'button', "rcx-pagination__back": true, disabled: currentPage === 0, onClick: handleSetPageLinkClick(currentPage - 1) },
-                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Chevron__WEBPACK_IMPORTED_MODULE_2__.Chevron, { left: true, size: 'x16' }))),
-                displayedPages.map(function (page, i) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { key: i, is: 'li', "rcx-pagination__list-item": true }, page === '⋯' ? ('⋯') : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'button', "rcx-pagination__link": true, disabled: currentPage === page, onClick: handleSetPageLinkClick(page) }, page + 1)))); }),
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'li', "rcx-pagination__list-item": true },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'button', "rcx-pagination__forward": true, disabled: currentPage === pages - 1, onClick: handleSetPageLinkClick(currentPage + 1) },
-                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Chevron__WEBPACK_IMPORTED_MODULE_2__.Chevron, { right: true, size: 'x16' })))))));
+    });
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, 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_8__["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_3__.Box, { is: 'div' },
+                        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox' },
+                            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_8__["default"], { all: 'x4' },
+                                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Anchor, { disabled: disabled, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide, order: 1, "rcx-input-box--undecorated": true, children: !value ? option || placeholder : null }),
+                                currentValue.map(function (value, index) {
+                                    var _a, _b;
+                                    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(SelectedOptions, __assign({}, (withTitle && {
+                                        title: value.label ||
+                                            ((_a = options.find(function (val) {
+                                                return val.value === value;
+                                            })) === null || _a === void 0 ? void 0 : _a.label),
+                                    }), { tabIndex: -1, role: 'option', key: index, onMouseDown: function (e) {
+                                            prevent(e);
+                                            internalChanged([value]);
+                                            return false;
+                                        }, children: value.label ||
+                                            ((_b = options.find(function (val) {
+                                                return val.value === value;
+                                            })) === null || _b === void 0 ? void 0 : _b.label) })));
+                                }))))))),
+        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_8__["default"], { inline: 'x4' },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Select_SelectAddon__WEBPACK_IMPORTED_MODULE_12__["default"], { children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_6__.Icon, { name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE
+                            ? 'cross'
+                            : 'chevron-down', size: 'x20' }) }))),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"], { visibility: visible },
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Position__WEBPACK_IMPORTED_MODULE_11__["default"], { anchor: containerRef },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options, __assign({}, (withTitle && { title: withTitle }), { width: borderBoxSize.inlineSize, onMouseDown: prevent, multiple: true, filter: filter, role: 'listbox', options: options, onSelect: internalChanged, endReached: endReached }))))));
+};
+var PaginatedMultiSelectFiltered = function (_a) {
+    var filter = _a.filter, setFilter = _a.setFilter, options = _a.options, placeholder = _a.placeholder, props = __rest(_a, ["filter", "setFilter", "options", "placeholder"]);
+    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(_Flex__WEBPACK_IMPORTED_MODULE_5__["default"].Item, { grow: 1 },
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_7__.InputBox.Input, __assign({ ref: ref, placeholder: placeholder, value: filter, onInput: function (e) {
+                    return setFilter &&
+                        setFilter(e.currentTarget.value);
+                } }, props, { "rcx-input-box--undecorated": true }))));
+    }), []);
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginatedMultiSelect, __assign({ filter: filter, options: options }, props, { anchor: anchor })));
 };
 
 
 /***/ }),
 
-/***/ "./src/components/Pagination/index.ts":
-/*!********************************************!*\
-  !*** ./src/components/Pagination/index.ts ***!
-  \********************************************/
+/***/ "./src/components/PaginatedSelect/PaginatedSelect.tsx":
+/*!************************************************************!*\
+  !*** ./src/components/PaginatedSelect/PaginatedSelect.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 */   "Pagination": function() { return /* reexport safe */ _Pagination__WEBPACK_IMPORTED_MODULE_0__.Pagination; }
+/* harmony export */   "PaginatedSelect": function() { return /* binding */ PaginatedSelect; }
 /* harmony export */ });
-/* harmony import */ var _Pagination__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination */ "./src/components/Pagination/Pagination.tsx");
-
-
-
-/***/ }),
-
-/***/ "./src/components/PasswordInput/PasswordInput.tsx":
-/*!********************************************************!*\
-  !*** ./src/components/PasswordInput/PasswordInput.tsx ***!
-  \********************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
 /* 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 _Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _Options_useVisible__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
+/* harmony import */ var _OptionsPaginated__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
+/* harmony import */ var _PaginatedSelectAddon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./PaginatedSelectAddon */ "./src/components/PaginatedSelect/PaginatedSelectAddon.tsx");
+/* harmony import */ var _PaginatedSelectFocus__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./PaginatedSelectFocus */ "./src/components/PaginatedSelect/PaginatedSelectFocus.tsx");
+/* harmony import */ var _PaginatedSelectWrapper__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./PaginatedSelectWrapper */ "./src/components/PaginatedSelect/PaginatedSelectWrapper.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12006,6 +12066,17 @@ var __assign = (undefined && undefined.__assign) || function () {
     };
     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;
@@ -12022,53 +12093,84 @@ var __read = (undefined && undefined.__read) || function (o, n) {
     }
     return ar;
 };
+// @ts-nocheck
 
 
 
 
-var PasswordInput = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function PasswordInput(props, ref) {
-    var _a = __read((0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useToggle)(true), 2), hidden = _a[0], toggle = _a[1];
-    var handleAddonClick = function () {
-        toggle();
-    };
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_3__.InputBox, __assign({ type: hidden ? 'password' : 'text', addon: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, { name: hidden ? 'eye-off' : 'eye', size: 20, onClick: handleAddonClick }), ref: ref }, props)));
-});
-/* harmony default export */ __webpack_exports__["default"] = (PasswordInput);
-
 
-/***/ }),
 
-/***/ "./src/components/PasswordInput/index.ts":
-/*!***********************************************!*\
-  !*** ./src/components/PasswordInput/index.ts ***!
-  \***********************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* reexport safe */ _PasswordInput__WEBPACK_IMPORTED_MODULE_0__["default"]; }
-/* harmony export */ });
-/* harmony import */ var _PasswordInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PasswordInput */ "./src/components/PasswordInput/PasswordInput.tsx");
 
 
 
-/***/ }),
 
-/***/ "./src/components/Position/Position.tsx":
-/*!**********************************************!*\
-  !*** ./src/components/Position/Position.tsx ***!
-  \**********************************************/
+var prevent = function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+};
+var useDidUpdate = function (func) {
+    var didMount = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
+    var fn = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(func);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+        if (didMount.current) {
+            fn();
+        }
+        didMount.current = true;
+    }, [fn]);
+};
+var PaginatedSelect = function (_a) {
+    var value = _a.value, withTitle = _a.withTitle, filter = _a.filter, _setFilter = _a.setFilter, error = _a.error, disabled = _a.disabled, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.anchor, Anchor = _c === void 0 ? _PaginatedSelectFocus__WEBPACK_IMPORTED_MODULE_9__["default"] : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.renderOptions, _Options = _f === void 0 ? _OptionsPaginated__WEBPACK_IMPORTED_MODULE_6__.OptionsPaginated : _f, endReached = _a.endReached, props = __rest(_a, ["value", "withTitle", "filter", "setFilter", "error", "disabled", "options", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
+    var _g = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value), 2), internalValue = _g[0], setInternalValue = _g[1];
+    var currentValue = value !== undefined ? value : internalValue;
+    var option = options.find(function (option) { return (option === null || option === void 0 ? void 0 : option.value) === currentValue; });
+    var _h = __read((0,_Options_useVisible__WEBPACK_IMPORTED_MODULE_5__.useVisible)(), 3), visible = _h[0], hide = _h[1], show = _h[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);
+        onChange(value);
+        hide();
+    });
+    var ref = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    var _j = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _j.ref, borderBoxSize = _j.borderBoxSize;
+    useDidUpdate([filter, internalValue]);
+    var valueLabel = option === null || option === void 0 ? void 0 : option.label;
+    var visibleText = (filter === undefined || visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN) &&
+        (valueLabel || placeholder || typeof placeholder === 'string');
+    var handleClick = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () {
+        if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
+            return hide();
+        }
+        if (ref && ref.current) {
+            ref.current.focus();
+            return show();
+        }
+    });
+    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(_PaginatedSelectWrapper__WEBPACK_IMPORTED_MODULE_10__["default"], { 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: 'p2m', color: valueLabel ? 'default' : 'hint' }, visibleText)),
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide }),
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_PaginatedSelectAddon__WEBPACK_IMPORTED_MODULE_8__["default"], { mi: 'x4' },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_4__.Icon, { name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE ? 'cross' : '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, __assign({}, (withTitle && { title: withTitle }), { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: options, onSelect: internalChangedByClick, endReached: endReached, onMouseDown: prevent })))));
+};
+
+
+/***/ }),
+
+/***/ "./src/components/PaginatedSelect/PaginatedSelectAddon.tsx":
+/*!*****************************************************************!*\
+  !*** ./src/components/PaginatedSelect/PaginatedSelectAddon.tsx ***!
+  \*****************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* 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 react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "react-dom");
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);
+/* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12080,71 +12182,33 @@ var __assign = (undefined && undefined.__assign) || function () {
     };
     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 Position = function (_a) {
-    var anchor = _a.anchor, children = _a.children, placement = _a.placement, margin = _a.margin, _className = _a.className, props = __rest(_a, ["anchor", "children", "placement", "margin", "className"]);
-    var target = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-    var _b = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.usePosition)(anchor, target, (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return ({ placement: placement, margin: margin }); }, [placement, margin])) || {}, positionStyle = _b.style, positionPlacement = _b.placement;
-    var style = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return (__assign({ position: 'fixed' }, positionStyle)); }, [positionStyle]);
-    var portalContainer = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-        var element = document.createElement('div');
-        document.body.appendChild(element);
-        return element;
-    }, []);
-    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        return function () {
-            document.body.removeChild(portalContainer);
-        };
-    }, [portalContainer]);
-    return (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.createPortal)((0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(children, __assign(__assign({ ref: target, style: style }, props), { placement: positionPlacement })), portalContainer);
-};
-/* harmony default export */ __webpack_exports__["default"] = (Position);
+var PaginatedSelectAddon = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function PaginatedSelectAddon(props, ref) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'div', "rcx-select__addon": true, ref: ref }, props));
+});
+/* harmony default export */ __webpack_exports__["default"] = (PaginatedSelectAddon);
 
 
 /***/ }),
 
-/***/ "./src/components/Position/index.ts":
-/*!******************************************!*\
-  !*** ./src/components/Position/index.ts ***!
-  \******************************************/
+/***/ "./src/components/PaginatedSelect/PaginatedSelectFiltered.tsx":
+/*!********************************************************************!*\
+  !*** ./src/components/PaginatedSelect/PaginatedSelectFiltered.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 */   "default": function() { return /* reexport safe */ _Position__WEBPACK_IMPORTED_MODULE_0__["default"]; }
+/* harmony export */   "PaginatedSelectFiltered": function() { return /* binding */ PaginatedSelectFiltered; }
 /* harmony export */ });
-/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Position */ "./src/components/Position/Position.tsx");
-
-
-
-/***/ }),
-
-/***/ "./src/components/PositionAnimated/PositionAnimated.tsx":
-/*!**************************************************************!*\
-  !*** ./src/components/PositionAnimated/PositionAnimated.tsx ***!
-  \**************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* 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 _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
-/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
+/* 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 _InputBox__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/* harmony import */ var _PaginatedSelect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PaginatedSelect */ "./src/components/PaginatedSelect/PaginatedSelect.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12170,44 +12234,63 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
-var PositionAnimated = function (_a) {
-    var _width = _a.width, visible = _a.visible, children = _a.children, props = __rest(_a, ["width", "visible", "children"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"], { visibility: visible },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Position__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({}, props), children)));
+
+var PaginatedSelectFiltered = function (_a) {
+    var filter = _a.filter, setFilter = _a.setFilter, options = _a.options, placeholder = _a.placeholder, props = __rest(_a, ["filter", "setFilter", "options", "placeholder"]);
+    var anchor = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+        return (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref) {
+            var filter = _a.filter, _onChange = _a.onChange, props = __rest(_a, ["filter", "onChange"]);
+            return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_2__.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) {
+                    setFilter(e.currentTarget.value);
+                }) }, props, { "rcx-input-box--undecorated": true })));
+        });
+    }, [placeholder, setFilter]);
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_PaginatedSelect__WEBPACK_IMPORTED_MODULE_3__.PaginatedSelect, __assign({ placeholder: undefined, filter: filter, options: options }, props, { anchor: anchor })));
 };
-/* harmony default export */ __webpack_exports__["default"] = (PositionAnimated);
 
 
 /***/ }),
 
-/***/ "./src/components/PositionAnimated/index.ts":
-/*!**************************************************!*\
-  !*** ./src/components/PositionAnimated/index.ts ***!
-  \**************************************************/
+/***/ "./src/components/PaginatedSelect/PaginatedSelectFocus.tsx":
+/*!*****************************************************************!*\
+  !*** ./src/components/PaginatedSelect/PaginatedSelectFocus.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 */   "default": function() { return /* reexport safe */ _PositionAnimated__WEBPACK_IMPORTED_MODULE_0__["default"]; }
-/* harmony export */ });
-/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PositionAnimated */ "./src/components/PositionAnimated/PositionAnimated.tsx");
+/* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+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 PaginatedSelectFocus = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function PaginatedSelectFocus(props, ref) {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ ref: ref, fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button' }, props)));
+});
+/* harmony default export */ __webpack_exports__["default"] = (PaginatedSelectFocus);
 
 
 /***/ }),
 
-/***/ "./src/components/ProgressBar/ProgressBar.tsx":
-/*!****************************************************!*\
-  !*** ./src/components/ProgressBar/ProgressBar.tsx ***!
-  \****************************************************/
+/***/ "./src/components/PaginatedSelect/PaginatedSelectWrapper.tsx":
+/*!*******************************************************************!*\
+  !*** ./src/components/PaginatedSelect/PaginatedSelectWrapper.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 */   "ProgressBar": function() { return /* binding */ ProgressBar; }
-/* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
@@ -12222,72 +12305,51 @@ var __assign = (undefined && undefined.__assign) || function () {
     };
     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 getWidth = function (percentage) {
-    return Math.min(Math.max(0, percentage), 100).toFixed(1) + "%";
-};
-var getColor = function (percentage, error) {
-    if (error) {
-        return 'danger-200';
-    }
-    if (percentage >= 100) {
-        return 'success-200';
-    }
-    return 'primary-200';
-};
-var ProgressBar = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function ProgressBar(_a, ref) {
-    var barColor = _a.barColor, percentage = _a.percentage, error = _a.error, _b = _a.animated, animated = _b === void 0 ? true : _b, props = __rest(_a, ["barColor", "percentage", "error", "animated"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ ref: ref, "rcx-progress-bar": true, title: error || undefined }, props),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { bg: barColor || getColor(percentage, error), "rcx-progress-bar__fill": true, "rcx-progress-bar__fill-complete": animated && percentage >= 100, width: getWidth(percentage) })));
+var PaginatedSelectWrapper = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function PaginatedSelectWrapper(props, ref) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'div', "rcx-select__wrapper": true, ref: ref }, props));
 });
+/* harmony default export */ __webpack_exports__["default"] = (PaginatedSelectWrapper);
 
 
 /***/ }),
 
-/***/ "./src/components/ProgressBar/index.tsx":
-/*!**********************************************!*\
-  !*** ./src/components/ProgressBar/index.tsx ***!
-  \**********************************************/
+/***/ "./src/components/PaginatedSelect/index.ts":
+/*!*************************************************!*\
+  !*** ./src/components/PaginatedSelect/index.ts ***!
+  \*************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "ProgressBar": function() { return /* reexport safe */ _ProgressBar__WEBPACK_IMPORTED_MODULE_0__.ProgressBar; }
+/* harmony export */   "PaginatedSelectFiltered": function() { return /* reexport safe */ _PaginatedSelectFiltered__WEBPACK_IMPORTED_MODULE_0__.PaginatedSelectFiltered; },
+/* harmony export */   "PaginatedMultiSelectFiltered": function() { return /* reexport safe */ _PaginatedMultiSelect__WEBPACK_IMPORTED_MODULE_1__.PaginatedMultiSelectFiltered; }
 /* harmony export */ });
-/* harmony import */ var _ProgressBar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ProgressBar */ "./src/components/ProgressBar/ProgressBar.tsx");
+/* harmony import */ var _PaginatedSelectFiltered__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PaginatedSelectFiltered */ "./src/components/PaginatedSelect/PaginatedSelectFiltered.tsx");
+/* harmony import */ var _PaginatedMultiSelect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PaginatedMultiSelect */ "./src/components/PaginatedSelect/PaginatedMultiSelect.tsx");
+
 
 
 
 /***/ }),
 
-/***/ "./src/components/RadioButton/RadioButton.tsx":
-/*!****************************************************!*\
-  !*** ./src/components/RadioButton/RadioButton.tsx ***!
-  \****************************************************/
+/***/ "./src/components/Pagination/Pagination.tsx":
+/*!**************************************************!*\
+  !*** ./src/components/Pagination/Pagination.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 */   "RadioButton": function() { return /* binding */ RadioButton; }
+/* harmony export */   "Pagination": function() { return /* binding */ Pagination; }
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-/* harmony import */ var _Label__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
+/* harmony import */ var _Chevron__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12313,142 +12375,99 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
-var RadioButton = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function RadioButton(_a, ref) {
-    var autoComplete = _a.autoComplete, checked = _a.checked, defaultChecked = _a.defaultChecked, disabled = _a.disabled, form = _a.form, id = _a.id, name = _a.name, required = _a.required, tabIndex = _a.tabIndex, value = _a.value, qa = _a.qa, dataQa = _a["data-qa"], onChange = _a.onChange, onInput = _a.onInput, onInvalid = _a.onInvalid, props = __rest(_a, ["autoComplete", "checked", "defaultChecked", "disabled", "form", "id", "name", "required", "tabIndex", "value", "qa", 'data-qa', "onChange", "onInput", "onInvalid"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: _Label__WEBPACK_IMPORTED_MODULE_2__.Label, "rcx-radio-button": true }, props),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'input', "rcx-radio-button__input": true, autoComplete: autoComplete, checked: checked, defaultChecked: defaultChecked, disabled: disabled, form: form, id: id, name: name, required: required, tabIndex: tabIndex, type: 'radio', value: value, "data-qa": dataQa || qa, ref: ref, onChange: onChange, onInput: onInput, onInvalid: onInvalid }),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'i', "rcx-radio-button__fake": true, "aria-hidden": 'true' })));
-});
-
-
-/***/ }),
-
-/***/ "./src/components/RadioButton/index.ts":
-/*!*********************************************!*\
-  !*** ./src/components/RadioButton/index.ts ***!
-  \*********************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "RadioButton": function() { return /* reexport safe */ _RadioButton__WEBPACK_IMPORTED_MODULE_0__.RadioButton; }
-/* harmony export */ });
-/* harmony import */ var _RadioButton__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./RadioButton */ "./src/components/RadioButton/RadioButton.tsx");
-
-
-
-/***/ }),
-
-/***/ "./src/components/Scrollable/Scrollable.tsx":
-/*!**************************************************!*\
-  !*** ./src/components/Scrollable/Scrollable.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 */   "Scrollable": function() { return /* binding */ Scrollable; }
-/* harmony export */ });
-/* harmony import */ var _rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @rocket.chat/css-in-js */ "../css-in-js/dist/index.module.js");
-/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_fuselage_hooks__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 _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
-/* harmony import */ var _hooks_useStyle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/useStyle.ts");
-/* harmony import */ var _Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Box/BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
-var __makeTemplateObject = (undefined && undefined.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-
-
-
-
-
-
-var getTouchingEdges = function (element) { return ({
-    top: !element.scrollTop,
-    bottom: !(element.scrollTop + element.clientHeight - element.scrollHeight),
-    left: !element.scrollLeft,
-    right: !(element.scrollLeft + element.clientWidth - element.scrollWidth),
-}); };
-var pollTouchingEdges = function (element, touchingEdgesRef, onScrollContent) {
-    var touchingEdges = touchingEdgesRef.current;
-    var newTouchingEdges = getTouchingEdges(element);
-    var dirty = touchingEdges &&
-        (touchingEdges.top !== newTouchingEdges.top ||
-            touchingEdges.bottom !== newTouchingEdges.bottom ||
-            touchingEdges.left !== newTouchingEdges.left ||
-            touchingEdges.right !== newTouchingEdges.right);
-    if (dirty) {
-        touchingEdgesRef.current = newTouchingEdges;
-        onScrollContent && onScrollContent(newTouchingEdges);
-    }
+var defaultItemsPerPageLabel = function () { return 'Items per page:'; };
+var defaultShowingResultsLabel = function (_a) {
+    var count = _a.count, current = _a.current, itemsPerPage = _a.itemsPerPage;
+    return "Showing results " + (current + 1) + " - " + Math.min(current + itemsPerPage, count) + " of " + count;
 };
-var Scrollable = function (_a) {
-    var children = _a.children, horizontal = _a.horizontal, vertical = _a.vertical, smooth = _a.smooth, onScrollContent = _a.onScrollContent;
-    var scrollTimeoutRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
-    var touchingEdgesRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)({});
-    var handleScroll = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function (event) {
-        var element = event.currentTarget;
-        if (!scrollTimeoutRef.current) {
-            pollTouchingEdges(element, touchingEdgesRef, onScrollContent);
+var Pagination = function (_a) {
+    var count = _a.count, _b = _a.current, current = _b === void 0 ? 0 : _b, _c = _a.itemsPerPage, itemsPerPage = _c === void 0 ? 25 : _c, _d = _a.itemsPerPageLabel, itemsPerPageLabel = _d === void 0 ? defaultItemsPerPageLabel : _d, _e = _a.showingResultsLabel, showingResultsLabel = _e === void 0 ? defaultShowingResultsLabel : _e, onSetItemsPerPage = _a.onSetItemsPerPage, onSetCurrent = _a.onSetCurrent, divider = _a.divider, props = __rest(_a, ["count", "current", "itemsPerPage", "itemsPerPageLabel", "showingResultsLabel", "onSetItemsPerPage", "onSetCurrent", "divider"]);
+    var itemsPerPageOptions = [25, 50, 100].filter(function (i) { return i <= count; });
+    var hasItemsPerPageSelection = itemsPerPageOptions.length > 1;
+    var currentPage = Math.floor(current / itemsPerPage);
+    var pages = Math.ceil(count / itemsPerPage);
+    var displayedPages = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+        if (pages <= 7) {
+            // 0 1 2 3 4 5 6
+            return Array.from({ length: pages }, function (_, i) { return i; });
         }
-        scrollTimeoutRef.current && clearTimeout(scrollTimeoutRef.current);
-        scrollTimeoutRef.current = setTimeout(function () {
-            scrollTimeoutRef.current = undefined;
-            pollTouchingEdges(element, touchingEdgesRef, onScrollContent);
-        }, 200);
-    });
-    var className = (0,_hooks_useStyle__WEBPACK_IMPORTED_MODULE_4__.useStyle)((0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      position: relative;\n\n      &::-webkit-scrollbar {\n        width: ", "rem;\n        height: ", "rem;\n      }\n\n      &::-webkit-scrollbar-track {\n        background-color: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.05);\n        background-color: var(\n          --rcx-theme-scrollbar-thumb-color,\n          rgba(0, 0, 0, 0.05)\n        );\n      }\n\n      &:hover::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.15);\n        background-color: var(\n          --rcx-theme-scrollbar-thumb-hover-color,\n          rgba(0, 0, 0, 0.15)\n        );\n      }\n\n      ", "\n      ", "\n    "], ["\n      position: relative;\n\n      &::-webkit-scrollbar {\n        width: ", "rem;\n        height: ", "rem;\n      }\n\n      &::-webkit-scrollbar-track {\n        background-color: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.05);\n        background-color: var(\n          --rcx-theme-scrollbar-thumb-color,\n          rgba(0, 0, 0, 0.05)\n        );\n      }\n\n      &:hover::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.15);\n        background-color: var(\n          --rcx-theme-scrollbar-thumb-hover-color,\n          rgba(0, 0, 0, 0.15)\n        );\n      }\n\n      ", "\n      ", "\n    "])), 4 / 16, 4 / 16, (horizontal && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          overflow-x: auto !important;\n        "], ["\n          overflow-x: auto !important;\n        "])))) ||
-        (vertical && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          overflow-y: auto !important;\n        "], ["\n          overflow-y: auto !important;\n        "])))) || (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        overflow: auto !important;\n      "], ["\n        overflow: auto !important;\n      "]))), smooth && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        scroll-behavior: smooth !important;\n      "], ["\n        scroll-behavior: smooth !important;\n      "])))), null);
-    var transformFn = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function (props) {
-        props.className =
-            className && (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_3__.appendClassName)(props.className, className);
-        if (onScrollContent !== undefined && props.onScroll === undefined) {
-            props.onScroll = handleScroll;
+        if (currentPage < 5) {
+            // 0 1 2 3 4 ... N
+            return [0, 1, 2, 3, 4, '⋯', pages - 1];
         }
-        return props;
-    }, [className, handleScroll, onScrollContent]);
-    return (react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__.BoxTransforms.Provider, { children: children, value: (0,_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__.useComposedBoxTransform)(transformFn) }));
+        if (currentPage > pages - 5) {
+            // 0 ... N-4 N-3 N-2 N-1 N
+            return [0, '⋯', pages - 5, pages - 4, pages - 3, pages - 2, pages - 1];
+        }
+        // 0 ... x-1 x x-2 ... N
+        return [
+            0,
+            '⋯',
+            currentPage - 1,
+            currentPage,
+            currentPage + 1,
+            '⋯',
+            pages - 1,
+        ];
+    }, [pages, currentPage]);
+    var renderingContext = { count: count, pages: pages, current: current, currentPage: currentPage, itemsPerPage: itemsPerPage };
+    var handleSetItemsPerPageLinkClick = function (itemsPerPageOption) { return function () {
+        onSetItemsPerPage === null || onSetItemsPerPage === void 0 ? void 0 : onSetItemsPerPage(itemsPerPageOption);
+    }; };
+    var handleSetPageLinkClick = function (page) { return function () {
+        onSetCurrent === null || onSetCurrent === void 0 ? void 0 : onSetCurrent(page * itemsPerPage);
+    }; };
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'nav', "rcx-pagination": true, "rcx-pagination--divider": divider }, props),
+        hasItemsPerPageSelection && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-pagination__left": true },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'span', "rcx-pagination__label": true }, itemsPerPageLabel(renderingContext)),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'ol', "rcx-pagination__list": true }, itemsPerPageOptions.map(function (itemsPerPageOption) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { key: itemsPerPageOption, is: 'li', "rcx-pagination__list-item": true },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'button', "rcx-pagination__link": true, tabIndex: itemsPerPage === itemsPerPageOption ? -1 : 0, disabled: itemsPerPage === itemsPerPageOption, onClick: handleSetItemsPerPageLinkClick(itemsPerPageOption) }, itemsPerPageOption))); })))),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-pagination__right": true },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'span', "rcx-pagination__label": true }, showingResultsLabel(renderingContext)),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'ol', "rcx-pagination__list": true },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'li', "rcx-pagination__list-item": true },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'button', "rcx-pagination__back": true, disabled: currentPage === 0, onClick: handleSetPageLinkClick(currentPage - 1) },
+                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Chevron__WEBPACK_IMPORTED_MODULE_2__.Chevron, { left: true, size: 'x16' }))),
+                displayedPages.map(function (page, i) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { key: i, is: 'li', "rcx-pagination__list-item": true }, page === '⋯' ? ('⋯') : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'button', "rcx-pagination__link": true, disabled: currentPage === page, onClick: handleSetPageLinkClick(page) }, page + 1)))); }),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'li', "rcx-pagination__list-item": true },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'button', "rcx-pagination__forward": true, disabled: currentPage === pages - 1, onClick: handleSetPageLinkClick(currentPage + 1) },
+                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Chevron__WEBPACK_IMPORTED_MODULE_2__.Chevron, { right: true, size: 'x16' })))))));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 
 /***/ }),
 
-/***/ "./src/components/Scrollable/index.ts":
+/***/ "./src/components/Pagination/index.ts":
 /*!********************************************!*\
-  !*** ./src/components/Scrollable/index.ts ***!
+  !*** ./src/components/Pagination/index.ts ***!
   \********************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _Scrollable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Scrollable */ "./src/components/Scrollable/Scrollable.tsx");
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Pagination": function() { return /* reexport safe */ _Pagination__WEBPACK_IMPORTED_MODULE_0__.Pagination; }
+/* harmony export */ });
+/* harmony import */ var _Pagination__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination */ "./src/components/Pagination/Pagination.tsx");
 
-/* harmony default export */ __webpack_exports__["default"] = (_Scrollable__WEBPACK_IMPORTED_MODULE_0__.Scrollable);
 
 
 /***/ }),
 
-/***/ "./src/components/SearchInput/SearchInput.tsx":
-/*!****************************************************!*\
-  !*** ./src/components/SearchInput/SearchInput.tsx ***!
-  \****************************************************/
+/***/ "./src/components/PasswordInput/PasswordInput.tsx":
+/*!********************************************************!*\
+  !*** ./src/components/PasswordInput/PasswordInput.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 */   "SearchInput": function() { return /* binding */ SearchInput; }
-/* 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 _InputBox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/* 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 _Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12460,56 +12479,69 @@ var __assign = (undefined && undefined.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 SearchInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SearchInput(props, ref) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_1__.InputBox, __assign({ type: 'search', ref: ref }, props));
+
+
+var PasswordInput = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function PasswordInput(props, ref) {
+    var _a = __read((0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useToggle)(true), 2), hidden = _a[0], toggle = _a[1];
+    var handleAddonClick = function () {
+        toggle();
+    };
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_3__.InputBox, __assign({ type: hidden ? 'password' : 'text', addon: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, { name: hidden ? 'eye-off' : 'eye', size: 20, onClick: handleAddonClick }), ref: ref }, props)));
 });
+/* harmony default export */ __webpack_exports__["default"] = (PasswordInput);
 
 
 /***/ }),
 
-/***/ "./src/components/SearchInput/index.tsx":
-/*!**********************************************!*\
-  !*** ./src/components/SearchInput/index.tsx ***!
-  \**********************************************/
+/***/ "./src/components/PasswordInput/index.ts":
+/*!***********************************************!*\
+  !*** ./src/components/PasswordInput/index.ts ***!
+  \***********************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "SearchInput": function() { return /* reexport safe */ _SearchInput__WEBPACK_IMPORTED_MODULE_0__.SearchInput; }
+/* harmony export */   "default": function() { return /* reexport safe */ _PasswordInput__WEBPACK_IMPORTED_MODULE_0__["default"]; }
 /* harmony export */ });
-/* harmony import */ var _SearchInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SearchInput */ "./src/components/SearchInput/SearchInput.tsx");
+/* harmony import */ var _PasswordInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PasswordInput */ "./src/components/PasswordInput/PasswordInput.tsx");
 
 
 
 /***/ }),
 
-/***/ "./src/components/Select/Select.tsx":
-/*!******************************************!*\
-  !*** ./src/components/Select/Select.tsx ***!
-  \******************************************/
+/***/ "./src/components/Position/Position.tsx":
+/*!**********************************************!*\
+  !*** ./src/components/Position/Position.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 */   "Select": function() { return /* binding */ Select; }
-/* 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 _Icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
-/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
-/* harmony import */ var _SelectAddon__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./SelectAddon */ "./src/components/Select/SelectAddon.tsx");
-/* harmony import */ var _SelectFocus__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./SelectFocus */ "./src/components/Select/SelectFocus.tsx");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "react-dom");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12532,140 +12564,60 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
         }
     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 Position = function (_a) {
+    var anchor = _a.anchor, children = _a.children, placement = _a.placement, margin = _a.margin, _className = _a.className, props = __rest(_a, ["anchor", "children", "placement", "margin", "className"]);
+    var target = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    var _b = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.usePosition)(anchor, target, (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return ({ placement: placement, margin: margin }); }, [placement, margin])) || {}, positionStyle = _b.style, positionPlacement = _b.placement;
+    var style = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return (__assign({ position: 'fixed' }, positionStyle)); }, [positionStyle]);
+    var portalContainer = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+        var element = document.createElement('div');
+        document.body.appendChild(element);
+        return element;
+    }, []);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+        return function () {
+            document.body.removeChild(portalContainer);
+        };
+    }, [portalContainer]);
+    return (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.createPortal)((0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(children, __assign(__assign({ ref: target, style: style }, props), { placement: positionPlacement })), portalContainer);
+};
+/* harmony default export */ __webpack_exports__["default"] = (Position);
 
 
+/***/ }),
+
+/***/ "./src/components/Position/index.ts":
+/*!******************************************!*\
+  !*** ./src/components/Position/index.ts ***!
+  \******************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": function() { return /* reexport safe */ _Position__WEBPACK_IMPORTED_MODULE_0__["default"]; }
+/* harmony export */ });
+/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Position */ "./src/components/Position/Position.tsx");
 
-var Wrapper = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, __assign({ is: 'div', "rcx-select__wrapper": true, ref: ref }, props))); });
-var useDidUpdate = function (func, deps) {
-    var didMount = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
-    var fn = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(func);
-    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        if (didMount.current) {
-            fn();
-        }
-        didMount.current = true;
-    }, 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, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.anchor, Anchor = _c === void 0 ? _SelectFocus__WEBPACK_IMPORTED_MODULE_10__["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;
-    } : _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;
-    } : _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_7__.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);
-        onChange(value);
-    });
-    var option = options.find(function (option) { return getValue(option) === internalValue; });
-    var index = options.indexOf(option);
-    var filteredOptions = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-        var mapOptions = function (_a) {
-            var _b = __read(_a, 2), value = _b[0], label = _b[1];
-            if (internalValue === value) {
-                return [value, label, true];
-            }
-            return [value, label];
-        };
-        var applyFilter = function (_a) {
-            var _b = __read(_a, 2), option = _b[1];
-            return !filter || ~option.toLowerCase().indexOf(filter.toLowerCase());
-        };
-        return options.filter(applyFilter).map(mapOptions);
-    }, [options, internalValue, filter]);
-    var _k = __read((0,_Options__WEBPACK_IMPORTED_MODULE_7__.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);
-        onChange(value);
-        hide();
-    });
-    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 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;
-    };
-    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_3__["default"].HIDDEN) &&
-        (valueLabel || placeholder || typeof placeholder === 'string');
-    var handleClick = (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();
-    });
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.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 &&
-                (RenderSelected ? (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, key: getValue(option), onClick: internalChangedByClick })) : (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, { flexGrow: 1, is: 'span', mi: 'x4', "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint' }, visibleText))),
-            renderAnchor({
-                ref: anchorRef,
-                children: !value ? option || placeholder : null,
-                disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-                onClick: show,
-                onBlur: hide,
-                onKeyDown: handleKeyDown,
-                onKeyUp: handleKeyUp,
-            }),
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_6__["default"], { inline: 'x4' },
-                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_SelectAddon__WEBPACK_IMPORTED_MODULE_9__["default"], { children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_5__.Icon, { name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].VISIBLE
-                            ? 'cross'
-                            : addonIcon || 'chevron-down', size: 'x20' }) }))),
-        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_PositionAnimated__WEBPACK_IMPORTED_MODULE_8__["default"], { visible: visible, anchor: containerRef },
-            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 }))));
-});
 
 
 /***/ }),
 
-/***/ "./src/components/Select/SelectAddon.tsx":
-/*!***********************************************!*\
-  !*** ./src/components/Select/SelectAddon.tsx ***!
-  \***********************************************/
+/***/ "./src/components/PositionAnimated/PositionAnimated.tsx":
+/*!**************************************************************!*\
+  !*** ./src/components/PositionAnimated/PositionAnimated.tsx ***!
+  \**************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12677,31 +12629,61 @@ var __assign = (undefined && undefined.__assign) || function () {
     };
     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 SelectAddon = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SelectAddon(props, ref) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'div', "rcx-select__addon": true, ref: ref }, props));
-});
-/* harmony default export */ __webpack_exports__["default"] = (SelectAddon);
+
+var PositionAnimated = function (_a) {
+    var _width = _a.width, visible = _a.visible, children = _a.children, props = __rest(_a, ["width", "visible", "children"]);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"], { visibility: visible },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Position__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({}, props), children)));
+};
+/* harmony default export */ __webpack_exports__["default"] = (PositionAnimated);
 
 
 /***/ }),
 
-/***/ "./src/components/Select/SelectFiltered.tsx":
+/***/ "./src/components/PositionAnimated/index.ts":
 /*!**************************************************!*\
-  !*** ./src/components/Select/SelectFiltered.tsx ***!
+  !*** ./src/components/PositionAnimated/index.ts ***!
   \**************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "SelectFiltered": function() { return /* binding */ SelectFiltered; }
+/* harmony export */   "default": function() { return /* reexport safe */ _PositionAnimated__WEBPACK_IMPORTED_MODULE_0__["default"]; }
+/* harmony export */ });
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PositionAnimated */ "./src/components/PositionAnimated/PositionAnimated.tsx");
+
+
+
+/***/ }),
+
+/***/ "./src/components/ProgressBar/ProgressBar.tsx":
+/*!****************************************************!*\
+  !*** ./src/components/ProgressBar/ProgressBar.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 */   "ProgressBar": function() { return /* binding */ ProgressBar; }
 /* 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 ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! . */ "./src/components/Select/index.ts");
-/* harmony import */ var _SelectFilteredAnchor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SelectFilteredAnchor */ "./src/components/Select/SelectFilteredAnchor.tsx");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12724,45 +12706,61 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
         }
     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);
+
+
+var getWidth = function (percentage) {
+    return Math.min(Math.max(0, percentage), 100).toFixed(1) + "%";
+};
+var getColor = function (percentage, error) {
+    if (error) {
+        return 'danger-200';
     }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
+    if (percentage >= 100) {
+        return 'success-200';
     }
-    return ar;
+    return 'primary-200';
 };
+var ProgressBar = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function ProgressBar(_a, ref) {
+    var barColor = _a.barColor, percentage = _a.percentage, error = _a.error, _b = _a.animated, animated = _b === void 0 ? true : _b, props = __rest(_a, ["barColor", "percentage", "error", "animated"]);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ ref: ref, "rcx-progress-bar": true, title: error || undefined }, props),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { bg: barColor || getColor(percentage, error), "rcx-progress-bar__fill": true, "rcx-progress-bar__fill-complete": animated && percentage >= 100, width: getWidth(percentage) })));
+});
 
 
+/***/ }),
+
+/***/ "./src/components/ProgressBar/index.tsx":
+/*!**********************************************!*\
+  !*** ./src/components/ProgressBar/index.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 */   "ProgressBar": function() { return /* reexport safe */ _ProgressBar__WEBPACK_IMPORTED_MODULE_0__.ProgressBar; }
+/* harmony export */ });
+/* harmony import */ var _ProgressBar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ProgressBar */ "./src/components/ProgressBar/ProgressBar.tsx");
 
-var SelectFiltered = 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(___WEBPACK_IMPORTED_MODULE_1__.Select, __assign({ placeholder: placeholder, filter: propFilter || filter, options: options }, props, { anchor: function (params) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SelectFilteredAnchor__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter }, params))); } })));
-};
 
 
 /***/ }),
 
-/***/ "./src/components/Select/SelectFilteredAnchor.tsx":
-/*!********************************************************!*\
-  !*** ./src/components/Select/SelectFilteredAnchor.tsx ***!
-  \********************************************************/
+/***/ "./src/components/RadioButton/RadioButton.tsx":
+/*!****************************************************!*\
+  !*** ./src/components/RadioButton/RadioButton.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 */   "RadioButton": function() { return /* binding */ RadioButton; }
+/* 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 _InputBox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Label__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12787,84 +12785,143 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 };
 
 
-var SelectFilteredAnchor = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SelectFilteredAnchor(_a, ref) {
-    var _children = _a.children, filter = _a.filter, onChangeFilter = _a.onChangeFilter, placeholder = _a.placeholder, props = __rest(_a, ["children", "filter", "onChangeFilter", "placeholder"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_1__.InputBox.Input, __assign({ mi: 'x4', flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onInput: function (e) {
-            return onChangeFilter(e.currentTarget.value);
-        } }, props, { "rcx-input-box--undecorated": true })));
+
+var RadioButton = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function RadioButton(_a, ref) {
+    var autoComplete = _a.autoComplete, checked = _a.checked, defaultChecked = _a.defaultChecked, disabled = _a.disabled, form = _a.form, id = _a.id, name = _a.name, required = _a.required, tabIndex = _a.tabIndex, value = _a.value, qa = _a.qa, dataQa = _a["data-qa"], onChange = _a.onChange, onInput = _a.onInput, onInvalid = _a.onInvalid, props = __rest(_a, ["autoComplete", "checked", "defaultChecked", "disabled", "form", "id", "name", "required", "tabIndex", "value", "qa", 'data-qa', "onChange", "onInput", "onInvalid"]);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: _Label__WEBPACK_IMPORTED_MODULE_2__.Label, "rcx-radio-button": true }, props),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'input', "rcx-radio-button__input": true, autoComplete: autoComplete, checked: checked, defaultChecked: defaultChecked, disabled: disabled, form: form, id: id, name: name, required: required, tabIndex: tabIndex, type: 'radio', value: value, "data-qa": dataQa || qa, ref: ref, onChange: onChange, onInput: onInput, onInvalid: onInvalid }),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'i', "rcx-radio-button__fake": true, "aria-hidden": 'true' })));
 });
-/* harmony default export */ __webpack_exports__["default"] = (SelectFilteredAnchor);
 
 
 /***/ }),
 
-/***/ "./src/components/Select/SelectFocus.tsx":
-/*!***********************************************!*\
-  !*** ./src/components/Select/SelectFocus.tsx ***!
-  \***********************************************/
+/***/ "./src/components/RadioButton/index.ts":
+/*!*********************************************!*\
+  !*** ./src/components/RadioButton/index.ts ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-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);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "RadioButton": function() { return /* reexport safe */ _RadioButton__WEBPACK_IMPORTED_MODULE_0__.RadioButton; }
+/* harmony export */ });
+/* harmony import */ var _RadioButton__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./RadioButton */ "./src/components/RadioButton/RadioButton.tsx");
+
+
+
+/***/ }),
+
+/***/ "./src/components/Scrollable/Scrollable.tsx":
+/*!**************************************************!*\
+  !*** ./src/components/Scrollable/Scrollable.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 */   "Scrollable": function() { return /* binding */ Scrollable; }
+/* harmony export */ });
+/* harmony import */ var _rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @rocket.chat/css-in-js */ "../css-in-js/dist/index.module.js");
+/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
+/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_fuselage_hooks__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 _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
+/* harmony import */ var _hooks_useStyle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/useStyle.ts");
+/* harmony import */ var _Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Box/BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
+var __makeTemplateObject = (undefined && undefined.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
 
 
-var SelectFocus = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SelectFocus(props, ref) {
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ ref: ref, fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button' }, props)));
-});
-/* harmony default export */ __webpack_exports__["default"] = (SelectFocus);
+
+
+
+
+var getTouchingEdges = function (element) { return ({
+    top: !element.scrollTop,
+    bottom: !(element.scrollTop + element.clientHeight - element.scrollHeight),
+    left: !element.scrollLeft,
+    right: !(element.scrollLeft + element.clientWidth - element.scrollWidth),
+}); };
+var pollTouchingEdges = function (element, touchingEdgesRef, onScrollContent) {
+    var touchingEdges = touchingEdgesRef.current;
+    var newTouchingEdges = getTouchingEdges(element);
+    var dirty = touchingEdges &&
+        (touchingEdges.top !== newTouchingEdges.top ||
+            touchingEdges.bottom !== newTouchingEdges.bottom ||
+            touchingEdges.left !== newTouchingEdges.left ||
+            touchingEdges.right !== newTouchingEdges.right);
+    if (dirty) {
+        touchingEdgesRef.current = newTouchingEdges;
+        onScrollContent && onScrollContent(newTouchingEdges);
+    }
+};
+var Scrollable = function (_a) {
+    var children = _a.children, horizontal = _a.horizontal, vertical = _a.vertical, smooth = _a.smooth, onScrollContent = _a.onScrollContent;
+    var scrollTimeoutRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
+    var touchingEdgesRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)({});
+    var handleScroll = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function (event) {
+        var element = event.currentTarget;
+        if (!scrollTimeoutRef.current) {
+            pollTouchingEdges(element, touchingEdgesRef, onScrollContent);
+        }
+        scrollTimeoutRef.current && clearTimeout(scrollTimeoutRef.current);
+        scrollTimeoutRef.current = setTimeout(function () {
+            scrollTimeoutRef.current = undefined;
+            pollTouchingEdges(element, touchingEdgesRef, onScrollContent);
+        }, 200);
+    });
+    var className = (0,_hooks_useStyle__WEBPACK_IMPORTED_MODULE_4__.useStyle)((0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      position: relative;\n\n      &::-webkit-scrollbar {\n        width: ", "rem;\n        height: ", "rem;\n      }\n\n      &::-webkit-scrollbar-track {\n        background-color: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.05);\n        background-color: var(\n          --rcx-theme-scrollbar-thumb-color,\n          rgba(0, 0, 0, 0.05)\n        );\n      }\n\n      &:hover::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.15);\n        background-color: var(\n          --rcx-theme-scrollbar-thumb-hover-color,\n          rgba(0, 0, 0, 0.15)\n        );\n      }\n\n      ", "\n      ", "\n    "], ["\n      position: relative;\n\n      &::-webkit-scrollbar {\n        width: ", "rem;\n        height: ", "rem;\n      }\n\n      &::-webkit-scrollbar-track {\n        background-color: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.05);\n        background-color: var(\n          --rcx-theme-scrollbar-thumb-color,\n          rgba(0, 0, 0, 0.05)\n        );\n      }\n\n      &:hover::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.15);\n        background-color: var(\n          --rcx-theme-scrollbar-thumb-hover-color,\n          rgba(0, 0, 0, 0.15)\n        );\n      }\n\n      ", "\n      ", "\n    "])), 4 / 16, 4 / 16, (horizontal && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          overflow-x: auto !important;\n        "], ["\n          overflow-x: auto !important;\n        "])))) ||
+        (vertical && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          overflow-y: auto !important;\n        "], ["\n          overflow-y: auto !important;\n        "])))) || (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        overflow: auto !important;\n      "], ["\n        overflow: auto !important;\n      "]))), smooth && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        scroll-behavior: smooth !important;\n      "], ["\n        scroll-behavior: smooth !important;\n      "])))), null);
+    var transformFn = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function (props) {
+        props.className =
+            className && (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_3__.appendClassName)(props.className, className);
+        if (onScrollContent !== undefined && props.onScroll === undefined) {
+            props.onScroll = handleScroll;
+        }
+        return props;
+    }, [className, handleScroll, onScrollContent]);
+    return (react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__.BoxTransforms.Provider, { children: children, value: (0,_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__.useComposedBoxTransform)(transformFn) }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 
 /***/ }),
 
-/***/ "./src/components/Select/index.ts":
-/*!****************************************!*\
-  !*** ./src/components/Select/index.ts ***!
-  \****************************************/
+/***/ "./src/components/Scrollable/index.ts":
+/*!********************************************!*\
+  !*** ./src/components/Scrollable/index.ts ***!
+  \********************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Select": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_0__.Select; },
-/* harmony export */   "SelectFiltered": function() { return /* reexport safe */ _SelectFiltered__WEBPACK_IMPORTED_MODULE_1__.SelectFiltered; }
-/* harmony export */ });
-/* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Select */ "./src/components/Select/Select.tsx");
-/* harmony import */ var _SelectFiltered__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SelectFiltered */ "./src/components/Select/SelectFiltered.tsx");
-
+/* harmony import */ var _Scrollable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Scrollable */ "./src/components/Scrollable/Scrollable.tsx");
 
+/* harmony default export */ __webpack_exports__["default"] = (_Scrollable__WEBPACK_IMPORTED_MODULE_0__.Scrollable);
 
 
 /***/ }),
 
-/***/ "./src/components/SelectInput/SelectInput.tsx":
+/***/ "./src/components/SearchInput/SearchInput.tsx":
 /*!****************************************************!*\
-  !*** ./src/components/SelectInput/SelectInput.tsx ***!
+  !*** ./src/components/SearchInput/SearchInput.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 */   "SelectInput": function() { return /* binding */ SelectInput; }
+/* harmony export */   "SearchInput": function() { return /* binding */ SearchInput; }
 /* 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 _Icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12876,103 +12933,56 @@ var __assign = (undefined && undefined.__assign) || function () {
     };
     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 SelectInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SelectInput(_a, ref) {
-    var children = _a.children, multiple = _a.multiple, placeholder = _a.placeholder, onChange = _a.onChange, props = __rest(_a, ["children", "multiple", "placeholder", "onChange"]);
-    var _b = __read((0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!props.value && !props.defaultValue), 2), isPlaceholderVisible = _b[0], setPlaceholderVisible = _b[1];
-    var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {
-        setPlaceholderVisible(!event.currentTarget.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange.call(event.currentTarget, event);
-    }, [onChange]);
-    if (multiple) {
-        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_2__.InputBox, __assign({ children: children }, props, { multiple: true, type: 'select', onChange: handleChange })));
-    }
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_2__.InputBox, __assign({ placeholderVisible: isPlaceholderVisible ? !!placeholder : undefined, ref: ref }, props, { addon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_1__.Icon, { name: 'chevron-down', size: 'x20' }), type: 'select', onChange: handleChange }),
-        placeholder && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_2__.InputBox.Placeholder, { value: '' }, placeholder)),
-        children));
+var SearchInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SearchInput(props, ref) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_1__.InputBox, __assign({ type: 'search', ref: ref }, props));
 });
 
 
 /***/ }),
 
-/***/ "./src/components/SelectInput/index.ts":
-/*!*********************************************!*\
-  !*** ./src/components/SelectInput/index.ts ***!
-  \*********************************************/
+/***/ "./src/components/SearchInput/index.tsx":
+/*!**********************************************!*\
+  !*** ./src/components/SearchInput/index.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 */   "SelectInput": function() { return /* reexport safe */ _SelectInput__WEBPACK_IMPORTED_MODULE_1__.SelectInput; },
-/* harmony export */   "SelectInputOption": function() { return /* binding */ SelectInputOption; }
+/* harmony export */   "SearchInput": function() { return /* reexport safe */ _SearchInput__WEBPACK_IMPORTED_MODULE_0__.SearchInput; }
 /* harmony export */ });
-/* harmony import */ var _InputBox_Option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../InputBox/Option */ "./src/components/InputBox/Option.tsx");
-/* harmony import */ var _SelectInput__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SelectInput */ "./src/components/SelectInput/SelectInput.tsx");
-
+/* harmony import */ var _SearchInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SearchInput */ "./src/components/SearchInput/SearchInput.tsx");
 
-var SelectInputOption = _InputBox_Option__WEBPACK_IMPORTED_MODULE_0__.Option;
 
 
 /***/ }),
 
-/***/ "./src/components/SelectPaginated/PaginatedMultiSelect.tsx":
-/*!*****************************************************************!*\
-  !*** ./src/components/SelectPaginated/PaginatedMultiSelect.tsx ***!
-  \*****************************************************************/
+/***/ "./src/components/Select/Select.tsx":
+/*!******************************************!*\
+  !*** ./src/components/Select/Select.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 */   "PaginatedMultiSelect": function() { return /* binding */ PaginatedMultiSelect; },
-/* harmony export */   "PaginatedMultiSelectFiltered": function() { return /* binding */ PaginatedMultiSelectFiltered; }
+/* harmony export */   "Select": function() { return /* binding */ Select; }
 /* 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 _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
-/* 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 _InputBox__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-/* harmony import */ var _Options_useVisible__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
-/* harmony import */ var _OptionsPaginated__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
-/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
-/* harmony import */ var _Select_SelectAddon__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx");
-/* harmony import */ var _Select_SelectFocus__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx");
+/* 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 _Icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
+/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
+/* harmony import */ var _SelectAddon__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./SelectAddon */ "./src/components/Select/SelectAddon.tsx");
+/* harmony import */ var _SelectFocus__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./SelectFocus */ "./src/components/Select/SelectFocus.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13011,13 +13021,6 @@ var __read = (undefined && undefined.__read) || function (o, n) {
     }
     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;
-};
-// @ts-nocheck
-
 
 
 
@@ -13029,112 +13032,149 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
-
-
-var SelectedOptions = (0,react__WEBPACK_IMPORTED_MODULE_1__.memo)(function (props) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_4__["default"], __assign({ maxWidth: '150px', withTruncatedText: true }, props))); });
-var prevent = function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
+var Wrapper = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, __assign({ is: 'div', "rcx-select__wrapper": true, ref: ref }, props))); });
+var useDidUpdate = function (func, deps) {
+    var didMount = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
+    var fn = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(func);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+        if (didMount.current) {
+            fn();
+        }
+        didMount.current = true;
+    }, deps || []);
 };
-var PaginatedMultiSelect = function (_a) {
-    var withTitle = _a.withTitle, 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 ? _Select_SelectFocus__WEBPACK_IMPORTED_MODULE_13__["default"] : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, placeholder = _a.placeholder, _e = _a.renderOptions, _Options = _e === void 0 ? _OptionsPaginated__WEBPACK_IMPORTED_MODULE_10__.OptionsPaginated : _e, endReached = _a.endReached, props = __rest(_a, ["withTitle", "value", "filter", "options", "error", "disabled", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
-    var _f = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value || []), 2), internalValue = _f[0], setInternalValue = _f[1];
-    var currentValue = value !== undefined ? value : internalValue;
-    var option = options.find(function (option) { return option.value === currentValue; });
-    var internalChanged = function (_a) {
+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, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.anchor, Anchor = _c === void 0 ? _SelectFocus__WEBPACK_IMPORTED_MODULE_10__["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;
+    } : _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;
+    } : _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_7__.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];
-        if (currentValue.some(function (item) { return item.value === value.value; })) {
-            var newValue_1 = currentValue.filter(function (item) { return item.value !== value.value; });
-            setInternalValue(newValue_1);
-            return onChange(newValue_1);
+        setInternalValue(value);
+        onChange(value);
+    });
+    var option = options.find(function (option) { return getValue(option) === internalValue; });
+    var index = options.indexOf(option);
+    var filteredOptions = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+        var mapOptions = function (_a) {
+            var _b = __read(_a, 2), value = _b[0], label = _b[1];
+            if (internalValue === value) {
+                return [value, label, true];
+            }
+            return [value, label];
+        };
+        var applyFilter = function (_a) {
+            var _b = __read(_a, 2), option = _b[1];
+            return !filter || ~option.toLowerCase().indexOf(filter.toLowerCase());
+        };
+        return options.filter(applyFilter).map(mapOptions);
+    }, [options, internalValue, filter]);
+    var _k = __read((0,_Options__WEBPACK_IMPORTED_MODULE_7__.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);
+        onChange(value);
+        hide();
+    });
+    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 renderAnchor = function (params) {
+        if ((0,_helpers_isForwardRefType__WEBPACK_IMPORTED_MODULE_2__.isForwardRefType)(Anchor)) {
+            return react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Anchor, __assign({}, params));
         }
-        var newValue = __spreadArray(__spreadArray([], __read(currentValue)), [value]);
-        setInternalValue(newValue);
-        return onChange(newValue);
+        if (typeof Anchor === 'function') {
+            return Anchor(params);
+        }
+        return null;
     };
-    var _g = __read((0,_Options_useVisible__WEBPACK_IMPORTED_MODULE_9__.useVisible)(), 3), visible = _g[0], hide = _g[1], show = _g[2];
-    var ref = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-    var _h = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _h.ref, borderBoxSize = _h.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_3__["default"].HIDDEN) &&
+        (valueLabel || placeholder || typeof placeholder === 'string');
     var handleClick = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () {
-        if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
+        var _a;
+        if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].VISIBLE) {
             return hide();
         }
-        if (ref && ref.current) {
-            ref.current.focus();
-            return show();
-        }
+        (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        return show();
     });
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, 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_8__["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_3__.Box, { is: 'div' },
-                        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox' },
-                            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_8__["default"], { all: 'x4' },
-                                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Anchor, { disabled: disabled, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide, order: 1, "rcx-input-box--undecorated": true, children: !value ? option || placeholder : null }),
-                                currentValue.map(function (value, index) {
-                                    var _a, _b;
-                                    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(SelectedOptions, __assign({}, (withTitle && {
-                                        title: value.label ||
-                                            ((_a = options.find(function (val) {
-                                                return val.value === value;
-                                            })) === null || _a === void 0 ? void 0 : _a.label),
-                                    }), { tabIndex: -1, role: 'option', key: index, onMouseDown: function (e) {
-                                            prevent(e);
-                                            internalChanged([value]);
-                                            return false;
-                                        }, children: value.label ||
-                                            ((_b = options.find(function (val) {
-                                                return val.value === value;
-                                            })) === null || _b === void 0 ? void 0 : _b.label) })));
-                                }))))))),
-        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_8__["default"], { inline: 'x4' },
-                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Select_SelectAddon__WEBPACK_IMPORTED_MODULE_12__["default"], { children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_6__.Icon, { name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE
-                            ? 'cross'
-                            : 'chevron-down', size: 'x20' }) }))),
-        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"], { visibility: visible },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Position__WEBPACK_IMPORTED_MODULE_11__["default"], { anchor: containerRef },
-                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options, __assign({}, (withTitle && { title: withTitle }), { width: borderBoxSize.inlineSize, onMouseDown: prevent, multiple: true, filter: filter, role: 'listbox', options: options, onSelect: internalChanged, endReached: endReached }))))));
-};
-var PaginatedMultiSelectFiltered = function (_a) {
-    var filter = _a.filter, setFilter = _a.setFilter, options = _a.options, placeholder = _a.placeholder, props = __rest(_a, ["filter", "setFilter", "options", "placeholder"]);
-    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(_Flex__WEBPACK_IMPORTED_MODULE_5__["default"].Item, { grow: 1 },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_7__.InputBox.Input, __assign({ ref: ref, placeholder: placeholder, value: filter, onInput: function (e) {
-                    return setFilter &&
-                        setFilter(e.currentTarget.value);
-                } }, props, { "rcx-input-box--undecorated": true }))));
-    }), []);
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PaginatedMultiSelect, __assign({ filter: filter, options: options }, props, { anchor: anchor })));
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.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 &&
+                (RenderSelected ? (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, key: getValue(option), onClick: internalChangedByClick })) : (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, { flexGrow: 1, is: 'span', mi: 'x4', "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint' }, visibleText))),
+            renderAnchor({
+                ref: anchorRef,
+                children: !value ? option || placeholder : null,
+                disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+                onClick: show,
+                onBlur: hide,
+                onKeyDown: handleKeyDown,
+                onKeyUp: handleKeyUp,
+            }),
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_6__["default"], { inline: 'x4' },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_SelectAddon__WEBPACK_IMPORTED_MODULE_9__["default"], { children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_5__.Icon, { name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].VISIBLE
+                            ? 'cross'
+                            : addonIcon || 'chevron-down', size: 'x20' }) }))),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_PositionAnimated__WEBPACK_IMPORTED_MODULE_8__["default"], { visible: visible, anchor: containerRef },
+            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 }))));
+});
+
+
+/***/ }),
+
+/***/ "./src/components/Select/SelectAddon.tsx":
+/*!***********************************************!*\
+  !*** ./src/components/Select/SelectAddon.tsx ***!
+  \***********************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+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 SelectAddon = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SelectAddon(props, ref) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'div', "rcx-select__addon": true, ref: ref }, props));
+});
+/* harmony default export */ __webpack_exports__["default"] = (SelectAddon);
+
+
 /***/ }),
 
-/***/ "./src/components/SelectPaginated/PaginatedSelect.tsx":
-/*!************************************************************!*\
-  !*** ./src/components/SelectPaginated/PaginatedSelect.tsx ***!
-  \************************************************************/
+/***/ "./src/components/Select/SelectFiltered.tsx":
+/*!**************************************************!*\
+  !*** ./src/components/Select/SelectFiltered.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 */   "PaginatedSelect": function() { return /* binding */ PaginatedSelect; }
+/* harmony export */   "SelectFiltered": function() { return /* binding */ SelectFiltered; }
 /* 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 _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _Options_useVisible__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
-/* harmony import */ var _OptionsPaginated__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
-/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
+/* 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 ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! . */ "./src/components/Select/index.ts");
+/* harmony import */ var _SelectFilteredAnchor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SelectFilteredAnchor */ "./src/components/Select/SelectFilteredAnchor.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13173,91 +13213,131 @@ var __read = (undefined && undefined.__read) || function (o, n) {
     }
     return ar;
 };
-// @ts-nocheck
-
 
 
 
+var SelectFiltered = 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(___WEBPACK_IMPORTED_MODULE_1__.Select, __assign({ placeholder: placeholder, filter: propFilter || filter, options: options }, props, { anchor: function (params) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SelectFilteredAnchor__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter }, params))); } })));
+};
 
 
+/***/ }),
 
+/***/ "./src/components/Select/SelectFilteredAnchor.tsx":
+/*!********************************************************!*\
+  !*** ./src/components/Select/SelectFilteredAnchor.tsx ***!
+  \********************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-var Addon = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ is: 'div', "rcx-select__addon": true, ref: ref }, props))); });
-var Wrapper = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ is: 'div', "rcx-select__wrapper": true, ref: ref }, props))); });
-var Focus = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ ref: ref, fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button' }, props))); });
-var prevent = function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-};
-var useDidUpdate = function (func) {
-    var didMount = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
-    var fn = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(func);
-    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        if (didMount.current) {
-            fn();
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* 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 _InputBox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/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];
         }
-        didMount.current = true;
-    }, [fn]);
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-var PaginatedSelect = function (_a) {
-    var value = _a.value, withTitle = _a.withTitle, filter = _a.filter, _setFilter = _a.setFilter, error = _a.error, disabled = _a.disabled, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.anchor, Anchor = _c === void 0 ? Focus : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.renderOptions, _Options = _f === void 0 ? _OptionsPaginated__WEBPACK_IMPORTED_MODULE_6__.OptionsPaginated : _f, endReached = _a.endReached, props = __rest(_a, ["value", "withTitle", "filter", "setFilter", "error", "disabled", "options", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
-    var _g = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value), 2), internalValue = _g[0], setInternalValue = _g[1];
-    var currentValue = value !== undefined ? value : internalValue;
-    var option = options.find(function (option) { return (option === null || option === void 0 ? void 0 : option.value) === currentValue; });
-    var _h = __read((0,_Options_useVisible__WEBPACK_IMPORTED_MODULE_5__.useVisible)(), 3), visible = _h[0], hide = _h[1], show = _h[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);
-        onChange(value);
-        hide();
-    });
-    var ref = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-    var _j = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _j.ref, borderBoxSize = _j.borderBoxSize;
-    useDidUpdate([filter, internalValue]);
-    var valueLabel = option === null || option === void 0 ? void 0 : option.label;
-    var visibleText = (filter === undefined || visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN) &&
-        (valueLabel || placeholder || typeof placeholder === 'string');
-    var handleClick = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () {
-        if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
-            return hide();
+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]];
         }
-        if (ref && ref.current) {
-            ref.current.focus();
-            return show();
+    return t;
+};
+
+
+var SelectFilteredAnchor = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SelectFilteredAnchor(_a, ref) {
+    var _children = _a.children, filter = _a.filter, onChangeFilter = _a.onChangeFilter, placeholder = _a.placeholder, props = __rest(_a, ["children", "filter", "onChangeFilter", "placeholder"]);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_1__.InputBox.Input, __assign({ mi: 'x4', flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onInput: function (e) {
+            return onChangeFilter(e.currentTarget.value);
+        } }, props, { "rcx-input-box--undecorated": true })));
+});
+/* harmony default export */ __webpack_exports__["default"] = (SelectFilteredAnchor);
+
+
+/***/ }),
+
+/***/ "./src/components/Select/SelectFocus.tsx":
+/*!***********************************************!*\
+  !*** ./src/components/Select/SelectFocus.tsx ***!
+  \***********************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+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 (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: 'p2m', color: valueLabel ? 'default' : 'hint' }, visibleText)),
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide }),
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Addon, { mi: 'x4', children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_4__.Icon, { name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE
-                        ? 'cross'
-                        : '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, __assign({}, (withTitle && { title: withTitle }), { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: options, onSelect: internalChangedByClick, endReached: endReached, onMouseDown: prevent })))));
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 
 
+var SelectFocus = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SelectFocus(props, ref) {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ ref: ref, fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button' }, props)));
+});
+/* harmony default export */ __webpack_exports__["default"] = (SelectFocus);
+
+
 /***/ }),
 
-/***/ "./src/components/SelectPaginated/PaginatedSelectFiltered.tsx":
-/*!********************************************************************!*\
-  !*** ./src/components/SelectPaginated/PaginatedSelectFiltered.tsx ***!
-  \********************************************************************/
+/***/ "./src/components/Select/index.ts":
+/*!****************************************!*\
+  !*** ./src/components/Select/index.ts ***!
+  \****************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "PaginatedSelectFiltered": function() { return /* binding */ PaginatedSelectFiltered; }
+/* harmony export */   "Select": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_0__.Select; },
+/* harmony export */   "SelectFiltered": function() { return /* reexport safe */ _SelectFiltered__WEBPACK_IMPORTED_MODULE_1__.SelectFiltered; }
 /* 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 ___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! . */ "./src/components/SelectPaginated/index.ts");
-/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Select */ "./src/components/Select/Select.tsx");
+/* harmony import */ var _SelectFiltered__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SelectFiltered */ "./src/components/Select/SelectFiltered.tsx");
+
+
+
+
+/***/ }),
+
+/***/ "./src/components/SelectInput/SelectInput.tsx":
+/*!****************************************************!*\
+  !*** ./src/components/SelectInput/SelectInput.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 */   "SelectInput": function() { return /* binding */ SelectInput; }
+/* 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 _Icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13299,45 +13379,41 @@ var __read = (undefined && undefined.__read) || function (o, n) {
 
 
 
-
-var PaginatedSelectFiltered = function (_a) {
-    var 
-    // filter,
-    // setFilter,
-    options = _a.options, placeholder = _a.placeholder, props = __rest(_a, ["options", "placeholder"]);
-    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, _onChange = _a.onChange, props = __rest(_a, ["children", "filter", "onChange"]);
-        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) {
-                setFilter(e.currentTarget.value);
-            }) }, props, { "rcx-input-box--undecorated": true })));
-    }), []);
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(___WEBPACK_IMPORTED_MODULE_2__.PaginatedSelect, __assign({ placeholder: undefined, filter: filter, options: options }, props, { anchor: anchor })));
-};
+var SelectInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function SelectInput(_a, ref) {
+    var children = _a.children, multiple = _a.multiple, placeholder = _a.placeholder, onChange = _a.onChange, props = __rest(_a, ["children", "multiple", "placeholder", "onChange"]);
+    var _b = __read((0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!props.value && !props.defaultValue), 2), isPlaceholderVisible = _b[0], setPlaceholderVisible = _b[1];
+    var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {
+        setPlaceholderVisible(!event.currentTarget.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange.call(event.currentTarget, event);
+    }, [onChange]);
+    if (multiple) {
+        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_2__.InputBox, __assign({ children: children }, props, { multiple: true, type: 'select', onChange: handleChange })));
+    }
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_2__.InputBox, __assign({ placeholderVisible: isPlaceholderVisible ? !!placeholder : undefined, ref: ref }, props, { addon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_1__.Icon, { name: 'chevron-down', size: 'x20' }), type: 'select', onChange: handleChange }),
+        placeholder && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_2__.InputBox.Placeholder, { value: '' }, placeholder)),
+        children));
+});
 
 
 /***/ }),
 
-/***/ "./src/components/SelectPaginated/index.ts":
-/*!*************************************************!*\
-  !*** ./src/components/SelectPaginated/index.ts ***!
-  \*************************************************/
+/***/ "./src/components/SelectInput/index.ts":
+/*!*********************************************!*\
+  !*** ./src/components/SelectInput/index.ts ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "PaginatedSelect": function() { return /* reexport safe */ _PaginatedSelect__WEBPACK_IMPORTED_MODULE_0__.PaginatedSelect; },
-/* harmony export */   "PaginatedSelectFiltered": function() { return /* reexport safe */ _PaginatedSelectFiltered__WEBPACK_IMPORTED_MODULE_1__.PaginatedSelectFiltered; },
-/* harmony export */   "PaginatedMultiSelect": function() { return /* reexport safe */ _PaginatedMultiSelect__WEBPACK_IMPORTED_MODULE_2__.PaginatedMultiSelect; },
-/* harmony export */   "PaginatedMultiSelectFiltered": function() { return /* reexport safe */ _PaginatedMultiSelect__WEBPACK_IMPORTED_MODULE_2__.PaginatedMultiSelectFiltered; }
+/* harmony export */   "SelectInput": function() { return /* reexport safe */ _SelectInput__WEBPACK_IMPORTED_MODULE_1__.SelectInput; },
+/* harmony export */   "SelectInputOption": function() { return /* binding */ SelectInputOption; }
 /* harmony export */ });
-/* harmony import */ var _PaginatedSelect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PaginatedSelect */ "./src/components/SelectPaginated/PaginatedSelect.tsx");
-/* harmony import */ var _PaginatedSelectFiltered__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PaginatedSelectFiltered */ "./src/components/SelectPaginated/PaginatedSelectFiltered.tsx");
-/* harmony import */ var _PaginatedMultiSelect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PaginatedMultiSelect */ "./src/components/SelectPaginated/PaginatedMultiSelect.tsx");
-
+/* harmony import */ var _InputBox_Option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../InputBox/Option */ "./src/components/InputBox/Option.tsx");
+/* harmony import */ var _SelectInput__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SelectInput */ "./src/components/SelectInput/SelectInput.tsx");
 
 
+var SelectInputOption = _InputBox_Option__WEBPACK_IMPORTED_MODULE_0__.Option;
 
 
 /***/ }),
@@ -15405,10 +15481,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "SearchInput": function() { return /* reexport safe */ _SearchInput__WEBPACK_IMPORTED_MODULE_41__.SearchInput; },
 /* harmony export */   "Select": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_42__.Select; },
 /* harmony export */   "SelectFiltered": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_42__.SelectFiltered; },
-/* harmony export */   "PaginatedMultiSelect": function() { return /* reexport safe */ _SelectPaginated__WEBPACK_IMPORTED_MODULE_43__.PaginatedMultiSelect; },
-/* harmony export */   "PaginatedMultiSelectFiltered": function() { return /* reexport safe */ _SelectPaginated__WEBPACK_IMPORTED_MODULE_43__.PaginatedMultiSelectFiltered; },
-/* harmony export */   "PaginatedSelect": function() { return /* reexport safe */ _SelectPaginated__WEBPACK_IMPORTED_MODULE_43__.PaginatedSelect; },
-/* harmony export */   "PaginatedSelectFiltered": function() { return /* reexport safe */ _SelectPaginated__WEBPACK_IMPORTED_MODULE_43__.PaginatedSelectFiltered; },
+/* harmony export */   "PaginatedMultiSelectFiltered": function() { return /* reexport safe */ _PaginatedSelect__WEBPACK_IMPORTED_MODULE_43__.PaginatedMultiSelectFiltered; },
+/* harmony export */   "PaginatedSelectFiltered": function() { return /* reexport safe */ _PaginatedSelect__WEBPACK_IMPORTED_MODULE_43__.PaginatedSelectFiltered; },
 /* harmony export */   "SelectInput": function() { return /* reexport safe */ _SelectInput__WEBPACK_IMPORTED_MODULE_44__.SelectInput; },
 /* harmony export */   "SelectInputOption": function() { return /* reexport safe */ _SelectInput__WEBPACK_IMPORTED_MODULE_44__.SelectInputOption; },
 /* harmony export */   "Sidebar": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__["default"]; },
@@ -15510,7 +15584,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Scrollable__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./Scrollable */ "./src/components/Scrollable/index.ts");
 /* harmony import */ var _SearchInput__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./SearchInput */ "./src/components/SearchInput/index.tsx");
 /* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./Select */ "./src/components/Select/index.ts");
-/* harmony import */ var _SelectPaginated__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ./SelectPaginated */ "./src/components/SelectPaginated/index.ts");
+/* harmony import */ var _PaginatedSelect__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ./PaginatedSelect */ "./src/components/PaginatedSelect/index.ts");
 /* harmony import */ var _SelectInput__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ./SelectInput */ "./src/components/SelectInput/index.ts");
 /* harmony import */ var _Sidebar__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ./Sidebar */ "./src/components/Sidebar/index.tsx");
 /* harmony import */ var _Skeleton__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ./Skeleton */ "./src/components/Skeleton/index.tsx");
@@ -16171,9 +16245,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "OptionSkeleton": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.OptionSkeleton; },
 /* harmony export */   "OptionTitle": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.OptionTitle; },
 /* harmony export */   "Options": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Options; },
-/* harmony export */   "PaginatedMultiSelect": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.PaginatedMultiSelect; },
 /* harmony export */   "PaginatedMultiSelectFiltered": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.PaginatedMultiSelectFiltered; },
-/* harmony export */   "PaginatedSelect": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.PaginatedSelect; },
 /* harmony export */   "PaginatedSelectFiltered": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.PaginatedSelectFiltered; },
 /* harmony export */   "Pagination": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Pagination; },
 /* harmony export */   "PasswordInput": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.PasswordInput; },
@@ -16270,7 +16342,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 if (true) {
-    console.log("fuselage: " + "0.31.5");
+    console.log("fuselage: " + "0.31.6");
 }