@rocket.chat/fuselage 0.82.0 → 0.84.0

package/dist/fuselage.development.js

@@ -452,7 +452,7 @@ const AnimatedVisibility = (props) => {
     if (visibility === AnimatedVisibility.HIDDEN) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: props.children, value: composedFn }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: composedFn, children: props.children }));
 };
 AnimatedVisibility.HIDDEN = 'hidden';
 AnimatedVisibility.VISIBLE = 'visible';
@@ -568,7 +568,7 @@ const AudioPlayer = ({ ref, src, type = 'audio/mpeg', maxPlaybackSpeed = 2, minP
         handlePlaybackSpeed(1);
     };
     const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
-    return ((0, jsx_runtime_1.jsxs)(__1.Box, { borderWidth: 'default', bg: 'tint', borderColor: 'extra-light', pb: 12, pie: 8, pis: 16, borderRadius: 'x4', w: '100%', maxWidth: 'x300', ref: containerRef, display: 'flex', alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(AudioPlayerControls_1.default, { isPlaying: isPlaying, currentTime: currentTime, durationTime: durationTime, playbackSpeed: playbackSpeed, onTogglePlay: handlePlay, onSeek: (time) => {
+    return ((0, jsx_runtime_1.jsxs)(__1.Box, { borderWidth: 'default', backgroundColor: 'tint', borderColor: 'extra-light', paddingBlock: 12, paddingInlineEnd: 8, paddingInlineStart: 16, borderRadius: 'x4', width: '100%', maxWidth: 'x300', ref: containerRef, display: 'flex', alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(AudioPlayerControls_1.default, { isPlaying: isPlaying, currentTime: currentTime, durationTime: durationTime, playbackSpeed: playbackSpeed, onTogglePlay: handlePlay, onSeek: (time) => {
                     if (audioRef.current) {
                         audioRef.current.currentTime = time;
                     }
@@ -620,9 +620,9 @@ const getMaskTime = (durationTime) => new Date(durationTime * 1000)
  * shared/persistent one. `AudioPlayer` wraps this with its own element for the
  * common self-contained case.
  */
-const AudioPlayerControls = ({ isPlaying, currentTime, durationTime, playbackSpeed, onTogglePlay, onSeek, onChangePlaybackSpeed, download = false, downloadHref, onDownload, playLabel = 'Play', pauseLabel = 'Pause', audioPlaybackRangeLabel = 'Audio Playback Range', changePlaybackSpeedLabel = 'Change Playback Speed', downloadAudioFileLabel = 'Download Audio File', }) => ((0, jsx_runtime_1.jsxs)(__1.Box, { display: 'flex', alignItems: 'center', w: 'full', children: [(0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, onClick: onTogglePlay, "aria-label": isPlaying ? pauseLabel : playLabel, icon: isPlaying ? 'pause-shape-filled' : 'play-shape-filled' }), (0, jsx_runtime_1.jsxs)(__1.Margins, { inline: 8, children: [(0, jsx_runtime_1.jsx)(__1.Box, { fontScale: 'p2', color: 'secondary-info', children: isPlaying || currentTime > 0
+const AudioPlayerControls = ({ isPlaying, currentTime, durationTime, playbackSpeed, onTogglePlay, onSeek, onChangePlaybackSpeed, download = false, downloadHref, onDownload, playLabel = 'Play', pauseLabel = 'Pause', audioPlaybackRangeLabel = 'Audio Playback Range', changePlaybackSpeedLabel = 'Change Playback Speed', downloadAudioFileLabel = 'Download Audio File', }) => ((0, jsx_runtime_1.jsxs)(__1.Box, { display: 'flex', alignItems: 'center', width: 'full', children: [(0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, onClick: onTogglePlay, "aria-label": isPlaying ? pauseLabel : playLabel, icon: isPlaying ? 'pause-shape-filled' : 'play-shape-filled' }), (0, jsx_runtime_1.jsxs)(__1.Margins, { inline: 8, children: [(0, jsx_runtime_1.jsx)(__1.Box, { fontScale: 'p2', color: 'secondary-info', children: isPlaying || currentTime > 0
                         ? getMaskTime(currentTime)
-                        : getMaskTime(durationTime) }), (0, jsx_runtime_1.jsx)(__1.Box, { mi: 16, w: 'full', children: (0, jsx_runtime_1.jsx)(Slider_1.Slider, { "aria-label": audioPlaybackRangeLabel, showOutput: false, value: currentTime, maxValue: durationTime, onChange: (value) => onSeek(Array.isArray(value) ? value[0] : value) }) }), (0, jsx_runtime_1.jsxs)(__1.Button, { secondary: true, small: true, onClick: onChangePlaybackSpeed, "aria-label": changePlaybackSpeedLabel, children: [playbackSpeed, "x"] })] }), download && ((0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, is: 'a', href: downloadHref, download: true, icon: 'download', "aria-label": downloadAudioFileLabel, onClick: onDownload }))] }));
+                        : getMaskTime(durationTime) }), (0, jsx_runtime_1.jsx)(__1.Box, { width: 'full', children: (0, jsx_runtime_1.jsx)(Slider_1.Slider, { "aria-label": audioPlaybackRangeLabel, showOutput: false, value: currentTime, maxValue: durationTime, onChange: (value) => onSeek(Array.isArray(value) ? value[0] : value) }) }), (0, jsx_runtime_1.jsxs)(__1.Button, { secondary: true, small: true, onClick: onChangePlaybackSpeed, "aria-label": changePlaybackSpeedLabel, children: [playbackSpeed, "x"] })] }), download && ((0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, is: 'a', href: downloadHref, download: true, icon: 'download', "aria-label": downloadAudioFileLabel, onClick: onDownload }))] }));
 exports["default"] = AudioPlayerControls;
 
 
@@ -736,7 +736,7 @@ function AutoComplete({ ref, value, filter, setFilter, options = [], renderItem,
     (0, react_1.useEffect)(reset, [filter, reset]);
     return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useStableCallback)(() => innerRef.current?.focus()), flexGrow: 1, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: mergedRefs, onChange: (0, fuselage_hooks_1.useStableCallback)((e) => setFilter?.(e.currentTarget.value)), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN || !value
                                 ? placeholder
-                                : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled, ...props }), selected.map((itemSelected) => RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { value: itemSelected.value, children: itemSelected.label, onClick: handleRemove }, itemSelected.value)))] }) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-autocomplete__addon": true, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
+                                : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled, ...props }), selected.map((itemSelected) => RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { value: itemSelected.value, onClick: handleRemove, children: itemSelected.label }, itemSelected.value)))] }) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-autocomplete__addon": true, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                         ? 'cross'
                         : 'magnifier', size: 'x20', color: 'default' }) }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: optionsAreVisible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(Options_1.Options, { width: borderBoxSize.inlineSize, onSelect: handleSelect, renderItem: renderItem, renderEmpty: renderEmpty, cursor: cursor, value: value, options: memoizedOptions }) })] }));
 }
@@ -991,7 +991,7 @@ function Box({ is = 'div', ...props }) {
     const propsWithoutBoxOnlyProps = (0, useBoxOnlyProps_1.useBoxOnlyProps)(propsWithoutStylingProps);
     const element = (0, react_1.createElement)(is, propsWithoutBoxOnlyProps);
     if (transformFn) {
-        return (0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: element, value: null });
+        return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: null, children: element }));
     }
     return element;
 }
