@rocket.chat/fuselage 0.83.0 → 0.85.0

package/dist/fuselage.development.js

@@ -67,7 +67,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Palette = exports.isShadowColor = exports.isStatusColor = exports.isStatusBackgroundColor = exports.isBadgeColor = exports.isTextIconColor = exports.isStrokeColor = exports.isSurfaceColor = exports.shadowColors = exports.badgeBackgroundColors = exports.statusColors = exports.statusBackgroundColors = exports.textIconColors = exports.strokeColors = exports.surfaceColors = exports.neutral = exports.__setThrowErrorOnInvalidToken__ = exports.throwErrorOnInvalidToken = exports.Var = void 0;
 const colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/colors.json */ "@rocket.chat/fuselage-tokens/colors.json"));
-const getPaletteColor_1 = __webpack_require__(/*! ./getPaletteColor */ "./src/getPaletteColor.ts");
+const badge_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/badge.json */ "@rocket.chat/fuselage-tokens/dist/badge.json"));
+const font_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/font.json */ "@rocket.chat/fuselage-tokens/dist/font.json"));
+const shadow_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/shadow.json */ "@rocket.chat/fuselage-tokens/dist/shadow.json"));
+const status_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/status.json */ "@rocket.chat/fuselage-tokens/dist/status.json"));
+const stroke_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/stroke.json */ "@rocket.chat/fuselage-tokens/dist/stroke.json"));
+const surface_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/surface.json */ "@rocket.chat/fuselage-tokens/dist/surface.json"));
 const toCSSValue_1 = __webpack_require__(/*! ./helpers/toCSSValue */ "./src/helpers/toCSSValue.ts");
 class Var {
     name;
@@ -84,7 +89,6 @@ class Var {
     }
 }
 exports.Var = Var;
