@rocket.chat/fuselage 0.79.1 → 0.81.0

package/dist/fuselage.development.js

@@ -4,14 +4,14 @@ if (process.env.NODE_ENV !== "production") {
 (function() {
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@rocket.chat/css-in-js"), require("@rocket.chat/fuselage-hooks"), require("@rocket.chat/fuselage-tokens/colors.json"), require("@rocket.chat/fuselage-tokens/dist/badge.json"), require("@rocket.chat/fuselage-tokens/dist/button.json"), require("@rocket.chat/fuselage-tokens/dist/font.json"), require("@rocket.chat/fuselage-tokens/dist/shadow.json"), require("@rocket.chat/fuselage-tokens/dist/status.json"), require("@rocket.chat/fuselage-tokens/dist/statusBullet.json"), require("@rocket.chat/fuselage-tokens/dist/stroke.json"), require("@rocket.chat/fuselage-tokens/dist/surface.json"), require("@rocket.chat/fuselage-tokens/typography.json"), require("@rocket.chat/icons"), require("@rocket.chat/memo"), require("invariant"), require("react"), require("react-aria"), require("react-dom"), require("react-keyed-flatten-children"), require("react-stately"), require("react-virtuoso"), require("react/jsx-runtime"));
+		module.exports = factory(require("@rocket.chat/css-in-js"), require("@rocket.chat/fuselage-hooks"), require("@rocket.chat/fuselage-tokens/colors.json"), require("@rocket.chat/fuselage-tokens/dist/badge.json"), require("@rocket.chat/fuselage-tokens/dist/button.json"), require("@rocket.chat/fuselage-tokens/dist/font.json"), require("@rocket.chat/fuselage-tokens/dist/shadow.json"), require("@rocket.chat/fuselage-tokens/dist/status.json"), require("@rocket.chat/fuselage-tokens/dist/statusBullet.json"), require("@rocket.chat/fuselage-tokens/dist/stroke.json"), require("@rocket.chat/fuselage-tokens/dist/surface.json"), require("@rocket.chat/fuselage-tokens/typography.json"), require("@rocket.chat/icons"), require("@rocket.chat/memo"), require("invariant"), require("react"), require("react-aria"), require("react-dom"), require("react-is"), require("react-keyed-flatten-children"), require("react-stately"), require("react-virtuoso"), require("react/jsx-runtime"));
 	else if(typeof define === 'function' && define.amd)
-		define("RocketChatFuselage", ["@rocket.chat/css-in-js", "@rocket.chat/fuselage-hooks", "@rocket.chat/fuselage-tokens/colors.json", "@rocket.chat/fuselage-tokens/dist/badge.json", "@rocket.chat/fuselage-tokens/dist/button.json", "@rocket.chat/fuselage-tokens/dist/font.json", "@rocket.chat/fuselage-tokens/dist/shadow.json", "@rocket.chat/fuselage-tokens/dist/status.json", "@rocket.chat/fuselage-tokens/dist/statusBullet.json", "@rocket.chat/fuselage-tokens/dist/stroke.json", "@rocket.chat/fuselage-tokens/dist/surface.json", "@rocket.chat/fuselage-tokens/typography.json", "@rocket.chat/icons", "@rocket.chat/memo", "invariant", "react", "react-aria", "react-dom", "react-keyed-flatten-children", "react-stately", "react-virtuoso", "react/jsx-runtime"], factory);
+		define("RocketChatFuselage", ["@rocket.chat/css-in-js", "@rocket.chat/fuselage-hooks", "@rocket.chat/fuselage-tokens/colors.json", "@rocket.chat/fuselage-tokens/dist/badge.json", "@rocket.chat/fuselage-tokens/dist/button.json", "@rocket.chat/fuselage-tokens/dist/font.json", "@rocket.chat/fuselage-tokens/dist/shadow.json", "@rocket.chat/fuselage-tokens/dist/status.json", "@rocket.chat/fuselage-tokens/dist/statusBullet.json", "@rocket.chat/fuselage-tokens/dist/stroke.json", "@rocket.chat/fuselage-tokens/dist/surface.json", "@rocket.chat/fuselage-tokens/typography.json", "@rocket.chat/icons", "@rocket.chat/memo", "invariant", "react", "react-aria", "react-dom", "react-is", "react-keyed-flatten-children", "react-stately", "react-virtuoso", "react/jsx-runtime"], factory);
 	else if(typeof exports === 'object')
-		exports["RocketChatFuselage"] = factory(require("@rocket.chat/css-in-js"), require("@rocket.chat/fuselage-hooks"), require("@rocket.chat/fuselage-tokens/colors.json"), require("@rocket.chat/fuselage-tokens/dist/badge.json"), require("@rocket.chat/fuselage-tokens/dist/button.json"), require("@rocket.chat/fuselage-tokens/dist/font.json"), require("@rocket.chat/fuselage-tokens/dist/shadow.json"), require("@rocket.chat/fuselage-tokens/dist/status.json"), require("@rocket.chat/fuselage-tokens/dist/statusBullet.json"), require("@rocket.chat/fuselage-tokens/dist/stroke.json"), require("@rocket.chat/fuselage-tokens/dist/surface.json"), require("@rocket.chat/fuselage-tokens/typography.json"), require("@rocket.chat/icons"), require("@rocket.chat/memo"), require("invariant"), require("react"), require("react-aria"), require("react-dom"), require("react-keyed-flatten-children"), require("react-stately"), require("react-virtuoso"), require("react/jsx-runtime"));
+		exports["RocketChatFuselage"] = factory(require("@rocket.chat/css-in-js"), require("@rocket.chat/fuselage-hooks"), require("@rocket.chat/fuselage-tokens/colors.json"), require("@rocket.chat/fuselage-tokens/dist/badge.json"), require("@rocket.chat/fuselage-tokens/dist/button.json"), require("@rocket.chat/fuselage-tokens/dist/font.json"), require("@rocket.chat/fuselage-tokens/dist/shadow.json"), require("@rocket.chat/fuselage-tokens/dist/status.json"), require("@rocket.chat/fuselage-tokens/dist/statusBullet.json"), require("@rocket.chat/fuselage-tokens/dist/stroke.json"), require("@rocket.chat/fuselage-tokens/dist/surface.json"), require("@rocket.chat/fuselage-tokens/typography.json"), require("@rocket.chat/icons"), require("@rocket.chat/memo"), require("invariant"), require("react"), require("react-aria"), require("react-dom"), require("react-is"), require("react-keyed-flatten-children"), require("react-stately"), require("react-virtuoso"), require("react/jsx-runtime"));
 	else
-		root["RocketChatFuselage"] = factory(root["@rocket.chat/css-in-js"], root["@rocket.chat/fuselage-hooks"], root["@rocket.chat/fuselage-tokens/colors.json"], root["@rocket.chat/fuselage-tokens/dist/badge.json"], root["@rocket.chat/fuselage-tokens/dist/button.json"], root["@rocket.chat/fuselage-tokens/dist/font.json"], root["@rocket.chat/fuselage-tokens/dist/shadow.json"], root["@rocket.chat/fuselage-tokens/dist/status.json"], root["@rocket.chat/fuselage-tokens/dist/statusBullet.json"], root["@rocket.chat/fuselage-tokens/dist/stroke.json"], root["@rocket.chat/fuselage-tokens/dist/surface.json"], root["@rocket.chat/fuselage-tokens/typography.json"], root["@rocket.chat/icons"], root["@rocket.chat/memo"], root["invariant"], root["react"], root["react-aria"], root["react-dom"], root["react-keyed-flatten-children"], root["react-stately"], root["react-virtuoso"], root["react/jsx-runtime"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE__rocket_chat_css_in_js__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_hooks__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_colors_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_badge_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_button_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_font_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_shadow_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_status_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_statusBullet_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_stroke_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_surface_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_typography_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_icons__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_memo__, __WEBPACK_EXTERNAL_MODULE_invariant__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_aria__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE_react_keyed_flatten_children__, __WEBPACK_EXTERNAL_MODULE_react_stately__, __WEBPACK_EXTERNAL_MODULE_react_virtuoso__, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__) => {
+		root["RocketChatFuselage"] = factory(root["@rocket.chat/css-in-js"], root["@rocket.chat/fuselage-hooks"], root["@rocket.chat/fuselage-tokens/colors.json"], root["@rocket.chat/fuselage-tokens/dist/badge.json"], root["@rocket.chat/fuselage-tokens/dist/button.json"], root["@rocket.chat/fuselage-tokens/dist/font.json"], root["@rocket.chat/fuselage-tokens/dist/shadow.json"], root["@rocket.chat/fuselage-tokens/dist/status.json"], root["@rocket.chat/fuselage-tokens/dist/statusBullet.json"], root["@rocket.chat/fuselage-tokens/dist/stroke.json"], root["@rocket.chat/fuselage-tokens/dist/surface.json"], root["@rocket.chat/fuselage-tokens/typography.json"], root["@rocket.chat/icons"], root["@rocket.chat/memo"], root["invariant"], root["react"], root["react-aria"], root["react-dom"], root["react-is"], root["react-keyed-flatten-children"], root["react-stately"], root["react-virtuoso"], root["react/jsx-runtime"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE__rocket_chat_css_in_js__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_hooks__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_colors_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_badge_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_button_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_font_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_shadow_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_status_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_statusBullet_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_stroke_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_surface_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_typography_json__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_icons__, __WEBPACK_EXTERNAL_MODULE__rocket_chat_memo__, __WEBPACK_EXTERNAL_MODULE_invariant__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_aria__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE_react_is__, __WEBPACK_EXTERNAL_MODULE_react_keyed_flatten_children__, __WEBPACK_EXTERNAL_MODULE_react_stately__, __WEBPACK_EXTERNAL_MODULE_react_virtuoso__, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
@@ -495,16 +495,16 @@ Object.defineProperty(exports, "AnimatedVisibility", ({ enumerable: true, get: f
 (__unused_webpack_module, exports, __webpack_require__) {
 
 
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! ../.. */ "./src/index.ts");
 const contexts_1 = __webpack_require__(/*! ../../contexts */ "./src/contexts/index.ts");
-const Slider_1 = __webpack_require__(/*! ../Slider */ "./src/components/Slider/index.ts");
-const getMaskTime = (durationTime) => new Date(durationTime * 1000)
-    .toISOString()
-    .slice(durationTime > 60 * 60 ? 11 : 14, 19);
+const AudioPlayerControls_1 = __importDefault(__webpack_require__(/*! ./AudioPlayerControls */ "./src/components/AudioPlayer/AudioPlayerControls.tsx"));
 function forceDownload(ownerDocument, url, fileName) {
     const xhr = new XMLHttpRequest();
     xhr.open('GET', url, true);
@@ -542,7 +542,7 @@ const getDurationForInfinityDurationAudioFile = (src, callback) => {
         audioElement.remove();
     });
 };
-const AudioPlayer = (0, react_1.forwardRef)(({ src, type = 'audio/mpeg', maxPlaybackSpeed = 2, minPlaybackSpeed = 0.5, playbackSpeedStep = 0.25, download = false, playLabel = 'Play', pauseLabel = 'Pause', audioPlaybackRangeLabel = 'Audio Playback Range', changePlaybackSpeedLabel = 'Change Playback Speed', downloadAudioFileLabel = 'Download Audio File', trackProps, }, ref) => {
+const AudioPlayer = ({ ref, src, type = 'audio/mpeg', maxPlaybackSpeed = 2, minPlaybackSpeed = 0.5, playbackSpeedStep = 0.25, download = false, playLabel = 'Play', pauseLabel = 'Pause', audioPlaybackRangeLabel = 'Audio Playback Range', changePlaybackSpeedLabel = 'Change Playback Speed', downloadAudioFileLabel = 'Download Audio File', trackProps, }) => {
     const audioRef = (0, react_1.useRef)(null);
     const refs = (0, fuselage_hooks_1.useMergedRefs)(ref, audioRef);
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
@@ -565,6 +565,8 @@ const AudioPlayer = (0, react_1.forwardRef)(({ src, type = 'audio/mpeg', maxPlay
         }
     };
     const handlePlaybackSpeedSingleControl = () => {
+        if (!audioRef.current)
+            return;
         const reachedMaxPlaybackSpeed = maxPlaybackSpeed === audioRef?.current?.playbackRate;
         if (reachedMaxPlaybackSpeed) {
             audioRef.current.playbackRate = minPlaybackSpeed;
@@ -573,19 +575,17 @@ const AudioPlayer = (0, react_1.forwardRef)(({ src, type = 'audio/mpeg', maxPlay
         handlePlaybackSpeed(1);
     };
     const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
-    return ((0, jsx_runtime_1.jsxs)(__1.Box, { borderWidth: 'default', bg: 'tint', borderColor: 'extra-light', pb: 12, pie: 8, pis: 16, borderRadius: 'x4', w: '100%', maxWidth: 'x300', ref: containerRef, display: 'flex', alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, onClick: handlePlay, "aria-label": isPlaying ? pauseLabel : playLabel, icon: isPlaying ? 'pause-shape-filled' : 'play-shape-filled' }), (0, jsx_runtime_1.jsxs)(__1.Margins, { inline: 8, children: [(0, jsx_runtime_1.jsx)(__1.Box, { fontScale: 'p2', color: 'secondary-info', children: isPlaying || currentTime > 0
-                            ? getMaskTime(currentTime)
-                            : getMaskTime(durationTime) }), (0, jsx_runtime_1.jsx)(__1.Box, { mi: 16, w: 'full', children: (0, jsx_runtime_1.jsx)(Slider_1.Slider, { "aria-label": audioPlaybackRangeLabel, showOutput: false, value: currentTime, maxValue: durationTime, onChange: (value) => {
-                                if (audioRef.current) {
-                                    audioRef.current.currentTime = value;
-                                }
-                            } }) }), (0, jsx_runtime_1.jsxs)(__1.Button, { secondary: true, small: true, onClick: handlePlaybackSpeedSingleControl, "aria-label": changePlaybackSpeedLabel, children: [playbackSpeed, "x"] })] }), download && ((0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, "aria-label": downloadAudioFileLabel, is: 'a', href: src, download: true, icon: 'download', medium: true, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(__1.Box, { borderWidth: 'default', bg: 'tint', borderColor: 'extra-light', pb: 12, pie: 8, pis: 16, borderRadius: 'x4', w: '100%', maxWidth: 'x300', ref: containerRef, display: 'flex', alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(AudioPlayerControls_1.default, { isPlaying: isPlaying, currentTime: currentTime, durationTime: durationTime, playbackSpeed: playbackSpeed, onTogglePlay: handlePlay, onSeek: (time) => {
+                    if (audioRef.current) {
+                        audioRef.current.currentTime = time;
+                    }
+                }, onChangePlaybackSpeed: handlePlaybackSpeedSingleControl, download: download, downloadHref: src, onDownload: (e) => {
                     const { host } = new URL(src);
                     if (host !== ownerDocument.defaultView?.location.host) {
                         e.preventDefault();
                         forceDownload(ownerDocument, src);
                     }
-                } })), (0, jsx_runtime_1.jsxs)("audio", { style: { display: 'none' }, onTimeUpdate: (e) => {
+                }, playLabel: playLabel, pauseLabel: pauseLabel, audioPlaybackRangeLabel: audioPlaybackRangeLabel, changePlaybackSpeedLabel: changePlaybackSpeedLabel, downloadAudioFileLabel: downloadAudioFileLabel }), (0, jsx_runtime_1.jsxs)("audio", { style: { display: 'none' }, onTimeUpdate: (e) => {
                     setCurrentTime(e.target.currentTime);
                 }, onLoadedMetadata: (e) => {
                     const { duration } = e.target;
@@ -600,10 +600,32 @@ const AudioPlayer = (0, react_1.forwardRef)(({ src, type = 'audio/mpeg', maxPlay
                 }, onPause: () => {
                     setIsPlaying(false);
                 }, controls: true, children: [(0, jsx_runtime_1.jsx)("source", { src: src, type: type }), (0, jsx_runtime_1.jsx)("track", { kind: 'captions', ...trackProps })] })] }));
-});
+};
 exports["default"] = AudioPlayer;
 
 
+/***/ },
+
+/***/ "./src/components/AudioPlayer/AudioPlayerControls.tsx"
+/*!************************************************************!*\
+  !*** ./src/components/AudioPlayer/AudioPlayerControls.tsx ***!
+  \************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+const __1 = __webpack_require__(/*! ../.. */ "./src/index.ts");
+const Slider_1 = __webpack_require__(/*! ../Slider */ "./src/components/Slider/index.ts");
+const getMaskTime = (durationTime) => new Date(durationTime * 1000)
+    .toISOString()
+    .slice(durationTime > 60 * 60 ? 11 : 14, 19);
+const AudioPlayerControls = ({ isPlaying, currentTime, durationTime, playbackSpeed, onTogglePlay, onSeek, onChangePlaybackSpeed, download = false, downloadHref, onDownload, playLabel = 'Play', pauseLabel = 'Pause', audioPlaybackRangeLabel = 'Audio Playback Range', changePlaybackSpeedLabel = 'Change Playback Speed', downloadAudioFileLabel = 'Download Audio File', }) => ((0, jsx_runtime_1.jsxs)(__1.Box, { display: 'flex', alignItems: 'center', w: 'full', children: [(0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, onClick: onTogglePlay, "aria-label": isPlaying ? pauseLabel : playLabel, icon: isPlaying ? 'pause-shape-filled' : 'play-shape-filled' }), (0, jsx_runtime_1.jsxs)(__1.Margins, { inline: 8, children: [(0, jsx_runtime_1.jsx)(__1.Box, { fontScale: 'p2', color: 'secondary-info', children: isPlaying || currentTime > 0
+                        ? getMaskTime(currentTime)
+                        : getMaskTime(durationTime) }), (0, jsx_runtime_1.jsx)(__1.Box, { mi: 16, w: 'full', children: (0, jsx_runtime_1.jsx)(Slider_1.Slider, { "aria-label": audioPlaybackRangeLabel, showOutput: false, value: currentTime, maxValue: durationTime, onChange: (value) => onSeek(Array.isArray(value) ? value[0] : value) }) }), (0, jsx_runtime_1.jsxs)(__1.Button, { secondary: true, small: true, onClick: onChangePlaybackSpeed, "aria-label": changePlaybackSpeedLabel, children: [playbackSpeed, "x"] })] }), download && ((0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, is: 'a', href: downloadHref, download: true, icon: 'download', "aria-label": downloadAudioFileLabel, onClick: onDownload }))] }));
+exports["default"] = AudioPlayerControls;
+
+
 /***/ },
 
 /***/ "./src/components/AudioPlayer/index.ts"
@@ -617,9 +639,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.AudioPlayer = void 0;
+exports.AudioPlayerControls = exports.AudioPlayer = void 0;
 var AudioPlayer_1 = __webpack_require__(/*! ./AudioPlayer */ "./src/components/AudioPlayer/AudioPlayer.tsx");
 Object.defineProperty(exports, "AudioPlayer", ({ enumerable: true, get: function () { return __importDefault(AudioPlayer_1).default; } }));
+var AudioPlayerControls_1 = __webpack_require__(/*! ./AudioPlayerControls */ "./src/components/AudioPlayer/AudioPlayerControls.tsx");
+Object.defineProperty(exports, "AudioPlayerControls", ({ enumerable: true, get: function () { return __importDefault(AudioPlayerControls_1).default; } }));
 
 
 /***/ },
@@ -659,7 +683,7 @@ const isSelectedValid = (value) => (selected) => {
         ? selected.value === value
         : value.includes(selected.value);
 };
-const AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ value, filter, setFilter, options = [], renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, onBlur: onBlurAction = () => { }, ...props }, ref) {
+function AutoComplete({ ref, value, filter, setFilter, options = [], renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, onBlur: onBlurAction = () => { }, ...props }) {
     const innerRef = (0, react_1.useRef)(null);
     const mergedRefs = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     const { ref: containerRef, borderBoxSize } = (0, fuselage_hooks_1.useResizeObserver)();
@@ -711,7 +735,7 @@ const AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ value, filt
                                 : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled, ...props }), selected.map((itemSelected) => RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { value: itemSelected.value, children: itemSelected.label, onClick: handleRemove }, itemSelected.value)))] }) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-autocomplete__addon": true, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                         ? 'cross'
                         : 'magnifier', size: 'x20', color: 'default' }) }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: optionsAreVisible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(Options_1.Options, { width: borderBoxSize.inlineSize, onSelect: handleSelect, renderItem: renderItem, renderEmpty: renderEmpty, cursor: cursor, value: value, options: memoizedOptions }) })] }));
