@rocket.chat/fuselage 0.58.0 → 0.58.2

package/dist/fuselage.development.js

@@ -1964,6 +1964,9 @@ exports.Accordion = Accordion;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var AccordionItem_1 = __webpack_require__(/*! ./AccordionItem */ "./src/components/Accordion/AccordionItem.tsx");
+/**
+ * An `Accordion` allows users to toggle the display of sections of content.
+ */
 function Accordion(props) {
     return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({ animated: true, "rcx-accordion": true }, props));
 }
@@ -2087,10 +2090,10 @@ exports.AccordionItem = AccordionItem;
 
 /***/ }),
 
-/***/ "./src/components/Accordion/index.tsx":
-/*!********************************************!*\
-  !*** ./src/components/Accordion/index.tsx ***!
-  \********************************************/
+/***/ "./src/components/Accordion/index.ts":
+/*!*******************************************!*\
+  !*** ./src/components/Accordion/index.ts ***!
+  \*******************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -2297,6 +2300,9 @@ var getDurationForInfinityDurationAudioFile = function (src, callback) {
         audioElement.remove();
     });
 };
+/**
+ * A Fuselage’s custom AudioPlayer.
+ */
 exports.AudioPlayer = (0, react_1.forwardRef)(function (_a, ref) {
     var src = _a.src, _b = _a.type, type = _b === void 0 ? 'audio/mpeg' : _b, _c = _a.maxPlaybackSpeed, maxPlaybackSpeed = _c === void 0 ? 2 : _c, _d = _a.minPlaybackSpeed, minPlaybackSpeed = _d === void 0 ? 0.5 : _d, _e = _a.playbackSpeedStep, playbackSpeedStep = _e === void 0 ? 0.25 : _e, _f = _a.download, download = _f === void 0 ? false : _f, _g = _a.playLabel, playLabel = _g === void 0 ? 'Play' : _g, _h = _a.pauseLabel, pauseLabel = _h === void 0 ? 'Pause' : _h, _j = _a.audioPlaybackRangeLabel, audioPlaybackRangeLabel = _j === void 0 ? 'Audio Playback Range' : _j, _k = _a.changePlaybackSpeedLabel, changePlaybackSpeedLabel = _k === void 0 ? 'Change Playback Speed' : _k, _l = _a.downloadAudioFileLabel, downloadAudioFileLabel = _l === void 0 ? 'Download Audio File' : _l;
     var audioRef = (0, react_1.useRef)(null);
@@ -2469,6 +2475,9 @@ var getSelected = function (value, options) {
         ? options.filter(function (option) { return option.value === value; })
         : options === null || options === void 0 ? void 0 : options.filter(function (option) { return value.includes(option.value); });
 };
+/**
+ * An input for selection of options.
+ */
 function AutoComplete(_a) {
     var value = _a.value, filter = _a.filter, setFilter = _a.setFilter, _b = _a.options, options = _b === void 0 ? [] : _b, renderItem = _a.renderItem, RenderSelected = _a.renderSelected, onChange = _a.onChange, renderEmpty = _a.renderEmpty, placeholder = _a.placeholder, error = _a.error, disabled = _a.disabled, multiple = _a.multiple, _c = _a.onBlur, onBlurAction = _c === void 0 ? function () { } : _c, props = __rest(_a, ["value", "filter", "setFilter", "options", "renderItem", "renderSelected", "onChange", "renderEmpty", "placeholder", "error", "disabled", "multiple", "onBlur"]);
     var ref = (0, react_1.useRef)();
@@ -2697,10 +2706,10 @@ exports.AvatarStack = AvatarStack;
 
 /***/ }),
 
-/***/ "./src/components/Avatar/index.tsx":
-/*!*****************************************!*\
-  !*** ./src/components/Avatar/index.tsx ***!
-  \*****************************************/
+/***/ "./src/components/Avatar/index.ts":
+/*!****************************************!*\
+  !*** ./src/components/Avatar/index.ts ***!
+  \****************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -2759,6 +2768,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Badge = Badge;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
+/**
+ * Communicates notification’s amount and types.
+ */
 function Badge(_a) {
     var _b = _a.is, Tag = _b === void 0 ? 'span' : _b, _c = _a.variant, variant = _c === void 0 ? 'secondary' : _c, small = _a.small, className = _a.className, disabled = _a.disabled, props = __rest(_a, ["is", "variant", "small", "className", "disabled"]);
     var modifiers = [variant, small && 'small', disabled && 'disabled']
@@ -3659,6 +3671,9 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/**
+ * Indicates an actionable user action.
+ */
 exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
     var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, warning = _a.warning, success = _a.success, external = _a.external, icon = _a.icon, _b = _a.is, is = _b === void 0 ? 'button' : _b, _rel = _a.rel, tiny = _a.tiny, mini = _a.mini, small = _a.small, medium = _a.medium, large = _a.large, square = _a.square, loading = _a.loading, disabled = _a.disabled, children = _a.children, props = __rest(_a, ["primary", "secondary", "danger", "warning", "success", "external", "icon", "is", "rel", "tiny", "mini", "small", "medium", "large", "square", "loading", "disabled", "children"]);
     var extraProps = (is === 'a' && {
@@ -3855,6 +3870,9 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
 var patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
+/**
+ * A container for grouping buttons that semantically share a common action context.
+ */
 exports.ButtonGroup = (0, react_1.forwardRef)(function ButtonGroup(_a, ref) {
     var _b = _a.align, align = _b === void 0 ? 'start' : _b, children = _a.children, stretch = _a.stretch, vertical = _a.vertical, wrap = _a.wrap, small = _a.small, large = _a.large, className = _a.className, props = __rest(_a, ["align", "children", "stretch", "vertical", "wrap", "small", "large", "className"]);
     return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: ref, className: [
@@ -3942,6 +3960,9 @@ var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var WRAPPER_LIMIT_SIZE = 420;
+/**
+ * The `Callout` is used to get the user's attention explaining something important in the content of the current page.
+ */
 var Callout = function (_a) {
     var type = _a.type, title = _a.title, children = _a.children, icon = _a.icon, className = _a.className, actions = _a.actions, props = __rest(_a, ["type", "title", "children", "icon", "className", "actions"]);
     var _b = (0, fuselage_hooks_1.useResizeObserver)(), ref = _b.ref, borderBoxSize = _b.borderBoxSize;
@@ -4751,6 +4772,13 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 var Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.tsx");
+/**
+ * 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.
+ */
 var CodeSnippet = function (_a) {
     var children = _a.children, onClick = _a.onClick, _b = _a.buttonText, buttonText = _b === void 0 ? 'Copy' : _b, _c = _a.buttonDisabled, buttonDisabled = _c === void 0 ? false : _c, props = __rest(_a, ["children", "onClick", "buttonText", "buttonDisabled"]);
     if (!children) {
@@ -4814,6 +4842,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
+/**
+ * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
+ */
 var Contextualbar = (0, react_1.forwardRef)(function Contextualbar(_a, ref) {
     var children = _a.children, width = _a.width, position = _a.position, _b = _a.bg, bg = _b === void 0 ? 'room' : _b, props = __rest(_a, ["children", "width", "position", "bg"]);
     return ((0, jsx_runtime_1.jsx)(__1.Box, __assign({ ref: ref, "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 5 }, props, { children: children })));
@@ -5161,14 +5192,19 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var _1 = __webpack_require__(/*! . */ "./src/components/Contextualbar/index.ts");
-var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-var ContextualbarSkeleton = function (props) { return ((0, jsx_runtime_1.jsxs)(_1.Contextualbar, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(_1.ContextualbarHeader, { children: (0, jsx_runtime_1.jsx)(__1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(__1.Box, { p: 24, children: [(0, jsx_runtime_1.jsx)(__1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
+var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+var Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.tsx");
+var Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/Contextualbar/Contextualbar.tsx"));
+var ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./ContextualbarHeader */ "./src/components/Contextualbar/ContextualbarHeader.tsx"));
+var ContextualbarSkeleton = function (props) { return ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, __assign({}, 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.default, { p: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
                     .fill(5)
-                    .map(function (_, index) { return ((0, jsx_runtime_1.jsx)(__1.Skeleton, {}, index)); })] })] }))); };
+                    .map(function (_, index) { return ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}, index)); })] })] }))); };
 exports["default"] = (0, react_1.memo)(ContextualbarSkeleton);
 
 
@@ -5275,6 +5311,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
+/**
+ * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
+ */
 var Contextualbar = (0, react_1.forwardRef)(function Contextualbar(_a, ref) {
     var children = _a.children, width = _a.width, position = _a.position, _b = _a.bg, bg = _b === void 0 ? 'room' : _b, props = __rest(_a, ["children", "width", "position", "bg"]);
     return ((0, jsx_runtime_1.jsx)(__1.Box, __assign({ ref: ref, "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 5 }, props, { children: children })));
@@ -5987,6 +6026,9 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 var type = 'email';
+/**
+ * An input for email addresses.
+ */
 exports.EmailInput = (0, react_1.forwardRef)(function EmailInput(props, ref) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, __assign({ type: type, ref: ref }, props));
 });
@@ -6049,6 +6091,9 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 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.default, __assign({ "rcx-field": true }, props)) }));
 }
@@ -6428,6 +6473,9 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
 var patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
+/**
+ * A container for grouping fields that semantically share a common data context.
+ */
 var FieldGroup = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'fieldset', "rcx-field-group": true, role: 'group' }, props, { children: (0, patchChildren_1.patchChildren)(children, function (childProps) { return ({
@@ -6965,13 +7013,19 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.InputBox = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-/* eslint-disable complexity */
 var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 var react_1 = __webpack_require__(/*! react */ "react");
-var _1 = __webpack_require__(/*! . */ "./src/components/InputBox/index.ts");
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var Addon_1 = __webpack_require__(/*! ./Addon */ "./src/components/InputBox/Addon.tsx");
-// eslint-disable-next-line @typescript-eslint/no-redeclare
+var Input_1 = __webpack_require__(/*! ./Input */ "./src/components/InputBox/Input.tsx");
+var Wrapper_1 = __webpack_require__(/*! ./Wrapper */ "./src/components/InputBox/Wrapper.tsx");
+/**
+ * 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
 exports.InputBox = (0, react_1.forwardRef)(function InputBox(_a, ref) {
     var className = _a.className, addon = _a.addon, error = _a.error, hidden = _a.hidden, invisible = _a.invisible, multiple = _a.multiple, placeholderVisible = _a.placeholderVisible, _b = _a.type, type = _b === void 0 ? 'text' : _b, small = _a.small, onChange = _a.onChange, props = __rest(_a, ["className", "addon", "error", "hidden", "invisible", "multiple", "placeholderVisible", "type", "small", "onChange"]);
     var innerRef = (0, react_1.useRef)(null);
@@ -7002,13 +7056,13 @@ exports.InputBox = (0, react_1.forwardRef)(function InputBox(_a, ref) {
         addon = (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'clock', size: 'x20', onClick: handleAddonClick });
     }
     if (!addon) {
-        return ((0, jsx_runtime_1.jsx)(_1.Input, __assign({ is: (type === 'textarea' && 'textarea') ||
+        return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({ is: (type === 'textarea' && 'textarea') ||
                 (type === 'select' && 'select') ||
                 'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, hidden: hidden, invisible: invisible, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--small": small }, props)));
     }
-    return ((0, jsx_runtime_1.jsxs)(_1.Wrapper, { className: __spreadArray([
+    return ((0, jsx_runtime_1.jsxs)(Wrapper_1.Wrapper, { className: __spreadArray([
             props.disabled && 'disabled'
-        ], __read((Array.isArray(className) ? className : [className])), false), hidden: hidden, invisible: invisible, children: [(0, jsx_runtime_1.jsx)(_1.Input, __assign({ is: (type === 'textarea' && 'textarea') ||
+        ], __read((Array.isArray(className) ? className : [className])), false), hidden: hidden, invisible: invisible, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, __assign({ is: (type === 'textarea' && 'textarea') ||
                     (type === 'select' && 'select') ||
                     'input', className: className, cols: (type === 'textarea' && 1) || (type === 'select' && 0) || 0, multiple: multiple, ref: mergedRef, htmlSize: (type === 'textarea' && undefined) || (type === 'select' && 1) || 1, type: type === 'textarea' || type === 'select' ? undefined : type, onChange: handleChange, "rcx-input-box--multiple": multiple, "rcx-input-box--placeholder-visible": placeholderVisible, "rcx-input-box--type": type, "rcx-input-box--undecorated": true, "rcx-input-box--small": small }, props)), (0, jsx_runtime_1.jsx)(Addon_1.Addon, { children: addon })] }));
 });
@@ -7229,6 +7283,9 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var LabelContext = (0, react_1.createContext)(false);
+/**
+ * A caption for an input component.
+ */
 function Label(_a) {
     var disabled = _a.disabled, is = _a.is, required = _a.required, children = _a.children, props = __rest(_a, ["disabled", "is", "required", "children"]);
     var isInsideLabel = (0, react_1.useContext)(LabelContext);
@@ -7333,6 +7390,9 @@ var patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./
 var useStyle_1 = __webpack_require__(/*! ../../hooks/useStyle */ "./src/hooks/useStyle.ts");
 var styleTokens_1 = __webpack_require__(/*! ../../styleTokens */ "./src/styleTokens.ts");
 var BoxTransforms_1 = __webpack_require__(/*! ../Box/BoxTransforms */ "./src/components/Box/BoxTransforms.ts");
+/**
+ * Add margins to the wrapped component.
+ */
 var Margins = function (props) {
     var children = props.children, className = props.className, all = props.all, block = props.block, blockStart = props.blockStart, blockEnd = props.blockEnd, inline = props.inline, inlineStart = props.inlineStart, inlineEnd = props.inlineEnd;
     var transformFn = (0, react_1.useCallback)(function (props) {
@@ -7403,6 +7463,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -7430,12 +7513,16 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Menu = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
-var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-var IconButton_1 = __webpack_require__(/*! ../Button/IconButton */ "./src/components/Button/IconButton.tsx");
+var Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
+var Options_1 = __importStar(__webpack_require__(/*! ../Options */ "./src/components/Options/index.ts"));
+var PositionAnimated_1 = __importDefault(__webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts"));
 var menuAction = function (_a, options) {
     var _b, _c;
     var _d = __read(_a, 1), selected = _d[0];
@@ -7453,10 +7540,13 @@ var mapOptions = function (options) {
         ];
     });
 };
+/**
+ * Kebab Menu
+ */
 var Menu = function (_a) {
     var tiny = _a.tiny, mini = _a.mini, _b = _a.small, small = _b === void 0 ? !(tiny || mini) : _b, options = _a.options, optionWidth = _a.optionWidth, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, renderItem = _a.renderItem, maxHeight = _a.maxHeight, _d = _a.icon, icon = _d === void 0 ? 'kebab' : _d, props = __rest(_a, ["tiny", "mini", "small", "options", "optionWidth", "placement", "renderItem", "maxHeight", "icon"]);
     var mappedOptions = mapOptions(options);
-    var _e = __read((0, __1.useCursor)(-1, mappedOptions, function (args, _a) {
+    var _e = __read((0, Options_1.useCursor)(-1, mappedOptions, function (args, _a) {
         var _b = __read(_a, 2), hide = _b[1];
         menuAction(args, options);
         reset();
@@ -7486,7 +7576,7 @@ var Menu = function (_a) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove('focus-visible');
         }
     }, [visible]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({ "data-testid": 'menu', ref: ref, small: small, tiny: tiny, mini: mini, onClick: onClick, onBlur: hide, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, icon: icon }, props)), (0, jsx_runtime_1.jsx)(__1.PositionAnimated, { width: 'auto', visible: visible, anchor: ref, placement: placement, children: (0, jsx_runtime_1.jsx)(__1.Options, { maxHeight: maxHeight, renderItem: renderItem, width: optionWidth, onSelect: handleSelection, options: mappedOptions, cursor: cursor, ref: ref }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.IconButton, __assign({ "data-testid": 'menu', ref: ref, small: small, tiny: tiny, mini: mini, onClick: onClick, onBlur: hide, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, icon: icon }, props)), (0, jsx_runtime_1.jsx)(PositionAnimated_1.default, { width: 'auto', visible: visible, anchor: ref, placement: placement, children: (0, jsx_runtime_1.jsx)(Options_1.default, { maxHeight: maxHeight, renderItem: renderItem, width: optionWidth, onSelect: handleSelection, options: mappedOptions, cursor: cursor, ref: ref }) })] }));
 };
 exports.Menu = Menu;
 
@@ -7535,6 +7625,9 @@ var Button_1 = __webpack_require__(/*! ../../Button */ "./src/components/Button/
 var MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/V2/MenuDropdown.tsx"));
 var MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/V2/MenuPopover.tsx"));
 var helpers_1 = __webpack_require__(/*! ./helpers/helpers */ "./src/components/Menu/V2/helpers/helpers.ts");
+/**
+ * Kebab Menu. Use `<MenuItem>` to render the menu items.
+ */
 var Menu = function (_a) {
     var _b = _a.icon, icon = _b === void 0 ? 'kebab' : _b, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, title = _a.title, _d = _a.is, MenuButton = _d === void 0 ? Button_1.IconButton : _d, className = _a.className, pressed = _a.pressed, _e = _a.maxWidth, maxWidth = _e === void 0 ? 'x250' : _e, button = _a.button, detached = _a.detached, props = __rest(_a, ["icon", "placement", "title", "is", "className", "pressed", "maxWidth", "button", "detached"]);
     var state = (0, react_stately_1.useMenuTriggerState)(props);
@@ -11218,7 +11311,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ModalThumb = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
-var Avatar_1 = __webpack_require__(/*! ../Avatar */ "./src/components/Avatar/index.tsx");
+var Avatar_1 = __webpack_require__(/*! ../Avatar */ "./src/components/Avatar/index.ts");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var ModalThumb = function (props) { return ((0, jsx_runtime_1.jsx)(Box_1.default, { children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, __assign({ size: 'x28' }, props)) })); };
 exports.ModalThumb = ModalThumb;
@@ -11402,6 +11495,9 @@ var Position_1 = __importDefault(__webpack_require__(/*! ../Position */ "./src/c
 var SelectAddon_1 = __importDefault(__webpack_require__(/*! ../Select/SelectAddon */ "./src/components/Select/SelectAddon.tsx"));
 var MultiSelectAnchor_1 = __importDefault(__webpack_require__(/*! ./MultiSelectAnchor */ "./src/components/MultiSelect/MultiSelectAnchor.tsx"));
 var SelectedOptions_1 = __webpack_require__(/*! ./SelectedOptions */ "./src/components/MultiSelect/SelectedOptions.tsx");
+/**
+ * An input for selection of options.
+ */
 exports.MultiSelect = (0, react_1.forwardRef)(function (_a, ref) {
     var value = _a.value, filter = _a.filter, setFilter = _a.setFilter, _b = _a.options, options = _b === void 0 ? [] : _b, error = _a.error, disabled = _a.disabled, _c = _a.anchor, Anchor = _c === void 0 ? MultiSelectAnchor_1.default : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.getLabel, getLabel = _e === void 0 ? function (_a) {
         var _b = _a === void 0 ? ['', ''] : _a, _c = __read(_b, 2), label = _c[1];
@@ -11899,6 +11995,9 @@ exports.NumberInput = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for numbers.
+ */
 exports.NumberInput = (0, react_1.forwardRef)(function NumberInput(props, ref) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, __assign({ type: 'number', ref: ref }, props));
 });
@@ -12020,6 +12119,9 @@ var prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/
 var OptionAvatar_1 = __importDefault(__webpack_require__(/*! ./OptionAvatar */ "./src/components/Option/OptionAvatar.tsx"));
 var OptionContent_1 = __importDefault(__webpack_require__(/*! ./OptionContent */ "./src/components/Option/OptionContent.tsx"));
 var 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.
+ */
 var Option = (0, react_2.memo)((0, react_2.forwardRef)(function (_a, ref) {
     var _b = _a.is, Tag = _b === void 0 ? 'li' : _b, id = _a.id, children = _a.children, label = _a.label, focus = _a.focus, selected = _a.selected, className = _a.className, icon = _a.icon, gap = _a.gap, avatar = _a.avatar, title = _a.title, disabled = _a.disabled, variant = _a.variant, onClick = _a.onClick, description = _a.description, props = __rest(_a, ["is", "id", "children", "label", "focus", "selected", "className", "icon", "gap", "avatar", "title", "disabled", "variant", "onClick", "description"]);
     return ((0, react_1.createElement)(Tag, __assign({}, props, { key: id, id: id, ref: ref, "aria-selected": !!selected, "aria-disabled": !!disabled, title: title, onClick: function (e) {
@@ -12506,6 +12608,9 @@ exports.Empty = (0, react_1.memo)(function (_a) {
     var customEmpty = _a.customEmpty;
     return ((0, jsx_runtime_1.jsx)(Option_1.default, { label: customEmpty || 'Empty' }));
 });
+/**
+ * An input for selection of options.
+ */
 exports.Options = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c;
     var _d = _a.maxHeight, maxHeight = _d === void 0 ? 'x144' : _d, multiple = _a.multiple, _e = _a.renderEmpty, EmptyComponent = _e === void 0 ? exports.Empty : _e, options = _a.options, cursor = _a.cursor, _f = _a.renderItem, OptionComponent = _f === void 0 ? Option_1.default : _f, onSelect = _a.onSelect, customEmpty = _a.customEmpty, props = __rest(_a, ["maxHeight", "multiple", "renderEmpty", "options", "cursor", "renderItem", "onSelect", "customEmpty"]);
@@ -12850,6 +12955,9 @@ exports.CheckOption = (0, react_2.memo)(function CheckOption(_a) {
     var selected = _a.selected, label = _a.children, options = __rest(_a, ["selected", "children"]);
     return ((0, jsx_runtime_1.jsx)(Option_1.default, __assign({ label: label, selected: selected }, options, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: selected }) })));
 });
+/**
+ * An input for selection of options.
+ */
 exports.OptionsPaginated = (0, react_2.forwardRef)(function (_a, ref) {
     var withTitle = _a.withTitle, multiple = _a.multiple, _b = _a.renderEmpty, EmptyComponent = _b === void 0 ? exports.Empty : _b, options = _a.options, cursor = _a.cursor, _c = _a.renderItem, OptionComponent = _c === void 0 ? Option_1.default : _c, onSelect = _a.onSelect, endReached = _a.endReached, props = __rest(_a, ["withTitle", "multiple", "renderEmpty", "options", "cursor", "renderItem", "onSelect", "endReached"]);
     var OptionsComponentWithData = function (_a) {
@@ -13429,6 +13537,13 @@ var 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.
+ */
 exports.PaletteStyleTag = (0, react_1.memo)(function PaletteStyleTag(_a) {
     var _b = _a.theme, theme = _b === void 0 ? 'light' : _b, _c = _a.tagId, tagId = _c === void 0 ? 'main-palette' : _c, _d = _a.prefix, prefix = _d === void 0 ? '--rcx-color' : _d, selector = _a.selector, palette = _a.palette;
     var themePalette = palette || (0, convertToCss_1.convertToCss)(themes[theme], prefix, selector);
@@ -13496,26 +13611,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getThemePalette = exports.getTokens = void 0;
-var badge_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/badge.json */ "../fuselage-tokens/dist/badge.json");
-var button_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/button.json */ "../fuselage-tokens/dist/button.json");
-var font_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/font.json */ "../fuselage-tokens/dist/font.json");
-var shadow_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/shadow.json */ "../fuselage-tokens/dist/shadow.json");
-var status_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/status.json */ "../fuselage-tokens/dist/status.json");
-var statusBullet_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/statusBullet.json */ "../fuselage-tokens/dist/statusBullet.json");
-var stroke_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/stroke.json */ "../fuselage-tokens/dist/stroke.json");
-var surface_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/surface.json */ "../fuselage-tokens/dist/surface.json");
+var badge_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/badge.json */ "../fuselage-tokens/dist/badge.json"));
+var button_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/button.json */ "../fuselage-tokens/dist/button.json"));
+var font_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/font.json */ "../fuselage-tokens/dist/font.json"));
+var shadow_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/shadow.json */ "../fuselage-tokens/dist/shadow.json"));
+var status_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/status.json */ "../fuselage-tokens/dist/status.json"));
+var statusBullet_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/statusBullet.json */ "../fuselage-tokens/dist/statusBullet.json"));
+var stroke_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/stroke.json */ "../fuselage-tokens/dist/stroke.json"));
+var surface_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/surface.json */ "../fuselage-tokens/dist/surface.json"));
 var getTokens = function (theme) {
     var tokens = {
-        badge: badge_json_1.badge[theme],
-        button: button_json_1.button[theme],
-        font: font_json_1.font[theme],
-        shadow: shadow_json_1.shadow[theme],
-        status: status_json_1.status[theme],
-        statusBullet: statusBullet_json_1.statusBullet[theme],
-        stroke: stroke_json_1.stroke[theme],
-        surface: surface_json_1.surface[theme],
+        badge: badge_json_1.default.badge[theme],
+        button: button_json_1.default.button[theme],
+        font: font_json_1.default.font[theme],
+        shadow: shadow_json_1.default.shadow[theme],
+        status: status_json_1.default.status[theme],
+        statusBullet: statusBullet_json_1.default.statusBullet[theme],
+        stroke: stroke_json_1.default.stroke[theme],
+        surface: surface_json_1.default.surface[theme],
     };
     return tokens;
 };
@@ -14276,6 +14394,9 @@ var getColor = function (isLight, variant, error) {
     }
     return isLight ? lightColors[variant] : colors[variant];
 };
+/**
+ * The `ProgressBar` is used to inform the user the progress of an operation.
+ */
 exports.ProgressBar = (0, react_1.forwardRef)(function ProgressBar(_a, ref) {
     var percentage = _a.percentage, _b = _a.variant, variant = _b === void 0 ? 'info' : _b, error = _a.error, animated = _a.animated, _c = _a.light, light = _c === void 0 ? false : _c, props = __rest(_a, ["percentage", "variant", "error", "animated", "light"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ ref: ref, "rcx-progress-bar": true, title: error || undefined, overflow: 'hidden' }, props, { children: (0, jsx_runtime_1.jsx)(Box_1.default, { bg: getColor(light, variant, error), "rcx-progress-bar__fill--animated": animated, "rcx-progress-bar__fill": true, width: getWidth(percentage) }) })));
@@ -14422,6 +14543,9 @@ var pollTouchingEdges = function (element, touchingEdgesRef, onScrollContent) {
         onScrollContent && onScrollContent(newTouchingEdges);
     }
 };
+/**
+ * Add scroll capability to the wrapped component.
+ */
 var Scrollable = function (_a) {
     var children = _a.children, horizontal = _a.horizontal, vertical = _a.vertical, smooth = _a.smooth, onScrollContent = _a.onScrollContent;
     var scrollTimeoutRef = (0, react_1.useRef)();
@@ -14492,6 +14616,9 @@ exports.SearchInput = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for search queries.
+ */
 exports.SearchInput = (0, react_1.forwardRef)(function SearchInput(props, ref) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, __assign({ type: 'search', ref: ref }, props));
 });
