npm - @rocket.chat/fuselage - Versions diffs - 0.6.3-dev.434 → 0.6.3-dev.438 - Mend

@rocket.chat/fuselage 0.6.3-dev.434 → 0.6.3-dev.438

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/dist/fuselage.development.js CHANGED Viewed

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"), require("@rocket.chat/fuselage-hooks"), require("react-dom"), require("@rocket.chat/icons"));
+		module.exports = factory(require("react"), require("@rocket.chat/fuselage-hooks"), require("@rocket.chat/icons"), require("react-dom"));
 	else if(typeof define === 'function' && define.amd)
-		define("RocketChatFuselage", ["react", "@rocket.chat/fuselage-hooks", "react-dom", "@rocket.chat/icons"], factory);
+		define("RocketChatFuselage", ["react", "@rocket.chat/fuselage-hooks", "@rocket.chat/icons", "react-dom"], factory);
 	else if(typeof exports === 'object')
-		exports["RocketChatFuselage"] = factory(require("react"), require("@rocket.chat/fuselage-hooks"), require("react-dom"), require("@rocket.chat/icons"));
+		exports["RocketChatFuselage"] = factory(require("react"), require("@rocket.chat/fuselage-hooks"), require("@rocket.chat/icons"), require("react-dom"));
 	else
-		root["RocketChatFuselage"] = factory(root["React"], root["@rocket.chat/fuselage-hooks"], root["react-dom"], root["@rocket.chat/icons"]);
-})(self, function(__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_hooks__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_icons__) {
+		root["RocketChatFuselage"] = factory(root["React"], root["@rocket.chat/fuselage-hooks"], root["@rocket.chat/icons"], root["react-dom"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_hooks__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_icons__, __WEBPACK_EXTERNAL_MODULE_react_dom__) {
 return /******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
@@ -3106,12 +3106,14 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _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 _Icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _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 _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");
+/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
+/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
 var _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/packages/fuselage/src/components/AutoComplete/AutoComplete.js",
@@ -3126,25 +3128,27 @@ 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_3__.Box, Object.assign({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, Object.assign({
     "rcx-autocomplete__addon": true
   }, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 14,
+      lineNumber: 16,
       columnNumber: 26
     }
   }));
 };
 var SelectedOptions = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().memo(function (props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_4__["default"], Object.assign({}, props, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_5__["default"], Object.assign({}, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 16,
+      lineNumber: 18,
       columnNumber: 47
     }
   }));
@@ -3211,7 +3215,7 @@ function AutoComplete(_ref) {
     });
   }, [options]);
-  var _useCursor = (0,_Options__WEBPACK_IMPORTED_MODULE_8__.useCursor)(value, memoizedOptions, selectByKeyboard),
+  var _useCursor = (0,_Options__WEBPACK_IMPORTED_MODULE_9__.useCursor)(value, memoizedOptions, selectByKeyboard),
       _useCursor2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useCursor, 5),
       cursor = _useCursor2[0],
       handleKeyDown = _useCursor2[1],
@@ -3233,7 +3237,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_3__.Box, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, {
     "rcx-autocomplete": true,
     ref: containerRef,
     onClick: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function () {
@@ -3246,10 +3250,10 @@ function AutoComplete(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 64,
+      lineNumber: 66,
       columnNumber: 5
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_4__.Box, {
     display: "flex",
     flexGrow: 1,
     alignItems: "center",
@@ -3259,18 +3263,18 @@ function AutoComplete(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 74,
+      lineNumber: 76,
       columnNumber: 7
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_7__["default"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_8__["default"], {
     all: "x4",
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 82,
+      lineNumber: 84,
       columnNumber: 9
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_6__.InputBox.Input, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_7__.InputBox.Input, {
     ref: ref,
     onChange: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_1__.useMutableCallback)(function (e) {
       return setFilter(e.currentTarget.value);
@@ -3278,17 +3282,17 @@ function AutoComplete(_ref) {
     onBlur: hide,
     onFocus: show,
     onKeyDown: handleKeyDown,
-    placeholder: optionsAreVisible !== _Box__WEBPACK_IMPORTED_MODULE_3__.AnimatedVisibility.HIDDEN || !value ? placeholder : undefined,
+    placeholder: optionsAreVisible !== _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].HIDDEN || !value ? placeholder : undefined,
     order: 1,
     "rcx-input-box--undecorated": true,
     value: filter,
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 83,
+      lineNumber: 85,
       columnNumber: 11
     }
-  }), selected && optionsAreVisible === _Box__WEBPACK_IMPORTED_MODULE_3__.AnimatedVisibility.HIDDEN && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(RenderSelected, {
+  }), selected && optionsAreVisible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].HIDDEN && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(RenderSelected, {
     role: "option",
     value: value,
     label: getLabel(selected),
@@ -3296,36 +3300,36 @@ function AutoComplete(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 101,
+      lineNumber: 103,
       columnNumber: 13
     }
   }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(Addon, {
-    children: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_5__.Icon, {
-      name: optionsAreVisible === _Box__WEBPACK_IMPORTED_MODULE_3__.AnimatedVisibility.VISIBLE ? 'cross' : 'magnifier',
+    children: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_6__.Icon, {
+      name: optionsAreVisible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_3__["default"].VISIBLE ? 'cross' : 'magnifier',
       size: "x20",
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 112,
+        lineNumber: 114,
         columnNumber: 11
       }
     }),
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 110,
+      lineNumber: 112,
       columnNumber: 7
     }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.PositionAnimated, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_PositionAnimated__WEBPACK_IMPORTED_MODULE_10__["default"], {
     visible: optionsAreVisible,
     anchor: containerRef,
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 122,
+      lineNumber: 124,
       columnNumber: 7
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Options__WEBPACK_IMPORTED_MODULE_8__.Options, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Options__WEBPACK_IMPORTED_MODULE_9__.Options, {
     role: "option",
     width: borderBoxSize.inlineSize,
     onSelect: onSelect,
@@ -3337,7 +3341,7 @@ function AutoComplete(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
+      lineNumber: 125,
       columnNumber: 9
     }
   })));
@@ -3354,131 +3358,57 @@ function AutoComplete(_ref) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "useArrayLikeClassNameProp": function() { return /* binding */ useArrayLikeClassNameProp; },
-/* harmony export */   "useBoxOnlyProps": function() { return /* binding */ useBoxOnlyProps; },
-/* harmony export */   "Box": function() { return /* binding */ Box; },
-/* harmony export */   "AnimatedVisibility": function() { return /* reexport safe */ _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_11__["default"]; },
-/* harmony export */   "Flex": function() { return /* reexport safe */ _Flex__WEBPACK_IMPORTED_MODULE_12__["default"]; },
-/* harmony export */   "Position": function() { return /* reexport safe */ _Position__WEBPACK_IMPORTED_MODULE_13__["default"]; },
-/* harmony export */   "PositionAnimated": function() { return /* reexport safe */ _Position__WEBPACK_IMPORTED_MODULE_13__.PositionAnimated; },
-/* harmony export */   "Scrollable": function() { return /* reexport safe */ _Scrollable__WEBPACK_IMPORTED_MODULE_14__["default"]; }
+/* 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 _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../node_modules/@babel/runtime/helpers/slicedToArray.js");
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _babel_runtime_helpers_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 react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
-/* harmony import */ var _helpers_prependClassName__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
-/* harmony import */ var _hooks_useStyle__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/useStyle.ts");
-/* harmony import */ var _hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../hooks/useStyleSheet */ "./src/hooks/useStyleSheet.ts");
-/* harmony import */ var _BoxTransforms__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
-/* harmony import */ var _stylingProps__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./stylingProps */ "./src/components/Box/stylingProps.js");
-/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./AnimatedVisibility */ "./src/components/Box/AnimatedVisibility/index.ts");
-/* harmony import */ var _Flex__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Flex */ "./src/components/Box/Flex/index.ts");
-/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Position */ "./src/components/Box/Position/index.ts");
-/* harmony import */ var _Scrollable__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./Scrollable */ "./src/components/Box/Scrollable/index.ts");
+/* 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 _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/packages/fuselage/src/components/Box/index.js",
-    _templateObject;
-var useArrayLikeClassNameProp = function useArrayLikeClassNameProp(props) {
-  var classNames = [].concat(props.className);
-  var cssFns = classNames.filter(function (value) {
-    return typeof value === 'function';
-  });
-  var stylesClassName = (0,_hooks_useStyle__WEBPACK_IMPORTED_MODULE_7__.useStyle)((0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_3__.css)(_templateObject || (_templateObject = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n      ", "\n    "])), cssFns), props);
-  var strings = classNames.filter(function (value) {
-    return typeof value === 'string';
-  });
-  props.className = strings.reduce(function (className, string) {
-    return (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_5__.appendClassName)(className, string);
-  }, stylesClassName || '');
-  return props;
-};
-var useBoxOnlyProps = function useBoxOnlyProps(props) {
-  Object.entries(props).forEach(function (_ref) {
-    var _ref2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-    if (key.slice(0, 4) === 'rcx-') {
-      if (!value) {
-        delete props[key];
-        return;
-      }
-      var newClassName = value === true ? key : "".concat(key, "-").concat(value);
-      props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_6__.prependClassName)(props.className, newClassName);
-      delete props[key];
-    }
-  });
-  if (props.animated) {
-    props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_6__.prependClassName)(props.className, 'rcx-box--animated');
-    delete props.animated;
-  }
-  if (props.withRichContent) {
-    if (props.withRichContent === 'inlineWithoutBreaks') {
-      props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_6__.prependClassName)(props.className, 'rcx-box--with-inline-elements');
-    } else {
-      props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_6__.prependClassName)(props.className, 'rcx-box--with-inline-elements');
-      props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_6__.prependClassName)(props.className, 'rcx-box--with-block-elements');
-    }
-  }
-  delete props.withRichContent;
-  props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_6__.prependClassName)(props.className, 'rcx-box rcx-box--full');
-  return props;
-};
-var Box = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.memo)( /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)(function Box(_ref3, ref) {
-  var _ref3$is = _ref3.is,
-      is = _ref3$is === void 0 ? 'div' : _ref3$is,
-      children = _ref3.children,
-      props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default()(_ref3, _excluded);
+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_8__.useStyleSheet)();
+  (0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_4__.useStyleSheet)();
   if (ref) {
     props.ref = ref;
   }
-  props = useArrayLikeClassNameProp(props);
-  var transformFn = (0,_BoxTransforms__WEBPACK_IMPORTED_MODULE_9__.useBoxTransform)();
+  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 = useBoxOnlyProps(props);
-  props = (0,_stylingProps__WEBPACK_IMPORTED_MODULE_10__.useStylingProps)(props);
-  var element = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.createElement)(is, props, children);
+  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_4___default().createElement(_BoxTransforms__WEBPACK_IMPORTED_MODULE_9__.BoxTransforms.Provider, {
+    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: 98,
+        lineNumber: 30,
         columnNumber: 14
       }
     });
@@ -3488,10 +3418,6 @@ var Box = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.memo)( /*#__PURE__*
 }));
 Box.displayName = 'Box';
 /***/ }),
 /***/ "./src/components/Box/stylingProps.js":
@@ -3872,10 +3798,7 @@ var withBoxStyling = function withBoxStyling(component) {
     return render(props);
   };
-  if (true) {
-    WithBoxStyling.displayName = "WithBoxStyling(".concat(component.displayName || component.name || 'Component', ")");
-  }
+  WithBoxStyling.displayName = "WithBoxStyling(".concat(component.displayName || component.name || 'Component', ")");
   return WithBoxStyling;
 };
@@ -3902,12 +3825,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
-/* harmony import */ var _Select_Select__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Select/Select */ "./src/components/Select/Select.tsx");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
+/* harmony import */ var _Flex__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
+/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
+/* harmony import */ var _Select_Select__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../Select/Select */ "./src/components/Select/Select.tsx");
@@ -3924,12 +3850,15 @@ var _jsxFileName = "/home/runner/work/Rocket.Chat.Fuselage/Rocket.Chat.Fuselage/
 var SelectedOptions = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.memo)(function (props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_6__["default"], Object.assign({}, props, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Chip__WEBPACK_IMPORTED_MODULE_7__["default"], Object.assign({}, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 15,
+      lineNumber: 18,
       columnNumber: 41
     }
   }));
@@ -3949,7 +3878,7 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
       error = _ref.error,
       disabled = _ref.disabled,
       _ref$anchor = _ref.anchor,
-      Anchor = _ref$anchor === void 0 ? _Select_Select__WEBPACK_IMPORTED_MODULE_10__.Focus : _ref$anchor,
+      Anchor = _ref$anchor === void 0 ? _Select_Select__WEBPACK_IMPORTED_MODULE_13__.Focus : _ref$anchor,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       _ref$getLabel = _ref.getLabel,
@@ -3969,7 +3898,7 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
   } : _ref$getValue,
       placeholder = _ref.placeholder,
       _ref$renderOptions = _ref.renderOptions,
-      _Options = _ref$renderOptions === void 0 ? _Options__WEBPACK_IMPORTED_MODULE_9__.Options : _ref$renderOptions,
+      _Options = _ref$renderOptions === void 0 ? _Options__WEBPACK_IMPORTED_MODULE_11__.Options : _ref$renderOptions,
       customEmpty = _ref.customEmpty,
       props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(_ref, _excluded);
@@ -4023,7 +3952,7 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
   var filteredOptions = options.filter(applyFilter).map(mapOptions);