-});
+}
 exports["default"] = AutoComplete;
 
 
@@ -944,32 +968,27 @@ Object.defineProperty(exports, "Banner", ({ enumerable: true, get: function () {
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Box = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const useArrayLikeClassNameProp_1 = __webpack_require__(/*! ../../hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
 const useBoxOnlyProps_1 = __webpack_require__(/*! ../../hooks/useBoxOnlyProps */ "./src/hooks/useBoxOnlyProps.ts");
 const BoxTransforms_1 = __webpack_require__(/*! ./BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
 const useStylingProps_1 = __webpack_require__(/*! ./useStylingProps */ "./src/components/Box/useStylingProps.ts");
-exports.Box = (0, react_1.forwardRef)(function Box({ is = 'div', children, ...props }, ref) {
-    const propsWithRef = props;
-    if (ref) {
-        propsWithRef.ref = ref;
-    }
-    let propsWithStringClassName = (0, useArrayLikeClassNameProp_1.useArrayLikeClassNameProp)(propsWithRef);
+function Box({ is = 'div', ...props }) {
+    let propsWithStringClassName = (0, useArrayLikeClassNameProp_1.useArrayLikeClassNameProp)(props);
     const transformFn = (0, BoxTransforms_1.useBoxTransform)();
     if (transformFn) {
         propsWithStringClassName = transformFn(propsWithStringClassName);
     }
     const propsWithoutStylingProps = (0, useStylingProps_1.useStylingProps)(propsWithStringClassName);
     const propsWithoutBoxOnlyProps = (0, useBoxOnlyProps_1.useBoxOnlyProps)(propsWithoutStylingProps);
-    const element = (0, react_1.createElement)(is, propsWithoutBoxOnlyProps, children);
+    const element = (0, react_1.createElement)(is, propsWithoutBoxOnlyProps);
     if (transformFn) {
         return (0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: element, value: null });
     }
     return element;
-});
-exports["default"] = (0, react_1.memo)(exports.Box);
+}
+exports["default"] = (0, react_1.memo)(Box);
 
 
 /***/ },
@@ -1530,7 +1549,6 @@ Object.defineProperty(exports, "Bubble", ({ enumerable: true, get: function () {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 const _1 = __webpack_require__(/*! . */ "./src/components/Button/index.ts");
 const getSize = ({ tiny, mini, small }) => {
@@ -1542,7 +1560,9 @@ const getSize = ({ tiny, mini, small }) => {
     }
     return 'x20';
 };
-const ActionButton = (0, react_1.forwardRef)(({ icon, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(_1.Button, { ref: ref, square: true, flexShrink: 0, ...props, children: [children, (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: getSize(props) })] })));
+function ActionButton({ icon, children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(_1.Button, { square: true, flexShrink: 0, ...props, children: [children, (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: getSize(props) })] }));
+}
 exports["default"] = ActionButton;
 
 
@@ -1560,7 +1580,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const Button = (0, react_1.forwardRef)(function Button({ primary, secondary, danger, warning, success, external, icon, is = 'button', rel: _rel, tiny, mini, small, medium, large, square, loading, disabled, children, ...props }, ref) {
+function Button({ ref, primary, secondary, danger, warning, success, external, icon, is = 'button', rel: _rel, tiny, mini, small, medium, large, square, loading, disabled, children, ...props }) {
     const extraProps = (is === 'a' && {
         rel: external ? 'noopener noreferrer' : undefined,
         target: external ? '_blank' : undefined,
@@ -1586,7 +1606,7 @@ const Button = (0, react_1.forwardRef)(function Button({ primary, secondary, dan
         return {};
     }, [primary, secondary, danger, warning, success]);
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: is, type: 'button', "rcx-button": true, ...kindAndVariantProps, "rcx-button--small": small, "rcx-button--medium": medium, "rcx-button--large": large, "rcx-button--square": square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, "rcx-button--small-square": small && square, "rcx-button--medium-square": medium && square, "rcx-button--large-square": large && square, "rcx-button--loading": loading, disabled: disabled || loading, ref: ref, ...extraProps, ...props, children: (0, jsx_runtime_1.jsxs)("span", { className: 'rcx-button--content', children: [icon && !loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: icon, mie: 4 }), loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: 'loading', mie: 4 }), children] }) }));
-});
+}
 exports["default"] = Button;
 
 
@@ -1619,7 +1639,7 @@ const getPressedClass = (variant) => {
     ];
     return variantClass;
 };
-const IconButton = (0, react_1.forwardRef)(({ icon, primary, info, secondary, danger, warning, success, mini, large, tiny, small, medium, pressed, children, ...props }, ref) => {
+function IconButton({ icon, primary, info, secondary, danger, warning, success, mini, large, tiny, small, medium, pressed, children, ...props }) {
     const variant = (0, react_1.useMemo)(() => (secondary && danger && 'secondary-danger') ||
         (secondary && warning && 'secondary-warning') ||
         (secondary && success && 'secondary-success') ||
@@ -1654,8 +1674,8 @@ const IconButton = (0, react_1.forwardRef)(({ icon, primary, info, secondary, da
         (tiny && 'x16') ||
         (mini && 'x12') ||
         'x28';
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'button', type: 'button', "rcx-button": true, "rcx-button--icon": true, "rcx-button--square": true, ...kindAndVariantProps, ...getSizeClass(), "rcx-button--icon-pressed": pressed, ref: ref, ...props, children: [(0, react_1.isValidElement)(icon) ? (icon) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: getIconSize() })), children] }));
-});
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'button', type: 'button', "rcx-button": true, "rcx-button--icon": true, "rcx-button--square": true, ...kindAndVariantProps, ...getSizeClass(), "rcx-button--icon-pressed": pressed, ...props, children: [(0, react_1.isValidElement)(icon) ? (icon) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: getIconSize() })), children] }));
+}
 exports["default"] = IconButton;
 
 
