@rocket.chat/fuselage 0.81.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;
 
@@ -620,6 +613,13 @@ const Slider_1 = __webpack_require__(/*! ../Slider */ "./src/components/Slider/i
 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 }))] }));
@@ -683,12 +683,16 @@ const isSelectedValid = (value) => (selected) => {
         ? selected.value === value
         : value.includes(selected.value);
 };
+/**
+ * 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))
@@ -864,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)
@@ -1035,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 = [
@@ -1538,34 +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 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';
-};
-function ActionButton({ icon, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(_1.Button, { square: true, flexShrink: 0, ...props, children: [children, (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: getSize(props) })] }));
-}
-exports["default"] = ActionButton;
-
-
 /***/ },
 
 /***/ "./src/components/Button/Button.tsx"
@@ -1580,6 +1565,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");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/**
+ * 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,
@@ -1692,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; } }));
 
@@ -1712,6 +1698,9 @@ 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");
+/**
+ * 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',
@@ -1762,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;
@@ -2160,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 }) }));
@@ -2200,6 +2199,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");
+/**
+ * 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 }));
 }
@@ -2467,6 +2469,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");
+/**
+ * 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 }));
 }
@@ -2871,6 +2876,9 @@ 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 InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for email addresses.
+ */
 function EmailInput(props) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'email', ...props });
 }
@@ -2910,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 }) }));
 }
@@ -3158,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'),
     })) }));
@@ -3284,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; } }));
 
 
 /***/ },
@@ -3466,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"));
-function InputBox({ ref, className, addon, startAddon, endAddon, error, hidden, invisible, multiple, placeholderVisible, type = 'text', small, onChange, ...props }) {
+/**
+ * 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 || '');
@@ -3520,6 +3535,9 @@ exports["default"] = InputBox;
 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");
+/**
+ * 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 });
 }
@@ -3596,6 +3614,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");
 const LabelContext = (0, react_1.createContext)(false);
+/**
+ * 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';
@@ -3658,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) => {
@@ -3842,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;
@@ -3933,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;
@@ -3950,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';
@@ -5878,10 +5906,13 @@ 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");
+/**
+ * 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]);
@@ -5939,7 +5970,7 @@ function MultiSelect({ ref, value, filter, setFilter, options = [], error, disab
                                                 }, 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;
 
@@ -5982,9 +6013,14 @@ 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 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, 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;
 
@@ -6000,14 +6036,32 @@ exports["default"] = MultiSelectFiltered;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+const react_1 = __webpack_require__(/*! react */ "react");
 const Flex_1 = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-function MultiSelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, order: 1, autoComplete: 'off' }) }));
+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"
@@ -6134,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.name === NavBarGroup_1.default.name;
-};
 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;
 
@@ -6187,6 +6236,9 @@ 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 InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for numbers.
+ */
 function NumberInput(props) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'number', ...props });
 }
@@ -6255,6 +6307,9 @@ 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"));
+/**
+ * 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) {
@@ -6558,6 +6613,9 @@ 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"));
+/**
+ * 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)(() => {
@@ -6727,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();
@@ -6739,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;
                 }
@@ -6812,6 +6870,9 @@ 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 }) }));
 });
+/**
+ * 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;
@@ -6821,7 +6882,10 @@ function OptionsPaginated({ ref, withTitle, multiple, renderEmpty: EmptyComponen
                 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);
@@ -6885,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 }) => {
@@ -6930,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;
 
@@ -6998,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);
@@ -7109,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,
             '⋯',
@@ -7183,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)) });
@@ -7741,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__) {
 
 
@@ -7783,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"
@@ -7810,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;
 
 
@@ -7867,6 +7927,9 @@ const getColor = (isLight, variant, error) => {
     }
     return isLight ? lightColors[variant] : colors[variant];
 };
+/**
+ * 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) }) }));
 }
@@ -7963,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)({});
@@ -8065,6 +8131,9 @@ 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 InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for search queries.
+ */
 function SearchInput(props) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'search', ...props });
 }
@@ -8139,6 +8208,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
 const SelectAria_1 = __webpack_require__(/*! ./SelectAria */ "./src/components/Select/SelectAria.tsx");