-  var _useCursor = (0,_Options__WEBPACK_IMPORTED_MODULE_9__.useCursor)(index, filteredOptions, internalChanged),
+  var _useCursor = (0,_Options__WEBPACK_IMPORTED_MODULE_11__.useCursor)(index, filteredOptions, internalChanged),
       _useCursor2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useCursor, 5),
       cursor = _useCursor2[0],
       handleKeyDown = _useCursor2[1],
@@ -4042,54 +3971,54 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
       containerRef = _useResizeObserver.ref,
       borderBoxSize = _useResizeObserver.borderBoxSize;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_5__.Box, Object.assign({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_6__.Box, Object.assign({
     is: "div",
     "rcx-select": true,
     className: [error && 'invalid', disabled && 'disabled'],
     ref: containerRef,
     onClick: (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_3__.useMutableCallback)(function () {
-      return visible === _Box__WEBPACK_IMPORTED_MODULE_5__.AnimatedVisibility.VISIBLE ? hide() : innerRef.current.focus() & show();
+      return visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_5__["default"].VISIBLE ? hide() : innerRef.current.focus() & show();
     }),
     disabled: disabled
   }, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 79,
+      lineNumber: 82,
       columnNumber: 7
     }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_5__.Flex.Item, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_8__["default"].Item, {
     grow: 1,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 92,
+      lineNumber: 95,
       columnNumber: 9
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_8__["default"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_10__["default"], {
     inline: "x4",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 96,
       columnNumber: 11
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_5__.Flex.Container, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_8__["default"].Container, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 97,
       columnNumber: 13
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_5__.Box, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_6__.Box, {
     is: "div",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 95,
+      lineNumber: 98,
       columnNumber: 15
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_5__.Box, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_6__.Box, {
     is: "div",
     display: "flex",
     alignItems: "center",
@@ -4099,15 +4028,15 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 96,
+      lineNumber: 99,
       columnNumber: 17
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_8__["default"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_10__["default"], {
     all: "x4",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 104,
+      lineNumber: 107,
       columnNumber: 19
     }
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(Anchor, {
@@ -4124,7 +4053,7 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 105,
+      lineNumber: 108,
       columnNumber: 21
     }
   }), currentValue.map(function (value) {
@@ -4144,58 +4073,58 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 118,
+        lineNumber: 121,
         columnNumber: 23
       }
     });
-  }))))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_5__.Flex.Item, {
+  }))))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_8__["default"].Item, {
     grow: 0,
     shrink: 0,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 136,
+      lineNumber: 139,
       columnNumber: 9
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_8__["default"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_10__["default"], {
     inline: "x4",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 137,
+      lineNumber: 140,
       columnNumber: 11
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Select_Select__WEBPACK_IMPORTED_MODULE_10__.Addon, {
-    children: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_7__.Icon, {
-      name: visible === _Box__WEBPACK_IMPORTED_MODULE_5__.AnimatedVisibility.VISIBLE ? 'cross' : 'chevron-down',
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Select_Select__WEBPACK_IMPORTED_MODULE_13__.Addon, {
+    children: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_9__.Icon, {
+      name: visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_5__["default"].VISIBLE ? 'cross' : 'chevron-down',
       size: "x20",
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 140,
+        lineNumber: 143,
         columnNumber: 17
       }
     }),
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 138,
+      lineNumber: 141,
       columnNumber: 13
     }
-  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_5__.AnimatedVisibility, {
+  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_5__["default"], {
     visibility: visible,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 152,
+      lineNumber: 155,
       columnNumber: 9
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_5__.Position, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Position__WEBPACK_IMPORTED_MODULE_12__["default"], {
     anchor: containerRef,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 153,
+      lineNumber: 156,
       columnNumber: 11
     }
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_Options, {
@@ -4203,7 +4132,7 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
     onMouseDown: prevent,
     multiple: true,
     filter: filter,
-    renderItem: _Options__WEBPACK_IMPORTED_MODULE_9__.CheckOption,
+    renderItem: _Options__WEBPACK_IMPORTED_MODULE_11__.CheckOption,
     role: "listbox",
     options: filteredOptions,
     onSelect: internalChanged,
@@ -4212,7 +4141,7 @@ var MultiSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 154,
+      lineNumber: 157,
       columnNumber: 13
     }
   }))));
@@ -4237,7 +4166,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Flex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
 /* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 /* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/MultiSelect.js");
@@ -4267,7 +4196,7 @@ var MultiSelectFiltered = function MultiSelectFiltered(_ref) {
         filter = _ref2.filter,
         props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref2, _excluded2);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Flex.Item, {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_Flex__WEBPACK_IMPORTED_MODULE_3__["default"].Item, {
       grow: 1,
       __self: _this,
       __source: {
@@ -5949,6 +5878,119 @@ __webpack_require__.r(__webpack_exports__);
+/***/ }),
+/***/ "./src/components/AnimatedVisibility/AnimatedVisibility.tsx":
+/*!******************************************************************!*\
+  !*** ./src/components/AnimatedVisibility/AnimatedVisibility.tsx ***!
+  \******************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+"use strict";
+__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 _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
+/* harmony import */ var _hooks_useStyle__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/useStyle.ts");
+/* harmony import */ var _Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_4__ = __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 __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 Visibility = {
+    HIDDEN: 'hidden',
+    VISIBLE: 'visible',
+    HIDING: 'hiding',
+    UNHIDING: 'unhiding',
+};
+var AnimatedVisibility = function (props) {
+    var propVisibility = props.visibility || Visibility.HIDDEN;
+    var _a = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(propVisibility), 2), visibility = _a[0], setVisibility = _a[1];
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+        setVisibility(function (visibility) {
+            if (propVisibility === Visibility.VISIBLE &&
+                visibility !== propVisibility) {
+                return Visibility.UNHIDING;
+            }
+            if (propVisibility === Visibility.HIDDEN &&
+                visibility !== propVisibility) {
+                return Visibility.HIDING;
+            }
+            return visibility;
+        });
+    }, [propVisibility]);
+    var className = (0,_hooks_useStyle__WEBPACK_IMPORTED_MODULE_3__.useStyle)((0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      animation-duration: 230ms;\n\n      ", "\n\n      ", "\n    "], ["\n      animation-duration: 230ms;\n\n      ", "\n\n      ", "\n    "])), visibility === Visibility.HIDING && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        animation-name: ", ";\n      "], ["\n        animation-name: ", ";\n      "])), (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        from {\n          transform: translate3d(0, 0, 0);\n          opacity: 1;\n        }\n\n        to {\n          transform: translate3d(0, 1rem, 0);\n          opacity: 0;\n        }\n      "], ["\n        from {\n          transform: translate3d(0, 0, 0);\n          opacity: 1;\n        }\n\n        to {\n          transform: translate3d(0, 1rem, 0);\n          opacity: 0;\n        }\n      "])))), visibility === Visibility.UNHIDING && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        animation-name: ", ";\n      "], ["\n        animation-name: ", ";\n      "])), (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        from {\n          transform: translate3d(0, 1rem, 0);\n          opacity: 0;\n        }\n\n        to {\n          transform: translate3d(0, 0, 0);\n          opacity: 1;\n        }\n      "], ["\n        from {\n          transform: translate3d(0, 1rem, 0);\n          opacity: 0;\n        }\n\n        to {\n          transform: translate3d(0, 0, 0);\n          opacity: 1;\n        }\n      "]))))), null);
+    var handleAnimationEnd = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
+        return setVisibility(function (visibility) {
+            if (visibility === Visibility.HIDING) {
+                return Visibility.HIDDEN;
+            }
+            if (visibility === Visibility.UNHIDING) {
+                return Visibility.VISIBLE;
+            }
+            return visibility;
+        });
+    }, []);
+    var transformFn = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (props) {
+        if (props.onAnimationEnd === undefined) {
+            props.onAnimationEnd = handleAnimationEnd;
+        }
+        props.className =
+            className && (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_2__.appendClassName)(props.className, className);
+        return props;
+    }, [className, handleAnimationEnd]);
+    var composedFn = (0,_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_4__.useComposedBoxTransform)(transformFn);
+    if (visibility === Visibility.HIDDEN) {
+        return null;
+    }
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_4__.BoxTransforms.Provider, { children: props.children, value: composedFn }));
+};
+/* harmony default export */ __webpack_exports__["default"] = (AnimatedVisibility);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+/***/ }),
+/***/ "./src/components/AnimatedVisibility/index.ts":
+/*!****************************************************!*\
+  !*** ./src/components/AnimatedVisibility/index.ts ***!
+  \****************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AnimatedVisibility */ "./src/components/AnimatedVisibility/AnimatedVisibility.tsx");
+/* harmony default export */ __webpack_exports__["default"] = (Object.assign(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_0__["default"], {
+    HIDDEN: 'hidden',
+    VISIBLE: 'visible',
+    HIDING: 'hiding',
+    UNHIDING: 'unhiding',
+}));
 /***/ }),
 /***/ "./src/components/AutoComplete/index.ts":
@@ -6224,123 +6266,10 @@ __webpack_require__.r(__webpack_exports__);
 /***/ }),
