@rocket.chat/fuselage 0.81.0 → 0.83.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;
 
@@ -459,7 +452,7 @@ const AnimatedVisibility = (props) => {
     if (visibility === AnimatedVisibility.HIDDEN) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: props.children, value: composedFn }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: composedFn, children: props.children }));
 };
 AnimatedVisibility.HIDDEN = 'hidden';
 AnimatedVisibility.VISIBLE = 'visible';
@@ -575,7 +568,7 @@ const AudioPlayer = ({ ref, src, type = 'audio/mpeg', maxPlaybackSpeed = 2, minP
         handlePlaybackSpeed(1);
     };
     const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
-    return ((0, jsx_runtime_1.jsxs)(__1.Box, { borderWidth: 'default', bg: 'tint', borderColor: 'extra-light', pb: 12, pie: 8, pis: 16, borderRadius: 'x4', w: '100%', maxWidth: 'x300', ref: containerRef, display: 'flex', alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(AudioPlayerControls_1.default, { isPlaying: isPlaying, currentTime: currentTime, durationTime: durationTime, playbackSpeed: playbackSpeed, onTogglePlay: handlePlay, onSeek: (time) => {
+    return ((0, jsx_runtime_1.jsxs)(__1.Box, { borderWidth: 'default', backgroundColor: 'tint', borderColor: 'extra-light', paddingBlock: 12, paddingInlineEnd: 8, paddingInlineStart: 16, borderRadius: 'x4', width: '100%', maxWidth: 'x300', ref: containerRef, display: 'flex', alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(AudioPlayerControls_1.default, { isPlaying: isPlaying, currentTime: currentTime, durationTime: durationTime, playbackSpeed: playbackSpeed, onTogglePlay: handlePlay, onSeek: (time) => {
                     if (audioRef.current) {
                         audioRef.current.currentTime = time;
                     }
@@ -620,9 +613,16 @@ 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);
-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
+/**
+ * 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', width: '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 }))] }));
+                        : getMaskTime(durationTime) }), (0, jsx_runtime_1.jsx)(__1.Box, { width: 'full', children: (0, jsx_runtime_1.jsx)(Slider_1.Slider, { "aria-label": audioPlaybackRangeLabel, showOutput: false, value: currentTime, maxValue: durationTime, onChange: (value) => onSeek(Array.isArray(value) ? value[0] : value) }) }), (0, jsx_runtime_1.jsxs)(__1.Button, { secondary: true, small: true, onClick: onChangePlaybackSpeed, "aria-label": changePlaybackSpeedLabel, children: [playbackSpeed, "x"] })] }), download && ((0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, is: 'a', href: downloadHref, download: true, icon: 'download', "aria-label": downloadAudioFileLabel, onClick: onDownload }))] }));
 exports["default"] = AudioPlayerControls;
 
 
@@ -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))
@@ -732,7 +736,7 @@ function AutoComplete({ ref, value, filter, setFilter, options = [], renderItem,
     (0, react_1.useEffect)(reset, [filter, reset]);
     return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useStableCallback)(() => innerRef.current?.focus()), flexGrow: 1, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: mergedRefs, onChange: (0, fuselage_hooks_1.useStableCallback)((e) => setFilter?.(e.currentTarget.value)), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN || !value
                                 ? placeholder
-                                : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled, ...props }), selected.map((itemSelected) => RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { value: itemSelected.value, children: itemSelected.label, onClick: handleRemove }, itemSelected.value)))] }) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-autocomplete__addon": true, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
+                                : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled, ...props }), selected.map((itemSelected) => RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { value: itemSelected.value, onClick: handleRemove, children: itemSelected.label }, itemSelected.value)))] }) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-autocomplete__addon": true, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                         ? 'cross'
                         : 'magnifier', size: 'x20', color: 'default' }) }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: optionsAreVisible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(Options_1.Options, { width: borderBoxSize.inlineSize, onSelect: handleSelect, renderItem: renderItem, renderEmpty: renderEmpty, cursor: cursor, value: value, options: memoizedOptions }) })] }));
 }
@@ -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)
@@ -984,7 +991,7 @@ function Box({ is = 'div', ...props }) {
     const propsWithoutBoxOnlyProps = (0, useBoxOnlyProps_1.useBoxOnlyProps)(propsWithoutStylingProps);
     const element = (0, react_1.createElement)(is, propsWithoutBoxOnlyProps);
     if (transformFn) {
-        return (0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: element, value: null });
+        return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: null, children: element }));
     }
     return element;
 }
@@ -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 = [
@@ -1141,9 +1154,6 @@ const lineHeightProp = {
 const letterSpacingProp = {
     toCSSValue: (value) => value ? String((0, styleTokens_1.fontScale)(value)?.letterSpacing || value) : undefined,
 };
-const aliasOf = (propName) => ({
-    aliasOf: propName,
-});
 exports.propDefs = {
     border: stringProp,
     borderBlock: stringProp,
@@ -1180,7 +1190,6 @@ exports.propDefs = {
     borderEndEndRadius: borderRadiusProp,
     color: fontColorProp,
     backgroundColor: backgroundColorProp,
-    bg: aliasOf('backgroundColor'),
     opacity: numberOrStringProp,
     alignItems: stringProp,
     alignContent: stringProp,
@@ -1197,11 +1206,9 @@ exports.propDefs = {
     gap: gapProp,
     rowGap: gapProp,
     columnGap: gapProp,
-    w: aliasOf('width'),
     width: sizeProp,
     minWidth: sizeProp,
     maxWidth: sizeProp,
-    h: aliasOf('height'),
     height: sizeProp,
     minHeight: sizeProp,
     maxHeight: sizeProp,
@@ -1220,33 +1227,19 @@ exports.propDefs = {
     insetInline: insetProp,
     insetInlineStart: insetProp,
     insetInlineEnd: insetProp,
-    m: aliasOf('margin'),
     margin: marginProp,
-    mb: aliasOf('marginBlock'),
     marginBlock: marginProp,
-    mbs: aliasOf('marginBlockStart'),
     marginBlockStart: marginProp,
-    mbe: aliasOf('marginBlockEnd'),
     marginBlockEnd: marginProp,
-    mi: aliasOf('marginInline'),
     marginInline: marginProp,
-    mis: aliasOf('marginInlineStart'),
     marginInlineStart: marginProp,
-    mie: aliasOf('marginInlineEnd'),
     marginInlineEnd: marginProp,
-    p: aliasOf('padding'),
     padding: paddingProp,
-    pb: aliasOf('paddingBlock'),
     paddingBlock: paddingProp,
-    pbs: aliasOf('paddingBlockStart'),
     paddingBlockStart: paddingProp,
-    pbe: aliasOf('paddingBlockEnd'),
     paddingBlockEnd: paddingProp,
-    pi: aliasOf('paddingInline'),
     paddingInline: paddingProp,
-    pis: aliasOf('paddingInlineStart'),
     paddingInlineStart: paddingProp,
-    pie: aliasOf('paddingInlineEnd'),
     paddingInlineEnd: paddingProp,
     fontFamily: fontFamilyProp,
     fontSize: fontSizeProp,
@@ -1345,19 +1338,6 @@ exports.propDefs = {
     },
 };
 const compiledPropDefs = new Map(Object.entries(exports.propDefs).map(([propName, propDef]) => {
-    if ('aliasOf' in propDef) {
-        const { aliasOf: effectivePropName } = propDef;
-        return [
-            propName,
-            (value, stylingProps) => {
-                if (stylingProps.has(effectivePropName)) {
-                    return;
-                }
-                const inject = compiledPropDefs.get(effectivePropName);
-                inject?.(value, stylingProps);
-            },
-        ];
-    }
     if ('toCSSValue' in propDef) {
         const cssProperty = (0, fromCamelToKebab_1.fromCamelToKebab)(propName);
         const { toCSSValue } = propDef;
@@ -1516,7 +1496,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.BubbleItem = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const BubbleItem = ({ secondary, label, icon, ...props }) => ((0, jsx_runtime_1.jsxs)("span", { className: `rcx-bubble__item ${secondary ? 'rcx-bubble__item--secondary' : 'rcx-bubble__item--primary'}`, ...props, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 'x16', mie: 8 }), label && (0, jsx_runtime_1.jsx)("span", { children: label })] }));
+const BubbleItem = ({ secondary, label, icon, ...props }) => ((0, jsx_runtime_1.jsxs)("span", { className: `rcx-bubble__item ${secondary ? 'rcx-bubble__item--secondary' : 'rcx-bubble__item--primary'}`, ...props, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 'x16', marginInlineEnd: 8 }), label && (0, jsx_runtime_1.jsx)("span", { children: label })] }));
 exports.BubbleItem = BubbleItem;
 
 
@@ -1538,34 +1518,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 +1532,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,
@@ -1605,7 +1560,7 @@ function Button({ ref, primary, secondary, danger, warning, success, external, i
         }
         return {};
     }, [primary, secondary, danger, warning, success]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: is, type: 'button', "rcx-button": true, ...kindAndVariantProps, "rcx-button--small": small, "rcx-button--medium": medium, "rcx-button--large": large, "rcx-button--square": square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, "rcx-button--small-square": small && square, "rcx-button--medium-square": medium && square, "rcx-button--large-square": large && square, "rcx-button--loading": loading, disabled: disabled || loading, ref: ref, ...extraProps, ...props, children: (0, jsx_runtime_1.jsxs)("span", { className: 'rcx-button--content', children: [icon && !loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: icon, mie: 4 }), loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: 'loading', mie: 4 }), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: is, type: 'button', "rcx-button": true, ...kindAndVariantProps, "rcx-button--small": small, "rcx-button--medium": medium, "rcx-button--large": large, "rcx-button--square": square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, "rcx-button--small-square": small && square, "rcx-button--medium-square": medium && square, "rcx-button--large-square": large && square, "rcx-button--loading": loading, disabled: disabled || loading, ref: ref, ...extraProps, ...props, children: (0, jsx_runtime_1.jsxs)("span", { className: 'rcx-button--content', children: [icon && !loading && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: icon, marginInlineEnd: 4 })), loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: 'loading', marginInlineEnd: 4 }), children] }) }));
 }
 exports["default"] = Button;
 
@@ -1692,11 +1647,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 +1665,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 +1718,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;
@@ -1952,7 +1911,7 @@ 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 Grid_1 = __webpack_require__(/*! ../Grid */ "./src/components/Grid/index.ts");
-const CardGrid = ({ children, breakpoints, ...props }) => ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { "rcx-card-grid": true, m: -8, ...props, children: react_1.Children.map(children, (child) => ((0, jsx_runtime_1.jsx)(Grid_1.GridItem, { "rcx-card-grid__item": true, p: 8, ...breakpoints, children: child }))) }));
+const CardGrid = ({ children, breakpoints, ...props }) => ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { "rcx-card-grid": true, margin: -8, ...props, children: react_1.Children.map(children, (child) => ((0, jsx_runtime_1.jsx)(Grid_1.GridItem, { "rcx-card-grid__item": true, padding: 8, ...breakpoints, children: child }))) }));
 exports["default"] = CardGrid;
 
 
@@ -2079,7 +2038,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 function Chevron({ up, right, down, left, size, ...props }) {
     const children = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'chevron-down', size: size }), [size]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', children: children, "rcx-chevron": true, "rcx-chevron--up": up, "rcx-chevron--right": right, "rcx-chevron--down": down, "rcx-chevron--left": left, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-chevron": true, "rcx-chevron--up": up, "rcx-chevron--right": right, "rcx-chevron--down": down, "rcx-chevron--left": left, ...props, children: children }));
 }
 exports["default"] = Chevron;
 
@@ -2160,9 +2119,16 @@ 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 }) }));
+        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, { width: '100%', "aria-hidden": true, "aria-busy": true }) }));
     }
     return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'pre', "rcx-code-snippet": true, ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { role: 'code', "rcx-code-snippet__codebox": true, children: children }), onClick && children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { small: true, primary: true, onClick: onClick, disabled: buttonDisabled, children: buttonText }) }))] }));
 };
