@rocket.chat/fuselage 0.95.0 → 1.0.0-rc.0

package/dist/fuselage.development.js

@@ -44,6 +44,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 	_rocket_chat_fuselage_tokens_dist_surface_json = __toESM(_rocket_chat_fuselage_tokens_dist_surface_json);
 	let _rocket_chat_fuselage_tokens_dist_border_json = require("@rocket.chat/fuselage-tokens/dist/border.json");
 	_rocket_chat_fuselage_tokens_dist_border_json = __toESM(_rocket_chat_fuselage_tokens_dist_border_json);
+	let _rocket_chat_fuselage_tokens_dist_spacing_json = require("@rocket.chat/fuselage-tokens/dist/spacing.json");
+	_rocket_chat_fuselage_tokens_dist_spacing_json = __toESM(_rocket_chat_fuselage_tokens_dist_spacing_json);
 	let _rocket_chat_fuselage_tokens_dist_typography_json = require("@rocket.chat/fuselage-tokens/dist/typography.json");
 	_rocket_chat_fuselage_tokens_dist_typography_json = __toESM(_rocket_chat_fuselage_tokens_dist_typography_json);
 	let _rocket_chat_memo = require("@rocket.chat/memo");
@@ -169,98 +171,6 @@ if (process.env.NODE_ENV !== "production") (function() {
 		return classNames.join(" ");
 	};
 	//#endregion
-	//#region src/helpers/appendClassName.ts
-	var appendClassName = (currentClassName, newClassName) => {
-		if (currentClassName === void 0 || currentClassName === "") return newClassName;
-		if (Array.isArray(currentClassName)) return [...currentClassName, newClassName];
-		return `${currentClassName} ${newClassName}`;
-	};
-	//#endregion
-	//#region src/contexts/OwnerDocument.ts
-	var OwnerDocument = (0, react.createContext)({ document: window.document });
-	var useOwnerDocument = () => {
-		return (0, react.useContext)(OwnerDocument);
-	};
-	//#endregion
-	//#region src/hooks/useStyle.ts
-	var useStyle = (cssFn, arg) => {
-		const content = (0, react.useMemo)(() => cssFn ? cssFn(arg) : void 0, [arg, cssFn]);
-		const className = (0, react.useMemo)(() => {
-			if (!content) return;
-			return content ? (0, _rocket_chat_css_in_js.createClassName)(content) : void 0;
-		}, [content]);
-		(0, react.useDebugValue)(className);
-		const { document } = useOwnerDocument();
-		(0, react.useInsertionEffect)(() => {
-			if (!content || !className) return;
-			const escapedClassName = (0, _rocket_chat_css_in_js.escapeName)(className);
-			const transpiledContent = (0, _rocket_chat_css_in_js.transpile)(`.${escapedClassName}`, content);
-			const detach = (0, _rocket_chat_css_in_js.attachRules)(transpiledContent, { document });
-			return () => {
-				setTimeout(detach, 1e3);
-			};
-		}, [
-			className,
-			content,
-			document
-		]);
-		return className;
-	};
-	//#endregion
-	//#region src/hooks/useArrayLikeClassNameProp.ts
-	var useArrayLikeClassNameProp = (props) => {
-		const classNames = props.className ? [].concat(props.className) : [];
-		const cssFns = classNames.filter((value) => typeof value === "function");
-		const stylesClassName = useStyle(_rocket_chat_css_in_js.css`
-      ${cssFns}
-    `, props);
-		const className = classNames.filter((value) => typeof value === "string").reduce((className, string) => appendClassName(className, string), stylesClassName || "");
-		return Object.assign(props, { className });
-	};
-	//#endregion
-	//#region src/helpers/prependClassName.ts
-	var isStringArray = (value) => Array.isArray(value);
-	var prependClassName = (currentClassName, newClassName) => {
-		if (isStringArray(currentClassName)) return [newClassName, ...currentClassName];
-		if (currentClassName) return `${newClassName} ${currentClassName}`;
-		return newClassName;
-	};
-	//#endregion
-	//#region src/hooks/useBoxOnlyProps.ts
-	var useBoxOnlyProps = (props) => {
-		Object.entries(props).forEach(([key, value]) => {
-			if (key.slice(0, 4) === "rcx-") try {
-				if (!value) return;
-				const newClassName = value === true ? key : `${key}-${value}`;
-				props.className = prependClassName(props.className, newClassName);
-			} finally {
-				delete props[key];
-			}
-		});
-		if (props.animated) {
-			props.className = prependClassName(props.className, "rcx-box--animated");
-			delete props.animated;
-		}
-		if (props.withRichContent) {
-			if (props.withRichContent === "inlineWithoutBreaks") props.className = prependClassName(props.className, "rcx-box--with-inline-elements");
-			else {
-				props.className = prependClassName(props.className, "rcx-box--with-inline-elements");
-				props.className = prependClassName(props.className, "rcx-box--with-block-elements");
-			}
-		}
-		if (props.htmlSize) {
-			props.size = props.htmlSize;
-			delete props.htmlSize;
-		}
-		if (props.focusable) {
-			props.className = prependClassName(props.className, "rcx-box--focusable");
-			delete props.focusable;
-		}
-		delete props.withRichContent;
-		props.className = prependClassName(props.className, "rcx-box rcx-box--full");
-		return props;
-	};
-	//#endregion
 	//#region src/components/Box/BoxTransforms.ts
 	var BoxTransforms = (0, react.createContext)(null);
 	var useBoxTransform = () => (0, react.useContext)(BoxTransforms);
@@ -310,7 +220,6 @@ if (process.env.NODE_ENV !== "production") (function() {
 		800: new Var("neutral-800", _rocket_chat_fuselage_tokens_dist_colors_json.default.n800),
 		900: new Var("neutral-900", _rocket_chat_fuselage_tokens_dist_colors_json.default.n900)
 	};
-	var primitive = (ref, name) => new Var(name, _rocket_chat_fuselage_tokens_dist_colors_json.default[ref]);
 	var surfaceTokens = _rocket_chat_fuselage_tokens_dist_surface_json.default.light;
 	var surfaceColors = {
 		"surface-light": new Var("surface-light", surfaceTokens.light),
@@ -366,7 +275,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	var statusColors = {
 		"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"]),
-		"status-font-on-warning": primitive("y800", "status-font-on-warning"),
+		"status-font-on-warning": new Var("status-font-on-warning", statusTokens["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"]),
@@ -433,6 +342,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 	};
 	//#endregion
 	//#region src/styleTokens.ts
+	var spacingScale = _rocket_chat_fuselage_tokens_dist_spacing_json.default;
+	var isSpacingToken = (value) => Object.hasOwn(_rocket_chat_fuselage_tokens_dist_spacing_json.default, value);
 	var measure = (computeSpecialValue) => (0, _rocket_chat_memo.memoize)((value) => {
 		if (typeof value === "number") return `${value}px`;
 		if (typeof value !== "string") return;
@@ -519,7 +430,18 @@ if (process.env.NODE_ENV !== "production") (function() {
 		if (value === "sw") return "100vw";
 		if (value === "sh") return "100vh";
 	});
-	var spacing = measure((value) => {
+	var spacing = (0, _rocket_chat_memo.memoize)((value) => {
+		if (typeof value === "number") return `${value}px`;
+		if (typeof value !== "string") return;
+		if (value === "none") return "0px";
+		const [, negativeMark, step] = /^(neg-|-)?x(\d+)$/.exec(value) ?? [];
+		if (!step) return value;
+		const token = `x${step}`;
+		const pixels = isSpacingToken(token) ? _rocket_chat_fuselage_tokens_dist_spacing_json.default[token] : Number(step);
+		return `${(negativeMark ? -1 : 1) * pixels}px`;
+	});
+	/** @internal */
+	var inset = measure((value) => {
 		if (value === "none") return "0px";
 	});
 	var isFontFamily = (value) => typeof value === "string" && value in _rocket_chat_fuselage_tokens_dist_typography_json.default.fontFamily;
@@ -550,7 +472,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	var fontColorProp = { toCSSValue: fontColor };
 	var strokeColorProp = { toCSSValue: strokeColor };
 	var sizeProp = { toCSSValue: size };
-	var insetProp = { toCSSValue: spacing };
+	var insetProp = { toCSSValue: inset };
 	var marginProp = { toCSSValue: spacing };
 	var paddingProp = { toCSSValue: spacing };
 	var gapProp = { toCSSValue: spacing };
@@ -653,54 +575,54 @@ if (process.env.NODE_ENV !== "production") (function() {
 		wordBreak: stringProp,
 		elevation: { toStyle: (value) => {
 			if (value === "0") return _rocket_chat_css_in_js.css`
-          box-shadow: none;
-        `;
+					box-shadow: none;
+				`;
 			if (value === "1") return _rocket_chat_css_in_js.css`
-          box-shadow: 0px 0px 12px 0px ${Palette.shadow["shadow-elevation-1"]};
-          border: 1px solid ${Palette.shadow["shadow-elevation-border"]};
-        `;
+					box-shadow: 0px 0px 12px 0px ${Palette.shadow["shadow-elevation-1"]};
+					border: 1px solid ${Palette.shadow["shadow-elevation-border"]};
+				`;
 			if (value === "1nb") return _rocket_chat_css_in_js.css`
-          box-shadow: 0px 0px 12px 0px ${Palette.shadow["shadow-elevation-1"]};
-        `;
+					box-shadow: 0px 0px 12px 0px ${Palette.shadow["shadow-elevation-1"]};
+				`;
 			if (value === "2") return _rocket_chat_css_in_js.css`
-          box-shadow:
-            0px 0px 2px 0px ${Palette.shadow["shadow-elevation-2x"]},
-            0px 0px 12px 0px ${Palette.shadow["shadow-elevation-2y"]};
-          border: 1px solid ${Palette.shadow["shadow-elevation-border"]};
-        `;
+					box-shadow:
+						0px 0px 2px 0px ${Palette.shadow["shadow-elevation-2x"]},
+						0px 0px 12px 0px ${Palette.shadow["shadow-elevation-2y"]};
+					border: 1px solid ${Palette.shadow["shadow-elevation-border"]};
+				`;
 			if (value === "2nb") return _rocket_chat_css_in_js.css`
-          box-shadow:
-            0px 0px 2px 0px ${Palette.shadow["shadow-elevation-2x"]},
-            0px 0px 12px 0px ${Palette.shadow["shadow-elevation-2y"]};
-        `;
+					box-shadow:
+						0px 0px 2px 0px ${Palette.shadow["shadow-elevation-2x"]},
+						0px 0px 12px 0px ${Palette.shadow["shadow-elevation-2y"]};
+				`;
 		} },
 		invisible: { toStyle: (value) => value ? _rocket_chat_css_in_js.css`
-            visibility: hidden;
-            opacity: 0;
-          ` : void 0 },
+						visibility: hidden;
+						opacity: 0;
+					` : void 0 },
 		withTruncatedText: { toStyle: (value) => value ? _rocket_chat_css_in_js.css`
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          ` : void 0 },
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					` : void 0 },
 		size: { toStyle: (value) => size(value) ? _rocket_chat_css_in_js.css`
-            width: ${size(value)} !important;
-            height: ${size(value)} !important;
-          ` : void 0 },
+						width: ${size(value)} !important;
+						height: ${size(value)} !important;
+					` : void 0 },
 		minSize: { toStyle: (value) => size(value) ? _rocket_chat_css_in_js.css`
-            min-width: ${size(value)} !important;
-            min-height: ${size(value)} !important;
-          ` : void 0 },
+						min-width: ${size(value)} !important;
+						min-height: ${size(value)} !important;
+					` : void 0 },
 		maxSize: { toStyle: (value) => size(value) ? _rocket_chat_css_in_js.css`
-            max-width: ${size(value)} !important;
-            max-height: ${size(value)} !important;
-          ` : void 0 },
+						max-width: ${size(value)} !important;
+						max-height: ${size(value)} !important;
+					` : void 0 },
 		fontScale: { toStyle: (value) => _rocket_chat_css_in_js.css`
-      font-size: ${fontScale(value)?.fontSize} !important;
-      font-weight: ${fontScale(value)?.fontWeight} !important;
-      letter-spacing: ${fontScale(value)?.letterSpacing} !important;
-      line-height: ${fontScale(value)?.lineHeight} !important;
-    ` }
+			font-size: ${fontScale(value)?.fontSize} !important;
+			font-weight: ${fontScale(value)?.fontWeight} !important;
+			letter-spacing: ${fontScale(value)?.letterSpacing} !important;
+			line-height: ${fontScale(value)?.lineHeight} !important;
+		` }
 	}).map(([propName, propDef]) => {
 		if ("toCSSValue" in propDef) {
 			const cssProperty = fromCamelToKebab(propName);
@@ -709,8 +631,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 				const cssValue = toCSSValue(value);
 				if (cssValue === void 0) return;
 				stylingProps.set(propName, _rocket_chat_css_in_js.css`
-                ${cssProperty}: ${cssValue} !important;
-              `);
+								${cssProperty}: ${cssValue} !important;
+							`);
 			}];
 		}
 		const { toStyle } = propDef;
@@ -733,8 +655,47 @@ if (process.env.NODE_ENV !== "production") (function() {
 			inject(value, stylingProps);
 		}
 		return [newProps, stylingProps.size ? _rocket_chat_css_in_js.css`
-        ${Array.from(stylingProps.values())}
-      ` : void 0];
+				${Array.from(stylingProps.values())}
+			` : void 0];
+	};
+	//#endregion
+	//#region src/helpers/appendClassName.ts
+	var appendClassName = (currentClassName, newClassName) => {
+		if (currentClassName === void 0 || currentClassName === "") return newClassName;
+		if (Array.isArray(currentClassName)) return [...currentClassName, newClassName];
+		return `${currentClassName} ${newClassName}`;
+	};
+	//#endregion
+	//#region src/contexts/OwnerDocument.ts
+	var OwnerDocument = (0, react.createContext)({ document: window.document });
+	var useOwnerDocument = () => {
+		return (0, react.useContext)(OwnerDocument);
+	};
+	//#endregion
+	//#region src/hooks/useStyle.ts
+	/** Attaches a `css` style to the document and returns its class name, for a `className` that takes strings only. */
+	var useStyle = (cssFn, arg) => {
+		const content = (0, react.useMemo)(() => cssFn ? cssFn(arg) : void 0, [arg, cssFn]);
+		const className = (0, react.useMemo)(() => {
+			if (!content) return;
+			return content ? (0, _rocket_chat_css_in_js.createClassName)(content) : void 0;
+		}, [content]);
+		(0, react.useDebugValue)(className);
+		const { document } = useOwnerDocument();
+		(0, react.useInsertionEffect)(() => {
+			if (!content || !className) return;
+			const escapedClassName = (0, _rocket_chat_css_in_js.escapeName)(className);
+			const transpiledContent = (0, _rocket_chat_css_in_js.transpile)(`.${escapedClassName}`, content);
+			const detach = (0, _rocket_chat_css_in_js.attachRules)(transpiledContent, { document });
+			return () => {
+				setTimeout(detach, 1e3);
+			};
+		}, [
+			className,
+			content,
+			document
+		]);
+		return className;
 	};
 	//#endregion
 	//#region src/components/Box/useStylingProps.ts
@@ -745,6 +706,60 @@ if (process.env.NODE_ENV !== "production") (function() {
 		return props;
 	};
 	//#endregion
+	//#region src/hooks/useArrayLikeClassNameProp.ts
+	var useArrayLikeClassNameProp = (props) => {
+		const classNames = props.className ? [].concat(props.className) : [];
+		const cssFns = classNames.filter((value) => typeof value === "function");
+		const stylesClassName = useStyle(_rocket_chat_css_in_js.css`
+			${cssFns}
+		`, props);
+		const className = classNames.filter((value) => typeof value === "string").reduce((className, string) => appendClassName(className, string), stylesClassName || "");
+		return Object.assign(props, { className });
+	};
+	//#endregion
+	//#region src/helpers/prependClassName.ts
+	var isStringArray = (value) => Array.isArray(value);
+	var prependClassName = (currentClassName, newClassName) => {
+		if (isStringArray(currentClassName)) return [newClassName, ...currentClassName];
+		if (currentClassName) return `${newClassName} ${currentClassName}`;
+		return newClassName;
+	};
+	//#endregion
+	//#region src/hooks/useBoxOnlyProps.ts
+	var useBoxOnlyProps = (props) => {
+		Object.entries(props).forEach(([key, value]) => {
+			if (key.slice(0, 4) === "rcx-") try {
+				if (!value) return;
+				const newClassName = value === true ? key : `${key}-${value}`;
+				props.className = prependClassName(props.className, newClassName);
+			} finally {
+				delete props[key];
+			}
+		});
+		if (props.animated) {
+			props.className = prependClassName(props.className, "rcx-box--animated");
+			delete props.animated;
+		}
+		if (props.withRichContent) {
+			if (props.withRichContent === "inlineWithoutBreaks") props.className = prependClassName(props.className, "rcx-box--with-inline-elements");
+			else {
+				props.className = prependClassName(props.className, "rcx-box--with-inline-elements");
+				props.className = prependClassName(props.className, "rcx-box--with-block-elements");
+			}
+		}
+		if (props.htmlSize) {
+			props.size = props.htmlSize;
+			delete props.htmlSize;
+		}
+		if (props.focusable) {
+			props.className = prependClassName(props.className, "rcx-box--focusable");
+			delete props.focusable;
+		}
+		delete props.withRichContent;
+		props.className = prependClassName(props.className, "rcx-box rcx-box--full");
+		return props;
+	};
+	//#endregion
 	//#region src/components/Box/Box.tsx
 	function Box({ is = "div", ...props }) {
 		let propsWithStringClassName = useArrayLikeClassNameProp(props);
@@ -884,10 +899,11 @@ if (process.env.NODE_ENV !== "production") (function() {
 			});
 		}, [propVisibility]);
 		const className = useStyle(_rocket_chat_css_in_js.css`
-      animation-duration: 230ms;
+			animation-duration: 230ms;
+			animation-fill-mode: both;
 
-      ${visibility === AnimatedVisibility.HIDING && _rocket_chat_css_in_js.css`
-        animation-name: ${_rocket_chat_css_in_js.keyframes`
+			${visibility === AnimatedVisibility.HIDING && _rocket_chat_css_in_js.css`
+					animation-name: ${_rocket_chat_css_in_js.keyframes`
         from {
           transform: translate3d(0, 0, 0);
           opacity: 1;
@@ -898,10 +914,10 @@ if (process.env.NODE_ENV !== "production") (function() {
           opacity: 0;
         }
       `};
-      `}
+				`}
 
-      ${visibility === AnimatedVisibility.UNHIDING && _rocket_chat_css_in_js.css`
-        animation-name: ${_rocket_chat_css_in_js.keyframes`
+			${visibility === AnimatedVisibility.UNHIDING && _rocket_chat_css_in_js.css`
+					animation-name: ${_rocket_chat_css_in_js.keyframes`
         from {
           transform: translate3d(0, 1rem, 0);
           opacity: 0;
@@ -912,8 +928,8 @@ if (process.env.NODE_ENV !== "production") (function() {
           opacity: 1;
         }
       `};
-      `}
-    `, null);
+				`}
+		`, null);
 		const handleAnimationEnd = (0, react.useCallback)(() => setVisibility((visibility) => {
 			if (visibility === AnimatedVisibility.HIDING) return AnimatedVisibility.HIDDEN;
 			if (visibility === AnimatedVisibility.UNHIDING) return AnimatedVisibility.VISIBLE;
@@ -964,12 +980,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Slider/SliderHead.tsx
 	var SliderHead = ({ state, labelProps, outputProps, label, showOutput = true, multiThumb }) => {
 		const labelContainer = useStyle(_rocket_chat_css_in_js.css`
-      display: flex;
-      justify-content: space-between;
-      ${state.orientation === "vertical" && _rocket_chat_css_in_js.css`
-        flex-direction: column;
-      `}
-    `, null);
+			display: flex;
+			justify-content: space-between;
+			${state.orientation === "vertical" && _rocket_chat_css_in_js.css`
+					flex-direction: column;
+				`}
+		`, null);
 		const output = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
 			...outputProps,
 			children: multiThumb ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
@@ -1002,18 +1018,18 @@ if (process.env.NODE_ENV !== "production") (function() {
 		}, state);
 		const { focusProps, isFocusVisible } = (0, react_aria.useFocusRing)();
 		const thumb = useStyle(_rocket_chat_css_in_js.css`
-      width: 12px;
-      height: 12px;
+			width: 12px;
+			height: 12px;
 
-      cursor: ${state.isDisabled ? "not-allowed" : "pointer"};
-      border-radius: 50%;
-      background: ${isFocusVisible || isDragging ? Palette.text["font-info"] : Palette.stroke["stroke-highlight"]};
-      ${state.orientation === "horizontal" ? _rocket_chat_css_in_js.css`
-            top: 50%;
-          ` : _rocket_chat_css_in_js.css`
-            left: 50%;
-          `}
-    `, {
+			cursor: ${state.isDisabled ? "not-allowed" : "pointer"};
+			border-radius: 50%;
+			background: ${isFocusVisible || isDragging ? Palette.text["font-info"] : Palette.stroke["stroke-highlight"]};
+			${state.orientation === "horizontal" ? _rocket_chat_css_in_js.css`
+							top: 50%;
+						` : _rocket_chat_css_in_js.css`
+							left: 50%;
+						`}
+		`, {
 			isFocusVisible,
 			isDragging
 		});
@@ -1041,39 +1057,39 @@ if (process.env.NODE_ENV !== "production") (function() {
 			if (isVertical) return multiThumb ? `to top, ${light$1} ${getThumbPosition(state.values[0])}%, ${highlight} 0, ${highlight} ${getThumbPosition(state.values[1])}%, ${light$1} 0` : `to top, ${highlight}  ${getThumbPosition(state.values[0])}%, ${light$1} 0%`;
 		};
 		const track = useStyle(_rocket_chat_css_in_js.css`
-      &::before {
-        position: absolute;
-        display: block;
-        content: '';
+			&::before {
+				position: absolute;
+				display: block;
+				content: '';
 
-        background: linear-gradient(${getTrackGradient()});
-        transform: translateX(-50%);
-        border-radius: 1rem;
-      }
-      ${isHorizontal && _rocket_chat_css_in_js.css`
-        width: 100%;
-        height: 30px;
-        &::before {
-          top: 50%;
-          width: 100%;
-          height: 4px;
-          transform: translateY(-50%);
-        }
-      `};
-      ${isVertical && _rocket_chat_css_in_js.css`
-        width: 30px;
-        height: 100%;
-        &::before {
-          left: 50%;
-          width: 4px;
-          height: 100%;
-        }
-      `};
-      ${state.isDisabled && _rocket_chat_css_in_js.css`
-        cursor: not-allowed;
-        opacity: 0.4;
-      `};
-    `, state);
+				background: linear-gradient(${getTrackGradient()});
+				transform: translateX(-50%);
+				border-radius: 1rem;
+			}
+			${isHorizontal && _rocket_chat_css_in_js.css`
+					width: 100%;
+					height: 30px;
+					&::before {
+						top: 50%;
+						width: 100%;
+						height: 4px;
+						transform: translateY(-50%);
+					}
+				`};
+			${isVertical && _rocket_chat_css_in_js.css`
+					width: 30px;
+					height: 100%;
+					&::before {
+						left: 50%;
+						width: 4px;
+						height: 100%;
+					}
+				`};
+			${state.isDisabled && _rocket_chat_css_in_js.css`
+					cursor: not-allowed;
+					opacity: 0.4;
+				`};
+		`, state);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			...trackProps,
 			ref: trackRef,
@@ -1109,16 +1125,16 @@ if (process.env.NODE_ENV !== "production") (function() {
 		const isHorizontal = (0, react.useMemo)(() => sliderState.orientation === "horizontal", [sliderState.orientation]);
 		const isVertical = (0, react.useMemo)(() => sliderState.orientation === "vertical", [sliderState.orientation]);
 		const slider = useStyle(_rocket_chat_css_in_js.css`
-      display: flex;
-      ${isHorizontal && _rocket_chat_css_in_js.css`
-        flex-direction: column;
-        width: 100%;
-      `};
-      ${isVertical && _rocket_chat_css_in_js.css`
-        flex-direction: row-reverse;
-        height: 100%;
-      `}
-    `, sliderState);
+			display: flex;
+			${isHorizontal && _rocket_chat_css_in_js.css`
+					flex-direction: column;
+					width: 100%;
+				`};
+			${isVertical && _rocket_chat_css_in_js.css`
+					flex-direction: row-reverse;
+					height: 100%;
+				`}
+		`, sliderState);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			...groupProps,
 			ref,
@@ -1169,8 +1185,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 				"aria-label": isPlaying ? pauseLabel : playLabel,
 				icon: isPlaying ? "pause-shape-filled" : "play-shape-filled"
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Margins, {
-				inline: 8,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
+				display: "flex",
+				alignItems: "center",
+				flexGrow: 1,
+				marginInline: 8,
+				gap: 16,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 						fontScale: "p2",
@@ -1439,30 +1459,30 @@ if (process.env.NODE_ENV !== "production") (function() {
 			inlineStart
 		]);
 		const marginsClassName = useStyle(_rocket_chat_css_in_js.css`
-      &:not(.rcx-box--full) {
-        ${props.all && _rocket_chat_css_in_js.css`
-          margin: ${spacing(props.all)};
-        `}
-        ${props.inline && _rocket_chat_css_in_js.css`
-          margin-inline: ${spacing(props.inline)};
-        `}
+			&:not(.rcx-box--full) {
+				${props.all && _rocket_chat_css_in_js.css`
+						margin: ${spacing(props.all)};
+					`}
+				${props.inline && _rocket_chat_css_in_js.css`
+						margin-inline: ${spacing(props.inline)};
+					`}
       ${props.inlineStart && _rocket_chat_css_in_js.css`
-          margin-inline-start: ${spacing(props.inlineStart)};
-        `}
+						margin-inline-start: ${spacing(props.inlineStart)};
+					`}
       ${props.inlineEnd && _rocket_chat_css_in_js.css`
-          margin-inline-end: ${spacing(props.inlineEnd)};
-        `}
+						margin-inline-end: ${spacing(props.inlineEnd)};
+					`}
       ${props.block && _rocket_chat_css_in_js.css`
-          margin-block: ${spacing(props.block)};
-        `}
+						margin-block: ${spacing(props.block)};
+					`}
       ${props.blockStart && _rocket_chat_css_in_js.css`
-          margin-block-start: ${spacing(props.blockStart)};
-        `}
+						margin-block-start: ${spacing(props.blockStart)};
+					`}
       ${props.blockEnd && _rocket_chat_css_in_js.css`
-          margin-block-end: ${spacing(props.blockEnd)};
-        `}
-      }
-    `, props);
+						margin-block-end: ${spacing(props.blockEnd)};
+					`}
+			}
+		`, props);
 		const patchedChildren = patchChildren(children, (childProps) => ({ className: appendClassName(childProps.className, appendClassName(className, marginsClassName)) }));
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoxTransforms.Provider, {
 			value: useComposedBoxTransform(transformFn),
@@ -1482,23 +1502,23 @@ if (process.env.NODE_ENV !== "production") (function() {
 		name: "cross",
 		size: "x16"
 	});
-	var Chip = ({ children, className, thumbUrl, onClick, onMouseDown, renderThumb = defaultRenderThumb, renderDismissSymbol = defaultRenderDismissSymbol, ...rest }) => {
+	var Chip = ({ children, className, thumbUrl, onClick, onMouseDown, renderThumb = defaultRenderThumb, renderDismissSymbol = defaultRenderDismissSymbol, small, label, ...rest }) => {
 		const onDismiss = onClick || onMouseDown;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: prependClassName(className, "rcx-box rcx-chip"),
+			className: prependClassName(className, `rcx-box rcx-chip${small ? " rcx-chip--small" : ""}${label ? " rcx-chip--label" : ""}`),
 			disabled: !onDismiss,
 			onClick: onDismiss,
 			...rest,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Margins, {
 				all: "x4",
 				children: [
-					thumbUrl && renderThumb && renderThumb({ url: thumbUrl }),
+					thumbUrl && renderThumb?.({ url: thumbUrl }),
 					children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "rcx-box rcx-chip__text",
 						children
 					}),
-					onDismiss && renderDismissSymbol && renderDismissSymbol()
+					onDismiss && renderDismissSymbol?.()
 				]
 			})
 		});
@@ -1542,7 +1562,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	* Usually you'll perfer to use `-Input` (e.g. <LinkTo kind='Forms/TextInput' story='Default'>`TextInput`</LinkTo>)
 	* components over this one because it works as a construction block for them.
 	*/
-	function InputBox({ ref, className, startAddon, endAddon, error, hidden, invisible, multiple, placeholderVisible, type = "text", small, onChange, ...props }) {
+	function InputBox({ ref, className, startAddon, endAddon, endAddonFlush, error, hidden, invisible, multiple, placeholderVisible, type = "text", small, onChange, ...props }) {
 		const innerRef = (0, react.useRef)(null);
 		const mergedRef = (0, _rocket_chat_fuselage_hooks.useMergedRefs)(ref, innerRef);
 		let defaultAddon = endAddon;
@@ -1585,9 +1605,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 			...props
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputBoxWrapper, {
-			className: [props.disabled && "disabled", ...Array.isArray(className) ? className : [className]],
+			className: [props.disabled && "disabled", className].filter(Boolean).join(" "),
 			hidden,
 			invisible,
+			"rcx-input-box__wrapper--end-addon-flush": endAddonFlush,
 			children: [
 				startAddon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputBoxAddon, { children: startAddon }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
@@ -1612,12 +1633,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/Skeleton/Skeleton.tsx
-	var Skeleton = ({ variant = "text", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StylingBox, {
+	var Skeleton = ({ variant = "text", inverted, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StylingBox, {
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cx(cxx("rcx-skeleton")({
 			text: variant === "text",
 			rect: variant === "rect",
-			circle: variant === "circle"
+			circle: variant === "circle",
+			inverted: !!inverted
 		})) })
 	});
 	//#endregion
@@ -1635,6 +1657,286 @@ if (process.env.NODE_ENV !== "production") (function() {
 		event.nativeEvent.stopImmediatePropagation();
 	};
 	//#endregion
+	//#region src/components/Item/ItemContext.ts
+	var ItemContext = (0, react.createContext)({
+		descriptionIds: [],
+		registerDescription: () => () => void 0,
+		registerTitle: () => () => void 0
+	});
+	var useItemContext = () => (0, react.useContext)(ItemContext);
+	//#endregion
+	//#region src/components/Item/useIdRegistry.ts
+	/**
+	* Collects the ids that descendants announce, so a parent can reference them
+	* in ARIA relationships without the consumer wiring ids by hand.
+	*/
+	var useIdRegistry = () => {
+		const [ids, setIds] = (0, react.useState)([]);
+		return [ids, (0, react.useCallback)((id) => {
+			setIds((prev) => prev.includes(id) ? prev : [...prev, id]);
+			return () => {
+				setIds((prev) => prev.filter((value) => value !== id));
+			};
+		}, [])];
+	};
+	//#endregion
+	//#region src/components/Item/Item.tsx
+	/**
+	* A list row composed from slots: media, icon, content and actions.
+	*/
+	var Item = ({ is: Tag = "div", inset = "none", selected, highlighted, focused, focusVisible, disabled, variant, className, onClick, children, ...props }) => {
+		const [descriptionIds, registerDescription] = useIdRegistry();
+		const [titleIds, registerTitle] = useIdRegistry();
+		const contextValue = (0, react.useMemo)(() => ({
+			descriptionIds,
+			registerDescription,
+			registerTitle
+		}), [
+			descriptionIds,
+			registerDescription,
+			registerTitle
+		]);
+		const isMenuItem = !!props.role?.startsWith("menuitem");
+		const ariaLabelledBy = isMenuItem ? props["aria-labelledby"] ?? (titleIds.join(" ") || void 0) : props["aria-labelledby"];
+		const ariaDescribedBy = isMenuItem ? [props["aria-describedby"], ...descriptionIds].filter(Boolean).join(" ") || void 0 : props["aria-describedby"];
+		const handleClick = onClick ? (event) => {
+			if (disabled) return;
+			onClick(event);
+		} : void 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+				...props,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				className: cx(cxx("rcx-item")({
+					[`inset-${inset}`]: inset !== "none",
+					"clickable": !!onClick,
+					"selected": !!selected,
+					"highlighted": !!highlighted,
+					"focused": !!focused,
+					"focus-managed": focusVisible !== void 0,
+					"focus-visible": !!focusVisible,
+					"disabled": !!disabled,
+					"danger": variant === "danger"
+				}), className),
+				onClick: handleClick,
+				children
+			})
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemActions.tsx
+	/**
+	* The trailing buttons, icon buttons or menu trigger of an `Item` or `ItemGroupHeader`.
+	* Placed as a direct child it spans every row; placed inside an `ItemRow` it only takes space from that row.
+	*/
+	var ItemActions = ({ is: Tag = "div", reveal = "always", className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item__actions")({ "reveal-hover": reveal === "hover" }), className),
+		children: reveal === "hover" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rcx-item__actions-inner",
+			children
+		}) : children
+	});
+	//#endregion
+	//#region src/components/Item/ItemContent.tsx
+	/**
+	* The flexible, truncating column that holds the title and description, or one `ItemRow` per line.
+	*/
+	var ItemContent = ({ is: Tag = "div", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx("rcx-item__content", className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemDescription.tsx
+	/**
+	* The secondary line of an `Item`, such as a last message preview or a username.
+	*/
+	var ItemDescription = ({ is, inline, className, ...props }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(is ?? (inline ? "span" : "div"), {
+			...props,
+			className: cx(cxx("rcx-item__description")({ inline: !!inline }), className)
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemDivider.tsx
+	/**
+	* The divider between groups, menu sections, or a header and its rows.
+	*/
+	var ItemDivider = ({ is: Tag = "div", inset = "none", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item-divider")({ [`inset-${inset}`]: inset !== "none" }), className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemGroupContext.ts
+	var ItemGroupContext = (0, react.createContext)({ registerTitle: () => () => void 0 });
+	var useItemGroupContext = () => (0, react.useContext)(ItemGroupContext);
+	//#endregion
+	//#region src/components/Item/ItemGroup.tsx
+	/**
+	* A list of `Item` rows. An `ItemGroupTitle` inside it labels the group, and its width drives the narrow layout.
+	*/
+	var ItemGroup = ({ is: Tag = "div", className, children, ...props }) => {
+		const [titleIds, registerTitle] = useIdRegistry();
+		const contextValue = (0, react.useMemo)(() => ({ registerTitle }), [registerTitle]);
+		const ariaLabelledBy = !(!!props["aria-label"] || !!props["aria-labelledby"]) && titleIds.length > 0 ? titleIds.join(" ") : void 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroupContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+				"aria-labelledby": ariaLabelledBy,
+				...props,
+				className: cx("rcx-item-group", className),
+				children
+			})
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemGroupHeader.tsx
+	/**
+	* The label row of a group, such as Favorites, Recent or Moderators. It holds an `ItemGroupTitle` and optional trailing content.
+	*/
+	var ItemGroupHeader = ({ is: Tag = "div", inset = "none", sticky, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item-group-header")({
+			[`inset-${inset}`]: inset !== "none",
+			sticky: !!sticky
+		}), className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemGroupTitle.tsx
+	/**
+	* The text of an `ItemGroupHeader`. Inside an `ItemGroup`, it becomes the group's accessible name.
+	*/
+	var ItemGroupTitle = ({ is: Tag = "div", id: propId, className, type, ...props }) => {
+		const generatedId = (0, react.useId)();
+		const id = propId ?? generatedId;
+		const { registerTitle } = useItemGroupContext();
+		(0, react.useEffect)(() => registerTitle(id), [id, registerTitle]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+			...props,
+			type: Tag === "button" ? type ?? "button" : type,
+			id,
+			className: cx("rcx-item-group-title", className)
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemIcon.tsx
+	/**
+	* A 20px slot for the room type icon or a user status, placed before the title.
+	*/
+	var ItemIcon = ({ is: Tag = "div", label, id: propId, className, ...props }) => {
+		const generatedId = (0, react.useId)();
+		const id = propId ?? generatedId;
+		const { registerDescription } = useItemContext();
+		(0, react.useEffect)(() => {
+			if (!label) return;
+			return registerDescription(id);
+		}, [
+			id,
+			label,
+			registerDescription
+		]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+			...label ? {
+				"role": "img",
+				"aria-label": label
+			} : { "aria-hidden": true },
+			...props,
+			id,
+			className: cx("rcx-item__icon", className)
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemLink.tsx
+	/**
+	* The primary target of an `Item`. It covers the whole row, so actions sit beside it instead of inside it.
+	*/
+	var ItemLink = (props) => {
+		const { descriptionIds } = useItemContext();
+		const ariaDescribedBy = [props["aria-describedby"], ...descriptionIds].filter(Boolean).join(" ") || void 0;
+		if (props.is === "button") {
+			const { is: _is, className, type = "button", ...rest } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				...rest,
+				type,
+				"aria-describedby": ariaDescribedBy,
+				className: cx("rcx-item__link", className)
+			});
+		}
+		const { is: _is, className, children, ...rest } = props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			...rest,
+			"aria-describedby": ariaDescribedBy,
+			className: cx("rcx-item__link", className),
+			children
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemMedia.tsx
+	/**
+	* The leading avatar, icon or thumbnail of an `Item`. Its box fits its child, so the child's size sets the row height.
+	*/
+	var ItemMedia = ({ is: Tag = "div", variant = "default", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item__media")({ icon: variant === "icon" }), className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemMeta.tsx
+	/**
+	* Short trailing text, such as a timestamp, count or file size. It never truncates unless `truncate` is set.
+	*/
+	var ItemMeta = ({ is: Tag = "div", truncate, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx(cxx("rcx-item__meta")({ truncate: !!truncate }), className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemRow.tsx
+	/**
+	* A horizontal line inside `ItemContent`, such as a title with a timestamp or a description with a badge.
+	*/
+	var ItemRow = ({ is: Tag = "div", className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		className: cx("rcx-item__row", className)
+	});
+	//#endregion
+	//#region src/components/Item/ItemTitle.tsx
+	/**
+	* The main label of an `Item`. It truncates with an ellipsis.
+	*/
+	var ItemTitle = ({ is: Tag = "div", id: propId, className, ...props }) => {
+		const generatedId = (0, react.useId)();
+		const id = propId ?? generatedId;
+		const { registerTitle } = useItemContext();
+		(0, react.useEffect)(() => registerTitle(id), [id, registerTitle]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+			...props,
+			id,
+			className: cx("rcx-item__title", className)
+		});
+	};
+	//#endregion
+	//#region src/components/Item/ItemSkeleton.tsx
+	/**
+	* A loading placeholder with the same height as an `Item` with the same media and lines.
+	*/
+	var ItemSkeleton = ({ is, inset, mediaSize = "x20", description = false }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
+		is,
+		inset,
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemMedia, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant: "rect",
+			width: mediaSize,
+			height: mediaSize
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ItemContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemTitle, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant: "text",
+			width: "60%"
+		}) }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemDescription, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant: "text",
+			width: "40%"
+		}) })] })]
+	});
+	//#endregion
 	//#region src/components/CheckBox/CheckBox.tsx
 	function CheckBox({ ref, indeterminate, onChange, className, labelChildren, ...props }) {
 		const innerRef = (0, react.useRef)(null);
@@ -1669,88 +1971,108 @@ if (process.env.NODE_ENV !== "production") (function() {
 					"rcx-check-box__fake": true,
 					"aria-hidden": "true"
 				})
-			]
-		});
-	}
-	//#endregion
-	//#region src/components/Option/OptionAvatar.tsx
-	var OptionAvatar = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rcx-option__avatar",
-		...props
-	});
-	//#endregion
-	//#region src/components/Option/OptionColumn.tsx
-	var OptionColumn = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rcx-option__column",
-		...props
-	});
-	//#endregion
-	//#region src/components/Option/OptionContent.tsx
-	var OptionContent = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rcx-option__content",
-		...props
-	});
-	//#endregion
-	//#region src/components/Option/OptionIcon.tsx
-	var OptionIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionColumn, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-		size: "x20",
-		"rcx-option__icon": true,
-		...props
-	}) });
+			]
+		});
+	}
 	//#endregion
 	//#region src/components/Option/Option.tsx
 	/**
 	* The generic `Option` item of options. Can be freely used or inside the `Options` as well.
+	*
+	* It renders an `Item` row, so its content can also be composed from `Item` parts.
 	*/
