@rocket.chat/fuselage 0.70.2 → 0.72.0

package/dist/fuselage.development.js

@@ -620,7 +620,7 @@ function AutoComplete({ value, filter, setFilter, options = [], renderItem, rend
                 : selected;
         });
     }, [value]);
-    const handleSelect = (0, fuselage_hooks_1.useEffectEvent)(([newValue]) => {
+    const handleSelect = (0, fuselage_hooks_1.useStableCallback)(([newValue]) => {
         if (selected.some((item) => item.value === newValue)) {
             hide();
             return;
@@ -636,7 +636,7 @@ function AutoComplete({ value, filter, setFilter, options = [], renderItem, rend
         setFilter?.('');
         hide();
     });
-    const handleRemove = (0, fuselage_hooks_1.useEffectEvent)((event) => {
+    const handleRemove = (0, fuselage_hooks_1.useStableCallback)((event) => {
         event.stopPropagation();
         event.preventDefault();
         const filtered = selected.filter((item) => item.value !== event.currentTarget.value);
@@ -650,12 +650,12 @@ function AutoComplete({ value, filter, setFilter, options = [], renderItem, rend
     const memoizedOptions = (0, react_1.useMemo)(() => options.map(({ value, label }) => [value, label]), [options]);
     const firstSelectedIndex = (0, react_1.useMemo)(() => options.findIndex((option) => selected[0]?.value === option.value), [options, selected]);
     const [cursor, handleKeyDown, , reset, [optionsAreVisible, hide, show]] = (0, Options_1.useCursor)(firstSelectedIndex, memoizedOptions, handleSelect);
-    const handleOnBlur = (0, fuselage_hooks_1.useEffectEvent)((event) => {
+    const handleOnBlur = (0, fuselage_hooks_1.useStableCallback)((event) => {
         hide();
         onBlurAction(event);
     });
     (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.useEffectEvent)(() => ref.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: ref, onChange: (0, fuselage_hooks_1.useEffectEvent)((e) => setFilter?.(e.currentTarget.value)), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN || !value
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useStableCallback)(() => ref.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: ref, 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
                         ? 'cross'
@@ -1635,8 +1635,6 @@ Object.defineProperty(exports, "IconButton", ({ enumerable: true, get: function
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
-const appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
-const patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
 const ButtonGroup = (0, react_1.forwardRef)(function ButtonGroup({ align = 'start', children, stretch, vertical, wrap, small, large, className, ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
             'rcx-button-group',
@@ -1649,9 +1647,7 @@ const ButtonGroup = (0, react_1.forwardRef)(function ButtonGroup({ align = 'star
             className,
         ]
             .filter(Boolean)
-            .join(' '), role: 'group', ...props, children: (0, patchChildren_1.patchChildren)(children, (childProps) => ({
-            className: (0, appendClassName_1.appendClassName)(childProps.className, 'rcx-button-group__item'),
-        })) }));
+            .join(' '), role: 'group', ...props, children: children }));
 });
 exports["default"] = ButtonGroup;
 
@@ -2526,7 +2522,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', 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', 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) `
         gap: 8px;
       `, children: children }) }));
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
@@ -2606,7 +2602,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 Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarTitle = (props) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexShrink: 1, flexGrow: 1, fontScale: 'h5', withTruncatedText: true, ...props }));
+const ContextualbarTitle = (props) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexShrink: 1, flexGrow: 1, fontScale: 'h5', withTruncatedText: true, is: 'h5', ...props }));
 exports["default"] = (0, react_1.memo)(ContextualbarTitle);
 
 
@@ -3684,66 +3680,6 @@ Object.defineProperty(exports, "Margins", ({ enumerable: true, get: function ()
 /*!**************************************!*\
   !*** ./src/components/Menu/Menu.tsx ***!
   \**************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const react_1 = __webpack_require__(/*! react */ "react");
-const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
-const Options_1 = __webpack_require__(/*! ../Options */ "./src/components/Options/index.ts");
-const PositionAnimated_1 = __webpack_require__(/*! ../PositionAnimated */ "./src/components/PositionAnimated/index.ts");
-const menuAction = ([selected], options) => {
-    options[selected].action?.();
-};
-const mapOptions = (options) => Object.entries(options).map(([value, { type = 'option', label, disabled }]) => [
-    value,
-    label,
-    undefined,
-    disabled,
-    type,
-]);
-const Menu = ({ tiny, mini, small = !(tiny || mini), options, optionWidth, placement = 'bottom-start', renderItem, maxHeight, icon = 'kebab', ...props }) => {
-    const mappedOptions = mapOptions(options);
-    const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = (0, Options_1.useCursor)(-1, mappedOptions, (args, [, hide]) => {
-        menuAction(args, options);
-        reset();
-        hide();
-    });
-    const ref = (0, react_1.useRef)(null);
-    const onClick = (0, react_1.useCallback)(() => {
-        if (ref.current?.classList.contains('focus-visible')) {
-            ref.current.classList.remove('focus-visible');
-            hide();
-            return;
-        }
-        if (ref.current) {
-            ref.current.focus();
-            show();
-            ref.current.classList.add('focus-visible');
-        }
-    }, [hide, show]);
-    const handleSelection = (0, react_1.useCallback)((args) => {
-        menuAction(args, options);
-        reset();
-        hide();
-    }, [hide, reset, options]);
-    (0, react_1.useEffect)(() => {
-        if (visible === 'hidden') {
-            ref.current?.classList.remove('focus-visible');
-        }
-    }, [visible]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.IconButton, { "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.PositionAnimated, { width: 'auto', visible: visible, anchor: ref, placement: placement, children: (0, jsx_runtime_1.jsx)(Options_1.Options, { maxHeight: maxHeight, renderItem: renderItem, width: optionWidth, onSelect: handleSelection, options: mappedOptions, cursor: cursor, ref: ref }) })] }));
-};
-exports["default"] = Menu;
-
-
-/***/ }),
-
-/***/ "./src/components/Menu/V2/Menu.tsx":
-/*!*****************************************!*\
-  !*** ./src/components/Menu/V2/Menu.tsx ***!
-  \*****************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3756,10 +3692,10 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
-const Button_1 = __webpack_require__(/*! ../../Button */ "./src/components/Button/index.ts");
-const MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/V2/MenuDropdown.tsx"));
-const MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/V2/MenuPopover.tsx"));
-const helpers_1 = __webpack_require__(/*! ./helpers/helpers */ "./src/components/Menu/V2/helpers/helpers.ts");
+const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
+const MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/MenuDropdown.tsx"));
+const MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/MenuPopover.tsx"));
+const helpers_1 = __webpack_require__(/*! ./helpers/helpers */ "./src/components/Menu/helpers/helpers.ts");
 const Menu = ({ icon = 'kebab', placement = 'bottom-start', title, is: MenuButton = Button_1.IconButton, className, pressed, maxWidth = 'x250', button, detached, ...props }) => {
     const state = (0, react_stately_1.useMenuTriggerState)(props);
     const ref = (0, react_1.useRef)(null);
@@ -3782,16 +3718,15 @@ const Menu = ({ icon = 'kebab', placement = 'bottom-start', title, is: MenuButto
                 pressed: pressed || state.isOpen,
             })) : ((0, jsx_runtime_1.jsx)(MenuButton, { ...buttonProps, ref: ref, icon: icon, className: className, title: title, pressed: pressed || state.isOpen, small: defaultSmall, ...sizes })), detached ? (0, react_dom_1.createPortal)(popover, document.body) : popover] }));
 };
