@rocket.chat/fuselage 0.31.6-dev.2 → 0.32.0-dev.0

package/dist/fuselage.development.js

@@ -96,62 +96,6 @@ module.exports = _nonIterableRest;
 
 /***/ }),
 
-/***/ "../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js":
-/*!****************************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js ***!
-  \****************************************************************************/
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-var objectWithoutPropertiesLoose = __webpack_require__(/*! ./objectWithoutPropertiesLoose */ "../../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js");
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-module.exports = _objectWithoutProperties;
-
-/***/ }),
-
-/***/ "../../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js":
-/*!*********************************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js ***!
-  \*********************************************************************************/
-/***/ (function(module) {
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-module.exports = _objectWithoutPropertiesLoose;
-
-/***/ }),
-
 /***/ "../../node_modules/@babel/runtime/helpers/slicedToArray.js":
 /*!******************************************************************!*\
   !*** ../../node_modules/@babel/runtime/helpers/slicedToArray.js ***!
@@ -174,28 +118,6 @@ module.exports = _slicedToArray;
 
 /***/ }),
 
-/***/ "../../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js":
-/*!**************************************************************************!*\
-  !*** ../../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js ***!
-  \**************************************************************************/
-/***/ (function(module) {
-
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-
-module.exports = _taggedTemplateLiteral;
-
-/***/ }),
-
 /***/ "../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js":
 /*!*******************************************************************************!*\
   !*** ../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js ***!
@@ -3041,7 +2963,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _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 _Box__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/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");
@@ -3065,7 +2987,7 @@ var _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/
 
 
 var Addon = function Addon(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, Object.assign({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], Object.assign({
     "rcx-autocomplete__addon": true
   }, props, {
     __self: _this,
@@ -3171,7 +3093,7 @@ function AutoComplete(_ref) {
     hide();
   });
   (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(reset, [filter]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], {
     "rcx-autocomplete": true,
     ref: containerRef,
     onClick: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function () {
@@ -3187,7 +3109,7 @@ function AutoComplete(_ref) {
       lineNumber: 66,
       columnNumber: 5
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], {
     display: "flex",
     flexGrow: 1,
     alignItems: "center",
@@ -3283,461 +3205,6 @@ function AutoComplete(_ref) {
 
 /***/ }),
 