-/***/ "./src/components/Box/AnimatedVisibility/AnimatedVisibility.tsx":
-/*!**********************************************************************!*\
-  !*** ./src/components/Box/AnimatedVisibility/AnimatedVisibility.tsx ***!
-  \**********************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-"use strict";
-__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 _helpers_appendClassName__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
-/* harmony import */ var _hooks_useStyle__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../hooks/useStyle */ "./src/hooks/useStyle.ts");
-/* harmony import */ var _BoxTransforms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../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 __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 Visibility = {
-    HIDDEN: 'hidden',
-    VISIBLE: 'visible',
-    HIDING: 'hiding',
-    UNHIDING: 'unhiding',
-};
-var AnimatedVisibility = function (props) {
-    var propVisibility = props.visibility || Visibility.HIDDEN;
-    var _a = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(propVisibility), 2), visibility = _a[0], setVisibility = _a[1];
-    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        setVisibility(function (visibility) {
-            if (propVisibility === Visibility.VISIBLE &&
-                visibility !== propVisibility) {
-                return Visibility.UNHIDING;
-            }
-            if (propVisibility === Visibility.HIDDEN &&
-                visibility !== propVisibility) {
-                return Visibility.HIDING;
-            }
-            return visibility;
-        });
-    }, [propVisibility]);
-    var className = (0,_hooks_useStyle__WEBPACK_IMPORTED_MODULE_3__.useStyle)((0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      animation-duration: 230ms;\n\n      ", "\n\n      ", "\n    "], ["\n      animation-duration: 230ms;\n\n      ", "\n\n      ", "\n    "])), visibility === Visibility.HIDING && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        animation-name: ", ";\n      "], ["\n        animation-name: ", ";\n      "])), (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        from {\n          transform: translate3d(0, 0, 0);\n          opacity: 1;\n        }\n\n        to {\n          transform: translate3d(0, 1rem, 0);\n          opacity: 0;\n        }\n      "], ["\n        from {\n          transform: translate3d(0, 0, 0);\n          opacity: 1;\n        }\n\n        to {\n          transform: translate3d(0, 1rem, 0);\n          opacity: 0;\n        }\n      "])))), visibility === Visibility.UNHIDING && (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        animation-name: ", ";\n      "], ["\n        animation-name: ", ";\n      "])), (0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        from {\n          transform: translate3d(0, 1rem, 0);\n          opacity: 0;\n        }\n\n        to {\n          transform: translate3d(0, 0, 0);\n          opacity: 1;\n        }\n      "], ["\n        from {\n          transform: translate3d(0, 1rem, 0);\n          opacity: 0;\n        }\n\n        to {\n          transform: translate3d(0, 0, 0);\n          opacity: 1;\n        }\n      "]))))), null);
-    var handleAnimationEnd = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
-        return setVisibility(function (visibility) {
-            if (visibility === Visibility.HIDING) {
-                return Visibility.HIDDEN;
-            }
-            if (visibility === Visibility.UNHIDING) {
-                return Visibility.VISIBLE;
-            }
-            return visibility;
-        });
-    }, []);
-    var transformFn = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (props) {
-        if (props.onAnimationEnd === undefined) {
-            props.onAnimationEnd = handleAnimationEnd;
-        }
-        props.className =
-            className && (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_2__.appendClassName)(props.className, className);
-        return props;
-    }, [className, handleAnimationEnd]);
-    var composedFn = (0,_BoxTransforms__WEBPACK_IMPORTED_MODULE_4__.useComposedBoxTransform)(transformFn);
-    if (visibility === Visibility.HIDDEN) {
-        return null;
-    }
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_BoxTransforms__WEBPACK_IMPORTED_MODULE_4__.BoxTransforms.Provider, { children: props.children, value: composedFn }));
-};
-/* harmony default export */ __webpack_exports__["default"] = (AnimatedVisibility);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
-/***/ }),
-/***/ "./src/components/Box/AnimatedVisibility/index.ts":
-/*!********************************************************!*\
-  !*** ./src/components/Box/AnimatedVisibility/index.ts ***!
-  \********************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AnimatedVisibility */ "./src/components/Box/AnimatedVisibility/AnimatedVisibility.tsx");
-/* harmony default export */ __webpack_exports__["default"] = (Object.assign(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_0__["default"], {
-    HIDDEN: 'hidden',
-    VISIBLE: 'visible',
-    HIDING: 'hiding',
-    UNHIDING: 'unhiding',
-}));
-/***/ }),
-/***/ "./src/components/Box/BoxTransforms.ts":
-/*!*********************************************!*\
-  !*** ./src/components/Box/BoxTransforms.ts ***!
-  \*********************************************/
+/***/ "./src/components/Box/BoxTransforms.ts":
+/*!*********************************************!*\
+  !*** ./src/components/Box/BoxTransforms.ts ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 "use strict";
@@ -6353,368 +6282,20 @@ __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__);
-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/Flex/Flex.tsx":
-/*!******************************************!*\
-  !*** ./src/components/Box/Flex/Flex.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 */   "FlexContainer": function() { return /* binding */ FlexContainer; }
-/* 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 _BoxTransforms__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
-function FlexContainer(_a) {
-    var _b = _a.inline, inline = _b === void 0 ? false : _b, children = _a.children, direction = _a.direction, wrap = _a.wrap, alignItems = _a.alignItems, alignContent = _a.alignContent, justifyContent = _a.justifyContent;
-    var transformFn = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (props) {
-        if (inline !== undefined && props.display === undefined) {
-            props.display = inline ? 'inline-flex' : 'flex';
-        }
-        if (direction !== undefined && props.flexDirection === undefined) {
-            props.flexDirection = direction;
-        }
-        if (wrap !== undefined && props.flexWrap === undefined) {
-            props.flexWrap = wrap === 'no-wrap' ? 'nowrap' : wrap;
-        }
-        if (alignItems !== undefined && props.alignItems === undefined) {
-            props.alignItems =
-                (alignItems === 'start' && 'flex-start') ||
-                    (alignItems === 'end' && 'flex-end') ||
-                    alignItems;
-        }
-        if (alignContent !== undefined && props.alignContent === undefined) {
-            props.alignContent =
-                (alignContent === 'start' && 'flex-start') ||
-                    (alignContent === 'end' && 'flex-end') ||
-                    alignContent;
-        }
-        if (justifyContent !== undefined && props.justifyContent === undefined) {
-            props.justifyContent =
-                (justifyContent === 'start' && 'flex-start') ||
-                    (justifyContent === 'end' && 'flex-end') ||
-                    justifyContent;
-        }
-        return props;
-    }, [alignContent, alignItems, direction, inline, justifyContent, wrap]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__.BoxTransforms.Provider, { children: children, value: (0,_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__.useComposedBoxTransform)(transformFn) }));
-}
-/***/ }),
-/***/ "./src/components/Box/Flex/FlexItem.tsx":
-/*!**********************************************!*\
-  !*** ./src/components/Box/Flex/FlexItem.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 */   "FlexItem": function() { return /* binding */ FlexItem; }
-/* 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 _BoxTransforms__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
-function FlexItem(_a) {
-    var children = _a.children, order = _a.order, grow = _a.grow, shrink = _a.shrink, basis = _a.basis, align = _a.align;
-    var transformFn = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (props) {
-        if (order !== undefined && props.order === undefined) {
-            props.order = order;
-        }
-        if (grow !== undefined && props.flexGrow === undefined) {
-            props.flexGrow = grow;
-        }
-        if (shrink !== undefined && props.flexShrink === undefined) {
-            props.flexShrink = shrink;
-        }
-        if (basis !== undefined && props.flexBasis === undefined) {
-            props.flexBasis = basis;
-        }
-        if (align !== undefined && props.alignSelf === undefined) {
-            props.alignSelf =
-                (align === 'start' && 'flex-start') ||
-                    (align === 'end' && 'flex-end') ||
-                    align;
-        }
-        return props;
-    }, [align, basis, grow, order, shrink]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__.BoxTransforms.Provider, { children: children, value: (0,_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__.useComposedBoxTransform)(transformFn) }));
-}
-/***/ }),
-/***/ "./src/components/Box/Flex/index.ts":
-/*!******************************************!*\
-  !*** ./src/components/Box/Flex/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 */   "FlexContainer": function() { return /* reexport safe */ _Flex__WEBPACK_IMPORTED_MODULE_0__.FlexContainer; },
-/* harmony export */   "FlexItem": function() { return /* reexport safe */ _FlexItem__WEBPACK_IMPORTED_MODULE_1__.FlexItem; }
-/* harmony export */ });
-/* harmony import */ var _Flex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Flex */ "./src/components/Box/Flex/Flex.tsx");
-/* harmony import */ var _FlexItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./FlexItem */ "./src/components/Box/Flex/FlexItem.tsx");
-/* harmony default export */ __webpack_exports__["default"] = (Object.assign(_Flex__WEBPACK_IMPORTED_MODULE_0__.FlexContainer, {
-    Container: _Flex__WEBPACK_IMPORTED_MODULE_0__.FlexContainer,
-    Item: _FlexItem__WEBPACK_IMPORTED_MODULE_1__.FlexItem,
-}));
-/***/ }),
-/***/ "./src/components/Box/Position/Position.tsx":
-/*!**************************************************!*\
-  !*** ./src/components/Box/Position/Position.tsx ***!
-  \**************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-/* harmony import */ var _rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "react-dom");
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);
-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 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/Box/Position/PositionAnimated.tsx":
-/*!**********************************************************!*\
-  !*** ./src/components/Box/Position/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 ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! . */ "./src/components/Box/Position/index.ts");
-/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/Box/AnimatedVisibility/index.ts");
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __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_2__["default"], { visibility: visible },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_1__["default"], __assign({}, props), children)));
-};
-/* harmony default export */ __webpack_exports__["default"] = (PositionAnimated);
-/***/ }),
-/***/ "./src/components/Box/Position/index.ts":
-/*!**********************************************!*\
-  !*** ./src/components/Box/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 */   "PositionAnimated": function() { return /* reexport safe */ _PositionAnimated__WEBPACK_IMPORTED_MODULE_1__["default"]; }
-/* harmony export */ });
-/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Position */ "./src/components/Box/Position/Position.tsx");
-/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PositionAnimated */ "./src/components/Box/Position/PositionAnimated.tsx");
-/***/ }),
-/***/ "./src/components/Box/Scrollable/Scrollable.tsx":
-/*!******************************************************!*\
-  !*** ./src/components/Box/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 _BoxTransforms__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../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(_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__.BoxTransforms.Provider, { children: children, value: (0,_BoxTransforms__WEBPACK_IMPORTED_MODULE_5__.useComposedBoxTransform)(transformFn) }));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
-/***/ }),
-/***/ "./src/components/Box/Scrollable/index.ts":
-/*!************************************************!*\
-  !*** ./src/components/Box/Scrollable/index.ts ***!
-  \************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _Scrollable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Scrollable */ "./src/components/Box/Scrollable/Scrollable.tsx");
-/* harmony default export */ __webpack_exports__["default"] = (_Scrollable__WEBPACK_IMPORTED_MODULE_0__.Scrollable);
+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]);
+};
 /***/ }),
@@ -7848,6 +7429,121 @@ __webpack_require__.r(__webpack_exports__);
+/***/ }),
+/***/ "./src/components/Flex/FlexContainer.tsx":
+/*!***********************************************!*\
+  !*** ./src/components/Flex/FlexContainer.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_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box/BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
+function FlexContainer(_a) {
+    var _b = _a.inline, inline = _b === void 0 ? false : _b, children = _a.children, direction = _a.direction, wrap = _a.wrap, alignItems = _a.alignItems, alignContent = _a.alignContent, justifyContent = _a.justifyContent;
+    var transformFn = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (props) {
+        if (inline !== undefined && props.display === undefined) {
+            props.display = inline ? 'inline-flex' : 'flex';
+        }
+        if (direction !== undefined && props.flexDirection === undefined) {
+            props.flexDirection = direction;
+        }
+        if (wrap !== undefined && props.flexWrap === undefined) {
+            props.flexWrap = wrap === 'no-wrap' ? 'nowrap' : wrap;
+        }
+        if (alignItems !== undefined && props.alignItems === undefined) {
+            props.alignItems =
+                (alignItems === 'start' && 'flex-start') ||
+                    (alignItems === 'end' && 'flex-end') ||
+                    alignItems;
+        }
+        if (alignContent !== undefined && props.alignContent === undefined) {
+            props.alignContent =
+                (alignContent === 'start' && 'flex-start') ||
+                    (alignContent === 'end' && 'flex-end') ||
+                    alignContent;
+        }
+        if (justifyContent !== undefined && props.justifyContent === undefined) {
+            props.justifyContent =
+                (justifyContent === 'start' && 'flex-start') ||
+                    (justifyContent === 'end' && 'flex-end') ||
+                    justifyContent;
+        }
+        return props;
+    }, [alignContent, alignItems, direction, inline, justifyContent, wrap]);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__.BoxTransforms.Provider, { children: children, value: (0,_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__.useComposedBoxTransform)(transformFn) }));
+}
+/* harmony default export */ __webpack_exports__["default"] = (FlexContainer);
+/***/ }),
+/***/ "./src/components/Flex/FlexItem.tsx":
+/*!******************************************!*\
+  !*** ./src/components/Flex/FlexItem.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_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box/BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
+function FlexItem(_a) {
+    var children = _a.children, order = _a.order, grow = _a.grow, shrink = _a.shrink, basis = _a.basis, align = _a.align;
+    var transformFn = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (props) {
+        if (order !== undefined && props.order === undefined) {
+            props.order = order;
+        }
+        if (grow !== undefined && props.flexGrow === undefined) {
+            props.flexGrow = grow;
+        }
+        if (shrink !== undefined && props.flexShrink === undefined) {
+            props.flexShrink = shrink;
+        }
+        if (basis !== undefined && props.flexBasis === undefined) {
+            props.flexBasis = basis;
+        }
+        if (align !== undefined && props.alignSelf === undefined) {
+            props.alignSelf =
+                (align === 'start' && 'flex-start') ||
+                    (align === 'end' && 'flex-end') ||
+                    align;
+        }
+        return props;
+    }, [align, basis, grow, order, shrink]);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__.BoxTransforms.Provider, { children: children, value: (0,_Box_BoxTransforms__WEBPACK_IMPORTED_MODULE_1__.useComposedBoxTransform)(transformFn) }));
+}
+/* harmony default export */ __webpack_exports__["default"] = (FlexItem);
+/***/ }),
+/***/ "./src/components/Flex/index.ts":
+/*!**************************************!*\
+  !*** ./src/components/Flex/index.ts ***!
+  \**************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _FlexContainer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./FlexContainer */ "./src/components/Flex/FlexContainer.tsx");
+/* harmony import */ var _FlexItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./FlexItem */ "./src/components/Flex/FlexItem.tsx");
+/* harmony default export */ __webpack_exports__["default"] = ({
+    Container: _FlexContainer__WEBPACK_IMPORTED_MODULE_0__["default"],
+    Item: _FlexItem__WEBPACK_IMPORTED_MODULE_1__["default"],
+});
 /***/ }),
 /***/ "./src/components/Grid/Grid.tsx":
@@ -9643,7 +9339,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 _Icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Icon */ "./src/components/Icon/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9676,7 +9372,7 @@ var MessageReactionAction = function (_a) {
         ]
             .filter(Boolean)
             .join(' ') }, props),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_1__.Icon, __assign({}, { name: 'emoji-plus', size: 'x16' }))));
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_1__.Icon, { name: 'emoji-plus', size: 16 })));
 };
@@ -10998,7 +10694,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 _Box__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-/* harmony import */ var _Box_Scrollable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box/Scrollable */ "./src/components/Box/Scrollable/index.ts");
+/* 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) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -11026,7 +10722,7 @@ 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(_Box_Scrollable__WEBPACK_IMPORTED_MODULE_2__["default"], { vertical: true, onScrollContent: 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))));
 };
@@ -11792,16 +11488,17 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "useCursor": function() { return /* reexport safe */ _useCursor__WEBPACK_IMPORTED_MODULE_4__.useCursor; },
+/* harmony export */   "useCursor": function() { return /* reexport safe */ _useCursor__WEBPACK_IMPORTED_MODULE_5__.useCursor; },
 /* harmony export */   "Empty": function() { return /* binding */ Empty; },
 /* harmony export */   "Options": function() { return /* binding */ Options; }
 /* 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 _Tile__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
-/* harmony import */ var _Option__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Option */ "./src/components/Options/Option/index.tsx");
-/* harmony import */ var _useCursor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./useCursor */ "./src/components/Options/useCursor.ts");
+/* 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");
+/* harmony import */ var _useCursor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./useCursor */ "./src/components/Options/useCursor.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -11846,17 +11543,18 @@ var __read = (undefined && undefined.__read) || function (o, n) {
 var prevent = function (e) {
     e.preventDefault();
     e.stopPropagation();
 };
 var Empty = (0,react__WEBPACK_IMPORTED_MODULE_0__.memo)(function (_a) {
     var customEmpty = _a.customEmpty;
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Option__WEBPACK_IMPORTED_MODULE_3__["default"], { label: customEmpty || 'Empty' }));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Option__WEBPACK_IMPORTED_MODULE_4__["default"], { label: customEmpty || 'Empty' }));
 });
 var Options = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (_a, ref) {
     var _b, _c;
-    var _d = _a.maxHeight, maxHeight = _d === void 0 ? '144px' : _d, multiple = _a.multiple, _e = _a.renderEmpty, EmptyComponent = _e === void 0 ? Empty : _e, options = _a.options, cursor = _a.cursor, _f = _a.renderItem, OptionComponent = _f === void 0 ? _Option__WEBPACK_IMPORTED_MODULE_3__["default"] : _f, onSelect = _a.onSelect, customEmpty = _a.customEmpty, props = __rest(_a, ["maxHeight", "multiple", "renderEmpty", "options", "cursor", "renderItem", "onSelect", "customEmpty"]);
+    var _d = _a.maxHeight, maxHeight = _d === void 0 ? '144px' : _d, multiple = _a.multiple, _e = _a.renderEmpty, EmptyComponent = _e === void 0 ? Empty : _e, options = _a.options, cursor = _a.cursor, _f = _a.renderItem, OptionComponent = _f === void 0 ? _Option__WEBPACK_IMPORTED_MODULE_4__["default"] : _f, onSelect = _a.onSelect, customEmpty = _a.customEmpty, props = __rest(_a, ["maxHeight", "multiple", "renderEmpty", "options", "cursor", "renderItem", "onSelect", "customEmpty"]);
     var liRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(function () {
         if (!liRef.current) {
@@ -11884,9 +11582,9 @@ var Options = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (_a, re
         });
     }, [options, multiple, cursor, onSelect]);
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Box, __assign({ "rcx-options": true }, props, { ref: ref }),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Tile__WEBPACK_IMPORTED_MODULE_2__["default"], { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2' },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_1__.Scrollable, { vertical: true, smooth: true },
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Tile__WEBPACK_IMPORTED_MODULE_2__["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])
+        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])
                         ? String((_c = options === null || options === void 0 ? void 0 : options[cursor]) === null || _c === void 0 ? void 0 : _c[0])
                         : undefined },
                     !options.length && react__WEBPACK_IMPORTED_MODULE_0___default().createElement(EmptyComponent, { customEmpty: customEmpty }),