-const white = new Var('white', '#ffffff');
 exports.throwErrorOnInvalidToken = false;
 const __setThrowErrorOnInvalidToken__ = (value) => {
     exports.throwErrorOnInvalidToken = value;
@@ -103,143 +107,92 @@ exports.neutral = {
     800: new Var('neutral-800', colors_json_1.default.n800),
     900: new Var('neutral-900', colors_json_1.default.n900),
 };
-const blue = {
-    100: new Var('primary-100', colors_json_1.default.b100),
-    200: new Var('primary-200', colors_json_1.default.b200),
-    300: new Var('primary-300', colors_json_1.default.b300),
-    400: new Var('primary-400', colors_json_1.default.b400),
-    500: new Var('primary-500', colors_json_1.default.b500),
-    600: new Var('primary-600', colors_json_1.default.b600),
-    700: new Var('primary-700', colors_json_1.default.b700),
-    800: new Var('primary-800', colors_json_1.default.b800),
-    900: new Var('primary-900', colors_json_1.default.b900),
-};
-const green = {
-    100: new Var('success-100', colors_json_1.default.g100),
-    200: new Var('success-200', colors_json_1.default.g200),
-    300: new Var('success-300', colors_json_1.default.g300),
-    400: new Var('success-400', colors_json_1.default.g400),
-    500: new Var('success-500', colors_json_1.default.g500),
-    600: new Var('success-600', colors_json_1.default.g600),
-    700: new Var('success-700', colors_json_1.default.g700),
-    800: new Var('success-800', colors_json_1.default.g800),
-    900: new Var('success-900', colors_json_1.default.g900),
-};
-const yellow = {
-    100: new Var('warning-100', colors_json_1.default.y100),
-    200: new Var('warning-200', colors_json_1.default.y200),
-    300: new Var('warning-300', colors_json_1.default.y300),
-    400: new Var('warning-400', colors_json_1.default.y400),
-    500: new Var('warning-500', colors_json_1.default.y500),
-    600: new Var('warning-600', colors_json_1.default.y600),
-    700: new Var('warning-700', colors_json_1.default.y700),
-    800: new Var('warning-800', colors_json_1.default.y800),
-    900: new Var('warning-900', colors_json_1.default.y900),
-};
-const red = {
-    100: new Var('danger-100', colors_json_1.default.r100),
-    200: new Var('danger-200', colors_json_1.default.r200),
-    300: new Var('danger-300', colors_json_1.default.r300),
-    400: new Var('danger-400', colors_json_1.default.r400),
-    500: new Var('danger-500', colors_json_1.default.r500),
-    600: new Var('danger-600', colors_json_1.default.r600),
-    700: new Var('danger-700', colors_json_1.default.r700),
-    800: new Var('danger-800', colors_json_1.default.r800),
-    900: new Var('danger-900', colors_json_1.default.r900),
-};
-const orange = {
-    100: new Var('service-1-100', colors_json_1.default.o100),
-    200: new Var('service-1-200', colors_json_1.default.o200),
-    300: new Var('service-1-300', colors_json_1.default.o300),
-    400: new Var('service-1-400', colors_json_1.default.o400),
-    500: new Var('service-1-500', colors_json_1.default.o500),
-    600: new Var('service-1-600', colors_json_1.default.o600),
-    700: new Var('service-1-700', colors_json_1.default.o700),
-    800: new Var('service-1-800', colors_json_1.default.o800),
-    900: new Var('service-1-900', colors_json_1.default.o900),
-};
-const purple = {
-    100: new Var('service-2-100', colors_json_1.default.p100),
-    200: new Var('service-2-200', colors_json_1.default.p200),
-    300: new Var('service-2-300', colors_json_1.default.p300),
-    400: new Var('service-2-400', colors_json_1.default.p400),
-    500: new Var('service-2-500', colors_json_1.default.p500),
-    600: new Var('service-2-600', colors_json_1.default.p600),
-    700: new Var('service-2-700', colors_json_1.default.p700),
-    800: new Var('service-2-800', colors_json_1.default.p800),
-    900: new Var('service-2-900', colors_json_1.default.p900),
-};
+// fuselage-tokens doesn't expose semantic tokens for these yet:
+// - status-font "on-warning" (diverges from the token's yellow-900; see TODO
+//   below)
+// Falls back to the primitive palette directly. TODO(fuselage-tokens):
+// remove `primitive()` and its call sites below once resolved.
+const primitive = (ref, name) => new Var(name, colors_json_1.default[ref]);
+const surfaceTokens = surface_json_1.default.surface.light;
 exports.surfaceColors = {
-    'surface-light': white.theme('surface-light'),
-    'surface-tint': exports.neutral[100].theme('surface-tint'),
-    'surface-room': white.theme('surface-room'),
-    'surface-neutral': exports.neutral[400].theme('surface-neutral'),
-    'surface-disabled': exports.neutral[100].theme('surface-disabled'),
-    'surface-hover': exports.neutral[200].theme('surface-hover'),
-    'surface-selected': exports.neutral[450].theme('surface-selected'),
-    'surface-dark': exports.neutral[800].theme('surface-dark'),
-    'surface-featured': purple['700'].theme('surface-featured'),
-    'surface-featured-hover': purple['800'].theme('surface-featured-hover'),
-    'surface-overlay': exports.neutral[800].theme('surface-overlay'),
+    'surface-light': new Var('surface-light', surfaceTokens.light),
+    'surface-tint': new Var('surface-tint', surfaceTokens.tint),
+    'surface-room': new Var('surface-room', surfaceTokens.room),
+    'surface-neutral': new Var('surface-neutral', surfaceTokens.neutral),
+    'surface-disabled': new Var('surface-disabled', surfaceTokens.disabled),
+    'surface-hover': new Var('surface-hover', surfaceTokens.hover),
+    'surface-selected': new Var('surface-selected', surfaceTokens.selected),
+    'surface-dark': new Var('surface-dark', surfaceTokens.dark),
+    'surface-featured': new Var('surface-featured', surfaceTokens.featured),
+    'surface-featured-hover': new Var('surface-featured-hover', surfaceTokens.featuredHover),
+    'surface-overlay': new Var('surface-overlay', surfaceTokens.overlay),
     'surface-transparent': 'transparent',
-    'surface-sidebar': exports.neutral[400].theme('surface-sidebar'),
+    'surface-sidebar': new Var('surface-sidebar', surfaceTokens.sidebar),
 };
+const strokeTokens = stroke_json_1.default.stroke.light;
 exports.strokeColors = {
-    'stroke-extra-light': exports.neutral[250].theme('stroke-extra-light'),
-    'stroke-light': exports.neutral[500].theme('stroke-light'),
-    'stroke-medium': exports.neutral[600].theme('stroke-medium'),
-    'stroke-dark': exports.neutral[700].theme('stroke-dark'),
-    'stroke-extra-dark': exports.neutral[800].theme('stroke-extra-dark'),
-    'stroke-extra-light-highlight': blue[200].theme('stroke-extra-light-highlight'),
-    'stroke-highlight': blue[500].theme('stroke-highlight'),
-    'stroke-extra-light-error': red[200].theme('stroke-extra-light-error'),
-    'stroke-error': red[500].theme('stroke-error'),
-};
+    'stroke-extra-light': new Var('stroke-extra-light', strokeTokens.extraLight),
+    'stroke-light': new Var('stroke-light', strokeTokens.light),
+    'stroke-medium': new Var('stroke-medium', strokeTokens.medium),
+    'stroke-dark': new Var('stroke-dark', strokeTokens.dark),
+    'stroke-extra-dark': new Var('stroke-extra-dark', strokeTokens.extraDark),
+    'stroke-extra-light-highlight': new Var('stroke-extra-light-highlight', strokeTokens.extraLightHighlight),
+    'stroke-highlight': new Var('stroke-highlight', strokeTokens.highlight),
+    'stroke-extra-light-error': new Var('stroke-extra-light-error', strokeTokens.extraLightError),
+    'stroke-error': new Var('stroke-error', strokeTokens.error),
+};
+const fontTokens = font_json_1.default.font.light;
 exports.textIconColors = {
-    'font-white': white.theme('font-white'),
-    'font-disabled': exports.neutral[500].theme('font-disabled'),
-    'font-annotation': exports.neutral[600].theme('font-annotation'),
-    'font-hint': exports.neutral[700].theme('font-hint'),
-    'font-secondary-info': exports.neutral[700].theme('font-secondary-info'),
-    'font-default': exports.neutral[800].theme('font-default'),
-    'font-titles-labels': exports.neutral[900].theme('font-titles-labels'),
-    'font-info': blue[600].theme('font-info'),
-    'font-danger': red[600].theme('font-danger'),
-    'font-pure-black': exports.neutral[800].theme('font-pure-black'),
-    'font-pure-white': white.theme('font-pure-white'),
-};
+    'font-white': new Var('font-white', fontTokens.white),
+    'font-disabled': new Var('font-disabled', fontTokens.disabled),
+    'font-annotation': new Var('font-annotation', fontTokens.annotation),
+    'font-hint': new Var('font-hint', fontTokens.hint),
+    'font-secondary-info': new Var('font-secondary-info', fontTokens.secondaryInfo),
+    'font-default': new Var('font-default', fontTokens.default),
+    'font-titles-labels': new Var('font-titles-labels', fontTokens.titlesLabels),
+    'font-info': new Var('font-info', fontTokens.info),
+    'font-danger': new Var('font-danger', fontTokens.danger),
+    'font-pure-black': new Var('font-pure-black', fontTokens.pureBlack),
+    'font-pure-white': new Var('font-pure-white', fontTokens.pureWhite),
+};
+const statusTokens = status_json_1.default.status.light;
 exports.statusBackgroundColors = {
-    'status-background-info': blue[200].theme('status-background-info'),
-    'status-background-success': green[200].theme('status-background-success'),
-    'status-background-danger': red[200].theme('status-background-danger'),
-    'status-background-warning': yellow[200].theme('status-background-warning'),
-    'status-background-warning-2': yellow[100].theme('status-background-warning-2'),
-    'status-background-service-1': orange[200].theme('status-background-service-1'),
-    'status-background-service-2': purple[200].theme('status-background-service-2'),
+    'status-background-info': new Var('status-background-info', statusTokens.info),
+    'status-background-success': new Var('status-background-success', statusTokens.success),
+    'status-background-danger': new Var('status-background-danger', statusTokens.danger),
+    'status-background-warning': new Var('status-background-warning', statusTokens.warning),
+    'status-background-warning-2': new Var('status-background-warning-2', statusTokens['warning-2']),
+    'status-background-service-1': new Var('status-background-service-1', statusTokens['service-1']),
+    'status-background-service-2': new Var('status-background-service-2', statusTokens['service-2']),
 };
 exports.statusColors = {
-    'status-font-on-info': blue[600].theme('status-font-on-info'),
-    'status-font-on-success': green[800].theme('status-font-on-success'),
-    'status-font-on-warning': yellow[800].theme('status-font-on-warning'),
-    'status-font-on-warning-2': exports.neutral[800].theme('status-font-on-warning-2'),
-    'status-font-on-danger': red[800].theme('status-font-on-danger'),
-    'status-font-on-service-1': orange[800].theme('status-font-on-service-1'),
-    'status-font-on-service-2': purple[600].theme('status-font-on-service-2'),
-};
+    'status-font-on-info': new Var('status-font-on-info', statusTokens['font-on-info']),
+    'status-font-on-success': new Var('status-font-on-success', statusTokens['font-on-success']),
+    // TODO(design): token value (font-on-warning, yellow-900, #8E6300)
+    // diverges from fuselage's current yellow-800. Keeping the current value
+    // until design confirms which is correct.
+    'status-font-on-warning': primitive('y800', 'status-font-on-warning'),
+    'status-font-on-warning-2': new Var('status-font-on-warning-2', statusTokens['font-on-warning-2']),
+    'status-font-on-danger': new Var('status-font-on-danger', statusTokens['font-on-danger']),
+    'status-font-on-service-1': new Var('status-font-on-service-1', statusTokens['font-on-service-1']),
+    'status-font-on-service-2': new Var('status-font-on-service-2', statusTokens['font-on-service-2']),
+};
+const badgeTokens = badge_json_1.default.badge.light;
 exports.badgeBackgroundColors = {
-    'badge-background-level-0': exports.neutral[400].theme('badge-background-level-0'),
-    'badge-background-level-1': exports.neutral[600].theme('badge-background-level-1'),
-    'badge-background-level-2': blue[500].theme('badge-background-level-2'),
-    'badge-background-level-3': orange[500].theme('badge-background-level-3'),
-    'badge-background-level-4': red[500].theme('badge-background-level-4'),
+    'badge-background-level-0': new Var('badge-background-level-0', badgeTokens['level-0']),
+    'badge-background-level-1': new Var('badge-background-level-1', badgeTokens['level-1']),
+    'badge-background-level-2': new Var('badge-background-level-2', badgeTokens['level-2']),
+    'badge-background-level-3': new Var('badge-background-level-3', badgeTokens['level-3']),
+    'badge-background-level-4': new Var('badge-background-level-4', badgeTokens['level-4']),
 };