-	function Option({ is: Tag = "li", id, children, label, focus, selected, className, icon, gap, avatar, title, disabled, variant, onClick, description, ...props }) {
-		return /* @__PURE__ */ (0, react.createElement)(Tag, {
+	function Option({ is = "li", children, label, focus, focusVisible, selected, className, icon, iconLabel, gap, avatar, disabled, variant, onClick, description, ...props }) {
+		const { className: normalizedClassName } = useArrayLikeClassNameProp({ className });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
 			...props,
-			key: id,
-			id,
+			ref: props.ref,
+			is,
+			inset: "md",
+			focused: focus,
+			focusVisible,
+			selected,
+			disabled,
+			variant: variant === "danger" ? "danger" : void 0,
 			"aria-selected": !!selected,
 			"aria-disabled": !!disabled,
-			title,
-			onClick: (e) => {
-				if (disabled) {
-					prevent(e);
-					return;
-				}
-				onClick?.(e);
-			},
-			className: [
-				"rcx-option",
-				className,
-				focus && "rcx-option--focus",
-				selected && "rcx-option--selected",
-				disabled && "rcx-option--disabled",
-				variant && `rcx-option--${variant}`
-			].filter(Boolean).join(" ")
-		}, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ["rcx-option__wrapper", !!description && "rcx-option__wrapper--align-top"].filter(Boolean).join(" "),
+			onClickCapture: disabled ? prevent : void 0,
+			onClick: (event) => onClick?.(event),
+			className: cx(cxx("rcx-option")({
+				"focus": !!focus,
+				"selected": !!selected,
+				"disabled": !!disabled,
+				"align-top": !!description
+			}, variant), normalizedClassName),
 			children: [
-				avatar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionAvatar, { children: avatar }),
-				icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionIcon, { name: icon }),
-				gap && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionColumn, {}),
-				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionContent, { children: label }),
+				avatar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemMedia, {
+					className: "rcx-option__avatar",
+					children: avatar
+				}),
+				icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemIcon, {
+					className: "rcx-option__column",
+					label: iconLabel,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: icon,
+						size: "x20",
+						className: "rcx-option__icon"
+					})
+				}),
+				gap && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemIcon, { className: "rcx-option__column" }),
+				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemContent, {
+					className: "rcx-option__content",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemTitle, { children: label })
+				}),
 				label !== children && children
 			]