+/**
+ * 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]))) }));
 }
@@ -8220,11 +8292,16 @@ 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 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, { 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;
 
@@ -8240,13 +8317,31 @@ exports["default"] = SelectFiltered;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-function SelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }));
+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"
@@ -8300,11 +8395,11 @@ const useDidUpdate = (func, deps) => {
         didMount.current = true;
     }, deps || []);
 };
-const SelectLegacy = function SelectLegacy({ ref, value, filter, error, disabled, options = [], anchor: Anchor = SelectFocus_1.default, onChange = () => { }, getValue = ([value] = ['', '']) => value, getLabel = ([, label] = ['', '']) => label, placeholder = '', renderItem, renderSelected: RenderSelected, renderOptions: _Options = Options_1.Options, addonIcon, customEmpty, ...props }) {
+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);
@@ -8324,7 +8419,7 @@ const SelectLegacy = function SelectLegacy({ ref, value, filter, error, disabled
     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();
     });
@@ -8347,7 +8442,7 @@ const SelectLegacy = function SelectLegacy({ ref, value, filter, error, disabled
                         (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;
 
 
@@ -8399,94 +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"));
-function SelectInput({ ref, children, multiple, placeholder, onChange, ...props }) {
-    const [isPlaceholderVisible, setPlaceholderVisible] = (0, react_1.useState)(!props.value && !props.defaultValue);
-    const handleChange = (0, react_1.useCallback)((event) => {
-        setPlaceholderVisible(!event.currentTarget.value);
-        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, endAddon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'chevron-down', size: 'x20' }), type: 'select', onChange: handleChange, children: [placeholder && ((0, jsx_runtime_1.jsx)(SelectInputPlaceholder_1.default, { value: '', children: placeholder })), children] }));
-}
-exports["default"] = SelectInput;
-
-
-/***/ },
-
-/***/ "./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 Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-function SelectInputOption(props) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'option', "rcx-input-box__option": true, ...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 Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-function SelectInputPlaceholder(props) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'option', "rcx-input-box__placeholder": true, ...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"
@@ -8529,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',
@@ -8537,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;
 
 
 /***/ },
@@ -8567,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;
 
 
 /***/ },
@@ -8581,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;
 
 
@@ -8697,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 }));
@@ -8864,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);
@@ -8926,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);
@@ -9974,6 +9943,7 @@ const SliderThumb_1 = __webpack_require__(/*! ./SliderThumb */ "./src/components
 const SliderTrack_1 = __webpack_require__(/*! ./SliderTrack */ "./src/components/Slider/SliderTrack.tsx");
 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) {
@@ -10426,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':
@@ -10781,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;
 
 
@@ -10846,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,
@@ -10881,42 +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 InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
-function TelephoneInput(props) {
-    return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'tel', ...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"
@@ -10929,6 +10867,9 @@ 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 InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for multi-line plain-text editing.
+ */
 function TextAreaInput(props) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'textarea', ...props });
 }
@@ -10965,6 +10906,9 @@ 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 InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for any kind of single-line text.
+ */
 function TextInput(props) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, { type: 'text', ...props });
 }
@@ -11008,6 +10952,9 @@ function Circle({ disabled, circleCount, iteration, inheritColor, ...props }) {
         animation-delay: ${iteration * 0.16}s;
       `, "rcx-throbber__circle": true, "rcx-throbber__circle--disabled": disabled, "rcx-throbber__circle--inherit-color": inheritColor, ...props }));
 }
+/**
+ * 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))) }));
 }
@@ -11084,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') ||
@@ -11333,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);
@@ -11351,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);
@@ -11544,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) {
@@ -11564,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) {
@@ -11599,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');
 };
@@ -12043,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;
@@ -12148,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");
 
 /***/ },
 
@@ -12158,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");
 
 /***/ },
 
@@ -12168,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");
 
 /***/ },
 
@@ -12178,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");
 
 /***/ },
 
@@ -12188,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");
 
 /***/ },
 
@@ -12198,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");
 
 /***/ },
 
@@ -12208,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");
 
 /***/ },
 
@@ -12218,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");
 
 /***/ },
 
@@ -12228,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");
 
 /***/ },
 
@@ -12238,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");
 
 /***/ },
 
@@ -12248,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");
 
 /***/ },
 
@@ -12258,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");
 
 /***/ },
 
@@ -12268,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");
 
 /***/ },
 
@@ -12278,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");
 
 /***/ },
 
@@ -12288,7 +12295,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_memo__;
   \****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_invariant__;
+module.exports = require("invariant");
 
 /***/ },
 
@@ -12298,7 +12305,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_invariant__;
   \************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
+module.exports = require("react");
 
 /***/ },
 
@@ -12308,7 +12315,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
   \*****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_aria__;
+module.exports = require("react-aria");
 
 /***/ },
 
@@ -12318,7 +12325,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_aria__;
   \****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
+module.exports = require("react-dom");
 
 /***/ },
 
@@ -12328,7 +12335,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
   \***************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_is__;
+module.exports = require("react-is");
 
 /***/ },
 
@@ -12338,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");
 
 /***/ },
 
@@ -12348,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");
 
 /***/ },
 
@@ -12358,7 +12365,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_stately__;
   \*********************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_virtuoso__;
+module.exports = require("react-virtuoso");
 
 /***/ },
 
@@ -12368,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");
 
 /***/ }
 
@@ -12422,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