+const shadowTokens = shadow_json_1.default.shadow.light;
 exports.shadowColors = {
-    'shadow-elevation-border': exports.strokeColors['stroke-extra-light'].theme('shadow-elevation-border'),
-    'shadow-elevation-1': new Var('shadow-elevation-1', (0, getPaletteColor_1.getPaletteColor)('neutral', 800, 0.1)[1]),
-    'shadow-elevation-2x': new Var('shadow-elevation-2x', (0, getPaletteColor_1.getPaletteColor)('neutral', 800, 0.08)[1]),
-    'shadow-elevation-2y': new Var('shadow-elevation-2y', (0, getPaletteColor_1.getPaletteColor)('neutral', 800, 0.12)[1]),
-    'shadow-highlight': blue[200].theme('shadow-highlight'),
-    'shadow-danger': red[100].theme('shadow-danger'),
+    'shadow-elevation-border': new Var('shadow-elevation-border', shadowTokens['elevation-border']),
+    'shadow-elevation-1': new Var('shadow-elevation-1', shadowTokens['elevation-1']),
+    'shadow-elevation-2x': new Var('shadow-elevation-2x', shadowTokens['elevation-2x']),
+    'shadow-elevation-2y': new Var('shadow-elevation-2y', shadowTokens['elevation-2y']),
+    'shadow-highlight': new Var('shadow-highlight', shadowTokens.highlight),
+    'shadow-danger': new Var('shadow-danger', shadowTokens.danger),
 };
 const isSurfaceColor = (color) => typeof color === 'string' && color in exports.surfaceColors;
 exports.isSurfaceColor = isSurfaceColor;