-/***/ "./src/components/Box/index.js":
-/*!*************************************!*\
-  !*** ./src/components/Box/index.js ***!
-  \*************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Box": function() { return /* binding */ Box; }
-/* harmony export */ });
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__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 _hooks_useArrayLikeClassNameProp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
-/* harmony import */ var _hooks_useBoxOnlyProps__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/useBoxOnlyProps */ "./src/hooks/useBoxOnlyProps.ts");
-/* harmony import */ var _hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/useStyleSheet */ "./src/hooks/useStyleSheet.ts");
-/* harmony import */ var _BoxTransforms__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
-/* harmony import */ var _stylingProps__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./stylingProps */ "./src/components/Box/stylingProps.js");
-
-var _excluded = ["is", "children"];
-var _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/packages/fuselage/src/components/Box/index.js";
-
-
-
-
-
-
-var Box = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.memo)( /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function Box(_ref, ref) {
-  var _ref$is = _ref.is,
-      is = _ref$is === void 0 ? 'div' : _ref$is,
-      children = _ref.children,
-      props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default()(_ref, _excluded);
-
-  (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_4__.useStyleSheet)();
-
-  if (ref) {
-    props.ref = ref;
-  }
-
-  props = (0,_hooks_useArrayLikeClassNameProp__WEBPACK_IMPORTED_MODULE_2__.useArrayLikeClassNameProp)(props);
-  var transformFn = (0,_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__.useBoxTransform)();
-
-  if (transformFn) {
-    props = transformFn(props);
-  }
-
-  props = (0,_hooks_useBoxOnlyProps__WEBPACK_IMPORTED_MODULE_3__.useBoxOnlyProps)(props);
-  props = (0,_stylingProps__WEBPACK_IMPORTED_MODULE_6__.useStylingProps)(props);
-  var element = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createElement)(is, props, children);
-
-  if (transformFn) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__.BoxTransforms.Provider, {
-      children: element,
-      value: null,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 30,
-        columnNumber: 14
-      }
-    });
-  }
-
-  return element;
-}));
-Box.displayName = 'Box';
-
-/***/ }),
-
-/***/ "./src/components/Box/stylingProps.js":
-/*!********************************************!*\
-  !*** ./src/components/Box/stylingProps.js ***!
-  \********************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "useStylingProps": function() { return /* binding */ useStylingProps; }
-/* harmony export */ });
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../node_modules/@babel/runtime/helpers/slicedToArray.js");
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js");
-/* harmony import */ var _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @rocket.chat/css-in-js */ "../css-in-js/dist/index.module.js");
-/* harmony import */ var _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
-/* harmony import */ var _helpers_fromCamelToKebab__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../helpers/fromCamelToKebab */ "./src/helpers/fromCamelToKebab.ts");
-/* harmony import */ var _hooks_useStyle__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/useStyle.ts");
-/* harmony import */ var _styleTokens__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../styleTokens */ "./src/styleTokens.ts");
-
-
-
-var _excluded = ["htmlSize"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-
-
-
-
-
-
-var stringProp = {
-  toCSSValue: function toCSSValue(value) {
-    return typeof value === 'string' ? value : undefined;
-  }
-};
-var numberOrStringProp = {
-  toCSSValue: function toCSSValue(value) {
-    if (typeof value === 'number' || typeof value === 'string') {
-      return String(value);
-    }
-  }
-};
-var borderWidthProp = {
-  toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_7__.borderWidth
-};
-var borderRadiusProp = {
-  toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_7__.borderRadius
-};
-var colorProp = {
-  toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_7__.color
-};
-var sizeProp = {
-  toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_7__.size
-};
-var insetProp = {
-  toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_7__.inset
-};
-var marginProp = {
-  toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_7__.margin
-};
-var paddingProp = {
-  toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_7__.padding
-};
-var fontFamilyProp = {
-  toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontFamily
-};
-var fontSizeProp = {
-  toCSSValue: function toCSSValue(value) {
-    var _fontScale;
-
-    return ((_fontScale = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontScale)(value)) === null || _fontScale === void 0 ? void 0 : _fontScale.fontSize) || (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value);
-  }
-};
-var fontWeightProp = {
-  toCSSValue: function toCSSValue(value) {
-    var _fontScale2;
-
-    return ((_fontScale2 = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontScale)(value)) === null || _fontScale2 === void 0 ? void 0 : _fontScale2.fontWeight) || value;
-  }
-};
-var lineHeightProp = {
-  toCSSValue: function toCSSValue(value) {
-    var _fontScale3;
-
-    return ((_fontScale3 = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontScale)(value)) === null || _fontScale3 === void 0 ? void 0 : _fontScale3.lineHeight) || (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value);
-  }
-};
-var letterSpacingProp = {
-  toCSSValue: function toCSSValue(value) {
-    var _fontScale4;
-
-    return ((_fontScale4 = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontScale)(value)) === null || _fontScale4 === void 0 ? void 0 : _fontScale4.letterSpacing) || value;
-  }
-};
-
-var aliasOf = function aliasOf(propName) {
-  return {
-    aliasOf: propName
-  };
-};
-
-var propDefs = {
-  border: stringProp,
-  borderBlock: stringProp,
-  borderBlockStart: stringProp,
-  borderBlockEnd: stringProp,
-  borderInline: stringProp,
-  borderInlineStart: stringProp,
-  borderInlineEnd: stringProp,
-  borderWidth: borderWidthProp,
-  borderBlockWidth: borderWidthProp,
-  borderBlockStartWidth: borderWidthProp,
-  borderBlockEndWidth: borderWidthProp,
-  borderInlineWidth: borderWidthProp,
-  borderInlineStartWidth: borderWidthProp,
-  borderInlineEndWidth: borderWidthProp,
-  borderStyle: stringProp,
-  borderBlockStyle: stringProp,
-  borderBlockStartStyle: stringProp,
-  borderBlockEndStyle: stringProp,
-  borderInlineStyle: stringProp,
-  borderInlineStartStyle: stringProp,
-  borderInlineEndStyle: stringProp,
-  borderColor: colorProp,
-  borderBlockColor: colorProp,
-  borderBlockStartColor: colorProp,
-  borderBlockEndColor: colorProp,
-  borderInlineColor: colorProp,
-  borderInlineStartColor: colorProp,
-  borderInlineEndColor: colorProp,
-  borderRadius: borderRadiusProp,
-  borderStartStartRadius: borderRadiusProp,
-  borderStartEndRadius: borderRadiusProp,
-  borderEndStartRadius: borderRadiusProp,
-  borderEndEndRadius: borderRadiusProp,
-  color: colorProp,
-  backgroundColor: colorProp,
-  bg: aliasOf('backgroundColor'),
-  opacity: numberOrStringProp,
-  alignItems: stringProp,
-  alignContent: stringProp,
-  justifyItems: stringProp,
-  justifyContent: stringProp,
-  flexWrap: stringProp,
-  flexDirection: stringProp,
-  flexGrow: numberOrStringProp,
-  flexShrink: numberOrStringProp,
-  flexBasis: stringProp,
-  justifySelf: stringProp,
-  alignSelf: stringProp,
-  order: numberOrStringProp,
-  w: aliasOf('width'),
-  width: sizeProp,
-  minWidth: sizeProp,
-  maxWidth: sizeProp,
-  h: aliasOf('height'),
-  height: sizeProp,
-  minHeight: sizeProp,
-  maxHeight: sizeProp,
-  display: stringProp,
-  verticalAlign: stringProp,
-  overflow: stringProp,
-  overflowX: stringProp,
-  overflowY: stringProp,
-  position: stringProp,
-  zIndex: numberOrStringProp,
-  inset: insetProp,
-  insetBlock: insetProp,
-  insetBlockStart: insetProp,
-  insetBlockEnd: insetProp,
-  insetInline: insetProp,
-  insetInlineStart: insetProp,
-  insetInlineEnd: insetProp,
-  m: aliasOf('margin'),
-  margin: marginProp,
-  mb: aliasOf('marginBlock'),
-  marginBlock: marginProp,
-  mbs: aliasOf('marginBlockStart'),
-  marginBlockStart: marginProp,
-  mbe: aliasOf('marginBlockEnd'),
-  marginBlockEnd: marginProp,
-  mi: aliasOf('marginInline'),
-  marginInline: marginProp,
-  mis: aliasOf('marginInlineStart'),
-  marginInlineStart: marginProp,
-  mie: aliasOf('marginInlineEnd'),
-  marginInlineEnd: marginProp,
-  p: aliasOf('padding'),
-  padding: paddingProp,
-  pb: aliasOf('paddingBlock'),
-  paddingBlock: paddingProp,
-  pbs: aliasOf('paddingBlockStart'),
-  paddingBlockStart: paddingProp,
-  pbe: aliasOf('paddingBlockEnd'),
-  paddingBlockEnd: paddingProp,
-  pi: aliasOf('paddingInline'),
-  paddingInline: paddingProp,
-  pis: aliasOf('paddingInlineStart'),
-  paddingInlineStart: paddingProp,
-  pie: aliasOf('paddingInlineEnd'),
-  paddingInlineEnd: paddingProp,
-  fontFamily: fontFamilyProp,
-  fontSize: fontSizeProp,
-  fontStyle: stringProp,
-  fontWeight: fontWeightProp,
-  letterSpacing: letterSpacingProp,
-  lineHeight: lineHeightProp,
-  textAlign: stringProp,
-  textTransform: stringProp,
-  textDecorationLine: stringProp,
-  elevation: {
-    toStyle: function toStyle(value) {
-      if (value === '0') {
-        return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject || (_templateObject = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n          box-shadow: none;\n        "])));
-      }
-
-      if (value === '1') {
-        return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject2 || (_templateObject2 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n          box-shadow: 0px 0px 12px 0px ", ";\n        "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.color)('neutral-800-10'));
-      }
-
-      if (value === '2') {
-        return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject3 || (_templateObject3 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n          box-shadow: 0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n        "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.color)('neutral-800-8'), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.color)('neutral-800-12'));
-      }
-    }
-  },
-  invisible: {
-    toStyle: function toStyle(value) {
-      return value ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject4 || (_templateObject4 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n            visibility: hidden;\n            opacity: 0;\n          "]))) : undefined;
-    }
-  },
-  withTruncatedText: {
-    toStyle: function toStyle(value) {
-      return value ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject5 || (_templateObject5 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n          "]))) : undefined;
-    }
-  },
-  size: {
-    toStyle: function toStyle(value) {
-      return (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value) ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject6 || (_templateObject6 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n            width: ", " !important;\n            height: ", " !important;\n          "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value)) : undefined;
-    }
-  },
-  minSize: {
-    toStyle: function toStyle(value) {
-      return (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value) ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject7 || (_templateObject7 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n            min-width: ", " !important;\n            min-height: ", " !important;\n          "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value)) : undefined;
-    }
-  },
-  maxSize: {
-    toStyle: function toStyle(value) {
-      return (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value) ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject8 || (_templateObject8 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n            max-width: ", " !important;\n            max-height: ", " !important;\n          "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.size)(value)) : undefined;
-    }
-  },
-  fontScale: {
-    toStyle: function toStyle(value) {
-      var _fontScale5, _fontScale6, _fontScale7, _fontScale8;
-
-      return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject9 || (_templateObject9 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n      font-size: ", " !important;\n      font-weight: ", " !important;\n      letter-spacing: ", " !important;\n      line-height: ", " !important;\n    "])), (_fontScale5 = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontScale)(value)) === null || _fontScale5 === void 0 ? void 0 : _fontScale5.fontSize, (_fontScale6 = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontScale)(value)) === null || _fontScale6 === void 0 ? void 0 : _fontScale6.fontWeight, (_fontScale7 = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontScale)(value)) === null || _fontScale7 === void 0 ? void 0 : _fontScale7.letterSpacing, (_fontScale8 = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_7__.fontScale)(value)) === null || _fontScale8 === void 0 ? void 0 : _fontScale8.lineHeight);
-    }
-  }
-};
-var useStylingProps = function useStylingProps(originalProps) {
-  var htmlSize = originalProps.htmlSize,
-      props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(originalProps, _excluded);
-
-  var stylingProps = new Map();
-
-  for (var _i = 0, _Object$entries = Object.entries(props); _i < _Object$entries.length; _i++) {
-    var entry = _Object$entries[_i];
-
-    var _entry = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(entry, 2),
-        propName = _entry[0],
-        propValue = _entry[1];
-
-    var propDef = propDefs[propName];
-
-    if (!propDef) {
-      continue;
-    }
-
-    delete props[propName];
-
-    if (propValue === undefined) {
-      continue;
-    }
-
-    var effectivePropName = propName;
-    var effectivePropDef = propDef;
-
-    if (effectivePropDef.aliasOf) {
-      if (stylingProps.has(effectivePropDef.aliasOf)) {
-        continue;
-      }
-
-      effectivePropName = effectivePropDef.aliasOf;
-      effectivePropDef = propDefs[effectivePropName];
-    }
-
-    var _effectivePropDef = effectivePropDef,
-        toStyle = _effectivePropDef.toStyle;
-
-    if (effectivePropDef.toCSSValue) {
-      (function () {
-        var cssProperty = (0,_helpers_fromCamelToKebab__WEBPACK_IMPORTED_MODULE_5__.fromCamelToKebab)(effectivePropName);
-        var _effectivePropDef2 = effectivePropDef,
-            toCSSValue = _effectivePropDef2.toCSSValue;
-
-        toStyle = function toStyle(value) {
-          var cssValue = toCSSValue(value);
-
-          if (cssValue === undefined) {
-            return;
-          }
-
-          return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject10 || (_templateObject10 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n          ", ": ", " !important;\n        "])), cssProperty, cssValue);
-        };
-      })();
-    }
-
-    var style = toStyle(propValue);
-
-    if (style === undefined) {
-      continue;
-    }
-
-    stylingProps.set(effectivePropName, style);
-  }
-
-  var styles = stylingProps.size ? Array.from(stylingProps.values()) : undefined;
-  var newClassName = (0,_hooks_useStyle__WEBPACK_IMPORTED_MODULE_6__.useStyle)((0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject11 || (_templateObject11 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n      ", "\n    "])), styles));
-
-  if (newClassName) {
-    props.className = (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_4__.appendClassName)(props.className, newClassName);
-  }
-
-  if (htmlSize) {
-    props.size = htmlSize;
-  }
-
-  return props;
-};
-
-/***/ }),
-
-/***/ "./src/components/Box/withBoxStyling.js":
-/*!**********************************************!*\
-  !*** ./src/components/Box/withBoxStyling.js ***!
-  \**********************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "withBoxStyling": function() { return /* binding */ withBoxStyling; }
-/* 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 _hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/useStyleSheet */ "./src/hooks/useStyleSheet.ts");
-/* harmony import */ var _stylingProps__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stylingProps */ "./src/components/Box/stylingProps.js");
-
-
-
-var withBoxStyling = function withBoxStyling(component) {
-  var render = function render(props) {
-    if (typeof component === 'function') {
-      return component(props);
-    }
-
-    return /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(component, props);
-  };
-
-  var WithBoxStyling = function WithBoxStyling(props) {
-    (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__.useStyleSheet)();
-    props = (0,_stylingProps__WEBPACK_IMPORTED_MODULE_2__.useStylingProps)(props);
-    return render(props);
-  };
-
-  WithBoxStyling.displayName = "WithBoxStyling(".concat(component.displayName || component.name || 'Component', ")");
-  return WithBoxStyling;
-};
-
-/***/ }),
-
 /***/ "../memo/dist/esm/index.js":
 /*!*********************************!*\
   !*** ../memo/dist/esm/index.js ***!
@@ -5216,7 +4683,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _AccordionItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AccordionItem */ "./src/components/Accordion/AccordionItem.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -5233,7 +4700,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 function Accordion(props) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ animated: true, "rcx-accordion": true }, props));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ animated: true, "rcx-accordion": true }, props));
 }
 Accordion.Item = _AccordionItem__WEBPACK_IMPORTED_MODULE_2__.AccordionItem;
 
@@ -5255,7 +4722,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Chevron__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.tsx");
 /* harmony import */ var _ToggleSwitch__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ToggleSwitch */ "./src/components/ToggleSwitch/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
@@ -5351,14 +4818,14 @@ var AccordionItem = function Item(_a) {
         'aria-labelledby': titleId,
     };
     var barProps = noncollapsible ? nonCollapsibleProps : collapsibleProps;
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, __assign({ is: 'section', "rcx-accordion-item": true, className: className }, props),
-        title && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, __assign({ animated: true, "rcx-accordion-item__bar": true, "rcx-accordion-item__bar--disabled": disabled }, barProps),
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, { is: 'h1', "rcx-accordion-item__title": true, id: titleId }, title),
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ is: 'section', "rcx-accordion-item": true, className: className }, props),
+        title && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ animated: true, "rcx-accordion-item__bar": true, "rcx-accordion-item__bar--disabled": disabled }, barProps),
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], { is: 'h1', "rcx-accordion-item__title": true, id: titleId }, title),
             !noncollapsible && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null,
-                (disabled || onToggleEnabled) && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, { "rcx-accordion-item__toggle-switch": true },
+                (disabled || onToggleEnabled) && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], { "rcx-accordion-item__toggle-switch": true },
                     react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ToggleSwitch__WEBPACK_IMPORTED_MODULE_4__.ToggleSwitch, { checked: !disabled, onClick: handleToggleClick, onChange: onToggleEnabled }))),
                 react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Chevron__WEBPACK_IMPORTED_MODULE_3__.Chevron, { size: 'x24', up: expanded }))))),
-        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, { animated: true, "rcx-accordion-item__panel": true, "rcx-accordion-item__panel--expanded": panelExpanded, id: panelId, role: 'region' }, children)));
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], { animated: true, "rcx-accordion-item__panel": true, "rcx-accordion-item__panel--expanded": panelExpanded, id: panelId, role: 'region' }, children)));
 };
 
 
