@rocket.chat/fuselage 0.59.3 → 0.60.0

package/dist/fuselage.development.js

@@ -1956,24 +1956,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __rest = (this && this.__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;
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Accordion = Accordion;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
-var AccordionItem_1 = __webpack_require__(/*! ./AccordionItem */ "./src/components/Accordion/AccordionItem.tsx");
+var composeClassNames_1 = __webpack_require__(/*! ../../helpers/composeClassNames */ "./src/helpers/composeClassNames.ts");
+var Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 /**
  * An `Accordion` allows users to toggle the display of sections of content.
  */
-function Accordion(props) {
-    return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ animated: true, "rcx-accordion": true }, props));
-}
-/**
- * @deprecated use named import instead
- */
-Accordion.Item = AccordionItem_1.AccordionItem;
+var Accordion = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(Box_1.StylingBox, __assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, composeClassNames_1.cx)((0, composeClassNames_1.cxx)('rcx-box')('full', 'animated'), 'rcx-accordion'), children: children }) })));
+};
+exports["default"] = Accordion;
 
 
 /***/ }),
@@ -2023,27 +2028,16 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.AccordionItem = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var composeClassNames_1 = __webpack_require__(/*! ../../helpers/composeClassNames */ "./src/helpers/composeClassNames.ts");
+var Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 var Chevron_1 = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.tsx");
-var ToggleSwitch_1 = __webpack_require__(/*! ../ToggleSwitch */ "./src/components/ToggleSwitch/index.tsx");
-var AccordionItem = function Item(_a) {
-    var children = _a.children, className = _a.className, defaultExpanded = _a.defaultExpanded, disabled = _a.disabled, propExpanded = _a.expanded, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, title = _a.title, _c = _a.noncollapsible, noncollapsible = _c === void 0 ? !title : _c, onToggle = _a.onToggle, onToggleEnabled = _a.onToggleEnabled, props = __rest(_a, ["children", "className", "defaultExpanded", "disabled", "expanded", "tabIndex", "title", "noncollapsible", "onToggle", "onToggleEnabled"]);
-    var _d = __read((0, fuselage_hooks_1.useToggle)(defaultExpanded), 2), stateExpanded = _d[0], toggleStateExpanded = _d[1];
+var AccordionItem = function (_a) {
+    var children = _a.children, defaultExpanded = _a.defaultExpanded, _b = _a.disabled, disabled = _b === void 0 ? false : _b, propExpanded = _a.expanded, _c = _a.tabIndex, tabIndex = _c === void 0 ? 0 : _c, title = _a.title, _d = _a.noncollapsible, noncollapsible = _d === void 0 ? !title : _d, props = __rest(_a, ["children", "defaultExpanded", "disabled", "expanded", "tabIndex", "title", "noncollapsible"]);
+    var _e = __read((0, fuselage_hooks_1.useToggle)(defaultExpanded), 2), stateExpanded = _e[0], toggleStateExpanded = _e[1];
     var expanded = propExpanded || stateExpanded;
-    var toggleExpanded = function (event) {
-        if (onToggle) {
-            onToggle.call(event.currentTarget, event);
-            return;
-        }
-        toggleStateExpanded();
-    };
     var panelExpanded = noncollapsible || expanded;
     var titleId = (0, fuselage_hooks_1.useUniqueId)();
     var panelId = (0, fuselage_hooks_1.useUniqueId)();
@@ -2053,22 +2047,20 @@ var AccordionItem = function Item(_a) {
             return;
         }
         (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur();
-        toggleExpanded(e);
+        toggleStateExpanded();
     };
     var handleKeyDown = function (event) {
         if (disabled || event.currentTarget !== event.target) {
             return;
         }
-        if ([13, 32].includes(event.keyCode)) {
-            event.preventDefault();
-            if (event.repeat) {
-                return;
-            }
-            toggleExpanded(event);
+        if (![' ', 'Enter'].includes(event.key)) {
+            return;
         }
-    };
-    var handleToggleClick = function (event) {
-        event.stopPropagation();
+        event.preventDefault();
+        if (event.repeat) {
+            return;
+        }
+        toggleStateExpanded();
     };
     var collapsibleProps = {
         'aria-controls': panelId,
@@ -2083,9 +2075,9 @@ var AccordionItem = function Item(_a) {
         'aria-labelledby': titleId,
     };
     var barProps = noncollapsible ? nonCollapsibleProps : collapsibleProps;
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, __assign({ is: 'section', "rcx-accordion-item": true, className: className }, props, { children: [title && ((0, jsx_runtime_1.jsxs)(Box_1.default, __assign({ role: 'button', animated: true, "rcx-accordion-item__bar": true, "rcx-accordion-item__bar--disabled": disabled }, barProps, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { is: 'h2', "rcx-accordion-item__title": true, id: titleId, children: title }), !noncollapsible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(disabled || onToggleEnabled) && ((0, jsx_runtime_1.jsx)(Box_1.default, { "rcx-accordion-item__toggle-switch": true, children: (0, jsx_runtime_1.jsx)(ToggleSwitch_1.ToggleSwitch, { checked: !disabled, onClick: handleToggleClick, onChange: onToggleEnabled }) })), (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { size: 'x24', up: expanded })] }))] }))), (0, jsx_runtime_1.jsx)(Box_1.default, { animated: true, "rcx-accordion-item__panel": true, "rcx-accordion-item__panel--expanded": panelExpanded, id: panelId, children: children })] })));
+    return ((0, jsx_runtime_1.jsx)(Box_1.StylingBox, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("section", { className: (0, composeClassNames_1.cx)((0, composeClassNames_1.cxx)('rcx-box')('full'), 'rcx-accordion-item'), children: [title && ((0, jsx_runtime_1.jsxs)("div", __assign({ role: 'button', className: (0, composeClassNames_1.cx)((0, composeClassNames_1.cxx)('rcx-box')('full', 'animated'), (0, composeClassNames_1.cxx)('rcx-accordion-item__bar')({ disabled: disabled })) }, barProps, { children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, composeClassNames_1.cx)((0, composeClassNames_1.cxx)('rcx-box')('full'), 'rcx-accordion-item__title'), id: titleId, children: title }), !noncollapsible && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { size: 'x24', up: expanded })] }))), (0, jsx_runtime_1.jsx)("div", { className: (0, composeClassNames_1.cx)((0, composeClassNames_1.cxx)('rcx-box')('full', 'animated'), (0, composeClassNames_1.cxx)('rcx-accordion-item__panel')({ expanded: panelExpanded })), id: panelId, children: children })] }) })));
 };
-exports.AccordionItem = AccordionItem;
+exports["default"] = AccordionItem;
 
 
 /***/ }),