@@ -685,6 +638,8 @@ const isSelectedValid = (value) => (selected) => {
 };
 /**
  * An input for selection of options.
+ *
+ * @deprecated Use `SelectFiltered` or `MultiSelectFiltered` instead.
  */
 function AutoComplete({ ref, value, filter, setFilter, options = [], renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, onBlur: onBlurAction = () => { }, ...props }) {
     const innerRef = (0, react_1.useRef)(null);
@@ -1535,7 +1490,7 @@ const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.t
 /**
  * Indicates an actionable user action.
  */
-function Button({ ref, primary, secondary, danger, warning, success, external, icon, is = 'button', rel: _rel, tiny, mini, small, medium, large, square, loading, disabled, children, ...props }) {
+function Button({ ref, variant, primary, secondary, danger, warning, success, external, icon, is = 'button', rel: _rel, size, tiny, mini, small, medium, large, square, loading, disabled, children, ...props }) {
     const extraProps = (is === 'a' && {
         rel: external ? 'noopener noreferrer' : undefined,
         target: external ? '_blank' : undefined,
@@ -1545,7 +1500,8 @@ function Button({ ref, primary, secondary, danger, warning, success, external, i
         }) ||
         {};
     const kindAndVariantProps = (0, react_1.useMemo)(() => {
-        const variant = (primary && 'primary') ||
+        const kind = variant ||
+            (primary && 'primary') ||
             (secondary && success && 'secondary-success') ||
             (secondary && warning && 'secondary-warning') ||
             (secondary && danger && 'secondary-danger') ||
@@ -1553,14 +1509,21 @@ function Button({ ref, primary, secondary, danger, warning, success, external, i
             (warning && 'warning') ||
             (danger && 'danger') ||
             (secondary && 'secondary');
-        if (variant) {
+        if (kind) {
             return {
-                [`rcx-button--${[variant].filter(Boolean).join('-')}`]: true,
+                [`rcx-button--${kind}`]: true,
             };
         }
         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, marginInlineEnd: 4 })), loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: 'loading', marginInlineEnd: 4 }), children] }) }));
+    }, [variant, primary, secondary, danger, warning, success]);
+    const effectiveSize = size ||
+        (mini && 'mini') ||
+        (tiny && 'tiny') ||
+        (small && 'small') ||
+        (medium && 'medium') ||
+        (large && 'large') ||
+        undefined;
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: is, type: 'button', "rcx-button": true, ...kindAndVariantProps, "rcx-button--small": effectiveSize === 'small', "rcx-button--medium": effectiveSize === 'medium', "rcx-button--large": effectiveSize === 'large', "rcx-button--square": square, "rcx-button--tiny-square": effectiveSize === 'tiny' && square, "rcx-button--mini-square": effectiveSize === 'mini' && square, "rcx-button--small-square": effectiveSize === 'small' && square, "rcx-button--medium-square": effectiveSize === 'medium' && square, "rcx-button--large-square": effectiveSize === '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;
 
@@ -2165,12 +2128,12 @@ Object.defineProperty(exports, "CodeSnippet", ({ 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 __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
+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, 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 }));
+    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);
 
@@ -2187,8 +2150,8 @@ exports["default"] = (0, react_1.memo)(Contextualbar);
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
-const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-const ContextualbarAction = ({ name, ...props }) => ((0, jsx_runtime_1.jsx)(__1.IconButton, { ...props, small: true, flexShrink: 0, icon: name }));
+const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
+const ContextualbarAction = ({ name, ...props }) => ((0, jsx_runtime_1.jsx)(Button_1.IconButton, { ...props, small: true, flexShrink: 0, icon: name }));
 exports["default"] = (0, react_1.memo)(ContextualbarAction);
 
 
@@ -2260,10 +2223,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_1 = __webpack_require__(/*! react */ "react");
-const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
+const States_1 = __webpack_require__(/*! ../States */ "./src/components/States/index.ts");
 const ContextualbarContent_1 = __importDefault(__webpack_require__(/*! ./ContextualbarContent */ "./src/components/Contextualbar/ContextualbarContent.tsx"));
 function ContextualbarEmptyContent({ icon = 'magnifier', title = 'Nothing Found', subtitle, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(ContextualbarContent_1.default, { justifyContent: 'center', ...props, children: (0, jsx_runtime_1.jsxs)(__1.States, { children: [(0, jsx_runtime_1.jsx)(__1.StatesIcon, { name: icon }), (0, jsx_runtime_1.jsx)(__1.StatesTitle, { children: title }), subtitle && (0, jsx_runtime_1.jsx)(__1.StatesSubtitle, { children: subtitle })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ContextualbarContent_1.default, { justifyContent: 'center', ...props, children: (0, jsx_runtime_1.jsxs)(States_1.States, { children: [(0, jsx_runtime_1.jsx)(States_1.StatesIcon, { name: icon }), (0, jsx_runtime_1.jsx)(States_1.StatesTitle, { children: title }), subtitle && (0, jsx_runtime_1.jsx)(States_1.StatesSubtitle, { children: subtitle })] }) }));
 }
 exports["default"] = (0, react_1.memo)(ContextualbarEmptyContent);
 
@@ -2280,9 +2243,9 @@ exports["default"] = (0, react_1.memo)(ContextualbarEmptyContent);
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
-const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
+const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarFooter(props) {
-    return (0, jsx_runtime_1.jsx)(__1.Box, { padding: 24, ...props });
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInline: 16, paddingBlock: 20, ...props });
 }
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -2298,10 +2261,12 @@ exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+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 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', 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 }) }) }));
+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);
 
 
@@ -2318,7 +2283,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, paddingInline: 2, size: 'x24' }));
+const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, paddingInline: 2, size: 'x20' }));
 exports["default"] = (0, react_1.memo)(ContextualbarIcon);
 
 
@@ -2336,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");
 function ContextualbarSection(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 }));
+    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);
 