@@ -5767,38 +5234,526 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./src/components/Box/BoxTransforms.ts":
-/*!*********************************************!*\
-  !*** ./src/components/Box/BoxTransforms.ts ***!
-  \*********************************************/
+/***/ "./src/components/Box/Box.tsx":
+/*!************************************!*\
+  !*** ./src/components/Box/Box.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 */   "BoxTransforms": function() { return /* binding */ BoxTransforms; },
-/* harmony export */   "useBoxTransform": function() { return /* binding */ useBoxTransform; },
-/* harmony export */   "useComposedBoxTransform": function() { return /* binding */ useComposedBoxTransform; }
+/* harmony export */   "Box": function() { return /* binding */ Box; }
 /* 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__);
-
-var BoxTransforms = (0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);
-var useBoxTransform = function () { return (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(BoxTransforms); };
-var useComposedBoxTransform = function (fn) {
-    var parentFn = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(BoxTransforms);
-    return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
-        if (!parentFn) {
-            return fn;
-        }
-        if (!fn) {
-            return parentFn;
+/* harmony import */ var _hooks_useArrayLikeClassNameProp__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
+/* harmony import */ var _hooks_useBoxOnlyProps__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/useBoxOnlyProps */ "./src/hooks/useBoxOnlyProps.ts");
+/* harmony import */ var _hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/useStyleSheet */ "./src/hooks/useStyleSheet.ts");
+/* harmony import */ var _BoxTransforms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
+/* harmony import */ var _useStylingProps__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./useStylingProps */ "./src/components/Box/useStylingProps.ts");
+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 Box = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Box(_a, ref) {
+    var _b = _a.is, is = _b === void 0 ? 'div' : _b, children = _a.children, props = __rest(_a, ["is", "children"]);
+    (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_3__.useStyleSheet)();
+    var propsWithRef = props;
+    if (ref) {
+        propsWithRef.ref = ref;
+    }
+    var propsWithStringClassName = (0,_hooks_useArrayLikeClassNameProp__WEBPACK_IMPORTED_MODULE_1__.useArrayLikeClassNameProp)(propsWithRef);
+    var transformFn = (0,_BoxTransforms__WEBPACK_IMPORTED_MODULE_4__.useBoxTransform)();
+    if (transformFn) {
+        propsWithStringClassName = transformFn(propsWithStringClassName);
+    }
+    var propsWithoutStylingProps = (0,_useStylingProps__WEBPACK_IMPORTED_MODULE_5__.useStylingProps)(propsWithStringClassName);
+    var propsWithoutBoxOnlyProps = (0,_hooks_useBoxOnlyProps__WEBPACK_IMPORTED_MODULE_2__.useBoxOnlyProps)(propsWithoutStylingProps);
+    var element = (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(is, propsWithoutBoxOnlyProps, children);
+    if (transformFn) {
+        return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_BoxTransforms__WEBPACK_IMPORTED_MODULE_4__.BoxTransforms.Provider, { children: element, value: null });
+    }
+    return element;
+});
+/* harmony default export */ __webpack_exports__["default"] = ((0,react__WEBPACK_IMPORTED_MODULE_0__.memo)(Box));
+
+
+/***/ }),
+
+/***/ "./src/components/Box/BoxTransforms.ts":
+/*!*********************************************!*\
+  !*** ./src/components/Box/BoxTransforms.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 */   "BoxTransforms": function() { return /* binding */ BoxTransforms; },
+/* harmony export */   "useBoxTransform": function() { return /* binding */ useBoxTransform; },
+/* harmony export */   "useComposedBoxTransform": function() { return /* binding */ useComposedBoxTransform; }
+/* 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__);
+
+var BoxTransforms = (0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);
+var useBoxTransform = function () { return (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(BoxTransforms); };
+var useComposedBoxTransform = function (fn) {
+    var parentFn = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(BoxTransforms);
+    return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+        if (!parentFn) {
+            return fn;
+        }
+        if (!fn) {
+            return parentFn;
         }
         return function (props) { return fn(parentFn(props)); };
     }, [fn, parentFn]);
 };
 
 
+/***/ }),
+
+/***/ "./src/components/Box/index.tsx":
+/*!**************************************!*\
+  !*** ./src/components/Box/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 */   "default": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_0__["default"]; }
+/* harmony export */ });
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Box */ "./src/components/Box/Box.tsx");
+
+
+
+/***/ }),
+
+/***/ "./src/components/Box/stylingProps.ts":
+/*!********************************************!*\
+  !*** ./src/components/Box/stylingProps.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 */   "propDefs": function() { return /* binding */ propDefs; },
+/* harmony export */   "extractStylingProps": function() { return /* binding */ extractStylingProps; }
+/* 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 _helpers_fromCamelToKebab__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../helpers/fromCamelToKebab */ "./src/helpers/fromCamelToKebab.ts");
+/* harmony import */ var _styleTokens__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../styleTokens */ "./src/styleTokens.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 __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 __values = (undefined && undefined.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+
+
+
+var stringProp = {
+    toCSSValue: function (value) { return (typeof value === 'string' ? value : undefined); },
+};
+var numberOrStringProp = {
+    toCSSValue: function (value) {
+        if (typeof value === 'number' || typeof value === 'string') {
+            return String(value);
+        }
+        return undefined;
+    },
+};
+var borderWidthProp = {
+    toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_2__.borderWidth,
+};
+var borderRadiusProp = {
+    toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_2__.borderRadius,
+};
+var colorProp = {
+    toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_2__.color,
+};
+var sizeProp = {
+    toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_2__.size,
+};
+var insetProp = {
+    toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_2__.inset,
+};
+var marginProp = {
+    toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_2__.margin,
+};
+var paddingProp = {
+    toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_2__.padding,
+};
+var fontFamilyProp = {
+    toCSSValue: _styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontFamily,
+};
+var fontSizeProp = {
+    toCSSValue: function (value) { var _a; return ((_a = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontScale)(value)) === null || _a === void 0 ? void 0 : _a.fontSize) || (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value); },
+};
+var fontWeightProp = {
+    toCSSValue: function (value) { var _a; return value ? String(((_a = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontScale)(value)) === null || _a === void 0 ? void 0 : _a.fontWeight) || value) : undefined; },
+};
+var lineHeightProp = {
+    toCSSValue: function (value) { var _a; return ((_a = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontScale)(value)) === null || _a === void 0 ? void 0 : _a.lineHeight) || (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value); },
+};
+var letterSpacingProp = {
+    toCSSValue: function (value) { var _a; return value ? String(((_a = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontScale)(value)) === null || _a === void 0 ? void 0 : _a.letterSpacing) || value) : undefined; },
+};
+var aliasOf = function (propName) { return ({
+    aliasOf: propName,
+}); };
+var propDefs = {
+    border: stringProp,
+    borderBlock: stringProp,
+    borderBlockStart: stringProp,
+    borderBlockEnd: stringProp,
+    borderInline: stringProp,
+    borderInlineStart: stringProp,
+    borderInlineEnd: stringProp,
+    borderWidth: borderWidthProp,
+    borderBlockWidth: borderWidthProp,
+    borderBlockStartWidth: borderWidthProp,
+    borderBlockEndWidth: borderWidthProp,
+    borderInlineWidth: borderWidthProp,
+    borderInlineStartWidth: borderWidthProp,
+    borderInlineEndWidth: borderWidthProp,
+    borderStyle: stringProp,
+    borderBlockStyle: stringProp,
+    borderBlockStartStyle: stringProp,
+    borderBlockEndStyle: stringProp,
+    borderInlineStyle: stringProp,
+    borderInlineStartStyle: stringProp,
+    borderInlineEndStyle: stringProp,
+    borderColor: colorProp,
+    borderBlockColor: colorProp,
+    borderBlockStartColor: colorProp,
+    borderBlockEndColor: colorProp,
+    borderInlineColor: colorProp,
+    borderInlineStartColor: colorProp,
+    borderInlineEndColor: colorProp,
+    borderRadius: borderRadiusProp,
+    borderStartStartRadius: borderRadiusProp,
+    borderStartEndRadius: borderRadiusProp,
+    borderEndStartRadius: borderRadiusProp,
+    borderEndEndRadius: borderRadiusProp,
+    color: colorProp,
+    backgroundColor: colorProp,
+    bg: aliasOf('backgroundColor'),
+    opacity: numberOrStringProp,
+    alignItems: stringProp,
+    alignContent: stringProp,
+    justifyItems: stringProp,
+    justifyContent: stringProp,
+    flexWrap: stringProp,
+    flexDirection: stringProp,
+    flexGrow: numberOrStringProp,
+    flexShrink: numberOrStringProp,
+    flexBasis: stringProp,
+    justifySelf: stringProp,
+    alignSelf: stringProp,
+    order: numberOrStringProp,
+    w: aliasOf('width'),
+    width: sizeProp,
+    minWidth: sizeProp,
+    maxWidth: sizeProp,
+    h: aliasOf('height'),
+    height: sizeProp,
+    minHeight: sizeProp,
+    maxHeight: sizeProp,
+    display: stringProp,
+    verticalAlign: stringProp,
+    overflow: stringProp,
+    overflowX: stringProp,
+    overflowY: stringProp,
+    position: stringProp,
+    zIndex: numberOrStringProp,
+    inset: insetProp,
+    insetBlock: insetProp,
+    insetBlockStart: insetProp,
+    insetBlockEnd: insetProp,
+    insetInline: insetProp,
+    insetInlineStart: insetProp,
+    insetInlineEnd: insetProp,
+    m: aliasOf('margin'),
+    margin: marginProp,
+    mb: aliasOf('marginBlock'),
+    marginBlock: marginProp,
+    mbs: aliasOf('marginBlockStart'),
+    marginBlockStart: marginProp,
+    mbe: aliasOf('marginBlockEnd'),
+    marginBlockEnd: marginProp,
+    mi: aliasOf('marginInline'),
+    marginInline: marginProp,
+    mis: aliasOf('marginInlineStart'),
+    marginInlineStart: marginProp,
+    mie: aliasOf('marginInlineEnd'),
+    marginInlineEnd: marginProp,
+    p: aliasOf('padding'),
+    padding: paddingProp,
+    pb: aliasOf('paddingBlock'),
+    paddingBlock: paddingProp,
+    pbs: aliasOf('paddingBlockStart'),
+    paddingBlockStart: paddingProp,
+    pbe: aliasOf('paddingBlockEnd'),
+    paddingBlockEnd: paddingProp,
+    pi: aliasOf('paddingInline'),
+    paddingInline: paddingProp,
+    pis: aliasOf('paddingInlineStart'),
+    paddingInlineStart: paddingProp,
+    pie: aliasOf('paddingInlineEnd'),
+    paddingInlineEnd: paddingProp,
+    fontFamily: fontFamilyProp,
+    fontSize: fontSizeProp,
+    fontStyle: stringProp,
+    fontWeight: fontWeightProp,
+    letterSpacing: letterSpacingProp,
+    lineHeight: lineHeightProp,
+    textAlign: stringProp,
+    textTransform: stringProp,
+    textDecorationLine: stringProp,
+    elevation: {
+        toStyle: function (value) {
+            if (value === '0') {
+                return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          box-shadow: none;\n        "], ["\n          box-shadow: none;\n        "])));
+            }
+            if (value === '1') {
+                return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          box-shadow: 0px 0px 12px 0px ", ";\n        "], ["\n          box-shadow: 0px 0px 12px 0px ", ";\n        "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.color)('neutral-800-10'));
+            }
+            if (value === '2') {
+                return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          box-shadow: 0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n        "], ["\n          box-shadow: 0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n        "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.color)('neutral-800-8'), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.color)('neutral-800-12'));
+            }
+        },
+    },
+    invisible: {
+        toStyle: function (value) {
+            return value
+                ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            visibility: hidden;\n            opacity: 0;\n          "], ["\n            visibility: hidden;\n            opacity: 0;\n          "]))) : undefined;
+        },
+    },
+    withTruncatedText: {
+        toStyle: function (value) {
+            return value
+                ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n          "], ["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n          "]))) : undefined;
+        },
+    },
+    size: {
+        toStyle: function (value) {
+            return (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value)
+                ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            width: ", " !important;\n            height: ", " !important;\n          "], ["\n            width: ", " !important;\n            height: ", " !important;\n          "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value)) : undefined;
+        },
+    },
+    minSize: {
+        toStyle: function (value) {
+            return (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value)
+                ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            min-width: ", " !important;\n            min-height: ", " !important;\n          "], ["\n            min-width: ", " !important;\n            min-height: ", " !important;\n          "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value)) : undefined;
+        },
+    },
+    maxSize: {
+        toStyle: function (value) {
+            return (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value)
+                ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            max-width: ", " !important;\n            max-height: ", " !important;\n          "], ["\n            max-width: ", " !important;\n            max-height: ", " !important;\n          "])), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value), (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.size)(value)) : undefined;
+        },
+    },
+    fontScale: {
+        toStyle: function (value) {
+            var _a, _b, _c, _d;
+            return (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      font-size: ", " !important;\n      font-weight: ", " !important;\n      letter-spacing: ", " !important;\n      line-height: ", " !important;\n    "], ["\n      font-size: ", " !important;\n      font-weight: ", " !important;\n      letter-spacing: ", " !important;\n      line-height: ", " !important;\n    "])), (_a = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontScale)(value)) === null || _a === void 0 ? void 0 : _a.fontSize, (_b = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontScale)(value)) === null || _b === void 0 ? void 0 : _b.fontWeight, (_c = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontScale)(value)) === null || _c === void 0 ? void 0 : _c.letterSpacing, (_d = (0,_styleTokens__WEBPACK_IMPORTED_MODULE_2__.fontScale)(value)) === null || _d === void 0 ? void 0 : _d.lineHeight);
+        },
+    },
+};
+var compiledPropDefs = new Map(Object.entries(propDefs).map(function (_a) {
+    var _b = __read(_a, 2), propName = _b[0], propDef = _b[1];
+    if ('aliasOf' in propDef) {
+        var effectivePropName_1 = propDef.aliasOf;
+        return [
+            propName,
+            function (value, stylingProps) {
+                if (stylingProps.has(effectivePropName_1)) {
+                    return;
+                }
+                var inject = compiledPropDefs.get(effectivePropName_1);
+                inject === null || inject === void 0 ? void 0 : inject(value, stylingProps);
+            },
+        ];
+    }
+    if ('toCSSValue' in propDef) {
+        var cssProperty_1 = (0,_helpers_fromCamelToKebab__WEBPACK_IMPORTED_MODULE_1__.fromCamelToKebab)(propName);
+        var toCSSValue_1 = propDef.toCSSValue;
+        return [
+            propName,
+            function (value, stylingProps) {
+                var cssValue = toCSSValue_1(value);
+                if (cssValue === undefined) {
+                    return;
+                }
+                stylingProps.set(propName, (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                ", ": ", " !important;\n              "], ["\n                ", ": ", " !important;\n              "])), cssProperty_1, cssValue));
+            },
+        ];
+    }
+    var toStyle = propDef.toStyle;
+    return [
+        propName,
+        function (value, stylingProps) {
+            var style = toStyle(value);
+            if (style === undefined) {
+                return;
+            }
+            stylingProps.set(propName, style);
+        },
+    ];
+}));
+var extractStylingProps = function (props) {
+    var e_1, _a;
+    var stylingProps = new Map();
+    var newProps = {};
+    try {
+        for (var _b = __values(Object.entries(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = __read(_c.value, 2), propName = _d[0], value = _d[1];
+            var inject = compiledPropDefs.get(propName);
+            if (!inject) {
+                newProps[propName] = value;
+                continue;
+            }
+            if (value === undefined) {
+                continue;
+            }
+            inject(value, stylingProps);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    var styles = stylingProps.size
+        ? (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), Array.from(stylingProps.values())) : undefined;
+    return [newProps, styles];
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+
+
+/***/ }),
+
+/***/ "./src/components/Box/useStylingProps.ts":
+/*!***********************************************!*\
+  !*** ./src/components/Box/useStylingProps.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 */   "useStylingProps": function() { return /* binding */ useStylingProps; }
+/* harmony export */ });
+/* harmony import */ var _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
+/* harmony import */ var _hooks_useStyle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/useStyle.ts");
+/* harmony import */ var _stylingProps__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stylingProps */ "./src/components/Box/stylingProps.ts");
+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 useStylingProps = function (originalProps) {
+    var _a = __read((0,_stylingProps__WEBPACK_IMPORTED_MODULE_2__.extractStylingProps)(originalProps), 2), props = _a[0], styles = _a[1];
+    var newClassName = (0,_hooks_useStyle__WEBPACK_IMPORTED_MODULE_1__.useStyle)(styles, undefined);
+    if (newClassName) {
+        props.className = props.className
+            ? (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_0__.appendClassName)(props.className, newClassName)
+            : newClassName;
+    }
+    return props;
+};
+
+
+/***/ }),
+
+/***/ "./src/components/Box/withBoxStyling.ts":
+/*!**********************************************!*\
+  !*** ./src/components/Box/withBoxStyling.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 */   "withBoxStyling": function() { return /* binding */ withBoxStyling; }
+/* 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 _hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/useStyleSheet */ "./src/hooks/useStyleSheet.ts");
+/* harmony import */ var _useStylingProps__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useStylingProps */ "./src/components/Box/useStylingProps.ts");
+
+
+
+var withBoxStyling = function (component) {
+    var WithBoxStyling = function (props) {
+        (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__.useStyleSheet)();
+        var propsWithoutStylingProps = (0,_useStylingProps__WEBPACK_IMPORTED_MODULE_2__.useStylingProps)(props);
+        return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(component, propsWithoutStylingProps);
+    };
+    WithBoxStyling.displayName = "WithBoxStyling(" + (component.displayName || component.name || 'Component') + ")";
+    return WithBoxStyling;
+};
+
+
 /***/ }),
 
 /***/ "./src/components/Button/ActionButton.tsx":