@@ -2097,23 +2089,15 @@ exports.AccordionItem = AccordionItem;
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-__exportStar(__webpack_require__(/*! ./Accordion */ "./src/components/Accordion/Accordion.tsx"), exports);
-__exportStar(__webpack_require__(/*! ./AccordionItem */ "./src/components/Accordion/AccordionItem.tsx"), exports);
+exports.AccordionItem = exports.Accordion = void 0;
+var Accordion_1 = __webpack_require__(/*! ./Accordion */ "./src/components/Accordion/Accordion.tsx");
+Object.defineProperty(exports, "Accordion", ({ enumerable: true, get: function () { return __importDefault(Accordion_1).default; } }));
+var AccordionItem_1 = __webpack_require__(/*! ./AccordionItem */ "./src/components/Accordion/AccordionItem.tsx");
+Object.defineProperty(exports, "AccordionItem", ({ enumerable: true, get: function () { return __importDefault(AccordionItem_1).default; } }));
 
 
 /***/ }),
@@ -2460,7 +2444,7 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 var react_1 = __webpack_require__(/*! react */ "react");
 var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Chip_1 = __importDefault(__webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
@@ -2980,10 +2964,57 @@ exports.useComposedBoxTransform = useComposedBoxTransform;
 
 /***/ }),
 
-/***/ "./src/components/Box/index.tsx":
-/*!**************************************!*\
-  !*** ./src/components/Box/index.tsx ***!
-  \**************************************/
+/***/ "./src/components/Box/StylingBox.tsx":
+/*!*******************************************!*\
+  !*** ./src/components/Box/StylingBox.tsx ***!
+  \*******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __rest = (this && this.__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;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.StylingBox = void 0;
+var react_1 = __webpack_require__(/*! react */ "react");
+var useArrayLikeClassNameProp_1 = __webpack_require__(/*! ../../hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
+var useStylingProps_1 = __webpack_require__(/*! ./useStylingProps */ "./src/components/Box/useStylingProps.ts");
+/**
+ * Merges its `StylingProps` props into a `className` prop passed to a child element.
+ *
+ * This is intended to be used as a wrapper for components that accept styling props but don't need the weight of the
+ * `Box` component prop handling internally.
+ */
+var StylingBox = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var propsWithStringClassName = (0, useArrayLikeClassNameProp_1.useArrayLikeClassNameProp)(props);
+    propsWithStringClassName.className = [
+        children.props.className,
+        propsWithStringClassName.className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var propsWithoutStylingProps = (0, useStylingProps_1.useStylingProps)(propsWithStringClassName);
+    return (0, react_1.cloneElement)(children, propsWithoutStylingProps);
+};
+exports.StylingBox = StylingBox;
+exports["default"] = exports.StylingBox;
+
+
+/***/ }),
+
+/***/ "./src/components/Box/index.ts":
+/*!*************************************!*\
+  !*** ./src/components/Box/index.ts ***!
+  \*************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -2991,9 +3022,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports["default"] = void 0;
+exports.StylingBox = exports["default"] = void 0;
 var Box_1 = __webpack_require__(/*! ./Box */ "./src/components/Box/Box.tsx");
 Object.defineProperty(exports, "default", ({ enumerable: true, get: function () { return __importDefault(Box_1).default; } }));
+var StylingBox_1 = __webpack_require__(/*! ./StylingBox */ "./src/components/Box/StylingBox.tsx");
+Object.defineProperty(exports, "StylingBox", ({ enumerable: true, get: function () { return __importDefault(StylingBox_1).default; } }));
 
 
 /***/ }),