@@ -2379,7 +2344,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: 'h4', 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);
 
 
@@ -2423,278 +2388,6 @@ var ContextualbarTitle_1 = __webpack_require__(/*! ./ContextualbarTitle */ "./sr
 Object.defineProperty(exports, "ContextualbarTitle", ({ enumerable: true, get: function () { return __importDefault(ContextualbarTitle_1).default; } }));
 
 
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/Contextualbar.tsx"
-/*!**********************************************************!*\
-  !*** ./src/components/ContextualbarV2/Contextualbar.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 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, 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);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarAction.tsx"
-/*!****************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarAction.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 ContextualbarAction = ({ name, ...props }) => ((0, jsx_runtime_1.jsx)(Button_1.IconButton, { ...props, small: true, flexShrink: 0, icon: name }));
-exports["default"] = (0, react_1.memo)(ContextualbarAction);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarActions.tsx"
-/*!*****************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarActions.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 ButtonGroup_1 = __webpack_require__(/*! ../ButtonGroup */ "./src/components/ButtonGroup/index.ts");
-const ContextualbarActions = (props) => ((0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { ...props }));
-exports["default"] = (0, react_1.memo)(ContextualbarActions);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarButton.tsx"
-/*!****************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarButton.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 ContextualbarButton = (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...props }));
-exports["default"] = (0, react_1.memo)(ContextualbarButton);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarContent.tsx"
-/*!*****************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarContent.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 Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-function ContextualbarContent(props) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__content": true, paddingInline: 24, display: 'flex', flexDirection: 'column', overflowY: 'hidden', height: 'full', ...props }));
-}
-exports["default"] = (0, react_1.memo)(ContextualbarContent);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarEmptyContent.tsx"
-/*!**********************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarEmptyContent.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 States_1 = __webpack_require__(/*! ../States */ "./src/components/States/index.ts");
-const ContextualbarContent_1 = __importDefault(__webpack_require__(/*! ./ContextualbarContent */ "./src/components/ContextualbarV2/ContextualbarContent.tsx"));
-function ContextualbarEmptyContent({ icon = 'magnifier', title = 'Nothing Found', subtitle, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(ContextualbarContent_1.default, { justifyContent: 'center', ...props, children: (0, jsx_runtime_1.jsxs)(States_1.States, { children: [(0, jsx_runtime_1.jsx)(States_1.StatesIcon, { name: icon }), (0, jsx_runtime_1.jsx)(States_1.StatesTitle, { children: title }), subtitle && (0, jsx_runtime_1.jsx)(States_1.StatesSubtitle, { children: subtitle })] }) }));
-}
-exports["default"] = (0, react_1.memo)(ContextualbarEmptyContent);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarFooter.tsx"
-/*!****************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarFooter.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 Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-function ContextualbarFooter(props) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInline: 16, paddingBlock: 20, ...props });
-}
-exports["default"] = (0, react_1.memo)(ContextualbarFooter);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarHeader.tsx"
-/*!****************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarHeader.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 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', 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);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarIcon.tsx"
-/*!**************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarIcon.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 Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, paddingInline: 2, size: 'x20' }));
-exports["default"] = (0, react_1.memo)(ContextualbarIcon);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarSection.tsx"
-/*!*****************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarSection.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 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, padding: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
-}
-exports["default"] = (0, react_1.memo)(ContextualbarSection);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarSkeleton.tsx"
-/*!******************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarSkeleton.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 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, { 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);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/ContextualbarTitle.tsx"
-/*!***************************************************************!*\
-  !*** ./src/components/ContextualbarV2/ContextualbarTitle.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 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, is: 'h5', ...props }));
-exports["default"] = (0, react_1.memo)(ContextualbarTitle);
-
-
-/***/ },
-
-/***/ "./src/components/ContextualbarV2/index.ts"
-/*!*************************************************!*\
-  !*** ./src/components/ContextualbarV2/index.ts ***!
-  \*************************************************/
-(__unused_webpack_module, exports, __webpack_require__) {
-
-
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ContextualbarV2Title = exports.ContextualbarV2Skeleton = exports.ContextualbarV2Section = exports.ContextualbarV2Icon = exports.ContextualbarV2Header = exports.ContextualbarV2Footer = exports.ContextualbarV2EmptyContent = exports.ContextualbarV2Content = exports.ContextualbarV2Button = exports.ContextualbarV2Actions = exports.ContextualbarV2Action = exports.ContextualbarV2 = void 0;
-var Contextualbar_1 = __webpack_require__(/*! ./Contextualbar */ "./src/components/ContextualbarV2/Contextualbar.tsx");
-Object.defineProperty(exports, "ContextualbarV2", ({ enumerable: true, get: function () { return __importDefault(Contextualbar_1).default; } }));
-var ContextualbarAction_1 = __webpack_require__(/*! ./ContextualbarAction */ "./src/components/ContextualbarV2/ContextualbarAction.tsx");
-Object.defineProperty(exports, "ContextualbarV2Action", ({ enumerable: true, get: function () { return __importDefault(ContextualbarAction_1).default; } }));
-var ContextualbarActions_1 = __webpack_require__(/*! ./ContextualbarActions */ "./src/components/ContextualbarV2/ContextualbarActions.tsx");
-Object.defineProperty(exports, "ContextualbarV2Actions", ({ enumerable: true, get: function () { return __importDefault(ContextualbarActions_1).default; } }));
-var ContextualbarButton_1 = __webpack_require__(/*! ./ContextualbarButton */ "./src/components/ContextualbarV2/ContextualbarButton.tsx");
-Object.defineProperty(exports, "ContextualbarV2Button", ({ enumerable: true, get: function () { return __importDefault(ContextualbarButton_1).default; } }));
-var ContextualbarContent_1 = __webpack_require__(/*! ./ContextualbarContent */ "./src/components/ContextualbarV2/ContextualbarContent.tsx");
-Object.defineProperty(exports, "ContextualbarV2Content", ({ enumerable: true, get: function () { return __importDefault(ContextualbarContent_1).default; } }));
-var ContextualbarEmptyContent_1 = __webpack_require__(/*! ./ContextualbarEmptyContent */ "./src/components/ContextualbarV2/ContextualbarEmptyContent.tsx");
-Object.defineProperty(exports, "ContextualbarV2EmptyContent", ({ enumerable: true, get: function () { return __importDefault(ContextualbarEmptyContent_1).default; } }));
-var ContextualbarFooter_1 = __webpack_require__(/*! ./ContextualbarFooter */ "./src/components/ContextualbarV2/ContextualbarFooter.tsx");
-Object.defineProperty(exports, "ContextualbarV2Footer", ({ enumerable: true, get: function () { return __importDefault(ContextualbarFooter_1).default; } }));
-var ContextualbarHeader_1 = __webpack_require__(/*! ./ContextualbarHeader */ "./src/components/ContextualbarV2/ContextualbarHeader.tsx");
-Object.defineProperty(exports, "ContextualbarV2Header", ({ enumerable: true, get: function () { return __importDefault(ContextualbarHeader_1).default; } }));
-var ContextualbarIcon_1 = __webpack_require__(/*! ./ContextualbarIcon */ "./src/components/ContextualbarV2/ContextualbarIcon.tsx");
-Object.defineProperty(exports, "ContextualbarV2Icon", ({ enumerable: true, get: function () { return __importDefault(ContextualbarIcon_1).default; } }));
-var ContextualbarSection_1 = __webpack_require__(/*! ./ContextualbarSection */ "./src/components/ContextualbarV2/ContextualbarSection.tsx");
-Object.defineProperty(exports, "ContextualbarV2Section", ({ enumerable: true, get: function () { return __importDefault(ContextualbarSection_1).default; } }));
-var ContextualbarSkeleton_1 = __webpack_require__(/*! ./ContextualbarSkeleton */ "./src/components/ContextualbarV2/ContextualbarSkeleton.tsx");
-Object.defineProperty(exports, "ContextualbarV2Skeleton", ({ enumerable: true, get: function () { return __importDefault(ContextualbarSkeleton_1).default; } }));
-var ContextualbarTitle_1 = __webpack_require__(/*! ./ContextualbarTitle */ "./src/components/ContextualbarV2/ContextualbarTitle.tsx");
-Object.defineProperty(exports, "ContextualbarV2Title", ({ enumerable: true, get: function () { return __importDefault(ContextualbarTitle_1).default; } }));
-
-
 /***/ },
 
 /***/ "./src/components/Divider/Divider.tsx"
