@rocket.chat/fuselage 0.80.0 → 0.82.0

package/dist/fuselage.development.js

@@ -2,17 +2,7 @@
 
 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-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-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-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-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
+/******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
@@ -289,6 +279,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const composeClassNames_1 = __webpack_require__(/*! ../../helpers/composeClassNames */ "./src/helpers/composeClassNames.ts");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
+/**
+ * An `Accordion` allows users to toggle the display of sections of content.
+ */
 const Accordion = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.StylingBox, { ...props, children: (0, jsx_runtime_1.jsx)("div", { className: (0, composeClassNames_1.cx)((0, composeClassNames_1.cxx)('rcx-box')('full', 'animated'), 'rcx-accordion'), children: children }) }));
 exports["default"] = Accordion;
 
@@ -495,16 +488,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 +535,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);
@@ -575,19 +568,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;
@@ -602,10 +593,39 @@ 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);
+/**
+ * Presentational, fully controlled audio controls (play/pause, seek, elapsed
+ * time, playback speed and optional download). It owns no `<audio>` element and
+ * no playback state, so it can be driven by any source — a local element or a
+ * shared/persistent one. `AudioPlayer` wraps this with its own element for the
+ * common self-contained case.
+ */
+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"
@@ -619,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; } }));
 
 
 /***/ },
@@ -661,12 +683,16 @@ 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) {
+/**
+ * An input for selection of options.
+ */
+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)();
     const [selected, setSelected] = (0, react_1.useState)(() => getSelected(value, options) || []);
     (0, react_1.useEffect)(() => {
+        // Validates if selected items are still valid after value changes
         setSelected((selected) => {
             return !selected.every(isSelectedValid(value))
                 ? selected.filter(isSelectedValid(value))
@@ -713,7 +739,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;
 
 
@@ -842,6 +868,9 @@ Object.defineProperty(exports, "AvatarStack", ({ enumerable: true, get: function
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
+/**
+ * Communicates notification’s amount and types.
+ */
 function Badge({ is: Tag = 'span', variant = 'secondary', small, className, disabled, ...props }) {
     const modifiers = [variant, small && 'small', disabled && 'disabled']
         .filter(Boolean)
@@ -946,32 +975,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);
 
 
 /***/ },
@@ -1018,6 +1042,12 @@ exports.StylingBox = void 0;
 const react_1 = __webpack_require__(/*! react */ "react");
 const useArrayLikeClassNameProp_1 = __webpack_require__(/*! ../../hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
 const useStylingProps_1 = __webpack_require__(/*! ./useStylingProps */ "./src/components/Box/useStylingProps.ts");
+/**
+ * Merges its `StylingProps` props into a `className` prop passed to a child element.
+ *
+ * This is intended to be used as a wrapper for components that accept styling props but don't need the weight of the
+ * `Box` component prop handling internally.
+ */
 const StylingBox = ({ children, ...props }) => {
     const propsWithStringClassName = (0, useArrayLikeClassNameProp_1.useArrayLikeClassNameProp)(props);
     propsWithStringClassName.className = [
@@ -1521,33 +1551,6 @@ var Bubble_1 = __webpack_require__(/*! ./Bubble */ "./src/components/Bubble/Bubb
 Object.defineProperty(exports, "Bubble", ({ enumerable: true, get: function () { return __importDefault(Bubble_1).default; } }));
 
 
-/***/ },
-
-/***/ "./src/components/Button/ActionButton.tsx"
-/*!************************************************!*\
-  !*** ./src/components/Button/ActionButton.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 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 }) => {
-    if (mini) {
-        return 'x16';
-    }
-    if (tiny || small) {
-        return 'x20';
-    }
-    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) })] })));
-exports["default"] = ActionButton;
-
-
 /***/ },
 
 /***/ "./src/components/Button/Button.tsx"
@@ -1562,7 +1565,10 @@ 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) {
+/**
+ * Indicates an actionable user action.
+ */
+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,
@@ -1588,7 +1594,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;
 
 
@@ -1621,7 +1627,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') ||
@@ -1656,8 +1662,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;
 
 
@@ -1674,11 +1680,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.IconButton = exports.ActionButton = exports.Button = void 0;
+exports.IconButton = exports.Button = void 0;
 var Button_1 = __webpack_require__(/*! ./Button */ "./src/components/Button/Button.tsx");
 Object.defineProperty(exports, "Button", ({ enumerable: true, get: function () { return __importDefault(Button_1).default; } }));
-var ActionButton_1 = __webpack_require__(/*! ./ActionButton */ "./src/components/Button/ActionButton.tsx");
-Object.defineProperty(exports, "ActionButton", ({ enumerable: true, get: function () { return __importDefault(ActionButton_1).default; } }));
 var IconButton_1 = __webpack_require__(/*! ./IconButton */ "./src/components/Button/IconButton.tsx");
 Object.defineProperty(exports, "IconButton", ({ enumerable: true, get: function () { return __importDefault(IconButton_1).default; } }));
 
@@ -1694,9 +1698,11 @@ 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: [
+/**
+ * A container for grouping buttons that semantically share a common action context.
+ */
+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',
@@ -1708,7 +1714,7 @@ const ButtonGroup = (0, react_1.forwardRef)(function ButtonGroup({ align = 'star
         ]
             .filter(Boolean)
             .join(' '), role: 'group', ...props, children: children }));
-});
+}
 exports["default"] = ButtonGroup;
 
 
@@ -1745,6 +1751,9 @@ const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 const WRAPPER_LIMIT_SIZE = 420;
+/**
+ * The `Callout` is used to get the user's attention explaining something important in the content of the current page.
+ */
 const Callout = ({ type, title, children, icon, className, actions, ...props }) => {
     const { ref, borderBoxSize } = (0, fuselage_hooks_1.useResizeObserver)();
     const isLarge = borderBoxSize.inlineSize && borderBoxSize.inlineSize >= WRAPPER_LIMIT_SIZE;
@@ -2009,7 +2018,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)(() => {
@@ -2024,7 +2033,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;
 
 
@@ -2143,6 +2152,13 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.ts");
+/**
+ * The `CodeSnippet` is used to show code or commands and make easier to copy them.
+ *
+ * The default button text is `Copy` but you can use the `buttonText` prop to handle translations in your project.
+ *
+ * Please check the `useClipBoard` hook in `fuselage-hooks` package, to handle the copy behaviour.
+ */
 const CodeSnippet = ({ children, onClick, buttonText = 'Copy', buttonDisabled = false, ...props }) => {
     if (!children) {
         return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'pre', "rcx-code-snippet": true, ...props, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { w: '100%', "aria-hidden": true, "aria-busy": true }) }));
@@ -2183,9 +2199,12 @@ 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 }));
-});
+/**
+ * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
+ */
+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);
 
 
@@ -2253,9 +2272,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);
 
 
@@ -2276,9 +2295,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);
 
 
@@ -2295,9 +2314,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);
 
 
@@ -2349,9 +2368,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);
 
 
@@ -2450,9 +2469,12 @@ 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 }));
-});
+/**
+ * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
+ */
+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);
 
 
@@ -2520,9 +2542,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);
 
 
@@ -2543,9 +2565,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);
 
 
@@ -2562,9 +2584,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);
 
 
@@ -2618,9 +2640,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);
 
 
@@ -2757,13 +2779,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;
 
 
@@ -2777,13 +2798,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 }) }));
+}
 
 
 /***/ },