@@ -3220,10 +3253,10 @@ exports.propDefs = {
                 return (0, css_in_js_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          box-shadow: 0px 0px 12px 0px ", ";\n        "], ["\n          box-shadow: 0px 0px 12px 0px ", ";\n        "])), Theme_1.Palette.shadow['shadow-elevation-1']);
             }
             if (value === '2') {
-                return (0, css_in_js_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          box-shadow: 0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n          border: 1px solid ", ";\n        "], ["\n          box-shadow: 0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n          border: 1px solid ", ";\n        "])), Theme_1.Palette.shadow['shadow-elevation-2x'], Theme_1.Palette.shadow['shadow-elevation-2y'], Theme_1.Palette.shadow['shadow-elevation-border']);
+                return (0, css_in_js_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          box-shadow:\n            0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n          border: 1px solid ", ";\n        "], ["\n          box-shadow:\n            0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n          border: 1px solid ", ";\n        "])), Theme_1.Palette.shadow['shadow-elevation-2x'], Theme_1.Palette.shadow['shadow-elevation-2y'], Theme_1.Palette.shadow['shadow-elevation-border']);
             }
             if (value === '2nb') {
-                return (0, css_in_js_1.css)(templateObject_5 || (templateObject_5 = __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        "])), Theme_1.Palette.shadow['shadow-elevation-2x'], Theme_1.Palette.shadow['shadow-elevation-2y']);
+                return (0, css_in_js_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          box-shadow:\n            0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n        "], ["\n          box-shadow:\n            0px 0px 2px 0px ", ",\n            0px 0px 12px 0px ", ";\n        "])), Theme_1.Palette.shadow['shadow-elevation-2x'], Theme_1.Palette.shadow['shadow-elevation-2y']);
             }
             return undefined;
         },
@@ -3614,8 +3647,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ActionButton = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var _1 = __webpack_require__(/*! . */ "./src/components/Button/index.ts");
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+var _1 = __webpack_require__(/*! . */ "./src/components/Button/index.ts");
 var getSize = function (_a) {
     var tiny = _a.tiny, mini = _a.mini, small = _a.small;
     if (mini) {
@@ -3670,7 +3703,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Button = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 /**
  * Indicates an actionable user action.
@@ -3745,7 +3778,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.IconButton = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var getVariantClass = function (variant) {
     if (variant) {
@@ -3958,7 +3991,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Callout = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var WRAPPER_LIMIT_SIZE = 420;
 /**
@@ -4467,7 +4500,7 @@ exports.CardGroup = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
 var patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var CardGroup = function (_a) {
     var _b = _a.align, align = _b === void 0 ? 'start' : _b, children = _a.children, stretch = _a.stretch, vertical = _a.vertical, wrap = _a.wrap, props = __rest(_a, ["align", "children", "stretch", "vertical", "wrap"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ "rcx-card-group": true, "rcx-card-group--align": align, "rcx-card-group--stretch": stretch, "rcx-card-group--vertical": vertical, "rcx-card-group--wrap": wrap, role: 'group' }, props, { children: (0, patchChildren_1.patchChildren)(children, function (childProps) { return ({
@@ -4543,7 +4576,7 @@ exports.CheckBox = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.CheckBox = (0, react_1.forwardRef)(function CheckBox(_a, ref) {
     var indeterminate = _a.indeterminate, onChange = _a.onChange, className = _a.className, props = __rest(_a, ["indeterminate", "onChange", "className"]);
     var innerRef = (0, react_1.useRef)(null);
@@ -4628,7 +4661,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Chevron = Chevron;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 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"]);
@@ -4770,7 +4803,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 var Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.tsx");
 /**
@@ -4785,7 +4818,7 @@ var CodeSnippet = function (_a) {
     if (!children) {
         return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'pre', "rcx-code-snippet": true }, props, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { w: '100%', "aria-hidden": true, "aria-busy": true }) })));
     }
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, __assign({ is: 'pre', "rcx-code-snippet": true }, props, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { "rcx-code-snippet__codebox": true, children: (0, jsx_runtime_1.jsx)("code", { children: children }) }), onClick && children && ((0, jsx_runtime_1.jsx)(Box_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { small: true, primary: true, onClick: onClick, disabled: buttonDisabled, children: buttonText }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, __assign({ is: 'pre', "rcx-code-snippet": true }, props, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { role: 'code', "rcx-code-snippet__codebox": true, children: children }), onClick && children && ((0, jsx_runtime_1.jsx)(Box_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { small: true, primary: true, onClick: onClick, disabled: buttonDisabled, children: buttonText }) }))] })));
 };
 exports["default"] = CodeSnippet;
 
@@ -4848,7 +4881,7 @@ var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
  */
 var Contextualbar = (0, react_1.forwardRef)(function Contextualbar(_a, ref) {
     var children = _a.children, width = _a.width, position = _a.position, _b = _a.bg, bg = _b === void 0 ? 'room' : _b, props = __rest(_a, ["children", "width", "position", "bg"]);
-    return ((0, jsx_runtime_1.jsx)(__1.Box, __assign({ ref: ref, "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 5 }, props, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(__1.Box, __assign({ ref: ref, "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10 }, props, { children: children })));
 });
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
@@ -5106,7 +5139,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
 var ContextualbarHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -5199,7 +5232,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.tsx");
 var Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/Contextualbar/Contextualbar.tsx"));
 var ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./ContextualbarHeader */ "./src/components/Contextualbar/ContextualbarHeader.tsx"));
@@ -5580,7 +5613,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ContextualbarHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ display: 'flex', alignItems: 'center', height: 'x44', pi: 16, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0 }, props, { children: (0, jsx_runtime_1.jsx)(Box_1.default, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', className: (0, css_in_js_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        gap: 8px;\n      "], ["\n        gap: 8px;\n      "]))), children: children }) })));
@@ -5670,8 +5703,8 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var _1 = __webpack_require__(/*! . */ "./src/components/ContextualbarV2/index.ts");
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
+var _1 = __webpack_require__(/*! . */ "./src/components/ContextualbarV2/index.ts");
 var ContextualbarSkeleton = function (props) { return ((0, jsx_runtime_1.jsxs)(_1.ContextualbarV2, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(_1.ContextualbarV2Header, { children: (0, jsx_runtime_1.jsx)(__1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(__1.Box, { p: 24, children: [(0, jsx_runtime_1.jsx)(__1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
                     .fill(5)
                     .map(function (_, index) { return ((0, jsx_runtime_1.jsx)(__1.Skeleton, {}, index)); })] })] }))); };
@@ -5783,7 +5816,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Divider = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Divider = function (_a) {
     var variation = _a.variation, children = _a.children, vertical = _a.vertical, props = __rest(_a, ["variation", "children", "vertical"]);
     if (!children) {
@@ -6090,7 +6123,7 @@ exports.FieldContext = void 0;
 exports.Field = Field;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.FieldContext = (0, react_1.createContext)(false);
 /**
  * A `Field` is a wrapper representing an entry in a form.
@@ -6127,7 +6160,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FieldDescription = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
 var FieldDescription = function (props) {
     var component = (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span', "rcx-field__description": true }, props));
@@ -6166,7 +6199,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FieldError = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
 var FieldError = function (props) {
     var component = (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span', "rcx-field__error": true }, props));
@@ -6205,7 +6238,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FieldHint = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
 var FieldHint = function (props) {
     var component = (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span', "rcx-field__hint": true }, props));
@@ -6244,7 +6277,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FieldLabel = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Label_1 = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
 var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
 var FieldLabel = function (props) {
@@ -6323,7 +6356,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FieldLink = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
 var FieldLink = function (props) {
     var component = (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'a', target: '_blank', "rcx-field__link": true }, props));
@@ -6362,7 +6395,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FieldRow = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
 var FieldRow = function (props) {
     var component = (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span', "rcx-field__row": true }, props));
@@ -6473,7 +6506,7 @@ exports.FieldGroup = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
 var patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 /**
  * A container for grouping fields that semantically share a common data context.
  */
@@ -6731,7 +6764,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Grid = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var GridItem_1 = __webpack_require__(/*! ./GridItem */ "./src/components/Grid/GridItem.tsx");
 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"]);
@@ -6778,7 +6811,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.GridItem = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 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 ((0, jsx_runtime_1.jsx)(Box_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)));
@@ -6855,7 +6888,7 @@ exports.Icon = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var icons_1 = __importDefault(__webpack_require__(/*! @rocket.chat/icons */ "@rocket.chat/icons"));
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     var name = _a.name, size = _a.size, props = __rest(_a, ["name", "size"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'i', "rcx-icon": true, "rcx-icon--name": name, children: icons_1.default[name], "aria-hidden": 'true', fontSize: size, ref: ref }, props)));
@@ -6916,7 +6949,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Addon = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.Addon = (0, react_1.forwardRef)(function Addon(props, ref) {
     return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span', "rcx-input-box__addon": true, ref: ref }, props));
 });
@@ -6949,7 +6982,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Input = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.Input = (0, react_1.forwardRef)(function Input(props, ref) {
     return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', animated: true, "rcx-input-box": true, ref: ref }, props));
 });
@@ -7095,7 +7128,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.InputBoxSkeleton = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.tsx");
 var InputBoxSkeleton = function (props) { return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ "rcx-skeleton__input": true }, props, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }))); };
 exports.InputBoxSkeleton = InputBoxSkeleton;
@@ -7128,7 +7161,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Option = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.Option = (0, react_1.forwardRef)(function Option(props, ref) {
     return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'option', "rcx-input-box__option": true, ref: ref }, props));
 });
@@ -7161,7 +7194,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Placeholder = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.Placeholder = (0, react_1.forwardRef)(function Placeholder(props, ref) {
     return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'option', "rcx-input-box__placeholder": true, ref: ref }, props));
 });
@@ -7193,7 +7226,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Wrapper = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Label_1 = __webpack_require__(/*! ../Label */ "./src/components/Label/index.tsx");
 var Wrapper = function (props) { return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ animated: true, is: Label_1.Label, "rcx-input-box__wrapper": true }, props))); };
 exports.Wrapper = Wrapper;