@@ -1692,9 +1712,8 @@ Object.defineProperty(exports, "IconButton", ({ enumerable: true, get: function
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-const ButtonGroup = (0, react_1.forwardRef)(function ButtonGroup({ align = 'start', children, stretch, vertical, wrap, small, large, className, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
+function ButtonGroup({ align = 'start', children, stretch, vertical, wrap, small, large, className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: [
             'rcx-button-group',
             stretch && 'rcx-button-group--stretch',
             vertical && 'rcx-button-group--vertical',
@@ -1706,7 +1725,7 @@ const ButtonGroup = (0, react_1.forwardRef)(function ButtonGroup({ align = 'star
         ]
             .filter(Boolean)
             .join(' '), role: 'group', ...props, children: children }));
-});
+}
 exports["default"] = ButtonGroup;
 
 
@@ -2007,7 +2026,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const CheckBox = (0, react_1.forwardRef)(function CheckBox({ indeterminate, onChange, className, labelChildren, ...props }, ref) {
+function CheckBox({ ref, indeterminate, onChange, className, labelChildren, ...props }) {
     const innerRef = (0, react_1.useRef)(null);
     const mergedRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     (0, react_1.useLayoutEffect)(() => {
@@ -2022,7 +2041,7 @@ const CheckBox = (0, react_1.forwardRef)(function CheckBox({ indeterminate, onCh
         onChange?.call(innerRef.current, event);
     }, [innerRef, indeterminate, onChange]);
     return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'label', className: className, "rcx-check-box": true, children: [labelChildren, (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'input', type: 'checkbox', "rcx-check-box__input": true, ref: mergedRef, onChange: handleChange, ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-check-box__fake": true, "aria-hidden": 'true' })] }));
-});
+}
 exports["default"] = CheckBox;
 
 
@@ -2181,9 +2200,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-const Contextualbar = (0, react_1.forwardRef)(function Contextualbar({ children, width, position, bg = 'room', ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(__1.Box, { 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 }));
-});
+function Contextualbar({ width, position, bg = 'room', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(__1.Box, { "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 }));
+}
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
 
@@ -2251,9 +2270,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarContent = (0, react_1.forwardRef)(function ContextualbarContent(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ref: ref, "rcx-vertical-bar__content": true, paddingInline: 24, display: 'flex', flexDirection: 'column', overflowY: 'hidden', height: 'full', ...props }));
-});
+function ContextualbarContent(props) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__content": true, paddingInline: 24, display: 'flex', flexDirection: 'column', overflowY: 'hidden', height: 'full', ...props }));
+}
 exports["default"] = (0, react_1.memo)(ContextualbarContent);
 
 
@@ -2274,9 +2293,9 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 const ContextualbarContent_1 = __importDefault(__webpack_require__(/*! ./ContextualbarContent */ "./src/components/Contextualbar/ContextualbarContent.tsx"));
-const ContextualbarEmptyContent = (0, react_1.forwardRef)(function ContextualbarEmptyContent({ icon = 'magnifier', title = 'Nothing Found', subtitle, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(ContextualbarContent_1.default, { justifyContent: 'center', ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(__1.States, { children: [(0, jsx_runtime_1.jsx)(__1.StatesIcon, { name: icon }), (0, jsx_runtime_1.jsx)(__1.StatesTitle, { children: title }), subtitle && (0, jsx_runtime_1.jsx)(__1.StatesSubtitle, { children: subtitle })] }) }));
-});
+function ContextualbarEmptyContent({ icon = 'magnifier', title = 'Nothing Found', subtitle, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(ContextualbarContent_1.default, { justifyContent: 'center', ...props, children: (0, jsx_runtime_1.jsxs)(__1.States, { children: [(0, jsx_runtime_1.jsx)(__1.StatesIcon, { name: icon }), (0, jsx_runtime_1.jsx)(__1.StatesTitle, { children: title }), subtitle && (0, jsx_runtime_1.jsx)(__1.StatesSubtitle, { children: subtitle })] }) }));
+}
 exports["default"] = (0, react_1.memo)(ContextualbarEmptyContent);
 
 
@@ -2293,9 +2312,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-const ContextualbarFooter = (0, react_1.forwardRef)(function ContextualbarFooter({ children, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(__1.Box, { ref: ref, p: 24, ...props, children: children }));
-});
+function ContextualbarFooter(props) {
+    return (0, jsx_runtime_1.jsx)(__1.Box, { p: 24, ...props });
+}
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
 
@@ -2347,9 +2366,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarSection = (0, react_1.forwardRef)(function ContextualbarSection(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ref: ref, "rcx-vertical-bar__section": true, pi: 24, pb: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
-});
+function ContextualbarSection(props) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, pi: 24, pb: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
+}
 exports["default"] = (0, react_1.memo)(ContextualbarSection);
 
 
@@ -2448,9 +2467,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const Contextualbar = (0, react_1.forwardRef)(function Contextualbar({ children, width, position, bg = 'room', ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { 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 }));
-});
+function Contextualbar({ width, position, bg = 'room', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "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 }));
+}
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
 
@@ -2518,9 +2537,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarContent = (0, react_1.forwardRef)(function ContextualbarContent(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ref: ref, "rcx-vertical-bar__content": true, paddingInline: 24, display: 'flex', flexDirection: 'column', overflowY: 'hidden', height: 'full', ...props }));
-});
+function ContextualbarContent(props) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__content": true, paddingInline: 24, display: 'flex', flexDirection: 'column', overflowY: 'hidden', height: 'full', ...props }));
+}
 exports["default"] = (0, react_1.memo)(ContextualbarContent);
 
 
@@ -2541,9 +2560,9 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const States_1 = __webpack_require__(/*! ../States */ "./src/components/States/index.ts");
 const ContextualbarContent_1 = __importDefault(__webpack_require__(/*! ./ContextualbarContent */ "./src/components/ContextualbarV2/ContextualbarContent.tsx"));
-const ContextualbarEmptyContent = (0, react_1.forwardRef)(function ContextualbarEmptyContent({ icon = 'magnifier', title = 'Nothing Found', subtitle, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(ContextualbarContent_1.default, { justifyContent: 'center', ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(States_1.States, { children: [(0, jsx_runtime_1.jsx)(States_1.StatesIcon, { name: icon }), (0, jsx_runtime_1.jsx)(States_1.StatesTitle, { children: title }), subtitle && (0, jsx_runtime_1.jsx)(States_1.StatesSubtitle, { children: subtitle })] }) }));
-});
+function ContextualbarEmptyContent({ icon = 'magnifier', title = 'Nothing Found', subtitle, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(ContextualbarContent_1.default, { justifyContent: 'center', ...props, children: (0, jsx_runtime_1.jsxs)(States_1.States, { children: [(0, jsx_runtime_1.jsx)(States_1.StatesIcon, { name: icon }), (0, jsx_runtime_1.jsx)(States_1.StatesTitle, { children: title }), subtitle && (0, jsx_runtime_1.jsx)(States_1.StatesSubtitle, { children: subtitle })] }) }));
+}
 exports["default"] = (0, react_1.memo)(ContextualbarEmptyContent);
 
 
@@ -2560,9 +2579,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarFooter = (0, react_1.forwardRef)(function ContextualbarFooter({ children, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ref: ref, pi: 16, pb: 20, ...props, children: children }));
-});
+function ContextualbarFooter(props) {
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { pi: 16, pb: 20, ...props });
+}
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
 
@@ -2616,9 +2635,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarSection = (0, react_1.forwardRef)(function ContextualbarSection(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ref: ref, "rcx-vertical-bar__section": true, p: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
-});
+function ContextualbarSection(props) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, p: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
+}
 exports["default"] = (0, react_1.memo)(ContextualbarSection);
 
 
