@rocket.chat/fuselage 0.84.0 → 0.86.0

package/dist/fuselage.development.js

@@ -66,8 +66,13 @@ 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 colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/colors.json */ "@rocket.chat/fuselage-tokens/dist/colors.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.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.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.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.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.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.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);
@@ -871,8 +826,8 @@ const prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassNam
 /**
  * Communicates notification’s amount and types.
  */
-function Badge({ is: Tag = 'span', variant = 'secondary', small, className, disabled, ...props }) {
-    const modifiers = [variant, small && 'small', disabled && 'disabled']
+function Badge({ is: Tag = 'span', variant = 'secondary', small, className, ...props }) {
+    const modifiers = [variant, small && 'small']
         .filter(Boolean)
         .map((modifier) => `rcx-badge--${modifier}`)
         .join(' ');
@@ -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"
@@ -6827,7 +6520,7 @@ function Options({ maxHeight = 'x144', multiple, renderEmpty: EmptyComponent = O
                             return;
                         (0, prevent_1.prevent)(e);
                         onSelect([value, label, selected, disabled, type, url]);
-                    }, value: value, selected: selected, disabled: disabled, focus: cursor === i }, value));
+                    }, value: value, selected: !!selected, disabled: disabled, focus: cursor === i }, value));
         }
     }), [options, cursor, onSelect, OptionComponent]);
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsxs)(Tile_1.Tile, { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent_1.prevent, onClick: prevent_1.prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', id: id, "aria-activedescendant": options?.[cursor]?.[0]
@@ -7062,7 +6755,7 @@ function OptionsPaginated({ ref, withTitle, multiple, renderEmpty: EmptyComponen
                 (0, prevent_1.prevent)(e);
                 onSelect([value, label]);
                 return false;
-            }, key: value, value: value, selected: selected || (multiple !== true && undefined), focus: cursor === index || undefined }));
+            }, key: value, value: value, selected: !!selected, focus: cursor === index || undefined }));
     };
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: !options.length ? ((0, jsx_runtime_1.jsx)(EmptyComponent, {})) : ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { endReached: endReached, style: { height: '144px' }, totalCount: options.length, data: options, 
                 // TODO Add a scroller element
@@ -7488,14 +7181,14 @@ const stroke_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fusel
 const surface_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/surface.json */ "@rocket.chat/fuselage-tokens/dist/surface.json"));
 const getTokens = (theme) => {
     const tokens = {
-        badge: badge_json_1.default.badge[theme],
-        button: button_json_1.default.button[theme],
-        font: font_json_1.default.font[theme],
-        shadow: shadow_json_1.default.shadow[theme],
-        status: status_json_1.default.status[theme],
-        statusBullet: statusBullet_json_1.default.statusBullet[theme],
-        stroke: stroke_json_1.default.stroke[theme],
-        surface: surface_json_1.default.surface[theme],
+        badge: badge_json_1.default[theme],
+        button: button_json_1.default[theme],
+        font: font_json_1.default[theme],
+        shadow: shadow_json_1.default[theme],
+        status: status_json_1.default[theme],
+        statusBullet: statusBullet_json_1.default[theme],
+        stroke: stroke_json_1.default[theme],
+        surface: surface_json_1.default[theme],
     };
     return tokens;
 };
@@ -8691,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',
@@ -8714,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',
@@ -8746,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;
 
@@ -8764,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;
 
@@ -8783,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 });
 }
@@ -8803,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',
@@ -8824,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;
 
@@ -8840,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',
@@ -8847,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;
 
@@ -8865,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)
@@ -8885,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 });
 }
@@ -8903,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 });
 }
@@ -8926,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, {})] }));
@@ -8945,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;
 
@@ -8967,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, {})] }));
@@ -8985,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,
@@ -9006,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;
 
@@ -9035,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);
@@ -9373,13 +9157,12 @@ 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 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(' '), ...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 })] }));
+        .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] }));
 exports.SidebarGroupTitle = SidebarGroupTitle;
 
 
@@ -11463,7 +11246,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);
@@ -11575,7 +11357,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getPaletteColor = void 0;
-const colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/colors.json */ "@rocket.chat/fuselage-tokens/colors.json"));
+const colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/colors.json */ "@rocket.chat/fuselage-tokens/dist/colors.json"));
 const invariant_1 = __importDefault(__webpack_require__(/*! invariant */ "invariant"));
 const isPaletteColorRef = (ref) => typeof ref === 'string' && ref in colors_json_1.default;
 const mapTypeToPrefix = {
@@ -12156,7 +11938,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.fontScale = exports.fontFamily = exports.spacing = exports.size = exports.color = exports.fontColor = exports.backgroundColor = exports.strokeColor = exports.borderRadius = exports.borderWidth = void 0;
-const typography_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/typography.json */ "@rocket.chat/fuselage-tokens/typography.json"));
+const border_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/border.json */ "@rocket.chat/fuselage-tokens/dist/border.json"));
+const typography_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/typography.json */ "@rocket.chat/fuselage-tokens/dist/typography.json"));
 const memo_1 = __webpack_require__(/*! @rocket.chat/memo */ "@rocket.chat/memo");
 const invariant_1 = __importDefault(__webpack_require__(/*! invariant */ "invariant"));
 const Theme_1 = __webpack_require__(/*! ./Theme */ "./src/Theme.ts");