@@ -2200,8 +2166,11 @@ 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");
-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 }));
+/**
+ * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
+ */
+function Contextualbar({ width, position, backgroundColor = 'room', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(__1.Box, { "rcx-vertical-bar": true, backgroundColor: backgroundColor, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
 }
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
@@ -2313,7 +2282,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function ContextualbarFooter(props) {
-    return (0, jsx_runtime_1.jsx)(__1.Box, { p: 24, ...props });
+    return (0, jsx_runtime_1.jsx)(__1.Box, { padding: 24, ...props });
 }
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -2332,7 +2301,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Margins_1 = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x56', pi: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: children }) }) }));
+const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x56', paddingInline: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: children }) }) }));
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
 
 
@@ -2349,7 +2318,7 @@ 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 ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, pi: 2, size: 'x24' }));
+const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, paddingInline: 2, size: 'x24' }));
 exports["default"] = (0, react_1.memo)(ContextualbarIcon);
 
 
@@ -2367,7 +2336,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarSection(props) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, pi: 24, pb: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, paddingInline: 24, paddingBlock: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
 }
 exports["default"] = (0, react_1.memo)(ContextualbarSection);
 
@@ -2391,7 +2360,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.ts");
 const Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/Contextualbar/Contextualbar.tsx"));
 const ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./ContextualbarHeader */ "./src/components/Contextualbar/ContextualbarHeader.tsx"));