@@ -1154,9 +1154,6 @@ const lineHeightProp = {
 const letterSpacingProp = {
     toCSSValue: (value) => value ? String((0, styleTokens_1.fontScale)(value)?.letterSpacing || value) : undefined,
 };
-const aliasOf = (propName) => ({
-    aliasOf: propName,
-});
 exports.propDefs = {
     border: stringProp,
     borderBlock: stringProp,
@@ -1193,7 +1190,6 @@ exports.propDefs = {
     borderEndEndRadius: borderRadiusProp,
     color: fontColorProp,
     backgroundColor: backgroundColorProp,
-    bg: aliasOf('backgroundColor'),
     opacity: numberOrStringProp,
     alignItems: stringProp,
     alignContent: stringProp,
@@ -1210,11 +1206,9 @@ exports.propDefs = {
     gap: gapProp,
     rowGap: gapProp,
     columnGap: gapProp,
-    w: aliasOf('width'),
     width: sizeProp,
     minWidth: sizeProp,
     maxWidth: sizeProp,
-    h: aliasOf('height'),
     height: sizeProp,
     minHeight: sizeProp,
     maxHeight: sizeProp,
@@ -1233,33 +1227,19 @@ exports.propDefs = {
     insetInline: insetProp,
     insetInlineStart: insetProp,
     insetInlineEnd: insetProp,
-    m: aliasOf('margin'),
     margin: marginProp,
-    mb: aliasOf('marginBlock'),
     marginBlock: marginProp,
-    mbs: aliasOf('marginBlockStart'),
     marginBlockStart: marginProp,
-    mbe: aliasOf('marginBlockEnd'),
     marginBlockEnd: marginProp,
-    mi: aliasOf('marginInline'),
     marginInline: marginProp,
-    mis: aliasOf('marginInlineStart'),
     marginInlineStart: marginProp,
-    mie: aliasOf('marginInlineEnd'),
     marginInlineEnd: marginProp,
-    p: aliasOf('padding'),
     padding: paddingProp,
-    pb: aliasOf('paddingBlock'),
     paddingBlock: paddingProp,
-    pbs: aliasOf('paddingBlockStart'),
     paddingBlockStart: paddingProp,
-    pbe: aliasOf('paddingBlockEnd'),
     paddingBlockEnd: paddingProp,
-    pi: aliasOf('paddingInline'),
     paddingInline: paddingProp,
-    pis: aliasOf('paddingInlineStart'),
     paddingInlineStart: paddingProp,
-    pie: aliasOf('paddingInlineEnd'),
     paddingInlineEnd: paddingProp,
     fontFamily: fontFamilyProp,
     fontSize: fontSizeProp,
@@ -1358,19 +1338,6 @@ exports.propDefs = {
     },
 };
 const compiledPropDefs = new Map(Object.entries(exports.propDefs).map(([propName, propDef]) => {
-    if ('aliasOf' in propDef) {
-        const { aliasOf: effectivePropName } = propDef;
-        return [
-            propName,
-            (value, stylingProps) => {
-                if (stylingProps.has(effectivePropName)) {
-                    return;
-                }
-                const inject = compiledPropDefs.get(effectivePropName);
-                inject?.(value, stylingProps);
-            },
-        ];
-    }
     if ('toCSSValue' in propDef) {
         const cssProperty = (0, fromCamelToKebab_1.fromCamelToKebab)(propName);
         const { toCSSValue } = propDef;
@@ -1529,7 +1496,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.BubbleItem = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const BubbleItem = ({ secondary, label, icon, ...props }) => ((0, jsx_runtime_1.jsxs)("span", { className: `rcx-bubble__item ${secondary ? 'rcx-bubble__item--secondary' : 'rcx-bubble__item--primary'}`, ...props, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 'x16', mie: 8 }), label && (0, jsx_runtime_1.jsx)("span", { children: label })] }));
+const BubbleItem = ({ secondary, label, icon, ...props }) => ((0, jsx_runtime_1.jsxs)("span", { className: `rcx-bubble__item ${secondary ? 'rcx-bubble__item--secondary' : 'rcx-bubble__item--primary'}`, ...props, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 'x16', marginInlineEnd: 8 }), label && (0, jsx_runtime_1.jsx)("span", { children: label })] }));
 exports.BubbleItem = BubbleItem;
 
 
@@ -1593,7 +1560,7 @@ function Button({ ref, primary, secondary, danger, warning, success, external, i
         }
         return {};
     }, [primary, secondary, danger, warning, success]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: is, type: 'button', "rcx-button": true, ...kindAndVariantProps, "rcx-button--small": small, "rcx-button--medium": medium, "rcx-button--large": large, "rcx-button--square": square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, "rcx-button--small-square": small && square, "rcx-button--medium-square": medium && square, "rcx-button--large-square": large && square, "rcx-button--loading": loading, disabled: disabled || loading, ref: ref, ...extraProps, ...props, children: (0, jsx_runtime_1.jsxs)("span", { className: 'rcx-button--content', children: [icon && !loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: icon, mie: 4 }), loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: 'loading', mie: 4 }), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: is, type: 'button', "rcx-button": true, ...kindAndVariantProps, "rcx-button--small": small, "rcx-button--medium": medium, "rcx-button--large": large, "rcx-button--square": square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, "rcx-button--small-square": small && square, "rcx-button--medium-square": medium && square, "rcx-button--large-square": large && square, "rcx-button--loading": loading, disabled: disabled || loading, ref: ref, ...extraProps, ...props, children: (0, jsx_runtime_1.jsxs)("span", { className: 'rcx-button--content', children: [icon && !loading && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: icon, marginInlineEnd: 4 })), loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: 'loading', marginInlineEnd: 4 }), children] }) }));
 }
 exports["default"] = Button;
 
@@ -1944,7 +1911,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Grid_1 = __webpack_require__(/*! ../Grid */ "./src/components/Grid/index.ts");
-const CardGrid = ({ children, breakpoints, ...props }) => ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { "rcx-card-grid": true, m: -8, ...props, children: react_1.Children.map(children, (child) => ((0, jsx_runtime_1.jsx)(Grid_1.GridItem, { "rcx-card-grid__item": true, p: 8, ...breakpoints, children: child }))) }));
+const CardGrid = ({ children, breakpoints, ...props }) => ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { "rcx-card-grid": true, margin: -8, ...props, children: react_1.Children.map(children, (child) => ((0, jsx_runtime_1.jsx)(Grid_1.GridItem, { "rcx-card-grid__item": true, padding: 8, ...breakpoints, children: child }))) }));
 exports["default"] = CardGrid;
 
 
@@ -2071,7 +2038,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 function Chevron({ up, right, down, left, size, ...props }) {
     const children = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'chevron-down', size: size }), [size]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', children: children, "rcx-chevron": true, "rcx-chevron--up": up, "rcx-chevron--right": right, "rcx-chevron--down": down, "rcx-chevron--left": left, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-chevron": true, "rcx-chevron--up": up, "rcx-chevron--right": right, "rcx-chevron--down": down, "rcx-chevron--left": left, ...props, children: children }));
 }
 exports["default"] = Chevron;
 