@@ -5874,7 +5829,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -5926,7 +5881,7 @@ var Button = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Button(_
         }
         return {};
     }, [danger, ghost, ghostish, info, nude, primary, success, warning]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ animated: true, is: is, "rcx-button": true }, kindAndVariantProps, { "rcx-button--small": small, "rcx-button--square": square, "rcx-button--small-square": small && square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, ref: ref }, extraProps, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ animated: true, is: is, "rcx-button": true }, kindAndVariantProps, { "rcx-button--small": small, "rcx-button--square": square, "rcx-button--small-square": small && square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, ref: ref }, extraProps, props)));
 });
 /* harmony default export */ __webpack_exports__["default"] = (Button);
 
@@ -5969,7 +5924,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
 /* harmony import */ var _helpers_patchChildren__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -5998,7 +5953,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var ButtonGroup = function (_a) {
     var _b = _a.align, align = _b === void 0 ? 'start' : _b, children = _a.children, stretch = _a.stretch, vertical = _a.vertical, wrap = _a.wrap, small = _a.small, medium = _a.medium, props = __rest(_a, ["align", "children", "stretch", "vertical", "wrap", "small", "medium"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ "rcx-button-group": true, "rcx-button-group--align": align, "rcx-button-group--stretch": stretch, "rcx-button-group--vertical": vertical, "rcx-button-group--small": small, "rcx-button-group--medium": medium, "rcx-button-group--wrap": wrap, role: 'group' }, props), (0,_helpers_patchChildren__WEBPACK_IMPORTED_MODULE_2__.patchChildren)(children, function (childProps) { return ({
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], __assign({ "rcx-button-group": true, "rcx-button-group--align": align, "rcx-button-group--stretch": stretch, "rcx-button-group--vertical": vertical, "rcx-button-group--small": small, "rcx-button-group--medium": medium, "rcx-button-group--wrap": wrap, role: 'group' }, props), (0,_helpers_patchChildren__WEBPACK_IMPORTED_MODULE_2__.patchChildren)(children, function (childProps) { return ({
         className: (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_1__.appendClassName)(childProps.className, 'rcx-button-group__item'),
     }); })));
 };
@@ -6036,7 +5991,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -6070,11 +6025,11 @@ var Callout = function (_a) {
         (type === 'warning' && 'warning') ||
         (type === 'danger' && 'ban') ||
         'info-circled';
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'section', "rcx-callout": true, "rcx-callout--type": type }, props),
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'section', "rcx-callout": true, "rcx-callout--type": type }, props),
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, { name: iconName, size: 'x20' }),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-callout__wrapper": true },
-            title && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'h1', "rcx-callout__title": true }, title)),
-            children && react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-callout__children": true }, children))));
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-callout__wrapper": true },
+            title && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'h1', "rcx-callout__title": true }, title)),
+            children && react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-callout__children": true }, children))));
 };
 
 