@@ -2755,13 +2774,12 @@ Object.defineProperty(exports, "Divider", ({ enumerable: true, get: function ()
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-const react_1 = __webpack_require__(/*! react */ "react");
 const DropdownDesktopWrapper_1 = __webpack_require__(/*! ./DropdownDesktopWrapper */ "./src/components/Dropdown/DropdownDesktopWrapper.tsx");
 const DropdownMobile_1 = __webpack_require__(/*! ./DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
-const Dropdown = (0, react_1.forwardRef)(function Dropdown({ children, reference, placement = 'bottom-start' }, ref) {
+function Dropdown({ ref, children, reference, placement = 'bottom-start', }) {
     const notSmall = (0, fuselage_hooks_1.useMediaQuery)('(min-width: 500px)');
     return notSmall ? ((0, jsx_runtime_1.jsx)(DropdownDesktopWrapper_1.DropdownDesktopWrapper, { reference: reference, children: children, placement: placement, ref: ref })) : ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { children: children, ref: ref }));
-});
+}
 exports["default"] = Dropdown;
 
 
@@ -2775,13 +2793,12 @@ exports["default"] = Dropdown;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.DropdownDesktop = void 0;
+exports.DropdownDesktop = DropdownDesktop;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-exports.DropdownDesktop = (0, react_1.forwardRef)(function DropdownDesktop({ children, style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(__1.Tile, { style: style, ref: ref, elevation: '2', pi: '0', pb: '0', display: 'flex', flexDirection: 'column', overflow: 'auto', "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 12, children: style?.visibility === 'hidden' ? null : children }) }));
-});
+function DropdownDesktop({ children, style, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(__1.Tile, { style: style, elevation: '2', pi: '0', pb: '0', display: 'flex', flexDirection: 'column', overflow: 'auto', "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 12, children: style?.visibility === 'hidden' ? null : children }) }));
+}
 
 
 /***/ },
@@ -2794,17 +2811,16 @@ exports.DropdownDesktop = (0, react_1.forwardRef)(function DropdownDesktop({ chi
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.DropdownDesktopWrapper = void 0;
+exports.DropdownDesktopWrapper = DropdownDesktopWrapper;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-const react_1 = __webpack_require__(/*! react */ "react");
 const DropdownDesktop_1 = __webpack_require__(/*! ./DropdownDesktop */ "./src/components/Dropdown/DropdownDesktop.tsx");
-exports.DropdownDesktopWrapper = (0, react_1.forwardRef)(function DropdownDesktopWrapper({ children, reference, placement = 'bottom-start', ...props }, ref) {
+function DropdownDesktopWrapper({ ref, reference, placement = 'bottom-start', ...props }) {
     const { style } = (0, fuselage_hooks_1.usePosition)(reference, ref, {
         placement,
     });
-    return ((0, jsx_runtime_1.jsx)(DropdownDesktop_1.DropdownDesktop, { style: style, children: children, ref: ref, ...props }));
-});
+    return (0, jsx_runtime_1.jsx)(DropdownDesktop_1.DropdownDesktop, { style: style, ref: ref, ...props });
+}
 
 
 /***/ },
@@ -2817,13 +2833,12 @@ exports.DropdownDesktopWrapper = (0, react_1.forwardRef)(function DropdownDeskto
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.DropdownMobile = void 0;
+exports.DropdownMobile = DropdownMobile;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-exports.DropdownMobile = (0, react_1.forwardRef)(function DropdownMobile({ children, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(__1.Tile, { ref: ref, elevation: '2', pi: '0', pb: '0', w: '100vw', maxHeight: '80%', position: 'fixed', display: 'flex', flexDirection: 'column', overflow: 'auto', style: { bottom: 0, left: 0 }, zIndex: 2, "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 16, children: children }) }));
-});
+function DropdownMobile({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(__1.Tile, { elevation: '2', pi: '0', pb: '0', w: '100vw', maxHeight: '80%', position: 'fixed', display: 'flex', flexDirection: 'column', overflow: 'auto', style: { bottom: 0, left: 0 }, zIndex: 2, "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 16, children: children }) }));
+}
 
 
 /***/ },
@@ -2855,12 +2870,10 @@ Object.defineProperty(exports, "Dropdown", ({ enumerable: true, get: function ()
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const type = 'email';
-const EmailInput = (0, react_1.forwardRef)(function EmailInput(props, ref) {
-    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: type, ref: ref, ...props });
-});
+function EmailInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'email', ...props });
+}
 exports["default"] = EmailInput;
 
 
@@ -3001,18 +3014,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const WithErrorWrapper_1 = __importDefault(__webpack_require__(/*! ../../helpers/WithErrorWrapper */ "./src/helpers/WithErrorWrapper.tsx"));
 const Label_1 = __webpack_require__(/*! ../Label */ "./src/components/Label/index.ts");
 const Field_1 = __webpack_require__(/*! ./Field */ "./src/components/Field/Field.tsx");
-const FieldLabel = (0, react_1.forwardRef)(function FieldLabel(props, ref) {
-    const component = (0, jsx_runtime_1.jsx)(Label_1.Label, { "rcx-field__label": true, ...props, ref: ref });
+function FieldLabel(props) {
+    const component = (0, jsx_runtime_1.jsx)(Label_1.Label, { "rcx-field__label": true, ...props });
     if (true) {
         return ((0, jsx_runtime_1.jsx)(WithErrorWrapper_1.default, { context: Field_1.FieldContext, parentComponent: 'Field', componentName: FieldLabel.name, children: component }));
     }
     // removed by dead control flow
 
-});
+}
 exports["default"] = FieldLabel;
 
 
@@ -3391,11 +3403,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const icons_1 = __importDefault(__webpack_require__(/*! @rocket.chat/icons */ "@rocket.chat/icons"));
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const Icon = (0, react_1.forwardRef)(function Icon({ name, size, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-icon": true, "rcx-icon--name": name, children: icons_1.default[name], "aria-hidden": 'true', fontSize: size, ref: ref, ...props }));
-});
+function Icon({ name, size, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-icon": true, "rcx-icon--name": name, children: icons_1.default[name], "aria-hidden": 'true', fontSize: size, ...props }));
+}
 exports["default"] = Icon;
 
 
@@ -3428,11 +3439,10 @@ Object.defineProperty(exports, "Icon", ({ enumerable: true, get: function () { r
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const Input = (0, react_1.forwardRef)(function Input(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'input', animated: true, "rcx-input-box": true, ref: ref, ...props });
-});
+function Input(props) {
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'input', animated: true, "rcx-input-box": true, ...props });
+}
 exports["default"] = Input;
 
 
@@ -3456,7 +3466,7 @@ const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.t
 const Input_1 = __importDefault(__webpack_require__(/*! ./Input */ "./src/components/InputBox/Input.tsx"));
 const InputBoxAddon_1 = __importDefault(__webpack_require__(/*! ./InputBoxAddon */ "./src/components/InputBox/InputBoxAddon.tsx"));
 const InputBoxWrapper_1 = __importDefault(__webpack_require__(/*! ./InputBoxWrapper */ "./src/components/InputBox/InputBoxWrapper.tsx"));
-const InputBox = (0, react_1.forwardRef)(function InputBox({ className, addon, startAddon, endAddon, error, hidden, invisible, multiple, placeholderVisible, type = 'text', small, onChange, ...props }, ref) {
+function InputBox({ ref, className, addon, startAddon, endAddon, error, hidden, invisible, multiple, placeholderVisible, type = 'text', small, onChange, ...props }) {
     const innerRef = (0, react_1.useRef)(null);
     const mergedRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     let defaultAddon = endAddon ?? addon;
@@ -3494,7 +3504,7 @@ const InputBox = (0, react_1.forwardRef)(function InputBox({ className, addon, s
         ], hidden: hidden, invisible: invisible, children: [startAddon && (0, jsx_runtime_1.jsx)(InputBoxAddon_1.default, { children: startAddon }), (0, jsx_runtime_1.jsx)(Input_1.default, { is: (type === 'textarea' && 'textarea') ||
                     (type === 'select' && 'select') ||
                     'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--undecorated": true, "rcx-input-box--small": small, ...props }), defaultAddon && (0, jsx_runtime_1.jsx)(InputBoxAddon_1.default, { children: defaultAddon })] }));
-});
+}
 exports["default"] = InputBox;
 
 
@@ -3509,11 +3519,10 @@ exports["default"] = InputBox;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const InputBoxAddon = (0, react_1.forwardRef)(function InputBoxAddon(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-input-box__addon": true, ref: ref, ...props });
-});
+function InputBoxAddon(props) {
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-input-box__addon": true, ...props });
+}
 exports["default"] = InputBoxAddon;
 
 
@@ -3587,11 +3596,11 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const LabelContext = (0, react_1.createContext)(false);
-const Label = (0, react_1.forwardRef)(function Label({ disabled, is, required, children, ...props }, ref) {
+function Label({ disabled, is, required, children, ...props }) {
     const isInsideLabel = (0, react_1.useContext)(LabelContext);
     const component = is || (isInsideLabel && 'span') || 'label';
-    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: component, "rcx-label": true, "rcx-label--disabled": disabled, ...props, ref: ref, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-label__required": true, mis: 'x4', "aria-hidden": 'true', children: "*" }))] }) }));
-});
+    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: component, "rcx-label": true, "rcx-label--disabled": disabled, ...props, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-label__required": true, mis: 'x4', "aria-hidden": 'true', children: "*" }))] }) }));
+}
 exports["default"] = Label;
 
 
@@ -3851,8 +3860,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_2 = __webpack_require__(/*! react */ "react");
 const prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
-const MenuOption = (0, react_2.forwardRef)(function MenuOption({ is: Tag = 'li', id, children, focus, selected, className, title, disabled, variant, onClick, ...props }, ref) {
-    return ((0, react_1.createElement)(Tag, { ...props, key: id, id: id, ref: ref, "aria-selected": !!selected, "aria-disabled": !!disabled, title: title, onClick: (e) => {
+function MenuOption({ is: Tag = 'li', id, children, focus, selected, className, title, disabled, variant, onClick, ...props }) {
+    return ((0, react_1.createElement)(Tag, { ...props, key: id, id: id, "aria-selected": !!selected, "aria-disabled": !!disabled, title: title, onClick: (e) => {
             if (disabled) {
                 (0, prevent_1.prevent)(e);
                 return;
@@ -3868,7 +3877,7 @@ const MenuOption = (0, react_2.forwardRef)(function MenuOption({ is: Tag = 'li',
         ]
             .filter(Boolean)
             .join(' ') }, children));
-});
+}
 exports["default"] = (0, react_2.memo)(MenuOption);
 
 
@@ -4134,10 +4143,9 @@ exports["default"] = MenuSection;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
-const Message = (0, react_1.forwardRef)(function Message({ className, clickable, sequential, isSelected, isEditing, isPending, highlight, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, prependClassName_1.prependClassName)(className, [
+function Message({ className, clickable, sequential, isSelected, isEditing, isPending, highlight, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, prependClassName_1.prependClassName)(className, [
             'rcx-message',
             (clickable || props.onClick) && 'rcx-message--clickable',
             sequential && 'rcx-message--sequential',
@@ -4148,7 +4156,7 @@ const Message = (0, react_1.forwardRef)(function Message({ className, clickable,
         ]
             .filter(Boolean)
             .join(' ')), ...props }));
-});
+}
 exports["default"] = Message;
 
 
@@ -4163,9 +4171,10 @@ exports["default"] = Message;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const MessageBlock = (0, react_1.forwardRef)(({ className: _className, fixedWidth, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-message-block": true, "rcx-message-block--width-fixed": fixedWidth, ref: ref, ...props })));
+function MessageBlock({ className: _className, fixedWidth, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-message-block": true, "rcx-message-block--width-fixed": fixedWidth, ...props }));
+}
 exports["default"] = MessageBlock;
 
 
@@ -4765,10 +4774,9 @@ exports["default"] = MessageName;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-const MessageNameContainer = (0, react_1.forwardRef)(function MessageNameContainer(props, ref) {
-    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, className: 'rcx-box rcx-box--full rcx-message-header__name-container', ...props }));
-});
+function MessageNameContainer(props) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: 'rcx-box rcx-box--full rcx-message-header__name-container', ...props }));
+}
 exports["default"] = MessageNameContainer;
 
 
@@ -4786,18 +4794,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const MessageReactionCounter_1 = __importDefault(__webpack_require__(/*! ./MessageReactionCounter */ "./src/components/Message/MessageReactions/MessageReactionCounter.tsx"));
 const MessageReactionEmoji_1 = __importDefault(__webpack_require__(/*! ./MessageReactionEmoji */ "./src/components/Message/MessageReactions/MessageReactionEmoji.tsx"));
-const MessageReaction = (0, react_1.forwardRef)(function Reaction({ name, counter, mine, children, className, ...props }, ref) {
+function MessageReaction({ name, counter, mine, children, className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: [
             `rcx-message-reactions__reaction`,
             mine && 'rcx-message-reactions__reaction--mine',
             className,
         ]
             .filter(Boolean)
-            .join(' '), ref: ref, role: 'button', tabIndex: 0, ...props, children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name && (0, jsx_runtime_1.jsx)(MessageReactionEmoji_1.default, { name: name }), counter && (0, jsx_runtime_1.jsx)(MessageReactionCounter_1.default, { counter: counter })] })) }));
-});
+            .join(' '), role: 'button', tabIndex: 0, ...props, children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name && (0, jsx_runtime_1.jsx)(MessageReactionEmoji_1.default, { name: name }), counter && (0, jsx_runtime_1.jsx)(MessageReactionCounter_1.default, { counter: counter })] })) }));
+}
 exports["default"] = MessageReaction;
 
 
@@ -4870,11 +4877,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const MessageBlock_1 = __importDefault(__webpack_require__(/*! ../MessageBlock */ "./src/components/Message/MessageBlock.tsx"));
-const MessageReactions = (0, react_1.forwardRef)(function MessageReactions(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(MessageBlock_1.default, { className: 'rcx-message-reactions', children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: 'rcx-message-reactions__container', ...props }) }));
-});
+function MessageReactions(props) {
+    return ((0, jsx_runtime_1.jsx)(MessageBlock_1.default, { className: 'rcx-message-reactions', children: (0, jsx_runtime_1.jsx)("div", { className: 'rcx-message-reactions__container', ...props }) }));
+}
 exports["default"] = MessageReactions;
 
 
@@ -4947,11 +4953,10 @@ exports["default"] = MessageRoles;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 __webpack_require__(/*! ./MessageStatusIndicator.styles.scss */ "./src/components/Message/MessageStatusIndicator/MessageStatusIndicator.styles.scss");
-const MessageStatusIndicator = (0, react_1.forwardRef)(function MessageStatusIndicator(props, ref) {
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, className: 'rcx-message-status-indicator', ...props });
-});
+function MessageStatusIndicator(props) {
+    return (0, jsx_runtime_1.jsx)("div", { className: 'rcx-message-status-indicator', ...props });
+}
 exports["default"] = MessageStatusIndicator;
 
 
@@ -5187,11 +5192,10 @@ exports["default"] = MessageTimestamp;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const ButtonGroup_1 = __webpack_require__(/*! ../../ButtonGroup */ "./src/components/ButtonGroup/index.ts");
-const MessageToolbar = (0, react_1.forwardRef)(function MessageToolbar(props, ref) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-message-toolbar', children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { role: 'toolbar', ref: ref, small: true, ...props }) }));
-});
+function MessageToolbar(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-message-toolbar', children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { role: 'toolbar', small: true, ...props }) }));
+}
 exports["default"] = MessageToolbar;
 
 
@@ -5206,11 +5210,10 @@ exports["default"] = MessageToolbar;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Button_1 = __webpack_require__(/*! ../../Button */ "./src/components/Button/index.ts");
-const MessageToolbarItem = (0, react_1.forwardRef)(function MessageToolbarItem(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Button_1.IconButton, { ref: ref, small: true, ...props });
-});
+function MessageToolbarItem(props) {
+    return (0, jsx_runtime_1.jsx)(Button_1.IconButton, { small: true, ...props });
+}
 exports["default"] = MessageToolbarItem;
 
 
@@ -5225,16 +5228,15 @@ exports["default"] = MessageToolbarItem;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-const MessageToolbarWrapper = (0, react_1.forwardRef)(function MessageToolbarWrapper({ className, visible, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
+function MessageToolbarWrapper({ className, visible, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: [
             'rcx-box rcx-box--full rcx-message-toolbar__wrapper',
             visible && 'rcx-message-toolbar__wrapper--visible',
             className,
         ]
             .filter(Boolean)
             .join(' '), ...props }));
-});
+}
 exports["default"] = MessageToolbarWrapper;
 
 
@@ -5583,16 +5585,16 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const Modal = (0, react_1.forwardRef)(({ children, wrapper = Box_1.Box, wrapperFunction, ...props }, ref) => {
+const Modal = ({ children, wrapper = Box_1.Box, wrapperFunction, ...props }) => {
     const wrapperProps = {
         children,
         className: 'rcx-modal__inner',
         elevation: '2',
     };
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'dialog', open: true, "aria-modal": 'true', "rcx-modal": true, ref: ref, ...props, children: wrapperFunction
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'dialog', open: true, "aria-modal": 'true', "rcx-modal": true, ...props, children: wrapperFunction
             ? wrapperFunction(wrapperProps)
             : (0, react_1.createElement)(wrapper, wrapperProps) }));
-});
+};
 exports["default"] = Modal;
 
 
@@ -5868,7 +5870,6 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 const react_1 = __webpack_require__(/*! react */ "react");
-const isForwardRefType_1 = __webpack_require__(/*! ../../helpers/isForwardRefType */ "./src/helpers/isForwardRefType.ts");
 const prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
 const AnimatedVisibility_1 = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
