@moderneinc/neo-styled-components 5.0.0-next.12a890 → 5.0.0-next.17550d

package/dist/Tooltip/Tooltip.d.ts

@@ -1,4 +1,5 @@
 import { type TooltipProps } from '@mui/material/Tooltip';
+import type { ReactNode } from 'react';
 /**
  * Variant type for NeoTooltip
  */
@@ -14,13 +15,15 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
      */
     variant?: TooltipVariant;
     /**
-     * The main tooltip text
+     * The main tooltip content. Accepts a string or any ReactNode, so callers can
+     * compose richer content when the `description` variant isn't enough.
      * @figma text (literal content, not a variant property)
      */
-    title: string;
+    title: ReactNode;
     /**
-     * Optional supporting description text
-     * When provided, shows a larger tooltip with title (semibold) + description (medium)
+     * Optional supporting description text. When provided, shows a larger tooltip
+     * with a heading + body hierarchy: title (13px semibold) above a muted
+     * description (12px medium).
      * @default undefined
      * @figma Supporting text
      */
@@ -45,7 +48,7 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
  * - Dark: grey[50] (#f9fafb), grey[800] (#1f2937)
  * - Brand: digitalBlue[800] (#131e7a), typography.tooltip (#ffffff)
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
- * - Typography: fontSize.xs (12), fontWeight.medium (500), fontWeight.semiBold (600)
+ * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
  */
 export declare const NeoTooltip: {
     ({ variant, title, description, children, arrow, placement, ...props }: NeoTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -3053,13 +3053,15 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
      */
     variant?: TooltipVariant;
     /**
-     * The main tooltip text
+     * The main tooltip content. Accepts a string or any ReactNode, so callers can
+     * compose richer content when the `description` variant isn't enough.
      * @figma text (literal content, not a variant property)
      */
-    title: string;
+    title: ReactNode;
     /**
-     * Optional supporting description text
-     * When provided, shows a larger tooltip with title (semibold) + description (medium)
+     * Optional supporting description text. When provided, shows a larger tooltip
+     * with a heading + body hierarchy: title (13px semibold) above a muted
+     * description (12px medium).
      * @default undefined
      * @figma Supporting text
      */
@@ -3084,7 +3086,7 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
  * - Dark: grey[50] (#f9fafb), grey[800] (#1f2937)
  * - Brand: digitalBlue[800] (#131e7a), typography.tooltip (#ffffff)
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
- * - Typography: fontSize.xs (12), fontWeight.medium (500), fontWeight.semiBold (600)
+ * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
  */
 declare const NeoTooltip: {
     ({ variant, title, description, children, arrow, placement, ...props }: NeoTooltipProps): react_jsx_runtime.JSX.Element;

package/dist/index.esm.js

@@ -6933,13 +6933,13 @@ const StyledTooltip = styled(Tooltip, {
  * - Dark: grey[50] (#f9fafb), grey[800] (#1f2937)
  * - Brand: digitalBlue[800] (#131e7a), typography.tooltip (#ffffff)
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
- * - Typography: fontSize.xs (12), fontWeight.medium (500), fontWeight.semiBold (600)
+ * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
  */
 const NeoTooltip = ({ variant = 'light', title, description, children, arrow = false, placement, ...props }) => {
     // Build the title content
     // If description is provided, create a structured layout with title + description
     // Otherwise, just show the title text
-    const titleContent = description ? (jsxs(Stack, { gap: 0.25, children: [jsx(Typography, { fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.semiBold, children: title }), jsx(Typography, { fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.medium, children: description })] })) : (title);
+    const titleContent = description ? (jsxs(Stack, { gap: 0.5, children: [jsx(Typography, { fontSize: typography.fontSize.caption, fontWeight: typography.fontWeight.semiBold, children: title }), jsx(Typography, { fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.medium, sx: { opacity: 0.75 }, children: description })] })) : (title);
     return (jsx(StyledTooltip, { variant: variant, description: description, title: titleContent, arrow: arrow, placement: placement, ...props, children: children }));
 };
 NeoTooltip.displayName = 'NeoTooltip';