@@ -3769,7 +3462,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,
@@ -3803,11 +3496,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;
 
@@ -3886,19 +3589,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"
@@ -3918,7 +3681,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'],
@@ -3927,11 +3691,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, padding: '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"
@@ -3990,11 +3828,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");
@@ -4127,6 +3967,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"
@@ -7749,8 +7657,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)({
@@ -7758,7 +7667,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;
 
@@ -8475,22 +8384,49 @@ exports.SidebarItem = exports.SidebarItemAction = exports.SidebarItemActions = e
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 const SidebarActions_1 = __webpack_require__(/*! ./SidebarActions */ "./src/components/Sidebar/SidebarActions.tsx");
+/**
+ * @deprecated Use the `SidebarV2` component family instead.
+ */
 const SidebarItemContainer = (props) => ((0, jsx_runtime_1.jsx)("div", { className: 'rc-box rcx-box--full rcx-sidebar-item__container', ...props }));
 exports.SidebarItemContainer = SidebarItemContainer;
+/**
+ * @deprecated Use `SidebarV2ItemMenu` instead.
+ */
 const SidebarItemMenu = (props) => ((0, jsx_runtime_1.jsx)("div", { className: 'rc-box rcx-box--full rcx-box--animated rcx-sidebar-item__menu-wrapper', ...props }));
 exports.SidebarItemMenu = SidebarItemMenu;
+/**
+ * @deprecated Use `SidebarV2ItemContent` instead.
+ */
 const SidebarItemContent = ({ className = '', ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: `rc-box rcx-box--full rcx-sidebar-item__container rcx-sidebar-item__content ${className}`, ...props }));
 exports.SidebarItemContent = SidebarItemContent;
+/**
+ * @deprecated Use `SidebarV2ItemTitle` instead.
+ */
 const SidebarItemTitle = ({ className = '', ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: `rc-box rcx-box--full rcx-sidebar-item__title ${className}`, ...props }));
 exports.SidebarItemTitle = SidebarItemTitle;
+/**
+ * @deprecated Use `SidebarV2ItemTimestamp` instead.
+ */
 const SidebarItemTime = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: `rc-box rcx-box--full rcx-sidebar-item__time ${className}`, ...props }));
 exports.SidebarItemTime = SidebarItemTime;
+/**
+ * @deprecated Use `SidebarV2ItemBadge` instead.
+ */
 const SidebarItemBadge = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: `rc-box rcx-box--full rcx-sidebar-item__badge ${className}`, ...props }));
 exports.SidebarItemBadge = SidebarItemBadge;
+/**
+ * @deprecated Use the `SidebarV2` component family instead.
+ */
 const SidebarItemSubtitle = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: `rc-box rcx-box--full rcx-sidebar-item__subtitle ${className}`, ...props }));
 exports.SidebarItemSubtitle = SidebarItemSubtitle;