@@ -5881,7 +5882,7 @@ const Position_1 = __webpack_require__(/*! ../Position */ "./src/components/Posi
 const SelectAddon_1 = __importDefault(__webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx"));
 const MultiSelectAnchor_1 = __importDefault(__webpack_require__(/*! ./MultiSelectAnchor */ "./src/components/MultiSelect/MultiSelectAnchor.tsx"));
 const SelectedOptions_1 = __webpack_require__(/*! ./SelectedOptions */ "./src/components/MultiSelect/SelectedOptions.tsx");
-const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options = [], error, disabled, anchor: Anchor = MultiSelectAnchor_1.default, onChange = () => { }, getLabel = ([, label] = ['', '']) => label, getValue = ([value]) => value, placeholder, renderOptions: _Options = Options_1.Options, renderItem, customEmpty, renderSelected: RenderSelected, addonIcon, ...props }, ref) => {
+function MultiSelect({ ref, value, filter, setFilter, options = [], error, disabled, anchor: Anchor = MultiSelectAnchor_1.default, onChange = () => { }, getLabel = ([, label] = ['', '']) => label, getValue = ([value]) => value, placeholder, renderOptions: _Options = Options_1.Options, renderItem, customEmpty, renderSelected: RenderSelected, addonIcon, ...props }) {
     const [internalValue, setInternalValue] = (0, react_1.useState)(value || []);
     (0, react_1.useEffect)(() => setInternalValue(value || []), [value]);
     const [currentOptionValue, setCurrentOption] = (0, react_1.useState)();
@@ -5916,15 +5917,6 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
     const anchorRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     const { ref: containerRef, borderBoxSize } = (0, fuselage_hooks_1.useResizeObserver)();
     (0, fuselage_hooks_1.useOutsideClick)([containerRef], removeFocusClass);
-    const renderAnchor = (params) => {
-        if ((0, isForwardRefType_1.isForwardRefType)(Anchor)) {
-            return (0, jsx_runtime_1.jsx)(Anchor, { ...params });
-        }
-        if (typeof Anchor === 'function') {
-            return Anchor(params);
-        }
-        return null;
-    };
     const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
             return hide();
@@ -5934,26 +5926,7 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
     });
     const listboxId = props.id ? `${props.id}-listbox` : undefined;
     const { id, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, ...containerProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, disabled: disabled, ...containerProps, children: [(0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(Flex_1.FlexContainer, { children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [renderAnchor({
-                                            'ref': anchorRef,
-                                            'children': internalValue.length === 0 ? placeholder : null,
-                                            'disabled': disabled ?? false,
-                                            'onClick': show,
-                                            'onBlur': hide,
-                                            'onKeyDown': handleKeyDown,
-                                            'onKeyUp': handleKeyUp,
-                                            'role': 'combobox',
-                                            'aria-expanded': visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE,
-                                            'aria-haspopup': 'listbox',
-                                            'aria-controls': listboxId,
-                                            id,
-                                            name,
-                                            'aria-label': ariaLabel,
-                                            'aria-labelledby': ariaLabelledBy,
-                                            'aria-describedby': ariaDescribedBy,
-                                            'aria-invalid': ariaInvalid,
-                                            'aria-required': ariaRequired,
-                                        }), internalValue.map((value) => {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, disabled: disabled, ...containerProps, children: [(0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(Flex_1.FlexContainer, { children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(Anchor, { ref: anchorRef, disabled: disabled ?? false, onClick: show, onBlur: hide, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, role: 'combobox', "aria-expanded": visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE, "aria-haspopup": 'listbox', "aria-controls": listboxId, id: id, name: name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, children: internalValue.length === 0 ? placeholder : null }), internalValue.map((value) => {
                                             const currentOption = options.find(([val]) => val === value);
                                             return RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { value: value, label: getLabel(currentOption), onMouseDown: (e) => {
                                                     (0, prevent_1.prevent)(e);
@@ -5967,7 +5940,7 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
                                         })] }) }) }) }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 0, shrink: 0, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                                 ? 'chevron-up'
                                 : addonIcon || 'chevron-down', size: 'x20' }) }) }) }), (0, jsx_runtime_1.jsx)(AnimatedVisibility_1.AnimatedVisibility, { visibility: visible, children: (0, jsx_runtime_1.jsx)(Position_1.Position, { anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, renderItem: renderItem || Option_1.CheckOption, id: listboxId, options: filteredOptions, onSelect: internalChanged, cursor: cursor, customEmpty: customEmpty }) }) })] }));
-});
+}
 exports["default"] = MultiSelect;
 
 
@@ -5985,11 +5958,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const SelectFocus_1 = __importDefault(__webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx"));
-const MultiSelectAnchor = (0, react_1.forwardRef)(function MultiSelectAnchor({ children, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(SelectFocus_1.default, { "rcx-input-box--undecorated": true, ref: ref, order: 1, ...props, children: children }));
-});
+function MultiSelectAnchor(props) {
+    return (0, jsx_runtime_1.jsx)(SelectFocus_1.default, { "rcx-input-box--undecorated": true, order: 1, ...props });
+}
 exports["default"] = MultiSelectAnchor;
 
 
@@ -6010,10 +5982,10 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const MultiSelect_1 = __importDefault(__webpack_require__(/*! ./MultiSelect */ "./src/components/MultiSelect/MultiSelect.tsx"));
 const MultiSelectFilteredAnchor_1 = __importDefault(__webpack_require__(/*! ./MultiSelectFilteredAnchor */ "./src/components/MultiSelect/MultiSelectFilteredAnchor.tsx"));
-const MultiSelectFiltered = (0, react_1.forwardRef)(({ options, placeholder, filter: propFilter, setFilter: propSetFilter, ...props }, ref) => {
+function MultiSelectFiltered({ options, placeholder, filter: propFilter, setFilter: propSetFilter, ...props }) {
     const [filter, setFilter] = (0, react_1.useState)('');
-    return ((0, jsx_runtime_1.jsx)(MultiSelect_1.default, { ...props, ref: ref, filter: propFilter || filter, setFilter: propSetFilter || setFilter, options: options, anchor: (params) => ((0, jsx_runtime_1.jsx)(MultiSelectFilteredAnchor_1.default, { placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter, ...params })) }));
-});
+    return ((0, jsx_runtime_1.jsx)(MultiSelect_1.default, { ...props, filter: propFilter || filter, setFilter: propSetFilter || setFilter, options: options, anchor: (params) => ((0, jsx_runtime_1.jsx)(MultiSelectFilteredAnchor_1.default, { placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter, ...params })) }));
+}
 exports["default"] = MultiSelectFiltered;
 
 
@@ -6028,12 +6000,11 @@ exports["default"] = MultiSelectFiltered;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Flex_1 = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const MultiSelectFilteredAnchor = (0, react_1.forwardRef)(function MultiSelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, order: 1, autoComplete: 'off' }) }));
-});
+function MultiSelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, order: 1, autoComplete: 'off' }) }));
+}
 exports["default"] = MultiSelectFilteredAnchor;
 
 
@@ -6118,9 +6089,10 @@ exports["default"] = NavBarDivider;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const ButtonGroup_1 = __webpack_require__(/*! ../ButtonGroup */ "./src/components/ButtonGroup/index.ts");
-const NavBarGroup = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { className: 'rcx-navbar-group', ref: ref, ...props })));
+function NavBarGroup(props) {
+    return (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { className: 'rcx-navbar-group', ...props });
+}
 exports["default"] = NavBarGroup;
 
 
@@ -6135,17 +6107,15 @@ exports["default"] = NavBarGroup;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
 const patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
 const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
-const NavBarItem = (0, react_1.forwardRef)(function NavBarItem({ children, icon, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon ? ((0, jsx_runtime_1.jsx)(Button_1.IconButton, { ref: ref, "rcx-navbar-item": true, icon: icon, small: true, ...props })) : ((0, patchChildren_1.patchChildren)(children, (childProps) => ({
+function NavBarItem({ children, icon, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon ? ((0, jsx_runtime_1.jsx)(Button_1.IconButton, { "rcx-navbar-item": true, icon: icon, small: true, ...props })) : ((0, patchChildren_1.patchChildren)(children, (childProps) => ({
             className: (0, appendClassName_1.appendClassName)(childProps.className, 'rcx-navbar-item'),
-            ref,
             ...props,
         }))) }));
-});
+}
 exports["default"] = NavBarItem;
 
 
@@ -6170,7 +6140,7 @@ const isNavBarGroup = (child) => {
     if (!(0, react_1.isValidElement)(child))
         return false;
     const component = child.type;
-    return component.displayName === NavBarGroup_1.default.displayName;
+    return component.name === NavBarGroup_1.default.name;
 };
 const NavBarSection = ({ children, ...props }) => {
     const validChildren = react_1.Children.toArray(children).filter(isNavBarGroup);
@@ -6216,11 +6186,10 @@ Object.defineProperty(exports, "NavBarSection", ({ enumerable: true, get: functi
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const NumberInput = (0, react_1.forwardRef)(function NumberInput(props, ref) {
-    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'number', ref: ref, ...props });
-});
+function NumberInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'number', ...props });
+}
 exports["default"] = NumberInput;
 
 
@@ -6286,8 +6255,8 @@ const OptionAvatar_1 = __importDefault(__webpack_require__(/*! ./OptionAvatar */
 const OptionColumn_1 = __importDefault(__webpack_require__(/*! ./OptionColumn */ "./src/components/Option/OptionColumn.tsx"));
 const OptionContent_1 = __importDefault(__webpack_require__(/*! ./OptionContent */ "./src/components/Option/OptionContent.tsx"));
 const OptionIcon_1 = __importDefault(__webpack_require__(/*! ./OptionIcon */ "./src/components/Option/OptionIcon.tsx"));
-const Option = (0, react_2.forwardRef)(function Option({ is: Tag = 'li', id, children, label, focus, selected, className, icon, gap, avatar, title, disabled, variant, onClick, description, ...props }, ref) {
-    return ((0, react_1.createElement)(Tag, { ...props, key: id, id: id, ref: ref, "aria-selected": !!selected, "aria-disabled": !!disabled, title: title, onClick: (e) => {
+function Option({ is: Tag = 'li', id, children, label, focus, selected, className, icon, gap, avatar, title, disabled, variant, onClick, description, ...props }) {
+    return ((0, react_1.createElement)(Tag, { ...props, key: id, id: id, "aria-selected": !!selected, "aria-disabled": !!disabled, title: title, onClick: (e) => {
             if (disabled) {
                 (0, prevent_1.prevent)(e);
                 return;
@@ -6309,7 +6278,7 @@ const Option = (0, react_2.forwardRef)(function Option({ is: Tag = 'li', id, chi
             ]
                 .filter(Boolean)
                 .join(' '), children: [avatar && (0, jsx_runtime_1.jsx)(OptionAvatar_1.default, { children: avatar }), icon && (0, jsx_runtime_1.jsx)(OptionIcon_1.default, { name: icon }), gap && (0, jsx_runtime_1.jsx)(OptionColumn_1.default, {}), label && (0, jsx_runtime_1.jsx)(OptionContent_1.default, { children: label }), label !== children && children] })));
-});
+}
 exports["default"] = (0, react_2.memo)(Option);
 
 
@@ -6559,13 +6528,12 @@ Object.defineProperty(exports, "OptionHeader", ({ enumerable: true, get: functio
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Scrollable_1 = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
 const Tile_1 = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
-const OptionContainer = (0, react_1.forwardRef)(function OptionContainer({ children, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { ref: ref, elevation: '0', padding: 'none', maxHeight: 'x240', ...props, children: children }) }) }) }));
-});
+function OptionContainer(props) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { elevation: '0', padding: 'none', maxHeight: 'x240', ...props }) }) }) }));
+}
 exports["default"] = OptionContainer;
 
 
@@ -6590,7 +6558,7 @@ const Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/i
 const Scrollable_1 = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
 const Tile_1 = __webpack_require__(/*! ../Tile */ "./src/components/Tile/index.ts");
 const OptionsEmpty_1 = __importDefault(__webpack_require__(/*! ./OptionsEmpty */ "./src/components/Options/OptionsEmpty.tsx"));
-const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', multiple, renderEmpty: EmptyComponent = OptionsEmpty_1.default, options, cursor, renderItem: OptionComponent = Option_1.Option, onSelect, customEmpty, id, ...props }, ref) {
+function Options({ maxHeight = 'x144', multiple, renderEmpty: EmptyComponent = OptionsEmpty_1.default, options, cursor, renderItem: OptionComponent = Option_1.Option, onSelect, customEmpty, id, ...props }) {
     const liRef = (0, react_1.useRef)(null);
     (0, react_1.useLayoutEffect)(() => {
         if (!liRef.current) {
@@ -6607,7 +6575,7 @@ const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', m
             current.scrollTop = li.offsetTop;
         }
     }, [cursor]);
-    const optionsMemoized = (0, react_1.useMemo)(() => options?.map(([value, label, selected, disabled, type, url], i) => {
+    const optionsMemoized = (0, react_1.useMemo)(() => options.map(([value, label, selected, disabled, type, url], i) => {
         switch (type) {
             case 'heading':
                 return (0, jsx_runtime_1.jsx)(Option_1.OptionHeader, { children: label }, value);
@@ -6615,19 +6583,17 @@ const Options = (0, react_1.forwardRef)(function Options({ maxHeight = 'x144', m
                 return (0, jsx_runtime_1.jsx)(Option_1.OptionDivider, {}, value);
             default:
                 return ((0, jsx_runtime_1.jsx)(OptionComponent, { role: 'option', label: label, onMouseDown: (e) => {
-                        if (disabled) {
+                        if (disabled)
                             return;
-                        }
                         (0, prevent_1.prevent)(e);
                         onSelect([value, label, selected, disabled, type, url]);
-                        return false;
-                    }, value: value, selected: selected || (multiple !== true && undefined), disabled: disabled, focus: cursor === i || undefined }, value));
+                    }, value: value, selected: selected, disabled: disabled, focus: cursor === i }, value));
         }
-    }), [options, multiple, cursor, onSelect, OptionComponent]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsxs)(Tile_1.Tile, { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent_1.prevent, onClick: prevent_1.prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', id: id, "aria-activedescendant": options?.[cursor]?.[0]
+    }), [options, cursor, onSelect, OptionComponent]);
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsxs)(Tile_1.Tile, { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent_1.prevent, onClick: prevent_1.prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', id: id, "aria-activedescendant": options?.[cursor]?.[0]
                         ? String(options?.[cursor]?.[0])
                         : undefined, children: [!options.length && (0, jsx_runtime_1.jsx)(EmptyComponent, { customEmpty: customEmpty }), optionsMemoized] }) }) }) }));