-		}));
+		});
 	}
 	var Option_default = (0, react.memo)(Option);
 	//#endregion
 	//#region src/components/Option/CheckOption.tsx
-	var CheckOption$1 = ({ selected, children: label, ...options }) => {
+	/**
+	* An `Option` with a checkbox. Its selection is announced through `aria-selected`, so the checkbox is hidden from assistive technology.
+	*/
+	var CheckOption = ({ selected, children: label, ...options }) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, {
 			label,
 			selected,
 			...options,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckBox, { checked: selected })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckBox, {
+				checked: !!selected,
+				readOnly: true,
+				tabIndex: -1,
+				"aria-hidden": true,
+				inert: true
+			})
 		});
 	};
-	var CheckOption_default = (0, react.memo)(CheckOption$1);
+	var CheckOption_default = (0, react.memo)(CheckOption);
+	//#endregion
+	//#region src/components/Option/OptionAvatar.tsx
+	var OptionAvatar = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemMedia, {
+		className: "rcx-option__avatar",
+		...props
+	});
+	//#endregion
+	//#region src/components/Option/OptionColumn.tsx
+	/**
+	* A slot of at least 20px for a status, an emoji or a short label. Empty, it lines up rows with and without icons.
+	*/
+	var OptionColumn = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemMedia, {
+		className: "rcx-option__column",
+		...props
+	});
+	//#endregion
+	//#region src/components/Option/OptionContent.tsx
+	var OptionContent = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemContent, {
+		...props,
+		className: cx("rcx-option__content", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemTitle, { children })
+	});
 	//#endregion
 	//#region src/components/Option/OptionDescription.tsx
-	var OptionDescription = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	var OptionDescription = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemDescription, {
+		inline: true,
 		className: "rcx-option__description",
 		...props
 	});
@@ -1762,16 +2084,21 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Divider/Divider.tsx
-	var Divider = ({ variation, children, vertical, ...props }) => {
+	var Divider = ({ variation, children, vertical, flush, small, stretch, ...props }) => {
 		if (!children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			is: "hr",
 			"rcx-divider": true,
 			"rcx-divider--vertical": vertical,
+			"rcx-divider--small": vertical && small,
+			"rcx-divider--stretch": vertical && stretch,
+			"rcx-divider--flush": flush,
 			"rcx-divider--danger": variation === "danger",
+			"rcx-divider--light": variation === "light",
 			...props
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
 			"rcx-message-divider": true,
+			"rcx-divider--labelled": true,
 			role: "separator",
 			...props,
 			children: [
@@ -1788,33 +2115,76 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Option/OptionDivider.tsx
 	var OptionDivider = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, { ...props });
 	//#endregion
+	//#region src/components/Option/OptionIcon.tsx
+	var OptionIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemIcon, {
+		className: "rcx-option__column",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			size: "x20",
+			...props,
+			className: ["rcx-option__icon", className].filter(Boolean).join(" ")
+		})
+	});
+	//#endregion
 	//#region src/components/Option/OptionInput.tsx
-	var OptionInput = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	var OptionInput = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
 		className: "rcx-option__input",
 		...props
 	});
 	//#endregion
 	//#region src/components/Option/OptionMenu.tsx
-	var OptionMenu = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rcx-box--animated rcx-option__menu-wrapper",
-		...props
+	var OptionMenu = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
+		...props,
+		reveal: "hover",
+		className: cx("rcx-option__menu-wrapper", className)
 	});
 	//#endregion
 	//#region src/components/Option/OptionSkeleton.tsx
-	var OptionSkeleton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { width: "100%" }) });
+	var OptionSkeleton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, {
+		"aria-hidden": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { width: "100%" })
+	});
 	//#endregion
 	//#region src/components/Option/OptionTitle.tsx
-	var OptionTitle = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	var OptionTitle = ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroupHeader, {
+		...props,
+		inset: "md",
 		className: "rcx-option__title",
-		...props
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroupTitle, { children })
 	});
 	//#endregion
 	//#region src/components/Option/OptionHeader.tsx
-	var OptionHeader = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	/**
+	* A group label inside an `Options` listbox. It is presentational, so the listbox only reports its options.
+	*/
+	var OptionHeader = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroupHeader, {
+		is: "li",
+		role: "presentation",
+		inset: "md",
 		className: "rcx-option__header",
-		children
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroupTitle, { children })
 	});
 	//#endregion