@@ -11939,7 +11637,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 _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
 /* harmony import */ var _useVisible__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./useVisible */ "./src/components/Options/useVisible.ts");
 var __read = (undefined && undefined.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
@@ -11977,7 +11675,7 @@ var useCursor = function (initial, options, onChange) {
     var reset = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setCursor(0); });
     var handleKeyUp = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (e) {
         var keyCode = e.keyCode;
-        if (_Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.HIDDEN === visibility &&
+        if (_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN === visibility &&
             keyCode === keyCodes.TAB) {
             return show();
         }
@@ -11985,7 +11683,7 @@ var useCursor = function (initial, options, onChange) {
     var handleKeyDown = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (e) {
         var lastIndex = options.length - 1;
         var keyCode = e.keyCode, key = e.key;
-        if (_Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.HIDDEN === visibility &&
+        if (_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN === visibility &&
             keyCode !== keyCodes.ESC &&
             keyCode !== keyCodes.TAB) {
             show();
@@ -12011,7 +11709,7 @@ var useCursor = function (initial, options, onChange) {
                 return setCursor(cursor + 1);
             case keyCodes.ENTER:
                 e.preventDefault();
-                if (visibility === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE) {
+                if (visibility === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
                     e.persist();
                     e.nativeEvent.stopImmediatePropagation(); // TODO
                     e.stopPropagation();
@@ -12023,7 +11721,7 @@ var useCursor = function (initial, options, onChange) {
                 e.preventDefault();
                 reset();
                 hide();
-                if (visibility === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE) {
+                if (visibility === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
                     e.persist();
                     e.nativeEvent.stopImmediatePropagation(); // TODO
                     e.stopPropagation();
@@ -12059,7 +11757,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _Box_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Box/AnimatedVisibility */ "./src/components/Box/AnimatedVisibility/index.ts");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
 var __read = (undefined && undefined.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -12079,10 +11777,10 @@ var __read = (undefined && undefined.__read) || function (o, n) {
 var useVisible = function (initialVisibility) {
-    if (initialVisibility === void 0) { initialVisibility = _Box_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"].HIDDEN; }
+    if (initialVisibility === void 0) { initialVisibility = _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"].HIDDEN; }
     var _a = __read((0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useDebouncedState)(initialVisibility, 10), 2), visible = _a[0], setVisible = _a[1];
-    var hide = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setVisible(_Box_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"].HIDDEN); });
-    var show = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setVisible(_Box_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"].VISIBLE); });
+    var hide = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setVisible(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"].HIDDEN); });
+    var show = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setVisible(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"].VISIBLE); });
     return [visible, hide, show];
 };
@@ -12107,11 +11805,12 @@ __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 react_virtuoso__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react-virtuoso */ "../../node_modules/react-virtuoso/dist/index.m.js");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
-/* harmony import */ var _CheckBox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../CheckBox */ "./src/components/CheckBox/index.ts");
-/* harmony import */ var _Options_Option__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Options/Option */ "./src/components/Options/Option/index.tsx");
-/* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
+/* 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 _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");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12157,18 +11856,19 @@ var __read = (undefined && undefined.__read) || function (o, n) {
 var prevent = function (e) {
     e.preventDefault();
     e.stopPropagation();
 };
-var Empty = (0,react__WEBPACK_IMPORTED_MODULE_1__.memo)(function () { return react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options_Option__WEBPACK_IMPORTED_MODULE_4__["default"], { label: 'Empty' }); });
+var Empty = (0,react__WEBPACK_IMPORTED_MODULE_1__.memo)(function () { return react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options_Option__WEBPACK_IMPORTED_MODULE_5__["default"], { label: 'Empty' }); });
 var CheckOption = (0,react__WEBPACK_IMPORTED_MODULE_1__.memo)(function CheckOption(_a) {
     var selected = _a.selected, label = _a.children, options = __rest(_a, ["selected", "children"]);
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options_Option__WEBPACK_IMPORTED_MODULE_4__["default"], __assign({ label: label, selected: selected }, options),
-        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_CheckBox__WEBPACK_IMPORTED_MODULE_3__.CheckBox, { checked: selected })));
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options_Option__WEBPACK_IMPORTED_MODULE_5__["default"], __assign({ label: label, selected: selected }, options),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_CheckBox__WEBPACK_IMPORTED_MODULE_4__.CheckBox, { checked: selected })));
 });
 var OptionsPaginated = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref) {
-    var title = _a.title, multiple = _a.multiple, _b = _a.renderEmpty, EmptyComponent = _b === void 0 ? Empty : _b, options = _a.options, cursor = _a.cursor, _c = _a.renderItem, OptionComponent = _c === void 0 ? _Options_Option__WEBPACK_IMPORTED_MODULE_4__["default"] : _c, onSelect = _a.onSelect, endReached = _a.endReached, props = __rest(_a, ["title", "multiple", "renderEmpty", "options", "cursor", "renderItem", "onSelect", "endReached"]);
+    var title = _a.title, multiple = _a.multiple, _b = _a.renderEmpty, EmptyComponent = _b === void 0 ? Empty : _b, options = _a.options, cursor = _a.cursor, _c = _a.renderItem, OptionComponent = _c === void 0 ? _Options_Option__WEBPACK_IMPORTED_MODULE_5__["default"] : _c, onSelect = _a.onSelect, endReached = _a.endReached, props = __rest(_a, ["title", "multiple", "renderEmpty", "options", "cursor", "renderItem", "onSelect", "endReached"]);
     var OptionsComponentWithData = function (_a) {
         var index = _a.index, data = _a.data;
         var value = data.value, label = data.label, selected = data.selected;
@@ -12178,17 +11878,17 @@ 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_2__.Box, __assign({ "rcx-options": true }, props, { ref: ref }),
-        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Tile__WEBPACK_IMPORTED_MODULE_5__["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_6__.Virtuoso, { endReached: endReached, style: { height: '144px' }, totalCount: options.length, data: options,
+    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, __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 }}
             itemContent: function (index, data) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(OptionsComponentWithData, { index: index, data: data })); } })))));
 });
 var useVisible = function (initialVisibility) {
-    if (initialVisibility === void 0) { initialVisibility = _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.HIDDEN; }
+    if (initialVisibility === void 0) { initialVisibility = _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN; }
     var _a = __read((0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useDebouncedState)(initialVisibility, 10), 2), visible = _a[0], setVisible = _a[1];
-    var hide = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setVisible(_Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.HIDDEN); });
-    var show = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setVisible(_Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE); });
+    var hide = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setVisible(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].HIDDEN); });
+    var show = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function () { return setVisible(_AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE); });
     return [visible, hide, show];
 };
@@ -12317,37 +12017,187 @@ var Pagination = function (_a) {
 /***/ }),
-/***/ "./src/components/Pagination/index.ts":
-/*!********************************************!*\
-  !*** ./src/components/Pagination/index.ts ***!
-  \********************************************/
+/***/ "./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");
+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 __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 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__) {
+"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 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 Position = function (_a) {
+    var anchor = _a.anchor, children = _a.children, placement = _a.placement, margin = _a.margin, className = _a.className, props = __rest(_a, ["anchor", "children", "placement", "margin", "className"]);
+    var target = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    var _b = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.usePosition)(anchor, target, (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return ({ placement: placement, margin: margin }); }, [placement, margin])) || {}, positionStyle = _b.style, positionPlacement = _b.placement;
+    var style = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return (__assign({ position: 'fixed' }, positionStyle)); }, [positionStyle]);
+    var portalContainer = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+        var element = document.createElement('div');
+        document.body.appendChild(element);
+        return element;
+    }, []);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+        return function () {
+            document.body.removeChild(portalContainer);
+        };
+    }, [portalContainer]);
+    return (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.createPortal)((0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(children, __assign(__assign({ ref: target, style: style }, props), { placement: positionPlacement })), portalContainer);
+};
+/* harmony default export */ __webpack_exports__["default"] = (Position);
+/***/ }),
+/***/ "./src/components/Position/index.ts":
+/*!******************************************!*\
+  !*** ./src/components/Position/index.ts ***!
+  \******************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Pagination": function() { return /* reexport safe */ _Pagination__WEBPACK_IMPORTED_MODULE_0__.Pagination; }
+/* harmony export */   "default": function() { return /* reexport safe */ _Position__WEBPACK_IMPORTED_MODULE_0__["default"]; }
 /* harmony export */ });
-/* harmony import */ var _Pagination__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Pagination */ "./src/components/Pagination/Pagination.tsx");
+/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Position */ "./src/components/Position/Position.tsx");
 /***/ }),
-/***/ "./src/components/PasswordInput/PasswordInput.tsx":
-/*!********************************************************!*\
-  !*** ./src/components/PasswordInput/PasswordInput.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 _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 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");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12359,50 +12209,42 @@ var __assign = (undefined && undefined.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __read = (undefined && undefined.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
+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]];
         }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
+    return t;
 };
-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);
+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/PasswordInput/index.ts":
-/*!***********************************************!*\
-  !*** ./src/components/PasswordInput/index.ts ***!
-  \***********************************************/
+/***/ "./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 */ _PasswordInput__WEBPACK_IMPORTED_MODULE_0__["default"]; }
+/* harmony export */   "default": function() { return /* reexport safe */ _PositionAnimated__WEBPACK_IMPORTED_MODULE_0__["default"]; }
 /* harmony export */ });
-/* harmony import */ var _PasswordInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PasswordInput */ "./src/components/PasswordInput/PasswordInput.tsx");
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PositionAnimated */ "./src/components/PositionAnimated/PositionAnimated.tsx");
@@ -12549,6 +12391,101 @@ __webpack_require__.r(__webpack_exports__);
+/***/ }),
+/***/ "./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);
+        }
+        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__) {
+"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":
@@ -12619,9 +12556,11 @@ __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 _Icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12665,9 +12604,11 @@ var __read = (undefined && undefined.__read) || function (o, n) {
-var Addon = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.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_2__.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_2__.Box, __assign({ ref: ref, fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button' }, props))); });
+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 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);
@@ -12685,7 +12626,7 @@ var Select = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref
     } : _d, _e = _a.getLabel, getLabel = _e === void 0 ? function (_a) {
         var _b = _a === void 0 ? ['', ''] : _a, _c = __read(_b, 2), _ = _c[0], label = _c[1];
         return label;
-    } : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.renderOptions, _Options = _g === void 0 ? _Options__WEBPACK_IMPORTED_MODULE_4__.Options : _g, customEmpty = _a.customEmpty, props = __rest(_a, ["value", "filter", "error", "disabled", "options", "anchor", "onChange", "getValue", "getLabel", "placeholder", "renderOptions", "customEmpty"]);
+    } : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.renderOptions, _Options = _g === void 0 ? _Options__WEBPACK_IMPORTED_MODULE_5__.Options : _g, addonIcon = _a.addonIcon, customEmpty = _a.customEmpty, props = __rest(_a, ["value", "filter", "error", "disabled", "options", "anchor", "onChange", "getValue", "getLabel", "placeholder", "renderOptions", "addonIcon", "customEmpty"]);
     var _h = __read((0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value), 2), internalValue = _h[0], setInternalValue = _h[1];
     var internalChangedByKeyboard = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
@@ -12708,7 +12649,7 @@ var Select = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref
         };
         return options.filter(applyFilter).map(mapOptions);
     }, [options, internalValue, filter]);