@@ -6112,7 +6067,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Label__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -6155,9 +6110,9 @@ var CheckBox = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function CheckB
         }
         onChange && onChange.call(innerRef.current, event);
     }, [innerRef, indeterminate, onChange]);
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, __assign({ is: _Label__WEBPACK_IMPORTED_MODULE_3__.Label, "rcx-check-box": true }, props),
-        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, { is: 'input', "rcx-check-box__input": true, autoComplete: autoComplete, checked: checked, defaultChecked: defaultChecked, disabled: disabled, form: form, id: id, name: name, required: required, tabIndex: tabIndex, type: 'checkbox', value: value, "data-qa": dataQa || qa, ref: mergedRef, onChange: handleChange, onInput: onInput, onInvalid: onInvalid }),
-        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, { is: 'i', "rcx-check-box__fake": true, "aria-hidden": 'true' })));
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ is: _Label__WEBPACK_IMPORTED_MODULE_3__.Label, "rcx-check-box": true }, props),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], { is: 'input', "rcx-check-box__input": true, autoComplete: autoComplete, checked: checked, defaultChecked: defaultChecked, disabled: disabled, form: form, id: id, name: name, required: required, tabIndex: tabIndex, type: 'checkbox', value: value, "data-qa": dataQa || qa, ref: mergedRef, onChange: handleChange, onInput: onInput, onInvalid: onInvalid }),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], { is: 'i', "rcx-check-box__fake": true, "aria-hidden": 'true' })));
 });
 
 
@@ -6193,7 +6148,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -6223,7 +6178,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 function Chevron(_a) {
     var up = _a.up, right = _a.right, down = _a.down, left = _a.left, size = _a.size, props = __rest(_a, ["up", "right", "down", "left", "size"]);
     var children = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon, { name: 'chevron-down', size: size }); }, [size]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'span', children: children, "rcx-chevron": true, "rcx-chevron--up": up, "rcx-chevron--right": right, "rcx-chevron--down": down, "rcx-chevron--left": left }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'span', children: children, "rcx-chevron": true, "rcx-chevron--up": up, "rcx-chevron--right": right, "rcx-chevron--down": down, "rcx-chevron--left": left }, props)));
 }
 
 
@@ -6318,7 +6273,7 @@ Chip.displayName = 'Chip';
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _Box_withBoxStyling__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Box/withBoxStyling */ "./src/components/Box/withBoxStyling.js");
+/* harmony import */ var _Box_withBoxStyling__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Box/withBoxStyling */ "./src/components/Box/withBoxStyling.ts");
 /* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Chip */ "./src/components/Chip/Chip.tsx");
 
 
@@ -6337,7 +6292,7 @@ __webpack_require__.r(__webpack_exports__);
 __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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 /* harmony import */ var _Skeleton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
@@ -6369,13 +6324,13 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 var CodeSnippet = function (_a) {
     var children = _a.children, onClick = _a.onClick, _b = _a.buttonText, buttonText = _b === void 0 ? 'Copy' : _b, props = __rest(_a, ["children", "onClick", "buttonText"]);
     if (!children) {
-        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'pre', "rcx-code-snippet": true }, props),
+        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'pre', "rcx-code-snippet": true }, props),
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Skeleton__WEBPACK_IMPORTED_MODULE_3__.Skeleton, { w: '100%' })));
     }
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'pre', "rcx-code-snippet": true }, props),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-code-snippet__codebox": true },
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'pre', "rcx-code-snippet": true }, props),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-code-snippet__codebox": true },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("code", null, children)),
-        onClick && children && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, null,
+        onClick && children && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], null,
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_2__.Button, { small: true, primary: true, onClick: onClick }, buttonText)))));
 };
 /* harmony default export */ __webpack_exports__["default"] = (CodeSnippet);
@@ -6413,7 +6368,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -6427,7 +6382,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var Divider = function (props) { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'hr', "rcx-divider": true }, props)); };
+var Divider = function (props) { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'hr', "rcx-divider": true }, props)); };
 
 
 
@@ -6616,7 +6571,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -6631,7 +6586,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 function Field(props) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-field": true }, props));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-field": true }, props));
 }
 
 
@@ -6650,7 +6605,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -6664,7 +6619,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var FieldDescription = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'span', "rcx-field__description": true }, props))); };
+var FieldDescription = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'span', "rcx-field__description": true }, props))); };
 
 
 /***/ }),
@@ -6682,7 +6637,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -6696,7 +6651,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var FieldError = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'span', "rcx-field__error": true }, props))); };
+var FieldError = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'span', "rcx-field__error": true }, props))); };
 
 
 /***/ }),
@@ -6714,7 +6669,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -6728,7 +6683,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var FieldHint = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'span', "rcx-field__hint": true }, props))); };
+var FieldHint = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'span', "rcx-field__hint": true }, props))); };
 
 
 /***/ }),
@@ -6746,7 +6701,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* 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) {
@@ -6762,7 +6717,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-var FieldLabel = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: _Label__WEBPACK_IMPORTED_MODULE_2__.Label, "rcx-field__label": true }, props))); };
+var FieldLabel = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: _Label__WEBPACK_IMPORTED_MODULE_2__.Label, "rcx-field__label": true }, props))); };
 
 
 /***/ }),
@@ -6777,7 +6732,7 @@ var FieldLabel = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___d
 __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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -6791,7 +6746,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var FieldLink = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'a', target: '_blank', "rcx-field__link": true }, props))); };
+var FieldLink = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'a', target: '_blank', "rcx-field__link": true }, props))); };
 /* harmony default export */ __webpack_exports__["default"] = (FieldLink);
 
 
@@ -6810,7 +6765,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -6824,7 +6779,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var FieldRow = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'span', "rcx-field__row": true }, props))); };
+var FieldRow = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'span', "rcx-field__row": true }, props))); };
 
 
 /***/ }),
@@ -6878,7 +6833,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
 /* harmony import */ var _helpers_patchChildren__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -6907,7 +6862,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var FieldGroup = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ is: 'fieldset', "rcx-field-group": true, role: 'group' }, props), (0,_helpers_patchChildren__WEBPACK_IMPORTED_MODULE_2__.patchChildren)(children, function (childProps) { return ({
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], __assign({ is: 'fieldset', "rcx-field-group": true, role: 'group' }, props), (0,_helpers_patchChildren__WEBPACK_IMPORTED_MODULE_2__.patchChildren)(children, function (childProps) { return ({
         className: (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_1__.appendClassName)(childProps.className, 'rcx-field-group__item'),
     }); })));
 };
@@ -7060,7 +7015,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _GridItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./GridItem */ "./src/components/Grid/GridItem.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -7089,8 +7044,8 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var Grid = function (_a) {
     var xs = _a.xs, sm = _a.sm, md = _a.md, lg = _a.lg, xl = _a.xl, props = __rest(_a, ["xs", "sm", "md", "lg", "xl"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-grid__wrapper": true },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-grid": true, "rcx-grid--xs": xs, "rcx-grid--sm": sm, "rcx-grid--md": md, "rcx-grid--lg": lg, "rcx-grid--xl": xl }, props))));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-grid__wrapper": true },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-grid": true, "rcx-grid--xs": xs, "rcx-grid--sm": sm, "rcx-grid--md": md, "rcx-grid--lg": lg, "rcx-grid--xl": xl }, props))));
 };
 Grid.Item = _GridItem__WEBPACK_IMPORTED_MODULE_2__.GridItem;
 
@@ -7110,7 +7065,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7137,7 +7092,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var GridItem = function (_a) {
     var xs = _a.xs, sm = _a.sm, md = _a.md, lg = _a.lg, xl = _a.xl, props = __rest(_a, ["xs", "sm", "md", "lg", "xl"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-grid__item": true, "rcx-grid__item--xs": xs, "rcx-grid__item--sm": sm, "rcx-grid__item--md": md, "rcx-grid__item--lg": lg, "rcx-grid__item--xl": xl }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-grid__item": true, "rcx-grid__item--xs": xs, "rcx-grid__item--sm": sm, "rcx-grid__item--md": md, "rcx-grid__item--lg": lg, "rcx-grid__item--xl": xl }, props)));
 };
 
 
@@ -7180,7 +7135,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _rocket_chat_icons__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_icons__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 _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7208,7 +7163,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var Icon = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function Icon(_a, ref) {
     var name = _a.name, size = _a.size, props = __rest(_a, ["name", "size"]);
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, __assign({ is: 'i', "rcx-icon": true, "rcx-icon--name": name, children: (_rocket_chat_icons__WEBPACK_IMPORTED_MODULE_0___default())[name], "aria-hidden": 'true', fontSize: size, ref: ref }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ is: 'i', "rcx-icon": true, "rcx-icon--name": name, children: (_rocket_chat_icons__WEBPACK_IMPORTED_MODULE_0___default())[name], "aria-hidden": 'true', fontSize: size, ref: ref }, props)));
 });
 
 
@@ -7244,7 +7199,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7259,7 +7214,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 var Addon = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Addon(props, ref) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'span', "rcx-input-box__addon": true, ref: ref }, props));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'span', "rcx-input-box__addon": true, ref: ref }, props));
 });
 
 
@@ -7278,7 +7233,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7293,7 +7248,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 var Input = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Input(props, ref) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'input', animated: true, "rcx-input-box": true, ref: ref }, props));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'input', animated: true, "rcx-input-box": true, ref: ref }, props));
 });
 
 