@@ -2796,17 +2816,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 });
+}
 
 
 /***/ },
@@ -2819,13 +2838,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 }) }));
+}
 
 
 /***/ },
@@ -2857,12 +2875,13 @@ 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 });
-});
+/**
+ * An input for email addresses.
+ */
+function EmailInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'email', ...props });
+}
 exports["default"] = EmailInput;
 
 
@@ -2899,6 +2918,9 @@ 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");
 exports.FieldContext = (0, react_1.createContext)(false);
+/**
+ * A `Field` is a wrapper representing an entry in a form.
+ */
 function Field(props) {
     return ((0, jsx_runtime_1.jsx)(exports.FieldContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-field": true, ...props }) }));
 }
@@ -3003,18 +3025,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;
 
 
@@ -3148,6 +3169,9 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
 const patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
+/**
+ * A container for grouping fields that semantically share a common data context.
+ */
 const FieldGroup = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'fieldset', "rcx-field-group": true, role: 'group', ...props, children: (0, patchChildren_1.patchChildren)(children, (childProps) => ({
         className: (0, appendClassName_1.appendClassName)(childProps.className, 'rcx-field-group__item'),
     })) }));
@@ -3274,17 +3298,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Flex = exports.FlexItem = exports.FlexContainer = void 0;
-const FlexContainer_1 = __importDefault(__webpack_require__(/*! ./FlexContainer */ "./src/components/Flex/FlexContainer.tsx"));
-const FlexItem_1 = __importDefault(__webpack_require__(/*! ./FlexItem */ "./src/components/Flex/FlexItem.tsx"));
-var FlexContainer_2 = __webpack_require__(/*! ./FlexContainer */ "./src/components/Flex/FlexContainer.tsx");
-Object.defineProperty(exports, "FlexContainer", ({ enumerable: true, get: function () { return __importDefault(FlexContainer_2).default; } }));
-var FlexItem_2 = __webpack_require__(/*! ./FlexItem */ "./src/components/Flex/FlexItem.tsx");
-Object.defineProperty(exports, "FlexItem", ({ enumerable: true, get: function () { return __importDefault(FlexItem_2).default; } }));
-exports.Flex = {
-    Container: FlexContainer_1.default,
-    Item: FlexItem_1.default,
-};
+exports.FlexItem = exports.FlexContainer = void 0;
+var FlexContainer_1 = __webpack_require__(/*! ./FlexContainer */ "./src/components/Flex/FlexContainer.tsx");
+Object.defineProperty(exports, "FlexContainer", ({ enumerable: true, get: function () { return __importDefault(FlexContainer_1).default; } }));
+var FlexItem_1 = __webpack_require__(/*! ./FlexItem */ "./src/components/Flex/FlexItem.tsx");
+Object.defineProperty(exports, "FlexItem", ({ enumerable: true, get: function () { return __importDefault(FlexItem_1).default; } }));
 
 
 /***/ },
@@ -3393,11 +3411,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;
 
 
@@ -3430,11 +3447,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;
 
 
@@ -3458,10 +3474,17 @@ 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) {
+/**
+ * A decorated input control with support for addons.
+ *
+ * Usually you'll perfer to use `-Input` (e.g. <LinkTo kind='Forms/TextInput' story='Default'>`TextInput`</LinkTo>)
+ * components over this one because it works as a construction block for them.
+ */
+// eslint-disable-next-line complexity
+function InputBox({ ref, className, 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;
+    let defaultAddon = endAddon;
     (0, react_1.useLayoutEffect)(() => {
         if (innerRef.current && innerRef.current.setCustomValidity) {
             innerRef.current.setCustomValidity(error || '');
@@ -3496,7 +3519,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;
 
 
@@ -3511,11 +3534,13 @@ 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 });
-});
+/**
+ * An addon for the input box.
+ */
+function InputBoxAddon(props) {
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-input-box__addon": true, ...props });
+}
 exports["default"] = InputBoxAddon;
 
 
@@ -3589,11 +3614,14 @@ 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) {
+/**
+ * A caption for an input component.
+ */
+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;
 
 
@@ -3651,6 +3679,9 @@ const patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "
 const useStyle_1 = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/useStyle.ts");
 const styleTokens_1 = __webpack_require__(/*! ../../styleTokens */ "./src/styleTokens.ts");
 const BoxTransforms_1 = __webpack_require__(/*! ../Box/BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
+/**
+ * Add margins to the wrapped component.
+ */
 const Margins = (props) => {
     const { children, className, all, block, blockStart, blockEnd, inline, inlineStart, inlineEnd, } = props;
     const transformFn = (0, react_1.useCallback)((props) => {
@@ -3835,6 +3866,8 @@ const MenuOption_1 = __importDefault(__webpack_require__(/*! ./MenuOption */ "./
 function MenuItem({ item, state }) {
     const ref = (0, react_1.useRef)(null);
     const { menuItemProps: { onPointerUp, ...menuItemProps }, isFocused, isDisabled, } = (0, react_aria_1.useMenuItem)({ key: item.key }, state, ref);
+    // There's an issue caused by conflicting event handlers. The popover opens on onPointerDown and the selection event for both, the menu (listbox), happens on onPointerUp.
+    // As a workaround, we are overwriting `onPointerDown` event with `onPointerUp`
     return ((0, jsx_runtime_1.jsxs)(MenuOption_1.default, { ...(0, react_aria_1.mergeProps)(menuItemProps, { onPointerDown: onPointerUp }), ref: ref, focus: isFocused, disabled: isDisabled, is: 'label', variant: item.value?.variant, children: [(0, jsx_runtime_1.jsx)("div", { className: 'rcx-option__wrapper', children: item.rendered }), item.value && item.value.description && ((0, jsx_runtime_1.jsx)(_1.MenuItemDescription, { children: item.value.description }))] }));
 }
 exports["default"] = MenuItem;
@@ -3853,8 +3886,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;
@@ -3870,7 +3903,7 @@ const MenuOption = (0, react_2.forwardRef)(function MenuOption({ is: Tag = 'li',
         ]
             .filter(Boolean)
             .join(' ') }, children));
-});
+}
 exports["default"] = (0, react_2.memo)(MenuOption);
 
 
@@ -3926,6 +3959,7 @@ function MenuSection({ section, state, }) {
     const { separatorProps } = (0, react_aria_1.useSeparator)({
         elementType: 'span',
     });
+    // If the section is not the first, add a separator element.
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.key !== state.collection.getFirstKey() && ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { ...separatorProps })), (0, jsx_runtime_1.jsxs)("div", { ...itemProps, children: [section.rendered && ((0, jsx_runtime_1.jsx)(Option_1.OptionTitle, { ...headingProps, children: section.rendered })), (0, jsx_runtime_1.jsx)(Box_1.Box, { ...groupProps, p: '0', children: [...section.childNodes].map((node) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: node, state: state }, node.key))) })] })] }));
 }
 exports["default"] = MenuSection;