+	//#region src/components/PopoverSurface/PopoverSurface.tsx
+	var maxHeights = {
+		"half-screen": "50vh",
+		"most-of-screen": "80vh"
+	};
+	/**
+	* The raised surface of a dropdown or popover: it fills its positioner and scrolls its content.
+	*/
+	function PopoverSurface({ maxHeight, flush, elevation = "2", ...props }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+			"rcx-tile": true,
+			"rcx-tile--elevation": elevation,
+			display: "flex",
+			flexDirection: "column",
+			overflow: "auto",
+			paddingBlock: flush ? void 0 : 12,
+			maxHeight: maxHeight && maxHeights[maxHeight],
+			...props
+		});
+	}
+	//#endregion
 	//#region src/components/Scrollable/Scrollable.tsx
 	var getTouchingEdges = (element) => ({
 		top: !element.scrollTop,
@@ -1825,7 +2195,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	var pollTouchingEdges = (element, touchingEdgesRef, onScrollContent) => {
 		const touchingEdges = touchingEdgesRef.current;
 		const newTouchingEdges = getTouchingEdges(element);
-		if (touchingEdges && (touchingEdges["top"] !== newTouchingEdges.top || touchingEdges["bottom"] !== newTouchingEdges.bottom || touchingEdges["left"] !== newTouchingEdges.left || touchingEdges["right"] !== newTouchingEdges.right)) {
+		if (touchingEdges && (touchingEdges.top !== newTouchingEdges.top || touchingEdges.bottom !== newTouchingEdges.bottom || touchingEdges.left !== newTouchingEdges.left || touchingEdges.right !== newTouchingEdges.right)) {
 			touchingEdgesRef.current = newTouchingEdges;
 			onScrollContent?.(newTouchingEdges);
 		}
@@ -1846,44 +2216,38 @@ if (process.env.NODE_ENV !== "production") (function() {
 			}, 200);
 		});
 		const className = useStyle(_rocket_chat_css_in_js.css`
-      position: relative;
+			position: relative;
 
-      &::-webkit-scrollbar {
-        width: ${4 / 16}rem;
-        height: ${4 / 16}rem;
-      }
+			&::-webkit-scrollbar {
+				width: ${4 / 16}rem;
+				height: ${4 / 16}rem;
+			}
 
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
+			&::-webkit-scrollbar-track {
+				background-color: transparent;
+			}
 
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.05);
-        background-color: var(
-          --rcx-theme-scrollbar-thumb-color,
-          rgba(0, 0, 0, 0.05)
-        );
-      }
+			&::-webkit-scrollbar-thumb {
+				background-color: rgba(0, 0, 0, 0.05);
+				background-color: var(--rcx-theme-scrollbar-thumb-color, rgba(0, 0, 0, 0.05));
+			}
 
-      &:hover::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.15);
-        background-color: var(
-          --rcx-theme-scrollbar-thumb-hover-color,
-          rgba(0, 0, 0, 0.15)
-        );
-      }
+			&:hover::-webkit-scrollbar-thumb {
+				background-color: rgba(0, 0, 0, 0.15);
+				background-color: var(--rcx-theme-scrollbar-thumb-hover-color, rgba(0, 0, 0, 0.15));
+			}
 
-      ${horizontal && _rocket_chat_css_in_js.css`
-          overflow-x: auto !important;
-        ` || vertical && _rocket_chat_css_in_js.css`
-          overflow-y: auto !important;
-        ` || _rocket_chat_css_in_js.css`
-        overflow: auto !important;
-      `}
-      ${smooth && _rocket_chat_css_in_js.css`
-        scroll-behavior: smooth !important;
-      `}
-    `, null);
+			${horizontal && _rocket_chat_css_in_js.css`
+						overflow-x: auto !important;
+					` || vertical && _rocket_chat_css_in_js.css`
+						overflow-y: auto !important;
+					` || _rocket_chat_css_in_js.css`
+					overflow: auto !important;
+				`}
+			${smooth && _rocket_chat_css_in_js.css`
+					scroll-behavior: smooth !important;
+				`}
+		`, null);
 		const transformFn = (0, react.useCallback)((props) => {
 			props.className = className && appendClassName(props.className, className);
 			if (onScrollContent !== void 0 && props.onScroll === void 0) props.onScroll = handleScroll;
@@ -1899,18 +2263,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 		});
 	};
 	//#endregion
-	//#region src/components/Tile/Tile.tsx
-	function Tile({ elevation = "1", padding = 16, ...props }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-			"rcx-tile": true,
-			"rcx-tile--elevation": elevation,
-			padding,
-			...props
-		});
-	}
-	//#endregion
 	//#region src/components/Options/OptionsEmpty.tsx
-	var OptionsEmpty = ({ customEmpty }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, { label: customEmpty || "Empty" });
+	var OptionsEmpty = ({ customEmpty }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, {
+		role: "option",
+		disabled: true,
+		label: customEmpty || "Empty"
+	});
 	var OptionsEmpty_default = (0, react.memo)(OptionsEmpty);
 	//#endregion
 	//#region src/components/Options/Options.tsx
@@ -1922,14 +2280,17 @@ if (process.env.NODE_ENV !== "production") (function() {
 		(0, react.useLayoutEffect)(() => {
 			if (!liRef.current) return;
 			const { current } = liRef;
-			const li = current?.querySelector(".rcx-option--focus");
+			const li = current?.querySelector(".rcx-option--focus, .rcx-item--focused");
 			if (!li) return;
 			if (li.offsetTop + li.clientHeight > current.scrollTop + current.clientHeight || li.offsetTop - li.clientHeight < current.scrollTop) current.scrollTop = li.offsetTop;
 		}, [cursor]);
 		const optionsMemoized = (0, react.useMemo)(() => options.map(([value, label, selected, disabled, type, url], i) => {
 			switch (type) {
 				case "heading": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionHeader, { children: label }, value);
-				case "divider": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionDivider, {}, value);
+				case "divider": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemDivider, {
+					is: "li",
+					"aria-hidden": true
+				}, value);
 				default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionComponent, {
 					role: "option",
 					label,
@@ -1960,30 +2321,24 @@ if (process.env.NODE_ENV !== "production") (function() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			"rcx-options": true,
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
-				padding: 0,
-				paddingBlock: "x12",
-				paddingInline: 0,
-				elevation: "2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Scrollable, {
-					vertical: true,
-					smooth: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tile, {
-						ref: liRef,
-						elevation: "0",
-						padding: "none",
-						maxHeight,
-						onMouseDown: prevent,
-						onClick: prevent,
-						is: "ol",
-						"aria-multiselectable": multiple || true,
-						role: "listbox",
-						id,
-						"aria-activedescendant": options?.[cursor]?.[0] ? String(options?.[cursor]?.[0]) : void 0,
-						children: [!options.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyComponent, { customEmpty }), optionsMemoized]
-					})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverSurface, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Scrollable, {
+				vertical: true,
+				smooth: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
+					ref: liRef,
+					borderRadius: "medium",
+					backgroundColor: "light",
+					maxHeight,
+					onMouseDown: prevent,
+					onClick: prevent,
+					is: "ol",
+					"aria-multiselectable": multiple || true,
+					role: "listbox",
+					id,
+					"aria-activedescendant": options?.[cursor]?.[0] ? String(options?.[cursor]?.[0]) : void 0,
+					children: [!options.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyComponent, { customEmpty }), optionsMemoized]
 				})
-			})
+			}) })
 		});
 	}
 	//#endregion
@@ -1991,16 +2346,14 @@ if (process.env.NODE_ENV !== "production") (function() {
 	function OptionContainer(props) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			"rcx-options": true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
-				padding: 0,
-				paddingBlock: "x12",
-				paddingInline: 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverSurface, {
+				elevation: "1",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Scrollable, {
 					vertical: true,
 					smooth: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
-						elevation: "0",
-						padding: "none",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+						borderRadius: "medium",
+						backgroundColor: "light",
 						maxHeight: "x240",
 						...props
 					})
@@ -2110,12 +2463,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 	};
 	//#endregion
 	//#region src/components/PositionAnimated/Position.tsx
-	var Position = ({ anchor, children, placement, margin, className: _className, ...props }) => {
+	var Position = ({ anchor, children, placement, margin, preventScroll = false, className: _className, ...props }) => {
 		const target = (0, react.useRef)(null);
 		const { style: positionStyle, placement: positionPlacement } = (0, _rocket_chat_fuselage_hooks.usePosition)(anchor, target, (0, react.useMemo)(() => ({
 			placement,
 			margin
 		}), [placement, margin])) || {};
+		(0, _rocket_chat_fuselage_hooks.usePreventScrollOutside)(target, preventScroll);
 		const style = (0, react.useMemo)(() => ({
 			position: "fixed",
 			...positionStyle
@@ -2130,18 +2484,21 @@ if (process.env.NODE_ENV !== "production") (function() {
 			return element;
 		});
 		(0, react.useEffect)(() => () => {
-			if (portalContainer.childNodes.length === 0) ownerDocument.body.removeChild(portalContainer);
-		}, [portalContainer, ownerDocument]);
+			if (!portalContainer.hasChildNodes()) portalContainer.remove();
+		}, [portalContainer]);
 		return (0, react_dom.createPortal)((0, react.cloneElement)(children, {
 			ref: target,
-			style,
+			style: {
+				...children.props.style,
+				...style
+			},
 			...props,
 			placement: positionPlacement
 		}), portalContainer);
 	};
 	//#endregion
 	//#region src/components/PositionAnimated/PositionAnimated.tsx
-	var PositionAnimated = ({ width: _width, visible, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedVisibility, {
+	var PositionAnimated = ({ visible, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedVisibility, {
 		visibility: visible,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Position, {
 			...props,
@@ -2212,55 +2569,54 @@ if (process.env.NODE_ENV !== "production") (function() {
 			flexGrow: 1,
 			className: (0, react.useMemo)(() => [error && "invalid", disabled && "disabled"], [error, disabled]),
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
 					display: "flex",
 					flexGrow: 1,
 					alignItems: "center",
 					flexWrap: "wrap",
-					margin: "neg-x4",
+					gap: 4,
 					role: "group",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Margins, {
-						all: "x4",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
-							ref: mergedRefs,
-							onChange: (0, _rocket_chat_fuselage_hooks.useStableCallback)((e) => setFilter?.(e.currentTarget.value)),
-							onBlur: handleOnBlur,
-							onFocus: show,
-							onKeyDown: handleKeyDown,
-							placeholder: optionsAreVisible === AnimatedVisibility.HIDDEN || !value ? placeholder : void 0,
-							order: 1,
-							"rcx-input-box--undecorated": true,
-							value: filter,
-							disabled,
-							...props
-						}), selected.map((itemSelected) => RenderSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderSelected, {
-							selected: itemSelected,
-							onRemove: handleRemove
-						}, itemSelected.value) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip_default, {
-							value: itemSelected.value,
-							onClick: handleRemove,
-							children: itemSelected.label
-						}, itemSelected.value))]
-					})
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
+						ref: mergedRefs,
+						onChange: (0, _rocket_chat_fuselage_hooks.useStableCallback)((e) => setFilter?.(e.currentTarget.value)),
+						onBlur: handleOnBlur,
+						onFocus: show,
+						onKeyDown: handleKeyDown,
+						placeholder: optionsAreVisible === AnimatedVisibility.HIDDEN || !value ? placeholder : void 0,
+						value: filter,
+						disabled,
+						...props,
+						className: [
+							"rcx-input-box--undecorated",
+							"rcx-autocomplete__input",
+							props.className
+						].filter(Boolean).join(" ")
+					}), selected.map((itemSelected) => RenderSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderSelected, {
+						selected: itemSelected,
+						onRemove: handleRemove
+					}, itemSelected.value) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip_default, {
+						value: itemSelected.value,
+						onClick: handleRemove,
+						children: itemSelected.label
+					}, itemSelected.value))]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 					"rcx-autocomplete__addon": true,
+					color: "titles-labels",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 						name: optionsAreVisible === AnimatedVisibility.VISIBLE ? "cross" : "magnifier",
-						size: "x20",
-						color: "titles-labels"
+						size: "x20"
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PositionAnimated, {
 					visible: optionsAreVisible,
 					anchor: containerRef,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Options, {
-						width: borderBoxSize.inlineSize,
+						style: { width: borderBoxSize.inlineSize },
 						onSelect: handleSelect,
 						renderItem,
 						renderEmpty,
 						cursor,
-						value,
 						options: memoizedOptions
 					})
 				})
@@ -2284,7 +2640,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	/**
 	* Indicates an actionable user action.
 	*/
-	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 }) {
+	function Button({ ref, variant, primary, secondary, danger, warning, success, external, icon, is = "button", rel: _rel, size, tiny, mini, small, medium, large, square, compact, loading, disabled, children, ...props }) {
 		const extraProps = is === "a" && {
 			rel: external ? "noopener noreferrer" : void 0,
 			target: external ? "_blank" : void 0
@@ -2304,13 +2660,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 		const effectiveSize = size || mini && "mini" || tiny && "tiny" || small && "small" || medium && "medium" || large && "large" || void 0;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			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--compact": compact,
 			"rcx-button--tiny-square": effectiveSize === "tiny" && square,
 			"rcx-button--mini-square": effectiveSize === "mini" && square,
 			"rcx-button--small-square": effectiveSize === "small" && square,
@@ -2325,14 +2681,14 @@ if (process.env.NODE_ENV !== "production") (function() {
 				className: "rcx-button--content",
 				children: [
 					icon && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						className: "rcx-button__icon",
 						size: "x16",
-						name: icon,
-						marginInlineEnd: 4
+						name: icon
 					}),
 					loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						className: "rcx-button__icon",
 						size: "x16",
-						name: "loading",
-						marginInlineEnd: 4
+						name: "loading"
 					}),
 					children
 				]
@@ -2341,6 +2697,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/Button/IconButton.tsx
+	var iconSizes = {
+		mini: "x12",
+		tiny: "x16",
+		small: "x20",
+		medium: "x24",
+		large: "x28"
+	};
 	var getVariantClass = (variant) => {
 		if (variant) return [`rcx-button--icon-${[variant].filter(Boolean).join("-")}`];
 		return [""];
@@ -2348,8 +2711,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 	var getPressedClass = (variant) => {
 		return [`rcx-button--icon-${[variant].filter(Boolean).join("-")}-pressed`];
 	};
-	function IconButton({ icon, badge, primary, info, secondary, danger, warning, success, mini, large, tiny, small, medium, pressed, children, ...props }) {
-		const variant = (0, react.useMemo)(() => secondary && danger && "secondary-danger" || secondary && warning && "secondary-warning" || secondary && success && "secondary-success" || secondary && info && "secondary-info" || info && "info" || success && "success" || warning && "warning" || danger && "danger" || primary && "secondary-info" || secondary && "secondary" || "", [
+	function IconButton({ icon, badge, badgePosition = "top-end", variant: variantProp, size: sizeProp, primary, info, secondary, danger, warning, success, mini, large, tiny, small, medium, pressed, is = "button", external, color, children, ...props }) {
+		const variant = (0, react.useMemo)(() => (variantProp === "primary" ? "secondary-info" : variantProp) || secondary && danger && "secondary-danger" || secondary && warning && "secondary-warning" || secondary && success && "secondary-success" || secondary && info && "secondary-info" || info && "info" || success && "success" || warning && "warning" || danger && "danger" || primary && "secondary-info" || secondary && "secondary" || "", [
+			variantProp,
 			danger,
 			info,
 			primary,
@@ -2363,7 +2727,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 			if (pressed) variantProp[`${getPressedClass(variant)}`] = true;
 			return variantProp;
 		}, [variant, pressed]);
-		const size = (0, react.useMemo)(() => mini && "mini" || tiny && "tiny" || small && "small" || medium && "medium" || large && "large" || "large", [
+		const size = (0, react.useMemo)(() => sizeProp || mini && "mini" || tiny && "tiny" || small && "small" || medium && "medium" || large && "large" || "large", [
+			sizeProp,
 			medium,
 			mini,
 			small,
@@ -2371,10 +2736,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 			large
 		]);
 		const getSizeClass = () => ({ [`rcx-button--${size}-square`]: true });
-		const getIconSize = () => large && "x28" || medium && "x24" || small && "x20" || tiny && "x16" || mini && "x12" || "x28";
+		const getIconSize = () => sizeProp && iconSizes[sizeProp] || large && "x28" || medium && "x24" || small && "x20" || tiny && "x16" || mini && "x12" || "x28";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
-			is: "button",
-			type: "button",
+			is,
+			...is === "a" ? {
+				rel: external ? "noopener noreferrer" : void 0,
+				target: external ? "_blank" : void 0
+			} : { type: "button" },
 			"rcx-button": true,
 			"rcx-button--icon": true,
 			"rcx-button--square": true,
@@ -2382,6 +2750,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 			...getSizeClass(),
 			"rcx-button--icon-pressed": pressed,
 			"rcx-button--with-badge": Boolean(badge),
+			color,
 			...props,
 			children: [
 				(0, react.isValidElement)(icon) ? icon : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
@@ -2389,7 +2758,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 					size: getIconSize()
 				}),
 				Boolean(badge) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "rcx-button__badge",
+					className: `rcx-button__badge rcx-button__badge--${badgePosition}`,
 					"aria-hidden": "true",
 					children: badge
 				}),
@@ -2455,7 +2824,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 				closeable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: composeClassNames("rcx-banner__close-button")({ inline }),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-						small: true,
+						size: "small",
 						onClick: handleCloseButtonClick,
 						icon: "cross"
 					})
@@ -2481,8 +2850,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 		...props,
 		children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			name: icon,
-			size: "x16",
-			marginInlineEnd: 8
+			size: "x16"
 		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
 	});
 	//#endregion
@@ -2525,6 +2893,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 			className: [
 				"rcx-button-group",
 				stretch && "rcx-button-group--stretch",
+				stretch === "equal" && "rcx-button-group--stretch-equal",
 				vertical && "rcx-button-group--vertical",
 				align && `rcx-button-group--align-${align}`,
 				small && "rcx-button-group--small",
@@ -2623,7 +2992,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Label/LabelInfo.tsx
 	var LabelInfo = ({ title, id, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
 		is: "span",
-		marginInline: 2,
+		marginInline: "x4",
 		"rcx-label__info": true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			hidden: true,
@@ -2684,17 +3053,40 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	Grid.Item = GridItem;
 	//#endregion
+	//#region src/components/CardGrid/CardGridItem.tsx
+	/**
+	* A `CardGrid` cell with its own column spans, for grids whose cards are not all the same width.
+	*/
+	var CardGridItem = ({ children, xs, sm, md, lg, xl }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridItem, {
+		className: "rcx-card-grid__item",
+		xs,
+		sm,
+		md,
+		lg,
+		xl,
+		children
+	});
+	//#endregion
 	//#region src/components/CardGrid/CardGrid.tsx
-	var CardGrid = ({ children, breakpoints, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid, {
-		"rcx-card-grid": true,
-		margin: -8,
-		...props,
-		children: react.Children.map(children, (child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridItem, {
-			"rcx-card-grid__item": true,
-			padding: 8,
-			...breakpoints,
-			children: child
-		}))
+	var CardGrid = ({ children, breakpoints, minRowHeight }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+		"rcx-grid__wrapper": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+			"rcx-grid": true,
+			className: ["rcx-card-grid", minRowHeight !== void 0 && _rocket_chat_css_in_js.css`
+						& > .rcx-card-grid__item {
+							min-height: ${minRowHeight}px;
+						}
+					`],
+			children: react.Children.map(children, (child) => {
+				if (child === null) return null;
+				if ((0, react.isValidElement)(child) && child.type === CardGridItem) return child;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridItem, {
+					className: "rcx-card-grid__item",
+					...breakpoints,
+					children: child
+				});
+			})
+		})
 	});
 	//#endregion
 	//#region src/components/CardGroup/CardGroup.tsx
@@ -2737,8 +3129,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 				"rcx-code-snippet__codebox": true,
 				children
 			}), onClick && children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				small: true,
-				primary: true,
+				size: "small",
+				variant: "primary",
 				onClick,
 				disabled: buttonDisabled,
 				children: buttonText
@@ -2750,15 +3142,15 @@ if (process.env.NODE_ENV !== "production") (function() {
 	/**
 	* The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
 	*/
-	function Contextualbar({ width, position, backgroundColor = "room", ...props }) {
+	function Contextualbar({ stretch, position, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			"rcx-vertical-bar": true,
-			backgroundColor,
+			backgroundColor: "room",
 			color: "default",
 			display: "flex",
 			flexDirection: "column",
 			flexShrink: 0,
-			width,
+			width: stretch ? "100%" : void 0,
 			borderInlineStartWidth: "default",
 			borderInlineStartColor: "extra-light",
 			borderInlineStartStyle: "solid",
@@ -2775,8 +3167,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Contextualbar/ContextualbarAction.tsx
 	var ContextualbarAction = ({ name, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
 		...props,
-		small: true,
-		flexShrink: 0,
+		size: "small",
 		icon: name
 	});
 	var ContextualbarAction_default = (0, react.memo)(ContextualbarAction);
@@ -2790,10 +3181,11 @@ if (process.env.NODE_ENV !== "production") (function() {
 	var ContextualbarButton_default = (0, react.memo)(ContextualbarButton);
 	//#endregion
 	//#region src/components/Contextualbar/ContextualbarContent.tsx
-	function ContextualbarContent(props) {
+	function ContextualbarContent({ flush, spaced, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			"rcx-vertical-bar__content": true,
-			paddingInline: 24,
+			paddingInline: flush ? 0 : 24,
+			paddingBlock: spaced ? 12 : void 0,
 			display: "flex",
 			flexDirection: "column",
 			overflowY: "hidden",
@@ -2811,17 +3203,20 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/States/StatesIcon.tsx
-	var StatesIcon = ({ variation, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+	var StatesIcon = ({ variation, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		...props,
-		"rcx-states__icon": true,
-		className: variation && `rcx-states__icon--${variation}`,
+		className: [
+			"rcx-states__icon",
+			variation && `rcx-states__icon--${variation}`,
+			className
+		].filter(Boolean).join(" "),
 		size: "x32"
 	});
 	//#endregion
 	//#region src/components/States/StatesAction.tsx
-	var StatesAction = ({ primary = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+	var StatesAction = ({ primary = true, variant = primary ? "primary" : void 0, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		...props,
-		primary
+		variant
 	});
 	//#endregion
 	//#region src/components/States/StatesActions.tsx
@@ -2882,13 +3277,18 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Contextualbar/ContextualbarEmptyContent.tsx
 	function ContextualbarEmptyContent({ icon = "magnifier", title = "Nothing Found", subtitle, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextualbarContent_default, {
-			justifyContent: "center",
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(States, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatesIcon, { name: icon }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatesTitle, { children: title }),
-				subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatesSubtitle, { children: subtitle })
-			] })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "center",
+				flexGrow: 1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(States, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatesIcon, { name: icon }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatesTitle, { children: title }),
+					subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatesSubtitle, { children: subtitle })
+				] })
+			})
 		});
 	}
 	var ContextualbarEmptyContent_default = (0, react.memo)(ContextualbarEmptyContent);
@@ -2923,8 +3323,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 			marginInline: -4,
 			paddingInline: 4,
 			className: _rocket_chat_css_in_js.css`
-        gap: 8px;
-      `,
+				gap: 8px;
+			`,
 			children
 		})
 	});
@@ -2933,7 +3333,6 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Contextualbar/ContextualbarIcon.tsx
 	var ContextualbarIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		...props,
-		paddingInline: 2,
 		size: "x20"
 	});
 	var ContextualbarIcon_default = (0, react.memo)(ContextualbarIcon);
@@ -2958,12 +3357,14 @@ if (process.env.NODE_ENV !== "production") (function() {
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextualbarHeader_default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { width: "100%" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
 			padding: 24,
+			display: "flex",
+			flexDirection: "column",
+			gap: 4,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-				marginBlockEnd: 4,
 				width: "32px",
 				height: "32px",
 				variant: "rect"
-			}), Array(5).fill(5).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {}, index))]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, { children: Array(5).fill(5).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {}, index)) })]
 		})]
 	});
 	var ContextualbarSkeleton_default = (0, react.memo)(ContextualbarSkeleton);
@@ -2981,21 +3382,11 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#endregion
 	//#region src/components/Dropdown/DropdownDesktop.tsx
 	function DropdownDesktop({ children, style, ...props }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverSurface, {
 			style,
-			elevation: "2",
-			paddingInline: "0",
-			paddingBlock: "0",
-			display: "flex",
-			flexDirection: "column",
-			overflow: "auto",
 			"data-testid": "dropdown",
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-				flexShrink: 1,
-				paddingBlock: 12,
-				children: style?.visibility === "hidden" ? null : children
-			})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, { children: style?.visibility === "hidden" ? null : children })
 		});
 	}
 	//#endregion