@@ -2161,7 +2128,7 @@ const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skel
  */
 const CodeSnippet = ({ children, onClick, buttonText = 'Copy', buttonDisabled = false, ...props }) => {
     if (!children) {
-        return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'pre', "rcx-code-snippet": true, ...props, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { w: '100%', "aria-hidden": true, "aria-busy": true }) }));
+        return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'pre', "rcx-code-snippet": true, ...props, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%', "aria-hidden": true, "aria-busy": true }) }));
     }
     return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'pre', "rcx-code-snippet": true, ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { role: 'code', "rcx-code-snippet__codebox": true, children: children }), onClick && children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { small: true, primary: true, onClick: onClick, disabled: buttonDisabled, children: buttonText }) }))] }));
 };
@@ -2202,8 +2169,8 @@ const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 /**
  * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
  */
-function Contextualbar({ width, position, bg = 'room', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(__1.Box, { "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
+function Contextualbar({ width, position, backgroundColor = 'room', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(__1.Box, { "rcx-vertical-bar": true, backgroundColor: backgroundColor, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
 }
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
@@ -2315,7 +2282,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function ContextualbarFooter(props) {
-    return (0, jsx_runtime_1.jsx)(__1.Box, { p: 24, ...props });
+    return (0, jsx_runtime_1.jsx)(__1.Box, { padding: 24, ...props });
 }
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -2334,7 +2301,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Margins_1 = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x56', pi: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: children }) }) }));
+const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x56', paddingInline: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: children }) }) }));
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
 
 
@@ -2351,7 +2318,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, pi: 2, size: 'x24' }));
+const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, paddingInline: 2, size: 'x24' }));
 exports["default"] = (0, react_1.memo)(ContextualbarIcon);
 
 
@@ -2369,7 +2336,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarSection(props) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, pi: 24, pb: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, paddingInline: 24, paddingBlock: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
 }
 exports["default"] = (0, react_1.memo)(ContextualbarSection);
 
@@ -2393,7 +2360,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.ts");
 const Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/Contextualbar/Contextualbar.tsx"));
 const ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./ContextualbarHeader */ "./src/components/Contextualbar/ContextualbarHeader.tsx"));
-const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { p: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
+const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { padding: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { marginBlockEnd: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
                     .fill(5)
                     .map((_, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}, index)))] })] }));
 exports["default"] = (0, react_1.memo)(ContextualbarSkeleton);
@@ -2472,8 +2439,8 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 /**
  * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
  */