-    var _j = __read((0,_Options__WEBPACK_IMPORTED_MODULE_4__.useCursor)(index, filteredOptions, internalChangedByKeyboard), 5), cursor = _j[0], handleKeyDown = _j[1], handleKeyUp = _j[2], reset = _j[3], _k = __read(_j[4], 3), visible = _k[0], hide = _k[1], show = _k[2];
+    var _j = __read((0,_Options__WEBPACK_IMPORTED_MODULE_5__.useCursor)(index, filteredOptions, internalChangedByKeyboard), 5), cursor = _j[0], handleKeyDown = _j[1], handleKeyUp = _j[2], reset = _j[3], _k = __read(_j[4], 3), visible = _k[0], hide = _k[1], show = _k[2];
     var internalChangedByClick = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useMutableCallback)(function (_a) {
         var _b = __read(_a, 1), value = _b[0];
         setInternalValue(value);
@@ -12720,24 +12661,24 @@ var Select = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_a, ref
     var _l = (0,_rocket_chat_fuselage_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)(), containerRef = _l.ref, borderBoxSize = _l.borderBoxSize;
     useDidUpdate(reset, [filter, internalValue]);
     var valueLabel = getLabel(option);
-    var visibleText = (filter === undefined || visible === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.HIDDEN) &&
+    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 () {
         var _a;
-        if (visible === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE) {
+        if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
             return hide();
         }
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         return show();
     });
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.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),
+    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_2__.Box, { flexGrow: 1, is: 'span', mi: 'x4', "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint' }, visibleText)),
+            visibleText && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_3__.Box, { flexGrow: 1, is: 'span', mi: 'x4', "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint' }, visibleText)),
             react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: anchorRef, "aria-haspopup": 'listbox', onClick: show, onBlur: hide, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }),
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Addon, { mi: 'x4', children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_3__.Icon, { name: visible === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE
+            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(_Box__WEBPACK_IMPORTED_MODULE_2__.PositionAnimated, { visible: visible, anchor: containerRef },
+                        : addonIcon || 'chevron-down', size: 'x20' }) })),
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_PositionAnimated__WEBPACK_IMPORTED_MODULE_6__["default"], { visible: visible, anchor: containerRef },
             react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Options, { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: filteredOptions, onSelect: internalChangedByClick, cursor: cursor, customEmpty: customEmpty }))));
 });
@@ -12951,14 +12892,17 @@ __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 _Chip__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts");
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-/* harmony import */ var _Options_useVisible__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
-/* harmony import */ var _OptionsPaginated__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
-/* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Select */ "./src/components/Select/index.ts");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _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__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../Select */ "./src/components/Select/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13013,14 +12957,17 @@ 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_3__["default"], __assign({ maxWidth: '150px', withTruncatedText: true }, props))); });
+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__WEBPACK_IMPORTED_MODULE_9__.Focus : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, placeholder = _a.placeholder, _e = _a.renderOptions, _Options = _e === void 0 ? _OptionsPaginated__WEBPACK_IMPORTED_MODULE_8__.OptionsPaginated : _e, endReached = _a.endReached, props = __rest(_a, ["withTitle", "value", "filter", "options", "error", "disabled", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
+    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__WEBPACK_IMPORTED_MODULE_12__.Focus : _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; });
@@ -13035,11 +12982,11 @@ var PaginatedMultiSelect = function (_a) {
         setInternalValue(newValue);
         return onChange(newValue);
     };
-    var _g = __read((0,_Options_useVisible__WEBPACK_IMPORTED_MODULE_7__.useVisible)(), 3), visible = _g[0], hide = _g[1], show = _g[2];
+    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 === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE) {
+        if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
             return hide();
         }
         if (ref && ref.current) {
@@ -13047,13 +12994,13 @@ var PaginatedMultiSelect = function (_a) {
             return show();
         }
     });
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.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(_Box__WEBPACK_IMPORTED_MODULE_2__.Flex.Item, { grow: 1 },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_6__["default"], { inline: 'x4' },
-                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Flex.Container, null,
-                    react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, { is: 'div' },
-                        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox' },
-                            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_6__["default"], { all: 'x4' },
+    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;
@@ -13071,21 +13018,21 @@ var PaginatedMultiSelect = function (_a) {
                                                 return val.value === value;
                                             })) === null || _b === void 0 ? void 0 : _b.label) })));
                                 }))))))),
-        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Flex.Item, { grow: 0, shrink: 0 },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Margins__WEBPACK_IMPORTED_MODULE_6__["default"], { inline: 'x4' },
-                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Select__WEBPACK_IMPORTED_MODULE_9__.Addon, { children: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Icon__WEBPACK_IMPORTED_MODULE_4__.Icon, { name: visible === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE
+        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__WEBPACK_IMPORTED_MODULE_12__.Addon, { 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(_Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility, { visibility: visible },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.Position, { anchor: containerRef },
+        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(_Box__WEBPACK_IMPORTED_MODULE_2__.Flex.Item, { grow: 1 },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_InputBox__WEBPACK_IMPORTED_MODULE_5__.InputBox.Input, __assign({ ref: ref, placeholder: placeholder, value: filter, onInput: function (e) {
+        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 }))));
@@ -13111,10 +13058,12 @@ __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 _Icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _Options_useVisible__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
-/* harmony import */ var _OptionsPaginated__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Box */ "./src/components/Box/index.js");
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _Options_useVisible__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
+/* harmony import */ var _OptionsPaginated__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13160,9 +13109,11 @@ var __read = (undefined && undefined.__read) || function (o, n) {
-var Addon = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) { return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.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_2__.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_2__.Box, __assign({ ref: ref, fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button' }, props))); });
+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();
@@ -13179,11 +13130,11 @@ var useDidUpdate = function (func) {
     }, [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 ? 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_5__.OptionsPaginated : _f, endReached = _a.endReached, props = __rest(_a, ["value", "withTitle", "filter", "setFilter", "error", "disabled", "options", "anchor", "onChange", "placeholder", "renderOptions", "endReached"]);
+    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_4__.useVisible)(), 3), visible = _h[0], hide = _h[1], show = _h[2];
+    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);
@@ -13194,10 +13145,10 @@ var PaginatedSelect = function (_a) {
     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 === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.HIDDEN) &&
+    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 === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE) {
+        if (visible === _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_2__["default"].VISIBLE) {
             return hide();
         }
         if (ref && ref.current) {
@@ -13205,14 +13156,14 @@ var PaginatedSelect = function (_a) {
             return show();
         }
     });
-    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Box__WEBPACK_IMPORTED_MODULE_2__.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),
+    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_2__.Box, { flexGrow: 1, is: 'span', mi: 'x4', "rcx-select__item": true, fontScale: 'p2m', color: valueLabel ? 'default' : 'hint' }, 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_3__.Icon, { name: visible === _Box__WEBPACK_IMPORTED_MODULE_2__.AnimatedVisibility.VISIBLE
+            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(_Box__WEBPACK_IMPORTED_MODULE_2__.PositionAnimated, { visible: visible, anchor: containerRef },
+        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 })))));
 };