@@ -3010,26 +3401,21 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/Dropdown/DropdownMobile.tsx
+	var bottomSheet = {
+		position: "fixed",
+		bottom: 0,
+		left: 0,
+		zIndex: 2,
+		width: "100vw"
+	};
 	function DropdownMobile({ children, ...props }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
-			elevation: "2",
-			paddingInline: "0",
-			paddingBlock: "0",
-			width: "100vw",
-			maxHeight: "80%",
-			position: "fixed",
-			display: "flex",
-			flexDirection: "column",
-			overflow: "auto",
-			style: {
-				bottom: 0,
-				left: 0
-			},
-			zIndex: 2,
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverSurface, {
+			flush: true,
+			maxHeight: "most-of-screen",
+			style: bottomSheet,
 			"data-testid": "dropdown",
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-				flexShrink: 1,
 				paddingBlock: 16,
 				children
 			})
@@ -3130,10 +3516,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 	};
 	//#endregion
 	//#region src/components/Field/FieldLabel.tsx
-	function FieldLabel(props) {
+	function FieldLabel({ className, ...props }) {
 		const component = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-			"rcx-field__label": true,
-			...props
+			...props,
+			className: prependClassName(className, "rcx-field__label")
 		});
 		if (process.env.NODE_ENV === "development") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithErrorWrapper, {
 			context: FieldContext,
@@ -3173,10 +3559,11 @@ if (process.env.NODE_ENV !== "production") (function() {
 	};
 	//#endregion
 	//#region src/components/Field/FieldRow.tsx
-	var FieldRow = (props) => {
+	var FieldRow = ({ justify, ...props }) => {
 		const component = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			is: "span",
 			"rcx-field__row": true,
+			"rcx-field__row--justify-end": justify === "end",
 			...props
 		});
 		if (process.env.NODE_ENV === "development") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithErrorWrapper, {
@@ -3247,61 +3634,82 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/FramedIcon/FramedIcon.tsx
-	var FramedIcon = ({ info, success, warning, danger, neutral, icon, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+	var FramedIcon = ({ info, success, warning, danger, neutral, icon, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		...props,
-		"rcx-framed-icon": true,
-		"rcx-framed-icon--info": info,
-		"rcx-framed-icon--success": success,
-		"rcx-framed-icon--warning": warning,
-		"rcx-framed-icon--danger": danger,
-		"rcx-framed-icon--neutral": neutral || !info && !success && !warning && !danger,
+		className: [
+			className,
+			"rcx-framed-icon",
+			info && "rcx-framed-icon--info",
+			success && "rcx-framed-icon--success",
+			warning && "rcx-framed-icon--warning",
+			danger && "rcx-framed-icon--danger",
+			(neutral || !info && !success && !warning && !danger) && "rcx-framed-icon--neutral"
+		].filter(Boolean).join(" "),
 		name: icon,
 		size: 20
 	});
 	//#endregion
-	//#region src/components/Menu/MenuOption.tsx
-	function MenuOption({ is: Tag = "li", id, children, focus, selected, className, title, disabled, variant, onClick, ...props }) {
-		return /* @__PURE__ */ (0, react.createElement)(Tag, {
+	//#region src/components/Listbox/Listbox.tsx
+	/**
+	* A popup list of `ListboxOption`s that a combobox controls: focus stays on the combobox, which marks the active option with `aria-activedescendant`.
+	*/
+	function Listbox({ children, ...props }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+			is: "ul",
+			role: "listbox",
+			margin: 0,
+			padding: 0,
 			...props,
-			key: id,
+			children
+		});
+	}
+	//#endregion
+	//#region src/components/Listbox/ListboxOption.tsx
+	var keepFocusOnCombobox = (event) => event.preventDefault();
+	/**
+	* An option of a `Listbox`. It never takes focus, so pressing it leaves the focus on the combobox.
+	*/
+	function ListboxOption({ id, children, selected, active, focusVisible, disabled, onActivate, onSelect }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, {
 			id,
-			"aria-selected": !!selected,
-			"aria-disabled": !!disabled,
-			title,
-			onClick: (e) => {
-				if (disabled) {
-					prevent(e);
-					return;
-				}
-				onClick?.(e);
+			role: "option",
+			label: children,
+			selected,
+			focus: active,
+			focusVisible: !!focusVisible && !!active,
+			disabled,
+			onPointerDown: keepFocusOnCombobox,
+			onPointerMove: () => {
+				if (!disabled && (!active || focusVisible)) onActivate?.();
 			},
-			className: [
-				"rcx-option",
-				className,
-				focus && "rcx-option--focus",
-				selected && "rcx-option--selected",
-				disabled && "rcx-option--disabled",
-				variant && `rcx-option--${variant}`
-			].filter(Boolean).join(" ")
-		}, children);
+			onClick: () => onSelect?.()
+		});
 	}
-	var MenuOption_default = (0, react.memo)(MenuOption);
+	var ListboxOption_default = (0, react.memo)(ListboxOption);
 	//#endregion
 	//#region src/components/Menu/MenuItem.tsx
+	/**
+	* Renders a menu item as an `Item` row, so its content is composed from `Item` parts.
+	*/
 	function MenuItem$1({ item, state }) {
 		const ref = (0, react.useRef)(null);
+		const { isFocusVisible } = (0, react_aria.useFocusVisible)();
 		const { menuItemProps: { onPointerUp, ...menuItemProps }, isFocused, isDisabled } = (0, react_aria.useMenuItem)({ key: item.key }, state, ref);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuOption_default, {
+		const description = item.value?.description;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
 			...(0, react_aria.mergeProps)(menuItemProps, { onPointerDown: onPointerUp }),
 			ref,
-			focus: isFocused,
-			disabled: isDisabled,
 			is: "label",
-			variant: item.value?.variant,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "rcx-option__wrapper",
-				children: item.rendered
-			}), item.value && item.value.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionDescriptionBlock, { children: item.value.description })]
+			inset: "md",
+			focused: isFocused,
+			focusVisible: isFocused && isFocusVisible,
+			disabled: isDisabled,
+			variant: item.value?.variant === "danger" ? "danger" : void 0,
+			className: description ? "rcx-menu-item--with-description" : void 0,
+			children: [typeof item.rendered === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemTitle, { children: item.rendered }) }) : item.rendered, description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rcx-menu-item__description",
+				children: description
+			})]
 		});
 	}
 	//#endregion
@@ -3369,11 +3777,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 			popoverRef,
 			...props,
 			portalContainer: isSubmenu ? groupContainer?.current ?? void 0 : void 0,
-			children: [isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMobile, { children }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownDesktop, {
-				maxHeight: "80vh",
-				overflowY: "auto",
+			children: [isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMobile, { children }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 				maxWidth,
-				children
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownDesktop, {
+					maxHeight: "most-of-screen",
+					children
+				})
 			}), !isSubmenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				ref: containerRef,
 				style: { display: "contents" }
@@ -3431,12 +3840,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 			}
 			submenuTriggerProps.onKeyDown?.(event);
 		};
+		const { isFocusVisible } = (0, react_aria.useFocusVisible)();
 		const { menuItemProps, isFocused, isDisabled } = (0, react_aria.useMenuItem)({
 			...submenuTriggerProps,
 			onKeyDown: onTriggerKeyDown,
 			key: item.key
 		}, state, triggerRef);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuOption_default, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
 			...(0, react_aria.mergeProps)(menuItemProps, {
 				"id": submenuTriggerProps.id,
 				"aria-haspopup": submenuTriggerProps["aria-haspopup"],
@@ -3444,20 +3854,16 @@ if (process.env.NODE_ENV !== "production") (function() {
 				"aria-controls": submenuTriggerProps["aria-controls"]
 			}),
 			ref: triggerRef,
-			focus: isFocused,
-			disabled: isDisabled,
 			is: "div",
-			variant: item.value?.variant,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "rcx-option__wrapper",
-				children: [item.rendered, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "rcx-option__input",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-						name: "chevron-left",
-						size: "x16"
-					})
-				})]
-			})
+			inset: "md",
+			focused: isFocused,
+			focusVisible: isFocused && isFocusVisible,
+			disabled: isDisabled,
+			variant: item.value?.variant === "danger" ? "danger" : void 0,
+			children: [item.rendered, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemIcon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				name: "chevron-left",
+				size: "x16"
+			}) })]
 		}), submenuTriggerState.isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPopover, {
 			...popoverProps,
 			state: submenuTriggerState,
@@ -3480,15 +3886,17 @@ if (process.env.NODE_ENV !== "production") (function() {
 			"heading": section.rendered,
 			"aria-label": section["aria-label"]
 		});
-		const { separatorProps } = (0, react_aria.useSeparator)({ elementType: "span" });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [section.key !== state.collection.getFirstKey() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, { ...separatorProps }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		const { separatorProps } = (0, react_aria.useSeparator)({ elementType: "div" });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [section.key !== state.collection.getFirstKey() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemDivider, { ...separatorProps }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			...itemProps,
-			children: [section.rendered && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionTitle, {
-				...headingProps,
-				children: section.rendered
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+			children: [section.rendered && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroupHeader, {
+				inset: "md",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroupTitle, {
+					...headingProps,
+					children: section.rendered
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				...groupProps,
-				padding: "0",
 				children: [...section.childNodes].map((node) => node.hasChildNodes ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSubmenu, {
 					item: node,
 					state,
@@ -3564,14 +3972,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 			"aria-label": props["aria-label"] || title,
 			preventFocusOnPress: true
 		}, ref);
-		const { large, medium, tiny, mini } = props;
-		const sizes = {
-			large,
-			medium,
-			tiny,
-			mini
-		};
-		const defaultSmall = !large && !medium && !tiny && !mini;
+		const { size, large, medium, tiny, mini } = props;
+		const triggerSize = size || mini && "mini" || tiny && "tiny" || medium && "medium" || large && "large" || "small";
 		const { document: ownerDocument } = useOwnerDocument();
 		const popover = state.isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPopover, {
 			state,
@@ -3598,8 +4000,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 			className,
 			title,
 			pressed: pressed || state.isOpen,
-			small: defaultSmall,
-			...sizes
+			size: triggerSize
 		}), detached ? (0, react_dom.createPortal)(popover, ownerDocument?.body || document.body) : popover] });
 	};
 	//#endregion
@@ -3787,7 +4188,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Message/MessageEmojiBase.tsx
 	var MessageEmojiBase = ({ name, image, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: `${className || ""} ${name}`,
-		style: image && image.length ? { backgroundImage: image } : void 0,
+		style: image?.length ? { backgroundImage: image } : void 0,
 		...props
 	});
 	//#endregion
@@ -3872,11 +4273,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 	};
 	//#endregion
 	//#region src/components/Message/MessageGenericPreview/MessageGenericPreviewIcon.tsx
-	var MessageGenericPreviewIcon = ({ name = "attachment-file", size = 32, color = "default", type = "file" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	var MessageGenericPreviewIcon = ({ name = "attachment-file", size = 32, type = "file" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "rcx-message-generic-preview__icon",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			name,
-			color,
 			size
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "rcx-message-generic-preview__icon-title",
@@ -3952,11 +4352,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx
-	var MessageMetricsFollowing = ({ name, badge, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-		position: "relative",
-		overflow: "visible",
+	var MessageMetricsFollowing = ({ name, badge, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
 		...props,
-		small: true,
+		className: ["rcx-message-metrics__item__follow", className].filter(Boolean).join(" "),
+		size: "small",
 		icon: name,
 		children: badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "rcx-message-metrics__item__follow-badge",
@@ -3966,9 +4365,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#endregion
 	//#region src/components/Message/MessageMetrics/MessageMetricsReply.tsx
 	var MessageMetricsReply = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageMetricsItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-		primary: true,
-		...props,
-		small: true
+		variant: "primary",
+		size: "small",
+		...props
 	}) });
 	//#endregion
 	//#region src/components/Message/MessageName.tsx
@@ -4039,11 +4438,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 	/**
 	* Used for mentions
 	*/
-	var Tag = ({ large, medium, className, disabled, onClick, variant, children, icon, href, ...props }) => {
+	var Tag = ({ large, medium, pill, className, disabled, onClick, variant, children, icon, href, ...props }) => {
 		const modifiers = [
 			variant,
 			medium && "medium",
 			large && "large",
+			pill && "pill",
 			disabled && "disabled",
 			onClick && "clickable",
 			href && "clickable"
@@ -4161,7 +4561,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Message/MessageToolbar/MessageToolbarItem.tsx
 	function MessageToolbarItem(props) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-			small: true,
+			size: "small",
 			...props
 		});
 	}
@@ -4266,8 +4666,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 	};
 	//#endregion
 	//#region src/components/Modal/ModalBackdrop.tsx
-	var ModalBackdrop = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+	var ModalBackdrop = ({ transparent, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 		"rcx-modal__backdrop": true,
+		backgroundColor: transparent ? "transparent" : void 0,
 		...props
 	});
 	//#endregion
@@ -4275,12 +4676,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 	var ModalClose = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
 		"aria-label": "Close",
 		...props,
-		small: true,
+		size: "small",
 		icon: "cross"
 	});
 	//#endregion
 	//#region src/components/Modal/ModalContent.tsx
-	var ModalContent = ({ children, onScrollContent, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Scrollable, {
+	var ModalContent = ({ children, onScrollContent, fill, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Scrollable, {
 		vertical: true,
 		onScrollContent,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
@@ -4288,6 +4689,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 				"rcx-modal__content-wrapper": true,
 				marginInline: 24,
+				height: fill ? "100%" : void 0,
+				paddingBlockEnd: fill ? 16 : void 0,
 				...props,
 				children
 			})
@@ -4295,8 +4698,8 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Modal/ModalFooter.tsx
-	var ModalFooter = ({ children, justifyContent = "end" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-		justifyContent,
+	var ModalFooter = ({ children, justify = "end" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+		justifyContent: justify,
 		"rcx-modal__footer": true,
 		children
 	});
@@ -4345,20 +4748,28 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Modal/ModalIcon.tsx
-	var ModalIcon = ({ size = "x20", name, alignItems = "center", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+	var variantColors = {
+		danger: "danger",
+		warning: "status-font-on-warning",
+		info: "info",
+		success: "status-font-on-success"
+	};
+	var ModalIcon = ({ size = "x20", name, variant, align = "center", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+		paddingBlock: 4,
+		color: variant && variantColors[variant],
 		...props,
 		display: "flex",
-		alignItems,
+		alignItems: align,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			marginBlock: 4,
 			name,
 			size
 		})
 	});
 	//#endregion
 	//#region src/components/Modal/ModalTagline.tsx
-	var ModalTagline = ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+	var ModalTagline = ({ subtle, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 		"rcx-modal__tagline": true,
+		color: subtle ? "annotation" : void 0,
 		...props,
 		children
 	});
@@ -4377,30 +4788,14 @@ if (process.env.NODE_ENV !== "production") (function() {
 		children
 	});
 	//#endregion
-	//#region src/components/Select/SelectAddon.tsx
-	function SelectAddon(props) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-			is: "div",
-			"rcx-select__addon": true,
-			...props
-		});
-	}
-	//#endregion
-	//#region src/components/Select/SelectFocus.tsx
-	function SelectFocus(props) {
+	//#region src/components/MultiSelect/MultiSelectAnchor.tsx
+	function MultiSelectAnchor(props) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			fontScale: "p2m",
 			color: "hint",
 			"rcx-select__focus": true,
 			is: "button",
 			type: "button",
-			...props
-		});
-	}
-	//#endregion
-	//#region src/components/MultiSelect/MultiSelectAnchor.tsx
-	function MultiSelectAnchor(props) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectFocus, {
 			"rcx-input-box--undecorated": true,
 			order: 1,
 			...props
@@ -4412,6 +4807,15 @@ if (process.env.NODE_ENV !== "production") (function() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip_default, { ...props });
 	});
 	//#endregion
+	//#region src/components/Select/SelectAddon.tsx
+	function SelectAddon(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+			is: "div",
+			"rcx-select__addon": true,
+			...props
+		});
+	}
+	//#endregion
 	//#region src/components/MultiSelect/MultiSelect.tsx
 	/**
 	* An input for selection of options.
@@ -4474,55 +4878,53 @@ if (process.env.NODE_ENV !== "production") (function() {
 						inline: "x4",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 							is: "div",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
 								is: "div",
 								display: "flex",
 								alignItems: "center",
 								flexWrap: "wrap",
-								margin: "-x8",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Margins, {
-									all: "x4",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
-										ref: anchorRef,
-										disabled: disabled ?? false,
-										onClick: show,
-										onBlur: hide,
-										onKeyDown: handleKeyDown,
-										onKeyUp: handleKeyUp,
-										role: "combobox",
-										"aria-expanded": visible === AnimatedVisibility.VISIBLE,
-										"aria-haspopup": "listbox",
-										"aria-controls": listboxId,
-										id,
-										name,
-										"aria-label": ariaLabel,
-										"aria-labelledby": ariaLabelledBy,
-										"aria-describedby": ariaDescribedBy,
-										"aria-invalid": ariaInvalid,
-										"aria-required": ariaRequired,
-										children: internalValue.length === 0 ? placeholder : null
-									}), internalValue.map((value) => {
-										const currentOption = options.find(([val]) => val === value);
-										return RenderSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderSelected, {
-											value,
-											label: getLabel(currentOption),
-											onMouseDown: (e) => {
-												prevent(e);
-												internalChanged(currentOption);
-												removeFocusClass();
-											},
-											children: getLabel(currentOption)
-										}, value) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedOptions, {
-											tabIndex: -1,
-											onMouseDown: (e) => {
-												prevent(e);
-												internalChanged(currentOption);
-												removeFocusClass();
-											},
-											children: getLabel(currentOption)
-										}, String(value));
-									})]
-								})
+								margin: "-x4",
+								gap: 4,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
+									ref: anchorRef,
+									disabled: disabled ?? false,
+									onClick: show,
+									onBlur: hide,
+									onKeyDown: handleKeyDown,
+									onKeyUp: handleKeyUp,
+									role: "combobox",
+									"aria-expanded": visible === AnimatedVisibility.VISIBLE,
+									"aria-haspopup": "listbox",
+									"aria-controls": listboxId,
+									id,
+									name,
+									"aria-label": ariaLabel,
+									"aria-labelledby": ariaLabelledBy,
+									"aria-describedby": ariaDescribedBy,
+									"aria-invalid": ariaInvalid,
+									"aria-required": ariaRequired,
+									children: internalValue.length === 0 ? placeholder : null
+								}), internalValue.map((value) => {
+									const currentOption = options.find(([val]) => val === value);
+									return RenderSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderSelected, {
+										value,
+										label: getLabel(currentOption),
+										onMouseDown: (e) => {
+											prevent(e);
+											internalChanged(currentOption);
+											removeFocusClass();
+										},
+										children: getLabel(currentOption)
+									}, value) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedOptions, {
+										tabIndex: -1,
+										onMouseDown: (e) => {
+											prevent(e);
+											internalChanged(currentOption);
+											removeFocusClass();
+										},
+										children: getLabel(currentOption)
+									}, String(value));
+								})]
 							})
 						}) })
 					})
@@ -4530,13 +4932,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexItem, {
 					grow: 0,
 					shrink: 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Margins, {
-						inline: "x4",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAddon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-							name: visible === AnimatedVisibility.VISIBLE ? "chevron-up" : addonIcon || "chevron-down",
-							size: "x20"
-						}) })
-					})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAddon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: visible === AnimatedVisibility.VISIBLE ? "chevron-up" : addonIcon || "chevron-down",
+						size: "x20"
+					}) })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PositionAnimated, {
 					visible,
@@ -4566,13 +4965,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 		const { placeholder, filter, setFilter } = (0, react.use)(MultiSelectFilteredContext);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexItem, {
 			grow: 1,
+			order: 1,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
 				placeholder,
 				value: filter,
 				onInput: (e) => setFilter?.(e.currentTarget.value),
 				...props,
-				"rcx-input-box--undecorated": true,
-				order: 1,
+				className: "rcx-input-box--undecorated",
 				autoComplete: "off"
 			})
 		});
@@ -4614,10 +5013,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/NavBar/NavBarItem.tsx
 	function NavBarItem({ children, icon, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-			"rcx-navbar-item": true,
 			icon,
-			small: true,
-			...props
+			size: "small",
+			...props,
+			className: ["rcx-navbar-item", props.className].filter(Boolean).join(" ")
 		}) : patchChildren(children, (childProps) => ({
 			className: appendClassName(childProps.className, "rcx-navbar-item"),
 			...props
@@ -4625,10 +5024,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/NavBar/NavBarDivider.tsx
-	var NavBarDivider = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {
-		"rcx-navbar-divider": true,
+	var NavBarDivider = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {
 		vertical: true,
-		...props
+		...props,
+		className: ["rcx-navbar-divider", className].filter(Boolean).join(" ")
 	});
 	//#endregion
 	//#region src/components/NavBar/NavBarSection.tsx
@@ -4654,14 +5053,6 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#endregion
 	//#region src/components/OptionsPaginated/OptionsPaginated.tsx
 	var Empty = (0, react.memo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, { label: "Empty" }));
-	(0, react.memo)(function CheckOption({ selected, children: label, ...options }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, {
-			label,
-			selected,
-			...options,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckBox, { checked: selected })
-		});
-	});
 	/**
 	* An input for selection of options.
 	*/
@@ -4688,36 +5079,33 @@ if (process.env.NODE_ENV !== "production") (function() {
 			"rcx-options": true,
 			...props,
 			ref,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
-				padding: 0,
-				paddingBlock: "x12",
-				paddingInline: 0,
-				elevation: "2",
-				children: !options.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyComponent, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_virtuoso.Virtuoso, {
-					endReached,
-					style: { height: "144px" },
-					totalCount: options.length,
-					data: options,
-					itemContent: (index, data) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionsComponentWithData, {
-						index,
-						data
-					})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverSurface, { children: !options.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyComponent, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_virtuoso.Virtuoso, {
+				endReached,
+				style: { height: "144px" },
+				totalCount: options.length,
+				data: options,
+				itemContent: (index, data) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionsComponentWithData, {
+					index,
+					data
 				})
-			})
+			}) })
 		});
 	}
 	//#endregion