-});
+}
 exports["default"] = Options;
 
 
@@ -6829,7 +6795,8 @@ exports.useVisible = useVisible;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.useVisible = exports.OptionsPaginated = exports.CheckOption = exports.Empty = void 0;
+exports.useVisible = exports.CheckOption = exports.Empty = void 0;
+exports.OptionsPaginated = OptionsPaginated;
 const react_1 = __webpack_require__(/*! react */ "react");
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
@@ -6845,7 +6812,7 @@ exports.Empty = (0, react_2.memo)(() => (0, jsx_runtime_1.jsx)(Option_1.Option,
 exports.CheckOption = (0, react_2.memo)(function CheckOption({ selected, children: label, ...options }) {
     return ((0, jsx_runtime_1.jsx)(Option_1.Option, { label: label, selected: selected, ...options, children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: selected }) }));
 });
-exports.OptionsPaginated = (0, react_2.forwardRef)(({ withTitle, multiple, renderEmpty: EmptyComponent = exports.Empty, options, cursor, renderItem: OptionComponent = Option_1.Option, onSelect, endReached, ...props }, ref) => {
+function OptionsPaginated({ ref, withTitle, multiple, renderEmpty: EmptyComponent = exports.Empty, options, cursor, renderItem: OptionComponent = Option_1.Option, onSelect, endReached, ...props }) {
     const OptionsComponentWithData = ({ index, data, }) => {
         const { value, label, selected } = data;
         return ((0, react_1.createElement)(OptionComponent, { ...(withTitle && { title: label }), index: index, role: 'option', label: label, onMouseDown: (e) => {
@@ -6855,7 +6822,7 @@ exports.OptionsPaginated = (0, react_2.forwardRef)(({ withTitle, multiple, rende
             }, key: value, value: value, selected: selected || (multiple !== true && undefined), focus: cursor === index || undefined }));
     };
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: !options.length ? ((0, jsx_runtime_1.jsx)(EmptyComponent, {})) : ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { endReached: endReached, style: { height: '144px' }, totalCount: options.length, data: options, itemContent: (index, data) => ((0, jsx_runtime_1.jsx)(OptionsComponentWithData, { index: index, data: data })) })) }) }));
-});
+}
 const useVisible = (initialVisibility = AnimatedVisibility_1.AnimatedVisibility.HIDDEN) => {
     const [visible, setVisible] = (0, fuselage_hooks_1.useDebouncedState)(initialVisibility, 10);
     const hide = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
@@ -6958,7 +6925,7 @@ const PaginatedMultiSelect = ({ withTitle, value, filter, options = [], error, d
         }
         addOption(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], ref: containerRef, onClick: handleClick, disabled: disabled, ...props, children: [(0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(Flex_1.FlexContainer, { children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(Anchor, { disabled: disabled, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide, order: 1, "rcx-input-box--undecorated": true, children: placeholder ?? null }), selectedOptions.map(({ value, label }, index) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { maxWidth: 'x150', withTruncatedText: true, title: withTitle ? label : undefined, tabIndex: -1, role: 'option', onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'div', "rcx-select": true, className: [error && 'invalid', disabled && 'disabled'], onClick: handleClick, disabled: disabled, ...props, ref: containerRef, children: [(0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(Flex_1.FlexContainer, { children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', display: 'flex', alignItems: 'center', flexWrap: 'wrap', margin: '-x8', role: 'listbox', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(Anchor, { disabled: disabled, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide, order: 1, "rcx-input-box--undecorated": true, children: placeholder ?? null }), selectedOptions.map(({ value, label }, index) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { maxWidth: 'x150', withTruncatedText: true, title: withTitle ? label : undefined, tabIndex: -1, role: 'option', onClick: (e) => {
                                                 (0, prevent_1.prevent)(e);
                                                 removeOption(value);
                                             }, children: label }, value ?? index)))] }) }) }) }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 0, shrink: 0, children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
@@ -6984,12 +6951,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
+const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 const Flex_1 = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const PaginatedMultiSelect_1 = __importDefault(__webpack_require__(/*! ./PaginatedMultiSelect */ "./src/components/PaginatedSelect/PaginatedMultiSelect.tsx"));
 const PaginatedMultiSelectFiltered = ({ filter, setFilter, options, placeholder, ...props }) => {
-    const anchor = (0, react_1.useCallback)((0, react_1.forwardRef)(({ children: _children, filter, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, placeholder: placeholder, value: filter, onInput: (e) => setFilter?.(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }) }))), []);
+    const anchor = (0, fuselage_hooks_1.useStableCallback)(({ children: _children, filter, ...props }) => ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { placeholder: placeholder, value: filter, onInput: (e) => setFilter?.(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }) })));
     return ((0, jsx_runtime_1.jsx)(PaginatedMultiSelect_1.default, { filter: filter, options: options, anchor: anchor, ...props }));
 };
 exports["default"] = PaginatedMultiSelectFiltered;
@@ -7068,14 +7035,13 @@ exports.PaginatedSelect = PaginatedSelect;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const PaginatedSelect_1 = __webpack_require__(/*! ./PaginatedSelect */ "./src/components/PaginatedSelect/PaginatedSelect.tsx");
 const PaginatedSelectFiltered = ({ filter, setFilter, options, placeholder, ...props }) => {
-    const anchor = (0, react_1.useMemo)(() => (0, react_1.forwardRef)(({ filter, onChange: _onChange, ...props }, ref) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onChange: (0, fuselage_hooks_1.useStableCallback)((e) => {
+    const anchor = (0, react_1.useMemo)(() => ({ filter, onChange: _onChange, ...props }) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onChange: (e) => {
             setFilter(e.currentTarget.value);
-        }), ...props, "rcx-input-box--undecorated": true }))), [placeholder, setFilter]);
+        }, ...props, "rcx-input-box--undecorated": true })), [placeholder, setFilter]);
     return ((0, jsx_runtime_1.jsx)(PaginatedSelect_1.PaginatedSelect, { placeholder: undefined, filter: filter, options: options, ...props, anchor: anchor }));
 };
 exports["default"] = PaginatedSelectFiltered;
@@ -7092,11 +7058,10 @@ exports["default"] = PaginatedSelectFiltered;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const PaginatedSelectWrapper = (0, react_1.forwardRef)(function PaginatedSelectWrapper(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-select__wrapper": true, ref: ref, ...props });
-});
+function PaginatedSelectWrapper(props) {
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-select__wrapper": true, ...props });
+}
 exports["default"] = PaginatedSelectWrapper;
 
 
@@ -7698,16 +7663,15 @@ exports.dark = (0, getPalette_1.getThemePalette)('dark');
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const PasswordInput = (0, react_1.forwardRef)(function PasswordInput(props, ref) {
+function PasswordInput(props) {
     const [hidden, toggle] = (0, fuselage_hooks_1.useToggle)(true);
     const handleAddonClick = () => {
         toggle();
     };
-    return ((0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: hidden ? 'password' : 'text', addon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: hidden ? 'eye-off' : 'eye', size: 20, onClick: handleAddonClick }), ref: ref, ...props }));
-});
+    return ((0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: hidden ? 'password' : 'text', endAddon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: hidden ? 'eye-off' : 'eye', size: 20, onClick: handleAddonClick }), ...props }));
+}
 exports["default"] = PasswordInput;
 
 
@@ -7883,7 +7847,6 @@ Object.defineProperty(exports, "PositionAnimated", ({ enumerable: true, get: fun
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const getWidth = (percentage) => `${Math.min(Math.max(0, percentage), 100).toFixed(1)}%`;
 const colors = {
@@ -7904,9 +7867,9 @@ const getColor = (isLight, variant, error) => {
     }
     return isLight ? lightColors[variant] : colors[variant];
 };
-const ProgressBar = (0, react_1.forwardRef)(function ProgressBar({ percentage, variant = 'info', error, animated, light = false, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ref: ref, "rcx-progress-bar": true, title: error || undefined, overflow: 'hidden', ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { bg: getColor(light, variant, error), "rcx-progress-bar__fill--animated": animated, "rcx-progress-bar__fill": true, width: getWidth(percentage) }) }));
-});
+function ProgressBar({ percentage, variant = 'info', error, animated, light = false, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-progress-bar": true, title: error || undefined, overflow: 'hidden', ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { bg: getColor(light, variant, error), "rcx-progress-bar__fill--animated": animated, "rcx-progress-bar__fill": true, width: getWidth(percentage) }) }));
+}
 exports["default"] = ProgressBar;
 
 
@@ -7939,11 +7902,10 @@ Object.defineProperty(exports, "ProgressBar", ({ enumerable: true, get: function
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const RadioButton = (0, react_1.forwardRef)(function RadioButton({ className, labelChildren, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'label', className: className, "rcx-radio-button": true, children: [labelChildren, (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'input', "rcx-radio-button__input": true, type: 'radio', ref: ref, ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-radio-button__fake": true, "aria-hidden": 'true' })] }));
-});
+function RadioButton({ className, labelChildren, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'label', className: className, "rcx-radio-button": true, children: [labelChildren, (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'input', "rcx-radio-button__input": true, type: 'radio', ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-radio-button__fake": true, "aria-hidden": 'true' })] }));
+}
 exports["default"] = RadioButton;
 
 
@@ -8102,11 +8064,10 @@ Object.defineProperty(exports, "Scrollable", ({ enumerable: true, get: function
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const SearchInput = (0, react_1.forwardRef)(function SearchInput(props, ref) {
-    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'search', ref: ref, ...props });
-});
+function SearchInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'search', ...props });
+}
 exports["default"] = SearchInput;
 
 
@@ -8176,12 +8137,11 @@ function OptionAria({ item, state }) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
 const SelectAria_1 = __webpack_require__(/*! ./SelectAria */ "./src/components/Select/SelectAria.tsx");
-const Select = (0, react_1.forwardRef)(function Select({ options, ...props }, ref) {
+function Select({ options, ref, ...props }) {
     return ((0, jsx_runtime_1.jsx)(SelectAria_1.SelectAria, { ref: ref, ...props, children: options.map((option) => ((0, jsx_runtime_1.jsx)(react_stately_1.Item, { title: option[1] ?? option[0], textValue: option[0], children: option[1] ?? option[0] }, option[0]))) }));
-});
+}
 exports["default"] = Select;
 
 
@@ -8196,11 +8156,10 @@ exports["default"] = Select;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const SelectAddon = (0, react_1.forwardRef)(function SelectAddon(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-select__addon": true, ref: ref, ...props });
-});
+function SelectAddon(props) {
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-select__addon": true, ...props });
+}
 exports["default"] = SelectAddon;
 
 
@@ -8214,10 +8173,10 @@ exports["default"] = SelectAddon;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SelectAria = exports.Item = void 0;
+exports.Item = void 0;
+exports.SelectAria = SelectAria;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
@@ -8228,7 +8187,7 @@ const Listbox_1 = __webpack_require__(/*! ./Listbox */ "./src/components/Select/
 const SelectTrigger_1 = __webpack_require__(/*! ./SelectTrigger */ "./src/components/Select/SelectTrigger.tsx");
 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({ error, placeholder, value, onChange, small, isDisabled: isDisabledProps, disabled, id, ...props }, outerRef) {
+function SelectAria({ ref: outerRef, error, placeholder, value, onChange, small, isDisabled: isDisabledProps, disabled, id, ...props }) {
     const isDisabled = isDisabledProps || disabled;
     const state = (0, react_stately_1.useSelectState)({
         isDisabled,
@@ -8243,7 +8202,7 @@ exports.SelectAria = (0, react_1.forwardRef)(function SelectAria({ error, placeh
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { position: 'relative', size: 0, 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.jsxs)(SelectTrigger_1.SelectTrigger, { ...(0, react_aria_1.mergeProps)(focusProps, triggerProps), ref: mergedRef, small: small, focus: isFocusVisible || state.isOpen, error: error, id: id, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', color: state.selectedItem ? 'default' : 'hint', ...valueProps, ...(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?.inlineSize,
                     }, children: (0, jsx_runtime_1.jsx)(Listbox_1.ListBox, { ...menuProps, state: state }) }) }))] }));
-});
+}
 
 
 /***/ },
@@ -8263,10 +8222,10 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const _1 = __webpack_require__(/*! . */ "./src/components/Select/index.ts");
 const SelectFilteredAnchor_1 = __importDefault(__webpack_require__(/*! ./SelectFilteredAnchor */ "./src/components/Select/SelectFilteredAnchor.tsx"));
-const SelectFiltered = (0, react_1.forwardRef)(function SelectFiltered({ options, placeholder, filter: propFilter, setFilter: propSetFilter, ...props }, ref) {
+function SelectFiltered({ options, placeholder, filter: propFilter, setFilter: propSetFilter, ...props }) {
     const [filter, setFilter] = (0, react_1.useState)('');
-    return ((0, jsx_runtime_1.jsx)(_1.SelectLegacy, { ref: ref, placeholder: placeholder, filter: propFilter || filter, options: options, ...props, anchor: (params) => ((0, jsx_runtime_1.jsx)(SelectFilteredAnchor_1.default, { placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter, ...params })) }));
-});
+    return ((0, jsx_runtime_1.jsx)(_1.SelectLegacy, { placeholder: placeholder, filter: propFilter || filter, options: options, ...props, anchor: (params) => ((0, jsx_runtime_1.jsx)(SelectFilteredAnchor_1.default, { placeholder: placeholder, filter: propFilter || filter, onChangeFilter: propSetFilter || setFilter, ...params })) }));
+}
 exports["default"] = SelectFiltered;
 
 
@@ -8281,11 +8240,10 @@ exports["default"] = SelectFiltered;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const SelectFilteredAnchor = (0, react_1.forwardRef)(function SelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }));
-});
+function SelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }));
+}
 exports["default"] = SelectFilteredAnchor;
 
 