@@ -15263,242 +15214,254 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "Accordion": function() { return /* reexport safe */ _Accordion__WEBPACK_IMPORTED_MODULE_0__.Accordion; },
-/* harmony export */   "AutoComplete": function() { return /* reexport safe */ _AutoComplete__WEBPACK_IMPORTED_MODULE_1__.AutoComplete; },
-/* harmony export */   "Avatar": function() { return /* reexport safe */ _Avatar__WEBPACK_IMPORTED_MODULE_2__.Avatar; },
-/* harmony export */   "Badge": function() { return /* reexport safe */ _Badge__WEBPACK_IMPORTED_MODULE_3__.Badge; },
-/* harmony export */   "Banner": function() { return /* reexport safe */ _Banner__WEBPACK_IMPORTED_MODULE_4__["default"]; },
-/* harmony export */   "Box": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_5__.Box; },
-/* harmony export */   "AnimatedVisibility": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_5__.AnimatedVisibility; },
-/* harmony export */   "Flex": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_5__.Flex; },
-/* harmony export */   "Position": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_5__.Position; },
-/* harmony export */   "PositionAnimated": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_5__.PositionAnimated; },
-/* harmony export */   "Scrollable": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_5__.Scrollable; },
-/* harmony export */   "useArrayLikeClassNameProp": function() { return /* reexport safe */ _Box__WEBPACK_IMPORTED_MODULE_5__.useArrayLikeClassNameProp; },
-/* harmony export */   "Button": function() { return /* reexport safe */ _Button__WEBPACK_IMPORTED_MODULE_6__["default"]; },
-/* harmony export */   "ActionButton": function() { return /* reexport safe */ _Button__WEBPACK_IMPORTED_MODULE_6__.ActionButton; },
-/* harmony export */   "ButtonGroup": function() { return /* reexport safe */ _ButtonGroup__WEBPACK_IMPORTED_MODULE_7__.ButtonGroup; },
-/* harmony export */   "Callout": function() { return /* reexport safe */ _Callout__WEBPACK_IMPORTED_MODULE_8__.Callout; },
-/* harmony export */   "CheckBox": function() { return /* reexport safe */ _CheckBox__WEBPACK_IMPORTED_MODULE_9__.CheckBox; },
-/* harmony export */   "Chevron": function() { return /* reexport safe */ _Chevron__WEBPACK_IMPORTED_MODULE_10__.Chevron; },
-/* harmony export */   "CodeSnippet": function() { return /* reexport safe */ _CodeSnippet__WEBPACK_IMPORTED_MODULE_11__["default"]; },
-/* harmony export */   "Chip": function() { return /* reexport safe */ _Chip__WEBPACK_IMPORTED_MODULE_12__["default"]; },
-/* harmony export */   "Divider": function() { return /* reexport safe */ _Divider__WEBPACK_IMPORTED_MODULE_13__.Divider; },
-/* harmony export */   "Dropdown": function() { return /* reexport safe */ _Dropdown__WEBPACK_IMPORTED_MODULE_14__.Dropdown; },
-/* harmony export */   "EmailInput": function() { return /* reexport safe */ _EmailInput__WEBPACK_IMPORTED_MODULE_15__.EmailInput; },
-/* harmony export */   "Field": function() { return /* reexport safe */ _Field__WEBPACK_IMPORTED_MODULE_16__["default"]; },
-/* harmony export */   "FieldGroup": function() { return /* reexport safe */ _FieldGroup__WEBPACK_IMPORTED_MODULE_17__.FieldGroup; },
-/* harmony export */   "Grid": function() { return /* reexport safe */ _Grid__WEBPACK_IMPORTED_MODULE_18__.Grid; },
-/* harmony export */   "GridItem": function() { return /* reexport safe */ _Grid__WEBPACK_IMPORTED_MODULE_18__.GridItem; },
-/* harmony export */   "Icon": function() { return /* reexport safe */ _Icon__WEBPACK_IMPORTED_MODULE_19__.Icon; },
-/* harmony export */   "Input": function() { return /* reexport safe */ _InputBox__WEBPACK_IMPORTED_MODULE_20__.Input; },
-/* harmony export */   "InputBox": function() { return /* reexport safe */ _InputBox__WEBPACK_IMPORTED_MODULE_20__.InputBox; },
-/* harmony export */   "InputBoxSkeleton": function() { return /* reexport safe */ _InputBox__WEBPACK_IMPORTED_MODULE_20__.InputBoxSkeleton; },
-/* harmony export */   "Wrapper": function() { return /* reexport safe */ _InputBox__WEBPACK_IMPORTED_MODULE_20__.Wrapper; },
-/* harmony export */   "Label": function() { return /* reexport safe */ _Label__WEBPACK_IMPORTED_MODULE_21__.Label; },
-/* harmony export */   "Margins": function() { return /* reexport safe */ _Margins__WEBPACK_IMPORTED_MODULE_22__["default"]; },
-/* harmony export */   "Menu": function() { return /* reexport safe */ _Menu__WEBPACK_IMPORTED_MODULE_23__.Menu; },
-/* harmony export */   "Message": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__["default"]; },
-/* harmony export */   "MessageBlock": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageBlock; },
-/* harmony export */   "MessageBody": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageBody; },
-/* harmony export */   "MessageContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageContainer; },
-/* harmony export */   "MessageContainerFixed": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageContainerFixed; },
-/* harmony export */   "MessageDivider": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageDivider; },
-/* harmony export */   "MessageGenericPreview": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageGenericPreview; },
-/* harmony export */   "MessageGenericPreviewContent": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageGenericPreviewContent; },
-/* harmony export */   "MessageGenericPreviewDescription": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageGenericPreviewDescription; },
-/* harmony export */   "MessageGenericPreviewFooter": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageGenericPreviewFooter; },
-/* harmony export */   "MessageGenericPreviewImage": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageGenericPreviewImage; },
-/* harmony export */   "MessageGenericPreviewThumb": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageGenericPreviewThumb; },
-/* harmony export */   "MessageGenericPreviewTitle": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageGenericPreviewTitle; },
-/* harmony export */   "MessageHeader": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageHeader; },
-/* harmony export */   "MessageLeftContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageLeftContainer; },
-/* harmony export */   "MessageMetrics": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageMetrics; },
-/* harmony export */   "MessageMetricsFollowing": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageMetricsFollowing; },
-/* harmony export */   "MessageMetricsItem": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageMetricsItem; },
-/* harmony export */   "MessageMetricsReply": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageMetricsReply; },
-/* harmony export */   "MessageName": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageName; },
-/* harmony export */   "MessageReaction": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageReaction; },
-/* harmony export */   "MessageReactionAction": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageReactionAction; },
-/* harmony export */   "MessageReactionCounter": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageReactionCounter; },
-/* harmony export */   "MessageReactionEmoji": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageReactionEmoji; },
-/* harmony export */   "MessageReactions": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageReactions; },
-/* harmony export */   "MessageRole": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageRole; },
-/* harmony export */   "MessageRoles": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageRoles; },
-/* harmony export */   "MessageStatusIndicator": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageStatusIndicator; },
-/* harmony export */   "MessageStatusIndicatorItem": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageStatusIndicatorItem; },
-/* harmony export */   "MessageStatusPrivateIndicator": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageStatusPrivateIndicator; },
-/* harmony export */   "MessageSystem": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageSystem; },
-/* harmony export */   "MessageSystemBlock": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageSystemBlock; },
-/* harmony export */   "MessageSystemBody": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageSystemBody; },
-/* harmony export */   "MessageSystemContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageSystemContainer; },
-/* harmony export */   "MessageSystemLeftContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageSystemLeftContainer; },
-/* harmony export */   "MessageSystemName": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageSystemName; },
-/* harmony export */   "MessageSystemTimestamp": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageSystemTimestamp; },
-/* harmony export */   "MessageTimestamp": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageTimestamp; },
-/* harmony export */   "MessageToolbox": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageToolbox; },
-/* harmony export */   "MessageToolboxItem": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageToolboxItem; },
-/* harmony export */   "MessageToolboxWrapper": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageToolboxWrapper; },
-/* harmony export */   "MessageUsername": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.MessageUsername; },
-/* harmony export */   "ThreadMessage": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessage; },
-/* harmony export */   "ThreadMessageBody": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessageBody; },
-/* harmony export */   "ThreadMessageContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessageContainer; },
-/* harmony export */   "ThreadMessageFollow": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessageFollow; },
-/* harmony export */   "ThreadMessageIconThread": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessageIconThread; },
-/* harmony export */   "ThreadMessageLeftContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessageLeftContainer; },
-/* harmony export */   "ThreadMessageOrigin": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessageOrigin; },
-/* harmony export */   "ThreadMessageRow": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessageRow; },
-/* harmony export */   "ThreadMessageUnfollow": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_24__.ThreadMessageUnfollow; },
-/* harmony export */   "Modal": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__["default"]; },
-/* harmony export */   "ModalBackdrop": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__.ModalBackdrop; },
-/* harmony export */   "ModalClose": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__.ModalClose; },
-/* harmony export */   "ModalContent": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__.ModalContent; },
-/* harmony export */   "ModalFooter": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__.ModalFooter; },
-/* harmony export */   "ModalHeader": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__.ModalHeader; },
-/* harmony export */   "ModalIcon": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__.ModalIcon; },
-/* harmony export */   "ModalThumb": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__.ModalThumb; },
-/* harmony export */   "ModalTitle": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_25__.ModalTitle; },
-/* harmony export */   "MultiSelect": function() { return /* reexport safe */ _MultiSelect__WEBPACK_IMPORTED_MODULE_26__.MultiSelect; },
-/* harmony export */   "MultiSelectFiltered": function() { return /* reexport safe */ _MultiSelect__WEBPACK_IMPORTED_MODULE_26__.MultiSelectFiltered; },
-/* harmony export */   "NumberInput": function() { return /* reexport safe */ _NumberInput__WEBPACK_IMPORTED_MODULE_27__.NumberInput; },
-/* harmony export */   "Options": function() { return /* reexport safe */ _Options__WEBPACK_IMPORTED_MODULE_28__["default"]; },
-/* harmony export */   "CheckOption": function() { return /* reexport safe */ _Options__WEBPACK_IMPORTED_MODULE_28__.CheckOption; },
-/* harmony export */   "Empty": function() { return /* reexport safe */ _Options__WEBPACK_IMPORTED_MODULE_28__.Empty; },
-/* harmony export */   "useCursor": function() { return /* reexport safe */ _Options__WEBPACK_IMPORTED_MODULE_28__.useCursor; },
-/* harmony export */   "Option": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__["default"]; },
-/* harmony export */   "OptionAvatar": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionAvatar; },
-/* harmony export */   "OptionColumn": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionColumn; },
-/* harmony export */   "OptionContent": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionContent; },
-/* harmony export */   "OptionDescription": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionDescription; },
-/* harmony export */   "OptionDivider": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionDivider; },
-/* harmony export */   "OptionIcon": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionIcon; },
-/* harmony export */   "OptionMenu": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionMenu; },
-/* harmony export */   "OptionSkeleton": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionSkeleton; },
-/* harmony export */   "OptionTitle": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_29__.OptionTitle; },
-/* harmony export */   "Pagination": function() { return /* reexport safe */ _Pagination__WEBPACK_IMPORTED_MODULE_30__.Pagination; },
-/* harmony export */   "PasswordInput": function() { return /* reexport safe */ _PasswordInput__WEBPACK_IMPORTED_MODULE_31__["default"]; },
-/* harmony export */   "StatusBullet": function() { return /* reexport safe */ _StatusBullet__WEBPACK_IMPORTED_MODULE_32__.StatusBullet; },
-/* harmony export */   "ProgressBar": function() { return /* reexport safe */ _ProgressBar__WEBPACK_IMPORTED_MODULE_33__.ProgressBar; },
-/* harmony export */   "RadioButton": function() { return /* reexport safe */ _RadioButton__WEBPACK_IMPORTED_MODULE_34__.RadioButton; },
-/* harmony export */   "SearchInput": function() { return /* reexport safe */ _SearchInput__WEBPACK_IMPORTED_MODULE_35__.SearchInput; },
-/* harmony export */   "Addon": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_36__.Addon; },
-/* harmony export */   "Focus": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_36__.Focus; },
-/* harmony export */   "Select": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_36__.Select; },
-/* harmony export */   "SelectFiltered": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_36__.SelectFiltered; },
-/* harmony export */   "PaginatedMultiSelect": function() { return /* reexport safe */ _SelectPaginated__WEBPACK_IMPORTED_MODULE_37__.PaginatedMultiSelect; },
-/* harmony export */   "PaginatedMultiSelectFiltered": function() { return /* reexport safe */ _SelectPaginated__WEBPACK_IMPORTED_MODULE_37__.PaginatedMultiSelectFiltered; },
-/* harmony export */   "PaginatedSelect": function() { return /* reexport safe */ _SelectPaginated__WEBPACK_IMPORTED_MODULE_37__.PaginatedSelect; },
-/* harmony export */   "PaginatedSelectFiltered": function() { return /* reexport safe */ _SelectPaginated__WEBPACK_IMPORTED_MODULE_37__.PaginatedSelectFiltered; },
-/* harmony export */   "SelectInput": function() { return /* reexport safe */ _SelectInput__WEBPACK_IMPORTED_MODULE_38__.SelectInput; },
-/* harmony export */   "SelectInputOption": function() { return /* reexport safe */ _SelectInput__WEBPACK_IMPORTED_MODULE_38__.SelectInputOption; },
-/* harmony export */   "Sidebar": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__["default"]; },
-/* harmony export */   "SidebarFooter": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarFooter; },
-/* harmony export */   "SidebarFooterHighlight": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarFooterHighlight; },
-/* harmony export */   "SidebarItem": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItem; },
-/* harmony export */   "SidebarItemAction": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemAction; },
-/* harmony export */   "SidebarItemActions": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemActions; },
-/* harmony export */   "SidebarItemAvatar": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemAvatar; },
-/* harmony export */   "SidebarItemBadge": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemBadge; },
-/* harmony export */   "SidebarItemContainer": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemContainer; },
-/* harmony export */   "SidebarItemContent": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemContent; },
-/* harmony export */   "SidebarItemIcon": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemIcon; },
-/* harmony export */   "SidebarItemMenu": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemMenu; },
-/* harmony export */   "SidebarItemSubtitle": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemSubtitle; },
-/* harmony export */   "SidebarItemTime": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemTime; },
-/* harmony export */   "SidebarItemTitle": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemTitle; },
-/* harmony export */   "SidebarItemWrapper": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarItemWrapper; },
-/* harmony export */   "SidebarSection": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarSection; },
-/* harmony export */   "SidebarSectionTitle": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarSectionTitle; },
-/* harmony export */   "SidebarTopBar": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.SidebarTopBar; },
-/* harmony export */   "TopBarAction": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.TopBarAction; },
-/* harmony export */   "TopBarActions": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.TopBarActions; },
-/* harmony export */   "TopBarAvatar": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.TopBarAvatar; },
-/* harmony export */   "TopBarDivider": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.TopBarDivider; },
-/* harmony export */   "TopBarSection": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.TopBarSection; },
-/* harmony export */   "TopBarTitle": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.TopBarTitle; },
-/* harmony export */   "TopBarToolBox": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_39__.TopBarToolBox; },
-/* harmony export */   "Skeleton": function() { return /* reexport safe */ _Skeleton__WEBPACK_IMPORTED_MODULE_40__.Skeleton; },
-/* harmony export */   "States": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.States; },
-/* harmony export */   "StatesAction": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesAction; },
-/* harmony export */   "StatesActions": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesActions; },
-/* harmony export */   "StatesIcon": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesIcon; },
-/* harmony export */   "StatesSubtitle": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesSubtitle; },
-/* harmony export */   "StatesSuggestion": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesSuggestion; },
-/* harmony export */   "StatesSuggestionList": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesSuggestionList; },
-/* harmony export */   "StatesSuggestionListItem": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesSuggestionListItem; },
-/* harmony export */   "StatesSuggestionText": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesSuggestionText; },
-/* harmony export */   "StatesTitle": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_41__.StatesTitle; },
-/* harmony export */   "Table": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_42__["default"]; },
-/* harmony export */   "TableBody": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_42__.TableBody; },
-/* harmony export */   "TableCell": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_42__.TableCell; },
-/* harmony export */   "TableFoot": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_42__.TableFoot; },
-/* harmony export */   "TableHead": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_42__.TableHead; },
-/* harmony export */   "TableRow": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_42__.TableRow; },
-/* harmony export */   "TableSelection": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_42__.TableSelection; },
-/* harmony export */   "TableSelectionButton": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_42__.TableSelectionButton; },
-/* harmony export */   "Tabs": function() { return /* reexport safe */ _Tabs__WEBPACK_IMPORTED_MODULE_43__.Tabs; },
-/* harmony export */   "Tag": function() { return /* reexport safe */ _Tag__WEBPACK_IMPORTED_MODULE_44__.Tag; },
-/* harmony export */   "TelephoneInput": function() { return /* reexport safe */ _TelephoneInput__WEBPACK_IMPORTED_MODULE_45__.TelephoneInput; },
-/* harmony export */   "TextAreaInput": function() { return /* reexport safe */ _TextAreaInput__WEBPACK_IMPORTED_MODULE_46__.TextAreaInput; },
-/* harmony export */   "TextInput": function() { return /* reexport safe */ _TextInput__WEBPACK_IMPORTED_MODULE_47__.TextInput; },
-/* harmony export */   "Throbber": function() { return /* reexport safe */ _Throbber__WEBPACK_IMPORTED_MODULE_48__.Throbber; },
-/* harmony export */   "Tile": function() { return /* reexport safe */ _Tile__WEBPACK_IMPORTED_MODULE_49__["default"]; },
-/* harmony export */   "ToggleSwitch": function() { return /* reexport safe */ _ToggleSwitch__WEBPACK_IMPORTED_MODULE_50__.ToggleSwitch; },
-/* harmony export */   "Tooltip": function() { return /* reexport safe */ _Tooltip__WEBPACK_IMPORTED_MODULE_51__["default"]; },
-/* harmony export */   "UrlInput": function() { return /* reexport safe */ _UrlInput__WEBPACK_IMPORTED_MODULE_52__["default"]; }
+/* harmony export */   "AnimatedVisibility": function() { return /* reexport safe */ _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__["default"]; },
+/* harmony export */   "AutoComplete": function() { return /* reexport safe */ _AutoComplete__WEBPACK_IMPORTED_MODULE_2__.AutoComplete; },
+/* 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 */   "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; },
+/* harmony export */   "ButtonGroup": function() { return /* reexport safe */ _ButtonGroup__WEBPACK_IMPORTED_MODULE_9__.ButtonGroup; },
+/* harmony export */   "Callout": function() { return /* reexport safe */ _Callout__WEBPACK_IMPORTED_MODULE_10__.Callout; },
+/* harmony export */   "CheckBox": function() { return /* reexport safe */ _CheckBox__WEBPACK_IMPORTED_MODULE_11__.CheckBox; },
+/* harmony export */   "Chevron": function() { return /* reexport safe */ _Chevron__WEBPACK_IMPORTED_MODULE_12__.Chevron; },
+/* harmony export */   "CodeSnippet": function() { return /* reexport safe */ _CodeSnippet__WEBPACK_IMPORTED_MODULE_13__["default"]; },
+/* harmony export */   "Chip": function() { return /* reexport safe */ _Chip__WEBPACK_IMPORTED_MODULE_14__["default"]; },
+/* harmony export */   "Divider": function() { return /* reexport safe */ _Divider__WEBPACK_IMPORTED_MODULE_15__.Divider; },
+/* harmony export */   "Dropdown": function() { return /* reexport safe */ _Dropdown__WEBPACK_IMPORTED_MODULE_16__.Dropdown; },
+/* harmony export */   "EmailInput": function() { return /* reexport safe */ _EmailInput__WEBPACK_IMPORTED_MODULE_17__.EmailInput; },
+/* harmony export */   "Field": function() { return /* reexport safe */ _Field__WEBPACK_IMPORTED_MODULE_18__["default"]; },
+/* harmony export */   "FieldGroup": function() { return /* reexport safe */ _FieldGroup__WEBPACK_IMPORTED_MODULE_19__.FieldGroup; },
+/* harmony export */   "Flex": function() { return /* reexport safe */ _Flex__WEBPACK_IMPORTED_MODULE_20__["default"]; },
+/* harmony export */   "Grid": function() { return /* reexport safe */ _Grid__WEBPACK_IMPORTED_MODULE_21__.Grid; },
+/* harmony export */   "GridItem": function() { return /* reexport safe */ _Grid__WEBPACK_IMPORTED_MODULE_21__.GridItem; },
+/* harmony export */   "Icon": function() { return /* reexport safe */ _Icon__WEBPACK_IMPORTED_MODULE_22__.Icon; },
+/* harmony export */   "Input": function() { return /* reexport safe */ _InputBox__WEBPACK_IMPORTED_MODULE_23__.Input; },
+/* harmony export */   "InputBox": function() { return /* reexport safe */ _InputBox__WEBPACK_IMPORTED_MODULE_23__.InputBox; },
+/* harmony export */   "InputBoxSkeleton": function() { return /* reexport safe */ _InputBox__WEBPACK_IMPORTED_MODULE_23__.InputBoxSkeleton; },
+/* harmony export */   "Wrapper": function() { return /* reexport safe */ _InputBox__WEBPACK_IMPORTED_MODULE_23__.Wrapper; },
+/* harmony export */   "Label": function() { return /* reexport safe */ _Label__WEBPACK_IMPORTED_MODULE_24__.Label; },
+/* harmony export */   "Margins": function() { return /* reexport safe */ _Margins__WEBPACK_IMPORTED_MODULE_25__["default"]; },
+/* harmony export */   "Menu": function() { return /* reexport safe */ _Menu__WEBPACK_IMPORTED_MODULE_26__.Menu; },
+/* harmony export */   "Message": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__["default"]; },
+/* harmony export */   "MessageBlock": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageBlock; },
+/* harmony export */   "MessageBody": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageBody; },
+/* harmony export */   "MessageContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageContainer; },
+/* harmony export */   "MessageContainerFixed": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageContainerFixed; },
+/* harmony export */   "MessageDivider": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageDivider; },
+/* harmony export */   "MessageGenericPreview": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageGenericPreview; },
+/* harmony export */   "MessageGenericPreviewContent": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageGenericPreviewContent; },
+/* harmony export */   "MessageGenericPreviewDescription": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageGenericPreviewDescription; },
+/* harmony export */   "MessageGenericPreviewFooter": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageGenericPreviewFooter; },
+/* harmony export */   "MessageGenericPreviewImage": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageGenericPreviewImage; },
+/* harmony export */   "MessageGenericPreviewThumb": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageGenericPreviewThumb; },
+/* harmony export */   "MessageGenericPreviewTitle": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageGenericPreviewTitle; },
+/* harmony export */   "MessageHeader": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageHeader; },
+/* harmony export */   "MessageLeftContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageLeftContainer; },
+/* harmony export */   "MessageMetrics": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageMetrics; },
+/* harmony export */   "MessageMetricsFollowing": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageMetricsFollowing; },
+/* harmony export */   "MessageMetricsItem": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageMetricsItem; },
+/* harmony export */   "MessageMetricsReply": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageMetricsReply; },
+/* harmony export */   "MessageName": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageName; },
+/* harmony export */   "MessageReaction": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageReaction; },
+/* harmony export */   "MessageReactionAction": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageReactionAction; },
+/* harmony export */   "MessageReactionCounter": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageReactionCounter; },
+/* harmony export */   "MessageReactionEmoji": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageReactionEmoji; },
+/* harmony export */   "MessageReactions": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageReactions; },
+/* harmony export */   "MessageRole": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageRole; },
+/* harmony export */   "MessageRoles": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageRoles; },
+/* harmony export */   "MessageStatusIndicator": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageStatusIndicator; },
+/* harmony export */   "MessageStatusIndicatorItem": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageStatusIndicatorItem; },
+/* harmony export */   "MessageStatusPrivateIndicator": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageStatusPrivateIndicator; },
+/* harmony export */   "MessageSystem": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageSystem; },
+/* harmony export */   "MessageSystemBlock": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageSystemBlock; },
+/* harmony export */   "MessageSystemBody": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageSystemBody; },
+/* harmony export */   "MessageSystemContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageSystemContainer; },
+/* harmony export */   "MessageSystemLeftContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageSystemLeftContainer; },
+/* harmony export */   "MessageSystemName": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageSystemName; },
+/* harmony export */   "MessageSystemTimestamp": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageSystemTimestamp; },
+/* harmony export */   "MessageTimestamp": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageTimestamp; },
+/* harmony export */   "MessageToolbox": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageToolbox; },
+/* harmony export */   "MessageToolboxItem": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageToolboxItem; },
+/* harmony export */   "MessageToolboxWrapper": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageToolboxWrapper; },
+/* harmony export */   "MessageUsername": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.MessageUsername; },
+/* harmony export */   "ThreadMessage": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessage; },
+/* harmony export */   "ThreadMessageBody": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessageBody; },
+/* harmony export */   "ThreadMessageContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessageContainer; },
+/* harmony export */   "ThreadMessageFollow": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessageFollow; },
+/* harmony export */   "ThreadMessageIconThread": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessageIconThread; },
+/* harmony export */   "ThreadMessageLeftContainer": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessageLeftContainer; },
+/* harmony export */   "ThreadMessageOrigin": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessageOrigin; },
+/* harmony export */   "ThreadMessageRow": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessageRow; },
+/* harmony export */   "ThreadMessageUnfollow": function() { return /* reexport safe */ _Message__WEBPACK_IMPORTED_MODULE_27__.ThreadMessageUnfollow; },
+/* harmony export */   "Modal": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__["default"]; },
+/* harmony export */   "ModalBackdrop": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__.ModalBackdrop; },
+/* harmony export */   "ModalClose": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__.ModalClose; },
+/* harmony export */   "ModalContent": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__.ModalContent; },
+/* harmony export */   "ModalFooter": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__.ModalFooter; },
+/* harmony export */   "ModalHeader": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__.ModalHeader; },
+/* harmony export */   "ModalIcon": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__.ModalIcon; },
+/* harmony export */   "ModalThumb": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__.ModalThumb; },
+/* harmony export */   "ModalTitle": function() { return /* reexport safe */ _Modal__WEBPACK_IMPORTED_MODULE_28__.ModalTitle; },
+/* harmony export */   "MultiSelect": function() { return /* reexport safe */ _MultiSelect__WEBPACK_IMPORTED_MODULE_29__.MultiSelect; },
+/* harmony export */   "MultiSelectFiltered": function() { return /* reexport safe */ _MultiSelect__WEBPACK_IMPORTED_MODULE_29__.MultiSelectFiltered; },
+/* harmony export */   "NumberInput": function() { return /* reexport safe */ _NumberInput__WEBPACK_IMPORTED_MODULE_30__.NumberInput; },
+/* harmony export */   "Options": function() { return /* reexport safe */ _Options__WEBPACK_IMPORTED_MODULE_31__["default"]; },
+/* harmony export */   "CheckOption": function() { return /* reexport safe */ _Options__WEBPACK_IMPORTED_MODULE_31__.CheckOption; },
+/* harmony export */   "Empty": function() { return /* reexport safe */ _Options__WEBPACK_IMPORTED_MODULE_31__.Empty; },
+/* harmony export */   "useCursor": function() { return /* reexport safe */ _Options__WEBPACK_IMPORTED_MODULE_31__.useCursor; },
+/* harmony export */   "Option": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__["default"]; },
+/* harmony export */   "OptionAvatar": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionAvatar; },
+/* harmony export */   "OptionColumn": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionColumn; },
+/* harmony export */   "OptionContent": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionContent; },
+/* harmony export */   "OptionDescription": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionDescription; },
+/* harmony export */   "OptionDivider": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionDivider; },
+/* harmony export */   "OptionIcon": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionIcon; },
+/* harmony export */   "OptionMenu": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionMenu; },
+/* harmony export */   "OptionSkeleton": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionSkeleton; },
+/* harmony export */   "OptionTitle": function() { return /* reexport safe */ _Options_Option__WEBPACK_IMPORTED_MODULE_32__.OptionTitle; },
+/* harmony export */   "Pagination": function() { return /* reexport safe */ _Pagination__WEBPACK_IMPORTED_MODULE_33__.Pagination; },
+/* harmony export */   "PasswordInput": function() { return /* reexport safe */ _PasswordInput__WEBPACK_IMPORTED_MODULE_34__["default"]; },
+/* harmony export */   "StatusBullet": function() { return /* reexport safe */ _StatusBullet__WEBPACK_IMPORTED_MODULE_35__.StatusBullet; },
+/* harmony export */   "Position": function() { return /* reexport safe */ _Position__WEBPACK_IMPORTED_MODULE_36__["default"]; },
+/* harmony export */   "PositionAnimated": function() { return /* reexport safe */ _PositionAnimated__WEBPACK_IMPORTED_MODULE_37__["default"]; },
+/* harmony export */   "ProgressBar": function() { return /* reexport safe */ _ProgressBar__WEBPACK_IMPORTED_MODULE_38__.ProgressBar; },
+/* harmony export */   "RadioButton": function() { return /* reexport safe */ _RadioButton__WEBPACK_IMPORTED_MODULE_39__.RadioButton; },
+/* harmony export */   "Scrollable": function() { return /* reexport safe */ _Scrollable__WEBPACK_IMPORTED_MODULE_40__["default"]; },
+/* harmony export */   "SearchInput": function() { return /* reexport safe */ _SearchInput__WEBPACK_IMPORTED_MODULE_41__.SearchInput; },
+/* harmony export */   "Addon": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_42__.Addon; },
+/* harmony export */   "Focus": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_42__.Focus; },
+/* 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 */   "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"]; },
+/* harmony export */   "SidebarFooter": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarFooter; },
+/* harmony export */   "SidebarFooterHighlight": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarFooterHighlight; },
+/* harmony export */   "SidebarItem": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItem; },
+/* harmony export */   "SidebarItemAction": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemAction; },
+/* harmony export */   "SidebarItemActions": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemActions; },
+/* harmony export */   "SidebarItemAvatar": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemAvatar; },
+/* harmony export */   "SidebarItemBadge": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemBadge; },
+/* harmony export */   "SidebarItemContainer": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemContainer; },
+/* harmony export */   "SidebarItemContent": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemContent; },
+/* harmony export */   "SidebarItemIcon": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemIcon; },
+/* harmony export */   "SidebarItemMenu": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemMenu; },
+/* harmony export */   "SidebarItemSubtitle": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemSubtitle; },
+/* harmony export */   "SidebarItemTime": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemTime; },
+/* harmony export */   "SidebarItemTitle": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemTitle; },
+/* harmony export */   "SidebarItemWrapper": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarItemWrapper; },
+/* harmony export */   "SidebarSection": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarSection; },
+/* harmony export */   "SidebarSectionTitle": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarSectionTitle; },
+/* harmony export */   "SidebarTopBar": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.SidebarTopBar; },
+/* harmony export */   "TopBarAction": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.TopBarAction; },
+/* harmony export */   "TopBarActions": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.TopBarActions; },
+/* harmony export */   "TopBarAvatar": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.TopBarAvatar; },
+/* harmony export */   "TopBarDivider": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.TopBarDivider; },
+/* harmony export */   "TopBarSection": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.TopBarSection; },
+/* harmony export */   "TopBarTitle": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.TopBarTitle; },
+/* harmony export */   "TopBarToolBox": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_45__.TopBarToolBox; },
+/* harmony export */   "Skeleton": function() { return /* reexport safe */ _Skeleton__WEBPACK_IMPORTED_MODULE_46__.Skeleton; },
+/* harmony export */   "States": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.States; },
+/* harmony export */   "StatesAction": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesAction; },
+/* harmony export */   "StatesActions": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesActions; },
+/* harmony export */   "StatesIcon": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesIcon; },
+/* harmony export */   "StatesSubtitle": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesSubtitle; },
+/* harmony export */   "StatesSuggestion": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesSuggestion; },
+/* harmony export */   "StatesSuggestionList": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesSuggestionList; },
+/* harmony export */   "StatesSuggestionListItem": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesSuggestionListItem; },
+/* harmony export */   "StatesSuggestionText": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesSuggestionText; },
+/* harmony export */   "StatesTitle": function() { return /* reexport safe */ _States__WEBPACK_IMPORTED_MODULE_47__.StatesTitle; },
+/* harmony export */   "Table": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_48__["default"]; },
+/* harmony export */   "TableBody": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_48__.TableBody; },
+/* harmony export */   "TableCell": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_48__.TableCell; },
+/* harmony export */   "TableFoot": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_48__.TableFoot; },
+/* harmony export */   "TableHead": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_48__.TableHead; },
+/* harmony export */   "TableRow": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_48__.TableRow; },
+/* harmony export */   "TableSelection": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_48__.TableSelection; },
+/* harmony export */   "TableSelectionButton": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_48__.TableSelectionButton; },
+/* harmony export */   "Tabs": function() { return /* reexport safe */ _Tabs__WEBPACK_IMPORTED_MODULE_49__.Tabs; },
+/* harmony export */   "Tag": function() { return /* reexport safe */ _Tag__WEBPACK_IMPORTED_MODULE_50__.Tag; },
+/* harmony export */   "TelephoneInput": function() { return /* reexport safe */ _TelephoneInput__WEBPACK_IMPORTED_MODULE_51__.TelephoneInput; },
+/* harmony export */   "TextAreaInput": function() { return /* reexport safe */ _TextAreaInput__WEBPACK_IMPORTED_MODULE_52__.TextAreaInput; },
+/* harmony export */   "TextInput": function() { return /* reexport safe */ _TextInput__WEBPACK_IMPORTED_MODULE_53__.TextInput; },
+/* harmony export */   "Throbber": function() { return /* reexport safe */ _Throbber__WEBPACK_IMPORTED_MODULE_54__.Throbber; },
+/* harmony export */   "Tile": function() { return /* reexport safe */ _Tile__WEBPACK_IMPORTED_MODULE_55__["default"]; },
+/* harmony export */   "ToggleSwitch": function() { return /* reexport safe */ _ToggleSwitch__WEBPACK_IMPORTED_MODULE_56__.ToggleSwitch; },
+/* harmony export */   "Tooltip": function() { return /* reexport safe */ _Tooltip__WEBPACK_IMPORTED_MODULE_57__["default"]; },
+/* harmony export */   "UrlInput": function() { return /* reexport safe */ _UrlInput__WEBPACK_IMPORTED_MODULE_58__["default"]; }
 /* harmony export */ });
 /* harmony import */ var _Accordion__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Accordion */ "./src/components/Accordion/index.tsx");