-Menu.displayName = 'MenuV2';
 exports["default"] = Menu;
 
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuDropdown.tsx":
-/*!*************************************************!*\
-  !*** ./src/components/Menu/V2/MenuDropdown.tsx ***!
-  \*************************************************/
+/***/ "./src/components/Menu/MenuDropdown.tsx":
+/*!**********************************************!*\
+  !*** ./src/components/Menu/MenuDropdown.tsx ***!
+  \**********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3803,8 +3738,8 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
-const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/V2/MenuItem.tsx"));
-const MenuSection_1 = __importDefault(__webpack_require__(/*! ./MenuSection */ "./src/components/Menu/V2/MenuSection.tsx"));
+const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/MenuItem.tsx"));
+const MenuSection_1 = __importDefault(__webpack_require__(/*! ./MenuSection */ "./src/components/Menu/MenuSection.tsx"));
 function MenuDropDown(props) {
     const state = (0, react_stately_1.useTreeState)(props);
     const ref = (0, react_1.useRef)(null);
@@ -3816,10 +3751,10 @@ exports["default"] = MenuDropDown;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuItem.tsx":
-/*!*********************************************!*\
-  !*** ./src/components/Menu/V2/MenuItem.tsx ***!
-  \*********************************************/
+/***/ "./src/components/Menu/MenuItem.tsx":
+/*!******************************************!*\
+  !*** ./src/components/Menu/MenuItem.tsx ***!
+  \******************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3830,8 +3765,8 @@ 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_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
-const _1 = __webpack_require__(/*! . */ "./src/components/Menu/V2/index.ts");
-const MenuOption_1 = __importDefault(__webpack_require__(/*! ./MenuOption */ "./src/components/Menu/V2/MenuOption.tsx"));
+const _1 = __webpack_require__(/*! . */ "./src/components/Menu/index.ts");
+const MenuOption_1 = __importDefault(__webpack_require__(/*! ./MenuOption */ "./src/components/Menu/MenuOption.tsx"));
 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);