@@ -7282,7 +7315,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Label = Label;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var LabelContext = (0, react_1.createContext)(false);
 /**
  * A caption for an input component.
@@ -8417,7 +8450,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.MessageBlock = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.MessageBlock = (0, react_1.forwardRef)(function (_a, ref) {
     var _className = _a.className, fixedWidth = _a.fixedWidth, props = __rest(_a, ["className", "fixedWidth"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ "rcx-message-block": true, "rcx-message-block--width-fixed": fixedWidth, ref: ref }, props)));
@@ -10874,7 +10907,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Modal = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, _b = _a.wrapper, wrapper = _b === void 0 ? Box_1.default : _b, wrapperFunction = _a.wrapperFunction, props = __rest(_a, ["children", "wrapper", "wrapperFunction"]);
     var wrapperProps = {
@@ -10914,7 +10947,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalBackdrop = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ModalBackdrop = function (props) { return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ "rcx-modal__backdrop": true }, props))); };
 exports.ModalBackdrop = ModalBackdrop;
 
@@ -10984,7 +11017,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalContent = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Scrollable_1 = __importDefault(__webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts"));
 var ModalContent = function (_a) {
     var children = _a.children, onScrollContent = _a.onScrollContent, props = __rest(_a, ["children", "onScrollContent"]);
@@ -11008,7 +11041,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalFooter = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ModalFooter = function (_a) {
     var children = _a.children, _b = _a.justifyContent, justifyContent = _b === void 0 ? 'end' : _b;
     return ((0, jsx_runtime_1.jsx)(Box_1.default, { justifyContent: justifyContent, "rcx-modal__footer": true, children: children }));
@@ -11031,7 +11064,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalFooterAnnotation = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ModalFooterAnnotation = function (_a) {
     var children = _a.children;
     return ((0, jsx_runtime_1.jsx)(Box_1.default, { "rcx-modal__footer-annotation": true, children: children }));
@@ -11096,7 +11129,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalHeader = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
 var ModalHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -11142,7 +11175,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalHeaderText = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ModalHeaderText = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ "rcx-modal__header-text": true }, props, { children: children })));
@@ -11187,7 +11220,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalHeroImage = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ModalHeroImage = function (_a) {
     var props = __rest(_a, []);
     return ((0, jsx_runtime_1.jsx)("figure", { className: 'rcx-modal__hero-image-wrapper', children: (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ "rcx-modal__hero-image": true, is: 'img' }, props)) }));
@@ -11232,7 +11265,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalIcon = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var ModalIcon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'x20' : _b, name = _a.name, _c = _a.alignItems, alignItems = _c === void 0 ? 'center' : _c, props = __rest(_a, ["size", "name", "alignItems"]);
@@ -11278,7 +11311,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalTagline = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ModalTagline = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ "rcx-modal__tagline": true }, props, { children: children })));
@@ -11313,7 +11346,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalThumb = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var Avatar_1 = __webpack_require__(/*! ../Avatar */ "./src/components/Avatar/index.ts");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ModalThumb = function (props) { return ((0, jsx_runtime_1.jsx)(Box_1.default, { children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, __assign({ size: 'x28' }, props)) })); };
 exports.ModalThumb = ModalThumb;
 
@@ -11355,7 +11388,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalTitle = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var ModalTitle = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'h2', "rcx-modal__title": true }, props, { children: children })));
@@ -11486,7 +11519,7 @@ var react_1 = __webpack_require__(/*! react */ "react");
 var isForwardRefType_1 = __webpack_require__(/*! ../../helpers/isForwardRefType */ "./src/helpers/isForwardRefType.ts");
 var prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
 var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Flex_1 = __importDefault(__webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
@@ -12599,7 +12632,7 @@ exports.OptionContainer = exports.Options = exports.Empty = exports.useCursor =
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Option_1 = __importStar(__webpack_require__(/*! ../Option */ "./src/components/Option/index.tsx"));
 var Scrollable_1 = __importDefault(__webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts"));
 var Tile_1 = __importDefault(__webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts"));
@@ -12948,7 +12981,7 @@ var react_2 = __webpack_require__(/*! react */ "react");
 var react_virtuoso_1 = __webpack_require__(/*! react-virtuoso */ "react-virtuoso");
 var prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
 var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var CheckBox_1 = __webpack_require__(/*! ../CheckBox */ "./src/components/CheckBox/index.ts");
 var Option_1 = __importDefault(__webpack_require__(/*! ../Option */ "./src/components/Option/index.tsx"));
 var Tile_1 = __importDefault(__webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts"));
@@ -13078,7 +13111,7 @@ var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@
 var react_1 = __webpack_require__(/*! react */ "react");
 var prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
 var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Chip_1 = __importDefault(__webpack_require__(/*! ../Chip */ "./src/components/Chip/index.ts"));
 var Flex_1 = __importDefault(__webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
@@ -13257,7 +13290,7 @@ var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@
 var react_1 = __webpack_require__(/*! react */ "react");
 var prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
 var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
 var Option_1 = __importDefault(__webpack_require__(/*! ../Option */ "./src/components/Option/index.tsx"));
@@ -13379,7 +13412,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var PaginatedSelectWrapper = (0, react_1.forwardRef)(function PaginatedSelectWrapper(props, ref) {
     return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'div', "rcx-select__wrapper": true, ref: ref }, props));
 });
@@ -13441,7 +13474,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Pagination = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Chevron_1 = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.tsx");
 var defaultItemsPerPageLabel = function () { return 'Items per page:'; };
 var defaultShowingResultsLabel = function (_a) {
@@ -14374,7 +14407,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ProgressBar = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var getWidth = function (percentage) {
     return "".concat(Math.min(Math.max(0, percentage), 100).toFixed(1), "%");
 };
@@ -14470,7 +14503,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.RadioButton = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.RadioButton = (0, react_1.forwardRef)(function RadioButton(_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return ((0, jsx_runtime_1.jsxs)(Box_1.default, { is: 'label', className: className, "rcx-radio-button": true, children: [(0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', "rcx-radio-button__input": true, type: 'radio', ref: ref }, props)), (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'i', "rcx-radio-button__fake": true, "aria-hidden": 'true' })] }));
@@ -14809,7 +14842,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var SelectAddon = (0, react_1.forwardRef)(function SelectAddon(props, ref) {
     return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'div', "rcx-select__addon": true, ref: ref }, props));
 });
@@ -14865,20 +14898,21 @@ var Listbox_1 = __webpack_require__(/*! ./Listbox */ "./src/components/Select/Li
 var react_stately_2 = __webpack_require__(/*! react-stately */ "react-stately");
 Object.defineProperty(exports, "Item", ({ enumerable: true, get: function () { return react_stately_2.Item; } }));
 exports.SelectAria = (0, react_1.forwardRef)(function SelectAria(_a, outerRef) {
-    var disabled = _a.disabled, error = _a.error, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, small = _a.small, props = __rest(_a, ["disabled", "error", "placeholder", "value", "onChange", "small"]);
-    var state = (0, react_stately_1.useSelectState)(__assign({ isDisabled: disabled, selectedKey: value, onSelectionChange: onChange }, props));
+    var error = _a.error, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, small = _a.small, isDisabledProps = _a.isDisabled, disabled = _a.disabled, props = __rest(_a, ["error", "placeholder", "value", "onChange", "small", "isDisabled", "disabled"]);
+    var isDisabled = isDisabledProps || disabled;
+    var state = (0, react_stately_1.useSelectState)(__assign({ isDisabled: isDisabled, selectedKey: value, onSelectionChange: onChange }, props));
     var _b = (0, fuselage_hooks_1.useResizeObserver)(), ref = _b.ref, borderBoxSize = _b.borderBoxSize;
-    var _c = (0, react_aria_1.useSelect)(props, state, ref), triggerProps = _c.triggerProps, valueProps = _c.valueProps, menuProps = _c.menuProps;
+    var _c = (0, react_aria_1.useSelect)(__assign({ isDisabled: isDisabled }, props), state, ref), triggerProps = _c.triggerProps, valueProps = _c.valueProps, menuProps = _c.menuProps;
     var buttonProps = (0, react_aria_1.useButton)(triggerProps, ref).buttonProps;
     var _d = (0, react_aria_1.useFocusRing)(), focusProps = _d.focusProps, isFocusVisible = _d.isFocusVisible;
     var mergedRef = (0, fuselage_hooks_1.useMergedRefs)(outerRef, ref);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, __assign({}, props, { disabled: disabled, "rcx-select": true }, (0, react_aria_1.mergeProps)(buttonProps, focusProps), { is: 'button', display: 'flex', flexDirection: 'row', fontScale: 'p2', ref: mergedRef, justifyContent: 'space-between', "rcx-input-box--small": small, className: [
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, __assign({}, props, { disabled: isDisabled, "rcx-select": true }, (0, react_aria_1.mergeProps)(buttonProps, focusProps), { is: 'button', display: 'flex', flexDirection: 'row', fontScale: 'p2', ref: mergedRef, justifyContent: 'space-between', "rcx-input-box--small": small, className: [
                     error && 'invalid',
-                    disabled && 'disabled',
+                    isDisabled && 'disabled',
                     (isFocusVisible || state.isOpen) && 'focus',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: [(0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name }), (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span' }, valueProps, { color: state.selectedItem ? 'default' : 'hint' }, (small && { fontScale: 'c1' }), { children: state.selectedItem ? state.selectedItem.rendered : placeholder })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })] })), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8, children: (0, jsx_runtime_1.jsx)(Options_1.OptionContainer, { style: {
+                    .join(' '), children: [(0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span' }, valueProps, { color: state.selectedItem ? 'default' : 'hint' }, (small && { fontScale: 'c1' }), { children: state.selectedItem ? state.selectedItem.rendered : placeholder })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })] })), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8, children: (0, jsx_runtime_1.jsx)(Options_1.OptionContainer, { style: {
                         width: borderBoxSize === null || borderBoxSize === void 0 ? void 0 : borderBoxSize.inlineSize,
                     }, children: (0, jsx_runtime_1.jsx)(Listbox_1.ListBox, __assign({}, menuProps, { state: state })) }) }))] }));
 });
@@ -15017,7 +15051,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var SelectFocus = (0, react_1.forwardRef)(function SelectFocus(props, ref) {
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ ref: ref, fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button' }, props)));
 });
@@ -15081,7 +15115,7 @@ var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@
 var react_1 = __webpack_require__(/*! react */ "react");
 var isForwardRefType_1 = __webpack_require__(/*! ../../helpers/isForwardRefType */ "./src/helpers/isForwardRefType.ts");
 var AnimatedVisibility_1 = __importDefault(__webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts"));
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
 var Options_1 = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
@@ -15766,7 +15800,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBarTitle = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../../Box */ "./src/components/Box/index.ts"));
 var TopBarTitle = function (props) { return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ className: 'rcx-sidebar-topbar__title', withTruncatedText: true }, props))); };
 exports.TopBarTitle = TopBarTitle;
 
@@ -15985,7 +16019,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarDivider = exports.SidebarTopBar = exports.SidebarSection = exports.SidebarItem = exports.Sidebar = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Item_1 = __importDefault(__webpack_require__(/*! ./Item */ "./src/components/Sidebar/Item.tsx"));
 var Section_1 = __importDefault(__webpack_require__(/*! ./Section */ "./src/components/Sidebar/Section.tsx"));
 var SidebarBanner_1 = __webpack_require__(/*! ./SidebarBanner */ "./src/components/Sidebar/SidebarBanner.tsx");
@@ -16461,7 +16495,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarFooterContent = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../../Box */ "./src/components/Box/index.ts"));
 var SidebarFooterContent = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ className: 'rcx-sidebar-v2-footer__content' }, props, { children: children })));