@@ -12182,20 +11965,14 @@ const measure = (computeSpecialValue) => (0, memo_1.memoize)((value) => {
     return value;
 });
 exports.borderWidth = measure((value) => {
-    if (value === 'none') {
-        return '0px';
-    }
-    if (value === 'default') {
-        return (0, exports.borderWidth)('x1');
+    if (typeof value === 'string' && value in border_json_1.default.width) {
+        return `${border_json_1.default.width[value]}px`;
     }
     return undefined;
 });
 exports.borderRadius = measure((value) => {
-    if (value === 'none') {
-        return '0px';
-    }
-    if (value === 'full') {
-        return '9999px';
+    if (typeof value === 'string' && value in border_json_1.default.radius) {
+        return `${border_json_1.default.radius[value] / 16}rem`;
     }
     return undefined;
 });
@@ -12328,22 +12105,22 @@ exports.spacing = measure((value) => {
     }
     return undefined;
 });
-const isFontFamily = (value) => typeof value === 'string' && value in typography_json_1.default.fontFamilies;
+const isFontFamily = (value) => typeof value === 'string' && value in typography_json_1.default.fontFamily;
 exports.fontFamily = (0, memo_1.memoize)((value) => {
     if (!isFontFamily(value)) {
         return undefined;
     }
-    const fontFamily = typography_json_1.default.fontFamilies[value]
+    const fontFamily = typography_json_1.default.fontFamily[value]
         .map((fontFace) => (fontFace.includes(' ') ? `'${fontFace}'` : fontFace))
         .join(', ');
     return (0, toCSSValue_1.toCSSFontValue)(value, fontFamily);
 });
-const isFontScale = (value) => typeof value === 'string' && value in typography_json_1.default.fontScales;
+const isFontScale = (value) => typeof value === 'string' && value in typography_json_1.default.fontScale;
 exports.fontScale = (0, memo_1.memoize)((value) => {
     if (!isFontScale(value)) {
         return undefined;
     }
-    const { fontSize, fontWeight, lineHeight, letterSpacing } = typography_json_1.default.fontScales[value];
+    const { fontSize, fontWeight, lineHeight, letterSpacing } = typography_json_1.default.fontScale[value];
     return {
         fontSize: `${fontSize / 16}rem`,
         fontWeight,
@@ -12375,16 +12152,6 @@ module.exports = require("@rocket.chat/fuselage-hooks");
 
 /***/ },
 
-/***/ "@rocket.chat/fuselage-tokens/colors.json"
-/*!***********************************************************!*\
-  !*** external "@rocket.chat/fuselage-tokens/colors.json" ***!
-  \***********************************************************/
-(module) {
-
-module.exports = require("@rocket.chat/fuselage-tokens/colors.json");
-
-/***/ },
-
 /***/ "@rocket.chat/fuselage-tokens/dist/badge.json"
 /*!***************************************************************!*\
   !*** external "@rocket.chat/fuselage-tokens/dist/badge.json" ***!
@@ -12395,6 +12162,16 @@ module.exports = require("@rocket.chat/fuselage-tokens/dist/badge.json");
 
 /***/ },
 
+/***/ "@rocket.chat/fuselage-tokens/dist/border.json"
+/*!****************************************************************!*\
+  !*** external "@rocket.chat/fuselage-tokens/dist/border.json" ***!
+  \****************************************************************/
+(module) {
+
+module.exports = require("@rocket.chat/fuselage-tokens/dist/border.json");
+
+/***/ },
+
 /***/ "@rocket.chat/fuselage-tokens/dist/button.json"
 /*!****************************************************************!*\
   !*** external "@rocket.chat/fuselage-tokens/dist/button.json" ***!
@@ -12405,6 +12182,16 @@ module.exports = require("@rocket.chat/fuselage-tokens/dist/button.json");
 
 /***/ },
 
+/***/ "@rocket.chat/fuselage-tokens/dist/colors.json"
+/*!****************************************************************!*\
+  !*** external "@rocket.chat/fuselage-tokens/dist/colors.json" ***!
+  \****************************************************************/
+(module) {
+
+module.exports = require("@rocket.chat/fuselage-tokens/dist/colors.json");
+
+/***/ },
+
 /***/ "@rocket.chat/fuselage-tokens/dist/font.json"
 /*!**************************************************************!*\
   !*** external "@rocket.chat/fuselage-tokens/dist/font.json" ***!
@@ -12465,13 +12252,13 @@ module.exports = require("@rocket.chat/fuselage-tokens/dist/surface.json");
 
 /***/ },
 
-/***/ "@rocket.chat/fuselage-tokens/typography.json"
-/*!***************************************************************!*\
-  !*** external "@rocket.chat/fuselage-tokens/typography.json" ***!
-  \***************************************************************/
+/***/ "@rocket.chat/fuselage-tokens/dist/typography.json"
+/*!********************************************************************!*\
+  !*** external "@rocket.chat/fuselage-tokens/dist/typography.json" ***!
+  \********************************************************************/
 (module) {
 
-module.exports = require("@rocket.chat/fuselage-tokens/typography.json");
+module.exports = require("@rocket.chat/fuselage-tokens/dist/typography.json");
 
 /***/ },