@@ -3842,17 +3777,17 @@ exports["default"] = MenuItem;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuOption.tsx":
-/*!***********************************************!*\
-  !*** ./src/components/Menu/V2/MenuOption.tsx ***!
-  \***********************************************/
+/***/ "./src/components/Menu/MenuOption.tsx":
+/*!********************************************!*\
+  !*** ./src/components/Menu/MenuOption.tsx ***!
+  \********************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_2 = __webpack_require__(/*! react */ "react");
-const prevent_1 = __webpack_require__(/*! ../../../helpers/prevent */ "./src/helpers/prevent.ts");
+const prevent_1 = __webpack_require__(/*! ../../helpers/prevent */ "./src/helpers/prevent.ts");
 const MenuOption = (0, react_2.forwardRef)(function MenuOption({ is: Tag = 'li', id, children, focus, selected, className, title, disabled, variant, onClick, ...props }, ref) {
     return ((0, react_1.createElement)(Tag, { ...props, key: id, id: id, ref: ref, "aria-selected": !!selected, "aria-disabled": !!disabled, title: title, onClick: (e) => {
             if (disabled) {
@@ -3876,19 +3811,19 @@ exports["default"] = (0, react_2.memo)(MenuOption);
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuPopover.tsx":
-/*!************************************************!*\
-  !*** ./src/components/Menu/V2/MenuPopover.tsx ***!
-  \************************************************/
+/***/ "./src/components/Menu/MenuPopover.tsx":
+/*!*********************************************!*\
+  !*** ./src/components/Menu/MenuPopover.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 fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
-const DropdownDesktop_1 = __webpack_require__(/*! ../../Dropdown/DropdownDesktop */ "./src/components/Dropdown/DropdownDesktop.tsx");
-const DropdownMobile_1 = __webpack_require__(/*! ../../Dropdown/DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
-const Popover_1 = __webpack_require__(/*! ../../Popover */ "./src/components/Popover/index.ts");
+const DropdownDesktop_1 = __webpack_require__(/*! ../Dropdown/DropdownDesktop */ "./src/components/Dropdown/DropdownDesktop.tsx");
+const DropdownMobile_1 = __webpack_require__(/*! ../Dropdown/DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
+const Popover_1 = __webpack_require__(/*! ../Popover */ "./src/components/Popover/index.ts");
 function MenuPopover({ children, state, offset = 4, maxWidth, ...props }) {
     const isMobile = !(0, fuselage_hooks_1.useBreakpoints)().includes('sm');
     if (isMobile) {
@@ -3901,10 +3836,10 @@ exports["default"] = MenuPopover;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/MenuSection.tsx":
-/*!************************************************!*\
-  !*** ./src/components/Menu/V2/MenuSection.tsx ***!
-  \************************************************/
+/***/ "./src/components/Menu/MenuSection.tsx":
+/*!*********************************************!*\
+  !*** ./src/components/Menu/MenuSection.tsx ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3914,10 +3849,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
-const Box_1 = __webpack_require__(/*! ../../Box */ "./src/components/Box/index.ts");
-const Divider_1 = __webpack_require__(/*! ../../Divider */ "./src/components/Divider/index.ts");
-const Option_1 = __webpack_require__(/*! ../../Option */ "./src/components/Option/index.ts");
-const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/V2/MenuItem.tsx"));
+const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
+const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
+const Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/index.ts");
+const MenuItem_1 = __importDefault(__webpack_require__(/*! ./MenuItem */ "./src/components/Menu/MenuItem.tsx"));
 function MenuSection({ section, state, }) {
     const { itemProps, headingProps, groupProps } = (0, react_aria_1.useMenuSection)({
         'heading': section.rendered,
@@ -3933,10 +3868,10 @@ exports["default"] = MenuSection;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/helpers/helpers.ts":
-/*!***************************************************!*\
-  !*** ./src/components/Menu/V2/helpers/helpers.ts ***!
-  \***************************************************/
+/***/ "./src/components/Menu/helpers/helpers.ts":
+/*!************************************************!*\
+  !*** ./src/components/Menu/helpers/helpers.ts ***!
+  \************************************************/
 /***/ ((__unused_webpack_module, exports) => {
 
 
@@ -3977,10 +3912,10 @@ exports.getPlacement = getPlacement;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/index.ts":
-/*!*****************************************!*\
-  !*** ./src/components/Menu/V2/index.ts ***!
-  \*****************************************/
+/***/ "./src/components/Menu/index.ts":
+/*!**************************************!*\
+  !*** ./src/components/Menu/index.ts ***!
+  \**************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3988,14 +3923,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MenuItemDescription = exports.MenuItemTitle = exports.MenuItemSkeleton = exports.MenuItemInput = exports.MenuItemIcon = exports.MenuItemContent = exports.MenuItemColumn = exports.MenuItemAvatar = exports.MenuSection = exports.MenuItem = exports.MenuV2 = void 0;
-var Menu_1 = __webpack_require__(/*! ./Menu */ "./src/components/Menu/V2/Menu.tsx");
-Object.defineProperty(exports, "MenuV2", ({ enumerable: true, get: function () { return __importDefault(Menu_1).default; } }));
-var MenuItem_1 = __webpack_require__(/*! ./stately/MenuItem */ "./src/components/Menu/V2/stately/MenuItem.tsx");
+exports.MenuItemDescription = exports.MenuItemTitle = exports.MenuItemSkeleton = exports.MenuItemInput = exports.MenuItemIcon = exports.MenuItemContent = exports.MenuItemColumn = exports.MenuItemAvatar = exports.MenuSection = exports.MenuItem = exports.Menu = void 0;
+var Menu_1 = __webpack_require__(/*! ./Menu */ "./src/components/Menu/Menu.tsx");
+Object.defineProperty(exports, "Menu", ({ enumerable: true, get: function () { return __importDefault(Menu_1).default; } }));
+var MenuItem_1 = __webpack_require__(/*! ./stately/MenuItem */ "./src/components/Menu/stately/MenuItem.tsx");
 Object.defineProperty(exports, "MenuItem", ({ enumerable: true, get: function () { return __importDefault(MenuItem_1).default; } }));
-var MenuSection_1 = __webpack_require__(/*! ./stately/MenuSection */ "./src/components/Menu/V2/stately/MenuSection.tsx");
+var MenuSection_1 = __webpack_require__(/*! ./stately/MenuSection */ "./src/components/Menu/stately/MenuSection.tsx");
 Object.defineProperty(exports, "MenuSection", ({ enumerable: true, get: function () { return __importDefault(MenuSection_1).default; } }));
-var Option_1 = __webpack_require__(/*! ../../Option */ "./src/components/Option/index.ts");
+var Option_1 = __webpack_require__(/*! ../Option */ "./src/components/Option/index.ts");
 Object.defineProperty(exports, "MenuItemAvatar", ({ enumerable: true, get: function () { return Option_1.OptionAvatar; } }));
 Object.defineProperty(exports, "MenuItemColumn", ({ enumerable: true, get: function () { return Option_1.OptionColumn; } }));
 Object.defineProperty(exports, "MenuItemContent", ({ enumerable: true, get: function () { return Option_1.OptionContent; } }));
@@ -4008,10 +3943,10 @@ Object.defineProperty(exports, "MenuItemDescription", ({ enumerable: true, get:
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/stately/MenuItem.tsx":
-/*!*****************************************************!*\
-  !*** ./src/components/Menu/V2/stately/MenuItem.tsx ***!
-  \*****************************************************/
+/***/ "./src/components/Menu/stately/MenuItem.tsx":
+/*!**************************************************!*\
+  !*** ./src/components/Menu/stately/MenuItem.tsx ***!
+  \**************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
@@ -4076,10 +4011,10 @@ exports["default"] = MenuItem;
 
 /***/ }),
 
-/***/ "./src/components/Menu/V2/stately/MenuSection.tsx":
-/*!********************************************************!*\
-  !*** ./src/components/Menu/V2/stately/MenuSection.tsx ***!
-  \********************************************************/
+/***/ "./src/components/Menu/stately/MenuSection.tsx":
+/*!*****************************************************!*\
+  !*** ./src/components/Menu/stately/MenuSection.tsx ***!
+  \*****************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
@@ -4125,72 +4060,20 @@ MenuSection.getCollectionNode = function* getCollectionNode(props) {
 exports["default"] = MenuSection;
 
 
-/***/ }),
-
-/***/ "./src/components/Menu/index.ts":
-/*!**************************************!*\
-  !*** ./src/components/Menu/index.ts ***!
-  \**************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-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 __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.Menu = void 0;
-var Menu_1 = __webpack_require__(/*! ./Menu */ "./src/components/Menu/Menu.tsx");
-Object.defineProperty(exports, "Menu", ({ enumerable: true, get: function () { return __importDefault(Menu_1).default; } }));
-__exportStar(__webpack_require__(/*! ./V2 */ "./src/components/Menu/V2/index.ts"), exports);
-
-
 /***/ }),
 
 /***/ "./src/components/Message/Message.tsx":
 /*!********************************************!*\
   !*** ./src/components/Message/Message.tsx ***!
   \********************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__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 prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
-const MessageBlock_1 = __importDefault(__webpack_require__(/*! ./MessageBlock */ "./src/components/Message/MessageBlock.tsx"));
-const MessageBody_1 = __importDefault(__webpack_require__(/*! ./MessageBody */ "./src/components/Message/MessageBody.tsx"));
-const MessageContainer_1 = __importDefault(__webpack_require__(/*! ./MessageContainer */ "./src/components/Message/MessageContainer.tsx"));
-const MessageContainerFixed_1 = __importDefault(__webpack_require__(/*! ./MessageContainerFixed */ "./src/components/Message/MessageContainerFixed.tsx"));
-const MessageDivider_1 = __webpack_require__(/*! ./MessageDivider */ "./src/components/Message/MessageDivider/index.ts");
-const MessageHeader_1 = __importDefault(__webpack_require__(/*! ./MessageHeader */ "./src/components/Message/MessageHeader.tsx"));
-const MessageHighlight_1 = __importDefault(__webpack_require__(/*! ./MessageHighlight */ "./src/components/Message/MessageHighlight.tsx"));
-const MessageLeftContainer_1 = __importDefault(__webpack_require__(/*! ./MessageLeftContainer */ "./src/components/Message/MessageLeftContainer.tsx"));
-const MessageMetrics_1 = __webpack_require__(/*! ./MessageMetrics */ "./src/components/Message/MessageMetrics/index.ts");
-const MessageName_1 = __importDefault(__webpack_require__(/*! ./MessageName */ "./src/components/Message/MessageName.tsx"));
-const MessageNameContainer_1 = __importDefault(__webpack_require__(/*! ./MessageNameContainer */ "./src/components/Message/MessageNameContainer.tsx"));
-const MessageRole_1 = __importDefault(__webpack_require__(/*! ./MessageRole */ "./src/components/Message/MessageRole.tsx"));
-const MessageRoles_1 = __importDefault(__webpack_require__(/*! ./MessageRoles */ "./src/components/Message/MessageRoles.tsx"));
-const MessageTimestamp_1 = __importDefault(__webpack_require__(/*! ./MessageTimestamp */ "./src/components/Message/MessageTimestamp.tsx"));
-const MessageToolbar_1 = __webpack_require__(/*! ./MessageToolbar */ "./src/components/Message/MessageToolbar/index.ts");
-const MessageUsername_1 = __importDefault(__webpack_require__(/*! ./MessageUsername */ "./src/components/Message/MessageUsername.tsx"));
-const Message = Object.assign((0, react_1.forwardRef)(function Message({ className, clickable, sequential, isSelected, isEditing, isPending, highlight, ...props }, ref) {
+const Message = (0, react_1.forwardRef)(function Message({ className, clickable, sequential, isSelected, isEditing, isPending, highlight, ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, prependClassName_1.prependClassName)(className, [
             'rcx-message',
             (clickable || props.onClick) && 'rcx-message--clickable',
@@ -4202,23 +4085,6 @@ const Message = Object.assign((0, react_1.forwardRef)(function Message({ classNa
         ]
             .filter(Boolean)
             .join(' ')), ...props }));
-}), {
-    Metrics: MessageMetrics_1.MessageMetrics,
-    Toolbar: MessageToolbar_1.MessageToolbar,
-    Container: MessageContainer_1.default,
-    ContainerFixed: MessageContainerFixed_1.default,
-    LeftContainer: MessageLeftContainer_1.default,
-    Header: MessageHeader_1.default,
-    Body: MessageBody_1.default,
-    Block: MessageBlock_1.default,
-    Timestamp: MessageTimestamp_1.default,
-    NameContainer: MessageNameContainer_1.default,
-    Name: MessageName_1.default,
-    Username: MessageUsername_1.default,
-    Roles: MessageRoles_1.default,
-    Role: MessageRole_1.default,
-    Divider: MessageDivider_1.MessageDivider,
-    Highlight: MessageHighlight_1.default,
 });
 exports["default"] = Message;
 
@@ -4332,13 +4198,16 @@ Object.defineProperty(exports, "MessageDivider", ({ enumerable: true, get: funct
 /*!*************************************************!*\
   !*** ./src/components/Message/MessageEmoji.tsx ***!
   \*************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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 MessageEmojiBase_1 = __webpack_require__(/*! ./MessageEmojiBase */ "./src/components/Message/MessageEmojiBase.tsx");
-const MessageEmoji = ({ name, className, image, big, ...props }) => ((0, jsx_runtime_1.jsx)(MessageEmojiBase_1.MessageEmojiBase, { className: [
+const MessageEmojiBase_1 = __importDefault(__webpack_require__(/*! ./MessageEmojiBase */ "./src/components/Message/MessageEmojiBase.tsx"));
+const MessageEmoji = ({ name, className, image, big, ...props }) => ((0, jsx_runtime_1.jsx)(MessageEmojiBase_1.default, { className: [
         'rcx-message__emoji',
         className,
         big && 'rcx-message__emoji--big',
@@ -4358,10 +4227,9 @@ exports["default"] = MessageEmoji;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MessageEmojiBase = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const MessageEmojiBase = ({ name, image, className, ...props }) => ((0, jsx_runtime_1.jsx)("span", { className: `${className || ''} ${name}`, style: image && image.length ? { backgroundImage: image } : undefined, ...props }));
-exports.MessageEmojiBase = MessageEmojiBase;
+exports["default"] = MessageEmojiBase;
 
 
 /***/ }),
@@ -4626,14 +4494,7 @@ 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 MessageMetricsContentItem_1 = __importDefault(__webpack_require__(/*! ./MessageMetricsContentItem */ "./src/components/Message/MessageMetrics/MessageMetricsContentItem.tsx"));
-const MessageMetricsFollowing_1 = __importDefault(__webpack_require__(/*! ./MessageMetricsFollowing */ "./src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx"));
-const MessageMetricsItem_1 = __webpack_require__(/*! ./MessageMetricsItem */ "./src/components/Message/MessageMetrics/MessageMetricsItem/index.ts");
-const MessageMetricsReply_1 = __importDefault(__webpack_require__(/*! ./MessageMetricsReply */ "./src/components/Message/MessageMetrics/MessageMetricsReply.tsx"));
-const MessageMetrics = Object.assign((props) => ((0, jsx_runtime_1.jsx)(MessageMetricsContentItem_1.default, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rcx-message-metrics__content-wrapper', ...props }) })), {
-    Reply: MessageMetricsReply_1.default,
-    Item: MessageMetricsItem_1.MessageMetricsItem,
-    Following: MessageMetricsFollowing_1.default,
-});
+const MessageMetrics = (props) => ((0, jsx_runtime_1.jsx)(MessageMetricsContentItem_1.default, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rcx-message-metrics__content-wrapper', ...props }) }));
 exports["default"] = MessageMetrics;
 
 
@@ -4674,21 +4535,13 @@ exports["default"] = MessageMetricsFollowing;
 /*!*****************************************************************************************!*\
   !*** ./src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItem.tsx ***!
   \*****************************************************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__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 prependClassName_1 = __webpack_require__(/*! ../../../../helpers/prependClassName */ "./src/helpers/prependClassName.ts");
-const MessageMetricsItemIcon_1 = __importDefault(__webpack_require__(/*! ./MessageMetricsItemIcon */ "./src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemIcon.tsx"));
-const MessageMetricsItemLabel_1 = __importDefault(__webpack_require__(/*! ./MessageMetricsItemLabel */ "./src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemLabel.tsx"));
-const MessageMetricsItem = Object.assign(({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, prependClassName_1.prependClassName)(className, 'rcx-message-metrics__item'), ...props })), {
-    Icon: MessageMetricsItemIcon_1.default,
-    Label: MessageMetricsItemLabel_1.default,
-});
+const MessageMetricsItem = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, prependClassName_1.prependClassName)(className, 'rcx-message-metrics__item'), ...props }));
 exports["default"] = MessageMetricsItem;
 
 
@@ -4874,24 +4727,27 @@ exports["default"] = MessageNameContainer;
 /*!*********************************************************************!*\
   !*** ./src/components/Message/MessageReactions/MessageReaction.tsx ***!
   \*********************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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 }));
-exports.MessageReaction = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
-const MessageReactionCounter_1 = __webpack_require__(/*! ./MessageReactionCounter */ "./src/components/Message/MessageReactions/MessageReactionCounter.tsx");
-const MessageReactionEmoji_1 = __webpack_require__(/*! ./MessageReactionEmoji */ "./src/components/Message/MessageReactions/MessageReactionEmoji.tsx");
-exports.MessageReaction = (0, react_1.forwardRef)(function Reaction({ name, counter, mine, children, className, ...props }, ref) {
+const MessageReactionCounter_1 = __importDefault(__webpack_require__(/*! ./MessageReactionCounter */ "./src/components/Message/MessageReactions/MessageReactionCounter.tsx"));
+const MessageReactionEmoji_1 = __importDefault(__webpack_require__(/*! ./MessageReactionEmoji */ "./src/components/Message/MessageReactions/MessageReactionEmoji.tsx"));
+const MessageReaction = (0, react_1.forwardRef)(function Reaction({ name, counter, mine, children, className, ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)("div", { className: [
             `rcx-message-reactions__reaction`,
             mine && 'rcx-message-reactions__reaction--mine',
             className,
         ]
             .filter(Boolean)
-            .join(' '), ref: ref, role: 'button', tabIndex: 0, ...props, children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name && (0, jsx_runtime_1.jsx)(MessageReactionEmoji_1.MessageReactionEmoji, { name: name }), counter && (0, jsx_runtime_1.jsx)(MessageReactionCounter_1.MessageReactionCounter, { counter: counter })] })) }));
+            .join(' '), ref: ref, role: 'button', tabIndex: 0, ...props, children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name && (0, jsx_runtime_1.jsx)(MessageReactionEmoji_1.default, { name: name }), counter && (0, jsx_runtime_1.jsx)(MessageReactionCounter_1.default, { counter: counter })] })) }));
 });
+exports["default"] = MessageReaction;
 
 
 /***/ }),