@@ -17882,16 +17916,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Skeleton = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var composeClassNames_1 = __webpack_require__(/*! ../../helpers/composeClassNames */ "./src/helpers/composeClassNames.ts");
+var Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 var Skeleton = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? 'text' : _b, props = __rest(_a, ["variant"]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span', "rcx-skeleton": true, "rcx-skeleton--text": variant === 'text', "rcx-skeleton--rect": variant === 'rect', "rcx-skeleton--circle": variant === 'circle' }, props)));
+    return ((0, jsx_runtime_1.jsx)(Box_1.StylingBox, __assign({}, props, { children: (0, jsx_runtime_1.jsx)("span", { className: (0, composeClassNames_1.cx)((0, composeClassNames_1.cxx)('rcx-skeleton')({
+                text: variant === 'text',
+                rect: variant === 'rect',
+                circle: variant === 'circle',
+            })) }) })));
 };
 exports.Skeleton = Skeleton;
 
@@ -17950,7 +17986,6 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Slider = Slider;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-/* eslint-disable no-nested-ternary */
 var css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
@@ -18984,7 +19019,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Table = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 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 ((0, jsx_runtime_1.jsx)(Box_1.default, { "rcx-table__wrapper": true, children: (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'table', "rcx-table": true, "rcx-table--fixed": fixed, "rcx-table--sticky": sticky, "rcx-table--striped": striped }, props)) }));
@@ -19018,7 +19053,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TableBody = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var TableBody = function (props) { return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'tbody', "rcx-table__body": true }, props))); };
 exports.TableBody = TableBody;
 
@@ -19061,7 +19096,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TableCell = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var TableHead_1 = __webpack_require__(/*! ./TableHead */ "./src/components/Table/TableHead.tsx");
 var TableCell = function (_a) {
     var align = _a.align, clickable = _a.clickable, children = _a.children, props = __rest(_a, ["align", "clickable", "children"]);
@@ -19098,7 +19133,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TableFoot = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var TableFoot = function (props) { return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'tfoot', "rcx-table__foot": true }, props))); };
 exports.TableFoot = TableFoot;
 
@@ -19130,7 +19165,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TableHead = exports.TableHeadContext = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.TableHeadContext = (0, react_1.createContext)(false);
 var TableHead = function (props) { return ((0, jsx_runtime_1.jsx)(exports.TableHeadContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'thead', "rcx-table__head": true }, props)) })); };
 exports.TableHead = TableHead;
@@ -19173,7 +19208,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TableRow = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var TableRow = function (_a) {
     var action = _a.action, selected = _a.selected, props = __rest(_a, ["action", "selected"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'tr', "rcx-table__row": true, "rcx-table__row--selected": selected, "rcx-table__row--action": action }, props)));