@@ -7415,7 +7370,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Skeleton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -7431,7 +7386,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-var InputBoxSkeleton = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-skeleton__input": true }, props),
+var InputBoxSkeleton = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-skeleton__input": true }, props),
     react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Skeleton__WEBPACK_IMPORTED_MODULE_2__.Skeleton, { width: '100%' }))); };
 
 
@@ -7450,7 +7405,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7465,7 +7420,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 var Option = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Option(props, ref) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'option', "rcx-input-box__option": true, ref: ref }, props));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'option', "rcx-input-box__option": true, ref: ref }, props));
 });
 
 
@@ -7484,7 +7439,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7499,7 +7454,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 var Placeholder = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Placeholder(props, ref) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'option', "rcx-input-box__placeholder": true, ref: ref }, props));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'option', "rcx-input-box__placeholder": true, ref: ref }, props));
 });
 
 
@@ -7518,7 +7473,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* 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) {
@@ -7534,7 +7489,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-var Wrapper = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ animated: true, is: _Label__WEBPACK_IMPORTED_MODULE_2__.Label, "rcx-input-box__wrapper": true }, props))); };
+var Wrapper = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ animated: true, is: _Label__WEBPACK_IMPORTED_MODULE_2__.Label, "rcx-input-box__wrapper": true }, props))); };
 
 
 /***/ }),
@@ -7596,7 +7551,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7627,7 +7582,7 @@ function Label(_a) {
     var isInsideLabel = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(LabelContext);
     var component = is || (isInsideLabel && 'span') || 'label';
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(LabelContext.Provider, { value: true },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: component, "rcx-label": true, "rcx-label--disabled": disabled, "rcx-label--required": required }, props))));
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: component, "rcx-label": true, "rcx-label--disabled": disabled, "rcx-label--required": required }, props))));
 }
 
 
@@ -7922,7 +7877,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7949,7 +7904,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var MessageBlock = function (_a) {
     var _className = _a.className, props = __rest(_a, ["className"]);
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-message-block": true }, props));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-message-block": true }, props));
 };
 
 
@@ -10089,7 +10044,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10116,8 +10071,8 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var Modal = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (_a, ref) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'dialog', "rcx-modal": true }, props),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { ref: ref, "rcx-modal__inner": true, elevation: '2' }, children)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'dialog', "rcx-modal": true }, props),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { ref: ref, "rcx-modal__inner": true, elevation: '2' }, children)));
 });
 
 
@@ -10136,7 +10091,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10150,7 +10105,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var ModalBackdrop = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-modal__backdrop": true }, props))); };
+var ModalBackdrop = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-modal__backdrop": true }, props))); };
 
 
 /***/ }),
@@ -10200,7 +10155,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Scrollable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -10230,8 +10185,8 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 var ModalContent = function (_a) {
     var children = _a.children, onScrollContent = _a.onScrollContent, props = __rest(_a, ["children", "onScrollContent"]);
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Scrollable__WEBPACK_IMPORTED_MODULE_2__["default"], { vertical: true, onScrollContent: onScrollContent },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-modal__content": true },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-modal__content-wrapper": true }, props), children))));
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-modal__content": true },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-modal__content-wrapper": true }, props), children))));
 };
 
 
@@ -10250,12 +10205,12 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 
 
 var ModalFooter = function (_a) {
     var children = _a.children;
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-modal__footer": true }, children));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-modal__footer": true }, children));
 };
 
 
@@ -10274,7 +10229,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -10303,8 +10258,8 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var ModalHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-modal__header": true, is: 'header' }, props),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-modal__header-inner": true },
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-modal__header": true, is: 'header' }, props),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-modal__header-inner": true },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_2__["default"], { all: 'x8' }, children))));
 };
 
@@ -10371,7 +10326,7 @@ __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 _Avatar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Avatar */ "./src/components/Avatar/index.tsx");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10386,7 +10341,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-var ModalThumb = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, null,
+var ModalThumb = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], null,
     react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Avatar__WEBPACK_IMPORTED_MODULE_1__.Avatar, __assign({ size: 'x32' }, props)))); };
 
 
@@ -10405,7 +10360,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10432,7 +10387,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var ModalTitle = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-modal__title": true }, props), children));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-modal__title": true }, props), children));
 };
 
 
@@ -10507,7 +10462,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Flex__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
 /* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 /* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
@@ -10630,7 +10585,7 @@ var MultiSelect = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a
         }
         return null;
     };
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, __assign({ is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () {
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], __assign({ is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () {
             var _a;
             if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].VISIBLE) {
                 return hide();
@@ -10641,8 +10596,8 @@ var MultiSelect = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_5__["default"].Item, { grow: 1 },
             react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_7__["default"], { inline: 'x4' },
                 react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_5__["default"].Container, null,
-                    react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, { is: 'div' },
-                        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox' },
+                    react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], { is: 'div' },
+                        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox' },
                             react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_7__["default"], { all: 'x4' },
                                 renderAnchor({
                                     ref: anchorRef,
@@ -10852,7 +10807,9 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var SelectedOptions = (0,react__WEBPACK_IMPORTED_MODULE_0__.memo)(function (props) { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({}, props)); });
+var SelectedOptions = (0,react__WEBPACK_IMPORTED_MODULE_0__.memo)(function SelectedOptions(props) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({}, props));
+});
 
 
 /***/ }),
@@ -11400,7 +11357,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Scrollable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
 /* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
 /* harmony import */ var _Option__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Option */ "./src/components/Options/Option/index.tsx");
@@ -11494,7 +11451,7 @@ var Options = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (_a, re
             }
         });
     }, [options, multiple, cursor, onSelect, OptionComponent]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-options": true }, props, { ref: ref }),
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-options": true }, props, { ref: ref }),
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Tile__WEBPACK_IMPORTED_MODULE_3__["default"], { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2' },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Scrollable__WEBPACK_IMPORTED_MODULE_2__["default"], { vertical: true, smooth: true },
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Tile__WEBPACK_IMPORTED_MODULE_3__["default"], { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent, onClick: prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', "aria-activedescendant": ((_b = options === null || options === void 0 ? void 0 : options[cursor]) === null || _b === void 0 ? void 0 : _b[0])
@@ -11754,7 +11711,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_virtuoso__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-virtuoso */ "../../node_modules/react-virtuoso/dist/index.m.js");
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _CheckBox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../CheckBox */ "./src/components/CheckBox/index.ts");
 /* harmony import */ var _Options_Option__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/Option */ "./src/components/Options/Option/index.tsx");
 /* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
@@ -11825,7 +11782,7 @@ var OptionsPaginated = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(functio
                 return false;
             }, key: value, value: value, selected: selected || (multiple !== true && null), focus: cursor === index || null })));
     };
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __assign({ "rcx-options": true }, props, { ref: ref }),
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], __assign({ "rcx-options": true }, props, { ref: ref }),
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Tile__WEBPACK_IMPORTED_MODULE_6__["default"], { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2' }, !options.length ? (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(EmptyComponent, null)) : (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtuoso__WEBPACK_IMPORTED_MODULE_7__.Virtuoso, { endReached: endReached, style: { height: '144px' }, totalCount: options.length, data: options, 
             // TODO Add a scroller element
             // components={{ Scroller: ScrollableContentWrapper }}
@@ -11862,139 +11819,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");
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-
-
-
-var 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 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; });
-        }
-        if (currentPage < 5) {
-            // 0 1 2 3 4 ... N
-            return [0, 1, 2, 3, 4, '⋯', pages - 1];
-        }
-        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' })))))));
-};
-
-
-/***/ }),
-
-/***/ "./src/components/Pagination/index.ts":
-/*!********************************************!*\
-  !*** ./src/components/Pagination/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 */   "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");
-
-
-
-/***/ }),
-
-/***/ "./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.tsx");
+/* 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++) {
@@ -12006,6 +11858,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 +11885,133 @@ 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
+
+
 
 
 
 
-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");
 
 
 
+
+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 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);
+        }
+        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 (ref && ref.current) {
+            ref.current.focus();
+            return show();
+        }
+    });
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], __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__["default"], { is: 'div' },
+                        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__["default"], { 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/Position/Position.tsx":
-/*!**********************************************!*\
-  !*** ./src/components/Position/Position.tsx ***!
-  \**********************************************/
+/***/ "./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 */   "PaginatedSelect": function() { return /* binding */ PaginatedSelect; }
+/* 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 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 _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.tsx");
+/* 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++) {
@@ -12091,60 +12034,100 @@ 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;
+};
+// @ts-nocheck
 
 
 
-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;
-    }, []);
+
+
+
+
+
+
+
+
+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 () {
-        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);
+        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__["default"], __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__["default"], { 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 })))));
 };
-/* 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");
-
 
 
 /***/ }),
 
-/***/ "./src/components/PositionAnimated/PositionAnimated.tsx":
-/*!**************************************************************!*\
-  !*** ./src/components/PositionAnimated/PositionAnimated.tsx ***!
-  \**************************************************************/
+/***/ "./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 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12156,61 +12139,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 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/PositionAnimated/index.ts":
-/*!**************************************************!*\
-  !*** ./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 */   "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");
 
+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__["default"], __assign({ is: 'div', "rcx-select__addon": true, ref: ref }, props));
+});
+/* harmony default export */ __webpack_exports__["default"] = (PaginatedSelectAddon);
 
 
 /***/ }),
 
-/***/ "./src/components/ProgressBar/ProgressBar.tsx":
-/*!****************************************************!*\
-  !*** ./src/components/ProgressBar/ProgressBar.tsx ***!
-  \****************************************************/
+/***/ "./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 */   "ProgressBar": function() { return /* binding */ ProgressBar; }
+/* harmony export */   "PaginatedSelectFiltered": function() { return /* binding */ PaginatedSelectFiltered; }
 /* 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 _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++) {
@@ -12235,59 +12190,35 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 };
 
 
-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) })));
-});
-
-
-/***/ }),
-
-/***/ "./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 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 })));
+};
 
 
 /***/ }),
 
