@moderneinc/design-system-components 7.5.1-next.fef5b2 → 7.5.2-next.20bee0

package/dist/Alert/Alert.d.ts

@@ -16,8 +16,10 @@ export interface ModAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
     type?: AlertType;
     /**
      * Vertical density. `default` is page-level (64px fixed height,
-     * supports title + description). `compact` is inline-panel use
-     * (auto height, 40px min, single-line optimized for terse messages).
+     * supports title + description). `compact` is inline-panel use (auto
+     * height, unchanged for single-line content up to a 32px-tall `action`,
+     * growing with comfortable padding once the message wraps onto multiple
+     * lines).
      * @default "default"
      */
     size?: AlertSize;

package/dist/index.d.ts

@@ -324,8 +324,10 @@ interface ModAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color
     type?: AlertType;
     /**
      * Vertical density. `default` is page-level (64px fixed height,
-     * supports title + description). `compact` is inline-panel use
-     * (auto height, 40px min, single-line optimized for terse messages).
+     * supports title + description). `compact` is inline-panel use (auto
+     * height, unchanged for single-line content up to a 32px-tall `action`,
+     * growing with comfortable padding once the message wraps onto multiple
+     * lines).
      * @default "default"
      */
     size?: AlertSize;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticColorsDark, semanticTypography, height } from '@moderneinc/design-system-tokens';
+import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticColorsDark, semanticTypography, iconSize, height } from '@moderneinc/design-system-tokens';
 import Box from '@mui/material/Box';
 import { styled, useTheme, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
@@ -494,12 +494,16 @@ const StyledAlert$2 = styled(Alert, {
     const messageColor = isFilled
         ? semanticColors.color.text.tooltip
         : semanticColors.color.text.primary;
+    // Content-box sizing adds padding on top of minHeight, not absorbed by
+    // it, so minHeight is reduced by the same amount here — otherwise every
+    // compact alert would grow by the full padding, wrapped or not.
+    const { verticalPadding, ...sizeStyles } = isCompact
+        ? { minHeight: spacing.spacing_4, verticalPadding: spacing.spacing_1_2 }
+        : hasChildren
+            ? { minHeight: spacing.spacing_8, height: 'auto', verticalPadding: spacing.spacing_1_1_2 }
+            : { height: spacing.spacing_8, verticalPadding: 0 };
     return {
-        ...(isCompact
-            ? { minHeight: spacing.spacing_5 }
-            : hasChildren
-                ? { minHeight: spacing.spacing_8, height: 'auto' }
-                : { height: spacing.spacing_8 }),
+        ...sizeStyles,
         width: '100%',
         borderRadius: borderRadius.xS,
         alignItems: hasChildren ? 'flex-start' : 'center',
@@ -507,9 +511,7 @@ const StyledAlert$2 = styled(Alert, {
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         fontWeight: typography.fontWeight.semiBold,
         lineHeight: 1.5,
-        padding: hasChildren
-            ? `${spacing.spacing_1_1_2}px ${spacing.spacing_2}px`
-            : `0 ${spacing.spacing_2}px`,
+        padding: `${verticalPadding}px ${spacing.spacing_2}px`,
         backgroundColor: isFilled ? palette.fg : palette.bg,
         border: isFilled ? 'none' : `1px solid ${palette.tint}`,
         color: isFilled ? semanticColors.color.text.tooltip : semanticColors.color.text.primary,
@@ -1849,7 +1851,7 @@ const IconWrapper$1 = styled('span')(({ theme }) => ({
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    fontSize: theme.typography.pxToRem(typography.fontSize.h4),
+    fontSize: theme.typography.pxToRem(iconSize.lg),
     color: semanticColors.color.icon.default,
 }));
 const LabelContainer$3 = styled('div')({