@@ -3943,6 +3977,7 @@ exports["default"] = MenuSection;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getPlacement = void 0;
 const getPlacement = (placement) => {
+    // switch case for placement from usePosition placement to react-aria
     switch (placement) {
         case 'bottom':
             return 'bottom';
@@ -4136,10 +4171,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',
@@ -4150,7 +4184,7 @@ const Message = (0, react_1.forwardRef)(function Message({ className, clickable,
         ]
             .filter(Boolean)
             .join(' ')), ...props }));
-});
+}
 exports["default"] = Message;
 
 
@@ -4165,9 +4199,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;
 
 
@@ -4767,10 +4802,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;
 
 
@@ -4788,18 +4822,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;
 
 
@@ -4872,11 +4905,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;
 
 
@@ -4949,11 +4981,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;
 
 
@@ -5189,11 +5220,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;
 
 
@@ -5208,11 +5238,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;
 
 
@@ -5227,16 +5256,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;
 
 
@@ -5585,16 +5613,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;
 
 
@@ -5870,7 +5898,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");
@@ -5879,11 +5906,14 @@ const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.t
 const Margins_1 = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
 const Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/index.ts");
 const Options_1 = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
-const Position_1 = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
+const PositionAnimated_1 = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
 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) => {
+/**
+ * An input for selection of options.
+ */
+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)();
@@ -5918,15 +5948,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();
@@ -5936,26 +5957,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);
@@ -5968,8 +5970,8 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
                                                 }, children: getLabel(currentOption) }, String(value)));
                                         })] }) }) }) }) }) }), (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 }) }) })] }));
-});
+                                : 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, 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;
 
 
@@ -5987,11 +5989,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;
 
 
@@ -6012,10 +6013,15 @@ 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) => {
+const MultiSelectFilteredContext_1 = __webpack_require__(/*! ./MultiSelectFilteredContext */ "./src/components/MultiSelect/MultiSelectFilteredContext.ts");
+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)(MultiSelectFilteredContext_1.MultiSelectFilteredContext.Provider, { value: {
+            placeholder,
+            filter: propFilter || filter,
+            setFilter: propSetFilter || setFilter,
+        }, children: (0, jsx_runtime_1.jsx)(MultiSelect_1.default, { ...props, filter: propFilter || filter, setFilter: propSetFilter || setFilter, options: options, anchor: MultiSelectFilteredAnchor_1.default }) }));
+}
 exports["default"] = MultiSelectFiltered;
 
 
@@ -6033,12 +6039,29 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 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' }) }));
-});
+const MultiSelectFilteredContext_1 = __webpack_require__(/*! ./MultiSelectFilteredContext */ "./src/components/MultiSelect/MultiSelectFilteredContext.ts");
+function MultiSelectFilteredAnchor({ children: _children, ...props }) {
+    const { placeholder, filter, setFilter } = (0, react_1.use)(MultiSelectFilteredContext_1.MultiSelectFilteredContext);
+    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) => setFilter?.(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, order: 1, autoComplete: 'off' }) }));
+}
 exports["default"] = MultiSelectFilteredAnchor;
 
 
+/***/ },
+
+/***/ "./src/components/MultiSelect/MultiSelectFilteredContext.ts"
+/*!******************************************************************!*\
+  !*** ./src/components/MultiSelect/MultiSelectFilteredContext.ts ***!
+  \******************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.MultiSelectFilteredContext = void 0;
+const react_1 = __webpack_require__(/*! react */ "react");
+exports.MultiSelectFilteredContext = (0, react_1.createContext)({});
+
+
 /***/ },
 
 /***/ "./src/components/MultiSelect/SelectedOptions.tsx"
@@ -6120,9 +6143,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;
 
 
@@ -6137,17 +6161,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;
 
 
@@ -6166,17 +6188,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 react_is_1 = __webpack_require__(/*! react-is */ "react-is");
+const react_keyed_flatten_children_1 = __importDefault(__webpack_require__(/*! react-keyed-flatten-children */ "react-keyed-flatten-children"));
 const NavBarDivider_1 = __importDefault(__webpack_require__(/*! ./NavBarDivider */ "./src/components/NavBar/NavBarDivider.tsx"));
-const NavBarGroup_1 = __importDefault(__webpack_require__(/*! ./NavBarGroup */ "./src/components/NavBar/NavBarGroup.tsx"));
-const isNavBarGroup = (child) => {
-    if (!(0, react_1.isValidElement)(child))
-        return false;
-    const component = child.type;
-    return component.displayName === NavBarGroup_1.default.displayName;
-};
 const NavBarSection = ({ children, ...props }) => {
-    const validChildren = react_1.Children.toArray(children).filter(isNavBarGroup);
-    return ((0, jsx_runtime_1.jsx)("span", { className: 'rcx-navbar-section', ...props, children: react_1.Children.toArray(children).map((child, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [child, index < validChildren.length - 1 && (0, jsx_runtime_1.jsx)(NavBarDivider_1.default, {})] }, index))) }));
+    const groups = (0, react_keyed_flatten_children_1.default)(children).filter(react_is_1.isElement);
+    return ((0, jsx_runtime_1.jsx)("span", { className: 'rcx-navbar-section', ...props, children: groups.map((child, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [child, index < groups.length - 1 && (0, jsx_runtime_1.jsx)(NavBarDivider_1.default, {})] }, index))) }));
 };
 exports["default"] = NavBarSection;
 
@@ -6218,11 +6235,13 @@ 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 });
-});
+/**
+ * An input for numbers.
+ */
+function NumberInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'number', ...props });
+}
 exports["default"] = NumberInput;
 
 
@@ -6288,8 +6307,11 @@ 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) => {
+/**
+ * The generic `Option` item of options. Can be freely used or inside the `Options` as well.
+ */
+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;
@@ -6311,7 +6333,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);
 
 
@@ -6561,13 +6583,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;
 
 
@@ -6592,7 +6613,10 @@ 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) {
+/**
+ * An input for selection of options.
+ */
+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) {
@@ -6609,7 +6633,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);
@@ -6617,19 +6641,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;
 
 
@@ -6763,7 +6785,7 @@ const useCursor = (initial, options, onChange) => {
                 e.preventDefault();
                 if (visibility === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
                     e.persist();
-                    e.nativeEvent.stopImmediatePropagation();
+                    e.nativeEvent.stopImmediatePropagation(); // TODO
                     e.stopPropagation();
                 }
                 hide();
@@ -6775,7 +6797,7 @@ const useCursor = (initial, options, onChange) => {
                 hide();
                 if (visibility === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
                     e.persist();
-                    e.nativeEvent.stopImmediatePropagation();
+                    e.nativeEvent.stopImmediatePropagation(); // TODO
                     e.stopPropagation();
                     return false;
                 }
@@ -6831,7 +6853,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");
@@ -6847,7 +6870,10 @@ 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) => {
+/**
+ * An input for selection of options.
+ */
+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) => {
@@ -6856,8 +6882,11 @@ exports.OptionsPaginated = (0, react_2.forwardRef)(({ withTitle, multiple, rende
                 return false;
             }, 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 })) })) }) }));