-/***/ "./src/components/RadioButton/RadioButton.tsx":
-/*!****************************************************!*\
-  !*** ./src/components/RadioButton/RadioButton.tsx ***!
-  \****************************************************/
+/***/ "./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 */   "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 _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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12299,156 +12230,83 @@ 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 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' })));
+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__["default"], __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/RadioButton/index.ts":
-/*!*********************************************!*\
-  !*** ./src/components/RadioButton/index.ts ***!
-  \*********************************************/
+/***/ "./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 */   "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");
+/* 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.tsx");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 
 
+var 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__["default"], __assign({ is: 'div', "rcx-select__wrapper": true, ref: ref }, props));
+});
+/* harmony default export */ __webpack_exports__["default"] = (PaginatedSelectWrapper);
+
 
 /***/ }),
 
-/***/ "./src/components/Scrollable/Scrollable.tsx":
-/*!**************************************************!*\
-  !*** ./src/components/Scrollable/Scrollable.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 */   "Scrollable": function() { return /* binding */ Scrollable; }
+/* 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 _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 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/Scrollable/index.ts":
-/*!********************************************!*\
-  !*** ./src/components/Scrollable/index.ts ***!
-  \********************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+/* 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");
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* 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/SearchInput/SearchInput.tsx":
-/*!****************************************************!*\
-  !*** ./src/components/SearchInput/SearchInput.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 */   "SearchInput": function() { return /* binding */ SearchInput; }
+/* 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 _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.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++) {
@@ -12460,56 +12318,113 @@ 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 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 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 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; });
+        }
+        if (currentPage < 5) {
+            // 0 1 2 3 4 ... N
+            return [0, 1, 2, 3, 4, '⋯', pages - 1];
+        }
+        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__["default"], __assign({ is: 'nav', "rcx-pagination": true, "rcx-pagination--divider": divider }, props),
+        hasItemsPerPageSelection && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-pagination__left": true },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'span', "rcx-pagination__label": true }, itemsPerPageLabel(renderingContext)),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'ol', "rcx-pagination__list": true }, itemsPerPageOptions.map(function (itemsPerPageOption) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { key: itemsPerPageOption, is: 'li', "rcx-pagination__list-item": true },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { 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__["default"], { "rcx-pagination__right": true },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'span', "rcx-pagination__label": true }, showingResultsLabel(renderingContext)),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'ol', "rcx-pagination__list": true },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'li', "rcx-pagination__list-item": true },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { 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__["default"], { key: i, is: 'li', "rcx-pagination__list-item": true }, page === '⋯' ? ('⋯') : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { 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__["default"], { is: 'li', "rcx-pagination__list-item": true },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { 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' })))))));
+};
 
 
 /***/ }),
 
-/***/ "./src/components/SearchInput/index.tsx":
-/*!**********************************************!*\
-  !*** ./src/components/SearchInput/index.tsx ***!
-  \**********************************************/
+/***/ "./src/components/Pagination/index.ts":
+/*!********************************************!*\
+  !*** ./src/components/Pagination/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 */   "Pagination": function() { return /* reexport safe */ _Pagination__WEBPACK_IMPORTED_MODULE_0__.Pagination; }
 /* harmony export */ });
-/* harmony import */ var _SearchInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SearchInput */ "./src/components/SearchInput/SearchInput.tsx");
+/* harmony import */ var _Pagination__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination */ "./src/components/Pagination/Pagination.tsx");
 
 
 
 /***/ }),
 
-/***/ "./src/components/Select/Select.tsx":
-/*!******************************************!*\
-  !*** ./src/components/Select/Select.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 */   "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 _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++) {
@@ -12521,17 +12436,6 @@ 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;
@@ -12552,120 +12456,125 @@ var __read = (undefined && undefined.__read) || function (o, n) {
 
 
 
+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 ***!
+  \**********************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-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);
+"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__);
+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 null;
+        return t;
     };
-    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();
+    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]];
         }
-        (_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 }))));
-});
+    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);
 
 
 /***/ }),
 
-/***/ "./src/components/Select/SelectAddon.tsx":
-/*!***********************************************!*\
-  !*** ./src/components/Select/SelectAddon.tsx ***!
-  \***********************************************/
+/***/ "./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");
+
+
+
+/***/ }),
+
+/***/ "./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 +12586,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.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12724,45 +12663,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__["default"], __assign({ ref: ref, "rcx-progress-bar": true, title: error || undefined }, props),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { 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.tsx");
+/* 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 +12742,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__["default"], __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__["default"], { 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__["default"], { 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];
+/* 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 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);
         }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+        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 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 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 +12890,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.tsx");
+/* 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,12 +12978,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
 
 
 
@@ -13028,113 +12989,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__["default"], __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
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__["default"], __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__["default"], { 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'
-                            : '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 })));
+                            : 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.tsx");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 
 
+var 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__["default"], __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 +13170,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.tsx");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-    });
-    return (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__["default"], __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 +13336,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;
 
 
 /***/ }),
@@ -13610,7 +13643,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Divider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.tsx");
 /* harmony import */ var _SidebarActions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SidebarActions */ "./src/components/Sidebar/SidebarActions.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
@@ -13670,7 +13703,7 @@ var TopBarAvatar = Avatar;
 var TopBarActions = _SidebarActions__WEBPACK_IMPORTED_MODULE_3__.SidebarActions;
 var TopBarAction = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SidebarActions__WEBPACK_IMPORTED_MODULE_3__.SidebarAction, __assign({ ghost: true }, props))); };
 var TopBarDivider = function () { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Divider__WEBPACK_IMPORTED_MODULE_2__.Divider, { mbs: 'neg-x2', mbe: 0 }); };
-var TopBarTitle = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-sidebar-top-bar__title": true, withTruncatedText: true }, props))); };
+var TopBarTitle = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-sidebar-top-bar__title": true, withTruncatedText: true }, props))); };
 /* harmony default export */ __webpack_exports__["default"] = (Object.assign(TopBar, {
     Section: TopBarSection,
     ToolBox: TopBarToolBox,
@@ -13723,7 +13756,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Item__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Item */ "./src/components/Sidebar/Item.tsx");
 /* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Section */ "./src/components/Sidebar/Section.tsx");
 /* harmony import */ var _TopBar__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar.tsx");
@@ -13744,7 +13777,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-var Sidebar = function (props) { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-sidebar": true }, props)); };
+var Sidebar = function (props) { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ "rcx-sidebar": true }, props)); };
 /* harmony default export */ __webpack_exports__["default"] = (Object.assign(Sidebar, {
     TopBar: _TopBar__WEBPACK_IMPORTED_MODULE_4__["default"],
     Item: _Item__WEBPACK_IMPORTED_MODULE_2__["default"],
@@ -13774,7 +13807,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13801,7 +13834,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var Skeleton = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? 'text' : _b, props = __rest(_a, ["variant"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'span', "rcx-skeleton": true, "rcx-skeleton--text": variant === 'text', "rcx-skeleton--rect": variant === 'rect' }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'span', "rcx-skeleton": true, "rcx-skeleton--text": variant === 'text', "rcx-skeleton--rect": variant === 'rect' }, props)));
 };
 
 
@@ -14202,7 +14235,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _TableSelection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TableSelection */ "./src/components/Table/TableSelection.tsx");
 /* harmony import */ var _TableSelectionButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TableSelectionButton */ "./src/components/Table/TableSelectionButton.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
@@ -14238,8 +14271,8 @@ var style = {
 };
 var Table = function (_a) {
     var striped = _a.striped, sticky = _a.sticky, _b = _a.fixed, fixed = _b === void 0 ? false : _b, props = __rest(_a, ["striped", "sticky", "fixed"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { "rcx-table__wrapper": true },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'table', "rcx-table": true, "rcx-table--fixed": fixed, "rcx-table--sticky": sticky, "rcx-table--striped": striped }, props))));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { "rcx-table__wrapper": true },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'table', "rcx-table": true, "rcx-table--fixed": fixed, "rcx-table--sticky": sticky, "rcx-table--striped": striped }, props))));
 };
 Table.Selection = _TableSelection__WEBPACK_IMPORTED_MODULE_2__.TableSelection;
 Table.Button = _TableSelectionButton__WEBPACK_IMPORTED_MODULE_3__.TableSelectionButton;
@@ -14260,7 +14293,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14274,7 +14307,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var TableBody = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'tbody', "rcx-table__body": true }, props))); };
+var TableBody = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'tbody', "rcx-table__body": true }, props))); };
 
 
 /***/ }),
@@ -14292,7 +14325,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _TableHead__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TableHead */ "./src/components/Table/TableHead.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -14322,7 +14355,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 var TableCell = function (_a) {
     var align = _a.align, clickable = _a.clickable, props = __rest(_a, ["align", "clickable"]);
     var isInsideHead = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_TableHead__WEBPACK_IMPORTED_MODULE_2__.TableHeadContext);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: isInsideHead ? 'th' : 'td', "rcx-table__cell": true, "rcx-table__cell--align": align, "rcx-table__cell--header": isInsideHead, "rcx-table__cell--clickable": clickable }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: isInsideHead ? 'th' : 'td', "rcx-table__cell": true, "rcx-table__cell--align": align, "rcx-table__cell--header": isInsideHead, "rcx-table__cell--clickable": clickable }, props)));
 };
 
 
@@ -14341,7 +14374,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14355,7 +14388,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 };
 
 
-var TableFoot = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'tfoot', "rcx-table__foot": true }, props))); };
+var TableFoot = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'tfoot', "rcx-table__foot": true }, props))); };
 
 
 /***/ }),
@@ -14374,7 +14407,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14390,7 +14423,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 var TableHeadContext = (0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(false);
 var TableHead = function (props) { return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TableHeadContext.Provider, { value: true },
-    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'thead', "rcx-table__head": true }, props)))); };
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'thead', "rcx-table__head": true }, props)))); };
 
 
 /***/ }),
@@ -14408,7 +14441,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14435,7 +14468,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var TableRow = function (_a) {
     var action = _a.action, selected = _a.selected, props = __rest(_a, ["action", "selected"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'tr', "rcx-table__row": true, "rcx-table__row--selected": selected, "rcx-table__row--action": action }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'tr', "rcx-table__row": true, "rcx-table__row--selected": selected, "rcx-table__row--action": action }, props)));
 };
 
 