@@ -4904,7 +4760,6 @@ exports.MessageReaction = (0, react_1.forwardRef)(function Reaction({ name, coun
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MessageReactionAction = 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 MessageReactionAction = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { role: 'button', tabIndex: 0, className: [
@@ -4913,7 +4768,7 @@ const MessageReactionAction = ({ className, ...props }) => ((0, jsx_runtime_1.js
     ]
         .filter(Boolean)
         .join(' '), ...props, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'emoji-plus', size: 'x16' }) }));
-exports.MessageReactionAction = MessageReactionAction;
+exports["default"] = MessageReactionAction;
 
 
 /***/ }),
@@ -4926,10 +4781,9 @@ exports.MessageReactionAction = MessageReactionAction;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MessageReactionCounter = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const MessageReactionCounter = ({ counter, className, }) => ((0, jsx_runtime_1.jsx)("div", { className: `rcx-message-reactions__counter ${className}`, children: counter }));
-exports.MessageReactionCounter = MessageReactionCounter;
+exports["default"] = MessageReactionCounter;
 
 
 /***/ }),
@@ -4938,15 +4792,17 @@ exports.MessageReactionCounter = MessageReactionCounter;
 /*!**************************************************************************!*\
   !*** ./src/components/Message/MessageReactions/MessageReactionEmoji.tsx ***!
   \**************************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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 }));
-exports.MessageReactionEmoji = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const MessageEmojiBase_1 = __webpack_require__(/*! ../MessageEmojiBase */ "./src/components/Message/MessageEmojiBase.tsx");
-const MessageReactionEmoji = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(MessageEmojiBase_1.MessageEmojiBase, { className: `rcx-message-reactions__emoji ${className || ''}`, ...props }));
-exports.MessageReactionEmoji = MessageReactionEmoji;
+const MessageEmojiBase_1 = __importDefault(__webpack_require__(/*! ../MessageEmojiBase */ "./src/components/Message/MessageEmojiBase.tsx"));
+const MessageReactionEmoji = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(MessageEmojiBase_1.default, { className: `rcx-message-reactions__emoji ${className || ''}`, ...props }));
+exports["default"] = MessageReactionEmoji;
 
 
 /***/ }),