-	//#region src/components/PaginatedSelect/PaginatedSelectWrapper.tsx
-	function PaginatedSelectWrapper(props) {
+	//#region src/components/Select/SelectFocus.tsx
+	function SelectFocus(props) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-			is: "div",
-			"rcx-select__wrapper": true,
+			fontScale: "p2m",
+			color: "hint",
+			"rcx-select__focus": true,
+			is: "button",
+			type: "button",
 			...props
 		});
 	}
 	//#endregion
 	//#region src/components/PaginatedSelect/PaginatedSelect.tsx
-	var PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, error, disabled, options = [], anchor: Anchor = SelectFocus, onChange = () => {}, placeholder, renderOptions: _Options = OptionsPaginated, renderItem = Option_default, endReached, ...props }) => {
+	var PaginatedSelect = ({ value, withTitle, filter, "setFilter": _setFilter, error, disabled, options = [], "anchor": Anchor = SelectFocus, onChange = () => {}, placeholder, "renderOptions": _Options = OptionsPaginated, renderItem = Option_default, endReached, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }) => {
 		const [internalValue, setInternalValue] = (0, react.useState)(value);
 		const currentValue = value !== void 0 ? value : internalValue;
 		const option = options.find((option) => option?.value === currentValue);
@@ -4746,7 +5134,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 			onClick: handleClick,
 			className: (0, react.useMemo)(() => [error && "invalid", disabled && "disabled"], [error, disabled]),
 			...props,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PaginatedSelectWrapper, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
+				is: "div",
+				"rcx-select__wrapper": true,
 				display: "flex",
 				marginInline: "neg-x4",
 				"rcx-select__wrapper--hidden": !!visibleText,
@@ -4766,16 +5156,17 @@ if (process.env.NODE_ENV !== "production") (function() {
 						filter,
 						ref,
 						"aria-haspopup": "listbox",
+						id,
+						"aria-labelledby": ariaLabelledBy,
+						"aria-describedby": ariaDescribedBy,
+						"aria-invalid": ariaInvalid,
 						onClick: show,
 						onBlur: hide
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Margins, {
-						inline: "x4",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAddon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-							name: visible === AnimatedVisibility.VISIBLE ? "chevron-up" : "chevron-down",
-							size: "x20"
-						}) })
-					})
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAddon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: visible === AnimatedVisibility.VISIBLE ? "chevron-up" : "chevron-down",
+						size: "x20"
+					}) })
 				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PositionAnimated, {
 				visible,
@@ -4798,16 +5189,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/PaginatedSelect/PaginatedSelectFiltered.tsx
 	var PaginatedSelectFiltered = ({ filter, setFilter, options, placeholder, ...props }) => {
 		const anchor = (0, react.useMemo)(() => ({ filter, onChange: _onChange, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
-			marginInline: 4,
-			flexGrow: 1,
-			className: "rcx-select__focus",
+			className: "rcx-select__focus rcx-select__filter rcx-input-box--undecorated",
 			placeholder,
 			value: filter,
 			onChange: (e) => {
 				setFilter(e.currentTarget.value);
 			},
-			...props,
-			"rcx-input-box--undecorated": true
+			...props
 		}), [placeholder, setFilter]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginatedSelect, {
 			placeholder: void 0,
@@ -4819,7 +5207,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	};
 	//#endregion
 	//#region src/components/PaginatedSelect/PaginatedMultiSelect.tsx
-	var PaginatedMultiSelect = ({ withTitle, value, filter, options = [], error, disabled, anchor: Anchor = SelectFocus, onChange = () => {}, placeholder, renderOptions: OptionsComponent = OptionsPaginated, renderItem = Option_default, endReached, ...props }) => {
+	var PaginatedMultiSelect = ({ withTitle, value, filter, options = [], error, disabled, "anchor": Anchor = SelectFocus, onChange = () => {}, placeholder, "renderOptions": OptionsComponent = OptionsPaginated, renderItem = Option_default, endReached, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }) => {
 		const [internalValue, setInternalValue] = (0, react.useState)(value || []);
 		const currentValue = value !== void 0 ? value : internalValue;
 		const selectedOptions = options.filter((option) => currentValue.some((opt) => opt.value === option.value));
@@ -4867,37 +5255,38 @@ if (process.env.NODE_ENV !== "production") (function() {
 						inline: "x4",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 							is: "div",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
 								is: "div",
 								display: "flex",
 								alignItems: "center",
 								flexWrap: "wrap",
-								margin: "-x8",
+								margin: "neg-x4",
+								gap: 8,
 								role: "listbox",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Margins, {
-									all: "x4",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
-										disabled,
-										ref,
-										"aria-haspopup": "listbox",
-										onClick: show,
-										onBlur: hide,
-										order: 1,
-										"rcx-input-box--undecorated": true,
-										children: placeholder ?? null
-									}), selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip_default, {
-										maxWidth: "x150",
-										withTruncatedText: true,
-										title: withTitle ? label : void 0,
-										tabIndex: -1,
-										role: "option",
-										onClick: (e) => {
-											prevent(e);
-											removeOption(value);
-										},
-										children: label
-									}, value ?? index))]
-								})
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
+									disabled,
+									ref,
+									"aria-haspopup": "listbox",
+									id,
+									"aria-labelledby": ariaLabelledBy,
+									"aria-describedby": ariaDescribedBy,
+									"aria-invalid": ariaInvalid,
+									onClick: show,
+									onBlur: hide,
+									order: 1,
+									"rcx-input-box--undecorated": true,
+									children: placeholder ?? null
+								}), selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip_default, {
+									className: "rcx-select__chip",
+									title: withTitle ? label : void 0,
+									tabIndex: -1,
+									role: "option",
+									onClick: (e) => {
+										prevent(e);
+										removeOption(value);
+									},
+									children: label
+								}, value ?? index))]
 							})
 						}) })
 					})
@@ -4905,13 +5294,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexItem, {
 					grow: 0,
 					shrink: 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Margins, {
-						inline: "x4",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAddon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-							name: visible === AnimatedVisibility.VISIBLE ? "cross" : "chevron-down",
-							size: "x20"
-						}) })
-					})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAddon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: visible === AnimatedVisibility.VISIBLE ? "cross" : "chevron-down",
+						size: "x20"
+					}) })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PositionAnimated, {
 					visible,
@@ -4937,14 +5323,14 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#endregion
 	//#region src/components/PaginatedSelect/PaginatedMultiSelectFiltered.tsx
 	var PaginatedMultiSelectFiltered = ({ filter, setFilter, options, placeholder, ...props }) => {
-		const anchor = (0, _rocket_chat_fuselage_hooks.useStableCallback)(({ children: _children, filter, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexItem, {
+		const anchor = (0, _rocket_chat_fuselage_hooks.useStableCallback)(({ children: _children, filter, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexItem, {
 			grow: 1,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
 				placeholder,
 				value: filter,
 				onInput: (e) => setFilter?.(e.currentTarget.value),
 				...props,
-				"rcx-input-box--undecorated": true
+				className: ["rcx-input-box--undecorated", className].filter(Boolean).join(" ")
 			})
 		}));
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginatedMultiSelect, {
@@ -5741,11 +6127,6 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/Select/SelectLegacy.tsx
-	var Wrapper = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-		is: "div",
-		"rcx-select__wrapper": true,
-		...props
-	});
 	var useDidUpdate = (func, deps) => {
 		const didMount = (0, react.useRef)(false);
 		const fn = (0, _rocket_chat_fuselage_hooks.useStableCallback)(func);
@@ -5754,7 +6135,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 			didMount.current = true;
 		}, deps || []);
 	};
-	function SelectLegacy({ ref, value, filter, error, disabled, options = [], anchor: Anchor = SelectFocus, onChange = () => {}, getValue = ([value] = ["", ""]) => value, getLabel = ([, label] = ["", ""]) => label, placeholder = "", renderItem, renderSelected: RenderSelected, renderOptions: _Options = Options, addonIcon, customEmpty, ...props }) {
+	function SelectLegacy({ ref, value, filter, error, disabled, options = [], "anchor": Anchor = SelectFocus, onChange = () => {}, getValue = ([value] = ["", ""]) => value, getLabel = ([, label] = ["", ""]) => label, placeholder = "", renderItem, "renderSelected": RenderSelected, "renderOptions": _Options = Options, addonIcon, customEmpty, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }) {
 		const [internalValue, setInternalValue] = (0, react.useState)(value || "");
 		const internalChangedByKeyboard = (0, _rocket_chat_fuselage_hooks.useStableCallback)(([value]) => {
 			setInternalValue(value);
@@ -5810,7 +6191,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 			onClick: handleClick,
 			className: (0, react.useMemo)(() => [error && "invalid", disabled && "disabled"], [error, disabled]),
 			...props,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
+				is: "div",
+				"rcx-select__wrapper": true,
 				display: "flex",
 				marginInline: "neg-x4",
 				"rcx-select__wrapper--hidden": !!visibleText,
@@ -5831,6 +6214,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 					})),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
 						ref: anchorRef,
+						id,
+						"aria-labelledby": ariaLabelledBy,
+						"aria-describedby": ariaDescribedBy,
+						"aria-invalid": ariaInvalid,
 						disabled: disabled ?? false,
 						onClick: show,
 						onBlur: hide,
@@ -5838,13 +6225,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 						onKeyUp: handleKeyUp,
 						children: !value ? option || placeholder : null
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Margins, {
-						inline: "x4",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAddon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-							name: visible === AnimatedVisibility.VISIBLE ? "chevron-up" : addonIcon || "chevron-down",
-							size: "x20"
-						}) })
-					})
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAddon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: visible === AnimatedVisibility.VISIBLE ? "chevron-up" : addonIcon || "chevron-down",
+						size: "x20"
+					}) })
 				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PositionAnimated, {
 				visible,
@@ -5863,162 +6247,299 @@ if (process.env.NODE_ENV !== "production") (function() {
 		});
 	}
 	//#endregion
-	//#region src/components/Select/Listbox.tsx
-	function ListBox(props) {
-		const ref = (0, react.useRef)(null);
-		const { listBoxRef = ref, state } = props;
-		const { listBoxProps } = (0, react_aria.useListBox)(props, state, listBoxRef);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			...listBoxProps,
-			ref: listBoxRef,
-			children: [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBoxSection, {
-				section: item,
-				state
-			}, item.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionAria, {
-				item,
-				state
-			}, item.key))
-		});
-	}
-	function ListBoxSection({ section, state }) {
-		const { itemProps, headingProps, groupProps } = (0, react_aria.useListBoxSection)({
-			"heading": section.rendered,
-			"aria-label": section["aria-label"]
-		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-			...itemProps,
-			className: "pt-2",
-			children: [section.rendered && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				...headingProps,
-				className: "text-xs font-bold uppercase text-gray-500 mx-3",
-				children: section.rendered
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				...groupProps,
-				children: [...section.childNodes].map((node) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionAria, {
-					item: node,
-					state
-				}, node.key))
-			})]
-		}) });
-	}
-	function OptionAria({ item, state }) {
-		const ref = (0, react.useRef)(null);
-		const { optionProps, isDisabled, isSelected, isFocused } = (0, react_aria.useOption)({ key: item.key }, state, ref);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option_default, {
-			ref,
-			disabled: isDisabled,
-			selected: isSelected,
-			focus: isFocused,
-			label: item.rendered,
-			...optionProps,
-			children: item.rendered
-		}, item.key);
-	}
-	//#endregion
-	//#region src/components/Select/SelectTrigger.tsx
-	function SelectTrigger({ ref, small, error, isDisabled, focus, id, ...props }) {
-		const { buttonProps } = (0, react_aria.useButton)(props, ref);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-			...buttonProps,
-			id,
-			animated: true,
-			"rcx-select": true,
-			ref,
-			is: "button",
-			display: "flex",
-			flexDirection: "row",
-			fontScale: "p2",
-			justifyContent: "space-between",
-			"rcx-input-box--small": small,
-			className: [
-				error && "invalid",
-				isDisabled && "disabled",
-				focus && "focus"
-			].filter(Boolean).join(" "),
-			children: props.children
-		});
-	}
+	//#region src/components/Select/useTypeahead.ts
+	var findMatch = (labels, query, start) => {
+		for (let offset = 0; offset < labels.length; offset++) {
+			const index = (start + offset) % labels.length;
+			if (labels[index]?.toLocaleLowerCase().startsWith(query)) return index;
+		}
+		return -1;
+	};
+	/**
+	* Hook that finds the option a user means by typing the start of its label.
+	*
+	* Characters typed within `timeout` of each other build up one query; typing the same character again
+	* cycles through the options that start with it.
+	*
+	* @param timeout - the pause, in milliseconds, after which typing starts a new query
+	* @returns `search`, a stable function that takes the typed character, the option labels and the index of the current option,
+	* and returns the index of the matching option, or -1; `isSearching`, which tells whether a query is still being typed,
+	* so a space can extend it instead of acting on the option; and `reset`, which drops the query once the interaction ends
+	*/
+	var useTypeahead = (timeout = 500) => {
+		const queryRef = (0, react.useRef)("");
+		const lastTypedAtRef = (0, react.useRef)(0);
+		const isSearching = (0, _rocket_chat_fuselage_hooks.useStableCallback)(() => queryRef.current !== "" && Date.now() - lastTypedAtRef.current <= timeout);
+		return {
+			search: (0, _rocket_chat_fuselage_hooks.useStableCallback)((character, labels, current) => {
+				const now = Date.now();
+				if (now - lastTypedAtRef.current > timeout) queryRef.current = "";
+				lastTypedAtRef.current = now;
+				queryRef.current += character.toLocaleLowerCase();
+				const query = queryRef.current;
+				const isRepeatedCharacter = [...query].every((typed) => typed === query[0]);
+				if (query.length > 1 && !isRepeatedCharacter) return findMatch(labels, query, Math.max(current, 0));
+				return findMatch(labels, query[0] ?? "", current + 1);
+			}),
+			isSearching,
+			reset: (0, _rocket_chat_fuselage_hooks.useStableCallback)(() => {
+				queryRef.current = "";
+			})
+		};
+	};
 	//#endregion
