fix(be-teaser): mute styles [EE-6035] (#10349)

app/react/components/Tip/Tooltip/Tooltip.tsx

@@ -1,14 +1,26 @@
 import { HelpCircle } from 'lucide-react';
 import { ReactNode, useMemo } from 'react';
 import sanitize from 'sanitize-html';
+import clsx from 'clsx';
 
 import { TooltipWithChildren, Position } from '../TooltipWithChildren';
 
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+const sizeClasses: Record<Size, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+};
+
 export interface Props {
   position?: Position;
   message: ReactNode;
   className?: string;
   setHtmlMessage?: boolean;
+  size?: Size;
 }
 
 export function Tooltip({
@@ -16,6 +28,7 @@ export function Tooltip({
   position = 'bottom',
   className,
   setHtmlMessage,
+  size = 'md',
 }: Props) {
   // allow angular views to set html messages for the tooltip
   const htmlMessage = useMemo(() => {
@@ -27,14 +40,14 @@ export function Tooltip({
   }, [setHtmlMessage, message]);
 
   return (
-    <TooltipWithChildren
-      message={htmlMessage || message}
-      position={position}
-      className={className}
-    >
-      <span className="inline-flex text-base">
-        <HelpCircle className="lucide ml-1" aria-hidden="true" />
-      </span>
-    </TooltipWithChildren>
+    <span className={clsx('ml-1 inline-flex items-center', sizeClasses[size])}>
+      <TooltipWithChildren
+        message={htmlMessage || message}
+        position={position}
+        className={className}
+      >
+        <HelpCircle className="lucide" aria-hidden="true" />
+      </TooltipWithChildren>
+    </span>
   );
 }