@@ -8300,11 +8258,10 @@ exports["default"] = SelectFilteredAnchor;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const SelectFocus = (0, react_1.forwardRef)(function SelectFocus(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ref: ref, fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button', ...props }));
-});
+function SelectFocus(props) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { fontScale: 'p2m', color: 'hint', "rcx-select__focus": true, is: 'button', type: 'button', ...props }));
+}
 exports["default"] = SelectFocus;
 
 
@@ -8324,7 +8281,6 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 const react_1 = __webpack_require__(/*! react */ "react");
-const isForwardRefType_1 = __webpack_require__(/*! ../../helpers/isForwardRefType */ "./src/helpers/isForwardRefType.ts");
 const AnimatedVisibility_1 = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
@@ -8333,7 +8289,7 @@ const Options_1 = __webpack_require__(/*! ../Options */ "./src/components/Option
 const PositionAnimated_1 = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
 const SelectAddon_1 = __importDefault(__webpack_require__(/*! ./SelectAddon */ "./src/components/Select/SelectAddon.tsx"));
 const SelectFocus_1 = __importDefault(__webpack_require__(/*! ./SelectFocus */ "./src/components/Select/SelectFocus.tsx"));
-const Wrapper = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-select__wrapper": true, ref: ref, ...props })));
+const Wrapper = (props) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-select__wrapper": true, ...props }));
 const useDidUpdate = (func, deps) => {
     const didMount = (0, react_1.useRef)(false);
     const fn = (0, fuselage_hooks_1.useStableCallback)(func);
@@ -8344,7 +8300,7 @@ const useDidUpdate = (func, deps) => {
         didMount.current = true;
     }, deps || []);
 };
-const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filter, error, disabled, options = [], anchor: Anchor = SelectFocus_1.default, onChange = () => { }, getValue = ([value] = ['', '']) => value, getLabel = ([, label] = ['', '']) => label, placeholder = '', renderItem, renderSelected: RenderSelected, renderOptions: _Options = Options_1.Options, addonIcon, customEmpty, ...props }, ref) {
+const SelectLegacy = function SelectLegacy({ ref, value, filter, error, disabled, options = [], anchor: Anchor = SelectFocus_1.default, onChange = () => { }, getValue = ([value] = ['', '']) => value, getLabel = ([, label] = ['', '']) => label, placeholder = '', renderItem, renderSelected: RenderSelected, renderOptions: _Options = Options_1.Options, addonIcon, customEmpty, ...props }) {
     const [internalValue, setInternalValue] = (0, react_1.useState)(value || '');
     const internalChangedByKeyboard = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
@@ -8372,15 +8328,6 @@ const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filt
         removeFocusClass();
         hide();
     });
-    const renderAnchor = (params) => {
-        if ((0, isForwardRefType_1.isForwardRefType)(Anchor)) {
-            return (0, jsx_runtime_1.jsx)(Anchor, { ...params });
-        }
-        if (typeof Anchor === 'function') {
-            return Anchor(params);
-        }
-        return null;
-    };
     const { ref: containerRef, borderBoxSize } = (0, fuselage_hooks_1.useResizeObserver)();
     useDidUpdate(reset, [filter, internalValue]);
     (0, fuselage_hooks_1.useOutsideClick)([containerRef], removeFocusClass);
@@ -8397,18 +8344,10 @@ const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filt
         return show();
     });
     return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(Wrapper, { display: 'flex', mi: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText &&
-                        (RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, onClick: internalChangedByClick }, getValue(option))) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', mi: 4, "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint', children: visibleText }))), renderAnchor({
-                        ref: anchorRef,
-                        children: !value ? option || placeholder : null,
-                        disabled: disabled ?? false,
-                        onClick: show,
-                        onBlur: hide,
-                        onKeyDown: handleKeyDown,
-                        onKeyUp: handleKeyUp,
-                    }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
+                        (RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, onClick: internalChangedByClick }, getValue(option))) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', mi: 4, "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint', children: visibleText }))), (0, jsx_runtime_1.jsx)(Anchor, { ref: anchorRef, disabled: disabled ?? false, onClick: show, onBlur: hide, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: !value ? option || placeholder : null }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                                     ? 'chevron-up'
                                     : addonIcon || 'chevron-down', size: 'x20' }) }) })] }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: visible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: filteredOptions, onSelect: internalChangedByClick, renderItem: renderItem, cursor: cursor, customEmpty: customEmpty }) })] }));
-});
+};
 exports["default"] = SelectLegacy;
 
 
@@ -8422,12 +8361,11 @@ exports["default"] = SelectLegacy;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SelectTrigger = void 0;
+exports.SelectTrigger = SelectTrigger;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-exports.SelectTrigger = (0, react_1.forwardRef)(({ small, error, isDisabled, focus, id, ...props }, ref) => {
+function SelectTrigger({ ref, small, error, isDisabled, focus, id, ...props }) {
     const { buttonProps } = (0, react_aria_1.useButton)(props, ref);
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ...buttonProps, id: id, "rcx-select": true, ref: ref, is: 'button', display: 'flex', flexDirection: 'row', fontScale: 'p2', justifyContent: 'space-between', "rcx-input-box--small": small, className: [
             error && 'invalid',
@@ -8436,7 +8374,7 @@ exports.SelectTrigger = (0, react_1.forwardRef)(({ small, error, isDisabled, foc
         ]
             .filter(Boolean)
             .join(' '), children: props.children }));
-});
+}
 
 
 /***/ },
@@ -8479,7 +8417,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const SelectInputPlaceholder_1 = __importDefault(__webpack_require__(/*! ./SelectInputPlaceholder */ "./src/components/SelectInput/SelectInputPlaceholder.tsx"));
-const SelectInput = (0, react_1.forwardRef)(function SelectInput({ children, multiple, placeholder, onChange, ...props }, ref) {
+function SelectInput({ ref, children, multiple, placeholder, onChange, ...props }) {
     const [isPlaceholderVisible, setPlaceholderVisible] = (0, react_1.useState)(!props.value && !props.defaultValue);
     const handleChange = (0, react_1.useCallback)((event) => {
         setPlaceholderVisible(!event.currentTarget.value);
@@ -8488,8 +8426,8 @@ const SelectInput = (0, react_1.forwardRef)(function SelectInput({ children, mul
     if (multiple) {
         return ((0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { children: children, ...props, multiple: true, type: 'select', onChange: handleChange }));
     }
-    return ((0, jsx_runtime_1.jsxs)(InputBox_1.InputBox, { placeholderVisible: isPlaceholderVisible ? !!placeholder : undefined, ref: ref, ...props, addon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'chevron-down', size: 'x20' }), type: 'select', onChange: handleChange, children: [placeholder && ((0, jsx_runtime_1.jsx)(SelectInputPlaceholder_1.default, { value: '', children: placeholder })), children] }));
-});
+    return ((0, jsx_runtime_1.jsxs)(InputBox_1.InputBox, { placeholderVisible: isPlaceholderVisible ? !!placeholder : undefined, ref: ref, ...props, endAddon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'chevron-down', size: 'x20' }), type: 'select', onChange: handleChange, children: [placeholder && ((0, jsx_runtime_1.jsx)(SelectInputPlaceholder_1.default, { value: '', children: placeholder })), children] }));
+}
 exports["default"] = SelectInput;
 
 
@@ -8504,11 +8442,10 @@ exports["default"] = SelectInput;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const SelectInputOption = (0, react_1.forwardRef)(function SelectInputOption(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'option', "rcx-input-box__option": true, ref: ref, ...props });
-});
+function SelectInputOption(props) {
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'option', "rcx-input-box__option": true, ...props });
+}
 exports["default"] = SelectInputOption;
 
 
@@ -8523,11 +8460,10 @@ exports["default"] = SelectInputOption;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const SelectInputPlaceholder = (0, react_1.forwardRef)(function Placeholder(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'option', "rcx-input-box__placeholder": true, ref: ref, ...props });
-});
+function SelectInputPlaceholder(props) {
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'option', "rcx-input-box__placeholder": true, ...props });
+}
 exports["default"] = SelectInputPlaceholder;
 
 
@@ -8676,17 +8612,17 @@ exports["default"] = Sidebar;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SidebarAction = exports.SidebarActions = void 0;
+exports.SidebarActions = SidebarActions;
+exports.SidebarAction = SidebarAction;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 const ButtonGroup_1 = __webpack_require__(/*! ../ButtonGroup */ "./src/components/ButtonGroup/index.ts");
-exports.SidebarActions = (0, react_1.forwardRef)(function SidebarActions(props, ref) {
-    return (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { ref: ref, ...props });
-});
-exports.SidebarAction = (0, react_1.forwardRef)(function SidebarAction(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Button_1.IconButton, { small: true, ref: ref, ...props });
-});
+function SidebarActions(props) {
+    return (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { ...props });
+}
+function SidebarAction(props) {
+    return (0, jsx_runtime_1.jsx)(Button_1.IconButton, { small: true, ...props });
+}
 
 
 /***/ },
@@ -8777,13 +8713,12 @@ exports.TopBar = TopBar;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.TopBarAction = void 0;
+exports.TopBarAction = TopBarAction;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const SidebarActions_1 = __webpack_require__(/*! ../SidebarActions */ "./src/components/Sidebar/SidebarActions.tsx");
-exports.TopBarAction = (0, react_1.forwardRef)(function TopBarAction(props, ref) {
-    return (0, jsx_runtime_1.jsx)(SidebarActions_1.SidebarAction, { ref: ref, ...props });
-});
+function TopBarAction(props) {
+    return (0, jsx_runtime_1.jsx)(SidebarActions_1.SidebarAction, { ...props });
+}
 
 
 /***/ },
@@ -8796,13 +8731,12 @@ exports.TopBarAction = (0, react_1.forwardRef)(function TopBarAction(props, ref)
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.TopBarActions = void 0;
+exports.TopBarActions = TopBarActions;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const SidebarActions_1 = __webpack_require__(/*! ../SidebarActions */ "./src/components/Sidebar/SidebarActions.tsx");
-exports.TopBarActions = (0, react_1.forwardRef)(function TopBarActions(props, ref) {
-    return (0, jsx_runtime_1.jsx)(SidebarActions_1.SidebarActions, { ref: ref, ...props });
-});
+function TopBarActions(props) {
+    return (0, jsx_runtime_1.jsx)(SidebarActions_1.SidebarActions, { ...props });
+}
 
 
 /***/ },