-	//#region src/components/Select/SelectAria.tsx
-	function SelectAria({ ref: outerRef, error, placeholder, value, onChange, small, isDisabled: isDisabledProps, disabled, id, ...props }) {
-		const isDisabled = isDisabledProps || disabled;
-		const state = (0, react_stately.useSelectState)({
-			isDisabled,
-			selectedKey: typeof value !== "bigint" ? value : null,
-			onSelectionChange: onChange,
-			...props
+	//#region src/components/Select/Select.tsx
+	var PAGE_SIZE = 10;
+	var isTriggerProp = (name) => name.startsWith("aria-") || name.startsWith("data-") || [
+		"className",
+		"title",
+		"autoFocus",
+		"tabIndex"
+	].includes(name);
+	var pickTriggerProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => isTriggerProp(name)));
+	var isPrintableCharacter = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+	var getLabelText = (element) => Array.from(element?.labels ?? []).map((label) => label.textContent?.trim()).filter(Boolean).join(" ") || void 0;
+	/**
+	* An input for selection of options: a button that opens a listbox of its options, named by a `label` pointing at its `id`
+	* like any other input, or by `aria-label` or `aria-labelledby`.
+	*/
+	function Select({ ref: outerRef, options, value, defaultSelectedKey, onChange, placeholder, error, small, disabled, name, id: idProp, onFocus, onBlur, onKeyDown, ...props }) {
+		const generatedId = (0, react.useId)();
+		const id = idProp ?? generatedId;
+		const listboxId = `${id}-listbox`;
+		const getOptionId = (0, react.useCallback)((index) => `${id}-option-${index}`, [id]);
+		const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultSelectedKey);
+		const selectedKey = value !== void 0 ? value : uncontrolledValue;
+		const selectedIndex = selectedKey === null || selectedKey === void 0 ? -1 : options.findIndex(([key]) => key === String(selectedKey));
+		const selectedOption = options[selectedIndex];
+		const overlayState = (0, react_stately.useOverlayTriggerState)({});
+		const { active, setActive, focusVisible, setFocusVisible, moveByKeyboard, moveByPointer } = (0, _rocket_chat_fuselage_hooks.useActiveDescendant)();
+		const { search: findByTypeahead, isSearching, reset: resetTypeahead } = useTypeahead();
+		const triggerRef = (0, react.useRef)(null);
+		const { ref: resizeRef, borderBoxSize } = (0, _rocket_chat_fuselage_hooks.useResizeObserver)();
+		const mergedRef = (0, _rocket_chat_fuselage_hooks.useMergedRefs)(outerRef, triggerRef, resizeRef);
+		const [listboxName, setListboxName] = (0, react.useState)();
+		const [triggerFocusVisible, setTriggerFocusVisible] = (0, react.useState)(false);
+		const open = (index, byKeyboard) => {
+			if (disabled || options.length === 0) return;
+			setListboxName(getLabelText(triggerRef.current));
+			overlayState.open();
+			if (byKeyboard) {
+				moveByKeyboard(index);
+				return;
+			}
+			setActive(index);
+			setFocusVisible(false);
+		};
+		const close = () => {
+			overlayState.close();
+			setActive(void 0);
+			resetTypeahead();
+		};
+		const select = (index) => {
+			const option = options[index];
+			close();
+			if (!option || index === selectedIndex) return;
+			setUncontrolledValue(option[0]);
+			onChange?.(option[0]);
+		};
+		const labels = options.map(([key, label]) => label ?? key);
+		const lastIndex = options.length - 1;
+		const activeIndex = active ?? -1;
+		const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;
+		const handleKeyDown = (0, _rocket_chat_fuselage_hooks.useStableCallback)((event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key === " " && isSearching()) {
+				event.preventDefault();
+				const match = findByTypeahead(event.key, labels, overlayState.isOpen ? activeIndex : selectedIndex);
+				if (match >= 0) {
+					if (overlayState.isOpen) moveByKeyboard(match);
+					else open(match, true);
+				}
+				return;
+			}
+			if (!overlayState.isOpen) {
+				switch (event.key) {
+					case "ArrowDown":
+					case "ArrowUp":
+					case "Enter":
+					case " ":
+						event.preventDefault();
+						open(initialIndex, true);
+						return;
+					case "Home":
+						event.preventDefault();
+						open(0, true);
+						return;
+					case "End":
+						event.preventDefault();
+						open(lastIndex, true);
+						return;
+				}
+				if (isPrintableCharacter(event)) {
+					const match = findByTypeahead(event.key, labels, selectedIndex);
+					if (match >= 0) open(match, true);
+				}
+				return;
+			}
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					moveByKeyboard(Math.min(activeIndex + 1, lastIndex));
+					return;
+				case "ArrowUp":
+					event.preventDefault();
+					if (event.altKey) {
+						select(activeIndex);
+						return;
+					}
+					moveByKeyboard(Math.max(activeIndex - 1, 0));
+					return;
+				case "Home":
+					event.preventDefault();
+					moveByKeyboard(0);
+					return;
+				case "End":
+					event.preventDefault();
+					moveByKeyboard(lastIndex);
+					return;
+				case "PageDown":
+					event.preventDefault();
+					moveByKeyboard(Math.min(activeIndex + PAGE_SIZE, lastIndex));
+					return;
+				case "PageUp":
+					event.preventDefault();
+					moveByKeyboard(Math.max(activeIndex - PAGE_SIZE, 0));
+					return;
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					select(activeIndex);
+					return;
+				case "Tab":
+					select(activeIndex);
+					return;
+				case "Escape":
+					event.preventDefault();
+					event.stopPropagation();
+					close();
+					return;
+			}
+			if (isPrintableCharacter(event)) {
+				const match = findByTypeahead(event.key, labels, activeIndex);
+				if (match >= 0) moveByKeyboard(match);
+			}
 		});
-		const { ref, borderBoxSize } = (0, _rocket_chat_fuselage_hooks.useResizeObserver)();
-		const mergedRef = (0, _rocket_chat_fuselage_hooks.useMergedRefs)(outerRef, ref);
-		const { triggerProps, valueProps, menuProps } = (0, react_aria.useSelect)({
-			isDisabled,
-			...props
-		}, state, ref);
-		const { focusProps, isFocusVisible } = (0, react_aria.useFocusRing)();
+		const handleFocus = (event) => {
+			setTriggerFocusVisible(event.currentTarget.matches?.(":focus-visible") ?? false);
+			onFocus?.(event);
+		};
+		const handleBlur = (event) => {
+			setTriggerFocusVisible(false);
+			close();
+			onBlur?.(event);
+		};
+		const handleMouseDown = (event) => {
+			if (overlayState.isOpen) event.preventDefault();
+		};
+		const handleClick = (event) => {
+			event.currentTarget.focus();
+			if (overlayState.isOpen) {
+				close();
+				return;
+			}
+			open(initialIndex, false);
+		};
+		(0, react.useEffect)(() => {
+			if (!overlayState.isOpen || active === void 0) return;
+			triggerRef.current?.ownerDocument.getElementById(getOptionId(active))?.scrollIntoView?.({ block: "nearest" });
+		}, [
+			overlayState.isOpen,
+			active,
+			getOptionId
+		]);
+		const { isOpen } = overlayState;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-				position: "relative",
-				size: 0,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria.HiddenSelect, {
-					state,
-					triggerRef: ref,
-					label: props.label,
-					name: props.name,
-					isDisabled
-				})
+			name !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				disabled,
+				value: selectedKey === null || selectedKey === void 0 ? "" : String(selectedKey)
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectTrigger, {
-				...(0, react_aria.mergeProps)(focusProps, triggerProps),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
+				...pickTriggerProps(props),
+				is: "button",
+				type: "button",
 				ref: mergedRef,
-				small,
-				focus: isFocusVisible || state.isOpen,
-				error,
 				id,
+				role: "combobox",
+				"aria-haspopup": "listbox",
+				"aria-expanded": isOpen,
+				"aria-controls": isOpen ? listboxId : void 0,
+				"aria-activedescendant": isOpen && active !== void 0 ? getOptionId(active) : void 0,
+				"aria-invalid": props["aria-invalid"] ?? (error ? true : void 0),
+				disabled,
+				animated: true,
+				"rcx-select": true,
+				display: "flex",
+				flexDirection: "row",
+				fontScale: "p2",
+				justifyContent: "space-between",
+				"rcx-input-box--small": small,
+				className: [
+					error && "invalid",
+					disabled && "disabled",
+					(triggerFocusVisible || isOpen) && "focus",
+					props.className
+				].filter(Boolean).join(" "),
+				onMouseDown: handleMouseDown,
+				onClick: handleClick,
+				onKeyDown: handleKeyDown,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 					is: "span",
-					color: state.selectedItem ? "titles-labels" : "hint",
-					...valueProps,
+					color: selectedOption ? "titles-labels" : "hint",
 					...small && { fontScale: "c1" },
-					children: state.selectedItem ? state.selectedItem.rendered : placeholder
+					children: selectedOption ? selectedOption[1] ?? selectedOption[0] : placeholder
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-					color: "titles-labels",
-					name: state.isOpen ? "chevron-up" : "chevron-down",
+					name: isOpen ? "chevron-up" : "chevron-down",
 					size: "x20"
 				})]
 			}),
-			state.isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Popover, {
-				state,
-				triggerRef: ref,
-				placement: "bottom",
-				offset: 4,
-				containerPadding: 8,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionContainer, {
-					style: { width: borderBoxSize?.inlineSize },
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBox, {
-						...menuProps,
-						state
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PositionAnimated, {
+				visible: isOpen ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN,
+				anchor: triggerRef,
+				placement: "bottom-start",
+				margin: 4,
+				preventScroll: isOpen,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+					"aria-hidden": !isOpen || void 0,
+					style: isOpen ? void 0 : { pointerEvents: "none" },
+					onPointerDown: (event) => event.preventDefault(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionContainer, {
+						style: { width: borderBoxSize?.inlineSize },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Listbox, {
+							id: listboxId,
+							"aria-labelledby": props["aria-labelledby"],
+							"aria-label": props["aria-labelledby"] ? void 0 : props["aria-label"] ?? listboxName,
+							children: options.map(([key, label], index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxOption_default, {
+								id: getOptionId(index),
+								selected: index === selectedIndex,
+								active: index === active,
+								focusVisible,
+								onActivate: () => moveByPointer(index),
+								onSelect: () => select(index),
+								children: label ?? key
+							}, key))
+						})
 					})
 				})
 			})
 		] });
 	}
 	//#endregion
-	//#region src/components/Select/Select.tsx
-	/**
-	* An input for selection of options.
-	*/
-	function Select({ options, ref, ...props }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAria, {
-			ref,
-			...props,
-			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_stately.Item, {
-				title: option[1] ?? option[0],
-				textValue: option[0],
-				children: option[1] ?? option[0]
-			}, option[0]))
-		});
-	}
-	//#endregion
 	//#region src/components/Select/SelectFilteredContext.ts
 	var SelectFilteredContext = (0, react.createContext)({});
 	//#endregion
@@ -6026,14 +6547,11 @@ if (process.env.NODE_ENV !== "production") (function() {
 	function SelectFilteredAnchor({ children: _children, ...props }) {
 		const { placeholder, filter, setFilter } = (0, react.use)(SelectFilteredContext);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
-			marginInline: 4,
-			flexGrow: 1,
-			className: "rcx-select__focus",
+			className: "rcx-select__focus rcx-select__filter rcx-input-box--undecorated",
 			placeholder,
 			value: filter,
 			onInput: (e) => setFilter?.(e.currentTarget.value),
-			...props,
-			"rcx-input-box--undecorated": true
+			...props
 		});
 	}
 	//#endregion
@@ -6163,7 +6681,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	//#region src/components/Sidebar/SidebarAction.tsx
 	function SidebarAction(props) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-			small: true,
+			size: "small",
 			...props
 		});
 	}
@@ -6174,47 +6692,64 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/Sidebar/SidebarLink.tsx
-	var SidebarLink = ({ selected, icon, badge, menu, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+	var SidebarLink = ({ selected, icon, badge, menu, className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
+		is: "a",
+		inset: "md",
 		role: "link",
 		tabIndex: 0,
-		className: [
-			"rcx-box rcx-box--full",
-			"rcx-sidebar-link",
-			"rcx-sidebar-item",
-			selected && "rcx-sidebar-item--selected"
-		].filter(Boolean).join(" "),
+		selected,
+		className: cx("rcx-sidebar-link", "rcx-sidebar-item", !!selected && "rcx-sidebar-item--selected", className),
 		onClick: (e) => e.stopPropagation(),
 		onKeyDown: (e) => e.code === "Enter" && e.stopPropagation(),
 		...props,
 		children: [
-			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-				name: icon,
-				size: "x20",
-				className: "rcx-sidebar-item__icon"
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemIcon, {
+				className: "rcx-sidebar-item__icon",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: icon,
+					size: "x20"
+				})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "rcx-box rcx-box--full rcx-sidebar-item__title",
-				children: props.children
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemTitle, {
+				is: "span",
+				className: "rcx-sidebar-item__title",
+				children
 			}),
 			badge,
-			menu && patchChildren(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "rcx-box rcx-box--full rcx-sidebar-item__menu-wrapper",
-				children: menu
-			}), (childProps) => ({ className: appendClassName(childProps.className, "rcx-box rcx-box--full rcx-sidebar-item__menu rcx-box--animated") }))
+			menu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
+				reveal: "hover",
+				className: "rcx-sidebar-item__menu-wrapper",
+				children: patchChildren(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "rcx-box rcx-box--full rcx-sidebar-item__menu",
+					children: menu
+				}), (childProps) => ({ className: appendClassName(childProps.className, "rcx-sidebar-item__menu") }))
+			})
 		]
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItem.tsx
-	var SidebarItem = ({ selected, level = 1, className, children, is: Tag = "a", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
-		className: [
-			"rcx-box rcx-box--full rcx-sidebar-item",
-			selected && "rcx-sidebar-item--selected",
-			level && `rcx-sidebar-item--level-${level}`,
-			className
-		].filter(Boolean).join(" "),
-		...props,
-		children
-	});
+	/**
+	* A sidebar row. It renders an `Item`, so its content can also be composed from `Item` parts.
+	*/
+	var SidebarItem = ({ selected, highlighted, focused, focusVisible, level = 1, className, is = "a", href, target, rel, download, ...props }) => {
+		const isContainer = typeof is === "string" && is !== "a";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item, {
+			...props,
+			...!isContainer && {
+				href,
+				target,
+				rel,
+				download
+			},
+			is,
+			inset: "md",
+			selected,
+			highlighted,
+			focused,
+			focusVisible,
+			className: cx("rcx-sidebar-item", !!selected && "rcx-sidebar-item--selected", !!level && `rcx-sidebar-item--level-${level}`, className)
+		});
+	};
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemAction.tsx
 	var SidebarItemAction = ({ children, className, icon = "plus-small", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6228,10 +6763,20 @@ if (process.env.NODE_ENV !== "production") (function() {
 		}), children]
 	});
 	//#endregion