@@ -14454,7 +14487,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
 /* harmony import */ var _Table__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Table */ "./src/components/Table/Table.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
@@ -14485,9 +14518,9 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var TableSelection = function (_a) {
     var children = _a.children, text = _a.text, props = __rest(_a, ["children", "text"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ color: 'alternative', "rcx-table__selection": true, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, props, { pi: 'x24' }),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { fontScale: 'p2m', mb: 'x16', flexShrink: 1, style: _Table__WEBPACK_IMPORTED_MODULE_3__.style }, text),
-        children && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { mi: 'neg-x8', fontScale: 'p2m', flexShrink: 0 },
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ color: 'alternative', "rcx-table__selection": true, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, props, { pi: 'x24' }),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { fontScale: 'p2m', mb: 'x16', flexShrink: 1, style: _Table__WEBPACK_IMPORTED_MODULE_3__.style }, text),
+        children && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { mi: 'neg-x8', fontScale: 'p2m', flexShrink: 0 },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_2__["default"], { inline: 'x4' }, children)))));
 };
 
@@ -14598,7 +14631,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _TabsItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TabsItem */ "./src/components/Tabs/TabsItem.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -14627,9 +14660,9 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 function Tabs(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'div', "rcx-tabs": true }, props),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'div', "rcx-tabs__scroll-box": true },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'div', "rcx-tabs__wrapper": true, children: children, role: 'tablist' }))));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'div', "rcx-tabs": true }, props),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'div', "rcx-tabs__scroll-box": true },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'div', "rcx-tabs__wrapper": true, children: children, role: 'tablist' }))));
 }
 Tabs.Item = _TabsItem__WEBPACK_IMPORTED_MODULE_2__.TabsItem;
 
@@ -14649,7 +14682,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14676,7 +14709,7 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var TabsItem = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function TabsItem(_a, ref) {
     var selected = _a.selected, disabled = _a.disabled, props = __rest(_a, ["selected", "disabled"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ is: 'button', "rcx-tabs__item": true, "rcx-tabs__item--selected": selected, "rcx-tabs__item--disabled": disabled, "rcx-tabs__item--selected--disabled": selected && disabled, "aria-selected": selected ? 'true' : 'false', ref: ref, role: 'tab' }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: 'button', "rcx-tabs__item": true, "rcx-tabs__item--selected": selected, "rcx-tabs__item--disabled": disabled, "rcx-tabs__item--selected--disabled": selected && disabled, "aria-selected": selected ? 'true' : 'false', ref: ref, role: 'tab' }, props)));
 });
 
 
@@ -14939,7 +14972,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 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 _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 var __makeTemplateObject = (undefined && undefined.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -14971,11 +15004,11 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 function Circle(_a) {
     var disabled = _a.disabled, circleCount = _a.circleCount, iteration = _a.iteration, inheritColor = _a.inheritColor, props = __rest(_a, ["disabled", "circleCount", "iteration", "inheritColor"]);
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, __assign({ is: 'span', className: (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        animation-duration: ", "s;\n        animation-delay: ", "s;\n      "], ["\n        animation-duration: ", "s;\n        animation-delay: ", "s;\n      "])), circleCount * 0.466, iteration * 0.16), "rcx-throbber__circle": true, "rcx-throbber__circle--disabled": disabled, "rcx-throbber__circle--inherit-color": inheritColor }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ is: 'span', className: (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        animation-duration: ", "s;\n        animation-delay: ", "s;\n      "], ["\n        animation-duration: ", "s;\n        animation-delay: ", "s;\n      "])), circleCount * 0.466, iteration * 0.16), "rcx-throbber__circle": true, "rcx-throbber__circle--disabled": disabled, "rcx-throbber__circle--inherit-color": inheritColor }, props)));
 }
 var Throbber = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function Throbber(_a, ref) {
     var disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? 'x16' : _b, _c = _a.circleCount, circleCount = _c === void 0 ? 3 : _c, inheritColor = _a.inheritColor, props = __rest(_a, ["disabled", "size", "circleCount", "inheritColor"]);
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, __assign({ "rcx-throbber": true, ref: ref }, props), Array.from({ length: circleCount || 3 }, function (_, iteration) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Circle, { key: iteration, circleCount: circleCount, iteration: iteration, disabled: !!disabled, size: size, inheritColor: !!inheritColor })); })));
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ "rcx-throbber": true, ref: ref }, props), Array.from({ length: circleCount || 3 }, function (_, iteration) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Circle, { key: iteration, circleCount: circleCount, iteration: iteration, disabled: !!disabled, size: size, inheritColor: !!inheritColor })); })));
 });
 var templateObject_1;
 
@@ -15010,7 +15043,7 @@ __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 _hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/useStyleSheet */ "./src/hooks/useStyleSheet.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Tile_styles_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Tile.styles.scss */ "./src/components/Tile/Tile.styles.scss");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -15042,7 +15075,7 @@ var Tile = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Tile(_a, r
     var _b = _a.elevation, elevation = _b === void 0 ? '1' : _b, _c = _a.padding, padding = _c === void 0 ? 'x16' : _c, props = __rest(_a, ["elevation", "padding"]);
     (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__.useStyleSheet)();
     (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__.useStyleSheet)(_Tile_styles_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, __assign({ ref: ref, "rcx-tile": true, "rcx-tile--elevation": elevation, padding: padding }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ ref: ref, "rcx-tile": true, "rcx-tile--elevation": elevation, padding: padding }, props)));
 });
 /* harmony default export */ __webpack_exports__["default"] = (Tile);
 
@@ -15079,7 +15112,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* 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) {
@@ -15108,9 +15141,9 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 var ToggleSwitch = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function ToggleSwitch(_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-toggle-switch": true }, props),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, { is: 'input', "rcx-toggle-switch__input": true, autoComplete: autoComplete, checked: checked, defaultChecked: defaultChecked, disabled: disabled, form: form, id: id, name: name, required: required, tabIndex: tabIndex, type: 'checkbox', 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-toggle-switch__fake": true, "aria-hidden": 'true' })));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], __assign({ is: _Label__WEBPACK_IMPORTED_MODULE_2__.Label, "rcx-toggle-switch": true }, props),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__["default"], { is: 'input', "rcx-toggle-switch__input": true, autoComplete: autoComplete, checked: checked, defaultChecked: defaultChecked, disabled: disabled, form: form, id: id, name: name, required: required, tabIndex: tabIndex, type: 'checkbox', 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__["default"], { is: 'i', "rcx-toggle-switch__fake": true, "aria-hidden": 'true' })));
 });
 
 
@@ -15144,7 +15177,7 @@ __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 _hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/useStyleSheet */ "./src/hooks/useStyleSheet.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _Tooltip_styles_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Tooltip.styles.scss */ "./src/components/Tooltip/Tooltip.styles.scss");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -15202,7 +15235,7 @@ var Tooltip = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Tooltip
     (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__.useStyleSheet)();
     (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_1__.useStyleSheet)(_Tooltip_styles_scss__WEBPACK_IMPORTED_MODULE_3__["default"]);
     var _b = __read(parsePlacement(placement), 2), direction = _b[0], position = _b[1];
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, __assign({ is: 'div', ref: ref, "rcx-tooltip": true, "rcx-tooltip--dir": direction, "rcx-tooltip--pos": position }, props)));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__["default"], __assign({ is: 'div', ref: ref, "rcx-tooltip": true, "rcx-tooltip--dir": direction, "rcx-tooltip--pos": position }, props)));
 });
 /* harmony default export */ __webpack_exports__["default"] = (Tooltip);
 
@@ -15290,7 +15323,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "Avatar": function() { return /* reexport safe */ _Avatar__WEBPACK_IMPORTED_MODULE_3__.Avatar; },
 /* harmony export */   "Badge": function() { return /* reexport safe */ _Badge__WEBPACK_IMPORTED_MODULE_4__.Badge; },
 /* harmony export */   "Banner": function() { return /* reexport safe */ _Banner__WEBPACK_IMPORTED_MODULE_5__["default"]; },
-/* harmony export */   "Box": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_6__.Box; },
+/* harmony export */   "Box": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_6__["default"]; },
 /* harmony export */   "useArrayLikeClassNameProp": function() { return /* reexport safe */ _hooks_useArrayLikeClassNameProp__WEBPACK_IMPORTED_MODULE_7__.useArrayLikeClassNameProp; },
 /* harmony export */   "Button": function() { return /* reexport safe */ _Button__WEBPACK_IMPORTED_MODULE_8__["default"]; },
 /* harmony export */   "ActionButton": function() { return /* reexport safe */ _Button__WEBPACK_IMPORTED_MODULE_8__.ActionButton; },
@@ -15405,10 +15438,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"]; },
@@ -15473,7 +15504,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Avatar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Avatar */ "./src/components/Avatar/index.tsx");
 /* harmony import */ var _Badge__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Badge */ "./src/components/Badge/index.tsx");
 /* harmony import */ var _Banner__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Banner */ "./src/components/Banner/index.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Box */ "./src/components/Box/index.tsx");
 /* harmony import */ var _hooks_useArrayLikeClassNameProp__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
 /* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Button */ "./src/components/Button/index.ts");
 /* harmony import */ var _ButtonGroup__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ButtonGroup */ "./src/components/ButtonGroup/index.ts");
@@ -15510,7 +15541,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");
@@ -15985,6 +16016,10 @@ var useBoxOnlyProps = function (props) {
             props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__.prependClassName)(props.className, 'rcx-box--with-block-elements');
         }
     }
+    if (props.htmlSize) {
+        props.size = props.htmlSize;
+        delete props.htmlSize;
+    }
     delete props.withRichContent;
     props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__.prependClassName)(props.className, 'rcx-box rcx-box--full');
     return props;
@@ -16171,9 +16206,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 +16303,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 if (true) {
-    console.log("fuselage: " + "0.31.5");
+    console.log("fuselage: " + "0.31.6");
 }