@@ -4984,21 +4840,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MessageReactionEmoji = exports.MessageReactionCounter = exports.MessageReactions = exports.MessageReactionAction = exports.MessageReaction = void 0;
-const MessageReaction_1 = __webpack_require__(/*! ./MessageReaction */ "./src/components/Message/MessageReactions/MessageReaction.tsx");
-Object.defineProperty(exports, "MessageReaction", ({ enumerable: true, get: function () { return MessageReaction_1.MessageReaction; } }));
-const MessageReactionAction_1 = __webpack_require__(/*! ./MessageReactionAction */ "./src/components/Message/MessageReactions/MessageReactionAction.tsx");
-Object.defineProperty(exports, "MessageReactionAction", ({ enumerable: true, get: function () { return MessageReactionAction_1.MessageReactionAction; } }));
-const MessageReactionCounter_1 = __webpack_require__(/*! ./MessageReactionCounter */ "./src/components/Message/MessageReactions/MessageReactionCounter.tsx");
-Object.defineProperty(exports, "MessageReactionCounter", ({ enumerable: true, get: function () { return MessageReactionCounter_1.MessageReactionCounter; } }));
-const MessageReactionEmoji_1 = __webpack_require__(/*! ./MessageReactionEmoji */ "./src/components/Message/MessageReactions/MessageReactionEmoji.tsx");
-Object.defineProperty(exports, "MessageReactionEmoji", ({ enumerable: true, get: function () { return MessageReactionEmoji_1.MessageReactionEmoji; } }));
+exports.MessageReactionEmoji = exports.MessageReactionCounter = exports.MessageReactionAction = exports.MessageReaction = exports.MessageReactions = void 0;
 const MessageReactions_1 = __importDefault(__webpack_require__(/*! ./MessageReactions */ "./src/components/Message/MessageReactions/MessageReactions.tsx"));
 exports.MessageReactions = MessageReactions_1.default;