+	//#region src/components/Sidebar/SidebarItem/SidebarItemActions.tsx
+	/**
+	* Always-visible buttons of a container `SidebarItem`, such as accepting or rejecting a call.
+	* For actions shown only on hover, use `SidebarItemMenu`.
+	*/
+	var SidebarItemActions = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
+		...props,
+		className: cx("rcx-sidebar-item__actions", className)
+	});
+	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemAvatarWrapper.tsx
-	var SidebarItemAvatarWrapper = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: ["rcx-box rcx-box--full rcx-sidebar-item__avatar", className].filter(Boolean).join(" "),
-		...props
+	var SidebarItemAvatarWrapper = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemMedia, {
+		...props,
+		className: cx("rcx-sidebar-item__avatar", className)
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemBadge.tsx
@@ -6241,12 +6786,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemIcon.tsx
-	var SidebarItemIcon = ({ icon, className, highlighted, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: [
-			"rcx-box rcx-box--full rcx-sidebar-item__icon",
-			highlighted && "rcx-sidebar-item__icon--highlighted",
-			className
-		].filter(Boolean).join(" "),
+	var SidebarItemIcon = ({ icon, className, highlighted, label, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemIcon, {
+		label,
+		className: cx("rcx-sidebar-item__icon", !!highlighted && "rcx-sidebar-item__icon--highlighted", typeof className === "string" && className),
 		children: (0, react.isValidElement)(icon) ? icon : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			name: icon,
 			size: "x20",
@@ -6254,10 +6796,21 @@ if (process.env.NODE_ENV !== "production") (function() {
 		})
 	});
 	//#endregion
+	//#region src/components/Sidebar/SidebarItem/SidebarItemLink.tsx
+	/**
+	* The primary target of a container `SidebarItem` (`is='div'`). Place it inside `SidebarItemTitle`:
+	* it covers the whole row, so menus and buttons sit beside it instead of inside it.
+	*/
+	var SidebarItemLink = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemLink, {
+		...props,
+		className: cx("rcx-sidebar-item__link", className)
+	});
+	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemMenu.tsx
-	var SidebarItemMenu = ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rcx-box rcx-box--full rcx-sidebar-item__menu-wrapper rcx-box--animated",
+	var SidebarItemMenu = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
 		...props,
+		reveal: "hover",
+		className: cx("rcx-sidebar-item__menu-wrapper", className),
 		children: patchChildren(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "rcx-box rcx-box--full rcx-sidebar-item__menu",
 			children
@@ -6265,35 +6818,27 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemTitle.tsx
-	var SidebarItemTitle = ({ className, unread, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: [
-			"rcx-box rcx-box--full rcx-sidebar-item__title",
-			unread && "rcx-sidebar-item__title--highlighted",
-			className
-		].filter(Boolean).join(" "),
-		...props
+	var SidebarItemTitle = ({ className, unread, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemTitle, {
+		...props,
+		className: cx("rcx-sidebar-item__title", !!unread && "rcx-sidebar-item__title--highlighted", className)
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemRow.tsx
-	var SidebarItemRow = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: ["rcx-box rcx-box--full rcx-sidebar-item__row", className].filter(Boolean).join(" "),
-		...props
+	var SidebarItemRow = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemRow, {
+		...props,
+		className: cx("rcx-sidebar-item__row", className)
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemCol.tsx
-	var SidebarItemCol = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: ["rcx-box rcx-box--full rcx-sidebar-item__col", className].filter(Boolean).join(" "),
-		...props
+	var SidebarItemCol = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemContent, {
+		...props,
+		className: cx("rcx-sidebar-item__col", className)
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemTimestamp.tsx
-	var SidebarItemTimestamp = ({ className, unread, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: [
-			"rcx-box rcx-box--full rcx-sidebar-item__timestamp",
-			unread && "rcx-sidebar-item__timestamp--highlighted",
-			className
-		].filter(Boolean).join(" "),
-		...props
+	var SidebarItemTimestamp = ({ className, unread, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemMeta, {
+		...props,
+		className: cx("rcx-sidebar-item__timestamp", !!unread && "rcx-sidebar-item__timestamp--highlighted", className)
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarListItem.tsx
@@ -6307,13 +6852,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemContent.tsx
-	var SidebarItemContent = ({ className, unread, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: [
-			"rcx-box rcx-box--full rcx-sidebar-item__subtitle",
-			unread && "rcx-sidebar-item__subtitle--highlighted",
-			className
-		].filter(Boolean).join(" "),
-		...props
+	var SidebarItemContent = ({ className, unread, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemDescription, {
+		...props,
+		className: cx("rcx-sidebar-item__subtitle", !!unread && "rcx-sidebar-item__subtitle--highlighted", className)
 	});
 	//#endregion
 	//#region src/components/StatusBullet/icons/Away.tsx
@@ -6398,7 +6939,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 			cx: "6",
 			cy: "6",
 			r: "5",
-			className: `rcx-status-bullet rcx-status-bullet--offline`,
+			className: "rcx-status-bullet rcx-status-bullet--offline",
 			strokeWidth: "2"
 		})
 	});
@@ -6431,28 +6972,27 @@ if (process.env.NODE_ENV !== "production") (function() {
 	};
 	//#endregion
 	//#region src/components/Sidebar/SidebarItem/SidebarItemStatusBullet.tsx
-	var SidebarItemStatusBullet = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rcx-box rcx-box--full rcx-sidebar-item__status-bullet",
+	var SidebarItemStatusBullet = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemIcon, {
+		className: "rcx-sidebar-item__status-bullet",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBullet, { ...props })
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarGroupTitle.tsx
-	var SidebarGroupTitle = ({ title, titleId, badge, menu, barProps, expanded, empty, role, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: [
-			"rcx-box rcx-box--full",
-			"rcx-sidebar-collapse-group__bar",
-			!expanded && empty && "rcx-sidebar-collapse-group__bar--empty",
-			!expanded && badge && "rcx-sidebar-collapse-group__bar--unread"
-		].filter(Boolean).join(" "),
+	/**
+	* The header of a sidebar group. It renders an `ItemGroupHeader`, so its menu reveals on hover like a row's.
+	*/
+	var SidebarGroupTitle = ({ title, titleId, badge, menu, barProps, expanded, empty, role, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ItemGroupHeader, {
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "rcx-box rcx-sidebar-collapse-group__bar-button",
+		inset: "md",
+		className: cx("rcx-sidebar-collapse-group__bar", !expanded && empty && "rcx-sidebar-collapse-group__bar--empty", !expanded && !!badge && "rcx-sidebar-collapse-group__bar--unread", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ItemGroupTitle, {
 			role,
 			...barProps,
+			className: "rcx-sidebar-collapse-group__bar-button",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "rcx-box rcx-sidebar-collapse-group__heading",
+				className: "rcx-sidebar-collapse-group__heading",
 				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-					className: "rcx-box rcx-box--full rcx-sidebar-collapse-group__title",
+					className: "rcx-sidebar-collapse-group__title",
 					id: titleId,
 					children: title
 				}), expanded !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
@@ -6464,7 +7004,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarCollapseGroup.tsx
-	function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, menu, title, empty, role = "group", ...props }) {
+	function SidebarCollapseGroup({ ref, expanded: propExpanded, defaultExpanded, tabIndex, children, badge, menu, actions: _actions, title, empty, role = "group", ...props }) {
 		const { barProps, expanded, panelExpanded, panelId, titleId } = useCollapse({
 			expanded: propExpanded,
 			defaultExpanded,
@@ -6485,10 +7025,11 @@ if (process.env.NODE_ENV !== "production") (function() {
 				menu,
 				barProps,
 				role: "button"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroup, {
 				role: "list",
+				"aria-labelledby": titleId,
 				ref,
-				className: ["rcx-box rcx-box--full rcx-sidebar-collapse-group__panel rcx-box--animated", panelExpanded && "rcx-sidebar-collapse-group__panel--expanded"].filter(Boolean).join(" "),
+				className: cx("rcx-sidebar-collapse-group__panel rcx-box--animated", panelExpanded && "rcx-sidebar-collapse-group__panel--expanded"),
 				id: panelId,
 				children
 			})]
@@ -6496,9 +7037,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 	}
 	//#endregion
 	//#region src/components/Sidebar/SidebarCollapseGroupMenu.tsx
-	var SidebarCollapseGroupMenu = ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "rcx-box rcx-box--full rcx-sidebar-collapse-group__menu-wrapper rcx-box--animated",
+	var SidebarCollapseGroupMenu = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
 		...props,
+		reveal: "hover",
+		className: cx("rcx-sidebar-collapse-group__menu-wrapper", className),
 		children: patchChildren(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "rcx-box rcx-box--full rcx-sidebar-collapse-group__menu",
 			children
@@ -6527,7 +7069,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 			className: "rcx-box rcx-box--full rcx-sidebar-banner__addon",
 			children: [addon, onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
 				onClick: onClose,
-				tiny: true,
+				size: "tiny",
 				icon: "cross"
 			})]
 		})]
@@ -6581,10 +7123,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarDivider.tsx
-	var SidebarDivider = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {
-		"rcx-sidebar--divider": true,
-		marginBlockStart: -2,
-		marginBlockEnd: 0
+	var SidebarDivider = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemDivider, {
+		role: "separator",
+		className: "rcx-sidebar--divider"
 	});
 	//#endregion
 	//#region src/components/Sidebar/SidebarSection.tsx
@@ -6617,28 +7158,21 @@ if (process.env.NODE_ENV !== "production") (function() {
 		...props
 	});
 	//#endregion
-	//#region src/components/Sidepanel/SidepanelDivider.tsx
-	var SidepanelDivider = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {
-		"rcx-sidepanel--divider": true,
-		marginBlockStart: -2,
-		marginBlockEnd: 0
-	});
-	//#endregion
 	//#region src/components/Sidepanel/SidepanelHeader.tsx
 	var SidepanelHeader = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "rcx-sidepanel-header-wrapper",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: ["rcx-sidepanel-header", className].filter(Boolean).join(" "),
 			...props
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidepanelDivider, {})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, { className: "rcx-sidepanel--divider" })]
 	});
 	//#endregion
 	//#region src/components/Sidepanel/SidepanelList.tsx
 	function SidepanelList({ className, ...props }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemGroup, {
 			role: "list",
-			className: ["rcx-sidepanel-list", className].filter(Boolean).join(" "),
-			...props
+			...props,
+			className: cx("rcx-sidepanel-list", className)
 		});
 	}
 	//#endregion
@@ -6651,6 +7185,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 		});
 	}
 	//#endregion
+	//#region src/components/Sidepanel/SidepanelDivider.tsx
+	var SidepanelDivider = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemDivider, {
+		role: "separator",
+		className: "rcx-sidepanel--divider"
+	});
+	//#endregion
 	//#region src/components/SplitButton/SplitButton.tsx
 	/**
 	* Fuses a menu trigger and its primary action into a single control, e.g. an
@@ -6677,23 +7217,48 @@ if (process.env.NODE_ENV !== "production") (function() {
 	* The ghost segment of a `SplitButton`: the menu trigger fused next to the
 	* primary action. Pass it as a `Menu`'s `button`.
 	*/
-	function SplitButtonTrigger(props) {
+	function SplitButtonTrigger({ className, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-			"rcx-split-button__trigger": true,
+			...props,
+			className: ["rcx-split-button__trigger", className].filter(Boolean).join(" ")
+		});
+	}
+	//#endregion
+	//#region src/components/Stack/Stack.tsx
+	var flexValues = {
+		start: "flex-start",
+		end: "flex-end"
+	};
+	/**
+	* Lays out its children in a row or a column, spaced by `gap`.
+	*/
+	function Stack({ direction = "column", gap, align, justify, wrap, grow, ...props }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+			display: "flex",
+			flexDirection: direction,
+			gap,
+			alignItems: align && (flexValues[align] ?? align),
+			justifyContent: justify && (flexValues[justify] ?? justify),
+			flexWrap: wrap ? "wrap" : void 0,
+			flexGrow: grow ? 1 : void 0,
 			...props
 		});
 	}
 	//#endregion
 	//#region src/components/Table/Table.tsx
-	var Table = ({ striped, sticky, fixed = false, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+	var Table = ({ striped, sticky, fixed = false, columns, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 		"rcx-table__wrapper": true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Box_default, {
 			is: "table",
 			"rcx-table": true,
 			"rcx-table--fixed": fixed,
 			"rcx-table--sticky": sticky,
 			"rcx-table--striped": striped,
-			...props
+			...props,
+			children: [columns && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("colgroup", { children: columns.map((width, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+				is: "col",
+				width
+			}, index)) }), children]
 		})
 	});
 	//#endregion
@@ -6716,7 +7281,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Table/TableCell.tsx
-	var TableCell = ({ align, clickable, children, ...props }) => {
+	var TableCell = ({ align, clickable, rowHeader, truncate, color, strong, children, ...props }) => {
 		const isInsideHead = (0, react.useContext)(TableHeadContext);
 		const innerElement = children ?? (!isInsideHead ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			display: "inline-block",
@@ -6725,11 +7290,16 @@ if (process.env.NODE_ENV !== "production") (function() {
 			borderWidth: "default"
 		}) : void 0);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
-			is: isInsideHead ? "th" : "td",
+			is: isInsideHead || rowHeader ? "th" : "td",
+			scope: rowHeader ? "row" : void 0,
 			"rcx-table__cell": true,
 			"rcx-table__cell--align": align,
 			"rcx-table__cell--header": isInsideHead,
+			"rcx-table__cell--row-header": rowHeader,
 			"rcx-table__cell--clickable": clickable,
+			"rcx-table__cell--truncate": truncate,
+			"rcx-table__cell--color": color,
+			"rcx-table__cell--strong": strong,
 			...props,
 			children: innerElement
 		});
@@ -6775,10 +7345,10 @@ if (process.env.NODE_ENV !== "production") (function() {
 	});
 	//#endregion
 	//#region src/components/Table/TableSelection/TableSelectionButton.tsx
-	var TableSelectionButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-		small: true,
-		flexShrink: 0,
-		...props
+	var TableSelectionButton = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+		size: "small",
+		...props,
+		className: ["rcx-table__selection-button", className].filter(Boolean).join(" ")
 	});
 	//#endregion
 	//#region src/components/Table/TableSelection/TableSelectionButtonGroup.tsx
@@ -6788,11 +7358,12 @@ if (process.env.NODE_ENV !== "production") (function() {
 	/**
 	* Tabs is a component to navigate around the UI using buttons arranged together with the selected tab highlighted.
 	*/
-	function Tabs({ children, divider = true, ...props }) {
+	function Tabs({ children, divider = true, stretch, ...props }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			is: "div",
 			"rcx-tabs": true,
 			"rcx-tabs--with-divider": divider,
+			"rcx-tabs--stretch": stretch,
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 				is: "div",
@@ -6821,6 +7392,17 @@ if (process.env.NODE_ENV !== "production") (function() {
 		});
 	}
 	//#endregion
+	//#region src/components/Text/Text.tsx
+	/**
+	* Text set in one of the design system's font scales and text colours.
+	*/
+	function Text({ is = "div", fontScale, color, truncate, className, ...props }) {
+		return (0, react.createElement)(is, {
+			className: cx(cxx("rcx-text")(fontScale && `font-scale-${fontScale}`, color && `color-${color}`, truncate && "truncate"), className),
+			...props
+		});
+	}
+	//#endregion
 	//#region src/components/TextAreaInput/TextAreaInput.tsx
 	/**
 	* An input for multi-line plain-text editing.
@@ -6848,9 +7430,9 @@ if (process.env.NODE_ENV !== "production") (function() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
 			is: "span",
 			className: _rocket_chat_css_in_js.css`
-        animation-duration: ${circleCount * .466}s;
-        animation-delay: ${iteration * .16}s;
-      `,
+				animation-duration: ${circleCount * .466}s;
+				animation-delay: ${iteration * .16}s;
+			`,
 			"rcx-throbber__circle": true,
 			"rcx-throbber__circle--disabled": disabled,
 			"rcx-throbber__circle--inherit-color": inheritColor,
@@ -6874,6 +7456,16 @@ if (process.env.NODE_ENV !== "production") (function() {
 		});
 	}
 	//#endregion
+	//#region src/components/Tile/Tile.tsx
+	function Tile({ elevation = "1", flush, ...props }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box_default, {
+			"rcx-tile": true,
+			"rcx-tile--elevation": elevation,
+			padding: flush ? void 0 : 16,
+			...props
+		});
+	}
+	//#endregion
 	//#region src/components/ToastBar/ToastBar.tsx
 	/**
 	* Shows alerts in a toast component.
@@ -6898,16 +7490,16 @@ if (process.env.NODE_ENV !== "production") (function() {
     }
   `;
 		const toastBarAnimation = _rocket_chat_css_in_js.css`
-    animation: ${sideOpen} 0.5s;
-  `;
+		animation: ${sideOpen} 0.5s;
+	`;
 		const progressBarAnimation = _rocket_chat_css_in_js.css`
-    &::after {
-      width: 0%;
-      animation: ${progressBar} ${time}s;
-      animation-fill-mode: forwards;
-      animation-play-state: ${isPaused ? "paused" : "running"};
-    }
-  `;
+		&::after {
+			width: 0%;
+			animation: ${progressBar} ${time}s;
+			animation-fill-mode: forwards;
+			animation-play-state: ${isPaused ? "paused" : "running"};
+		}
+	`;
 		const uniqueId = (0, react.useId)();
 		const toastId = id || uniqueId;
 		const role = variant === "error" ? "alert" : "status";
@@ -6932,7 +7524,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 					onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "rcx-toastbar-close",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-							tiny: true,
+							size: "tiny",
 							"aria-label": buttonLabel,
 							onClick: () => onClose(toastId),
 							icon: "cross"
@@ -7014,6 +7606,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.CardCol = CardCol;
 	exports.CardControls = CardControls;
 	exports.CardGrid = CardGrid;
+	exports.CardGridItem = CardGridItem;
 	exports.CardGroup = CardGroup;
 	exports.CardHeader = CardHeader;
 	exports.CardRow = CardRow;
@@ -7057,7 +7650,24 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.Input = Input;
 	exports.InputBox = InputBox;
 	exports.InputBoxSkeleton = InputBoxSkeleton;
+	exports.Item = Item;
+	exports.ItemActions = ItemActions;
+	exports.ItemContent = ItemContent;
+	exports.ItemDescription = ItemDescription;
+	exports.ItemDivider = ItemDivider;
+	exports.ItemGroup = ItemGroup;
+	exports.ItemGroupHeader = ItemGroupHeader;
+	exports.ItemGroupTitle = ItemGroupTitle;
+	exports.ItemIcon = ItemIcon;
+	exports.ItemLink = ItemLink;
+	exports.ItemMedia = ItemMedia;
+	exports.ItemMeta = ItemMeta;
+	exports.ItemRow = ItemRow;
+	exports.ItemSkeleton = ItemSkeleton;
+	exports.ItemTitle = ItemTitle;
 	exports.Label = Label;
+	exports.Listbox = Listbox;
+	exports.ListboxOption = ListboxOption_default;
 	exports.Margins = Margins;
 	exports.Menu = Menu;
 	exports.MenuItem = MenuItem;
@@ -7168,6 +7778,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.PaletteStyleTag = PaletteStyleTag_default;
 	exports.PasswordInput = PasswordInput;
 	exports.Popover = Popover;
+	exports.PopoverSurface = PopoverSurface;
 	exports.PositionAnimated = PositionAnimated;
 	exports.ProgressBar = ProgressBar;
 	exports.RadioButton = RadioButton;
@@ -7191,11 +7802,13 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.SidebarGroupTitle = SidebarGroupTitle;
 	exports.SidebarItem = SidebarItem;
 	exports.SidebarItemAction = SidebarItemAction;
+	exports.SidebarItemActions = SidebarItemActions;
 	exports.SidebarItemAvatarWrapper = SidebarItemAvatarWrapper;
 	exports.SidebarItemBadge = SidebarItemBadge;
 	exports.SidebarItemCol = SidebarItemCol;
 	exports.SidebarItemContent = SidebarItemContent;
 	exports.SidebarItemIcon = SidebarItemIcon;
+	exports.SidebarItemLink = SidebarItemLink;
 	exports.SidebarItemMenu = SidebarItemMenu;
 	exports.SidebarItemRow = SidebarItemRow;
 	exports.SidebarItemStatusBullet = SidebarItemStatusBullet;
@@ -7219,6 +7832,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.Slider = Slider;
 	exports.SplitButton = SplitButton;
 	exports.SplitButtonTrigger = SplitButtonTrigger;
+	exports.Stack = Stack;
 	exports.States = States;
 	exports.StatesAction = StatesAction;
 	exports.StatesActions = StatesActions;
@@ -7244,6 +7858,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.Tabs = Tabs;
 	exports.TabsItem = TabsItem;
 	exports.Tag = Tag;
+	exports.Text = Text;
 	exports.TextAreaInput = TextAreaInput;
 	exports.TextInput = TextInput;
 	exports.ThreadMessage = ThreadMessage;
@@ -7271,11 +7886,14 @@ if (process.env.NODE_ENV !== "production") (function() {
 	exports.fontColor = fontColor;
 	exports.fontFamily = fontFamily;
 	exports.fontScale = fontScale;
+	exports.inset = inset;
 	exports.size = size;
 	exports.spacing = spacing;
+	exports.spacingScale = spacingScale;
 	exports.strokeColor = strokeColor;
 	exports.useCursor = useCursor;
 	exports.useOwnerDocument = useOwnerDocument;
+	exports.useStyle = useStyle;
 })();
 
 //# sourceMappingURL=fuselage.development.js.map