-});
+    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, 
+                // TODO Add a scroller element
+                // components={{ Scroller: ScrollableContentWrapper }}
+                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));
@@ -6920,7 +6949,7 @@ const Margins_1 = __webpack_require__(/*! ../Margins */ "./src/components/Margin
 const Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/index.ts");
 const useVisible_1 = __webpack_require__(/*! ../Options/useVisible */ "./src/components/Options/useVisible.ts");
 const OptionsPaginated_1 = __webpack_require__(/*! ../OptionsPaginated */ "./src/components/OptionsPaginated/index.ts");
-const Position_1 = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
+const PositionAnimated_1 = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
 const SelectAddon_1 = __importDefault(__webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx"));
 const SelectFocus_1 = __importDefault(__webpack_require__(/*! ../Select/SelectFocus */ "./src/components/Select/SelectFocus.tsx"));
 const PaginatedMultiSelect = ({ withTitle, value, filter, options = [], error, disabled, anchor: Anchor = SelectFocus_1.default, onChange = () => { }, placeholder, renderOptions: OptionsComponent = OptionsPaginated_1.OptionsPaginated, renderItem = Option_1.Option, endReached, ...props }) => {
@@ -6965,9 +6994,9 @@ const PaginatedMultiSelect = ({ withTitle, value, filter, options = [], error, d
                                                 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
                                 ? 'cross'
-                                : '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)(OptionsComponent, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, role: 'listbox', options: options, cursor: -1, endReached: endReached, renderItem: renderItem, onSelect: ([value]) => {
-                            toggleOption(value);
-                        } }) }) })] }));
+                                : 'chevron-down', size: 'x20' }) }) }) }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: visible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(OptionsComponent, { width: borderBoxSize.inlineSize, onMouseDown: prevent_1.prevent, multiple: true, filter: filter, role: 'listbox', options: options, cursor: -1, endReached: endReached, renderItem: renderItem, onSelect: ([value]) => {
+                        toggleOption(value);
+                    } }) })] }));
 };
 exports["default"] = PaginatedMultiSelect;
 
@@ -6986,12 +7015,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;
@@ -7033,7 +7062,7 @@ const PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, erro
     const [visible, hide, show] = (0, useVisible_1.useVisible)();
     const internalChangedByClick = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
-        onChange(value);
+        onChange(value); // FIXME
         hide();
     });
     const ref = (0, react_1.useRef)(null);
@@ -7070,14 +7099,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;
@@ -7094,11 +7122,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;
 
 
@@ -7146,14 +7173,18 @@ const Pagination = ({ count, current = 0, itemsPerPage = 25, itemsPerPageLabel =
     const pages = Math.ceil(count / itemsPerPage);
     const displayedPages = (0, react_1.useMemo)(() => {
         if (pages <= 7) {
+            // 0 1 2 3 4 5 6
             return Array.from({ length: pages }, (_, i) => i);
         }
         if (currentPage < 5) {
+            // 0 1 2 3 4 ... N
             return [0, 1, 2, 3, 4, '⋯', pages - 1];
         }
         if (currentPage > pages - 5) {
+            // 0 ... N-4 N-3 N-2 N-1 N
             return [0, '⋯', pages - 5, pages - 4, pages - 3, pages - 2, pages - 1];
         }
+        // 0 ... x-1 x x-2 ... N
         return [
             0,
             '⋯',
@@ -7220,6 +7251,13 @@ const themes = {
     dark: themePalettes_1.dark,
     'high-contrast': themePalettes_1.highContrast,
 };
+/**
+ * Style tag to handle the theme of the application.
+ *
+ * Import `PaletteStyleTag` and use it on the application informing the desired theme.
+ *
+ * Toggle the theme on Storybook's Control panel to see the color changes.
+ */
 function PaletteStyleTag({ theme = 'light', tagId = 'main-palette', prefix = '--rcx-color', selector, palette, }) {
     const themePalette = palette || (0, convertToCss_1.convertToCss)(themes[theme], prefix, selector);
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)(themePalette, (0, useCreateStyleContainer_1.useCreateStyleContainer)(tagId)) });
@@ -7700,16 +7738,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;
 
 
@@ -7779,10 +7816,10 @@ Object.defineProperty(exports, "Popover", ({ enumerable: true, get: function ()
 
 /***/ },
 
-/***/ "./src/components/Position/Position.tsx"
-/*!**********************************************!*\
-  !*** ./src/components/Position/Position.tsx ***!
-  \**********************************************/
+/***/ "./src/components/PositionAnimated/Position.tsx"
+/*!******************************************************!*\
+  !*** ./src/components/PositionAnimated/Position.tsx ***!
+  \******************************************************/
 (__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -7821,24 +7858,6 @@ const Position = ({ anchor, children, placement, margin, className: _className,
 exports["default"] = Position;
 
 
-/***/ },
-
-/***/ "./src/components/Position/index.ts"
-/*!******************************************!*\
-  !*** ./src/components/Position/index.ts ***!
-  \******************************************/
-(__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 }));
-exports.Position = void 0;
-var Position_1 = __webpack_require__(/*! ./Position */ "./src/components/Position/Position.tsx");
-Object.defineProperty(exports, "Position", ({ enumerable: true, get: function () { return __importDefault(Position_1).default; } }));
-
-
 /***/ },
 
 /***/ "./src/components/PositionAnimated/PositionAnimated.tsx"
@@ -7848,11 +7867,14 @@ Object.defineProperty(exports, "Position", ({ enumerable: true, get: function ()
 (__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 AnimatedVisibility_1 = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
-const Position_1 = __webpack_require__(/*! ../Position */ "./src/components/Position/index.ts");
-const PositionAnimated = ({ width: _width, visible, children, ...props }) => ((0, jsx_runtime_1.jsx)(AnimatedVisibility_1.AnimatedVisibility, { visibility: visible, children: (0, jsx_runtime_1.jsx)(Position_1.Position, { ...props, children: children }) }));
+const Position_1 = __importDefault(__webpack_require__(/*! ./Position */ "./src/components/PositionAnimated/Position.tsx"));
+const PositionAnimated = ({ width: _width, visible, children, ...props }) => ((0, jsx_runtime_1.jsx)(AnimatedVisibility_1.AnimatedVisibility, { visibility: visible, children: (0, jsx_runtime_1.jsx)(Position_1.default, { ...props, children: children }) }));
 exports["default"] = PositionAnimated;
 
 
@@ -7885,7 +7907,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 = {
@@ -7906,9 +7927,12 @@ 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) }) }));
-});
+/**
+ * The `ProgressBar` is used to inform the user the progress of an operation.
+ */
+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;
 
 
@@ -7941,11 +7965,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;
 
 
@@ -8003,6 +8026,9 @@ const pollTouchingEdges = (element, touchingEdgesRef, onScrollContent) => {
         onScrollContent?.(newTouchingEdges);
     }
 };
+/**
+ * Add scroll capability to the wrapped component.
+ */
 const Scrollable = ({ children, horizontal, vertical, smooth, onScrollContent, }) => {
     const scrollTimeoutRef = (0, react_1.useRef)(undefined);
     const touchingEdgesRef = (0, react_1.useRef)({});
@@ -8104,11 +8130,13 @@ 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 });
-});
+/**
+ * An input for search queries.
+ */
+function SearchInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'search', ...props });
+}
 exports["default"] = SearchInput;
 
 
