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

package/dist/fuselage.development.js

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