-/* harmony import */ var _AutoComplete__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AutoComplete */ "./src/components/AutoComplete/index.ts");
-/* harmony import */ var _Avatar__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Avatar */ "./src/components/Avatar/index.tsx");
-/* harmony import */ var _Badge__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Badge */ "./src/components/Badge/index.tsx");
-/* harmony import */ var _Banner__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Banner */ "./src/components/Banner/index.ts");
-/* harmony import */ var _Box__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Box */ "./src/components/Box/index.js");
-/* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Button */ "./src/components/Button/index.ts");
-/* harmony import */ var _ButtonGroup__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./ButtonGroup */ "./src/components/ButtonGroup/index.ts");
-/* harmony import */ var _Callout__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Callout */ "./src/components/Callout/index.tsx");
-/* harmony import */ var _CheckBox__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./CheckBox */ "./src/components/CheckBox/index.ts");
-/* harmony import */ var _Chevron__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Chevron */ "./src/components/Chevron/index.tsx");
-/* harmony import */ var _CodeSnippet__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./CodeSnippet */ "./src/components/CodeSnippet/index.tsx");
-/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Chip */ "./src/components/Chip/index.ts");
-/* harmony import */ var _Divider__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Divider */ "./src/components/Divider/index.tsx");
-/* harmony import */ var _Dropdown__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./Dropdown */ "./src/components/Dropdown/index.tsx");
-/* harmony import */ var _EmailInput__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./EmailInput */ "./src/components/EmailInput/index.tsx");
-/* harmony import */ var _Field__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./Field */ "./src/components/Field/index.tsx");
-/* harmony import */ var _FieldGroup__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./FieldGroup */ "./src/components/FieldGroup/index.ts");
-/* harmony import */ var _Grid__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Grid */ "./src/components/Grid/index.ts");
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Icon */ "./src/components/Icon/index.ts");
-/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./InputBox */ "./src/components/InputBox/index.ts");
-/* harmony import */ var _Label__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Label */ "./src/components/Label/index.tsx");
-/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Margins */ "./src/components/Margins/index.ts");
-/* harmony import */ var _Menu__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./Menu */ "./src/components/Menu/index.ts");
-/* harmony import */ var _Message__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./Message */ "./src/components/Message/index.tsx");
-/* harmony import */ var _Modal__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./Modal */ "./src/components/Modal/index.ts");
-/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/index.ts");
-/* harmony import */ var _NumberInput__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./NumberInput */ "./src/components/NumberInput/index.tsx");
-/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./Options */ "./src/components/Options/index.ts");
-/* harmony import */ var _Options_Option__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./Options/Option */ "./src/components/Options/Option/index.tsx");
-/* harmony import */ var _Pagination__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./Pagination */ "./src/components/Pagination/index.ts");
-/* harmony import */ var _PasswordInput__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./PasswordInput */ "./src/components/PasswordInput/index.ts");
-/* harmony import */ var _StatusBullet__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./StatusBullet */ "./src/components/StatusBullet/index.tsx");
-/* harmony import */ var _ProgressBar__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./ProgressBar */ "./src/components/ProgressBar/index.tsx");
-/* harmony import */ var _RadioButton__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./RadioButton */ "./src/components/RadioButton/index.ts");
-/* harmony import */ var _SearchInput__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./SearchInput */ "./src/components/SearchInput/index.tsx");
-/* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./Select */ "./src/components/Select/index.ts");
-/* harmony import */ var _SelectPaginated__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./SelectPaginated */ "./src/components/SelectPaginated/index.ts");
-/* harmony import */ var _SelectInput__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./SelectInput */ "./src/components/SelectInput/index.ts");
-/* harmony import */ var _Sidebar__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./Sidebar */ "./src/components/Sidebar/index.tsx");
-/* harmony import */ var _Skeleton__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./Skeleton */ "./src/components/Skeleton/index.tsx");
-/* harmony import */ var _States__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./States */ "./src/components/States/index.tsx");
-/* harmony import */ var _Table__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./Table */ "./src/components/Table/index.ts");
-/* harmony import */ var _Tabs__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ./Tabs */ "./src/components/Tabs/index.tsx");
-/* harmony import */ var _Tag__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ./Tag */ "./src/components/Tag/index.tsx");
-/* harmony import */ var _TelephoneInput__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ./TelephoneInput */ "./src/components/TelephoneInput/index.tsx");
-/* harmony import */ var _TextAreaInput__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ./TextAreaInput */ "./src/components/TextAreaInput/index.tsx");
-/* harmony import */ var _TextInput__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ./TextInput */ "./src/components/TextInput/index.tsx");
-/* harmony import */ var _Throbber__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ./Throbber */ "./src/components/Throbber/index.tsx");
-/* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ./Tile */ "./src/components/Tile/index.ts");
-/* harmony import */ var _ToggleSwitch__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ./ToggleSwitch */ "./src/components/ToggleSwitch/index.tsx");
-/* harmony import */ var _Tooltip__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ./Tooltip */ "./src/components/Tooltip/index.ts");
-/* harmony import */ var _UrlInput__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ./UrlInput */ "./src/components/UrlInput/index.ts");
+/* harmony import */ var _AnimatedVisibility__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
+/* harmony import */ var _AutoComplete__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AutoComplete */ "./src/components/AutoComplete/index.ts");
+/* 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 _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");
+/* harmony import */ var _Callout__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Callout */ "./src/components/Callout/index.tsx");
+/* harmony import */ var _CheckBox__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./CheckBox */ "./src/components/CheckBox/index.ts");
+/* harmony import */ var _Chevron__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Chevron */ "./src/components/Chevron/index.tsx");
+/* harmony import */ var _CodeSnippet__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./CodeSnippet */ "./src/components/CodeSnippet/index.tsx");
+/* harmony import */ var _Chip__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./Chip */ "./src/components/Chip/index.ts");
+/* harmony import */ var _Divider__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./Divider */ "./src/components/Divider/index.tsx");
+/* harmony import */ var _Dropdown__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./Dropdown */ "./src/components/Dropdown/index.tsx");
+/* harmony import */ var _EmailInput__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./EmailInput */ "./src/components/EmailInput/index.tsx");
+/* harmony import */ var _Field__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Field */ "./src/components/Field/index.tsx");
+/* harmony import */ var _FieldGroup__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./FieldGroup */ "./src/components/FieldGroup/index.ts");
+/* harmony import */ var _Flex__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Flex */ "./src/components/Flex/index.ts");
+/* harmony import */ var _Grid__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Grid */ "./src/components/Grid/index.ts");
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Icon */ "./src/components/Icon/index.ts");
+/* harmony import */ var _InputBox__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./InputBox */ "./src/components/InputBox/index.ts");
+/* harmony import */ var _Label__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./Label */ "./src/components/Label/index.tsx");
+/* harmony import */ var _Margins__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./Margins */ "./src/components/Margins/index.ts");
+/* harmony import */ var _Menu__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./Menu */ "./src/components/Menu/index.ts");
+/* harmony import */ var _Message__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./Message */ "./src/components/Message/index.tsx");
+/* harmony import */ var _Modal__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./Modal */ "./src/components/Modal/index.ts");
+/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/index.ts");
+/* harmony import */ var _NumberInput__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./NumberInput */ "./src/components/NumberInput/index.tsx");
+/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./Options */ "./src/components/Options/index.ts");
+/* harmony import */ var _Options_Option__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./Options/Option */ "./src/components/Options/Option/index.tsx");
+/* harmony import */ var _Pagination__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./Pagination */ "./src/components/Pagination/index.ts");
+/* harmony import */ var _PasswordInput__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./PasswordInput */ "./src/components/PasswordInput/index.ts");
+/* harmony import */ var _StatusBullet__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./StatusBullet */ "./src/components/StatusBullet/index.tsx");
+/* harmony import */ var _Position__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./Position */ "./src/components/Position/index.ts");
+/* harmony import */ var _PositionAnimated__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./PositionAnimated */ "./src/components/PositionAnimated/index.ts");
+/* harmony import */ var _ProgressBar__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./ProgressBar */ "./src/components/ProgressBar/index.tsx");
+/* harmony import */ var _RadioButton__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./RadioButton */ "./src/components/RadioButton/index.ts");
+/* 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 _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");
+/* harmony import */ var _States__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ./States */ "./src/components/States/index.tsx");
+/* harmony import */ var _Table__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ./Table */ "./src/components/Table/index.ts");
+/* harmony import */ var _Tabs__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ./Tabs */ "./src/components/Tabs/index.tsx");
+/* harmony import */ var _Tag__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ./Tag */ "./src/components/Tag/index.tsx");
+/* harmony import */ var _TelephoneInput__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ./TelephoneInput */ "./src/components/TelephoneInput/index.tsx");
+/* harmony import */ var _TextAreaInput__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ./TextAreaInput */ "./src/components/TextAreaInput/index.tsx");
+/* harmony import */ var _TextInput__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ./TextInput */ "./src/components/TextInput/index.tsx");
+/* harmony import */ var _Throbber__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ./Throbber */ "./src/components/Throbber/index.tsx");
+/* harmony import */ var _Tile__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ./Tile */ "./src/components/Tile/index.ts");
+/* harmony import */ var _ToggleSwitch__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ./ToggleSwitch */ "./src/components/ToggleSwitch/index.tsx");
+/* harmony import */ var _Tooltip__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ./Tooltip */ "./src/components/Tooltip/index.ts");
+/* harmony import */ var _UrlInput__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ./UrlInput */ "./src/components/UrlInput/index.ts");
@@ -15838,6 +15801,108 @@ var shallowEqual = function (a, b) {
 };