@@ -8178,12 +8206,14 @@ 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) {
+/**
+ * An input for selection of options.
+ */
+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;
 
 
@@ -8198,11 +8228,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;
 
 
@@ -8216,10 +8245,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");
@@ -8230,7 +8259,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,
@@ -8245,7 +8274,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,12 +8292,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 _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) {
+const SelectFilteredContext_1 = __webpack_require__(/*! ./SelectFilteredContext */ "./src/components/Select/SelectFilteredContext.ts");
+const SelectLegacy_1 = __importDefault(__webpack_require__(/*! ./SelectLegacy */ "./src/components/Select/SelectLegacy.tsx"));
+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)(SelectFilteredContext_1.SelectFilteredContext.Provider, { value: {
+            placeholder,
+            filter: propFilter || filter,
+            setFilter: propSetFilter || setFilter,
+        }, children: (0, jsx_runtime_1.jsx)(SelectLegacy_1.default, { placeholder: placeholder, filter: propFilter || filter, options: options, ...props, anchor: SelectFilteredAnchor_1.default }) }));
+}
 exports["default"] = SelectFiltered;
 
 
@@ -8285,12 +8319,29 @@ 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 }));
-});
+const SelectFilteredContext_1 = __webpack_require__(/*! ./SelectFilteredContext */ "./src/components/Select/SelectFilteredContext.ts");
+function SelectFilteredAnchor({ children: _children, ...props }) {
+    const { placeholder, filter, setFilter } = (0, react_1.use)(SelectFilteredContext_1.SelectFilteredContext);
+    return ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onInput: (e) => setFilter?.(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }));
+}
 exports["default"] = SelectFilteredAnchor;
 
 
+/***/ },
+
+/***/ "./src/components/Select/SelectFilteredContext.ts"
+/*!********************************************************!*\
+  !*** ./src/components/Select/SelectFilteredContext.ts ***!
+  \********************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.SelectFilteredContext = void 0;
+const react_1 = __webpack_require__(/*! react */ "react");
+exports.SelectFilteredContext = (0, react_1.createContext)({});
+
+
 /***/ },
 
 /***/ "./src/components/Select/SelectFocus.tsx"
@@ -8302,11 +8353,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;
 
 
@@ -8326,7 +8376,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");
@@ -8335,7 +8384,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);
@@ -8346,11 +8395,11 @@ 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) {
+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);
-        onChange(value);
+        onChange(value); // FIXME
     });
     const option = options.find((option) => getValue(option) === internalValue);
     const index = options.indexOf(option);
@@ -8370,19 +8419,10 @@ const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filt
     const removeFocusClass = () => innerRef.current?.classList.remove('focus-visible');
     const internalChangedByClick = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
-        onChange(value);
+        onChange(value); // FIXME
         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);
@@ -8399,18 +8439,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;
 
 
@@ -8424,12 +8456,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',
@@ -8438,7 +8469,7 @@ exports.SelectTrigger = (0, react_1.forwardRef)(({ small, error, isDisabled, foc
         ]
             .filter(Boolean)
             .join(' '), children: props.children }));
-});
+}
 
 
 /***/ },
@@ -8463,96 +8494,6 @@ var SelectFiltered_1 = __webpack_require__(/*! ./SelectFiltered */ "./src/compon
 Object.defineProperty(exports, "SelectFiltered", ({ enumerable: true, get: function () { return __importDefault(SelectFiltered_1).default; } }));
 
 
-/***/ },
-
-/***/ "./src/components/SelectInput/SelectInput.tsx"
-/*!****************************************************!*\
-  !*** ./src/components/SelectInput/SelectInput.tsx ***!
-  \****************************************************/
-(__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 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) {
-    const [isPlaceholderVisible, setPlaceholderVisible] = (0, react_1.useState)(!props.value && !props.defaultValue);
-    const handleChange = (0, react_1.useCallback)((event) => {
-        setPlaceholderVisible(!event.currentTarget.value);
-        onChange?.call(event.currentTarget, event);
-    }, [onChange]);
-    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] }));
-});
-exports["default"] = SelectInput;
-
-
-/***/ },
-
-/***/ "./src/components/SelectInput/SelectInputOption.tsx"
-/*!**********************************************************!*\
-  !*** ./src/components/SelectInput/SelectInputOption.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 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 });
-});
-exports["default"] = SelectInputOption;
-
-
-/***/ },
-
-/***/ "./src/components/SelectInput/SelectInputPlaceholder.tsx"
-/*!***************************************************************!*\
-  !*** ./src/components/SelectInput/SelectInputPlaceholder.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 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 });
-});
-exports["default"] = SelectInputPlaceholder;
-
-
-/***/ },
-
-/***/ "./src/components/SelectInput/index.ts"
-/*!*********************************************!*\
-  !*** ./src/components/SelectInput/index.ts ***!
-  \*********************************************/
-(__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 }));
-exports.SelectInputOption = exports.SelectInput = void 0;
-var SelectInput_1 = __webpack_require__(/*! ./SelectInput */ "./src/components/SelectInput/SelectInput.tsx");
-Object.defineProperty(exports, "SelectInput", ({ enumerable: true, get: function () { return __importDefault(SelectInput_1).default; } }));
-var SelectInputOption_1 = __webpack_require__(/*! ./SelectInputOption */ "./src/components/SelectInput/SelectInputOption.tsx");
-Object.defineProperty(exports, "SelectInputOption", ({ enumerable: true, get: function () { return __importDefault(SelectInputOption_1).default; } }));
-
-
 /***/ },
 
 /***/ "./src/components/Sidebar/Item.tsx"
@@ -8595,7 +8536,10 @@ exports.SidebarItemAvatar = SidebarItemAvatar;
 exports.SidebarItemActions = SidebarActions_1.SidebarActions;
 const SidebarItemAction = (props) => ((0, jsx_runtime_1.jsx)(SidebarActions_1.SidebarAction, { ...props }));
 exports.SidebarItemAction = SidebarItemAction;