@@ -19218,7 +19253,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TableSelection = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../../Box */ "./src/components/Box/index.ts"));
 var Margins_1 = __importDefault(__webpack_require__(/*! ../../Margins */ "./src/components/Margins/index.ts"));
 var TableSelection = function (_a) {
     var children = _a.children, text = _a.text, props = __rest(_a, ["children", "text"]);
@@ -19382,7 +19417,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Tabs = Tabs;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var TabsItem_1 = __webpack_require__(/*! ./TabsItem */ "./src/components/Tabs/TabsItem.tsx");
 /**
  * Tabs is a component to navigate around the UI using buttons arranged together with the selected tab highlighted.
@@ -19433,7 +19468,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TabsItem = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.TabsItem = (0, react_1.forwardRef)(function TabsItem(_a, ref) {
     var selected = _a.selected, disabled = _a.disabled, props = __rest(_a, ["selected", "disabled"]);
     return ((0, jsx_runtime_1.jsx)(Box_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)));
@@ -19778,7 +19813,7 @@ exports.Throbber = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 function Circle(_a) {
     var disabled = _a.disabled, circleCount = _a.circleCount, iteration = _a.iteration, inheritColor = _a.inheritColor, props = __rest(_a, ["disabled", "circleCount", "iteration", "inheritColor"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span', className: (0, css_in_js_1.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)));
@@ -19857,7 +19892,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Tile = (0, react_1.forwardRef)(function Tile(_a, ref) {
     var _b = _a.elevation, elevation = _b === void 0 ? '1' : _b, _c = _a.padding, padding = _c === void 0 ? 16 : _c, props = __rest(_a, ["elevation", "padding"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ ref: ref, "rcx-tile": true, "rcx-tile--elevation": elevation, padding: padding }, props)));
@@ -19926,7 +19961,7 @@ exports.ToastBar = ToastBar;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 /**
@@ -20016,7 +20051,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ToggleSwitch = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 exports.ToggleSwitch = (0, react_1.forwardRef)(function ToggleSwitch(_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return ((0, jsx_runtime_1.jsxs)(Box_1.default, { is: 'label', className: className, "rcx-toggle-switch": true, children: [(0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'input', ref: ref, "rcx-toggle-switch__input": true, type: 'checkbox' }, props)), (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'i', "rcx-toggle-switch__fake": true, "aria-hidden": 'true' })] }));
@@ -20103,7 +20138,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.ts"));
 var parsePlacement = function (placement) {
     var _a = __read(placement
         ? placement.split('-')
@@ -20224,7 +20259,7 @@ __exportStar(__webpack_require__(/*! ./Avatar */ "./src/components/Avatar/index.
 __exportStar(__webpack_require__(/*! ./Badge */ "./src/components/Badge/index.tsx"), exports);
 var Banner_1 = __webpack_require__(/*! ./Banner */ "./src/components/Banner/index.ts");
 Object.defineProperty(exports, "Banner", ({ enumerable: true, get: function () { return __importDefault(Banner_1).default; } }));
-var Box_1 = __webpack_require__(/*! ./Box */ "./src/components/Box/index.tsx");
+var Box_1 = __webpack_require__(/*! ./Box */ "./src/components/Box/index.ts");
 Object.defineProperty(exports, "Box", ({ enumerable: true, get: function () { return __importDefault(Box_1).default; } }));
 var useArrayLikeClassNameProp_1 = __webpack_require__(/*! ../hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
 Object.defineProperty(exports, "useArrayLikeClassNameProp", ({ enumerable: true, get: function () { return useArrayLikeClassNameProp_1.useArrayLikeClassNameProp; } }));
@@ -20442,7 +20477,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.appendClassName = void 0;
 var appendClassName = function (currentClassName, newClassName) {
-    if (currentClassName === undefined) {
+    if (currentClassName === undefined || currentClassName === '') {
         return newClassName;
     }
     if (Array.isArray(currentClassName)) {
@@ -20459,7 +20494,7 @@ exports.appendClassName = appendClassName;
 /*!******************************************!*\
   !*** ./src/helpers/composeClassNames.ts ***!
   \******************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
 var __read = (this && this.__read) || function (o, n) {
@@ -20479,7 +20514,8 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.composeClassNames = void 0;
+exports.cxx = exports.cx = exports.composeClassNames = void 0;
+var exhaustiveCheck_1 = __webpack_require__(/*! ./exhaustiveCheck */ "./src/helpers/exhaustiveCheck.ts");
 var withPrefix = function (prefix) { return function (modifier) {
     return prefix ? "".concat(prefix, "--").concat(modifier) : modifier;
 }; };
@@ -20525,6 +20561,138 @@ var composeClassNames = function (prefix) {
     };
 };
 exports.composeClassNames = composeClassNames;
+/**
+ * Composes class names into a single string based on flags.
+ *
+ * Any falsy value passed as an argument will be ignored.
+ *
+ * If a string is passed, it will be used as a class name.
+ *
+ * If a dictionary object is passed, its keys will be used as class names and its values will be used as modifiers --
+ * unless the value is a boolean, in which case the key will be used as a class name if the value is `true`.
+ *
+ * @example
+ * ```ts
+ * cx('a', false, 'b', null, { c: true, d: false, e: 'f', f: 1 }); // 'a b c e-f f-1'
+ * ```
+ *
+ * @param args a sequence of falsy values, strings and dictionary objects containing the class names
+ * @returns a space-separated string of class names
+ */
+var cx = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args
+        .flatMap(function (arg) {
+        if (!arg) {
+            return [];
+        }
+        if (typeof arg === 'string') {
+            return arg;
+        }
+        if (typeof arg === 'object') {
+            return Object.entries(arg).flatMap(function (_a) {
+                var _b = __read(_a, 2), className = _b[0], value = _b[1];
+                if (typeof value === 'boolean') {
+                    return value ? className : [];
+                }
+                return "".concat(className, "-").concat(value);
+            });
+        }
+        return (0, exhaustiveCheck_1.exhaustiveCheck)(arg);
+    })
+        .join(' ');
+};
+exports.cx = cx;
+/**
+ * Composes class name modifiers under a class name into a single class names' string based on flags.
+ *
+ * This function returns a function similar to `cx`, with the difference it handles the arguments as class name
+ * modifiers (based on BEM CSS conventions). However, it's recommended to use `cxx` as a curried function.
+ *
+ * @example
+ * ```ts
+ * cxx('z')('a', false, 'b', null, { c: true, d: false, e: 'f', f: 1 }); // 'z z--a z--b z--c z--e-f z--f-1'
+ * ```
+ * @param className the class name
+ * @param args a sequence of falsy values, strings and dictionary objects containing the modifiers
+ * @returns a space-separated string of class names
+ */
+var cxx = function (className) {
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var classNames = args.flatMap(function (arg) {
+            if (!arg) {
+                return [];
+            }
+            if (typeof arg === 'string') {
+                return "".concat(className, "--").concat(arg);
+            }
+            if (typeof arg === 'object') {
+                return Object.entries(arg).flatMap(function (_a) {
+                    var _b = __read(_a, 2), modifier = _b[0], value = _b[1];
+                    if (typeof value === 'boolean') {
+                        return value ? "".concat(className, "--").concat(modifier) : [];
+                    }
+                    return "".concat(className, "--").concat(modifier, "-").concat(value);
+                });
+            }
+            return (0, exhaustiveCheck_1.exhaustiveCheck)(arg);
+        });
+        classNames.unshift(className);
+        return classNames.join(' ');
+    };
+};
+exports.cxx = cxx;
+
+
+/***/ }),
+
+/***/ "./src/helpers/exhaustiveCheck.ts":
+/*!****************************************!*\
+  !*** ./src/helpers/exhaustiveCheck.ts ***!
+  \****************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.exhaustiveCheck = void 0;
+/**
+ * Utility function to check exhaustiveness of a switch statement or if-else statements.
+ *
+ * In TypeScript, variables going through a sequence of conditionals, like cases in switch statements or if-else
+ * statements, the variable type is incrementally narrowed as the conditionals are evaluated until it reaches the
+ * `never` type, meaning all possible cases have been covered. This function is used to check, at compilation time, that
+ * all possible cases have been covered (i.e. if the conditional checks were exhaustive) and should only be called in
+ * unreachable blocks of code.
+ *
+ * @example
+ * ```ts
+ * declare const value: 'foo' | 'bar';
+ * switch (value) {
+ *   case 'foo':
+ *     // ...
+ *     break;
+ *   case 'bar':
+ *     // ...
+ *     break;
+ *   default: // should be unreachable
+ *     exhaustiveCheck(value); // `value` type should be `never`, otherwise the compilation fails
+ * }
+ * ```
+ *
+ * @param _ the value which type should be `never`
+ * @throws {Error} will always throw an error if it's reached
+ */
+var exhaustiveCheck = function (_) {
+    throw new Error('Exhaustive check failed');
+};
+exports.exhaustiveCheck = exhaustiveCheck;
 
 
 /***/ }),
