Update themed components with refs and css

lib/component/message/MessageBlock.tsx

@@ -1,16 +1,14 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 
 
-export default function MessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		outline = "sm",
-		rounded = "lg",
-		...messageProps
-	} = props;
-
-
+const MessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	outline = "sm",
+	rounded = "lg",
+	...messageProps
+}, ref ) => {
 	return (
 		<div
 			data-testid="mattrixwv-message-block"
@@ -33,6 +31,11 @@ export default function MessageBlock(props: MessageBlockProps){
 					"rounded-xl": rounded === "xl"
 				}
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+MessageBlock.displayName = "MessageBlock";
+
+export default MessageBlock;