-exports["default"] = Object.assign(MessageReactions_1.default, {
-    Reaction: MessageReaction_1.MessageReaction,
-    Action: MessageReactionAction_1.MessageReactionAction,
-});
+exports["default"] = MessageReactions_1.default;
+var MessageReaction_1 = __webpack_require__(/*! ./MessageReaction */ "./src/components/Message/MessageReactions/MessageReaction.tsx");
+Object.defineProperty(exports, "MessageReaction", ({ enumerable: true, get: function () { return __importDefault(MessageReaction_1).default; } }));
+var MessageReactionAction_1 = __webpack_require__(/*! ./MessageReactionAction */ "./src/components/Message/MessageReactions/MessageReactionAction.tsx");
+Object.defineProperty(exports, "MessageReactionAction", ({ enumerable: true, get: function () { return __importDefault(MessageReactionAction_1).default; } }));
+var MessageReactionCounter_1 = __webpack_require__(/*! ./MessageReactionCounter */ "./src/components/Message/MessageReactions/MessageReactionCounter.tsx");
+Object.defineProperty(exports, "MessageReactionCounter", ({ enumerable: true, get: function () { return __importDefault(MessageReactionCounter_1).default; } }));
+var MessageReactionEmoji_1 = __webpack_require__(/*! ./MessageReactionEmoji */ "./src/components/Message/MessageReactions/MessageReactionEmoji.tsx");
+Object.defineProperty(exports, "MessageReactionEmoji", ({ enumerable: true, get: function () { return __importDefault(MessageReactionEmoji_1).default; } }));
 
 
 /***/ }),
@@ -5302,25 +5155,15 @@ exports["default"] = MessageTimestamp;
 /*!******************************************************************!*\
   !*** ./src/components/Message/MessageToolbar/MessageToolbar.tsx ***!
   \******************************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__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 ButtonGroup_1 = __webpack_require__(/*! ../../ButtonGroup */ "./src/components/ButtonGroup/index.ts");
-const Menu_1 = __webpack_require__(/*! ../../Menu */ "./src/components/Menu/index.ts");
-const MessageToolbarItem_1 = __importDefault(__webpack_require__(/*! ./MessageToolbarItem */ "./src/components/Message/MessageToolbar/MessageToolbarItem.tsx"));
-const MessageToolbarWrapper_1 = __importDefault(__webpack_require__(/*! ./MessageToolbarWrapper */ "./src/components/Message/MessageToolbar/MessageToolbarWrapper.tsx"));
-const MessageToolbar = Object.assign((0, react_1.forwardRef)(function MessageToolbar(props, ref) {
+const MessageToolbar = (0, react_1.forwardRef)(function MessageToolbar(props, ref) {
     return ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-message-toolbar', children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { role: 'toolbar', ref: ref, small: true, ...props }) }));
-}), {
-    Item: MessageToolbarItem_1.default,
-    Wrapper: MessageToolbarWrapper_1.default,
-    Menu: Menu_1.Menu,
 });
 exports["default"] = MessageToolbar;
 
@@ -5420,24 +5263,7 @@ 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 Message_1 = __importDefault(__webpack_require__(/*! ../Message */ "./src/components/Message/Message.tsx"));
-const MessageLeftContainer_1 = __importDefault(__webpack_require__(/*! ../MessageLeftContainer */ "./src/components/Message/MessageLeftContainer.tsx"));
-const ThreadMessageBody_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageBody */ "./src/components/Message/ThreadMessage/ThreadMessageBody.tsx"));
-const ThreadMessageContainer_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageContainer */ "./src/components/Message/ThreadMessage/ThreadMessageContainer.tsx"));
-const ThreadMessageFollow_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageFollow */ "./src/components/Message/ThreadMessage/ThreadMessageFollow.tsx"));
-const ThreadMessageIconThread_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageIconThread */ "./src/components/Message/ThreadMessage/ThreadMessageIconThread.tsx"));
-const ThreadMessageOrigin_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageOrigin */ "./src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx"));
-const ThreadMessageRow_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageRow */ "./src/components/Message/ThreadMessage/ThreadMessageRow.tsx"));
-const ThreadMessageUnfollow_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageUnfollow */ "./src/components/Message/ThreadMessage/ThreadMessageUnfollow.tsx"));
-const ThreadMessage = Object.assign((props) => ((0, jsx_runtime_1.jsx)(Message_1.default, { ...{ className: 'rcx-message-thread' }, ...props })), {
-    Row: ThreadMessageRow_1.default,
-    Container: ThreadMessageContainer_1.default,
-    LeftContainer: MessageLeftContainer_1.default,
-    Origin: ThreadMessageOrigin_1.default,
-    Message: ThreadMessageBody_1.default,
-    Follow: ThreadMessageFollow_1.default,
-    Unfollow: ThreadMessageUnfollow_1.default,
-    Icon: ThreadMessageIconThread_1.default,
-});
+const ThreadMessage = (props) => ((0, jsx_runtime_1.jsx)(Message_1.default, { className: 'rcx-message-thread', ...props }));
 exports["default"] = ThreadMessage;
 
 
@@ -5477,13 +5303,16 @@ exports["default"] = ThreadMessageContainer;
 /*!*********************************************************************!*\
   !*** ./src/components/Message/ThreadMessage/ThreadMessageEmoji.tsx ***!
   \*********************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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 MessageEmojiBase_1 = __webpack_require__(/*! ../MessageEmojiBase */ "./src/components/Message/MessageEmojiBase.tsx");
-const ThreadMessageEmoji = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(MessageEmojiBase_1.MessageEmojiBase, { className: `rcx-message-thread__emoji ${className || ''}`, ...props }));
+const MessageEmojiBase_1 = __importDefault(__webpack_require__(/*! ../MessageEmojiBase */ "./src/components/Message/MessageEmojiBase.tsx"));
+const ThreadMessageEmoji = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(MessageEmojiBase_1.default, { className: `rcx-message-thread__emoji ${className || ''}`, ...props }));
 exports["default"] = ThreadMessageEmoji;
 
 
@@ -5493,13 +5322,16 @@ exports["default"] = ThreadMessageEmoji;
 /*!**********************************************************************!*\
   !*** ./src/components/Message/ThreadMessage/ThreadMessageFollow.tsx ***!
   \**********************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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 ThreadMessageIcon_1 = __webpack_require__(/*! ./ThreadMessageIcon */ "./src/components/Message/ThreadMessage/ThreadMessageIcon.tsx");