@@ -21293,7 +21461,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"badge":{"light":{"level-0":"#E4E7EA"
   \*******************************************/
 /***/ (function(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"button":{"light":{"backgroundPrimaryDefault":"#156FF5","backgroundPrimaryHover":"#095AD2","backgroundPrimaryPress":"#10529E","backgroundPrimaryFocus":"#156FF5","backgroundPrimaryKeyfocus":"#156FF5","backgroundPrimaryDisabled":"#D1EBFE","fontOnPrimary":"#ffffff","fontOnPrimaryDisabled":"#ffffff","backgroundSecondaryDefault":"#E4E7EA","backgroundSecondaryHover":"#CBCED1","backgroundSecondaryPress":"#9EA2A8","backgroundSecondaryFocus":"#E4E7EA","backgroundSecondaryKeyfocus":"#E4E7EA","backgroundSecondaryDisabled":"#EBECEF","fontOnSecondary":"#1F2329","fontOnSecondaryDisabled":"#CBCED1","backgroundSecondaryDangerDefault":"#E4E7EA","backgroundSecondaryDangerHover":"#CBCED1","backgroundSecondaryDangerPress":"#9EA2A8","backgroundSecondaryDangerFocus":"#E4E7EA","backgroundSecondaryDangerKeyfocus":"#E4E7EA","backgroundSecondaryDangerDisabled":"#EBECEF","fontOnSecondaryDanger":"#BB0B21","onSecondaryDangerDisabled":"#F98F9D","backgroundDangerDefault":"#EC0D2A","backgroundDangerHover":"#D40C26","backgroundDangerPress":"#BB0B21","backgroundDangerFocus":"#EC0D2A","backgroundDangerKeyfocus":"#EC0D2A","backgroundDangerDisabled":"#FFC1C9","fontOnDanger":"#ffffff","fontOnDangerDisabled":"#ffffff","backgroundSuccessDefault":"#2DE0A5","backgroundSuccessHover":"#1ECB92","backgroundSuccessPress":"#19AC7C","backgroundSuccessFocus":"#2DE0A5","backgroundSuccessKeyfocus":"#2DE0A5","backgroundSuccessDisabled":"#C0F6E4","fontOnSuccess":"#1F2329","fontOnSuccessDisabled":"#ffffff"},"high-contrast":{"backgroundPrimaryDefault":"#10529E","backgroundPrimaryHover":"#01336B","backgroundPrimaryPress":"#012247","backgroundPrimaryFocus":"#10529E","backgroundPrimaryKeyfocus":"#10529E","backgroundPrimaryDisabled":"#D1EBFE","fontOnPrimary":"#ffffff","fontOnPrimaryDisabled":"#ffffff","backgroundSecondaryDefault":"#E4E7EA","backgroundSecondaryHover":"#CBCED1","backgroundSecondaryPress":"#9EA2A8","backgroundSecondaryFocus":"#E4E7EA","backgroundSecondaryKeyfocus":"#E4E7EA","backgroundSecondaryDisabled":"#EBECEF","fontOnSecondary":"#1F2329","fontOnSecondaryDisabled":"#CBCED1","backgroundSecondaryDangerDefault":"#E4E7EA","backgroundSecondaryDangerHover":"#CBCED1","backgroundSecondaryDangerPress":"#9EA2A8","backgroundSecondaryDangerFocus":"#E4E7EA","backgroundSecondaryDangerKeyfocus":"#E4E7EA","backgroundSecondaryDangerDisabled":"#EBECEF","fontOnSecondaryDanger":"#8B0719","onSecondaryDangerDisabled":"#F98F9D","backgroundDangerDefault":"#9B1325","backgroundDangerHover":"#8B0719","backgroundDangerPress":"#8B0719","backgroundDangerFocus":"#9B1325","backgroundDangerKeyfocus":"#9B1325","backgroundDangerDisabled":"#FFC1C9","fontOnDanger":"#ffffff","fontOnDangerDisabled":"#ffffff","backgroundSuccessDefault":"#2DE0A5","backgroundSuccessHover":"#1ECB92","backgroundSuccessPress":"#19AC7C","backgroundSuccessFocus":"#2DE0A5","backgroundSuccessKeyfocus":"#2DE0A5","backgroundSuccessDisabled":"#C0F6E4","fontOnSuccess":"#1F2329","fontOnSuccessDisabled":"#ffffff"},"dark":{"backgroundPrimaryDefault":"#095AD2","backgroundPrimaryHover":"#10529E","backgroundPrimaryPress":"#01336B","backgroundPrimaryFocus":"#095AD2","backgroundPrimaryKeyfocus":"#095AD2","backgroundPrimaryDisabled":"#012247","fontOnPrimary":"#FFFFFF","fontOnPrimaryDisabled":"#6C727A","backgroundSecondaryDefault":"#353B45","backgroundSecondaryHover":"#404754","backgroundSecondaryPress":"#4C5362","backgroundSecondaryFocus":"#353B45","backgroundSecondaryKeyfocus":"#353B45","backgroundSecondaryDisabled":"#353B45","fontOnSecondary":"#E4E7EA","fontOnSecondaryDisabled":"#6C727A","backgroundSecondaryDangerDefault":"#353B45","backgroundSecondaryDangerHover":"#404754","backgroundSecondaryDangerPress":"#4C5362","backgroundSecondaryDangerFocus":"#353B45","backgroundSecondaryDangerKeyfocus":"#353B45","backgroundSecondaryDangerDisabled":"#353B45","fontOnSecondaryDanger":"#FFC1C9","onSecondaryDangerDisabled":"#6B0513","backgroundDangerDefault":"#BB3E4E","backgroundDangerHover":"#95323F","backgroundDangerPress":"#822C37","backgroundDangerFocus":"#BB3E4E","backgroundDangerKeyfocus":"#BB3E4E","backgroundDangerDisabled":"#3D2126","fontOnDanger":"#FFFFFF","fontOnDangerDisabled":"#757575","backgroundSuccessDefault":"#1D7256","backgroundSuccessHover":"#175943","backgroundSuccessPress":"#134937","backgroundSuccessFocus":"#1D7256","backgroundSuccessKeyfocus":"#1D7256","backgroundSuccessDisabled":"#1E4B40","fontOnSuccess":"#FFFFFF","fontOnSuccessDisabled":"#757575"}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"button":{"light":{"backgroundPrimaryDefault":"#156FF5","backgroundPrimaryHover":"#095AD2","backgroundPrimaryPress":"#10529E","backgroundPrimaryFocus":"#156FF5","backgroundPrimaryKeyfocus":"#156FF5","backgroundPrimaryDisabled":"#D1EBFE","fontOnPrimary":"#ffffff","fontOnPrimaryDisabled":"#ffffff","backgroundSecondaryDefault":"#E4E7EA","backgroundSecondaryHover":"#CBCED1","backgroundSecondaryPress":"#9EA2A8","backgroundSecondaryFocus":"#E4E7EA","backgroundSecondaryKeyfocus":"#E4E7EA","backgroundSecondaryDisabled":"#EBECEF","fontOnSecondary":"#1F2329","fontOnSecondaryDisabled":"#CBCED1","backgroundSecondaryDangerDefault":"#E4E7EA","backgroundSecondaryDangerHover":"#CBCED1","backgroundSecondaryDangerPress":"#9EA2A8","backgroundSecondaryDangerFocus":"#E4E7EA","backgroundSecondaryDangerKeyfocus":"#E4E7EA","backgroundSecondaryDangerDisabled":"#EBECEF","fontOnSecondaryDanger":"#BB0B21","onSecondaryDangerDisabled":"#F98F9D","backgroundDangerDefault":"#EC0D2A","backgroundDangerHover":"#D40C26","backgroundDangerPress":"#BB0B21","backgroundDangerFocus":"#EC0D2A","backgroundDangerKeyfocus":"#EC0D2A","backgroundDangerDisabled":"#FFC1C9","fontOnDanger":"#ffffff","fontOnDangerDisabled":"#ffffff","backgroundSuccessDefault":"#148660","backgroundSuccessHover":"#106D4F","backgroundSuccessPress":"#0D5940","backgroundSuccessFocus":"#148660","backgroundSuccessKeyfocus":"#148660","backgroundSuccessDisabled":"#C0F6E4","fontOnSuccess":"#ffffff","fontOnSuccessDisabled":"#ffffff"},"high-contrast":{"backgroundPrimaryDefault":"#10529E","backgroundPrimaryHover":"#01336B","backgroundPrimaryPress":"#012247","backgroundPrimaryFocus":"#10529E","backgroundPrimaryKeyfocus":"#10529E","backgroundPrimaryDisabled":"#D1EBFE","fontOnPrimary":"#ffffff","fontOnPrimaryDisabled":"#ffffff","backgroundSecondaryDefault":"#E4E7EA","backgroundSecondaryHover":"#CBCED1","backgroundSecondaryPress":"#9EA2A8","backgroundSecondaryFocus":"#E4E7EA","backgroundSecondaryKeyfocus":"#E4E7EA","backgroundSecondaryDisabled":"#EBECEF","fontOnSecondary":"#1F2329","fontOnSecondaryDisabled":"#CBCED1","backgroundSecondaryDangerDefault":"#E4E7EA","backgroundSecondaryDangerHover":"#CBCED1","backgroundSecondaryDangerPress":"#9EA2A8","backgroundSecondaryDangerFocus":"#E4E7EA","backgroundSecondaryDangerKeyfocus":"#E4E7EA","backgroundSecondaryDangerDisabled":"#EBECEF","fontOnSecondaryDanger":"#8B0719","onSecondaryDangerDisabled":"#F98F9D","backgroundDangerDefault":"#9B1325","backgroundDangerHover":"#8B0719","backgroundDangerPress":"#8B0719","backgroundDangerFocus":"#9B1325","backgroundDangerKeyfocus":"#9B1325","backgroundDangerDisabled":"#FFC1C9","fontOnDanger":"#ffffff","fontOnDangerDisabled":"#ffffff","backgroundSuccessDefault":"#2DE0A5","backgroundSuccessHover":"#1ECB92","backgroundSuccessPress":"#19AC7C","backgroundSuccessFocus":"#2DE0A5","backgroundSuccessKeyfocus":"#2DE0A5","backgroundSuccessDisabled":"#C0F6E4","fontOnSuccess":"#1F2329","fontOnSuccessDisabled":"#ffffff"},"dark":{"backgroundPrimaryDefault":"#095AD2","backgroundPrimaryHover":"#10529E","backgroundPrimaryPress":"#01336B","backgroundPrimaryFocus":"#095AD2","backgroundPrimaryKeyfocus":"#095AD2","backgroundPrimaryDisabled":"#012247","fontOnPrimary":"#FFFFFF","fontOnPrimaryDisabled":"#6C727A","backgroundSecondaryDefault":"#353B45","backgroundSecondaryHover":"#404754","backgroundSecondaryPress":"#4C5362","backgroundSecondaryFocus":"#353B45","backgroundSecondaryKeyfocus":"#353B45","backgroundSecondaryDisabled":"#353B45","fontOnSecondary":"#E4E7EA","fontOnSecondaryDisabled":"#6C727A","backgroundSecondaryDangerDefault":"#353B45","backgroundSecondaryDangerHover":"#404754","backgroundSecondaryDangerPress":"#4C5362","backgroundSecondaryDangerFocus":"#353B45","backgroundSecondaryDangerKeyfocus":"#353B45","backgroundSecondaryDangerDisabled":"#353B45","fontOnSecondaryDanger":"#FFC1C9","onSecondaryDangerDisabled":"#6B0513","backgroundDangerDefault":"#BB3E4E","backgroundDangerHover":"#95323F","backgroundDangerPress":"#822C37","backgroundDangerFocus":"#BB3E4E","backgroundDangerKeyfocus":"#BB3E4E","backgroundDangerDisabled":"#3D2126","fontOnDanger":"#FFFFFF","fontOnDangerDisabled":"#757575","backgroundSuccessDefault":"#1D7256","backgroundSuccessHover":"#175943","backgroundSuccessPress":"#134937","backgroundSuccessFocus":"#1D7256","backgroundSuccessKeyfocus":"#1D7256","backgroundSuccessDisabled":"#1E4B40","fontOnSuccess":"#FFFFFF","fontOnSuccessDisabled":"#757575"}}}');
 
 /***/ }),