-function Contextualbar({ width, position, bg = 'room', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
+function Contextualbar({ width, position, backgroundColor = 'room', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar": true, backgroundColor: backgroundColor, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
 }
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
@@ -2585,7 +2552,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarFooter(props) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { pi: 16, pb: 20, ...props });
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInline: 16, paddingBlock: 20, ...props });
 }
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -2604,7 +2571,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x44', pi: 16, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', mi: -4, pi: 4, className: (0, css_in_js_1.css) `
+const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x44', paddingInline: 16, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', marginInline: -4, paddingInline: 4, className: (0, css_in_js_1.css) `
         gap: 8px;
       `, children: children }) }));
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
@@ -2623,7 +2590,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, pi: 2, size: 'x20' }));
+const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, paddingInline: 2, size: 'x20' }));
 exports["default"] = (0, react_1.memo)(ContextualbarIcon);
 
 
@@ -2641,7 +2608,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarSection(props) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, p: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, padding: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
 }
 exports["default"] = (0, react_1.memo)(ContextualbarSection);
 
@@ -2665,7 +2632,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.ts");
 const Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/ContextualbarV2/Contextualbar.tsx"));
 const ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./ContextualbarHeader */ "./src/components/ContextualbarV2/ContextualbarHeader.tsx"));
-const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { p: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
+const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { padding: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { marginBlockEnd: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
                     .fill(5)
                     .map((_, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}, index)))] })] }));
 exports["default"] = (0, react_1.memo)(ContextualbarSkeleton);
@@ -2783,7 +2750,7 @@ const DropdownDesktopWrapper_1 = __webpack_require__(/*! ./DropdownDesktopWrappe
 const DropdownMobile_1 = __webpack_require__(/*! ./DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
 function Dropdown({ ref, children, reference, placement = 'bottom-start', }) {
     const notSmall = (0, fuselage_hooks_1.useMediaQuery)('(min-width: 500px)');
-    return notSmall ? ((0, jsx_runtime_1.jsx)(DropdownDesktopWrapper_1.DropdownDesktopWrapper, { reference: reference, children: children, placement: placement, ref: ref })) : ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { children: children, ref: ref }));
+    return notSmall ? ((0, jsx_runtime_1.jsx)(DropdownDesktopWrapper_1.DropdownDesktopWrapper, { reference: reference, placement: placement, ref: ref, children: children })) : ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { ref: ref, children: children }));
 }
 exports["default"] = Dropdown;
 
@@ -2802,7 +2769,7 @@ exports.DropdownDesktop = DropdownDesktop;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function DropdownDesktop({ children, style, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(__1.Tile, { style: style, elevation: '2', pi: '0', pb: '0', display: 'flex', flexDirection: 'column', overflow: 'auto', "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 12, children: style?.visibility === 'hidden' ? null : children }) }));
+    return ((0, jsx_runtime_1.jsx)(__1.Tile, { style: style, elevation: '2', paddingInline: '0', paddingBlock: '0', display: 'flex', flexDirection: 'column', overflow: 'auto', "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, paddingBlock: 12, children: style?.visibility === 'hidden' ? null : children }) }));
 }
 
 
@@ -2842,7 +2809,7 @@ exports.DropdownMobile = DropdownMobile;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function DropdownMobile({ children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(__1.Tile, { elevation: '2', pi: '0', pb: '0', w: '100vw', maxHeight: '80%', position: 'fixed', display: 'flex', flexDirection: 'column', overflow: 'auto', style: { bottom: 0, left: 0 }, zIndex: 2, "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 16, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(__1.Tile, { elevation: '2', paddingInline: '0', paddingBlock: '0', width: '100vw', maxHeight: '80%', position: 'fixed', display: 'flex', flexDirection: 'column', overflow: 'auto', style: { bottom: 0, left: 0 }, zIndex: 2, "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, paddingBlock: 16, children: children }) }));
 }
 
 
@@ -3240,7 +3207,7 @@ function FlexContainer({ inline = false, children, direction, wrap, alignItems,
         }
         return props;
     }, [alignContent, alignItems, direction, inline, justifyContent, wrap]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 }
 exports["default"] = FlexContainer;
 
@@ -3280,7 +3247,7 @@ function FlexItem({ children, order, grow, shrink, basis, align, }) {
         }
         return props;
     }, [align, basis, grow, order, shrink]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 }
 exports["default"] = FlexItem;
 
@@ -3413,7 +3380,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const icons_1 = __importDefault(__webpack_require__(/*! @rocket.chat/icons */ "@rocket.chat/icons"));
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function Icon({ name, size, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-icon": true, "rcx-icon--name": name, children: icons_1.default[name], "aria-hidden": 'true', fontSize: size, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-icon": true, "rcx-icon--name": name, "aria-hidden": 'true', fontSize: size, ...props, children: icons_1.default[name] }));
 }
 exports["default"] = Icon;
 
@@ -3620,7 +3587,7 @@ const LabelContext = (0, react_1.createContext)(false);
 function Label({ disabled, is, required, children, ...props }) {
     const isInsideLabel = (0, react_1.useContext)(LabelContext);
     const component = is || (isInsideLabel && 'span') || 'label';
-    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: component, "rcx-label": true, "rcx-label--disabled": disabled, ...props, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-label__required": true, mis: 'x4', "aria-hidden": 'true', children: "*" }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: component, "rcx-label": true, "rcx-label--disabled": disabled, ...props, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-label__required": true, marginInlineStart: 'x4', "aria-hidden": 'true', children: "*" }))] }) }));
 }
 exports["default"] = Label;
 
@@ -3639,7 +3606,7 @@ exports.LabelInfo = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const LabelInfo = ({ title, id, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'span', mi: 2, "rcx-label__info": true, children: [(0, jsx_runtime_1.jsx)("span", { hidden: true, id: id, children: title }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, name: 'info-circled', title: title })] }));
+const LabelInfo = ({ title, id, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'span', marginInline: 2, "rcx-label__info": true, children: [(0, jsx_runtime_1.jsx)("span", { hidden: true, id: id, children: title }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, name: 'info-circled', title: title })] }));
 exports.LabelInfo = LabelInfo;
 
 
@@ -3743,7 +3710,7 @@ const Margins = (props) => {
     const patchedChildren = (0, patchChildren_1.patchChildren)(children, (childProps) => ({
         className: (0, appendClassName_1.appendClassName)(childProps.className, (0, appendClassName_1.appendClassName)(className, marginsClassName)),
     }));
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: patchedChildren, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: patchedChildren }));
 };
 exports["default"] = Margins;
 
@@ -3802,7 +3769,7 @@ const Menu = ({ icon = 'kebab', placement = 'bottom-start', title, is: MenuButto
     const sizes = { large, medium, tiny, mini };
     const defaultSmall = !large && !medium && !tiny && !mini;
     const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
-    const popover = state.isOpen && ((0, jsx_runtime_1.jsx)(MenuPopover_1.default, { state: state, triggerRef: ref, placement: (0, helpers_1.getPlacement)(placement), maxWidth: maxWidth, children: (0, jsx_runtime_1.jsx)(MenuDropdown_1.default, { ...props, ...menuProps }) }));
+    const popover = state.isOpen && ((0, jsx_runtime_1.jsx)(MenuPopover_1.default, { state: state, triggerRef: ref, placement: (0, helpers_1.getPlacement)(placement), maxWidth: maxWidth, children: (0, jsx_runtime_1.jsx)(MenuDropdown_1.default, { ...props, ...menuProps, rootMenuTriggerState: state }) }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [button ? ((0, react_1.cloneElement)(button, {
                 ...buttonProps,
                 ref,
@@ -3836,11 +3803,21 @@ 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/MenuItem.tsx"));
 const MenuSection_1 = __importDefault(__webpack_require__(/*! ./MenuSection */ "./src/components/Menu/MenuSection.tsx"));
-function MenuDropDown(props) {
+const MenuSubmenu_1 = __importDefault(__webpack_require__(/*! ./MenuSubmenu */ "./src/components/Menu/MenuSubmenu.tsx"));
+function MenuDropDown({ rootMenuTriggerState, menuRef, ...props }) {
     const state = (0, react_stately_1.useTreeState)(props);
-    const ref = (0, react_1.useRef)(null);
+    const fallbackRef = (0, react_1.useRef)(null);
+    const ref = menuRef ?? fallbackRef;
     const { menuProps } = (0, react_aria_1.useMenu)(props, state, ref);
-    return ((0, jsx_runtime_1.jsx)("div", { ...menuProps, ref: ref, children: [...state.collection].map((item) => item.type === 'section' ? ((0, jsx_runtime_1.jsx)(MenuSection_1.default, { section: item, state: state }, item.key)) : ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: item, state: state }, item.key))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...menuProps, ref: ref, children: [...state.collection].map((item) => {
+            if (item.type === 'section') {
+                return ((0, jsx_runtime_1.jsx)(MenuSection_1.default, { section: item, state: state, rootMenuTriggerState: rootMenuTriggerState, parentMenuRef: ref, onAction: props.onAction }, item.key));
+            }
+            if (item.hasChildNodes) {
+                return ((0, jsx_runtime_1.jsx)(MenuSubmenu_1.default, { item: item, state: state, rootMenuTriggerState: rootMenuTriggerState, parentMenuRef: ref, onAction: props.onAction }, item.key));
+            }
+            return (0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: item, state: state }, item.key);
+        }) }));
 }
 exports["default"] = MenuDropDown;
 
@@ -3919,19 +3896,79 @@ exports["default"] = (0, react_2.memo)(MenuOption);
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
+const react_1 = __webpack_require__(/*! react */ "react");
+const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 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 MenuPortalContext_1 = __webpack_require__(/*! ./MenuPortalContext */ "./src/components/Menu/MenuPortalContext.ts");
 function MenuPopover({ children, state, offset = 4, maxWidth, ...props }) {
     const isMobile = !(0, fuselage_hooks_1.useBreakpoints)().includes('sm');
-    if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, offset: offset, ...props, children: (0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { children: children }) }));
+    // The root popover (no container above it) renders a `display: contents`
+    // mount point and shares it with the rest of the tree. Submenu popovers
+    // portal into it, so their DOM nests under the root popover and the whole
+    // tree behaves as one for focus/`aria-hidden` purposes — matching how
+    // `react-aria-components` groups submenu popovers via `PopoverGroupContext`.
+    const groupContainer = (0, MenuPortalContext_1.useMenuPortalContainer)();
+    const containerRef = (0, react_1.useRef)(null);
+    const isSubmenu = groupContainer !== null;
+    const popoverRef = (0, react_1.useRef)(null);
+    // react-aria only lets the *topmost* overlay dismiss on an outside click.
+    // While a submenu is open it is topmost, but submenus are non-modal (hence
+    // non-dismissable), so neither the submenu nor the root closes. Since every
+    // open submenu portals into the root popover, the root popover element
+    // contains the entire menu tree — so we close the whole menu on any
+    // interaction outside it (ignoring the trigger, which toggles on its own).
+    (0, react_aria_1.useInteractOutside)({
+        ref: popoverRef,
+        isDisabled: isSubmenu,
+        onInteractOutside: (event) => {
+            const trigger = props.triggerRef?.current;
+            if (trigger && trigger.contains(event.target)) {
+                return;
+            }
+            state.close();
+        },
+    });
+    const popover = ((0, jsx_runtime_1.jsxs)(Popover_1.Popover, { state: state, offset: offset, popoverRef: popoverRef, ...props, portalContainer: isSubmenu ? (groupContainer?.current ?? undefined) : undefined, children: [isMobile ? ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { children: children })) : ((0, jsx_runtime_1.jsx)(DropdownDesktop_1.DropdownDesktop, { maxHeight: '80vh', overflowY: 'auto', maxWidth: maxWidth, children: children })), !isSubmenu && ((0, jsx_runtime_1.jsx)("span", { ref: containerRef, style: { display: 'contents' } }))] }));
+    if (isSubmenu) {
+        return popover;
     }
-    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, offset: offset, ...props, children: (0, jsx_runtime_1.jsx)(DropdownDesktop_1.DropdownDesktop, { maxHeight: '80vh', overflowY: 'auto', maxWidth: maxWidth, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(MenuPortalContext_1.MenuPortalContext.Provider, { value: containerRef, children: popover }));
 }
 exports["default"] = MenuPopover;
 
 
+/***/ },
+
+/***/ "./src/components/Menu/MenuPortalContext.ts"
+/*!**************************************************!*\
+  !*** ./src/components/Menu/MenuPortalContext.ts ***!
+  \**************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useMenuPortalContainer = exports.MenuPortalContext = void 0;
+const react_1 = __webpack_require__(/*! react */ "react");
+/**
+ * Ref to the root menu popover's portal container.
+ *
+ * Submenu popovers portal into this container instead of straight into
+ * `document.body`, so the whole menu tree lives in a single DOM subtree nested
+ * under the root popover. This mirrors `react-aria-components`'
+ * `PopoverGroupContext` and is what keeps focus tracking and `aria-hidden`
+ * scoping correct across submenu levels — without it each portaled submenu
+ * looks like "outside" to the root popover and close-on-blur tears the tree
+ * down.
+ *
+ * `null` means there is no root yet, i.e. the consuming popover IS the root.
+ */
+exports.MenuPortalContext = (0, react_1.createContext)(null);
+const useMenuPortalContainer = () => (0, react_1.useContext)(exports.MenuPortalContext);
+exports.useMenuPortalContainer = useMenuPortalContainer;
+
+
 /***/ },
 
 /***/ "./src/components/Menu/MenuSection.tsx"
@@ -3951,7 +3988,8 @@ 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 MenuSubmenu_1 = __importDefault(__webpack_require__(/*! ./MenuSubmenu */ "./src/components/Menu/MenuSubmenu.tsx"));
+function MenuSection({ section, state, rootMenuTriggerState, parentMenuRef, onAction, }) {
     const { itemProps, headingProps, groupProps } = (0, react_aria_1.useMenuSection)({
         'heading': section.rendered,
         'aria-label': section['aria-label'],
@@ -3960,11 +3998,85 @@ function MenuSection({ section, state, }) {
         elementType: 'span',
     });
     // If the section is not the first, add a separator element.
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.key !== state.collection.getFirstKey() && ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { ...separatorProps })), (0, jsx_runtime_1.jsxs)("div", { ...itemProps, children: [section.rendered && ((0, jsx_runtime_1.jsx)(Option_1.OptionTitle, { ...headingProps, children: section.rendered })), (0, jsx_runtime_1.jsx)(Box_1.Box, { ...groupProps, p: '0', children: [...section.childNodes].map((node) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: node, state: state }, node.key))) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.key !== state.collection.getFirstKey() && ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { ...separatorProps })), (0, jsx_runtime_1.jsxs)("div", { ...itemProps, children: [section.rendered && ((0, jsx_runtime_1.jsx)(Option_1.OptionTitle, { ...headingProps, children: section.rendered })), (0, jsx_runtime_1.jsx)(Box_1.Box, { ...groupProps, padding: '0', children: [...section.childNodes].map((node) => node.hasChildNodes ? ((0, jsx_runtime_1.jsx)(MenuSubmenu_1.default, { item: node, state: state, rootMenuTriggerState: rootMenuTriggerState, parentMenuRef: parentMenuRef, onAction: onAction }, node.key)) : ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: node, state: state }, node.key))) })] })] }));
 }
 exports["default"] = MenuSection;
 
 
+/***/ },
+
+/***/ "./src/components/Menu/MenuSubmenu.tsx"
+/*!*********************************************!*\
+  !*** ./src/components/Menu/MenuSubmenu.tsx ***!
+  \*********************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+const react_1 = __webpack_require__(/*! react */ "react");
+const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
+const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
+const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
+const MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/MenuDropdown.tsx"));
+const MenuOption_1 = __importDefault(__webpack_require__(/*! ./MenuOption */ "./src/components/Menu/MenuOption.tsx"));
+const MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/MenuPopover.tsx"));
+/**
+ * Renders a menu item that opens a nested submenu.
+ *
+ * The trigger item belongs to the parent menu's tree state (so arrow-key
+ * navigation keeps working), while the submenu renders its own `MenuDropDown`
+ * built from the trigger's children — giving it an isolated collection and
+ * focus scope, mirroring how `react-aria-components` handles `SubmenuTrigger`.
+ */
+function MenuSubmenu({ item, state, rootMenuTriggerState, parentMenuRef, onAction, }) {
+    const triggerRef = (0, react_1.useRef)(null);
+    const submenuRef = (0, react_1.useRef)(null);
+    const submenuTriggerState = (0, react_stately_1.useSubmenuTriggerState)({ triggerKey: item.key }, rootMenuTriggerState);
+    const { submenuTriggerProps, submenuProps, popoverProps } = (0, react_aria_1.useSubmenuTrigger)({ parentMenuRef, submenuRef }, submenuTriggerState, triggerRef);
+    /** react-aria's submenu hooks bind Escape to `state.closeAll()`, tearing down the whole menu tree. We override Escape so it dismisses only this submenu level — keeping its ancestors open — matching react-aria-components, where Escape closes the latest open submenu one level at a time.
+     **/
+    const closeSubmenu = () => {
+        // Mirror the ArrowLeft behavior: move focus back to the trigger so the parent menu stays keyboard-navigable and a subsequent Escape closes the next level up.
+        triggerRef.current?.focus();
+        submenuTriggerState.close();
+    };
+    /** Fires when focus is inside the submenu (keyboard navigation). */
+    const onSubmenuKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            closeSubmenu();
+            return;
+        }
+        submenuProps.onKeyDown?.(event);
+    };
+    /** Fires when focus is on the trigger itself (e.g. a hover/press-opened submenu). When this submenu is open, close just it; once it's closed, let Escape bubble so the parent menu handles the next level up.
+     **/
+    const onTriggerKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            if (submenuTriggerState.isOpen) {
+                closeSubmenu();
+                return;
+            }
+            event.continuePropagation();
+            return;
+        }
+        submenuTriggerProps.onKeyDown?.(event);
+    };
+    const { menuItemProps, isFocused, isDisabled } = (0, react_aria_1.useMenuItem)({ ...submenuTriggerProps, onKeyDown: onTriggerKeyDown, key: item.key }, state, triggerRef);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuOption_1.default, { ...(0, react_aria_1.mergeProps)(menuItemProps, {
+                    'id': submenuTriggerProps.id,
+                    'aria-haspopup': submenuTriggerProps['aria-haspopup'],
+                    'aria-expanded': submenuTriggerProps['aria-expanded'],
+                    'aria-controls': submenuTriggerProps['aria-controls'],
+                }), ref: triggerRef, focus: isFocused, disabled: isDisabled, is: 'div', variant: item.value?.variant, children: (0, jsx_runtime_1.jsxs)("div", { className: 'rcx-option__wrapper', children: [item.rendered, (0, jsx_runtime_1.jsx)("div", { className: 'rcx-option__input', children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'chevron-left', size: 'x16' }) })] }) }), submenuTriggerState.isOpen && ((0, jsx_runtime_1.jsx)(MenuPopover_1.default, { ...popoverProps, state: submenuTriggerState, triggerRef: triggerRef, placement: 'right top', children: (0, jsx_runtime_1.jsx)(MenuDropdown_1.default, { ...submenuProps, onKeyDown: onSubmenuKeyDown, rootMenuTriggerState: rootMenuTriggerState, menuRef: submenuRef, onAction: onAction, children: item.props?.children }) }))] }));
+}
+exports["default"] = MenuSubmenu;
+
+
 /***/ },
 
 /***/ "./src/components/Menu/helpers/helpers.ts"
@@ -4023,11 +4135,13 @@ 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.Menu = void 0;
+exports.MenuItemDescription = exports.MenuItemTitle = exports.MenuItemSkeleton = exports.MenuItemInput = exports.MenuItemIcon = exports.MenuItemContent = exports.MenuItemColumn = exports.MenuItemAvatar = exports.MenuSection = exports.MenuSubmenuTrigger = 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 MenuSubmenuTrigger_1 = __webpack_require__(/*! ./stately/MenuSubmenuTrigger */ "./src/components/Menu/stately/MenuSubmenuTrigger.tsx");
+Object.defineProperty(exports, "MenuSubmenuTrigger", ({ enumerable: true, get: function () { return __importDefault(MenuSubmenuTrigger_1).default; } }));
 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");
@@ -4160,6 +4274,74 @@ MenuSection.getCollectionNode = function* getCollectionNode(props) {
 exports["default"] = MenuSection;
 
 
+/***/ },
+
+/***/ "./src/components/Menu/stately/MenuSubmenuTrigger.tsx"
+/*!************************************************************!*\
+  !*** ./src/components/Menu/stately/MenuSubmenuTrigger.tsx ***!
+  \************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const react_1 = __webpack_require__(/*! react */ "react");
+function MenuSubmenuTrigger(_props) {
+    return null;
+}
+const toElementArray = (children) => {
+    const result = [];
+    const visit = (node) => {
+        if (Array.isArray(node)) {
+            node.forEach(visit);
+            return;
+        }
+        if ((0, react_1.isValidElement)(node)) {
+            result.push(node);
+        }
+    };
+    visit(children);
+    return result;
+};
+MenuSubmenuTrigger.getCollectionNode = function* getCollectionNode(props, context) {
+    const [trigger, ...submenuItems] = toElementArray(props.children);
+    if (!trigger || submenuItems.length === 0) {
+        throw new Error('A <MenuSubmenuTrigger> must have at least two children: the trigger item followed by one or more submenu items.');
+    }
+    const rendered = trigger.props.children;
+    const textValue = props.textValue ||
+        trigger.props.textValue ||
+        (typeof rendered === 'string' ? rendered : '') ||
+        props['aria-label'] ||
+        trigger.props['aria-label'] ||
+        '';
+    if (!textValue && !context?.suppressTextValueWarning) {
+        console.warn('<MenuSubmenuTrigger> with non-plain text contents is unsupported by type to select for accessibility. Please add a `textValue` prop.');
+    }
+    yield {
+        'type': 'item',
+        // Only the submenu items are forwarded as children — the trigger element is
+        // consumed here and rendered separately by `MenuSubmenu`.
+        'props': { ...props, children: submenuItems },
+        rendered,
+        textValue,
+        'aria-label': props['aria-label'] || trigger.props['aria-label'],
+        'value': (props.variant
+            ? { variant: props.variant }
+            : undefined),
+        'hasChildNodes': true,
+        *'childNodes'() {
+            for (const item of submenuItems) {
+                yield {
+                    type: 'item',
+                    element: item,
+                };
+            }
+        },
+    };
+};
+exports["default"] = MenuSubmenuTrigger;
+
+
 /***/ },
 
 /***/ "./src/components/Message/Message.tsx"
@@ -5671,7 +5853,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Scrollable_1 = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
-const ModalContent = ({ children, onScrollContent, ...props }) => ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, onScrollContent: onScrollContent, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content-wrapper": true, mi: 24, ...props, children: children }) }) }));
+const ModalContent = ({ children, onScrollContent, ...props }) => ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, onScrollContent: onScrollContent, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content-wrapper": true, marginInline: 24, ...props, children: children }) }) }));
 exports["default"] = ModalContent;
 
 
@@ -5785,7 +5967,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const ModalIcon = ({ size = 'x20', name, alignItems = 'center', ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { ...props, display: 'flex', alignItems: alignItems, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { mb: 4, name: name, size: size }) }));
+const ModalIcon = ({ size = 'x20', name, alignItems = 'center', ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { ...props, display: 'flex', alignItems: alignItems, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { marginBlock: 4, name: name, size: size }) }));
 exports["default"] = ModalIcon;
 
 
@@ -7081,7 +7263,7 @@ const PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, erro
             return show();
         }
     });
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(PaginatedSelectWrapper_1.default, { display: 'flex', mi: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText && ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', mi: 4, "rcx-select__item": true, fontScale: 'p2m', color: valueLabel ? 'default' : 'hint', children: visibleText })), (0, jsx_runtime_1.jsx)(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(PaginatedSelectWrapper_1.default, { display: 'flex', marginInline: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText && ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', marginInline: 4, "rcx-select__item": true, fontScale: 'p2m', color: valueLabel ? 'default' : 'hint', children: visibleText })), (0, jsx_runtime_1.jsx)(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                                     ? 'chevron-up'
                                     : 'chevron-down', size: 'x20' }) }) })] }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: visible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { withTitle: withTitle, width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: options, onSelect: internalChangedByClick, endReached: endReached, onMouseDown: prevent_1.prevent, renderItem: renderItem }) })] }));
 };
@@ -7103,7 +7285,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const PaginatedSelect_1 = __webpack_require__(/*! ./PaginatedSelect */ "./src/components/PaginatedSelect/PaginatedSelect.tsx");
 const PaginatedSelectFiltered = ({ filter, setFilter, options, placeholder, ...props }) => {
-    const anchor = (0, react_1.useMemo)(() => ({ filter, onChange: _onChange, ...props }) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onChange: (e) => {
+    const anchor = (0, react_1.useMemo)(() => ({ filter, onChange: _onChange, ...props }) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { marginInline: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onChange: (e) => {
             setFilter(e.currentTarget.value);
         }, ...props, "rcx-input-box--undecorated": true })), [placeholder, setFilter]);
     return ((0, jsx_runtime_1.jsx)(PaginatedSelect_1.PaginatedSelect, { placeholder: undefined, filter: filter, options: options, ...props, anchor: anchor }));
@@ -7782,8 +7964,9 @@ 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 contexts_1 = __webpack_require__(/*! ../../contexts */ "./src/contexts/index.ts");
-function Popover({ portalContainer, ...props }) {
-    const popoverRef = (0, react_1.useRef)(null);
+function Popover({ portalContainer, popoverRef: popoverRefProp, ...props }) {
+    const fallbackRef = (0, react_1.useRef)(null);
+    const popoverRef = popoverRefProp ?? fallbackRef;
     const { state, children, isNonModal } = props;
     const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
     const { popoverProps, underlayProps } = (0, react_aria_1.usePopover)({
@@ -7791,7 +7974,7 @@ function Popover({ portalContainer, ...props }) {
         popoverRef,
         boundaryElement: ownerDocument?.body,
     }, state);
-    return ((0, jsx_runtime_1.jsxs)(react_aria_1.Overlay, { portalContainer: ownerDocument?.body, children: [!isNonModal && (0, jsx_runtime_1.jsx)("div", { ...underlayProps }), (0, jsx_runtime_1.jsxs)("div", { ...popoverProps, ref: popoverRef, children: [!isNonModal && (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close }), children, (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_1.Overlay, { portalContainer: portalContainer ?? ownerDocument?.body, children: [!isNonModal && (0, jsx_runtime_1.jsx)("div", { ...underlayProps }), (0, jsx_runtime_1.jsxs)("div", { ...popoverProps, ref: popoverRef, children: [!isNonModal && (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close }), children, (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close })] })] }));
 }
 exports["default"] = Popover;
 
@@ -7931,7 +8114,7 @@ const getColor = (isLight, variant, error) => {
  * The `ProgressBar` is used to inform the user the progress of an operation.
  */
 function ProgressBar({ percentage, variant = 'info', error, animated, light = false, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-progress-bar": true, title: error || undefined, overflow: 'hidden', ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { bg: getColor(light, variant, error), "rcx-progress-bar__fill--animated": animated, "rcx-progress-bar__fill": true, width: getWidth(percentage) }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-progress-bar": true, title: error || undefined, overflow: 'hidden', ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: getColor(light, variant, error), "rcx-progress-bar__fill--animated": animated, "rcx-progress-bar__fill": true, width: getWidth(percentage) }) }));
 }
 exports["default"] = ProgressBar;
 
@@ -8096,7 +8279,7 @@ const Scrollable = ({ children, horizontal, vertical, smooth, onScrollContent, }
         }
         return props;
     }, [className, handleScroll, onScrollContent]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 };
 exports["default"] = Scrollable;
 
@@ -8322,7 +8505,7 @@ const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/Inpu
 const SelectFilteredContext_1 = __webpack_require__(/*! ./SelectFilteredContext */ "./src/components/Select/SelectFilteredContext.ts");
 function SelectFilteredAnchor({ children: _children, ...props }) {
     const { placeholder, filter, setFilter } = (0, react_1.use)(SelectFilteredContext_1.SelectFilteredContext);
-    return ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onInput: (e) => setFilter?.(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }));
+    return ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { marginInline: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onInput: (e) => setFilter?.(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }));
 }
 exports["default"] = SelectFilteredAnchor;
 
@@ -8438,8 +8621,8 @@ function SelectLegacy({ ref, value, filter, error, disabled, options = [], ancho
         innerRef.current?.focus();
         return show();
     });
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(Wrapper, { display: 'flex', mi: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText &&
-                        (RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, onClick: internalChangedByClick }, getValue(option))) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', mi: 4, "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint', children: visibleText }))), (0, jsx_runtime_1.jsx)(Anchor, { ref: anchorRef, disabled: disabled ?? false, onClick: show, onBlur: hide, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: !value ? option || placeholder : null }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(Wrapper, { display: 'flex', marginInline: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText &&
+                        (RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, onClick: internalChangedByClick }, getValue(option))) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', marginInline: 4, "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint', children: visibleText }))), (0, jsx_runtime_1.jsx)(Anchor, { ref: anchorRef, disabled: disabled ?? false, onClick: show, onBlur: hide, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: !value ? option || placeholder : null }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                                     ? 'chevron-up'
                                     : addonIcon || 'chevron-down', size: 'x20' }) }) })] }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: visible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: filteredOptions, onSelect: internalChangedByClick, renderItem: renderItem, cursor: cursor, customEmpty: customEmpty }) })] }));
 }
@@ -8641,7 +8824,7 @@ exports["default"] = SidebarBanner;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidebarDivider = () => (0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar--divider": true, mbs: -2, mbe: 0 });
+const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports["default"] = SidebarDivider;
 
 
@@ -9075,13 +9258,13 @@ exports.SidebarCollapseGroup = SidebarCollapseGroup;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const SidebarGroupTitle_1 = __webpack_require__(/*! ./SidebarGroupTitle */ "./src/components/SidebarV2/SidebarGroupTitle.tsx");
 const useCollapse_1 = __webpack_require__(/*! ./hooks/useCollapse */ "./src/components/SidebarV2/hooks/useCollapse.tsx");
-function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, title, ...props }) {
+function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, menu, title, ...props }) {
     const { barProps, expanded, panelExpanded, panelId, titleId } = (0, useCollapse_1.useCollapse)({
         expanded: propExpanded,
         defaultExpanded,
         tabIndex,
     });
-    return ((0, jsx_runtime_1.jsxs)("section", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group', ...props, children: [(0, jsx_runtime_1.jsx)(SidebarGroupTitle_1.SidebarGroupTitle, { expanded: expanded, title: title, titleId: titleId, badge: badge, barProps: barProps, role: 'button' }), (0, jsx_runtime_1.jsx)("div", { role: 'list', ref: ref, className: [
+    return ((0, jsx_runtime_1.jsxs)("section", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group', ...props, children: [(0, jsx_runtime_1.jsx)(SidebarGroupTitle_1.SidebarGroupTitle, { expanded: expanded, title: title, titleId: titleId, badge: badge, menu: menu, barProps: barProps, role: 'button' }), (0, jsx_runtime_1.jsx)("div", { role: 'list', ref: ref, className: [
                     'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__panel rcx-box--animated',
                     panelExpanded && 'rcx-sidebar-v2-collapse-group__panel--expanded',
                 ]
@@ -9090,6 +9273,26 @@ function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, ta
 }
 
 
+/***/ },
+
+/***/ "./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx"
+/*!***************************************************************!*\
+  !*** ./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx ***!
+  \***************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.SidebarCollapseGroupMenu = void 0;
+const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+const appendClassName_1 = __webpack_require__(/*! ../../helpers/appendClassName */ "./src/helpers/appendClassName.ts");
+const patchChildren_1 = __webpack_require__(/*! ../../helpers/patchChildren */ "./src/helpers/patchChildren.ts");
+const SidebarCollapseGroupMenu = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__menu-wrapper rcx-box--animated', ...props, children: (0, patchChildren_1.patchChildren)((0, jsx_runtime_1.jsx)("span", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__menu', children: children }), (childProps) => ({
+        className: (0, appendClassName_1.appendClassName)(childProps.className, 'rcx-sidebar-v2-collapse-group__menu'),
+    })) }));
+exports.SidebarCollapseGroupMenu = SidebarCollapseGroupMenu;
+
+
 /***/ },
 
 /***/ "./src/components/SidebarV2/SidebarDivider.tsx"
@@ -9103,7 +9306,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarDivider = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar-v2--divider": true, mbs: -2, mbe: 0 }));
+const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar-v2--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports.SidebarDivider = SidebarDivider;
 
 
@@ -9170,12 +9373,13 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarGroupTitle = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Chevron_1 = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.ts");
-const SidebarGroupTitle = ({ title, titleId, badge, barProps, expanded, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: [
+const SidebarCollapseGroupMenu_1 = __webpack_require__(/*! ./SidebarCollapseGroupMenu */ "./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx");
+const SidebarGroupTitle = ({ title, titleId, badge, menu, barProps, expanded, role, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: [
         'rcx-box rcx-box--full',
         'rcx-sidebar-v2-collapse-group__bar rcx-box--animated',
     ]
         .filter(Boolean)
-        .join(' '), ...barProps, ...props, children: [expanded !== undefined && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { size: 'x20', right: !expanded }), title && ((0, jsx_runtime_1.jsx)("h4", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title', id: titleId, children: title })), !expanded && badge && badge] }));
+        .join(' '), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'rcx-box rcx-sidebar-v2-collapse-group__bar-button', role: role, ...barProps, children: [expanded !== undefined && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { size: 'x20', right: !expanded }), title && ((0, jsx_runtime_1.jsx)("h4", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title', id: titleId, children: title })), !expanded && badge && badge] }), menu && (0, jsx_runtime_1.jsx)(SidebarCollapseGroupMenu_1.SidebarCollapseGroupMenu, { children: menu })] }));
 exports.SidebarGroupTitle = SidebarGroupTitle;
 
 
@@ -9686,7 +9890,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SidebarV2GroupTitle = exports.SidebarV2Divider = exports.SidebarV2Section = exports.SidebarV2ButtonGroup = exports.SidebarV2Banner = exports.SidebarV2CollapseGroup = exports.SidebarV2Link = exports.SidebarV2Actions = exports.SidebarV2Action = exports.SidebarV2AccordionItem = exports.SidebarV2Accordion = exports.SidebarV2 = void 0;
+exports.SidebarV2GroupTitle = exports.SidebarV2Divider = exports.SidebarV2Section = exports.SidebarV2ButtonGroup = exports.SidebarV2Banner = exports.SidebarV2CollapseGroupMenu = exports.SidebarV2CollapseGroup = exports.SidebarV2Link = exports.SidebarV2Actions = exports.SidebarV2Action = exports.SidebarV2AccordionItem = exports.SidebarV2Accordion = exports.SidebarV2 = void 0;
 var Sidebar_1 = __webpack_require__(/*! ./Sidebar */ "./src/components/SidebarV2/Sidebar.tsx");
 Object.defineProperty(exports, "SidebarV2", ({ enumerable: true, get: function () { return Sidebar_1.Sidebar; } }));
 var SidebarAccordion_1 = __webpack_require__(/*! ./SidebarAccordion */ "./src/components/SidebarV2/SidebarAccordion.tsx");
@@ -9702,6 +9906,8 @@ Object.defineProperty(exports, "SidebarV2Link", ({ enumerable: true, get: functi
 __exportStar(__webpack_require__(/*! ./SidebarItem */ "./src/components/SidebarV2/SidebarItem/index.ts"), exports);
 var SidebarCollapseGroup_1 = __webpack_require__(/*! ./SidebarCollapseGroup */ "./src/components/SidebarV2/SidebarCollapseGroup.tsx");
 Object.defineProperty(exports, "SidebarV2CollapseGroup", ({ enumerable: true, get: function () { return SidebarCollapseGroup_1.SidebarCollapseGroup; } }));
+var SidebarCollapseGroupMenu_1 = __webpack_require__(/*! ./SidebarCollapseGroupMenu */ "./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx");
+Object.defineProperty(exports, "SidebarV2CollapseGroupMenu", ({ enumerable: true, get: function () { return SidebarCollapseGroupMenu_1.SidebarCollapseGroupMenu; } }));
 var SidebarBanner_1 = __webpack_require__(/*! ./SidebarBanner */ "./src/components/SidebarV2/SidebarBanner.tsx");
 Object.defineProperty(exports, "SidebarV2Banner", ({ enumerable: true, get: function () { return SidebarBanner_1.SidebarBanner; } }));
 __exportStar(__webpack_require__(/*! ./SidebarFooter */ "./src/components/SidebarV2/SidebarFooter/index.ts"), exports);
@@ -9743,7 +9949,7 @@ exports["default"] = Sidepanel;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidepanelDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidepanel--divider": true, mbs: -2, mbe: 0 }));
+const SidepanelDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidepanel--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports["default"] = SidepanelDivider;
 
 
@@ -10576,7 +10782,7 @@ const TableCell = ({ align, clickable, children, ...props }) => {
     const isInsideHead = (0, react_1.useContext)(TableHead_1.TableHeadContext);
     const innerElement = children ??
         (!isInsideHead ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'inline-block', is: 'hr', width: 'x14', borderWidth: 1 })) : undefined);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: isInsideHead ? 'th' : 'td', "rcx-table__cell": true, "rcx-table__cell--align": align, "rcx-table__cell--header": isInsideHead, "rcx-table__cell--clickable": clickable, children: innerElement, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: isInsideHead ? 'th' : 'td', "rcx-table__cell": true, "rcx-table__cell--align": align, "rcx-table__cell--header": isInsideHead, "rcx-table__cell--clickable": clickable, ...props, children: innerElement }));
 };
 exports["default"] = TableCell;
 
@@ -10644,7 +10850,7 @@ exports["default"] = TableRow;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../../Box */ "./src/components/Box/index.ts");
-const TableSelection = ({ children, text, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-table__selection": true, display: 'flex', alignItems: 'center', justifyContent: 'space-between', pi: 24, elevation: '2', ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { fontScale: 'p2b', mb: 16, flexShrink: 1, withTruncatedText: true, children: text }), children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { mi: 'neg-x8', fontScale: 'p2m', flexShrink: 0, children: children }))] }));
+const TableSelection = ({ children, text, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-table__selection": true, display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingInline: 24, elevation: '2', ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { fontScale: 'p2b', marginBlock: 16, flexShrink: 1, withTruncatedText: true, children: text }), children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x8', fontScale: 'p2m', flexShrink: 0, children: children }))] }));
 exports["default"] = TableSelection;
 
 
@@ -10761,7 +10967,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
  * Tabs is a component to navigate around the UI using buttons arranged together with the selected tab highlighted.
  */
 function Tabs({ children, divider = true, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs": true, "rcx-tabs--with-divider": divider, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__scroll-box": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__wrapper": true, children: children, role: 'tablist' }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs": true, "rcx-tabs--with-divider": divider, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__scroll-box": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__wrapper": true, role: 'tablist', children: children }) }) }));
 }
 exports["default"] = Tabs;
 
@@ -12382,17 +12588,17 @@ module.exports = require("react/jsx-runtime");
 /******/ 	});
 /************************************************************************/
 /******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
+/******/ 	const __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
 /******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		const cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
 /******/ 			return cachedModule.exports;
 /******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 		const module = __webpack_module_cache__[moduleId] = {
 /******/ 			// no module.id needed
 /******/ 			// no module.loaded needed
 /******/ 			exports: {}
@@ -12401,7 +12607,7 @@ module.exports = require("react/jsx-runtime");
 /******/ 		// Execute the module function
 /******/ 		if (!(moduleId in __webpack_modules__)) {
 /******/ 			delete __webpack_module_cache__[moduleId];
-/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
+/******/ 			const e = new Error("Cannot find module '" + moduleId + "'");
 /******/ 			e.code = 'MODULE_NOT_FOUND';
 /******/ 			throw e;
 /******/ 		}
@@ -12416,7 +12622,7 @@ module.exports = require("react/jsx-runtime");
 /******/ 	(() => {
 /******/ 		// define __esModule on exports
 /******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			if(Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
 /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
@@ -12428,7 +12634,7 @@ module.exports = require("react/jsx-runtime");
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.ts");
+/******/ 	let __webpack_exports__ = __webpack_require__("./src/index.ts");
 /******/ 	module.exports = __webpack_exports__;
 /******/ 	
 /******/ })()