made the icon size helper a forward ref

library/src/components/IconSizeHelper.tsx

@@ -1,29 +1,37 @@
 import { css } from "@emotion/css"
-import React, { type ComponentPropsWithoutRef } from "react"
+import {
+	type ForwardedRef,
+	forwardRef,
+	type ComponentPropsWithRef,
+} from "react"
 import { twMerge } from "tailwind-merge"
 
 /**
  * IconSizeHelper helps to set a size for an icon.
  * It can size spans, svgs and spans with svgs inside.
  */
-export function IconSizeHelper({
-	size,
-	children,
-	style,
-	className,
-	...props
-}: {
-	size?: number | string
-} & ComponentPropsWithoutRef<"div">) {
-	const sizeProp = typeof size === "number" ? `${size}px` : size
+const IconSizeHelper = forwardRef(
+	(
+		{
+			size,
+			children,
+			style,
+			className,
+			...props
+		}: {
+			size?: number | string
+		} & ComponentPropsWithRef<"div">,
+		ref: ForwardedRef<HTMLDivElement>,
+	) => {
+		const sizeProp = typeof size === "number" ? `${size}px` : size
 
-	const centerHelperClass = css`
+		const centerHelperClass = css`
 		span {
 			display: inline-flex;
 		}
 	`
 
-	const sizeHelperClass = css`
+		const sizeHelperClass = css`
 		width: ${sizeProp};
 		height: ${sizeProp};
 
@@ -35,18 +43,22 @@ export function IconSizeHelper({
 		}
 	`
 
-	return (
-		<div
-			className={twMerge(
-				centerHelperClass,
-				sizeProp != null ? sizeHelperClass : undefined,
-				"inline-flex flex-none items-center justify-center",
-				className,
-			)}
-			style={style}
-			{...props}
-		>
-			{children}
-		</div>
-	)
-}
+		return (
+			<div
+				className={twMerge(
+					centerHelperClass,
+					sizeProp != null ? sizeHelperClass : undefined,
+					"inline-flex flex-none items-center justify-center",
+					className,
+				)}
+				style={style}
+				ref={ref}
+				{...props}
+			>
+				{children}
+			</div>
+		)
+	},
+)
+
+export { IconSizeHelper }