Chore: Apply correct fuselage color tokens (#27089)

4 years ago · 4cd128073e
parent 348aca1052
commit 4cd128073e
79 changed files with 315 additions and 335 deletions
--- a/apps/meteor/app/theme/client/imports/general/theme_old.css
+++ b/apps/meteor/app/theme/client/imports/general/theme_old.css
@ -281,12 +281,6 @@ textarea {
 	background-color: var(--success-background);
 }

-.messages-container {
-	.footer {
-		background: var(--content-background-color);
-	}
-}
-
 .message.editing {
 	background-color: var(--message-box-editing-color);
 }
--- a/apps/meteor/client/components/GenericTable/GenericTable.tsx
+++ b/apps/meteor/client/components/GenericTable/GenericTable.tsx
@ -73,7 +73,7 @@ const GenericTable = forwardRef(function GenericTable<
 				? renderFilter({ ...props, onChange: setFilter } as any) // TODO: ugh
 				: null}
 			{results && !results.length ? (
-				<Tile fontScale='p2' elevation='0' color='info' textAlign='center'>
+				<Tile fontScale='p2' elevation='0' color='hint' textAlign='center'>
 					{t('No_data_found')}
 				</Tile>
 			) : (
--- a/apps/meteor/client/components/GenericTable/NoResults.tsx
+++ b/apps/meteor/client/components/GenericTable/NoResults.tsx
@ -28,7 +28,7 @@ const NoResults: FC<NoResultsProps> = ({ icon, title, description, buttonTitle,
 		<Box is='h2' fontScale='h2' flexGrow={1}>
 			{title}
 		</Box>
-		<Tile paddingBlockStart='x5' fontScale='p2' elevation='0' color='info' textAlign='center'>
+		<Tile paddingBlockStart='x5' fontScale='p2' elevation='0' color='hint' textAlign='center'>
 			<Box margin='auto' maxWidth='400px'>
 				{description}
 			</Box>
--- a/apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx
+++ b/apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx
@ -87,7 +87,7 @@ const CloseChatModal = ({
 				<Modal.Close onClick={onCancel} />
 			</Modal.Header>
 			<Modal.Content fontScale='p2'>
-				<Box color='neutral-600'>{t('Close_room_description')}</Box>
+				<Box color='annotation'>{t('Close_room_description')}</Box>
 				<Field marginBlock='x15'>
 					<Field.Label required={commentRequired}>{t('Comment')}</Field.Label>
 					<Field.Row>
--- a/apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx
+++ b/apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx
@ -138,7 +138,7 @@ const ForwardChatModal = ({
 				<Field marginBlock='x15'>
 					<Field.Label>
 						{t('Leave_a_comment')}{' '}
-						<Box is='span' color='neutral-600'>
+						<Box is='span' color='annotation'>
 							({t('Optional')})
 						</Box>
 					</Field.Label>
--- a/apps/meteor/client/components/Page/PageBlockWithBorder.tsx
+++ b/apps/meteor/client/components/Page/PageBlockWithBorder.tsx
@ -11,7 +11,7 @@ const PageBlockWithBorder = forwardRef<HTMLElement, ComponentProps<typeof Box>>(
 			{...props}
 			pb='x16'
 			ref={ref}
-			borderBlockEndColor={border ? 'neutral-200' : 'transparent'}
+			borderBlockEndColor={border ? 'extra-light' : 'transparent'}
 			borderBlockEndWidth='x2'
 			height='auto'
 		/>
--- a/apps/meteor/client/components/Page/PageHeader.tsx
+++ b/apps/meteor/client/components/Page/PageHeader.tsx
@ -18,7 +18,7 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 	const { isMobile } = useLayout();

 	return (
-		<Box borderBlockEndWidth='x2' borderBlockEndColor={borderBlockEndColor ?? border ? 'neutral-200' : 'transparent'} {...props}>
+		<Box borderBlockEndWidth='x2' borderBlockEndColor={borderBlockEndColor ?? border ? 'extra-light' : 'transparent'} {...props}>
 			<Box
 				marginBlock='x16'
 				marginInline='x24'
@ -27,7 +27,7 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 				flexDirection='row'
 				flexWrap='nowrap'
 				alignItems='center'
-				color='neutral-800'
+				color='default'
 				{...props}
 			>
 				{isMobile && (
--- a/apps/meteor/client/components/Sidebar/Header.tsx
+++ b/apps/meteor/client/components/Sidebar/Header.tsx
@ -11,7 +11,7 @@ const Header: FC<HeaderProps> = ({ title, onClose, children, ...props }) => (
 		{(title || onClose) && (
 			<Box display='flex' flexDirection='row' alignItems='center' pi='x24' justifyContent='space-between' flexGrow={1}>
 				{title && (
-					<Box color='neutral-800' fontSize='p2' fontWeight='p2' flexShrink={1} withTruncatedText>
+					<Box color='default' fontSize='p2' fontWeight='p2' flexShrink={1} withTruncatedText>
 						{title}
 					</Box>
 				)}
--- a/apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx
+++ b/apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx
@ -33,7 +33,7 @@ const SidebarNavigationItem: FC<SidebarNavigationItemProps> = ({
 	return (
 		<SidebarGenericItem active={isActive} href={path} key={path}>
 			{icon && <Icon name={icon} size='x20' mi='x4' />}
-			<Box withTruncatedText fontScale='p2' mi='x4' color='info'>
+			<Box withTruncatedText fontScale='p2' mi='x4' color='hint'>
 				{label} {tag && <Tag style={{ display: 'inline', backgroundColor: '#000', color: '#FFF', marginLeft: 4 }}>{tag}</Tag>}
 			</Box>
 		</SidebarGenericItem>
--- a/apps/meteor/client/components/VerticalBar/VerticalBar.tsx
+++ b/apps/meteor/client/components/VerticalBar/VerticalBar.tsx
@ -8,13 +8,13 @@ const VerticalBar: FC<ComponentProps<typeof Box>> = ({ children, ...props }) =>
 	return (
 		<Box
 			rcx-vertical-bar
-			backgroundColor='surface'
+			bg='light'
 			display='flex'
 			flexDirection='column'
 			flexShrink={0}
 			width={sizes.contextualBar}
 			borderInlineStartWidth='2px'
-			borderInlineStartColor='neutral-300'
+			borderInlineStartColor='extra-light'
 			borderInlineStartStyle='solid'
 			height='full'
 			position={position}
--- a/apps/meteor/client/components/VerticalBar/VerticalBarHeader.tsx
+++ b/apps/meteor/client/components/VerticalBar/VerticalBarHeader.tsx
@ -10,7 +10,7 @@ const VerticalBarHeader: FC<{ children: ReactNode; props?: ComponentProps<typeof
 		is='h3'
 		pi='x24'
 		borderBlockEndWidth='x2'
-		borderBlockColor='neutral-200'
+		borderBlockColor='extra-light'
 		{...props}
 	>
 		<Box
@ -21,7 +21,7 @@ const VerticalBarHeader: FC<{ children: ReactNode; props?: ComponentProps<typeof
 			fontScale='h4'
 			flexGrow={1}
 			overflow='hidden'
-			color='neutral-800'
+			color='default'
 		>
 			<Margins inline='x4'>{children}</Margins>
 		</Box>
--- a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentBlock.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentBlock.tsx
@ -5,7 +5,7 @@ import Attachment from './Attachment';

 const AttachmentBlock: FC<{ pre?: JSX.Element | string | undefined; color?: string | undefined }> = ({
 	pre,
-	color = 'neutral-600',
+	color = 'annotation',
 	children,
 }) => (
 	<Attachment>
--- a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDetails.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDetails.tsx
@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import React, { FC, ComponentProps } from 'react';

 const AttachmentDetails: FC<ComponentProps<typeof Box>> = ({ ...props }) => (
-	<Box rcx-attachment__details fontScale='p2' color='info' bg='neutral-200' pi='x16' pb='x16' {...props} />
+	<Box rcx-attachment__details fontScale='p2' color='hint' bg='neutral-200' pi='x16' pb='x16' {...props} />
 );

 export default AttachmentDetails;
--- a/apps/meteor/client/components/message/Attachments/QuoteAttachment.tsx
+++ b/apps/meteor/client/components/message/Attachments/QuoteAttachment.tsx
@ -45,8 +45,8 @@ export const QuoteAttachment = ({ attachment }: QuoteAttachmentProps): ReactElem
 					borderRadius='x2'
 					borderWidth='x2'
 					borderStyle='solid'
-					borderColor='neutral-200'
-					borderInlineStartColor='neutral-500'
+					borderColor='extra-light'
+					borderInlineStartColor='light'
 				>
 					<AttachmentAuthor>
 						<AttachmentAuthorAvatar url={attachment.author_icon} />
--- a/apps/meteor/client/components/message/Attachments/components/ImageBox.tsx
+++ b/apps/meteor/client/components/message/Attachments/components/ImageBox.tsx
@ -12,7 +12,7 @@ const ImageBox: FC<ComponentProps<typeof Box>> = (props) => (
 		borderRadius='x2'
 		borderWidth='x2'
 		borderStyle='solid'
-		borderColor='neutral-200'
+		borderColor='extra-light'
 		{...props}
 	/>
 );
--- a/apps/meteor/client/components/message/Attachments/components/Load.tsx
+++ b/apps/meteor/client/components/message/Attachments/components/Load.tsx
@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Icon } from '@rocket.chat/fuselage';
+import { Box, Icon, Palette } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, FC } from 'react';
@ -12,7 +12,7 @@ const Load: FC<LoadProps> = ({ load, ...props }) => {
 	const t = useTranslation();
 	const clickable = css`
 		cursor: pointer;
-		background: var(--rxc-color-neutral-100, ${colors.n100}) !important;
+		background: ${Palette.surface['surface-tint']};

 		&:hover,
 		&:focus {
@ -21,7 +21,7 @@ const Load: FC<LoadProps> = ({ load, ...props }) => {
 	`;
 	return (
 		<ImageBox className={clickable} {...props} onClick={load}>
-			<Icon name='image' color='neutral-700' size='x64' />
+			<Icon name='image' color='hint' size='x64' />
 			<Box fontScale='h2' color='default'>
 				{t('Click_to_load')}
 			</Box>
--- a/apps/meteor/client/components/message/Attachments/components/Retry.tsx
+++ b/apps/meteor/client/components/message/Attachments/components/Retry.tsx
@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Icon } from '@rocket.chat/fuselage';
+import { Box, Icon, Palette } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC, ComponentProps } from 'react';
@ -12,7 +12,7 @@ const Retry: FC<RetryProps> = ({ retry }) => {
 	const t = useTranslation();
 	const clickable = css`
 		cursor: pointer;
-		background: var(--rxc-color-neutral-100, ${colors.n100}) !important;
+		background: ${Palette.surface['surface-tint']};

 		&:hover,
 		&:focus {
@ -21,7 +21,7 @@ const Retry: FC<RetryProps> = ({ retry }) => {
 	`;
 	return (
 		<ImageBox className={clickable} onClick={retry} size={160}>
-			<Icon name='refresh' color='neutral-700' size='x64' />
+			<Icon name='refresh' color='hint' size='x64' />
 			<Box fontScale='h2' color='default'>
 				{t('Retry')}
 			</Box>
--- a/apps/meteor/client/components/message/Metrics/MetricsItem.tsx
+++ b/apps/meteor/client/components/message/Metrics/MetricsItem.tsx
@ -4,7 +4,7 @@ import React, { ComponentProps, FC } from 'react';
 type MetricsItemProps = ComponentProps<typeof Box>;

 const MetricsItem: FC<MetricsItemProps> = (props) => (
-	<Box display='flex' justifyContent='center' alignItems='center' fontScale='micro' color='info' mi='x4' {...props} />
+	<Box display='flex' justifyContent='center' alignItems='center' fontScale='micro' color='hint' mi='x4' {...props} />
 );

 export default MetricsItem;
--- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx
+++ b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx
@ -95,7 +95,7 @@ export const VoipFooter = ({
 								small
 								disabled={paused}
 								icon={muted ? 'mic-off' : 'mic'}
-								color={muted ? 'neutral-500' : 'info'}
+								color={muted ? 'disabled' : 'hint'}
 								data-tooltip={muted ? t('Turn_on_microphone') : t('Turn_off_microphone')}
 								onClick={(e): void => {
 									e.stopPropagation();
@ -107,7 +107,7 @@ export const VoipFooter = ({
 								data-tooltip={holdTitle}
 								disabled={!isEnterprise}
 								icon={paused ? 'pause' : 'pause-unfilled'}
-								color={paused ? 'neutral-500' : 'info'}
+								color={paused ? 'disabled' : 'hint'}
 								onClick={handleHold}
 							/>
 							{options && <Menu color='neutral-500' data-tooltip={t('More_options')} options={options} />}
--- a/apps/meteor/client/sidebar/header/CreateChannel.tsx
+++ b/apps/meteor/client/sidebar/header/CreateChannel.tsx
@ -128,7 +128,7 @@ const CreateChannel = ({
 					<Field>
 						<Field.Label>
 							{t('Topic')}{' '}
-							<Box is='span' color='neutral-600'>
+							<Box is='span' color='annotation'>
 								({t('optional')})
 							</Box>
 						</Field.Label>
--- a/apps/meteor/client/sidebar/header/UserAvatarButton.tsx
+++ b/apps/meteor/client/sidebar/header/UserAvatarButton.tsx
@ -54,8 +54,8 @@ const UserAvatarButton = function UserAvatarButton(): ReactElement {
 					size={12}
 					borderWidth='x2'
 					position='absolute'
-					bg='neutral-200'
-					borderColor='neutral-200'
+					bg='surface-tint'
+					borderColor='extra-light'
 					borderRadius='full'
 					mie='neg-x2'
 					mbe='neg-x2'
--- a/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.ts
+++ b/apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.ts
@ -64,9 +64,10 @@ const query = { _id: /theme-color-rc/ };
 const useTheme = (): { [key: string]: string } => {
 	const customColors = useSettings(query) as { value: string; _id: string }[];
 	const result = useMemo(() => {
+		const sidebarSurface = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-background');
+
 		const n900 = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-darkest');
 		const n800 = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-dark');
-		const sibebarSurface = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-background');
 		const n700 = customColors.find(({ _id }) => _id === '');
 		const n600 = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-light');
 		const n500 = customColors.find(({ _id }) => _id === 'theme-color-rc-primary-light-medium');
@ -80,7 +81,7 @@ const useTheme = (): { [key: string]: string } => {
 			...colors,
 			...(n900 && { n900: n900.value }),
 			...(n800 && { n800: n800.value }),
-			...((sibebarSurface || n800) && { sibebarSurface: sibebarSurface?.value || n800?.value }),
+			...((sidebarSurface || n800) && { sidebarSurface: sidebarSurface?.value || n800?.value }),
 			...(n700 && { n700: n700.value }),
 			...(n600 && { n600: n600.value }),
 			...(n500 && { n500: n500.value }),
@ -126,8 +127,8 @@ const getStyle = (
 			--rcx-button-icon-active-border-color: ${toVar(colors.n900)};
 			--rcx-button-icon-active-background-color: ${toVar(colors.n800)};
 			--rcx-button-icon-color: ${toVar(colors.n600)};
-			--rcx-button-icon-border-color: ${toVar(colors.sibebarSurface)};
-			--rcx-button-icon-background-color: ${toVar(colors.sibebarSurface)};
+			--rcx-button-icon-border-color: ${toVar(colors.sidebarSurface)};
+			--rcx-button-icon-background-color: ${toVar(colors.sidebarSurface)};
 			--rcx-button-icon-hover-background-color: ${toVar(colors.n900)};
 			--rcx-button-icon-hover-border-color: ${toVar(colors.n900)};
 			--rcx-button-icon-focus-background-color:  var(--rcx-color-neutral-300);
@ -137,8 +138,8 @@ const getStyle = (
 			--rcx-button-icon-success-active-border-color: ${toVar(colors.n900)};
 			--rcx-button-icon-success-active-background-color: ${toVar(colors.n800)};
 			--rcx-button-icon-success-color: ${toVar(colors.n600)};
-			--rcx-button-icon-success-border-color: ${toVar(colors.sibebarSurface)};
-			--rcx-button-icon-success-background-color: ${toVar(colors.sibebarSurface)};
+			--rcx-button-icon-success-border-color: ${toVar(colors.sidebarSurface)};
+			--rcx-button-icon-success-background-color: ${toVar(colors.sidebarSurface)};
 			--rcx-button-icon-success-hover-background-color: ${toVar(colors.n900)};
 			--rcx-button-icon-success-hover-border-color: ${toVar(colors.n900)};

@ -173,7 +174,7 @@ const getStyle = (
 		}

 		.rcx-sidebar {
-			background-color: ${toVar(colors.sibebarSurface)};
+			background-color: ${toVar(colors.sidebarSurface)};
 		}
 		`
 )(isIE11 ? ':root' : modifier);
--- a/apps/meteor/client/views/admin/apps/PriceDisplay.tsx
+++ b/apps/meteor/client/views/admin/apps/PriceDisplay.tsx
@ -47,7 +47,7 @@ const PriceDisplay: FC<PriceDisplayProps> = ({ purchaseType, pricingPlans, price

 	return (
 		<Margins inlineStart='x8'>
-			<Tag small>
+			<Tag medium>
 				{showType && (
 					<Box color='default' withTruncatedText>
 						{t(type as TranslationKey)}
--- a/apps/meteor/client/views/admin/apps/ReleaseItem.tsx
+++ b/apps/meteor/client/views/admin/apps/ReleaseItem.tsx
@ -24,7 +24,7 @@ const ReleaseItem = ({ release, ...props }: ReleaseItemProps): JSX.Element => {
 			<Box is='h4' fontWeight='700' fontSize='x16' lineHeight='x24' color='default' mie='x24'>
 				{release.version}
 			</Box>
-			<Box is='p' fontWeight='400' fontSize='x16' lineHeight='x24' color='info'>
+			<Box is='p' fontWeight='400' fontSize='x16' lineHeight='x24' color='hint'>
 				{formatDate(release.createdDate)}
 			</Box>
 		</Box>
--- a/apps/meteor/client/views/admin/apps/components/CategoryFilter/CategoryDropDownAnchor.tsx
+++ b/apps/meteor/client/views/admin/apps/components/CategoryFilter/CategoryDropDownAnchor.tsx
@ -15,7 +15,7 @@ const CategoryDropDownAnchor = forwardRef<HTMLInputElement, Partial<ComponentPro
 				flexDirection='row'
 				flexGrow='1'
 				flexShrink='1'
-				borderColor={props.selectedCategoriesCount ? 'none' : 'neutral-500'}
+				borderColor={props.selectedCategoriesCount ? 'none' : 'light'}
 				borderWidth={props.selectedCategoriesCount ? 'none' : 'x2'}
 				bg={props.selectedCategoriesCount ? 'primary' : 'alternative'}
 			>
--- a/apps/meteor/client/views/admin/cloud/TroubleshootingSection.js
+++ b/apps/meteor/client/views/admin/cloud/TroubleshootingSection.js
@ -37,7 +37,7 @@ function TroubleshootingSection({ onRegisterStatusChange, ...props }) {
 		<Box is='section' {...props}>
 			<Subtitle>{t('Cloud_troubleshooting')}</Subtitle>

-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_workspace_support')}</p>
 			</Box>

@ -47,7 +47,7 @@ function TroubleshootingSection({ onRegisterStatusChange, ...props }) {
 				</Button>
 			</ButtonGroup>

-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>
 					{t('Cloud_status_page_description')}:{' '}
 					<a href={statusPageUrl} target='_blank' rel='noopener noreferrer'>
--- a/apps/meteor/client/views/admin/cloud/WhatIsItSection.js
+++ b/apps/meteor/client/views/admin/cloud/WhatIsItSection.js
@ -11,7 +11,7 @@ function WhatIsItSection(props) {
 		<Box is='section' {...props}>
 			<Subtitle>{t('Cloud_what_is_it')}</Subtitle>

-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_what_is_it_description')}</p>

 				<details>
--- a/apps/meteor/client/views/admin/cloud/WorkspaceLoginSection.js
+++ b/apps/meteor/client/views/admin/cloud/WorkspaceLoginSection.js
@ -80,7 +80,7 @@ function WorkspaceLoginSection({ onRegisterStatusChange, ...props }) {

 	return (
 		<Box is='section' {...props}>
-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_workspace_connected')}</p>
 			</Box>

@ -96,7 +96,7 @@ function WorkspaceLoginSection({ onRegisterStatusChange, ...props }) {
 				)}
 			</ButtonGroup>

-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_workspace_disconnect')}</p>
 			</Box>

--- a/apps/meteor/client/views/admin/cloud/WorkspaceRegistrationSection.js
+++ b/apps/meteor/client/views/admin/cloud/WorkspaceRegistrationSection.js
@ -47,7 +47,7 @@ function WorkspaceRegistrationSection({ token: initialToken, workspaceId, unique
 	return (
 		<Box marginBlock='neg-x24' {...props}>
 			<Margins block='x24'>
-				<Box withRichContent color='neutral-800'>
+				<Box withRichContent color='default'>
 					<p>{t('Cloud_token_instructions')}</p>
 				</Box>

--- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx
@ -79,7 +79,7 @@ const PermissionsTable = (): ReactElement => {
 					<Margins block='x8'>
 						<PermissionsTableFilter onChange={setFilter} />
 						{permissions?.length === 0 && (
-							<Tile fontScale='p2' elevation='0' color='info' textAlign='center'>
+							<Tile fontScale='p2' elevation='0' color='hint' textAlign='center'>
 								{t('No_data_found')}
 							</Tile>
 						)}
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
@ -52,7 +52,7 @@ const UsersInRoleTable = ({ users, reload, roleName, roleId, description, total,
 	return (
 		<>
 			{users.length === 0 && (
-				<Tile fontScale='p2' elevation='0' color='info' textAlign='center'>
+				<Tile fontScale='p2' elevation='0' color='hint' textAlign='center'>
 					{t('No_data_found')}
 				</Tile>
 			)}
--- a/apps/meteor/client/views/home/DefaultHomePage.tsx
+++ b/apps/meteor/client/views/home/DefaultHomePage.tsx
@ -24,7 +24,7 @@ const DefaultHomePage = (): ReactElement => {
 	const displayCustomBody = Boolean(useSetting('Layout_Home_Body'));

 	return (
-		<Page data-qa='page-home' data-qa-type='default' background='tint'>
+		<Page data-qa='page-home' data-qa-type='default' background='tint' color='default'>
 			<HomePageHeader />
 			<PageScrollableContent>
 				<Box is='h1' fontScale='h1' data-qa-id='homepage-welcome-text'>
@ -58,7 +58,7 @@ const DefaultHomePage = (): ReactElement => {
 					</HomepageGridItem>
 				</Grid>
 				{displayCustomBody && (
-					<Box mbs='x16'>
+					<Box mb='x16'>
 						<CustomHomePageContent />
 					</Box>
 				)}
--- a/apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx
+++ b/apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx
@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box } from '@rocket.chat/fuselage';
+import { Box, Palette } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
 import React, { FC, MouseEvent } from 'react';

@ -9,15 +9,12 @@ type AnnouncementComponentParams = {

 const AnnouncementComponent: FC<AnnouncementComponentParams> = ({ children, onClickOpen }) => {
 	const announcementBar = css`
-		background-color: ${colors.p200};
-		background-color: var(--rc-color-announcement-background, ${colors.p200});
-		color: ${colors.p600};
-		color: var(--rc-color-announcement-text, ${colors.p600});
+		background-color: ${Palette.status['status-background-info'].theme('announcement-background')};
+		color: ${Palette.statusColor['status-font-on-info'].theme('announcement-text')};
 		cursor: pointer;
 		transition: transform 0.2s ease-out;
 		a {
-			color: ${colors.p600} !important;
-			color: var(--rc-color-announcement-text, ${colors.p600}) !important;
+			color: ${Palette.statusColor['status-font-on-info'].theme('announcement-text')};
 			text-decoration: underline !important;
 		}
 		> * {
--- a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionList.js
+++ b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionList.js
@ -39,7 +39,7 @@ function DiscussionList({ total = 10, discussions = [], loadMoreItems, loading,
 					p='x24'
 					borderBlockEndWidth='x2'
 					borderBlockEndStyle='solid'
-					borderBlockEndColor='neutral-200'
+					borderBlockEndColor='extra-light'
 					flexShrink={0}
 				>
 					<TextInput
@ -64,7 +64,7 @@ function DiscussionList({ total = 10, discussions = [], loadMoreItems, loading,
 				)}

 				{!loading && total === 0 && (
-					<Box width='full' textAlign='center' p='x24' color='neutral-600'>
+					<Box width='full' textAlign='center' p='x24' color='annotation'>
 						{t('No_Discussions_found')}
 					</Box>
 				)}
--- a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.js
+++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.js
@ -78,7 +78,7 @@ function RoomFiles({
 				)}

 				{!loading && filesItems.length <= 0 && (
-					<Box textAlign='center' p='x12' color='neutral-600'>
+					<Box textAlign='center' p='x12' color='annotation'>
 						{t('No_files_found')}
 					</Box>
 				)}
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
@ -23,7 +23,7 @@ const InviteLink = ({ linkText, captionText, onClickEdit }: InviteLinkProps): Re
 					{linkText && <UrlInput value={linkText} addon={<Icon onClick={(): Promise<void> => copy()} name='copy' size='x16' />} />}
 				</Field.Row>
 				{captionText && (
-					<Box pb='x8' color='neutral-600' fontScale='c2'>
+					<Box pb='x8' color='annotation' fontScale='c2'>
 						{captionText}
 					</Box>
 				)}
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
@ -108,18 +108,18 @@ const RoomMembers = ({
 				)}

 				{!loading && members.length <= 0 && (
-					<Box textAlign='center' p='x12' color='neutral-600'>
+					<Box textAlign='center' p='x12' color='annotation'>
 						{t('No_members_found')}
 					</Box>
 				)}

 				{!loading && members.length > 0 && (
 					<Box pi='x18' pb='x12'>
-						<Box is='span' color='info' fontScale='p2'>
+						<Box is='span' color='hint' fontScale='p2'>
 							{t('Showing')}: {members.length}
 						</Box>

-						<Box is='span' color='info' fontScale='p2' mis='x8'>
+						<Box is='span' color='hint' fontScale='p2' mis='x8'>
 							{t('Total')}: {total}
 						</Box>
 					</Box>
--- a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx
@ -105,7 +105,7 @@ export const ThreadList: FC<ThreadListProps> = function ThreadList({
 					p='x24'
 					borderBlockEndWidth='x2'
 					borderBlockEndStyle='solid'
-					borderBlockEndColor='neutral-200'
+					borderBlockEndColor='extra-light'
 					flexShrink={0}
 				>
 					<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
@ -135,7 +135,7 @@ export const ThreadList: FC<ThreadListProps> = function ThreadList({
 				)}

 				{!loading && total === 0 && (
-					<Box p='x24' color='neutral-600' textAlign='center' width='full'>
+					<Box p='x24' color='annotation' textAlign='center' width='full'>
 						{t('No_Threads')}
 					</Box>
 				)}
--- a/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptRow.tsx
+++ b/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptRow.tsx
@ -35,7 +35,7 @@ const ReadReceiptRow = ({ user, ts }: ReadReceipt): ReactElement => {
 					{displayName}
 				</Box>
 			</Box>
-			<Box is='span' fontScale='c1' color='info'>
+			<Box is='span' fontScale='c1' color='hint'>
 				{formatDateAndTime(ts)}
 			</Box>
 		</Box>
--- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
+++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
@ -1,3 +1,4 @@
+import { Box } from '@rocket.chat/fuselage';
 import { useLayout, useCurrentRoute, useRoutePath, useSetting, useCurrentModal } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, ReactNode, useCallback } from 'react';

@ -16,20 +17,17 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement
 	const readReceiptsEnabled = useSetting('Message_Read_Receipt_Store_Users');

 	return (
-		<div
+		<Box
+			bg='light'
 			id='rocket-chat'
 			className={[embeddedLayout ? 'embedded-view' : undefined, 'menu-nav'].filter(Boolean).join(' ')}
 			aria-hidden={Boolean(modal)}
 		>
 			{!removeSidenav ? <BlazeTemplate template='sideNav' /> : null}
-			<div
-				className={['rc-old', 'main-content', 'content-background-color', readReceiptsEnabled ? 'read-receipts-enabled' : undefined]
-					.filter(Boolean)
-					.join(' ')}
-			>
+			<div className={['rc-old', 'main-content', readReceiptsEnabled ? 'read-receipts-enabled' : undefined].filter(Boolean).join(' ')}>
 				{children}
 			</div>
-		</div>
+		</Box>
 	);
 };

--- a/apps/meteor/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
+++ b/apps/meteor/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
@ -58,7 +58,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 					<Field>
 						<Field.Label>
 							{t('Teams_New_Description_Label')}{' '}
-							<Box is='span' color='neutral-600'>
+							<Box is='span' color='annotation'>
 								({t('optional')})
 							</Box>
 						</Field.Label>
@ -111,7 +111,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 					<Field>
 						<Field.Label>
 							{t('Teams_New_Add_members_Label')}{' '}
-							<Box is='span' color='neutral-600'>
+							<Box is='span' color='annotation'>
 								({t('optional')})
 							</Box>
 						</Field.Label>
--- a/apps/meteor/client/views/teams/contextualBar/channels/BaseTeamsChannels.js
+++ b/apps/meteor/client/views/teams/contextualBar/channels/BaseTeamsChannels.js
@ -66,7 +66,7 @@ const BaseTeamsChannels = ({
 					</Box>
 				)}
 				{!loading && channels.length === 0 && (
-					<Box textAlign='center' p='x12' color='neutral-600'>
+					<Box textAlign='center' p='x12' color='annotation'>
 						{t('No_channels_in_team')}
 					</Box>
 				)}
--- a/apps/meteor/ee/client/deviceManagement/components/DeviceIcon.tsx
+++ b/apps/meteor/ee/client/deviceManagement/components/DeviceIcon.tsx
@ -20,7 +20,7 @@ const DeviceIcon = ({ deviceType }: { deviceType: string }): ReactElement => (
 		borderRadius='full'
 		mie='x8'
 	>
-		<Icon name={iconMap[deviceType] || 'globe'} size='x16' color='info' />
+		<Icon name={iconMap[deviceType] || 'globe'} size='x16' color='hint' />
 	</Box>
 );

--- a/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/IconButton.tsx
+++ b/apps/meteor/ee/client/omnichannel/components/CannedResponse/TextEditor/IconButton.tsx
@ -11,7 +11,7 @@ const IconButton = ({ name, action, title }: IconButtonProps): ReactElement => (
 	<Icon
 		icon={name}
 		size='24px'
-		color='neutral-700'
+		color='hint'
 		small
 		display='flex'
 		justifyContent='center'
--- a/apps/meteor/ee/client/omnichannel/components/contextualBar/CannedResponse/CannedResponse.tsx
+++ b/apps/meteor/ee/client/omnichannel/components/contextualBar/CannedResponse/CannedResponse.tsx
@ -34,7 +34,7 @@ const CannedResponse: FC<{
 						<Box fontScale='p2m' mbe='8px'>
 							{t('Shortcut')}:
 						</Box>
-						<Box fontScale='c1' color='info'>
+						<Box fontScale='c1' color='hint'>
 							!{shortcut}
 						</Box>
 					</Box>
@ -42,7 +42,7 @@ const CannedResponse: FC<{
 						<Box fontScale='p2m' mbe='8px'>
 							{t('Content')}:
 						</Box>
-						<Box fontScale='c1' color='info'>
+						<Box fontScale='c1' color='hint'>
 							"{text}"
 						</Box>
 					</Box>
@ -50,7 +50,7 @@ const CannedResponse: FC<{
 						<Box fontScale='p2m' mbe='8px'>
 							{t('Sharing')}:
 						</Box>
-						<Box fontScale='c1' color='info'>
+						<Box fontScale='c1' color='hint'>
 							{scope}
 						</Box>
 					</Box>
--- a/apps/meteor/ee/client/omnichannel/components/contextualBar/CannedResponse/Item.tsx
+++ b/apps/meteor/ee/client/omnichannel/components/contextualBar/CannedResponse/Item.tsx
@ -27,7 +27,7 @@ const Item: FC<{
 			pbe={12}
 			pi={24}
 			borderBlockEndWidth='2px'
-			borderBlockEndColor='neutral-200'
+			borderBlockEndColor='light'
 			borderBlockEndStyle='solid'
 			onClick={onClickItem}
 			className={clickable}
@ -39,7 +39,7 @@ const Item: FC<{
 					<Box fontScale='p2m' withTruncatedText>
 						!{data.shortcut}
 					</Box>
-					<Box fontScale='c1' color='info' withTruncatedText>
+					<Box fontScale='c1' color='hint' withTruncatedText>
 						{scope}
 					</Box>
 				</Box>
@ -53,10 +53,10 @@ const Item: FC<{
 					>
 						{t('Use')}
 					</Button>
-					<Icon name='chevron-left' size={24} color='neutral-700' />
+					<Icon name='chevron-left' size={24} color='hint' />
 				</Box>
 			</Box>
-			<Box fontScale='p2' mbs='8px' color='info' withTruncatedText>
+			<Box fontScale='p2' mbs='8px' color='hint' withTruncatedText>
 				"{data.text}"
 			</Box>
 			{data.tags && data.tags.length > 0 && (
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx
@ -60,7 +60,7 @@ const ChannelsOverview = (): ReactElement => {
 			</EngagementDashboardCardFilter>
 			<Box>
 				{channels && !channels.length && (
-					<Tile fontScale='p1' color='info' style={{ textAlign: 'center' }}>
+					<Tile fontScale='p1' color='hint' style={{ textAlign: 'center' }}>
 						{t('No_data_found')}
 					</Tile>
 				)}
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
@ -141,15 +141,15 @@ const MessagesPerChannelSection = (): ReactElement => {
 													<Margins block='neg-x4'>
 														<Box>
 															<Margins block='x4'>
-																<Box color='info' fontScale='p1'>
+																<Box color='hint' fontScale='p1'>
 																	<LegendSymbol color={colors.w500} />
 																	{t('Private_Chats')}
 																</Box>
-																<Box color='info' fontScale='p1'>
+																<Box color='hint' fontScale='p1'>
 																	<LegendSymbol color={colors.s500} />
 																	{t('Private_Channels')}
 																</Box>
-																<Box color='info' fontScale='p1'>
+																<Box color='hint' fontScale='p1'>
 																	<LegendSymbol color={colors.p500} />
 																	{t('Public_Channels')}
 																</Box>
@ -170,7 +170,7 @@ const MessagesPerChannelSection = (): ReactElement => {
 										{table ? <Box fontScale='p1'>{t('Most_popular_channels_top_5')}</Box> : <Skeleton width='50%' />}
 									</Margins>
 									{table && !table.length && (
-										<Tile fontScale='p1' color='info' style={{ textAlign: 'center' }}>
+										<Tile fontScale='p1' color='hint' style={{ textAlign: 'center' }}>
 											{t('Not_enough_data')}
 										</Tile>
 									)}
--- a/apps/meteor/ee/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx
+++ b/apps/meteor/ee/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx
@ -26,7 +26,7 @@ const SeatsCapUsage = ({ limit, members }: SeatsCapUsageProps): ReactElement =>
 				mb='x8'
 			>
 				<div>{t('Seats_Available', { seatsLeft })}</div>
-				<Box color={reachedLimit ? color : 'neutral-700'}>{`${members}/${limit}`}</Box>
+				<Box color={reachedLimit ? color : 'hint'}>{`${members}/${limit}`}</Box>
 			</Box>
 			<ProgressBar borderRadius='x8' overflow='hidden' percentage={percentage} barColor={color} animated={false} w='full' />
 		</Box>
--- a/apps/meteor/ee/client/voip/modal/DialPad/PadButton.tsx
+++ b/apps/meteor/ee/client/voip/modal/DialPad/PadButton.tsx
@ -48,7 +48,7 @@ const PadButton = ({
 			<Box is='span' fontSize='h2' lineHeight='32px'>
 				{firstDigit}
 			</Box>
-			<Box is='span' fontSize='c1' lineHeight='16px' color='info'>
+			<Box is='span' fontSize='c1' lineHeight='16px' color='hint'>
 				{secondDigit}
 			</Box>
 		</Button>
--- a/apps/meteor/ee/server/services/package.json
+++ b/apps/meteor/ee/server/services/package.json
@ -20,13 +20,13 @@
 	"dependencies": {
 		"@rocket.chat/apps-engine": "^1.32.0",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.19",
-		"@rocket.chat/message-parser": "0.31.19",
+		"@rocket.chat/emitter": "next",
+		"@rocket.chat/message-parser": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.19",
-		"@rocket.chat/ui-kit": "0.31.19",
+		"@rocket.chat/string-helpers": "next",
+		"@rocket.chat/ui-kit": "next",
 		"ajv": "^8.11.0",
 		"bcrypt": "^5.0.1",
 		"body-parser": "^1.20.0",
@ -50,7 +50,7 @@
 		"ws": "^8.8.1"
 	},
 	"devDependencies": {
-		"@rocket.chat/icons": "0.31.19",
+		"@rocket.chat/icons": "next",
 		"@types/cookie": "^0.5.1",
 		"@types/cookie-parser": "^1.4.3",
 		"@types/ejson": "^2.2.0",
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@ -202,35 +202,35 @@
 		"@rocket.chat/apps-engine": "latest",
 		"@rocket.chat/cas-validate": "workspace:^",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/css-in-js": "0.31.19",
-		"@rocket.chat/emitter": "0.31.19",
+		"@rocket.chat/css-in-js": "next",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.1",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.2",
-		"@rocket.chat/fuselage": "0.31.19",
-		"@rocket.chat/fuselage-hooks": "0.31.19",
-		"@rocket.chat/fuselage-polyfills": "0.31.19",
-		"@rocket.chat/fuselage-toastbar": "0.31.19",
-		"@rocket.chat/fuselage-tokens": "0.31.19",
-		"@rocket.chat/fuselage-ui-kit": "0.31.19",
+		"@rocket.chat/fuselage": "next",
+		"@rocket.chat/fuselage-hooks": "next",
+		"@rocket.chat/fuselage-polyfills": "next",
+		"@rocket.chat/fuselage-toastbar": "next",
+		"@rocket.chat/fuselage-tokens": "next",
+		"@rocket.chat/fuselage-ui-kit": "next",
 		"@rocket.chat/gazzodown": "workspace:^",
-		"@rocket.chat/icons": "0.31.19",
+		"@rocket.chat/icons": "next",
 		"@rocket.chat/layout": "next",
-		"@rocket.chat/logo": "0.31.19",
-		"@rocket.chat/memo": "0.31.19",
-		"@rocket.chat/message-parser": "0.31.19",
+		"@rocket.chat/logo": "next",
+		"@rocket.chat/memo": "next",
+		"@rocket.chat/message-parser": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/mp3-encoder": "0.24.0",
-		"@rocket.chat/onboarding-ui": "0.31.19",
+		"@rocket.chat/onboarding-ui": "next",
 		"@rocket.chat/poplib": "workspace:^",
 		"@rocket.chat/presence": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.19",
+		"@rocket.chat/string-helpers": "next",
 		"@rocket.chat/ui-client": "workspace:^",
 		"@rocket.chat/ui-composer": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
-		"@rocket.chat/ui-kit": "0.31.19",
+		"@rocket.chat/ui-kit": "next",
 		"@rocket.chat/ui-video-conf": "workspace:^",
 		"@slack/rtm-api": "^6.0.0",
 		"@tanstack/react-query": "^4.0.10",
--- a/ee/apps/account-service/package.json
+++ b/ee/apps/account-service/package.json
@ -16,11 +16,11 @@
 	"author": "Rocket.Chat",
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.19",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.19",
+		"@rocket.chat/string-helpers": "next",
 		"@types/node": "^14.18.21",
 		"bcrypt": "^5.0.1",
 		"ejson": "^2.2.2",
--- a/ee/apps/authorization-service/package.json
+++ b/ee/apps/authorization-service/package.json
@ -16,11 +16,11 @@
 	"author": "Rocket.Chat",
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.19",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.19",
+		"@rocket.chat/string-helpers": "next",
 		"@types/node": "^14.18.21",
 		"ejson": "^2.2.2",
 		"eventemitter3": "^4.0.7",
--- a/ee/apps/ddp-streamer/package.json
+++ b/ee/apps/ddp-streamer/package.json
@ -17,11 +17,11 @@
 	"dependencies": {
 		"@rocket.chat/apps-engine": "^1.32.0",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.19",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.19",
+		"@rocket.chat/string-helpers": "next",
 		"colorette": "^1.4.0",
 		"ejson": "^2.2.2",
 		"eventemitter3": "^4.0.7",
--- a/ee/apps/presence-service/package.json
+++ b/ee/apps/presence-service/package.json
@ -16,11 +16,11 @@
 	"author": "Rocket.Chat",
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.19",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/presence": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.19",
+		"@rocket.chat/string-helpers": "next",
 		"@types/node": "^14.18.21",
 		"ejson": "^2.2.2",
 		"eventemitter3": "^4.0.7",
--- a/ee/apps/stream-hub-service/package.json
+++ b/ee/apps/stream-hub-service/package.json
@ -16,10 +16,10 @@
 	"author": "Rocket.Chat",
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.19",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.19",
+		"@rocket.chat/string-helpers": "next",
 		"@types/node": "^14.18.21",
 		"ejson": "^2.2.2",
 		"eventemitter3": "^4.0.7",
--- a/packages/core-typings/package.json
+++ b/packages/core-typings/package.json
@ -23,8 +23,8 @@
 	],
 	"dependencies": {
 		"@rocket.chat/apps-engine": "^1.32.0",
-		"@rocket.chat/icons": "0.31.19",
-		"@rocket.chat/message-parser": "0.31.19",
-		"@rocket.chat/ui-kit": "0.31.19"
+		"@rocket.chat/icons": "next",
+		"@rocket.chat/message-parser": "next",
+		"@rocket.chat/ui-kit": "next"
 	}
 }
--- a/packages/fuselage-ui-kit/package.json
+++ b/packages/fuselage-ui-kit/package.json
@ -49,12 +49,12 @@
  "devDependencies": {
    "@rocket.chat/apps-engine": "~1.30.0",
    "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "0.31.19",
-    "@rocket.chat/fuselage-hooks": "0.31.19",
-    "@rocket.chat/fuselage-polyfills": "0.31.19",
-    "@rocket.chat/icons": "0.31.19",
+    "@rocket.chat/fuselage": "next",
+    "@rocket.chat/fuselage-hooks": "next",
+    "@rocket.chat/fuselage-polyfills": "next",
+    "@rocket.chat/icons": "next",
    "@rocket.chat/prettier-config": "next",
-    "@rocket.chat/styled": "0.31.19",
+    "@rocket.chat/styled": "next",
    "@storybook/addon-essentials": "~6.5.10",
    "@storybook/addons": "~6.5.10",
    "@storybook/builder-webpack5": "~6.5.10",
@ -78,7 +78,7 @@
    "webpack": "~5.68.0"
  },
  "dependencies": {
-    "@rocket.chat/ui-kit": "0.31.19",
+    "@rocket.chat/ui-kit": "next",
    "tslib": "^2.3.1"
  }
 }
--- a/packages/fuselage-ui-kit/src/blocks/ContextBlock.Item.tsx
+++ b/packages/fuselage-ui-kit/src/blocks/ContextBlock.Item.tsx
@ -24,7 +24,7 @@ const Item = ({
    case UiKit.TextObjectType.PLAIN_TEXT:
    case UiKit.TextObjectType.MARKDOWN:
      return (
-        <Box is='span' fontScale='c1' color='info' margin={4}>
+        <Box is='span' fontScale='c1' color='hint' margin={4}>
          {renderedElement}
        </Box>
      );
--- a/packages/fuselage-ui-kit/src/blocks/ImageBlock.tsx
+++ b/packages/fuselage-ui-kit/src/blocks/ImageBlock.tsx
@ -80,7 +80,7 @@ const ImageBlock = ({
    >
      <Box overflow='hidden' width={width}>
        {block.title && (
-          <Box fontScale='c1' color='info' withTruncatedText marginBlockEnd={4}>
+          <Box fontScale='c1' color='hint' withTruncatedText marginBlockEnd={4}>
            {surfaceRenderer.renderTextObject(
              block.title,
              0,
--- a/packages/fuselage-ui-kit/src/elements/ContextElement/ContextElementItem.tsx
+++ b/packages/fuselage-ui-kit/src/elements/ContextElement/ContextElementItem.tsx
@ -28,7 +28,7 @@ export const ContextElementItem: FC<{
    case ElementType.PLAIN_TEXT:
    case ElementType.MARKDOWN:
      return (
-        <Box is='span' withTruncatedText fontScale='c1' color='info' margin={4}>
+        <Box is='span' withTruncatedText fontScale='c1' color='hint' margin={4}>
          {renderedElement}
        </Box>
      );
--- a/packages/gazzodown/package.json
+++ b/packages/gazzodown/package.json
@ -6,11 +6,11 @@
 		"@babel/core": "^7.18.9",
 		"@mdx-js/react": "^1.6.22",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/css-in-js": "0.31.19",
-		"@rocket.chat/fuselage": "0.31.19",
-		"@rocket.chat/fuselage-tokens": "0.31.19",
-		"@rocket.chat/message-parser": "0.31.19",
-		"@rocket.chat/styled": "0.31.19",
+		"@rocket.chat/css-in-js": "next",
+		"@rocket.chat/fuselage": "next",
+		"@rocket.chat/fuselage-tokens": "next",
+		"@rocket.chat/message-parser": "next",
+		"@rocket.chat/styled": "next",
 		"@rocket.chat/ui-client": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
 		"@storybook/addon-actions": "~6.5.10",
--- a/packages/livechat/package.json
+++ b/packages/livechat/package.json
@ -26,8 +26,8 @@
 		"@babel/eslint-parser": "^7.18.9",
 		"@babel/preset-env": "^7.18.9",
 		"@rocket.chat/eslint-config": "^0.4.0",
-		"@rocket.chat/fuselage-tokens": "0.31.19",
-		"@rocket.chat/logo": "0.31.19",
+		"@rocket.chat/fuselage-tokens": "next",
+		"@rocket.chat/logo": "next",
 		"@storybook/addon-actions": "~6.5.10",
 		"@storybook/addon-backgrounds": "~6.5.10",
 		"@storybook/addon-essentials": "~6.5.10",
@ -87,7 +87,7 @@
 	},
 	"dependencies": {
 		"@rocket.chat/sdk": "^1.0.0-alpha.42",
-		"@rocket.chat/ui-kit": "0.31.19",
+		"@rocket.chat/ui-kit": "next",
 		"crypto-js": "^4.1.1",
 		"css-vars-ponyfill": "^2.4.7",
 		"date-fns": "^2.15.0",
--- a/packages/rest-typings/package.json
+++ b/packages/rest-typings/package.json
@ -26,8 +26,8 @@
 	"dependencies": {
 		"@rocket.chat/apps-engine": "^1.32.0",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/message-parser": "0.31.19",
-		"@rocket.chat/ui-kit": "0.31.19",
+		"@rocket.chat/message-parser": "next",
+		"@rocket.chat/ui-kit": "next",
 		"ajv": "^8.11.0"
 	}
 }
--- a/packages/ui-client/package.json
+++ b/packages/ui-client/package.json
@ -3,10 +3,10 @@
 	"version": "0.0.1",
 	"private": true,
 	"devDependencies": {
-		"@rocket.chat/css-in-js": "0.31.19",
-		"@rocket.chat/fuselage": "0.31.19",
-		"@rocket.chat/fuselage-hooks": "0.31.19",
-		"@rocket.chat/icons": "0.31.19",
+		"@rocket.chat/css-in-js": "next",
+		"@rocket.chat/fuselage": "next",
+		"@rocket.chat/fuselage-hooks": "next",
+		"@rocket.chat/icons": "next",
 		"@rocket.chat/ui-contexts": "workspace:~",
 		"@storybook/addon-actions": "~6.5.10",
 		"@storybook/addon-docs": "~6.5.10",
--- a/packages/ui-client/src/components/Card/Card.tsx
+++ b/packages/ui-client/src/components/Card/Card.tsx
@ -12,7 +12,7 @@ const Card: FC<CardProps> = ({ variant, ...props }: CardProps) => (
 		height='full'
 		display='flex'
 		flexDirection='column'
-		backgroundColor={variant === 'light' ? 'white' : 'neutral-100'}
+		backgroundColor={variant === 'light' ? 'light' : 'tint'}
 		{...props}
 	/>
 );
--- a/packages/ui-client/src/components/Card/CardColSection.tsx
+++ b/packages/ui-client/src/components/Card/CardColSection.tsx
@ -1,6 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps, FC } from 'react';

-const CardColSection: FC<ComponentProps<typeof Box>> = (props) => <Box rcx-card-col-section mb='x8' color='info' {...props} />;
+const CardColSection: FC<ComponentProps<typeof Box>> = (props) => <Box rcx-card-col-section mb='x8' color='hint' {...props} />;

 export default CardColSection;
--- a/packages/ui-client/src/components/Header/HeaderIcon.tsx
+++ b/packages/ui-client/src/components/Header/HeaderIcon.tsx
@ -7,7 +7,7 @@ type HeaderIconProps = { icon: ReactElement | { name: string; color?: string } |
 const HeaderIcon: FC<HeaderIconProps> = ({ icon }) =>
 	icon && (
 		<Box display='flex' flexShrink={0} alignItems='center' size={18} overflow='hidden' justifyContent='center'>
-			{isValidElement(icon) ? icon : <Icon color='info' size='x18' {...{ name: (icon as any).name }} />}
+			{isValidElement(icon) ? icon : <Icon color='annotation' size='x18' {...{ name: (icon as any).name }} />}
 		</Box>
 	);

--- a/packages/ui-client/src/components/Header/HeaderTagIcon.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTagIcon.tsx
@ -1,5 +1,4 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import type { ComponentProps, FC, ReactElement } from 'react';
 import React, { isValidElement } from 'react';

@ -10,7 +9,7 @@ type HeaderIconProps = {
 const HeaderTagIcon: FC<HeaderIconProps> = ({ icon }) =>
 	icon ? (
 		<Box w='x16' mie='x2' display='inline-flex' justifyContent='center'>
-			{isValidElement(icon) ? icon : <Icon size='x16' color={colors.n700} {...icon} />}
+			{isValidElement(icon) ? icon : <Icon size='x16' color='hint' {...icon} />}
 		</Box>
 	) : null;

--- a/packages/ui-client/src/components/Header/ToolBox/ToolboxDivider.tsx
+++ b/packages/ui-client/src/components/Header/ToolBox/ToolboxDivider.tsx
@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';

 const ToolboxDivider: FC<any> = () => (
-	<Box is='hr' w='2px' display='block' backgroundColor='neutral-400' justifySelf='stretch' alignSelf='stretch' mi='x4' />
+	<Box is='hr' w='2x' display='block' backgroundColor='light' justifySelf='stretch' alignSelf='stretch' mi='x4' />
 );

 export default ToolboxDivider;
--- a/packages/ui-composer/package.json
+++ b/packages/ui-composer/package.json
@ -5,8 +5,8 @@
  "devDependencies": {
    "@babel/core": "~7.18.13",
    "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "0.31.19",
-    "@rocket.chat/icons": "0.31.19",
+    "@rocket.chat/fuselage": "next",
+    "@rocket.chat/icons": "next",
    "@storybook/addon-actions": "~6.5.12",
    "@storybook/addon-docs": "~6.5.12",
    "@storybook/addon-essentials": "~6.5.12",
--- a/packages/ui-composer/src/MessageComposer/MessageComposer.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposer.tsx
@ -10,16 +10,7 @@ type MessageComposerProps = Omit<HTMLAttributes<HTMLElement>, 'is'> & {

 const MessageComposer = forwardRef<HTMLElement, MessageComposerProps>(
 	(props, ref): ReactElement => (
-		<Box
-			ref={ref}
-			role='group'
-			borderWidth={2}
-			borderColor='neutral-500'
-			borderRadius='x4'
-			display='flex'
-			flexDirection='column'
-			{...props}
-		/>
+		<Box ref={ref} role='group' borderWidth={2} borderColor='light' borderRadius='x4' display='flex' flexDirection='column' {...props} />
 	),
 );

--- a/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx
@ -2,7 +2,7 @@ import { Divider } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement } from 'react';

 const MessageComposerActionsDivider = ({ height = 'x20', ...props }: ComponentProps<typeof Divider>): ReactElement => (
-	<Divider mi='x4' borderColor='neutral-500' mb={0} backgroundColor='neutral-500' height={height} {...props} />
+	<Divider mi='x4' borderColor='light' mb={0} backgroundColor='neutral-500' height={height} {...props} />
 );

 export default MessageComposerActionsDivider;
--- a/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx
@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement } from 'react';

 const MessageComposerToolbar = (props: ComponentProps<typeof Box>): ReactElement => (
-	<Box backgroundColor='neutral-200' pb='x4' pie='x4' display='flex' justifyContent='space-between' role='toolbar' {...props} />
+	<Box backgroundColor='surface-tint' pb='x4' pie='x4' display='flex' justifyContent='space-between' role='toolbar' {...props} />
 );

 export default MessageComposerToolbar;
--- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx
+++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx
@ -19,10 +19,10 @@ const MessageFooterCallout = forwardRef<
 			})}
 			display='flex'
 			borderWidth={2}
-			borderColor='neutral-500'
+			borderColor='light'
 			borderRadius='x4'
 			p='x8'
-			backgroundColor='neutral-200'
+			backgroundColor='surface-tint'
 			alignItems='center'
 			minHeight='x48'
 			justifyContent='center'
--- a/packages/ui-contexts/package.json
+++ b/packages/ui-contexts/package.json
@ -4,8 +4,8 @@
 	"private": true,
 	"devDependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.19",
-		"@rocket.chat/fuselage-hooks": "0.31.19",
+		"@rocket.chat/emitter": "next",
+		"@rocket.chat/fuselage-hooks": "next",
 		"@rocket.chat/rest-typings": "workspace:^",
 		"@types/jest": "^27.4.1",
 		"@types/react": "^17.0.47",
--- a/packages/ui-video-conf/package.json
+++ b/packages/ui-video-conf/package.json
@ -3,11 +3,11 @@
 	"version": "0.0.1",
 	"private": true,
 	"devDependencies": {
-		"@rocket.chat/css-in-js": "0.31.19",
+		"@rocket.chat/css-in-js": "next",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/fuselage": "0.31.19",
-		"@rocket.chat/fuselage-hooks": "0.31.19",
-		"@rocket.chat/styled": "0.31.19",
+		"@rocket.chat/fuselage": "next",
+		"@rocket.chat/fuselage-hooks": "next",
+		"@rocket.chat/styled": "next",
 		"@types/jest": "^27.4.1",
 		"eslint": "^8.20.0",
 		"eslint-plugin-react": "^7.30.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -4956,12 +4956,12 @@ __metadata:
  resolution: "@rocket.chat/account-service@workspace:ee/apps/account-service"
  dependencies:
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/emitter": 0.31.19
+    "@rocket.chat/emitter": next
    "@rocket.chat/eslint-config": "workspace:^"
    "@rocket.chat/model-typings": "workspace:^"
    "@rocket.chat/models": "workspace:^"
    "@rocket.chat/rest-typings": "workspace:^"
-    "@rocket.chat/string-helpers": 0.31.19
+    "@rocket.chat/string-helpers": next
    "@types/bcrypt": ^5.0.0
    "@types/eslint": ^8
    "@types/node": ^14.18.21
@ -5069,12 +5069,12 @@ __metadata:
  resolution: "@rocket.chat/authorization-service@workspace:ee/apps/authorization-service"
  dependencies:
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/emitter": 0.31.19
+    "@rocket.chat/emitter": next
    "@rocket.chat/eslint-config": "workspace:^"
    "@rocket.chat/model-typings": "workspace:^"
    "@rocket.chat/models": "workspace:^"
    "@rocket.chat/rest-typings": "workspace:^"
-    "@rocket.chat/string-helpers": 0.31.19
+    "@rocket.chat/string-helpers": next
    "@types/eslint": ^8
    "@types/node": ^14.18.21
    "@types/polka": ^0.5.4
@ -5112,9 +5112,9 @@ __metadata:
  dependencies:
    "@rocket.chat/apps-engine": ^1.32.0
    "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/icons": 0.31.19
-    "@rocket.chat/message-parser": 0.31.19
-    "@rocket.chat/ui-kit": 0.31.19
+    "@rocket.chat/icons": next
+    "@rocket.chat/message-parser": next
+    "@rocket.chat/ui-kit": next
    eslint: ^8.20.0
    mongodb: ^4.3.1
    prettier: ^2.7.1
@ -5122,25 +5122,25 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@rocket.chat/css-in-js@npm:0.31.19, @rocket.chat/css-in-js@npm:^0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/css-in-js@npm:0.31.19"
+"@rocket.chat/css-in-js@npm:next, @rocket.chat/css-in-js@npm:~0.31.20-dev.7":
+  version: 0.31.20-dev.7
+  resolution: "@rocket.chat/css-in-js@npm:0.31.20-dev.7"
  dependencies:
    "@emotion/hash": ^0.8.0
-    "@rocket.chat/css-supports": ^0.31.19
-    "@rocket.chat/memo": ^0.31.19
-    "@rocket.chat/stylis-logical-props-middleware": ^0.31.19
+    "@rocket.chat/css-supports": ~0.31.20-dev.7
+    "@rocket.chat/memo": ~0.31.20-dev.7
+    "@rocket.chat/stylis-logical-props-middleware": ~0.31.20-dev.7
    stylis: ~4.0.13
-  checksum: 112fdad44db62096a52f2923020d41f54da857d16fd16f6d1c17b1f39cc56b6234c8c95620407930e069b10aaa390146bae5985d0cedac7bd2dacf794ccf99af
+  checksum: 530558f0822fc7a076bc9a5549368ff355dd30f3ec317db873caeba4460c2780dfe5fba3652895532412e910695d7b5c961b4a191d1524faefb419ffa24fcea7
  languageName: node
  linkType: hard

-"@rocket.chat/css-supports@npm:^0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/css-supports@npm:0.31.19"
+"@rocket.chat/css-supports@npm:~0.31.20-dev.7":
+  version: 0.31.20-dev.7
+  resolution: "@rocket.chat/css-supports@npm:0.31.20-dev.7"
  dependencies:
-    "@rocket.chat/memo": ^0.31.19
-  checksum: cdf333edab8fccf3574422c6d6bce55fb4149cd4f07867b24aceadf07d460cc547686014da38319f7e9c4d182c368a3828e405ef0d2611c9a975f030b49f7812
+    "@rocket.chat/memo": ~0.31.20-dev.7
+  checksum: 164fe0af184ddee193a7d96dbdf52fb93cee77e6654c5c0603e0aa64347650638ac1be3b62e6abdfa9f762abbbd40467eed2c7f2e136fd54f65abb69714d3876
  languageName: node
  linkType: hard

@ -5150,12 +5150,12 @@ __metadata:
  dependencies:
    "@rocket.chat/apps-engine": ^1.32.0
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/emitter": 0.31.19
+    "@rocket.chat/emitter": next
    "@rocket.chat/eslint-config": "workspace:^"
    "@rocket.chat/model-typings": "workspace:^"
    "@rocket.chat/models": "workspace:^"
    "@rocket.chat/rest-typings": "workspace:^"
-    "@rocket.chat/string-helpers": 0.31.19
+    "@rocket.chat/string-helpers": next
    "@types/ejson": ^2.2.0
    "@types/eslint": ^8
    "@types/meteor": 2.7.1
@ -5185,10 +5185,10 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@rocket.chat/emitter@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/emitter@npm:0.31.19"
-  checksum: 4479dc692f9da294927c0f4c01c39b2651885bb75cea010a14e5dd58247a68daae23c27d8bf79f811e9b26eb43041f108435faf82d4476b58fe373bf2d012118
+"@rocket.chat/emitter@npm:next":
+  version: 0.31.20-dev.7
+  resolution: "@rocket.chat/emitter@npm:0.31.20-dev.7"
+  checksum: a2f2c153cb1701cb42377e01371137eb981140545d192289c0254c3bb0fd4245faec9677f84dfefdb8cb501651780893669e445f4aa51376fb96a8b33db2f27c
  languageName: node
  linkType: hard

@ -5291,21 +5291,21 @@ __metadata:
  languageName: node
  linkType: hard

-"@rocket.chat/fuselage-hooks@npm:0.31.19, @rocket.chat/fuselage-hooks@npm:^0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/fuselage-hooks@npm:0.31.19"
+"@rocket.chat/fuselage-hooks@npm:next, @rocket.chat/fuselage-hooks@npm:~0.32.0-dev.83":
+  version: 0.32.0-dev.83
+  resolution: "@rocket.chat/fuselage-hooks@npm:0.32.0-dev.83"
  dependencies:
    use-sync-external-store: ~1.2.0
  peerDependencies:
    "@rocket.chat/fuselage-tokens": "*"
    react: ^17.0.2
-  checksum: 13329a809eba50bb12d9e5e64051cbee24e4c9b4149dfa2b68288d91904582e18c145c157ccf4cf9d5422b4339dfcc723da75d1ffde980b5a10f7ebf04c8abf1
+  checksum: 2421c6cf31d703df7281f075f687976126b38f7d0e8e0abb3e0e61fcaa26eefb4d415f7bed9435d7bf41904ad9525797955812c73e534f4ba04d0801f0678bcc
  languageName: node
  linkType: hard

-"@rocket.chat/fuselage-polyfills@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/fuselage-polyfills@npm:0.31.19"
+"@rocket.chat/fuselage-polyfills@npm:next":
+  version: 0.31.20-dev.7
+  resolution: "@rocket.chat/fuselage-polyfills@npm:0.31.20-dev.7"
  dependencies:
    "@juggle/resize-observer": ^3.3.1
    clipboard-polyfill: ^3.0.3
@ -5313,13 +5313,13 @@ __metadata:
    focus-visible: ^5.2.0
    focus-within-polyfill: ^5.2.1
    new-event-polyfill: ^1.0.1
-  checksum: faa1703abda9e54f3a9a4663be375851e881b5729a7581a5edb7b5691e7ceda15540fc5398b15e2063a4b78667ea97c6db59a02cc233ea8462508121cca5fa5f
+  checksum: 745de3ebf7ab722c0f3a3cc63e0998ecdf8023430f92b47e6639d37baab74331e8873c2667ac4248faabe2cfd8781f557c876cd39bcb81a3ead813ff44b8033f
  languageName: node
  linkType: hard

-"@rocket.chat/fuselage-toastbar@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/fuselage-toastbar@npm:0.31.19"
+"@rocket.chat/fuselage-toastbar@npm:next":
+  version: 0.32.0-dev.144
+  resolution: "@rocket.chat/fuselage-toastbar@npm:0.32.0-dev.144"
  peerDependencies:
    "@rocket.chat/fuselage": "*"
    "@rocket.chat/fuselage-hooks": "*"
@ -5327,22 +5327,22 @@ __metadata:
    "@rocket.chat/styled": "*"
    react: ^17.0.2
    react-dom: ^17.0.2
-  checksum: b3d4704d38ba19f7ca3535a17550afc6e71dca829689ef75c736611bbf6715975b5da72c316696af29cd8173ff838ba737dbcbf580f39e521217ed92b3e71ff4
+  checksum: d17b64baebe1028b47a786b140c0800f01e22c3eda48d65a68bab3f2e20f97df6f1aa2612f60cdb75ba7e2a398134d1b4aa17f49573ddaa80adfb7b30876f732
  languageName: node
  linkType: hard

-"@rocket.chat/fuselage-tokens@npm:0.31.19, @rocket.chat/fuselage-tokens@npm:^0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/fuselage-tokens@npm:0.31.19"
-  checksum: 25252b23da5329bcf2b5193be9a5edbd60e2ecea7c65647924e89d5c72a44104b8ef16f4cfa348c03c28a689b2e324fb6ba566fd415f05d75a178dd926d8430f
+"@rocket.chat/fuselage-tokens@npm:next, @rocket.chat/fuselage-tokens@npm:~0.32.0-dev.120":
+  version: 0.32.0-dev.120
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.120"
+  checksum: 3415a7544c66714e5fe14598b7b3134853f2d26e99677ebb373781b426f669d4baa81ceb1e4a97e042cfffe34e52ca38f05613ec4bc4e6072c603137e5dcf546
  languageName: node
  linkType: hard

-"@rocket.chat/fuselage-ui-kit@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/fuselage-ui-kit@npm:0.31.19"
+"@rocket.chat/fuselage-ui-kit@npm:next":
+  version: 0.32.0-dev.120
+  resolution: "@rocket.chat/fuselage-ui-kit@npm:0.32.0-dev.120"
  dependencies:
-    "@rocket.chat/ui-kit": ^0.31.19
+    "@rocket.chat/ui-kit": ~0.32.0-dev.105
    tslib: ^2.3.1
  peerDependencies:
    "@rocket.chat/fuselage": "*"
@ -5352,7 +5352,7 @@ __metadata:
    "@rocket.chat/styled": "*"
    react: ^17.0.2
    react-dom: ^17.0.2
-  checksum: a5f0a5e8de7c53b00aee091b8f27754504b08c4fe02c19c9f44635baa3a0a9aa284a657cd9b5eaf4f9054da5e4faebb532f7ae38f66df1dfe873a857067cb7a6
+  checksum: b734014ee3173f03728057a8d1360b9c6340145d0cf138f5ca9631fe6d7475f32f0d2091bfb315efe755b0b9dd94889261b0f6080963a34ae44abe6661266a94
  languageName: node
  linkType: hard

@ -5362,13 +5362,13 @@ __metadata:
  dependencies:
    "@rocket.chat/apps-engine": ~1.30.0
    "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": 0.31.19
-    "@rocket.chat/fuselage-hooks": 0.31.19
-    "@rocket.chat/fuselage-polyfills": 0.31.19
-    "@rocket.chat/icons": 0.31.19
+    "@rocket.chat/fuselage": next
+    "@rocket.chat/fuselage-hooks": next
+    "@rocket.chat/fuselage-polyfills": next
+    "@rocket.chat/icons": next
    "@rocket.chat/prettier-config": next
-    "@rocket.chat/styled": 0.31.19
-    "@rocket.chat/ui-kit": 0.31.19
+    "@rocket.chat/styled": next
+    "@rocket.chat/ui-kit": next
    "@storybook/addon-essentials": ~6.5.10
    "@storybook/addons": ~6.5.10
    "@storybook/builder-webpack5": ~6.5.10
@ -5402,15 +5402,15 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@rocket.chat/fuselage@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/fuselage@npm:0.31.19"
+"@rocket.chat/fuselage@npm:next":
+  version: 0.32.0-dev.170
+  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.170"
  dependencies:
-    "@rocket.chat/css-in-js": ^0.31.19
-    "@rocket.chat/css-supports": ^0.31.19
-    "@rocket.chat/fuselage-tokens": ^0.31.19
-    "@rocket.chat/memo": ^0.31.19
-    "@rocket.chat/styled": ^0.31.19
+    "@rocket.chat/css-in-js": ~0.31.20-dev.7
+    "@rocket.chat/css-supports": ~0.31.20-dev.7
+    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.120
+    "@rocket.chat/memo": ~0.31.20-dev.7
+    "@rocket.chat/styled": ~0.31.20-dev.7
    invariant: ^2.2.4
    react-aria: ~3.19.0
    react-keyed-flatten-children: ^1.3.0
@ -5422,7 +5422,7 @@ __metadata:
    react: ^17.0.2
    react-dom: ^17.0.2
    react-virtuoso: 1.2.4
-  checksum: 8c627d50fce3dfe5c88aec447ac6c411a2f3f8a529bd843f9b28093ff2374f8d6e518733050bea2c526f5e91206b1dc02547a6d3e1a791af036d7ddecb67b97a
+  checksum: b225fa3705fdab79bbae1e3eff84746a29e8ff51d627cefd743ad2f1c841353c4543f4efd2cfa43cfbda885b9d081900dc1fd9c2766ad6c09260de1a0785e009
  languageName: node
  linkType: hard

@ -5433,11 +5433,11 @@ __metadata:
    "@babel/core": ^7.18.9
    "@mdx-js/react": ^1.6.22
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/css-in-js": 0.31.19
-    "@rocket.chat/fuselage": 0.31.19
-    "@rocket.chat/fuselage-tokens": 0.31.19
-    "@rocket.chat/message-parser": 0.31.19
-    "@rocket.chat/styled": 0.31.19
+    "@rocket.chat/css-in-js": next
+    "@rocket.chat/fuselage": next
+    "@rocket.chat/fuselage-tokens": next
+    "@rocket.chat/message-parser": next
+    "@rocket.chat/styled": next
    "@rocket.chat/ui-client": "workspace:^"
    "@rocket.chat/ui-contexts": "workspace:^"
    "@storybook/addon-actions": ~6.5.10
@ -5487,22 +5487,22 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@rocket.chat/icons@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/icons@npm:0.31.19"
-  checksum: 1a0fc681baa1b41c67d2c4c5ebcb3db0120c7341f9e398a6f1da320e0fe6932a83d4ef68fb7e5bab7fa6dcd0f495fd2f032e3586c98567ad6ba726f6af8c07ec
+"@rocket.chat/icons@npm:next":
+  version: 0.32.0-dev.152
+  resolution: "@rocket.chat/icons@npm:0.32.0-dev.152"
+  checksum: c003409e6f50744619b6327ea46da1545f1e0eedfb213714d81972c09adc564ce0d9e4861e4ec18c693b99e4f3075df6f331ff041f2eec1c881e63cc093f8552
  languageName: node
  linkType: hard

 "@rocket.chat/layout@npm:next":
-  version: 0.32.0-dev.34
-  resolution: "@rocket.chat/layout@npm:0.32.0-dev.34"
+  version: 0.32.0-dev.53
+  resolution: "@rocket.chat/layout@npm:0.32.0-dev.53"
  peerDependencies:
    "@rocket.chat/fuselage": "*"
    react: 17.0.2
    react-dom: 17.0.2
    react-i18next: ~11.15.4
-  checksum: 303c91323119322d0e97852e639f632a7baec7b1fd6ce2406df7b8df2ebf56f5451b788d060f074df29c2dec0232de465a0d1a2bab2be9fc2531670a656ab23f
+  checksum: b2b639b1c32d6dd884021d89f8255e32b01d25dd7a432e5f49aea4a9aa7b98fe15f74b51a509f2c96b8f4a1e221b0f9d9e124cf93a5b90d1abb68c63a29367dd
  languageName: node
  linkType: hard

@ -5513,10 +5513,10 @@ __metadata:
    "@babel/eslint-parser": ^7.18.9
    "@babel/preset-env": ^7.18.9
    "@rocket.chat/eslint-config": ^0.4.0
-    "@rocket.chat/fuselage-tokens": 0.31.19
-    "@rocket.chat/logo": 0.31.19
+    "@rocket.chat/fuselage-tokens": next
+    "@rocket.chat/logo": next
    "@rocket.chat/sdk": ^1.0.0-alpha.42
-    "@rocket.chat/ui-kit": 0.31.19
+    "@rocket.chat/ui-kit": next
    "@storybook/addon-actions": ~6.5.10
    "@storybook/addon-backgrounds": ~6.5.10
    "@storybook/addon-essentials": ~6.5.10
@ -5589,31 +5589,31 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@rocket.chat/logo@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/logo@npm:0.31.19"
+"@rocket.chat/logo@npm:next":
+  version: 0.32.0-dev.120
+  resolution: "@rocket.chat/logo@npm:0.32.0-dev.120"
  dependencies:
-    "@rocket.chat/fuselage-hooks": ^0.31.19
-    "@rocket.chat/styled": ^0.31.19
+    "@rocket.chat/fuselage-hooks": ~0.32.0-dev.83
+    "@rocket.chat/styled": ~0.31.20-dev.7
    tslib: ^2.3.1
  peerDependencies:
    react: 17.0.2
    react-dom: 17.0.2
-  checksum: f29176cd4571f1db26aeab9cc08408fa29f620659c48758b5c19090857ecf05705e001d5be61d95303fa76d7113f6fd3f522427a90daa9552598204e6dfb572c
+  checksum: 95d5b7b3f9ef68eecadb8b5bb72122bf6f2dd7589b1865da822335c0ad8afbfb4be4e28ce7efb10db5a0c5b041b2a2d5189113be2f411a62d1f4fc3c630de090
  languageName: node
  linkType: hard

-"@rocket.chat/memo@npm:0.31.19, @rocket.chat/memo@npm:^0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/memo@npm:0.31.19"
-  checksum: 6d0341b8dbe80aef421914277d2dc3100efaac9fb6296f8fab3dd885dad40c9b211ced7b8e6dcbb7c9b05732f676bbc767585be20ab306a6234a7a0c191886b9
+"@rocket.chat/memo@npm:next, @rocket.chat/memo@npm:~0.31.20-dev.7":
+  version: 0.31.20-dev.7
+  resolution: "@rocket.chat/memo@npm:0.31.20-dev.7"
+  checksum: 174d0f8188acc9bfa52b5adaddd2880f1d4fe3d2c4a7188d53796a00bfca3de864b724391fbb9b9401568f1d4b81e67f7c58411487207f2adc1d9ebff42bf651
  languageName: node
  linkType: hard

-"@rocket.chat/message-parser@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/message-parser@npm:0.31.19"
-  checksum: 648f4dae31ac3ba0aa93e9b030a4cf2df9b59bc212027daff5755ad6ed15632401a3fa56831bb98627cedeae18d5eab499e890cd4331d634eb6def52595b9431
+"@rocket.chat/message-parser@npm:next":
+  version: 0.32.0-dev.118
+  resolution: "@rocket.chat/message-parser@npm:0.32.0-dev.118"
+  checksum: ebb174caca091d11d71a56f1ddd4f1df54c9b58f7840422f688a9060f38cd42d62cfc4efd929447cf9186b1fc71a0d092bac76b5303a6ba68e6df9be713139c8
  languageName: node
  linkType: hard

@ -5643,37 +5643,37 @@ __metadata:
    "@rocket.chat/apps-engine": latest
    "@rocket.chat/cas-validate": "workspace:^"
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/css-in-js": 0.31.19
-    "@rocket.chat/emitter": 0.31.19
+    "@rocket.chat/css-in-js": next
+    "@rocket.chat/emitter": next
    "@rocket.chat/eslint-config": "workspace:^"
    "@rocket.chat/favicon": "workspace:^"
    "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.1
    "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.2
-    "@rocket.chat/fuselage": 0.31.19
-    "@rocket.chat/fuselage-hooks": 0.31.19
-    "@rocket.chat/fuselage-polyfills": 0.31.19
-    "@rocket.chat/fuselage-toastbar": 0.31.19
-    "@rocket.chat/fuselage-tokens": 0.31.19
-    "@rocket.chat/fuselage-ui-kit": 0.31.19
+    "@rocket.chat/fuselage": next
+    "@rocket.chat/fuselage-hooks": next
+    "@rocket.chat/fuselage-polyfills": next
+    "@rocket.chat/fuselage-toastbar": next
+    "@rocket.chat/fuselage-tokens": next
+    "@rocket.chat/fuselage-ui-kit": next
    "@rocket.chat/gazzodown": "workspace:^"
-    "@rocket.chat/icons": 0.31.19
+    "@rocket.chat/icons": next
    "@rocket.chat/layout": next
    "@rocket.chat/livechat": "workspace:^"
-    "@rocket.chat/logo": 0.31.19
-    "@rocket.chat/memo": 0.31.19
-    "@rocket.chat/message-parser": 0.31.19
+    "@rocket.chat/logo": next
+    "@rocket.chat/memo": next
+    "@rocket.chat/message-parser": next
    "@rocket.chat/model-typings": "workspace:^"
    "@rocket.chat/models": "workspace:^"
    "@rocket.chat/mp3-encoder": 0.24.0
-    "@rocket.chat/onboarding-ui": 0.31.19
+    "@rocket.chat/onboarding-ui": next
    "@rocket.chat/poplib": "workspace:^"
    "@rocket.chat/presence": "workspace:^"
    "@rocket.chat/rest-typings": "workspace:^"
-    "@rocket.chat/string-helpers": 0.31.19
+    "@rocket.chat/string-helpers": next
    "@rocket.chat/ui-client": "workspace:^"
    "@rocket.chat/ui-composer": "workspace:^"
    "@rocket.chat/ui-contexts": "workspace:^"
-    "@rocket.chat/ui-kit": 0.31.19
+    "@rocket.chat/ui-kit": next
    "@rocket.chat/ui-video-conf": "workspace:^"
    "@settlin/spacebars-loader": ^1.0.9
    "@slack/rtm-api": ^6.0.0
@ -5982,9 +5982,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@rocket.chat/onboarding-ui@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/onboarding-ui@npm:0.31.19"
+"@rocket.chat/onboarding-ui@npm:next":
+  version: 0.32.0-dev.170
+  resolution: "@rocket.chat/onboarding-ui@npm:0.32.0-dev.170"
  dependencies:
    i18next: ~21.6.11
    react-hook-form: ~7.27.0
@ -6000,7 +6000,7 @@ __metadata:
    react: 17.0.2
    react-dom: 17.0.2
    react-i18next: ~11.15.4
-  checksum: 0a39c168d0617afc48e3f22742554d3a7f3f0142ed21e2cebfd2df4c1897ddd6066e64c01d1cb0261c0c3805842d16f41d972b6d75399836db0808e8d8cccccc
+  checksum: b1b0b745f1e32c8da62d35b1b72484aae6587d067b2d19028d8bbf7182d17ca0203f30148de61dde3e9cd4344397e620baeb80fd9adc1da648a065123ff6aa04
  languageName: node
  linkType: hard

@ -6021,12 +6021,12 @@ __metadata:
  resolution: "@rocket.chat/presence-service@workspace:ee/apps/presence-service"
  dependencies:
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/emitter": 0.31.19
+    "@rocket.chat/emitter": next
    "@rocket.chat/eslint-config": "workspace:^"
    "@rocket.chat/model-typings": "workspace:^"
    "@rocket.chat/models": "workspace:^"
    "@rocket.chat/presence": "workspace:^"
-    "@rocket.chat/string-helpers": 0.31.19
+    "@rocket.chat/string-helpers": next
    "@types/eslint": ^8
    "@types/node": ^14.18.21
    "@types/polka": ^0.5.4
@ -6081,8 +6081,8 @@ __metadata:
    "@rocket.chat/apps-engine": ^1.32.0
    "@rocket.chat/core-typings": "workspace:^"
    "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/message-parser": 0.31.19
-    "@rocket.chat/ui-kit": 0.31.19
+    "@rocket.chat/message-parser": next
+    "@rocket.chat/ui-kit": next
    "@types/jest": ^27.4.1
    ajv: ^8.11.0
    eslint: ^8.20.0
@ -6111,11 +6111,11 @@ __metadata:
  resolution: "@rocket.chat/stream-hub-service@workspace:ee/apps/stream-hub-service"
  dependencies:
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/emitter": 0.31.19
+    "@rocket.chat/emitter": next
    "@rocket.chat/eslint-config": "workspace:^"
    "@rocket.chat/model-typings": "workspace:^"
    "@rocket.chat/models": "workspace:^"
-    "@rocket.chat/string-helpers": 0.31.19
+    "@rocket.chat/string-helpers": next
    "@types/bcrypt": ^5.0.0
    "@types/eslint": ^8
    "@types/node": ^14.18.21
@ -6135,34 +6135,34 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@rocket.chat/string-helpers@npm:0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/string-helpers@npm:0.31.19"
+"@rocket.chat/string-helpers@npm:next":
+  version: 0.31.20-dev.7
+  resolution: "@rocket.chat/string-helpers@npm:0.31.20-dev.7"
  dependencies:
    tslib: ^2.3.1
-  checksum: f969599a460d833698d5667caec5ae64fe59a679ecab9ce5abccc262a1b4611dcefc6eaf3343c98f30e87d01f058a41bfac1c8cc47a9eb22c9aba23b7d680f56
+  checksum: 5fb4af6e1da308d35962983496508e9ea1e660792163205913866c7ec3537c57d591658ceaf3e5c6be72c1951527ea795938cc749a4bdf82843265e4f5084152
  languageName: node
  linkType: hard

-"@rocket.chat/styled@npm:0.31.19, @rocket.chat/styled@npm:^0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/styled@npm:0.31.19"
+"@rocket.chat/styled@npm:next, @rocket.chat/styled@npm:~0.31.20-dev.7":
+  version: 0.31.20-dev.7
+  resolution: "@rocket.chat/styled@npm:0.31.20-dev.7"
  dependencies:
-    "@rocket.chat/css-in-js": ^0.31.19
+    "@rocket.chat/css-in-js": ~0.31.20-dev.7
    tslib: ^2.3.1
-  checksum: f6221bbe57b724cb79790d61c705873c7be08667a9c122315d21e2f2d6adc0fcf81becdf87cf838f9ee8a801b0497ca0d6a1f9e5254a7915ce30dab701598dbd
+  checksum: aa255c45de5edeeb63aaf1c67a84f3405aef9c791a8ee758a31f35d2b28dbf384f77acdeb5cea74bd272b4660b0a64b54ee005d6d1c848efca3982d4d2681c11
  languageName: node
  linkType: hard

-"@rocket.chat/stylis-logical-props-middleware@npm:^0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.19"
+"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.20-dev.7":
+  version: 0.31.20-dev.7
+  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.20-dev.7"
  dependencies:
-    "@rocket.chat/css-supports": ^0.31.19
+    "@rocket.chat/css-supports": ~0.31.20-dev.7
    tslib: ^2.3.1
  peerDependencies:
    stylis: 4.0.10
-  checksum: dca6467fbe636cc10fa8298e65ae3052eb4da5cc803d4e77fee5e9d2aa806b65fa01bc82edb9f17e5defbcf49e3d4f0365f4a01b241cd3c1e10c187cc8777de6
+  checksum: 43abadbdd5d474136320bbbbb3a338bdebb513e240d4258b66f36167d69524140f065daa79edea4b0fe3a2cd05530e6e297c3971825d682887c3c19d7e21ad1e
  languageName: node
  linkType: hard

@ -6170,10 +6170,10 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@rocket.chat/ui-client@workspace:packages/ui-client"
  dependencies:
-    "@rocket.chat/css-in-js": 0.31.19
-    "@rocket.chat/fuselage": 0.31.19
-    "@rocket.chat/fuselage-hooks": 0.31.19
-    "@rocket.chat/icons": 0.31.19
+    "@rocket.chat/css-in-js": next
+    "@rocket.chat/fuselage": next
+    "@rocket.chat/fuselage-hooks": next
+    "@rocket.chat/icons": next
    "@rocket.chat/ui-contexts": "workspace:~"
    "@storybook/addon-actions": ~6.5.10
    "@storybook/addon-docs": ~6.5.10
@ -6219,8 +6219,8 @@ __metadata:
  dependencies:
    "@babel/core": ~7.18.13
    "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": 0.31.19
-    "@rocket.chat/icons": 0.31.19
+    "@rocket.chat/fuselage": next
+    "@rocket.chat/icons": next
    "@storybook/addon-actions": ~6.5.12
    "@storybook/addon-docs": ~6.5.12
    "@storybook/addon-essentials": ~6.5.12
@ -6250,8 +6250,8 @@ __metadata:
  resolution: "@rocket.chat/ui-contexts@workspace:packages/ui-contexts"
  dependencies:
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/emitter": 0.31.19
-    "@rocket.chat/fuselage-hooks": 0.31.19
+    "@rocket.chat/emitter": next
+    "@rocket.chat/fuselage-hooks": next
    "@rocket.chat/rest-typings": "workspace:^"
    "@types/jest": ^27.4.1
    "@types/react": ^17.0.47
@ -6273,10 +6273,10 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@rocket.chat/ui-kit@npm:0.31.19, @rocket.chat/ui-kit@npm:^0.31.19":
-  version: 0.31.19
-  resolution: "@rocket.chat/ui-kit@npm:0.31.19"
-  checksum: 4c837ca9e56b0d20875dac1fa0c29c0cfb9d8d088f7f75bb355fc8ad04ec670b0c19f43dd6459510b666ef173bcf1a3d913bdb3d82e052bceefd1e2a54c5f19b
+"@rocket.chat/ui-kit@npm:next, @rocket.chat/ui-kit@npm:~0.32.0-dev.105":
+  version: 0.32.0-dev.105
+  resolution: "@rocket.chat/ui-kit@npm:0.32.0-dev.105"
+  checksum: d49b53a4686dc53999a1f1e3c3081ab50483bddef4c6fa7fffd275b4ae4deb265b3f726c9b81a54c9a282206b61c43313d36d41cc6c61ec13b8a5cae57953faf
  languageName: node
  linkType: hard

@ -6284,11 +6284,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@rocket.chat/ui-video-conf@workspace:packages/ui-video-conf"
  dependencies:
-    "@rocket.chat/css-in-js": 0.31.19
+    "@rocket.chat/css-in-js": next
    "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": 0.31.19
-    "@rocket.chat/fuselage-hooks": 0.31.19
-    "@rocket.chat/styled": 0.31.19
+    "@rocket.chat/fuselage": next
+    "@rocket.chat/fuselage-hooks": next
+    "@rocket.chat/styled": next
    "@types/jest": ^27.4.1
    eslint: ^8.20.0
    eslint-plugin-react: ^7.30.1
@ -22995,7 +22995,7 @@ __metadata:
  resolution: "lamejs@https://github.com/zhuker/lamejs.git#commit=582bbba6a12f981b984d8fb9e1874499fed85675"
  dependencies:
    use-strict: 1.0.1
-  checksum: ed7f6f1c9629b53c17023eb04b4fc5a222e9c34fcb4a2f61214488fc64e5cfea825e4588d959c5fb20f3a91f0120103fa60307dd43df995d498ff5ddb6200cd9
+  checksum: fa829e0c170a65573e653b4d908a44aaf06a50e1bbade3b1217a300a03ccd59a537e294e2d924a584f9d70c7726a12d4c3af9c675436d48d08be5fb94b5eb400
  languageName: node
  linkType: hard

@ -23117,7 +23117,7 @@ __metadata:
      optional: true
  bin:
    lessc: ./bin/lessc
-  checksum: c9646e8377f8ce59648891ecdb7ebf1aea23349d145cc2f7d192785b8ede1677eb2582aa991175dcf18a63a092f81a1d3f8554a2826493f94d6db82b6007f409
+  checksum: 61568b56b5289fdcfe3d51baf3c13e7db7140022c0a37ef0ae343169f0de927a4b4f4272bc10c20101796e8ee79e934e024051321bba93b3ae071f734309bd98
  languageName: node
  linkType: hard

@ -30433,14 +30433,14 @@ __metadata:
  dependencies:
    "@rocket.chat/apps-engine": ^1.32.0
    "@rocket.chat/core-typings": "workspace:^"
-    "@rocket.chat/emitter": 0.31.19
-    "@rocket.chat/icons": 0.31.19
-    "@rocket.chat/message-parser": 0.31.19
+    "@rocket.chat/emitter": next
+    "@rocket.chat/icons": next
+    "@rocket.chat/message-parser": next
    "@rocket.chat/model-typings": "workspace:^"
    "@rocket.chat/models": "workspace:^"
    "@rocket.chat/rest-typings": "workspace:^"
-    "@rocket.chat/string-helpers": 0.31.19
-    "@rocket.chat/ui-kit": 0.31.19
+    "@rocket.chat/string-helpers": next
+    "@rocket.chat/ui-kit": next
    "@types/cookie": ^0.5.1
    "@types/cookie-parser": ^1.4.3
    "@types/ejson": ^2.2.0