-exports.SidebarItem = Object.assign(({ selected, highlighted, clickable, featured, is: Tag = 'div', children, ...props }) => ((0, jsx_runtime_1.jsx)(Tag, { className: [
+/**
+ * Item component to be used inside Sidebar.
+ */
+const SidebarItem = ({ selected, highlighted, clickable, featured, is: Tag = 'div', children, ...props }) => ((0, jsx_runtime_1.jsx)(Tag, { className: [
         'rc-box rcx-box--full rcx-sidebar-item',
         highlighted && 'rcx-sidebar-item--highlighted',
         (clickable || Tag === 'a') && 'rcx-sidebar-item--clickable',
@@ -8603,20 +8547,8 @@ exports.SidebarItem = Object.assign(({ selected, highlighted, clickable, feature
         featured && 'rcx-sidebar-item--featured',
     ]
         .filter(Boolean)
-        .join(' '), ...props, children: (0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-item__wrapper', children: children }) })), {
-    Menu: exports.SidebarItemMenu,
-    Container: exports.SidebarItemContainer,
-    Content: exports.SidebarItemContent,
-    Title: exports.SidebarItemTitle,
-    Subtitle: exports.SidebarItemSubtitle,
-    Time: exports.SidebarItemTime,
-    Wrapper: exports.SidebarItemWrapper,
-    Icon: exports.SidebarItemIcon,
-    Avatar: exports.SidebarItemAvatar,
-    Actions: exports.SidebarItemActions,
-    Action: exports.SidebarItemAction,
-    Badge: exports.SidebarItemBadge,
-});
+        .join(' '), ...props, children: (0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-item__wrapper', children: children }) }));
+exports.SidebarItem = SidebarItem;
 
 
 /***/ },
@@ -8633,9 +8565,8 @@ exports.SidebarSection = exports.SidebarSectionTitle = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const SidebarSectionTitle = (props) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-title', ...props }));
 exports.SidebarSectionTitle = SidebarSectionTitle;
-exports.SidebarSection = Object.assign((props) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-section', ...props })), {
-    Title: exports.SidebarSectionTitle,
-});
+const SidebarSection = (props) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-section', ...props }));
+exports.SidebarSection = SidebarSection;
 
 
 /***/ },
@@ -8647,24 +8578,10 @@ exports.SidebarSection = Object.assign((props) => ((0, jsx_runtime_1.jsx)("div",
 (__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 Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const Item_1 = __webpack_require__(/*! ./Item */ "./src/components/Sidebar/Item.tsx");
-const Section_1 = __webpack_require__(/*! ./Section */ "./src/components/Sidebar/Section.tsx");
-const SidebarBanner_1 = __importDefault(__webpack_require__(/*! ./SidebarBanner */ "./src/components/Sidebar/SidebarBanner.tsx"));
-const SidebarDivider_1 = __importDefault(__webpack_require__(/*! ./SidebarDivider */ "./src/components/Sidebar/SidebarDivider.tsx"));
-const TopBar_1 = __importDefault(__webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar/index.ts"));
-const Sidebar = Object.assign((props) => (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-sidebar": true, ...props }), {
-    TopBar: TopBar_1.default,
-    Item: Item_1.SidebarItem,
-    Section: Section_1.SidebarSection,
-    Divider: SidebarDivider_1.default,
-    Banner: SidebarBanner_1.default,
-});
+const Sidebar = (props) => (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-sidebar": true, ...props });
 exports["default"] = Sidebar;
 
 
@@ -8678,17 +8595,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 });
+}
 
 
 /***/ },
@@ -8763,6 +8680,9 @@ exports.SidebarFooterHighlight = SidebarFooterHighlight;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBar = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/**
+ * Sidebar TopBar and ToolBox.
+ */
 const TopBar = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: ['rc-box rc-box--full rcx-sidebar-topbar', className]
         .filter(Boolean)
         .join(' '), ...props }));
@@ -8779,13 +8699,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 });
+}
 
 
 /***/ },
@@ -8798,13 +8717,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 });
+}
 
 
 /***/ },
@@ -8932,31 +8850,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBarAvatar = void 0;
-const SidebarDivider_1 = __importDefault(__webpack_require__(/*! ../SidebarDivider */ "./src/components/Sidebar/SidebarDivider.tsx"));
-const TopBar_1 = __webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar/TopBar.tsx");
-const TopBarAction_1 = __webpack_require__(/*! ./TopBarAction */ "./src/components/Sidebar/TopBar/TopBarAction.tsx");
-const TopBarActions_1 = __webpack_require__(/*! ./TopBarActions */ "./src/components/Sidebar/TopBar/TopBarActions.tsx");
-const TopBarSection_1 = __webpack_require__(/*! ./TopBarSection */ "./src/components/Sidebar/TopBar/TopBarSection.tsx");
-const TopBarTitle_1 = __webpack_require__(/*! ./TopBarTitle */ "./src/components/Sidebar/TopBar/TopBarTitle.tsx");
-const TopBarToolBox_1 = __webpack_require__(/*! ./TopBarToolBox */ "./src/components/Sidebar/TopBar/TopBarToolBox.tsx");
-const TopBarWrapper_1 = __webpack_require__(/*! ./TopBarWrapper */ "./src/components/Sidebar/TopBar/TopBarWrapper.tsx");
-const Avatar = { size: 'x24' };
-exports.TopBarAvatar = Avatar;
-exports["default"] = Object.assign(TopBar_1.TopBar, {
-    Section: TopBarSection_1.TopBarSection,
-    ToolBox: TopBarToolBox_1.TopBarToolBox,
-    Wrapper: TopBarWrapper_1.TopBarWrapper,
-    Avatar: exports.TopBarAvatar,
-    Actions: TopBarActions_1.TopBarActions,
-    Action: TopBarAction_1.TopBarAction,
-    Divider: SidebarDivider_1.default,
-    Title: TopBarTitle_1.TopBarTitle,
-});
+exports.TopBarAvatar = { size: 'x24' };
 __exportStar(__webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar/TopBar.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./TopBarV2 */ "./src/components/Sidebar/TopBar/TopBarV2.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./TopBarAction */ "./src/components/Sidebar/TopBar/TopBarAction.tsx"), exports);
@@ -8994,14 +8890,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SidebarDivider = exports.SidebarBanner = exports.SidebarTopBar = exports.Sidebar = void 0;
+exports.SidebarDivider = exports.SidebarBanner = exports.SidebarTopBarToolBox = exports.SidebarTopBarAvatar = exports.SidebarTopBarActions = exports.SidebarTopBarAction = exports.SidebarTopBarTitle = exports.SidebarTopBar = exports.Sidebar = void 0;
 var Sidebar_1 = __webpack_require__(/*! ./Sidebar */ "./src/components/Sidebar/Sidebar.tsx");
 Object.defineProperty(exports, "Sidebar", ({ enumerable: true, get: function () { return __importDefault(Sidebar_1).default; } }));
 __exportStar(__webpack_require__(/*! ./Item */ "./src/components/Sidebar/Item.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./Section */ "./src/components/Sidebar/Section.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar/index.ts"), exports);
 var TopBar_1 = __webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar/index.ts");
-Object.defineProperty(exports, "SidebarTopBar", ({ enumerable: true, get: function () { return __importDefault(TopBar_1).default; } }));
+Object.defineProperty(exports, "SidebarTopBar", ({ enumerable: true, get: function () { return TopBar_1.TopBar; } }));
+Object.defineProperty(exports, "SidebarTopBarTitle", ({ enumerable: true, get: function () { return TopBar_1.TopBarTitle; } }));
+Object.defineProperty(exports, "SidebarTopBarAction", ({ enumerable: true, get: function () { return TopBar_1.TopBarAction; } }));
+Object.defineProperty(exports, "SidebarTopBarActions", ({ enumerable: true, get: function () { return TopBar_1.TopBarActions; } }));
+Object.defineProperty(exports, "SidebarTopBarAvatar", ({ enumerable: true, get: function () { return TopBar_1.TopBarAvatar; } }));
+Object.defineProperty(exports, "SidebarTopBarToolBox", ({ enumerable: true, get: function () { return TopBar_1.TopBarToolBox; } }));
 var SidebarBanner_1 = __webpack_require__(/*! ./SidebarBanner */ "./src/components/Sidebar/SidebarBanner.tsx");
 Object.defineProperty(exports, "SidebarBanner", ({ enumerable: true, get: function () { return __importDefault(SidebarBanner_1).default; } }));
 __exportStar(__webpack_require__(/*! ./SidebarFooter */ "./src/components/Sidebar/SidebarFooter.tsx"), exports);
@@ -9019,17 +8920,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 }));
+}
 
 
 /***/ },