+/**
+ * @deprecated Use the `SidebarV2` component family instead.
+ */
 const SidebarItemWrapper = ({ className = '', ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: `rc-box rcx-box--full rcx-sidebar-item__wrapper ${className}`, ...props }));
 exports.SidebarItemWrapper = SidebarItemWrapper;
+/**
+ * @deprecated Use `SidebarV2ItemIcon` instead.
+ */
 const SidebarItemIcon = ({ highlighted, children, icon, className: _className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: [
         'rc-box rcx-box--full rcx-sidebar-item__icon',
         highlighted && 'rcx-sidebar-item__icon--highlighted',
@@ -8498,13 +8434,24 @@ const SidebarItemIcon = ({ highlighted, children, icon, className: _className, .
         .filter(Boolean)
         .join(' '), ...props, children: children || (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: icon, ...props }) }));
 exports.SidebarItemIcon = SidebarItemIcon;
+/**
+ * @deprecated Use `SidebarV2ItemAvatarWrapper` instead.
+ */
 const SidebarItemAvatar = ({ ...props }) => ((0, jsx_runtime_1.jsx)(exports.SidebarItemContainer, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rc-box rcx-box--full rcx-sidebar-item__avatar', ...props }) }));
 exports.SidebarItemAvatar = SidebarItemAvatar;
+/**
+ * @deprecated Use `SidebarV2ItemMenu` instead.
+ */
 exports.SidebarItemActions = SidebarActions_1.SidebarActions;
+/**
+ * @deprecated Use `SidebarV2ItemAction` instead.
+ */
 const SidebarItemAction = (props) => ((0, jsx_runtime_1.jsx)(SidebarActions_1.SidebarAction, { ...props }));
 exports.SidebarItemAction = SidebarItemAction;
 /**
  * Item component to be used inside Sidebar.
+ *
+ * @deprecated Use `SidebarV2Item` instead.
  */
 const SidebarItem = ({ selected, highlighted, clickable, featured, is: Tag = 'div', children, ...props }) => ((0, jsx_runtime_1.jsx)(Tag, { className: [
         'rc-box rcx-box--full rcx-sidebar-item',
@@ -8530,8 +8477,14 @@ exports.SidebarItem = SidebarItem;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarSection = exports.SidebarSectionTitle = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/**
+ * @deprecated Use `SidebarV2GroupTitle` instead.
+ */
 const SidebarSectionTitle = (props) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-title', ...props }));
 exports.SidebarSectionTitle = SidebarSectionTitle;
+/**
+ * @deprecated Use `SidebarV2Section` instead.
+ */
 const SidebarSection = (props) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-section', ...props }));
 exports.SidebarSection = SidebarSection;
 
@@ -8548,6 +8501,9 @@ exports.SidebarSection = SidebarSection;
 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");
+/**
+ * @deprecated Use `SidebarV2` instead.
+ */
 const Sidebar = (props) => (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-sidebar": true, ...props });
 exports["default"] = Sidebar;
 
@@ -8567,9 +8523,15 @@ exports.SidebarAction = SidebarAction;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 const ButtonGroup_1 = __webpack_require__(/*! ../ButtonGroup */ "./src/components/ButtonGroup/index.ts");
+/**
+ * @deprecated Use `SidebarV2Actions` instead.
+ */
 function SidebarActions(props) {
     return (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, { ...props });
 }
+/**
+ * @deprecated Use `SidebarV2Action` instead.
+ */
 function SidebarAction(props) {
     return (0, jsx_runtime_1.jsx)(Button_1.IconButton, { small: true, ...props });
 }
@@ -8587,6 +8549,9 @@ function SidebarAction(props) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
+/**
+ * @deprecated Use `SidebarV2Banner` instead.
+ */
 const SidebarBanner = ({ text, description, onClick, variant = 'default', addon, onClose, children, }) => ((0, jsx_runtime_1.jsxs)("div", { className: `rcx-box rcx-box--full rcx-sidebar-banner rcx-sidebar-banner--${variant}`, children: [(0, jsx_runtime_1.jsxs)("div", { children: [text && (0, jsx_runtime_1.jsx)("div", { className: 'rcx-sidebar-banner--text', children: text }), description && ((0, jsx_runtime_1.jsx)("div", { role: onClick ? 'link' : undefined, tabIndex: 0, className: [
                         'rcx-sidebar-banner--description',
                         onClick && 'rcx-sidebar-banner--description--clickable',
@@ -8608,6 +8573,9 @@ 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");
+/**
+ * @deprecated Use `SidebarV2Divider` instead.
+ */
 const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports["default"] = SidebarDivider;
 
@@ -8624,6 +8592,9 @@ exports["default"] = SidebarDivider;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarFooterHighlight = exports.SidebarFooter = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/**
+ * @deprecated Use `SidebarV2Footer` instead.
+ */
 const SidebarFooter = ({ elevated, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: [
         'rcx-box rcx-box--full rcx-sidebar-footer',
         elevated && 'rcx-sidebar-footer--elevated',
@@ -8631,6 +8602,9 @@ const SidebarFooter = ({ elevated, ...props }) => ((0, jsx_runtime_1.jsx)("div",
         .filter(Boolean)
         .join(' '), ...props }));
 exports.SidebarFooter = SidebarFooter;
+/**
+ * @deprecated Use `SidebarV2FooterContent` instead.
+ */
 const SidebarFooterHighlight = ({ ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: 'rcx-box rcx-box--full rcx-sidebar-footer__highlights', ...props }));
 exports.SidebarFooterHighlight = SidebarFooterHighlight;
 
@@ -8649,6 +8623,8 @@ exports.TopBar = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 /**
  * Sidebar TopBar and ToolBox.
+ *
+ * @deprecated Use `NavBar` for app-level navigation instead.
  */
 const TopBar = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: ['rc-box rc-box--full rcx-sidebar-topbar', className]
         .filter(Boolean)
@@ -8669,6 +8645,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBarAction = TopBarAction;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const SidebarActions_1 = __webpack_require__(/*! ../SidebarActions */ "./src/components/Sidebar/SidebarActions.tsx");
+/**
+ * @deprecated Use `NavBar` for app-level navigation instead.
+ */
 function TopBarAction(props) {
     return (0, jsx_runtime_1.jsx)(SidebarActions_1.SidebarAction, { ...props });
 }
@@ -8687,6 +8666,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBarActions = TopBarActions;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const SidebarActions_1 = __webpack_require__(/*! ../SidebarActions */ "./src/components/Sidebar/SidebarActions.tsx");
+/**
+ * @deprecated Use `NavBar` for app-level navigation instead.
+ */
 function TopBarActions(props) {
     return (0, jsx_runtime_1.jsx)(SidebarActions_1.SidebarActions, { ...props });
 }
@@ -8710,6 +8692,9 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const SidebarDivider_1 = __importDefault(__webpack_require__(/*! ../SidebarDivider */ "./src/components/Sidebar/SidebarDivider.tsx"));
 const TopBar_1 = __webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar/TopBar.tsx");
 const TopBarWrapper_1 = __webpack_require__(/*! ./TopBarWrapper */ "./src/components/Sidebar/TopBar/TopBarWrapper.tsx");
+/**
+ * @deprecated Use `NavBar` for app-level navigation instead.
+ */
 const TopBarSection = ({ className, children, ...props }) => ((0, jsx_runtime_1.jsxs)(TopBar_1.TopBar, { className: ['rcx-sidebar-topbar--section', className]
         .filter(Boolean)
         .join(' '), ...props, children: [(0, jsx_runtime_1.jsx)(TopBarWrapper_1.TopBarWrapper, { children: children }), (0, jsx_runtime_1.jsx)(SidebarDivider_1.default, {})] }));
@@ -8729,6 +8714,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBarTitle = 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");
+/**
+ * @deprecated Use `NavBar` for app-level navigation instead.
+ */
 const TopBarTitle = (props) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { className: 'rcx-sidebar-topbar__title', withTruncatedText: true, ...props }));
 exports.TopBarTitle = TopBarTitle;
 
@@ -8751,6 +8739,9 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const SidebarDivider_1 = __importDefault(__webpack_require__(/*! ../SidebarDivider */ "./src/components/Sidebar/SidebarDivider.tsx"));
 const TopBar_1 = __webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar/TopBar.tsx");
 const TopBarWrapper_1 = __webpack_require__(/*! ./TopBarWrapper */ "./src/components/Sidebar/TopBar/TopBarWrapper.tsx");
+/**
+ * @deprecated Use `NavBar` for app-level navigation instead.
+ */
 const TopBarToolBox = ({ children, className, ...props }) => ((0, jsx_runtime_1.jsxs)(TopBar_1.TopBar, { className: ['rcx-sidebar-topbar--toolbox', className]
         .filter(Boolean)
         .join(' '), ...props, children: [(0, jsx_runtime_1.jsx)(TopBarWrapper_1.TopBarWrapper, { children: children }), (0, jsx_runtime_1.jsx)(SidebarDivider_1.default, {})] }));
@@ -8769,6 +8760,9 @@ exports.TopBarToolBox = TopBarToolBox;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBarV2 = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/**
+ * @deprecated Use `NavBar` for app-level navigation instead.
+ */
 const TopBarV2 = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: [
         'rc-box rc-box--full rcx-sidebar-topbar-v2 rcx-sidebar-topbar-v2',
         className,
@@ -8790,6 +8784,9 @@ exports.TopBarV2 = TopBarV2;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBarWrapper = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/**
+ * @deprecated Use `NavBar` for app-level navigation instead.
+ */
 const TopBarWrapper = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { className: 'rc-box rc-box--full rcx-sidebar-topbar__wrapper', children: children }));
 exports.TopBarWrapper = TopBarWrapper;
 
@@ -8819,6 +8816,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TopBarAvatar = void 0;
+/**
+ * @deprecated Use `NavBar` for app-level navigation instead.
+ */
 exports.TopBarAvatar = { size: 'x24' };
 __exportStar(__webpack_require__(/*! ./TopBar */ "./src/components/Sidebar/TopBar/TopBar.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./TopBarV2 */ "./src/components/Sidebar/TopBar/TopBarV2.tsx"), exports);
@@ -9042,13 +9042,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',
                 ]
@@ -9057,6 +9057,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"
@@ -9137,12 +9157,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;
 
 
@@ -9653,7 +9674,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");
@@ -9669,6 +9690,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);
@@ -11224,7 +11247,6 @@ __exportStar(__webpack_require__(/*! ./Chevron */ "./src/components/Chevron/inde
 __exportStar(__webpack_require__(/*! ./Chip */ "./src/components/Chip/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./CodeSnippet */ "./src/components/CodeSnippet/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Contextualbar */ "./src/components/Contextualbar/index.ts"), exports);
-__exportStar(__webpack_require__(/*! ./ContextualbarV2 */ "./src/components/ContextualbarV2/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Divider */ "./src/components/Divider/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Dropdown */ "./src/components/Dropdown/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./EmailInput */ "./src/components/EmailInput/index.ts"), exports);
@@ -12349,17 +12371,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: {}
@@ -12368,7 +12390,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;
 /******/ 		}
@@ -12383,7 +12405,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 });
@@ -12395,7 +12417,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__;
 /******/ 	
 /******/ })()