-const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { p: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
+const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { padding: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { marginBlockEnd: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
                     .fill(5)
                     .map((_, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}, index)))] })] }));
 exports["default"] = (0, react_1.memo)(ContextualbarSkeleton);
@@ -2467,8 +2436,11 @@ 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");
-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 }));
+/**
+ * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
+ */
+function Contextualbar({ width, position, backgroundColor = 'room', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar": true, backgroundColor: backgroundColor, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
 }
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
@@ -2580,7 +2552,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarFooter(props) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { pi: 16, pb: 20, ...props });
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInline: 16, paddingBlock: 20, ...props });
 }
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -2599,7 +2571,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x44', pi: 16, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', mi: -4, pi: 4, className: (0, css_in_js_1.css) `
+const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x44', paddingInline: 16, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', marginInline: -4, paddingInline: 4, className: (0, css_in_js_1.css) `
         gap: 8px;
       `, children: children }) }));
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
@@ -2618,7 +2590,7 @@ 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 ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, pi: 2, size: 'x20' }));
+const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, paddingInline: 2, size: 'x20' }));
 exports["default"] = (0, react_1.memo)(ContextualbarIcon);
 
 
@@ -2636,7 +2608,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarSection(props) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, p: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, padding: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
 }
 exports["default"] = (0, react_1.memo)(ContextualbarSection);
 
@@ -2660,7 +2632,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.ts");
 const Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/ContextualbarV2/Contextualbar.tsx"));
 const ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./ContextualbarHeader */ "./src/components/ContextualbarV2/ContextualbarHeader.tsx"));
-const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { p: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
+const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { padding: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { marginBlockEnd: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
                     .fill(5)
                     .map((_, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}, index)))] })] }));
 exports["default"] = (0, react_1.memo)(ContextualbarSkeleton);
@@ -2778,7 +2750,7 @@ const DropdownDesktopWrapper_1 = __webpack_require__(/*! ./DropdownDesktopWrappe
 const DropdownMobile_1 = __webpack_require__(/*! ./DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
 function Dropdown({ ref, children, reference, placement = 'bottom-start', }) {
     const notSmall = (0, fuselage_hooks_1.useMediaQuery)('(min-width: 500px)');
-    return notSmall ? ((0, jsx_runtime_1.jsx)(DropdownDesktopWrapper_1.DropdownDesktopWrapper, { reference: reference, children: children, placement: placement, ref: ref })) : ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { children: children, ref: ref }));
+    return notSmall ? ((0, jsx_runtime_1.jsx)(DropdownDesktopWrapper_1.DropdownDesktopWrapper, { reference: reference, placement: placement, ref: ref, children: children })) : ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { ref: ref, children: children }));
 }
 exports["default"] = Dropdown;
 
@@ -2797,7 +2769,7 @@ exports.DropdownDesktop = DropdownDesktop;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function DropdownDesktop({ children, style, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(__1.Tile, { style: style, elevation: '2', pi: '0', pb: '0', display: 'flex', flexDirection: 'column', overflow: 'auto', "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 12, children: style?.visibility === 'hidden' ? null : children }) }));
+    return ((0, jsx_runtime_1.jsx)(__1.Tile, { style: style, elevation: '2', paddingInline: '0', paddingBlock: '0', display: 'flex', flexDirection: 'column', overflow: 'auto', "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, paddingBlock: 12, children: style?.visibility === 'hidden' ? null : children }) }));
 }
 
 
@@ -2837,7 +2809,7 @@ exports.DropdownMobile = DropdownMobile;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function DropdownMobile({ children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(__1.Tile, { elevation: '2', pi: '0', pb: '0', w: '100vw', maxHeight: '80%', position: 'fixed', display: 'flex', flexDirection: 'column', overflow: 'auto', style: { bottom: 0, left: 0 }, zIndex: 2, "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 16, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(__1.Tile, { elevation: '2', paddingInline: '0', paddingBlock: '0', width: '100vw', maxHeight: '80%', position: 'fixed', display: 'flex', flexDirection: 'column', overflow: 'auto', style: { bottom: 0, left: 0 }, zIndex: 2, "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, paddingBlock: 16, children: children }) }));
 }
 
 
@@ -2871,6 +2843,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 +2885,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 +3136,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'),
     })) }));
@@ -3226,7 +3207,7 @@ function FlexContainer({ inline = false, children, direction, wrap, alignItems,
         }
         return props;
     }, [alignContent, alignItems, direction, inline, justifyContent, wrap]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 }
 exports["default"] = FlexContainer;
 
@@ -3266,7 +3247,7 @@ function FlexItem({ children, order, grow, shrink, basis, align, }) {
         }
         return props;
     }, [align, basis, grow, order, shrink]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 }
 exports["default"] = FlexItem;
 
@@ -3284,17 +3265,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; } }));
 
 
 /***/ },
@@ -3405,7 +3380,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const icons_1 = __importDefault(__webpack_require__(/*! @rocket.chat/icons */ "@rocket.chat/icons"));
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function Icon({ name, size, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-icon": true, "rcx-icon--name": name, children: icons_1.default[name], "aria-hidden": 'true', fontSize: size, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-icon": true, "rcx-icon--name": name, "aria-hidden": 'true', fontSize: size, ...props, children: icons_1.default[name] }));
 }
 exports["default"] = Icon;
 
@@ -3466,10 +3441,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 +3502,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,10 +3581,13 @@ 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';
-    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: component, "rcx-label": true, "rcx-label--disabled": disabled, ...props, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-label__required": true, mis: 'x4', "aria-hidden": 'true', children: "*" }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: component, "rcx-label": true, "rcx-label--disabled": disabled, ...props, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-label__required": true, marginInlineStart: 'x4', "aria-hidden": 'true', children: "*" }))] }) }));
 }
 exports["default"] = Label;
 
@@ -3618,7 +3606,7 @@ exports.LabelInfo = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const LabelInfo = ({ title, id, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'span', mi: 2, "rcx-label__info": true, children: [(0, jsx_runtime_1.jsx)("span", { hidden: true, id: id, children: title }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, name: 'info-circled', title: title })] }));
+const LabelInfo = ({ title, id, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'span', marginInline: 2, "rcx-label__info": true, children: [(0, jsx_runtime_1.jsx)("span", { hidden: true, id: id, children: title }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, name: 'info-circled', title: title })] }));
 exports.LabelInfo = LabelInfo;
 
 
@@ -3658,6 +3646,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) => {
@@ -3719,7 +3710,7 @@ const Margins = (props) => {
     const patchedChildren = (0, patchChildren_1.patchChildren)(children, (childProps) => ({
         className: (0, appendClassName_1.appendClassName)(childProps.className, (0, appendClassName_1.appendClassName)(className, marginsClassName)),
     }));
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: patchedChildren, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: patchedChildren }));
 };
 exports["default"] = Margins;
 
@@ -3842,6 +3833,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,7 +3926,8 @@ function MenuSection({ section, state, }) {
     const { separatorProps } = (0, react_aria_1.useSeparator)({
         elementType: 'span',
     });
-    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))) })] })] }));
+    // 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, padding: '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 +3944,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';
@@ -5643,7 +5638,7 @@ 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 Scrollable_1 = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
-const ModalContent = ({ children, onScrollContent, ...props }) => ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, onScrollContent: onScrollContent, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content-wrapper": true, mi: 24, ...props, children: children }) }) }));
+const ModalContent = ({ children, onScrollContent, ...props }) => ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, onScrollContent: onScrollContent, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content-wrapper": true, marginInline: 24, ...props, children: children }) }) }));
 exports["default"] = ModalContent;
 
 
@@ -5757,7 +5752,7 @@ 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 Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const ModalIcon = ({ size = 'x20', name, alignItems = 'center', ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { ...props, display: 'flex', alignItems: alignItems, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { mb: 4, name: name, size: size }) }));
+const ModalIcon = ({ size = 'x20', name, alignItems = 'center', ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { ...props, display: 'flex', alignItems: alignItems, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { marginBlock: 4, name: name, size: size }) }));
 exports["default"] = ModalIcon;
 
 
@@ -5878,10 +5873,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 +5937,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 +5980,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 +6003,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 +6155,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 +6203,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 +6274,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 +6580,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 +6752,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 +6764,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 +6837,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 +6849,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 +6916,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 +6961,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 +7029,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);
@@ -7017,7 +7048,7 @@ const PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, erro
             return show();
         }
     });
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(PaginatedSelectWrapper_1.default, { display: 'flex', mi: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText && ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', mi: 4, "rcx-select__item": true, fontScale: 'p2m', color: valueLabel ? 'default' : 'hint', children: visibleText })), (0, jsx_runtime_1.jsx)(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide }), (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
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(PaginatedSelectWrapper_1.default, { display: 'flex', marginInline: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText && ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', marginInline: 4, "rcx-select__item": true, fontScale: 'p2m', color: valueLabel ? 'default' : 'hint', children: visibleText })), (0, jsx_runtime_1.jsx)(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide }), (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'
                                     : 'chevron-down', size: 'x20' }) }) })] }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: visible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { withTitle: withTitle, width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: options, onSelect: internalChangedByClick, endReached: endReached, onMouseDown: prevent_1.prevent, renderItem: renderItem }) })] }));
 };
@@ -7039,7 +7070,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const PaginatedSelect_1 = __webpack_require__(/*! ./PaginatedSelect */ "./src/components/PaginatedSelect/PaginatedSelect.tsx");
 const PaginatedSelectFiltered = ({ filter, setFilter, options, placeholder, ...props }) => {
-    const anchor = (0, react_1.useMemo)(() => ({ filter, onChange: _onChange, ...props }) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onChange: (e) => {
+    const anchor = (0, react_1.useMemo)(() => ({ filter, onChange: _onChange, ...props }) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { marginInline: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onChange: (e) => {
             setFilter(e.currentTarget.value);
         }, ...props, "rcx-input-box--undecorated": true })), [placeholder, setFilter]);
     return ((0, jsx_runtime_1.jsx)(PaginatedSelect_1.PaginatedSelect, { placeholder: undefined, filter: filter, options: options, ...props, anchor: anchor }));
@@ -7109,14 +7140,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 +7218,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 +7783,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 +7825,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 +7834,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,8 +7894,11 @@ 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) }) }));
+    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, { backgroundColor: getColor(light, variant, error), "rcx-progress-bar__fill--animated": animated, "rcx-progress-bar__fill": true, width: getWidth(percentage) }) }));
 }
 exports["default"] = ProgressBar;
 
@@ -7963,6 +7993,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)({});
@@ -8030,7 +8063,7 @@ const Scrollable = ({ children, horizontal, vertical, smooth, onScrollContent, }
         }
         return props;
     }, [className, handleScroll, onScrollContent]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 };
 exports["default"] = Scrollable;
 
@@ -8065,6 +8098,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 +8175,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 +8259,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 +8284,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, { marginInline: 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 +8362,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 +8386,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();
     });
@@ -8343,11 +8405,11 @@ const SelectLegacy = function SelectLegacy({ ref, value, filter, error, disabled
         innerRef.current?.focus();
         return show();
     });
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(Wrapper, { display: 'flex', mi: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText &&
-                        (RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, onClick: internalChangedByClick }, getValue(option))) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', mi: 4, "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint', children: visibleText }))), (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
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(Wrapper, { display: 'flex', marginInline: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText &&
+                        (RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, onClick: internalChangedByClick }, getValue(option))) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', marginInline: 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 +8461,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 +8503,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 +8514,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 +8532,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 +8545,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;
 
 
@@ -8658,7 +8608,7 @@ exports["default"] = SidebarBanner;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidebarDivider = () => (0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar--divider": true, mbs: -2, mbe: 0 });
+const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports["default"] = SidebarDivider;
 
 
@@ -8697,6 +8647,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 +8817,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 +8857,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);
@@ -9134,7 +9070,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarDivider = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar-v2--divider": true, mbs: -2, mbe: 0 }));
+const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar-v2--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports.SidebarDivider = SidebarDivider;
 
 
@@ -9774,7 +9710,7 @@ exports["default"] = Sidepanel;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidepanelDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidepanel--divider": true, mbs: -2, mbe: 0 }));
+const SidepanelDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidepanel--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports["default"] = SidepanelDivider;
 
 
@@ -9974,6 +9910,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 +10363,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':
@@ -10603,7 +10543,7 @@ const TableCell = ({ align, clickable, children, ...props }) => {
     const isInsideHead = (0, react_1.useContext)(TableHead_1.TableHeadContext);
     const innerElement = children ??
         (!isInsideHead ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'inline-block', is: 'hr', width: 'x14', borderWidth: 1 })) : undefined);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: isInsideHead ? 'th' : 'td', "rcx-table__cell": true, "rcx-table__cell--align": align, "rcx-table__cell--header": isInsideHead, "rcx-table__cell--clickable": clickable, children: innerElement, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: isInsideHead ? 'th' : 'td', "rcx-table__cell": true, "rcx-table__cell--align": align, "rcx-table__cell--header": isInsideHead, "rcx-table__cell--clickable": clickable, ...props, children: innerElement }));
 };
 exports["default"] = TableCell;
 
@@ -10671,7 +10611,7 @@ exports["default"] = TableRow;
 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 TableSelection = ({ children, text, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-table__selection": true, display: 'flex', alignItems: 'center', justifyContent: 'space-between', pi: 24, elevation: '2', ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { fontScale: 'p2b', mb: 16, flexShrink: 1, withTruncatedText: true, children: text }), children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { mi: 'neg-x8', fontScale: 'p2m', flexShrink: 0, children: children }))] }));
+const TableSelection = ({ children, text, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-table__selection": true, display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingInline: 24, elevation: '2', ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { fontScale: 'p2b', marginBlock: 16, flexShrink: 1, withTruncatedText: true, children: text }), children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x8', fontScale: 'p2m', flexShrink: 0, children: children }))] }));
 exports["default"] = TableSelection;
 
 
@@ -10781,17 +10721,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' }) }) }));
+    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, role: 'tablist', children: children }) }) }));
 }
-Tabs.Item = TabsItem_1.default;
 exports["default"] = Tabs;
 
 
@@ -10846,6 +10784,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 +10822,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 +10834,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 +10873,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 +10919,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 +10998,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 +11250,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 +11266,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 +11458,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 +11496,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 +11545,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 +12016,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 +12122,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 +12132,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 +12142,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 +12152,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 +12162,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 +12172,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 +12182,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 +12192,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 +12202,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 +12212,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 +12222,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 +12232,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 +12242,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 +12252,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 +12262,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__rocket_chat_memo__;
   \****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_invariant__;
+module.exports = require("invariant");
 
 /***/ },
 
@@ -12298,7 +12272,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_invariant__;
   \************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
+module.exports = require("react");
 
 /***/ },
 
@@ -12308,7 +12282,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
   \*****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_aria__;
+module.exports = require("react-aria");
 
 /***/ },
 
@@ -12318,7 +12292,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_aria__;
   \****************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
+module.exports = require("react-dom");
 
 /***/ },
 
@@ -12328,7 +12302,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
   \***************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_is__;
+module.exports = require("react-is");
 
 /***/ },
 
@@ -12338,7 +12312,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 +12322,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 +12332,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_stately__;
   \*********************************/
 (module) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_react_virtuoso__;
+module.exports = require("react-virtuoso");
 
 /***/ },
 
@@ -12368,7 +12342,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 +12396,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