@@ -9100,11 +9002,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;
 
 
@@ -9119,11 +9020,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;
 
 
@@ -9171,12 +9071,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,
@@ -9188,7 +9087,7 @@ exports.SidebarCollapseGroup = (0, react_1.forwardRef)(({ expanded: propExpanded
                 ]
                     .filter(Boolean)
                     .join(' '), id: panelId, children: children })] }));
-});
+}
 
 
 /***/ },
@@ -9535,15 +9434,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 }));
+}
 
 
 /***/ },
@@ -9894,10 +9794,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;
 
 
@@ -9912,12 +9811,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;
 
 
@@ -10043,8 +9941,9 @@ 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;
+    // Get a defaultValue in the range for multiThumb
     const getMultiThumbDefaultValue = () => {
         if (multiThumb && !props.defaultValue) {
             if (minValue && maxValue) {
@@ -10090,7 +9989,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;
 
 
 /***/ },
@@ -10497,6 +10396,9 @@ const Disabled_1 = __importDefault(__webpack_require__(/*! ./icons/Disabled */ "
 const Loading_1 = __importDefault(__webpack_require__(/*! ./icons/Loading */ "./src/components/StatusBullet/icons/Loading.tsx"));
 const Offline_1 = __importDefault(__webpack_require__(/*! ./icons/Offline */ "./src/components/StatusBullet/icons/Offline.tsx"));
 const Online_1 = __importDefault(__webpack_require__(/*! ./icons/Online */ "./src/components/StatusBullet/icons/Online.tsx"));
+/**
+ * The `StatusBullet` is used to inform the user status.
+ */
 const StatusBullet = ({ status = 'loading', ...props }) => {
     switch (status) {
         case 'online':
@@ -10852,17 +10754,15 @@ __exportStar(__webpack_require__(/*! ./TableSelection */ "./src/components/Table
 (__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 Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const TabsItem_1 = __importDefault(__webpack_require__(/*! ./TabsItem */ "./src/components/Tabs/TabsItem.tsx"));
+/**
+ * Tabs is a component to navigate around the UI using buttons arranged together with the selected tab highlighted.
+ */
 function Tabs({ children, divider = true, ...props }) {
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs": true, "rcx-tabs--with-divider": divider, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__scroll-box": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__wrapper": true, children: children, role: 'tablist' }) }) }));
 }
-Tabs.Item = TabsItem_1.default;
 exports["default"] = Tabs;
 
 
@@ -10877,11 +10777,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;
 
 
@@ -10918,6 +10817,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
+/**
+ * Used for mentions
+ */
 const Tag = ({ large, medium, className, disabled, onClick, variant, children, icon, href, ...props }) => {
     const modifiers = [
         variant,
@@ -10953,43 +10855,6 @@ var Tag_1 = __webpack_require__(/*! ./Tag */ "./src/components/Tag/Tag.tsx");
 Object.defineProperty(exports, "Tag", ({ enumerable: true, get: function () { return __importDefault(Tag_1).default; } }));
 
 
-/***/ },
-
-/***/ "./src/components/TelephoneInput/TelephoneInput.tsx"
-/*!**********************************************************!*\
-  !*** ./src/components/TelephoneInput/TelephoneInput.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 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 });
-});
-exports["default"] = TelephoneInput;
-
-
-/***/ },
-
-/***/ "./src/components/TelephoneInput/index.ts"
-/*!************************************************!*\
-  !*** ./src/components/TelephoneInput/index.ts ***!
-  \************************************************/
-(__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 }));
-exports.TelephoneInput = void 0;
-var TelephoneInput_1 = __webpack_require__(/*! ./TelephoneInput */ "./src/components/TelephoneInput/TelephoneInput.tsx");
-Object.defineProperty(exports, "TelephoneInput", ({ enumerable: true, get: function () { return __importDefault(TelephoneInput_1).default; } }));
-
-
 /***/ },
 
 /***/ "./src/components/TextAreaInput/TextAreaInput.tsx"
@@ -11001,11 +10866,13 @@ 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 });
-});
+/**
+ * An input for multi-line plain-text editing.
+ */
+function TextAreaInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'textarea', ...props });
+}
 exports["default"] = TextAreaInput;
 
 
@@ -11038,11 +10905,13 @@ 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 });
-});
+/**
+ * An input for any kind of single-line text.
+ */
+function TextInput(props) {
+    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'text', ...props });
+}
 exports["default"] = TextInput;
 
 
