@moderneinc/neo-styled-components 5.0.0-next.78c447 → 5.0.0-next.9f913f

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { semanticColors, spacing, typography, borderRadius, shadows, colors } from '@moderneinc/neo-design';
+import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticTypography } from '@moderneinc/neo-design';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
@@ -453,7 +453,7 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -464,7 +464,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 }).join(" ").trim();
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -473,7 +473,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -485,7 +485,7 @@ const toCamelCase = (string) => string.replace(
 );
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -498,7 +498,7 @@ const toPascalCase = (string) => {
 };
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -517,7 +517,7 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -567,7 +567,7 @@ const Icon = forwardRef(
 );
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -592,7 +592,7 @@ const createLucideIcon = (iconName, iconNode) => {
 };
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -606,7 +606,7 @@ const __iconNode$k = [
 const ArrowDown = createLucideIcon("arrow-down", __iconNode$k);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -620,7 +620,7 @@ const __iconNode$j = [
 const ArrowUp = createLucideIcon("arrow-up", __iconNode$j);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -641,7 +641,7 @@ const __iconNode$i = [
 const BadgeInfo = createLucideIcon("badge-info", __iconNode$i);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -663,7 +663,7 @@ const __iconNode$h = [
 const CalendarDays = createLucideIcon("calendar-days", __iconNode$h);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -674,7 +674,7 @@ const __iconNode$g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
 const ChevronDown = createLucideIcon("chevron-down", __iconNode$g);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -685,7 +685,7 @@ const __iconNode$f = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
 const ChevronLeft = createLucideIcon("chevron-left", __iconNode$f);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -696,7 +696,7 @@ const __iconNode$e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
 const ChevronRight = createLucideIcon("chevron-right", __iconNode$e);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -707,7 +707,7 @@ const __iconNode$d = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
 const ChevronUp = createLucideIcon("chevron-up", __iconNode$d);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -721,7 +721,7 @@ const __iconNode$c = [
 const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -736,7 +736,7 @@ const __iconNode$b = [
 const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -750,7 +750,7 @@ const __iconNode$a = [
 const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$a);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -765,7 +765,7 @@ const __iconNode$9 = [
 const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$9);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -780,7 +780,7 @@ const __iconNode$8 = [
 const Columns3 = createLucideIcon("columns-3", __iconNode$8);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -795,7 +795,7 @@ const __iconNode$7 = [
 const ListFilter = createLucideIcon("list-filter", __iconNode$7);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -806,7 +806,7 @@ const __iconNode$6 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
 const Minus = createLucideIcon("minus", __iconNode$6);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -820,7 +820,7 @@ const __iconNode$5 = [
 const Plus = createLucideIcon("plus", __iconNode$5);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -834,7 +834,7 @@ const __iconNode$4 = [
 const Search = createLucideIcon("search", __iconNode$4);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -851,7 +851,7 @@ const __iconNode$3 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$3);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -872,7 +872,7 @@ const __iconNode$2 = [
 const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -891,7 +891,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -1020,38 +1020,43 @@ const StyledAlert$1 = styled(Alert, {
         };
     return {
         width: '100%',
-        minHeight: 52,
-        paddingTop: spacing.spacing_3_4,
-        paddingBottom: spacing.spacing_3_4,
-        paddingLeft: spacing.spacing_3,
-        paddingRight: spacing.spacing_3,
-        gap: spacing.spacing_2,
+        // Include padding in the width so the full-width banner never overflows its
+        // container (don't rely on a global border-box reset being present).
+        boxSizing: 'border-box',
+        // Square corners by default: banners are full-width and typically sit flush
+        // against the top of the viewport, so rounded corners would break the seam.
+        borderRadius: 0,
+        minHeight: 32,
+        paddingTop: spacing.spacing_1_2,
+        paddingBottom: spacing.spacing_1_2,
+        paddingLeft: spacing.spacing_2,
+        paddingRight: spacing.spacing_2,
+        gap: spacing.spacing_1,
         alignItems: 'center',
         justifyContent: messagePosition === 'center' ? 'center' : 'flex-start',
         ...(messagePosition === 'center' && { position: 'relative' }),
-        boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
-        fontSize: typography.fontSize.default,
+        fontSize: typography.fontSize.sm,
         fontWeight: typography.fontWeight.medium,
         lineHeight: 1.5,
         ...typeStyles,
         [`& .${alertClasses.icon}`]: {
             padding: 0,
             opacity: 1,
-            fontSize: typography.fontSize.h2,
+            fontSize: typography.fontSize.default,
             color: 'inherit',
         },
         [`& .${alertClasses.message}`]: {
             padding: 0,
             display: 'flex',
             alignItems: 'center',
-            gap: spacing.spacing_2,
+            gap: spacing.spacing_1,
             ...(messagePosition === 'left' && { flex: 1 }),
         },
         [`& .${alertClasses.action}`]: {
             padding: 0,
             ...(messagePosition === 'center' && {
                 position: 'absolute',
-                right: spacing.spacing_3,
+                right: spacing.spacing_2,
             }),
         },
     };
@@ -1069,6 +1074,8 @@ const LinkText = styled('span')(({ bannerType = 'outlined' }) => ({
     },
 }));
 const StyledIconButton = styled(IconButton)(({ closeIconColor }) => ({
+    minWidth: 24,
+    minHeight: 24,
     padding: 0,
     color: closeIconColor,
     '&:hover': {
@@ -1085,7 +1092,7 @@ const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
         return null;
     }
     const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors$1[intent].default;
-    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
+    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 16 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -5612,10 +5619,9 @@ const StickyHeader = styled(Box)(({ theme }) => ({
  * Page title typography
  */
 const PageTitle = styled(Typography)(() => ({
-    fontSize: typography.fontSize.h3,
-    fontWeight: typography.fontWeight.medium,
+    ...semanticTypography.titles.pageHeader,
     lineHeight: 1.4,
-    color: colors.grey['900'], // #111827 - matches Figma typography/page-header
+    color: colors.grey['900'],
 }));
 /**
  * Subtitle typography
@@ -5714,7 +5720,7 @@ function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
         // Also try to scroll window in case component is in a different context
         window.scrollTo({ top: 0, behavior: 'smooth' });
     };
-    const headerContent = (jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.items.length > 0 && (jsx(NeoBreadcrumbs, { children: breadcrumbs.items.map((item, index) => (jsx(NeoBreadcrumbLink, { href: item.href, component: item.href && breadcrumbs.linkComponent ? breadcrumbs.linkComponent : undefined, current: index === breadcrumbs.items.length - 1, children: item.label }, item.href ?? index))) })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [typeof pageTitle === 'string' ? jsx(PageTitle, { children: pageTitle }) : pageTitle, subtitle &&
+    const headerContent = (jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.items.length > 0 && (jsx(NeoBreadcrumbs, { children: breadcrumbs.items.map((item, index) => (jsx(NeoBreadcrumbLink, { href: item.href, component: item.href && breadcrumbs.linkComponent ? breadcrumbs.linkComponent : undefined, current: index === breadcrumbs.items.length - 1, children: item.label }, item.href ?? index))) })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [typeof pageTitle === 'string' ? (jsx(PageTitle, { component: "h1", children: pageTitle })) : (pageTitle), subtitle &&
                                 (typeof subtitle === 'string' ? (jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] })] }));
     const content = isLoading ? (jsx(Box, { sx: {
             display: 'flex',
@@ -6927,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, { fontWeight: typography.fontWeight.semiBold, children: title }), jsx(Typography, { 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';