-const ThreadMessageFollow = () => ((0, jsx_runtime_1.jsx)(ThreadMessageIcon_1.ThreadMessageIcon, { className: 'rcx-box rcx-box--full rcx-message-thread__icon rcx-message-thread__icon--follow', ...{ name: 'bell' } }));
+const ThreadMessageIcon_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageIcon */ "./src/components/Message/ThreadMessage/ThreadMessageIcon.tsx"));
+const ThreadMessageFollow = () => ((0, jsx_runtime_1.jsx)(ThreadMessageIcon_1.default, { className: 'rcx-box rcx-box--full rcx-message-thread__icon rcx-message-thread__icon--follow', name: 'bell' }));
 exports["default"] = ThreadMessageFollow;
 
 
@@ -5513,11 +5345,10 @@ exports["default"] = ThreadMessageFollow;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ThreadMessageIcon = 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 ThreadMessageIcon = ({ ...props }) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: 'rcx-box rcx-box--full rcx-message-thread__icon', size: 'x16', ...props }));
-exports.ThreadMessageIcon = ThreadMessageIcon;
+exports["default"] = ThreadMessageIcon;
 
 
 /***/ }),
@@ -5526,16 +5357,34 @@ exports.ThreadMessageIcon = ThreadMessageIcon;
 /*!**************************************************************************!*\
   !*** ./src/components/Message/ThreadMessage/ThreadMessageIconThread.tsx ***!
   \**************************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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 ThreadMessageIcon_1 = __webpack_require__(/*! ./ThreadMessageIcon */ "./src/components/Message/ThreadMessage/ThreadMessageIcon.tsx");
-const ThreadMessageIconThread = () => (0, jsx_runtime_1.jsx)(ThreadMessageIcon_1.ThreadMessageIcon, { name: 'thread' });
+const ThreadMessageIcon_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageIcon */ "./src/components/Message/ThreadMessage/ThreadMessageIcon.tsx"));
+const ThreadMessageIconThread = () => (0, jsx_runtime_1.jsx)(ThreadMessageIcon_1.default, { name: 'thread' });
 exports["default"] = ThreadMessageIconThread;
 
 
+/***/ }),
+
+/***/ "./src/components/Message/ThreadMessage/ThreadMessageLeftContainer.tsx":
+/*!*****************************************************************************!*\
+  !*** ./src/components/Message/ThreadMessage/ThreadMessageLeftContainer.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 ThreadMessageLeftContainer = (props) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-message-container rcx-message-container--left', ...props }));
+exports["default"] = ThreadMessageLeftContainer;
+
+
 /***/ }),
 
 /***/ "./src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx":
@@ -5577,13 +5426,16 @@ exports["default"] = ThreadMessageRow;
 /*!************************************************************************!*\
   !*** ./src/components/Message/ThreadMessage/ThreadMessageUnfollow.tsx ***!
   \************************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ (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 ThreadMessageIcon_1 = __webpack_require__(/*! ./ThreadMessageIcon */ "./src/components/Message/ThreadMessage/ThreadMessageIcon.tsx");
-const ThreadMessageUnfollow = () => ((0, jsx_runtime_1.jsx)(ThreadMessageIcon_1.ThreadMessageIcon, { className: 'rcx-box rcx-box--full rcx-message-thread__icon rcx-message-thread__icon--unfollow', ...{ name: 'bell-off' } }));
+const ThreadMessageIcon_1 = __importDefault(__webpack_require__(/*! ./ThreadMessageIcon */ "./src/components/Message/ThreadMessage/ThreadMessageIcon.tsx"));
+const ThreadMessageUnfollow = () => ((0, jsx_runtime_1.jsx)(ThreadMessageIcon_1.default, { className: 'rcx-box rcx-box--full rcx-message-thread__icon rcx-message-thread__icon--unfollow', name: 'bell-off' }));
 exports["default"] = ThreadMessageUnfollow;
 
 
@@ -5619,8 +5471,8 @@ var ThreadMessageRow_1 = __webpack_require__(/*! ./ThreadMessageRow */ "./src/co
 Object.defineProperty(exports, "ThreadMessageRow", ({ enumerable: true, get: function () { return __importDefault(ThreadMessageRow_1).default; } }));
 var ThreadMessageUnfollow_1 = __webpack_require__(/*! ./ThreadMessageUnfollow */ "./src/components/Message/ThreadMessage/ThreadMessageUnfollow.tsx");
 Object.defineProperty(exports, "ThreadMessageUnfollow", ({ enumerable: true, get: function () { return __importDefault(ThreadMessageUnfollow_1).default; } }));
-var MessageLeftContainer_1 = __webpack_require__(/*! ../MessageLeftContainer */ "./src/components/Message/MessageLeftContainer.tsx");
-Object.defineProperty(exports, "ThreadMessageLeftContainer", ({ enumerable: true, get: function () { return __importDefault(MessageLeftContainer_1).default; } }));
+var ThreadMessageLeftContainer_1 = __webpack_require__(/*! ./ThreadMessageLeftContainer */ "./src/components/Message/ThreadMessage/ThreadMessageLeftContainer.tsx");
+Object.defineProperty(exports, "ThreadMessageLeftContainer", ({ enumerable: true, get: function () { return __importDefault(ThreadMessageLeftContainer_1).default; } }));
 
 
 /***/ }),