@@ -11076,7 +10945,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) `
@@ -11084,9 +10952,12 @@ 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))) }));
-});
+/**
+ * Indicates content that has not loaded yet.
+ */
+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;
 
 
@@ -11119,11 +10990,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;
 
 
@@ -11161,6 +11031,9 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/**
+ * Shows alerts in a toast component.
+ */
 function ToastBar({ children, className = '', variant = 'info', time = 5, isPaused, id, onClose, buttonLabel = 'Dismiss alert', ...props }) {
     const iconName = (variant === 'success' && 'circle-check') ||
         (variant === 'error' && 'ban') ||
@@ -11233,11 +11106,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;
 
 
@@ -11270,7 +11142,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
@@ -11281,10 +11152,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;
 
 
@@ -11317,11 +11188,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;
 
 
@@ -11413,14 +11283,12 @@ __exportStar(__webpack_require__(/*! ./Pagination */ "./src/components/Paginatio
 __exportStar(__webpack_require__(/*! ./PaletteStyleTag */ "./src/components/PaletteStyleTag/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./PasswordInput */ "./src/components/PasswordInput/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Popover */ "./src/components/Popover/index.ts"), exports);
-__exportStar(__webpack_require__(/*! ./Position */ "./src/components/Position/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./PositionAnimated */ "./src/components/PositionAnimated/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./ProgressBar */ "./src/components/ProgressBar/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./RadioButton */ "./src/components/RadioButton/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Scrollable */ "./src/components/Scrollable/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./SearchInput */ "./src/components/SearchInput/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Select */ "./src/components/Select/index.ts"), exports);
-__exportStar(__webpack_require__(/*! ./SelectInput */ "./src/components/SelectInput/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Sidebar */ "./src/components/Sidebar/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./SidebarV2 */ "./src/components/SidebarV2/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Sidepanel */ "./src/components/Sidepanel/index.ts"), exports);
@@ -11431,7 +11299,6 @@ __exportStar(__webpack_require__(/*! ./StatusBullet */ "./src/components/StatusB
 __exportStar(__webpack_require__(/*! ./Table */ "./src/components/Table/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Tabs */ "./src/components/Tabs/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Tag */ "./src/components/Tag/index.ts"), exports);
-__exportStar(__webpack_require__(/*! ./TelephoneInput */ "./src/components/TelephoneInput/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./TextAreaInput */ "./src/components/TextAreaInput/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./TextInput */ "./src/components/TextInput/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Throbber */ "./src/components/Throbber/index.ts"), exports);
@@ -11624,6 +11491,24 @@ const composeClassNames = (prefix) => (...args) => {
     return [prefix, classNames].filter(Boolean).join(' ');
 };
 exports.composeClassNames = composeClassNames;
+/**
+ * Composes class names into a single string based on flags.
+ *
+ * Any falsy value passed as an argument will be ignored.
+ *
+ * If a string is passed, it will be used as a class name.
+ *
+ * If a dictionary object is passed, its keys will be used as class names and its values will be used as modifiers --
+ * unless the value is a boolean, in which case the key will be used as a class name if the value is `true`.
+ *
+ * @example
+ * ```ts
+ * cx('a', false, 'b', null, { c: true, d: false, e: 'f', f: 1 }); // 'a b c e-f f-1'
+ * ```
+ *
+ * @param args a sequence of falsy values, strings and dictionary objects containing the class names
+ * @returns a space-separated string of class names
+ */
 const cx = (...args) => args
     .flatMap((arg) => {
     if (!arg) {
@@ -11644,6 +11529,20 @@ const cx = (...args) => args
 })
     .join(' ');
 exports.cx = cx;
+/**
+ * Composes class name modifiers under a class name into a single class names' string based on flags.
+ *
+ * This function returns a function similar to `cx`, with the difference it handles the arguments as class name
+ * modifiers (based on BEM CSS conventions). However, it's recommended to use `cxx` as a curried function.
+ *
+ * @example
+ * ```ts
+ * cxx('z')('a', false, 'b', null, { c: true, d: false, e: 'f', f: 1 }); // 'z z--a z--b z--c z--e-f z--f-1'
+ * ```
+ * @param className the class name
+ * @param args a sequence of falsy values, strings and dictionary objects containing the modifiers
+ * @returns a space-separated string of class names
+ */
 const cxx = (className) => (...args) => {
     const classNames = args.flatMap((arg) => {
         if (!arg) {
@@ -11679,6 +11578,33 @@ exports.cxx = cxx;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.exhaustiveCheck = void 0;
+/**
+ * Utility function to check exhaustiveness of a switch statement or if-else statements.
+ *
+ * In TypeScript, variables going through a sequence of conditionals, like cases in switch statements or if-else
+ * statements, the variable type is incrementally narrowed as the conditionals are evaluated until it reaches the
+ * `never` type, meaning all possible cases have been covered. This function is used to check, at compilation time, that
+ * all possible cases have been covered (i.e. if the conditional checks were exhaustive) and should only be called in
+ * unreachable blocks of code.
+ *
+ * @example
+ * ```ts
+ * declare const value: 'foo' | 'bar';
+ * switch (value) {
+ *   case 'foo':
+ *     // ...
+ *     break;
+ *   case 'bar':
+ *     // ...
+ *     break;
+ *   default: // should be unreachable
+ *     exhaustiveCheck(value); // `value` type should be `never`, otherwise the compilation fails
+ * }
+ * ```
+ *
+ * @param _ the value which type should be `never`
+ * @throws {Error} will always throw an error if it's reached
+ */
 const exhaustiveCheck = (_) => {
     throw new Error('Exhaustive check failed');
 };
@@ -11718,21 +11644,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"
@@ -12138,6 +12049,7 @@ exports.fontColor = (0, memo_1.memoize)((value) => {
     }
     return (0, exports.color)(value);
 });
+/** @deprecated **/
 exports.color = (0, memo_1.memoize)((value) => {
     if (typeof value !== 'string') {
         return;
@@ -12243,7 +12155,7 @@ exports.fontScale = (0, memo_1.memoize)((value) => {
   \*****************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_css_in_js__;
+module.exports = require("@rocket.chat/css-in-js");
 
 /***/ },
 
@@ -12253,7 +12165,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_css_in_js__;
   \**********************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_hooks__;
+module.exports = require("@rocket.chat/fuselage-hooks");
 
 /***/ },
 
@@ -12263,7 +12175,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_hooks__;
   \***********************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_colors_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/colors.json");
 
 /***/ },
 
@@ -12273,7 +12185,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_colors_j
   \***************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_badge_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/dist/badge.json");
 
 /***/ },
 
@@ -12283,7 +12195,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_bad
   \****************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_button_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/dist/button.json");
 
 /***/ },
 
@@ -12293,7 +12205,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_but
   \**************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_font_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/dist/font.json");
 
 /***/ },
 
@@ -12303,7 +12215,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_fon
   \****************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_shadow_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/dist/shadow.json");
 
 /***/ },
 
@@ -12313,7 +12225,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_sha
   \****************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_status_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/dist/status.json");
 
 /***/ },
 
@@ -12323,7 +12235,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_sta
   \**********************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_statusBullet_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/dist/statusBullet.json");
 
 /***/ },
 
@@ -12333,7 +12245,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_sta
   \****************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_stroke_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/dist/stroke.json");
 
 /***/ },
 
@@ -12343,7 +12255,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_str
   \*****************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_surface_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/dist/surface.json");
 
 /***/ },
 
@@ -12353,7 +12265,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_dist_sur
   \***************************************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_typography_json__;
+module.exports = require("@rocket.chat/fuselage-tokens/typography.json");
 
 /***/ },
 
@@ -12363,7 +12275,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_fuselage_tokens_typograp
   \*************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_icons__;
+module.exports = require("@rocket.chat/icons");
 
 /***/ },
 
@@ -12373,7 +12285,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_icons__;
   \************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_memo__;
+module.exports = require("@rocket.chat/memo");
 
 /***/ },
 
@@ -12383,7 +12295,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_memo__;
   \****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_invariant__;
+module.exports = require("invariant");
 
 /***/ },
 
@@ -12393,7 +12305,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_invariant__;
   \************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
+module.exports = require("react");
 
 /***/ },
 
@@ -12403,7 +12315,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
   \*****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_aria__;
+module.exports = require("react-aria");
 
 /***/ },
 
@@ -12413,7 +12325,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_aria__;
   \****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
+module.exports = require("react-dom");
 
 /***/ },
 
@@ -12423,7 +12335,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
   \***************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_is__;
+module.exports = require("react-is");
 
 /***/ },
 
@@ -12433,7 +12345,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_is__;
   \***********************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_keyed_flatten_children__;
+module.exports = require("react-keyed-flatten-children");
 
 /***/ },
 
@@ -12443,7 +12355,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_keyed_flatten_children__;
   \********************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_stately__;
+module.exports = require("react-stately");
 
 /***/ },
 
@@ -12453,7 +12365,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_stately__;
   \*********************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_virtuoso__;
+module.exports = require("react-virtuoso");
 
 /***/ },
 
@@ -12463,7 +12375,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_virtuoso__;
   \************************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__;
+module.exports = require("react/jsx-runtime");
 
 /***/ }
 
@@ -12517,11 +12429,10 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__;
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
 /******/ 	var __webpack_exports__ = __webpack_require__("./src/index.ts");
+/******/ 	module.exports = __webpack_exports__;
 /******/ 	
-/******/ 	return __webpack_exports__;
 /******/ })()
 ;
-});
 })();
 }
 //# sourceMappingURL=fuselage.development.js.map