+/***/ }),
+/***/ "./src/hooks/useArrayLikeClassNameProp.ts":
+/*!************************************************!*\
+  !*** ./src/hooks/useArrayLikeClassNameProp.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 */   "useArrayLikeClassNameProp": function() { return /* binding */ useArrayLikeClassNameProp; }
+/* 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_appendClassName__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
+/* harmony import */ var _useStyle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useStyle */ "./src/hooks/useStyle.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 useArrayLikeClassNameProp = function (props) {
+    var classNames = props.className
+        ? [].concat(props.className)
+        : [];
+    var cssFns = classNames.filter(function (value) { return typeof value === 'function'; });
+    var stylesClassName = (0,_useStyle__WEBPACK_IMPORTED_MODULE_2__.useStyle)((0,_rocket_chat_css_in_js__WEBPACK_IMPORTED_MODULE_0__.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cssFns), props);
+    var strings = classNames.filter(function (value) { return typeof value === 'string'; });
+    var className = strings.reduce(function (className, string) { return (0,_helpers_appendClassName__WEBPACK_IMPORTED_MODULE_1__.appendClassName)(className, string); }, stylesClassName || '');
+    return Object.assign(props, { className: className });
+};
+var templateObject_1;
+/***/ }),
+/***/ "./src/hooks/useBoxOnlyProps.ts":
+/*!**************************************!*\
+  !*** ./src/hooks/useBoxOnlyProps.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 */   "useBoxOnlyProps": function() { return /* binding */ useBoxOnlyProps; }
+/* harmony export */ });
+/* harmony import */ var _helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../helpers/prependClassName */ "./src/helpers/prependClassName.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 useBoxOnlyProps = function (props) {
+    Object.entries(props).forEach(function (_a) {
+        var _b = __read(_a, 2), key = _b[0], value = _b[1];
+        if (key.slice(0, 4) === 'rcx-') {
+            try {
+                if (!value) {
+                    return;
+                }
+                var newClassName = value === true ? key : key + "-" + value;
+                props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__.prependClassName)(props.className, newClassName);
+            }
+            finally {
+                delete props[key];
+            }
+        }
+    });
+    if (props.animated) {
+        props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__.prependClassName)(props.className, 'rcx-box--animated');
+        delete props.animated;
+    }
+    if (props.withRichContent) {
+        if (props.withRichContent === 'inlineWithoutBreaks') {
+            props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__.prependClassName)(props.className, 'rcx-box--with-inline-elements');
+        }
+        else {
+            props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__.prependClassName)(props.className, 'rcx-box--with-inline-elements');
+            props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__.prependClassName)(props.className, 'rcx-box--with-block-elements');
+        }
+    }
+    delete props.withRichContent;
+    props.className = (0,_helpers_prependClassName__WEBPACK_IMPORTED_MODULE_0__.prependClassName)(props.className, 'rcx-box rcx-box--full');
+    return props;
+};
 /***/ }),
 /***/ "./src/hooks/useStyle.ts":