@@ -6046,7 +5898,7 @@ const MultiSelect = (0, react_1.forwardRef)(({ value, filter, setFilter, options
         }
         return null;
     };
-    const handleClick = (0, fuselage_hooks_1.useEffectEvent)(() => {
+    const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
             return hide();
         }
@@ -6830,14 +6682,14 @@ const useCursor = (initial, options, onChange) => {
     const [cursor, setCursor] = (0, react_1.useState)(initial);
     const visibilityHandler = (0, useVisible_1.useVisible)();
     const [visibility, hide, show] = visibilityHandler;
-    const reset = (0, fuselage_hooks_1.useEffectEvent)(() => setCursor(0));
-    const handleKeyUp = (0, fuselage_hooks_1.useEffectEvent)((e) => {
+    const reset = (0, fuselage_hooks_1.useStableCallback)(() => setCursor(0));
+    const handleKeyUp = (0, fuselage_hooks_1.useStableCallback)((e) => {
         const { keyCode } = e;
         if (AnimatedVisibility_1.AnimatedVisibility.HIDDEN === visibility && keyCode === keyCodes.TAB) {
             return show();
         }
     });
-    const handleKeyDown = (0, fuselage_hooks_1.useEffectEvent)((e) => {
+    const handleKeyDown = (0, fuselage_hooks_1.useStableCallback)((e) => {
         const isSelectableOption = ([, , , type]) => !type || type === 'option';
         const getLastIndex = () => findLastIndex(options, isSelectableOption);
         const { keyCode, key } = e;
@@ -6920,8 +6772,8 @@ const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */
 const AnimatedVisibility_1 = __webpack_require__(/*! ../AnimatedVisibility */ "./src/components/AnimatedVisibility/index.ts");
 const useVisible = (initialVisibility = AnimatedVisibility_1.AnimatedVisibility.HIDDEN) => {
     const [visible, setVisible] = (0, fuselage_hooks_1.useDebouncedState)(initialVisibility, 10);
-    const hide = (0, fuselage_hooks_1.useEffectEvent)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
-    const show = (0, fuselage_hooks_1.useEffectEvent)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.VISIBLE));
+    const hide = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
+    const show = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.VISIBLE));
     return [visible, hide, show];
 };
 exports.useVisible = useVisible;
@@ -6966,8 +6818,8 @@ exports.OptionsPaginated = (0, react_2.forwardRef)(({ withTitle, multiple, rende
 });
 const useVisible = (initialVisibility = AnimatedVisibility_1.AnimatedVisibility.HIDDEN) => {
     const [visible, setVisible] = (0, fuselage_hooks_1.useDebouncedState)(initialVisibility, 10);
-    const hide = (0, fuselage_hooks_1.useEffectEvent)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
-    const show = (0, fuselage_hooks_1.useEffectEvent)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.VISIBLE));
+    const hide = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.HIDDEN));
+    const show = (0, fuselage_hooks_1.useStableCallback)(() => setVisible(AnimatedVisibility_1.AnimatedVisibility.VISIBLE));
     return [visible, hide, show];
 };
 exports.useVisible = useVisible;
@@ -7036,7 +6888,7 @@ const PaginatedMultiSelect = ({ withTitle, value, filter, options = [], error, d
     const [visible, hide, show] = (0, useVisible_1.useVisible)();
     const ref = (0, react_1.useRef)(null);
     const { ref: containerRef, borderBoxSize } = (0, fuselage_hooks_1.useResizeObserver)();
-    const handleClick = (0, fuselage_hooks_1.useEffectEvent)(() => {
+    const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
             return hide();
         }
@@ -7137,7 +6989,7 @@ const PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, erro
     const currentValue = value !== undefined ? value : internalValue;
     const option = options.find((option) => option?.value === currentValue);
     const [visible, hide, show] = (0, useVisible_1.useVisible)();
-    const internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(([value]) => {
+    const internalChangedByClick = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
         onChange(value);
         hide();
@@ -7149,7 +7001,7 @@ const PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, erro
     const visibleText = isUnfilteredOrHidden
         ? valueLabel || placeholder
         : undefined;
-    const handleClick = (0, fuselage_hooks_1.useEffectEvent)(() => {
+    const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE) {
             return hide();
         }
@@ -7181,7 +7033,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)(() => (0, react_1.forwardRef)(({ filter, onChange: _onChange, ...props }, ref) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onChange: (0, fuselage_hooks_1.useEffectEvent)((e) => {
+    const anchor = (0, react_1.useMemo)(() => (0, react_1.forwardRef)(({ filter, onChange: _onChange, ...props }, ref) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', ref: ref, placeholder: placeholder, value: filter, onChange: (0, fuselage_hooks_1.useStableCallback)((e) => {
             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 }));
@@ -8096,7 +7948,7 @@ const pollTouchingEdges = (element, touchingEdgesRef, onScrollContent) => {
 const Scrollable = ({ children, horizontal, vertical, smooth, onScrollContent, }) => {
     const scrollTimeoutRef = (0, react_1.useRef)();
     const touchingEdgesRef = (0, react_1.useRef)({});
-    const handleScroll = (0, fuselage_hooks_1.useEffectEvent)((event) => {
+    const handleScroll = (0, fuselage_hooks_1.useStableCallback)((event) => {
         const element = event.currentTarget;
         if (!scrollTimeoutRef.current) {
             pollTouchingEdges(element, touchingEdgesRef, onScrollContent);
@@ -8428,7 +8280,7 @@ const SelectFocus_1 = __importDefault(__webpack_require__(/*! ./SelectFocus */ "
 const Wrapper = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-select__wrapper": true, ref: ref, ...props })));
 const useDidUpdate = (func, deps) => {
     const didMount = (0, react_1.useRef)(false);
-    const fn = (0, fuselage_hooks_1.useEffectEvent)(func);
+    const fn = (0, fuselage_hooks_1.useStableCallback)(func);
     (0, react_1.useEffect)(() => {
         if (didMount.current) {
             fn();
@@ -8438,7 +8290,7 @@ const useDidUpdate = (func, deps) => {
 };
 const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filter, error, disabled, options = [], anchor: Anchor = SelectFocus_1.default, onChange = () => { }, getValue = ([value] = ['', '']) => value, getLabel = ([, label] = ['', '']) => label, placeholder = '', renderItem, renderSelected: RenderSelected, renderOptions: _Options = Options_1.Options, addonIcon, customEmpty, ...props }, ref) {
     const [internalValue, setInternalValue] = (0, react_1.useState)(value || '');
-    const internalChangedByKeyboard = (0, fuselage_hooks_1.useEffectEvent)(([value]) => {
+    const internalChangedByKeyboard = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
         onChange(value);
     });
@@ -8458,7 +8310,7 @@ const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filt
     const innerRef = (0, react_1.useRef)(null);
     const anchorRef = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     const removeFocusClass = () => innerRef.current?.classList.remove('focus-visible');
-    const internalChangedByClick = (0, fuselage_hooks_1.useEffectEvent)(([value]) => {
+    const internalChangedByClick = (0, fuselage_hooks_1.useStableCallback)(([value]) => {
         setInternalValue(value);
         onChange(value);
         removeFocusClass();
@@ -8479,7 +8331,7 @@ const SelectLegacy = (0, react_1.forwardRef)(function SelectLegacy({ value, filt
     const valueLabel = getLabel(option);
     const visibleText = (filter === undefined || visible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN) &&
         (valueLabel || placeholder || typeof placeholder === 'string');
-    const handleClick = (0, fuselage_hooks_1.useEffectEvent)(() => {
+    const handleClick = (0, fuselage_hooks_1.useStableCallback)(() => {
         if (innerRef.current?.classList.contains('focus-visible')) {
             removeFocusClass();
             return hide();
@@ -10832,8 +10684,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 Margins_1 = __webpack_require__(/*! ../../Margins */ "./src/components/Margins/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: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', 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', 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 }))] }));
 exports["default"] = TableSelection;