@@ -9017,17 +8951,18 @@ Object.defineProperty(exports, "SidebarDivider", ({ enumerable: true, get: funct
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Sidebar = void 0;
+exports.Sidebar = Sidebar;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-exports.Sidebar = (0, react_1.forwardRef)(({ collapsed, className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("nav", { ref: ref, className: [
-        'rcx-box rcx-box--full rcx-sidebar-v2',
-        'rcx-box--animated',
-        collapsed && 'rcx-sidebar-v2--collapsed',
-        className,
-    ]
-        .filter(Boolean)
-        .join(' '), ...props })));
+function Sidebar({ collapsed, className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("nav", { className: [
+            'rcx-box rcx-box--full rcx-sidebar-v2',
+            'rcx-box--animated',
+            collapsed && 'rcx-sidebar-v2--collapsed',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), ...props }));
+}
 
 
 /***/ },
@@ -9098,11 +9033,10 @@ exports["default"] = SidebarAccordionItem;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
-const SidebarAction = (0, react_1.forwardRef)(function SidebarAction(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Button_1.IconButton, { small: true, ref: ref, ...props });
-});
+function SidebarAction(props) {
+    return (0, jsx_runtime_1.jsx)(Button_1.IconButton, { small: true, ...props });
+}
 exports["default"] = SidebarAction;
 
 
@@ -9117,11 +9051,10 @@ exports["default"] = SidebarAction;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const ButtonGroup_1 = __webpack_require__(/*! ../ButtonGroup */ "./src/components/ButtonGroup/index.ts");
-const SidebarActions = (0, react_1.forwardRef)(function SidebarActions(props, ref) {
-    return (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { ref: ref, ...props });
-});
+function SidebarActions(props) {
+    return (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { ...props });
+}
 exports["default"] = SidebarActions;
 
 
@@ -9169,12 +9102,11 @@ exports.SidebarButtonGroup = SidebarButtonGroup;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SidebarCollapseGroup = void 0;
+exports.SidebarCollapseGroup = SidebarCollapseGroup;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const SidebarGroupTitle_1 = __webpack_require__(/*! ./SidebarGroupTitle */ "./src/components/SidebarV2/SidebarGroupTitle.tsx");
 const useCollapse_1 = __webpack_require__(/*! ./hooks/useCollapse */ "./src/components/SidebarV2/hooks/useCollapse.tsx");
-exports.SidebarCollapseGroup = (0, react_1.forwardRef)(({ expanded: propExpanded, defaultExpanded, tabIndex, children, badge, title, ...props }, ref) => {
+function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, title, ...props }) {
     const { barProps, expanded, panelExpanded, panelId, titleId } = (0, useCollapse_1.useCollapse)({
         expanded: propExpanded,
         defaultExpanded,
@@ -9186,7 +9118,7 @@ exports.SidebarCollapseGroup = (0, react_1.forwardRef)(({ expanded: propExpanded
                 ]
                     .filter(Boolean)
                     .join(' '), id: panelId, children: children })] }));
-});
+}
 
 
 /***/ },
@@ -9533,15 +9465,16 @@ exports.SidebarItemTitle = SidebarItemTitle;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SidebarListItem = void 0;
+exports.SidebarListItem = SidebarListItem;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-exports.SidebarListItem = (0, react_1.forwardRef)(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, role: 'listitem', className: [
-        'rcx-box rcx-box--full rcx-sidebar-item__list-item',
-        className,
-    ]
-        .filter(Boolean)
-        .join(' '), ...props, children: children })));
+function SidebarListItem({ className, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { role: 'listitem', className: [
+            'rcx-box rcx-box--full rcx-sidebar-item__list-item',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), ...props, children: children }));
+}
 
 
 /***/ },
@@ -9892,10 +9825,9 @@ exports["default"] = SidepanelHeaderTitle;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-const SidepanelList = (0, react_1.forwardRef)(function SidepanelList({ className, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("div", { role: 'list', ref: ref, className: ['rcx-sidepanel-list', className].filter(Boolean).join(' '), ...props }));
-});
+function SidepanelList({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { role: 'list', className: ['rcx-sidepanel-list', className].filter(Boolean).join(' '), ...props }));
+}
 exports["default"] = SidepanelList;
 
 
@@ -9910,12 +9842,11 @@ exports["default"] = SidepanelList;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-const SidepanelListItem = (0, react_1.forwardRef)(function SidepanelListItem({ className, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("div", { role: 'listitem', ref: ref, className: ['rcx-sidepanel-list__item', className]
+function SidepanelListItem({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { role: 'listitem', className: ['rcx-sidepanel-list__item', className]
             .filter(Boolean)
             .join(' '), ...props }));
-});
+}
 exports["default"] = SidepanelListItem;
 
 
@@ -10041,7 +9972,7 @@ const useStyle_1 = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/
 const SliderHead_1 = __webpack_require__(/*! ./SliderHead */ "./src/components/Slider/SliderHead.tsx");
 const SliderThumb_1 = __webpack_require__(/*! ./SliderThumb */ "./src/components/Slider/SliderThumb.tsx");
 const SliderTrack_1 = __webpack_require__(/*! ./SliderTrack */ "./src/components/Slider/SliderTrack.tsx");
-function Slider(props, ref) {
+function Slider({ ref, ...props }) {
     const { label, formatOptions, showOutput = true, multiThumb, maxValue, minValue, } = props;
     const getMultiThumbDefaultValue = () => {
         if (multiThumb && !props.defaultValue) {
@@ -10088,7 +10019,7 @@ function Slider(props, ref) {
     `, sliderState);
     return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, ref: ref, className: slider, children: [(0, jsx_runtime_1.jsx)(SliderHead_1.SliderHead, { labelProps: labelProps, outputProps: outputProps, state: sliderState, showOutput: showOutput, label: label, multiThumb: multiThumb }), (0, jsx_runtime_1.jsxs)(SliderTrack_1.SliderTrack, { state: sliderState, trackProps: trackProps, trackRef: trackRef, multiThumb: multiThumb, children: [(0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, state: sliderState, trackRef: trackRef }), multiThumb && ((0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 1, state: sliderState, trackRef: trackRef }))] })] }));
 }
-exports["default"] = (0, react_1.forwardRef)(Slider);
+exports["default"] = Slider;
 
 
 /***/ },
@@ -10875,11 +10806,10 @@ exports["default"] = Tabs;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const TabsItem = (0, react_1.forwardRef)(function TabsItem({ selected, disabled, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { 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 }));
-});
+function TabsItem({ selected, disabled, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { 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', role: 'tab', ...props }));
+}
 exports["default"] = TabsItem;
 
 
@@ -10962,11 +10892,10 @@ Object.defineProperty(exports, "Tag", ({ enumerable: true, get: function () { re
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const TelephoneInput = (0, react_1.forwardRef)(function TelephoneInput(props, ref) {
-    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'tel', ref: ref, ...props });
-});
+function TelephoneInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'tel', ...props });
+}
 exports["default"] = TelephoneInput;
 
 
@@ -10999,11 +10928,10 @@ Object.defineProperty(exports, "TelephoneInput", ({ enumerable: true, get: funct
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const TextAreaInput = (0, react_1.forwardRef)(function TextAreaInput(props, ref) {
-    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'textarea', ref: ref, ...props });
-});
+function TextAreaInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'textarea', ...props });
+}
 exports["default"] = TextAreaInput;
 
 
@@ -11036,11 +10964,10 @@ Object.defineProperty(exports, "TextAreaInput", ({ enumerable: true, get: functi
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const TextInput = (0, react_1.forwardRef)(function TextInput(props, ref) {
-    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'text', ref: ref, ...props });
-});
+function TextInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'text', ...props });
+}
 exports["default"] = TextInput;
 
 
@@ -11074,7 +11001,6 @@ Object.defineProperty(exports, "TextInput", ({ enumerable: true, get: function (
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function Circle({ disabled, circleCount, iteration, inheritColor, ...props }) {
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', className: (0, css_in_js_1.css) `
@@ -11082,9 +11008,9 @@ function Circle({ disabled, circleCount, iteration, inheritColor, ...props }) {
         animation-delay: ${iteration * 0.16}s;
       `, "rcx-throbber__circle": true, "rcx-throbber__circle--disabled": disabled, "rcx-throbber__circle--inherit-color": inheritColor, ...props }));
 }
-const Throbber = (0, react_1.forwardRef)(function Throbber({ disabled, size = 'x16', circleCount = 3, inheritColor, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-throbber": true, ref: ref, ...props, children: Array.from({ length: circleCount || 3 }, (_, iteration) => ((0, jsx_runtime_1.jsx)(Circle, { circleCount: circleCount, iteration: iteration, disabled: !!disabled, size: size, inheritColor: !!inheritColor }, iteration))) }));
-});
+function Throbber({ disabled, size = 'x16', circleCount = 3, inheritColor, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-throbber": true, ...props, children: Array.from({ length: circleCount || 3 }, (_, iteration) => ((0, jsx_runtime_1.jsx)(Circle, { circleCount: circleCount, iteration: iteration, disabled: !!disabled, size: size, inheritColor: !!inheritColor }, iteration))) }));
+}
 exports["default"] = Throbber;
 
 
@@ -11117,11 +11043,10 @@ Object.defineProperty(exports, "Throbber", ({ enumerable: true, get: function ()
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const Tile = (0, react_1.forwardRef)(function Tile({ elevation = '1', padding = 16, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { ref: ref, "rcx-tile": true, "rcx-tile--elevation": elevation, padding: padding, ...props }));
-});
+function Tile({ elevation = '1', padding = 16, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-tile": true, "rcx-tile--elevation": elevation, padding: padding, ...props }));
+}
 exports["default"] = Tile;
 
 
@@ -11231,11 +11156,10 @@ Object.defineProperty(exports, "ToastBar", ({ enumerable: true, get: function ()
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ToggleSwitch = (0, react_1.forwardRef)(function ToggleSwitch({ className, labelChildren, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'label', className: className, "rcx-toggle-switch": true, children: [labelChildren, (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'input', ref: ref, "rcx-toggle-switch__input": true, type: 'checkbox', ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-toggle-switch__fake": true, "aria-hidden": 'true' })] }));
-});
+function ToggleSwitch({ className, labelChildren, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'label', className: className, "rcx-toggle-switch": true, children: [labelChildren, (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'input', "rcx-toggle-switch__input": true, type: 'checkbox', ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-toggle-switch__fake": true, "aria-hidden": 'true' })] }));
+}
 exports["default"] = ToggleSwitch;
 
 
@@ -11268,7 +11192,6 @@ Object.defineProperty(exports, "ToggleSwitch", ({ enumerable: true, get: functio
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const parsePlacement = (placement) => {
     const [direction, position] = placement
@@ -11279,10 +11202,10 @@ const parsePlacement = (placement) => {
     }
     return [direction, position];
 };
-const Tooltip = (0, react_1.forwardRef)(function Tooltip({ variation = 'dark', placement, ...props }, ref) {
+function Tooltip({ variation = 'dark', placement, ...props }) {
     const [direction, position] = parsePlacement(placement);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', ref: ref, "rcx-tooltip": true, "rcx-tooltip--dir": direction, "rcx-tooltip--pos": position, "rcx-tooltip--light": variation === 'light', "rcx-tooltip--dark": variation === 'dark', ...props }));
-});
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tooltip": true, "rcx-tooltip--dir": direction, "rcx-tooltip--pos": position, "rcx-tooltip--light": variation === 'light', "rcx-tooltip--dark": variation === 'dark', ...props }));
+}
 exports["default"] = Tooltip;
 
 
@@ -11315,11 +11238,10 @@ Object.defineProperty(exports, "Tooltip", ({ enumerable: true, get: function ()
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-const UrlInput = (0, react_1.forwardRef)(function UrlInput(props, ref) {
-    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'url', ref: ref, ...props });
-});
+function UrlInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'url', ...props });
+}
 exports["default"] = UrlInput;
 
 
@@ -11716,21 +11638,6 @@ const fromCamelToKebab = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])
 exports.fromCamelToKebab = fromCamelToKebab;
 
 
-/***/ },
-
-/***/ "./src/helpers/isForwardRefType.ts"
-/*!*****************************************!*\
-  !*** ./src/helpers/isForwardRefType.ts ***!
-  \*****************************************/
-(__unused_webpack_module, exports) {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.isForwardRefType = void 0;
-const isForwardRefType = (type) => type.$$typeof === Symbol.for('react.forward_ref');
-exports.isForwardRefType = isForwardRefType;
-
-
 /***/ },
 
 /***/ "./src/helpers/patchChildren.ts"
@@ -11743,12 +11650,13 @@ exports.isForwardRefType = isForwardRefType;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.patchChildren = void 0;
 const react_1 = __webpack_require__(/*! react */ "react");
+const react_is_1 = __webpack_require__(/*! react-is */ "react-is");
 const flattenChildren_1 = __webpack_require__(/*! ./flattenChildren */ "./src/helpers/flattenChildren.ts");
 const shallowEqual_1 = __webpack_require__(/*! ./shallowEqual */ "./src/helpers/shallowEqual.ts");
 const patchChildren = (children, patch) => {
     let dirty = false;
     const newChildren = (0, flattenChildren_1.flattenChildren)(children).map((child) => {
-        if (!(0, react_1.isValidElement)(child)) {
+        if (!(0, react_is_1.isElement)(child)) {
             return child;
         }
         const mergedProps = patch(child.props);
@@ -12414,6 +12322,16 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
 
 /***/ },
 
+/***/ "react-is"
+/*!***************************!*\
+  !*** external "react-is" ***!
+  \***************************/
+(module) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_react_is__;
+
+/***/ },
+
 /***/ "react-keyed-flatten-children"
 /*!***********************************************!*\
   !*** external "react-keyed-flatten-children" ***!