@@ -14641,6 +14768,9 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
 var SelectAria_1 = __webpack_require__(/*! ./SelectAria */ "./src/components/Select/SelectAria.tsx");
+/**
+ * An input for selection of options.
+ */
 exports.Select = (0, react_1.forwardRef)(function Select(_a, ref) {
     var options = _a.options, props = __rest(_a, ["options"]);
     return ((0, jsx_runtime_1.jsx)(SelectAria_1.SelectAria, __assign({ ref: ref }, props, { children: options.map(function (option) {
@@ -15129,6 +15259,9 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_mod
 var react_1 = __webpack_require__(/*! react */ "react");
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for selection of options.
+ */
 exports.SelectInput = (0, react_1.forwardRef)(function SelectInput(_a, ref) {
     var children = _a.children, multiple = _a.multiple, placeholder = _a.placeholder, onChange = _a.onChange, props = __rest(_a, ["children", "multiple", "placeholder", "onChange"]);
     var _b = __read((0, react_1.useState)(!props.value && !props.defaultValue), 2), isPlaceholderVisible = _b[0], setPlaceholderVisible = _b[1];
@@ -15209,6 +15342,9 @@ exports.SidebarItemAction = exports.SidebarItemActions = exports.SidebarItemAvat
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 var SidebarActions_1 = __webpack_require__(/*! ./SidebarActions */ "./src/components/Sidebar/SidebarActions.tsx");
+/**
+ * Item component to be used inside Sidebar.
+ */
 var SidebarItem = function (_a) {
     var selected = _a.selected, highlighted = _a.highlighted, clickable = _a.clickable, featured = _a.featured, _b = _a.is, Tag = _b === void 0 ? 'div' : _b, children = _a.children, props = __rest(_a, ["selected", "highlighted", "clickable", "featured", "is", "children"]);
     return ((0, jsx_runtime_1.jsx)(Tag, __assign({ className: [
@@ -15483,6 +15619,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBar = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
+/**
+ * Sidebar TopBar and ToolBox.
+ */
 var TopBar = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return ((0, jsx_runtime_1.jsx)("div", __assign({ className: ['rc-box rc-box--full rcx-sidebar-topbar', className]
@@ -16678,6 +16817,9 @@ var Disabled_1 = __importDefault(__webpack_require__(/*! ./icons/Disabled */ "./
 var Loading_1 = __importDefault(__webpack_require__(/*! ./icons/Loading */ "./src/components/StatusBullet/icons/Loading.tsx"));
 var Offline_1 = __importDefault(__webpack_require__(/*! ./icons/Offline */ "./src/components/StatusBullet/icons/Offline.tsx"));
 var Online_1 = __importDefault(__webpack_require__(/*! ./icons/Online */ "./src/components/StatusBullet/icons/Online.tsx"));
+/**
+ * The `StatusBullet` is used to inform the user status.
+ */
 var StatusBullet = function (_a) {
     var _b = _a.status, status = _b === void 0 ? 'loading' : _b, props = __rest(_a, ["status"]);
     switch (status) {
@@ -17402,6 +17544,9 @@ exports.Tabs = Tabs;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var TabsItem_1 = __webpack_require__(/*! ./TabsItem */ "./src/components/Tabs/TabsItem.tsx");
+/**
+ * Tabs is a component to navigate around the UI using buttons arranged together with the selected tab highlighted.
+ */
 function Tabs(_a) {
     var children = _a.children, _b = _a.divider, divider = _b === void 0 ? true : _b, props = __rest(_a, ["children", "divider"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'div', "rcx-tabs": true, "rcx-tabs--with-divider": divider }, props, { children: (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'div', "rcx-tabs__scroll-box": true, children: (0, jsx_runtime_1.jsx)(Box_1.default, { is: 'div', "rcx-tabs__wrapper": true, children: children, role: 'tablist' }) }) })));
@@ -17522,6 +17667,9 @@ exports.Tag = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box/Box */ "./src/components/Box/Box.tsx"));
+/**
+ * Used for mentions
+ */
 var Tag = function (_a) {
     var large = _a.large, medium = _a.medium, className = _a.className, disabled = _a.disabled, onClick = _a.onClick, variant = _a.variant, children = _a.children, icon = _a.icon, href = _a.href, props = __rest(_a, ["large", "medium", "className", "disabled", "onClick", "variant", "children", "icon", "href"]);
     var modifiers = [
@@ -17592,6 +17740,9 @@ exports.TelephoneInput = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for telephone numbers.
+ */
 exports.TelephoneInput = (0, react_1.forwardRef)(function TelephoneInput(props, ref) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, __assign({ type: 'tel', ref: ref }, props));
 });
@@ -17626,10 +17777,10 @@ __exportStar(__webpack_require__(/*! ./TelephoneInput */ "./src/components/Telep
 
 /***/ }),
 
-/***/ "./src/components/TextAreaInput/TextArea.tsx":
-/*!***************************************************!*\
-  !*** ./src/components/TextAreaInput/TextArea.tsx ***!
-  \***************************************************/
+/***/ "./src/components/TextAreaInput/TextAreaInput.tsx":
+/*!********************************************************!*\
+  !*** ./src/components/TextAreaInput/TextAreaInput.tsx ***!
+  \********************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -17649,6 +17800,9 @@ exports.TextAreaInput = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for multi-line plain-text editing.
+ */
 exports.TextAreaInput = (0, react_1.forwardRef)(function TextAreaInput(props, ref) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, __assign({ type: 'textarea', ref: ref }, props));
 });
@@ -17656,10 +17810,10 @@ exports.TextAreaInput = (0, react_1.forwardRef)(function TextAreaInput(props, re
 
 /***/ }),
 
-/***/ "./src/components/TextAreaInput/index.tsx":
-/*!************************************************!*\
-  !*** ./src/components/TextAreaInput/index.tsx ***!
-  \************************************************/
+/***/ "./src/components/TextAreaInput/index.ts":
+/*!***********************************************!*\
+  !*** ./src/components/TextAreaInput/index.ts ***!
+  \***********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -17678,7 +17832,7 @@ 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);
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-__exportStar(__webpack_require__(/*! ./TextArea */ "./src/components/TextAreaInput/TextArea.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./TextAreaInput */ "./src/components/TextAreaInput/TextAreaInput.tsx"), exports);
 
 
 /***/ }),
@@ -17706,6 +17860,9 @@ exports.TextInput = void 0;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "../../node_modules/react/jsx-runtime.js");
 var react_1 = __webpack_require__(/*! react */ "react");
 var InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
+/**
+ * An input for any kind of single-line text.
+ */
 exports.TextInput = (0, react_1.forwardRef)(function TextInput(props, ref) {
     return (0, jsx_runtime_1.jsx)(InputBox_1.InputBox, __assign({ type: 'text', ref: ref }, props));
 });
@@ -17786,6 +17943,9 @@ function Circle(_a) {
     var disabled = _a.disabled, circleCount = _a.circleCount, iteration = _a.iteration, inheritColor = _a.inheritColor, props = __rest(_a, ["disabled", "circleCount", "iteration", "inheritColor"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ is: 'span', className: (0, css_in_js_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        animation-duration: ", "s;\n        animation-delay: ", "s;\n      "], ["\n        animation-duration: ", "s;\n        animation-delay: ", "s;\n      "])), circleCount * 0.466, iteration * 0.16), "rcx-throbber__circle": true, "rcx-throbber__circle--disabled": disabled, "rcx-throbber__circle--inherit-color": inheritColor }, props)));
 }
+/**
+ * Indicates content that has not loaded yet.
+ */
 exports.Throbber = (0, react_1.forwardRef)(function Throbber(_a, ref) {
     var disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? 'x16' : _b, _c = _a.circleCount, circleCount = _c === void 0 ? 3 : _c, inheritColor = _a.inheritColor, props = __rest(_a, ["disabled", "size", "circleCount", "inheritColor"]);
     return ((0, jsx_runtime_1.jsx)(Box_1.default, __assign({ "rcx-throbber": true, ref: ref }, props, { children: Array.from({ length: circleCount || 3 }, function (_, iteration) { return ((0, jsx_runtime_1.jsx)(Circle, { circleCount: circleCount, iteration: iteration, disabled: !!disabled, size: size, inheritColor: !!inheritColor }, iteration)); }) })));
@@ -17929,6 +18089,9 @@ var fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@
 var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/Box/index.tsx"));
 var Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 var Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+/**
+ * Shows alerts in a toast component.
+ */
 function ToastBar(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.time, time = _d === void 0 ? 5 : _d, isPaused = _a.isPaused, id = _a.id, onClose = _a.onClose, _e = _a.buttonLabel, buttonLabel = _e === void 0 ? 'Dismiss alert' : _e, props = __rest(_a, ["children", "className", "variant", "time", "isPaused", "id", "onClose", "buttonLabel"]);
     var iconName = (variant === 'success' && 'circle-check') ||
@@ -18212,12 +18375,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.UrlInput = exports.Tooltip = exports.Tile = exports.Sidebar = exports.Scrollable = exports.PositionAnimated = exports.Position = exports.PasswordInput = exports.Option = exports.Options = exports.Modal = exports.Message = exports.Margins = exports.Flex = exports.Field = exports.Chip = exports.CodeSnippet = exports.IconButton = exports.ActionButton = exports.Button = exports.useArrayLikeClassNameProp = exports.Box = exports.Banner = exports.AnimatedVisibility = void 0;
-__exportStar(__webpack_require__(/*! ./Accordion */ "./src/components/Accordion/index.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./Accordion */ "./src/components/Accordion/index.ts"), exports);
 var AnimatedVisibility_1 = __webpack_require__(/*! ./AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
 Object.defineProperty(exports, "AnimatedVisibility", ({ enumerable: true, get: function () { return __importDefault(AnimatedVisibility_1).default; } }));
 __exportStar(__webpack_require__(/*! ./AudioPlayer */ "./src/components/AudioPlayer/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./AutoComplete */ "./src/components/AutoComplete/index.ts"), exports);
-__exportStar(__webpack_require__(/*! ./Avatar */ "./src/components/Avatar/index.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./Avatar */ "./src/components/Avatar/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Badge */ "./src/components/Badge/index.tsx"), exports);
 var Banner_1 = __webpack_require__(/*! ./Banner */ "./src/components/Banner/index.ts");
 Object.defineProperty(exports, "Banner", ({ enumerable: true, get: function () { return __importDefault(Banner_1).default; } }));
@@ -18303,7 +18466,7 @@ __exportStar(__webpack_require__(/*! ./Table */ "./src/components/Table/index.ts
 __exportStar(__webpack_require__(/*! ./Tabs */ "./src/components/Tabs/index.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./Tag */ "./src/components/Tag/index.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./TelephoneInput */ "./src/components/TelephoneInput/index.tsx"), exports);
-__exportStar(__webpack_require__(/*! ./TextAreaInput */ "./src/components/TextAreaInput/index.tsx"), exports);
+__exportStar(__webpack_require__(/*! ./TextAreaInput */ "./src/components/TextAreaInput/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./TextInput */ "./src/components/TextInput/index.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./Throbber */ "./src/components/Throbber/index.tsx"), exports);
 var Tile_1 = __webpack_require__(/*! ./Tile */ "./src/components/Tile/index.ts");