@12-apps/ui 6.18.0 → 6.19.1

package/src/components/typography/Paragraph/Paragraph.tsx

@@ -1,9 +1,22 @@
-import type { Theme } from '@mui/material/styles/index.js';
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import {
+  LEAD_FONT_SIZE,
+  LEAD_LETTER_SPACING_EM,
+  LEAD_LINE_HEIGHT,
+  MUTED_OPACITY,
+  PARAGRAPH_FONT_WEIGHT,
+  PARAGRAPH_MARGIN_BOTTOM_EM,
+  PARAGRAPH_SIZES,
+  SMALL_FONT_SIZE,
+  SMALL_LINE_HEIGHT,
+} from './Paragraph.metrics';
 import type { ParagraphProps } from './Paragraph.types';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { px } from '../../../tokens/theme';
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -22,6 +35,20 @@ const getColorFromTheme = (theme: Theme, color: string) => {
   return colorMap[color] || theme.palette.text.primary;
 };
 
+// Derived from the shared metrics, not restated: the native `Paragraph` reads
+// the same table, so the two renderers cannot disagree on a size.
+const sizeMap: Record<string, { fontSize: string; lineHeight: number }> = Object.fromEntries(
+  Object.entries(PARAGRAPH_SIZES).map(([size, step]) => [
+    size,
+    { fontSize: px(step.fontSize), lineHeight: step.lineHeight },
+  ]),
+);
+
+// `lead` and `small` shrink or grow relative to the scale, but only at the
+// default size — an explicit size wins.
+const sizeOverride = (customSize: string, atDefault: number): string | undefined =>
+  customSize === 'md' ? px(atDefault) : sizeMap[customSize]?.fontSize;
+
 const StyledParagraph = styled(Typography, {
   shouldForwardProp: (prop) =>
     !['customVariant', 'customColor', 'customSize'].includes(prop as string),
@@ -32,61 +59,56 @@ const StyledParagraph = styled(Typography, {
 }>(({ theme, customVariant = 'default', customColor = 'neutral', customSize = 'md' }) => {
   const textColor = getColorFromTheme(theme, customColor);
 
-  // Size mapping
-  const sizeMap = {
-    xs: { fontSize: '0.75rem', lineHeight: 1.4 },
-    sm: { fontSize: '0.875rem', lineHeight: 1.5 },
-    md: { fontSize: '1rem', lineHeight: 1.6 },
-    lg: { fontSize: '1.125rem', lineHeight: 1.6 },
-    xl: { fontSize: '1.25rem', lineHeight: 1.7 },
-  };
-
-  const baseStyles = {
+  const baseStyles: CSSObject = {
     fontFamily: theme.typography.body1.fontFamily,
-    margin: '0 0 1em 0',
+    margin: `0 0 ${PARAGRAPH_MARGIN_BOTTOM_EM}em 0`,
     transition: 'all 0.2s ease',
-    ...sizeMap[customSize as keyof typeof sizeMap],
+    ...sizeMap[customSize],
   };
 
   // Variant-specific styles
-  const variantStyles = {
+  const variantStyles: Record<string, CSSObject> = {
     default: {
       ...baseStyles,
       color: textColor,
-      fontWeight: 400,
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
     },
     lead: {
       ...baseStyles,
       color: textColor,
-      fontWeight: 400,
-      fontSize:
-        customSize === 'md' ? '1.125rem' : sizeMap[customSize as keyof typeof sizeMap]?.fontSize,
-      lineHeight: 1.7,
-      letterSpacing: '0.01em',
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      fontSize: sizeOverride(customSize, LEAD_FONT_SIZE),
+      lineHeight: LEAD_LINE_HEIGHT,
+      letterSpacing: `${LEAD_LETTER_SPACING_EM}em`,
     },
     muted: {
       ...baseStyles,
       color: theme.palette.text.secondary,
-      fontWeight: 400,
-      opacity: 0.8,
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      opacity: MUTED_OPACITY,
     },
     small: {
       ...baseStyles,
       color: theme.palette.text.secondary,
-      fontSize:
-        customSize === 'md' ? '0.875rem' : sizeMap[customSize as keyof typeof sizeMap]?.fontSize,
-      fontWeight: 400,
-      lineHeight: 1.5,
+      fontSize: sizeOverride(customSize, SMALL_FONT_SIZE),
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      lineHeight: SMALL_LINE_HEIGHT,
     },
   };
 
-  return variantStyles[customVariant as keyof typeof variantStyles] || variantStyles.default;
+  return variantStyles[customVariant] || variantStyles.default;
 });
 
 export const Paragraph = React.forwardRef<globalThis.HTMLParagraphElement, ParagraphProps>(
-  ({ variant = 'default', color = 'neutral', size = 'md', children, ...props }, ref) => (
+  ({ variant = 'default', color = 'neutral', size = 'md', children, ...others }, ref) => {
+    // `testID` and `dataTestId` are the shared contract's spellings; the DOM
+    // wants `data-testid`, and must not see the other two as attributes.
+    const testId = resolveTestId(others);
+    const props = withoutTestIdProps(others);
+    return (
       <StyledParagraph
         ref={ref}
+        data-testid={testId}
         customVariant={variant}
         customColor={color}
         customSize={size}
@@ -94,7 +116,8 @@ export const Paragraph = React.forwardRef<globalThis.HTMLParagraphElement, Parag
       >
         {children}
       </StyledParagraph>
-    ),
+    );
+  },
 );
 
-Paragraph.displayName = 'Paragraph';
+Paragraph.displayName = 'Paragraph';

package/src/components/typography/Paragraph/Paragraph.types.native.ts

@@ -0,0 +1,17 @@
+import type { GestureResponderEvent, StyleProp, TextProps as RNTextProps, TextStyle } from 'react-native';
+
+import type { ParagraphBaseProps } from './Paragraph.base';
+
+export type { ParagraphBaseProps, ParagraphVariant } from './Paragraph.base';
+
+/**
+ * The native `Paragraph`: the shared contract, plus a react-native `Text`'s
+ * own props. `onClick` keeps its web name and `onPress` is accepted too, as on
+ * `Button`; both fire.
+ */
+export type ParagraphProps = ParagraphBaseProps &
+  Omit<RNTextProps, keyof ParagraphBaseProps | 'style' | 'onPress'> & {
+    onClick?: (event: GestureResponderEvent) => void;
+    onPress?: (event: GestureResponderEvent) => void;
+    style?: StyleProp<TextStyle>;
+  };

package/src/components/typography/Paragraph/Paragraph.types.ts

@@ -1,11 +1,10 @@
-import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type React from 'react';
 
-export type ParagraphVariant = 'default' | 'lead' | 'muted' | 'small';
+import type { ParagraphBaseProps } from './Paragraph.base';
 
-export interface ParagraphProps extends React.HTMLAttributes<globalThis.HTMLParagraphElement> {
-  variant?: ParagraphVariant;
-  color?: ColorValue;
-  size?: SizeValue;
-  children: React.ReactNode;
-}
+export type { ParagraphBaseProps, ParagraphVariant } from './Paragraph.base';
+
+/** The web `Paragraph`: the shared contract, plus everything a `<p>` accepts. */
+export interface ParagraphProps
+  extends ParagraphBaseProps,
+    Omit<React.HTMLAttributes<globalThis.HTMLParagraphElement>, 'color' | 'children'> {}

package/src/components/typography/Paragraph/index.native.ts

@@ -0,0 +1,2 @@
+export { Paragraph, paragraphStyle } from './Paragraph.native';
+export type { ParagraphBaseProps, ParagraphProps, ParagraphVariant } from './Paragraph.types.native';

package/src/components/typography/Paragraph/index.ts

@@ -1,2 +1,2 @@
 export { Paragraph } from './Paragraph';
-export type { ParagraphProps } from './Paragraph.types';
+export type { ParagraphBaseProps, ParagraphProps, ParagraphVariant } from './Paragraph.types';

package/src/platform/aria.ts

@@ -0,0 +1,32 @@
+/**
+ * ARIA ATTRIBUTES REACT NATIVE DOES NOT DECLARE.
+ *
+ * React Native's `ViewProps` (0.83) type a dozen `aria-*` props and stop:
+ * `aria-level`, `aria-atomic` and `aria-describedby` are not among them.
+ * react-native-web forwards all three to the DOM — and `aria-level` also
+ * picks the heading tag, so a `role="heading"` at level 3 renders an `<h3>`
+ * exactly as the MUI half's `component="h3"` does — while a device ignores
+ * them. A native component spreads them through here rather than widening
+ * the element's props type or casting at every call site.
+ */
+export interface WebAria {
+  'aria-level'?: 1 | 2 | 3 | 4 | 5 | 6;
+  'aria-atomic'?: 'true' | 'false';
+  'aria-describedby'?: string;
+}
+
+/**
+ * `attrs` as something JSX can spread onto a react-native element without
+ * that element's props type having to know them.
+ *
+ * `aria-atomic` travels under react-native-web's own older name. Its
+ * `createDOMProps` (0.20.0) reads `aria-activedescendant` where it means
+ * `aria-atomic` — `_ariaAtomic = ariaAtomic != null ? ariaActiveDescendant :
+ * accessibilityAtomic` — so the modern spelling never reaches the DOM and
+ * the legacy one, still accepted and still emitted as `aria-atomic`, does.
+ * Neither name exists on a device, so nothing is lost there.
+ */
+export function webAria(attrs: WebAria): object {
+  const { 'aria-atomic': atomic, ...rest } = attrs;
+  return atomic === undefined ? rest : { ...rest, accessibilityAtomic: atomic };
+}

package/src/platform/text-children.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Text as RNText, type TextStyle } from 'react-native';
+
+/**
+ * FREE-FORM CHILDREN, FLOWING AS THE WEB FLOWS THEM.
+ *
+ * `<Alert>O total é {total}.</Alert>` is THREE children — a string, a number
+ * and another string. The web lays them out inline, as one sentence. React
+ * Native has no inline text outside a `Text`, so a native component has to
+ * wrap them; wrapping each child on its own puts every fragment on its own
+ * line, which is what the harness caught: an alert body reading
+ *
+ *     O corpo do alerta na variante
+ *     success
+ *     .
+ *
+ * So CONSECUTIVE text children are grouped into one `Text` — the run flows as
+ * a sentence — and any element child ends the run and renders as given, the
+ * way a block element interrupts a paragraph on the web.
+ */
+const isText = (child: React.ReactNode): child is string | number =>
+  typeof child === 'string' || typeof child === 'number';
+
+/**
+ * Fragments are flattened first. A caller writing `<Alert><>{a} de {b}</></Alert>`
+ * hands over ONE child, and `React.Children.toArray` does not look inside it —
+ * so without this the fragment would reach React Native holding bare strings,
+ * which throws "Text strings must be rendered within a <Text> component".
+ */
+function flatten(children: React.ReactNode): React.ReactNode[] {
+  return React.Children.toArray(children).flatMap((child) =>
+    React.isValidElement(child) && child.type === React.Fragment
+      ? flatten((child.props as { children?: React.ReactNode }).children)
+      : [child],
+  );
+}
+
+export function renderTextChildren(
+  children: React.ReactNode,
+  style: TextStyle,
+  /** Passed to each run, for a surface that clips rather than wraps (a button label). */
+  numberOfLines?: number,
+): React.ReactNode {
+  const out: React.ReactNode[] = [];
+  let run: Array<string | number> = [];
+
+  const flush = (): void => {
+    if (run.length === 0) return;
+    out.push(
+      <RNText key={`text-${out.length}`} style={style} numberOfLines={numberOfLines}>
+        {run}
+      </RNText>,
+    );
+    run = [];
+  };
+
+  for (const child of flatten(children)) {
+    if (isText(child)) {
+      run.push(child);
+      continue;
+    }
+    flush();
+    out.push(child);
+  }
+  flush();
+
+  return out;
+}

package/src/tokens/mui-type.ts

@@ -0,0 +1,64 @@
+import type { UiTheme } from './theme';
+
+/**
+ * MUI'S DEFAULT `Typography` VARIANTS, AS NUMBERS.
+ *
+ * Several web components render a title or a message BY NAME —
+ * `<Typography variant="h6">` — and let MUI's theme turn the name into a
+ * size. The native halves have no MUI theme, so they need the numbers MUI's
+ * `createTypography` produces for those names. These are those numbers, for
+ * the variants the ported components use: `fontSize` in px, `lineHeight` as
+ * a ratio, `letterSpacing` in em exactly as MUI rounds it
+ * (`round(letterSpacing / size)`, five decimals).
+ *
+ * Only the DEFAULTS. A host that re-themes `typography.h6` moves the web
+ * halves and not these; each component that reads this records that as a
+ * known gap in its `NATIVE-NOTES.md`.
+ */
+export type MuiTypeVariantName = 'h6' | 'body1' | 'body2';
+
+export interface MuiTypeVariant {
+  fontSize: number;
+  lineHeight: number;
+  fontWeight: 400 | 500;
+  letterSpacingEm: number;
+}
+
+export const MUI_TYPE: Record<MuiTypeVariantName, MuiTypeVariant> = {
+  h6: { fontSize: 20, lineHeight: 1.6, fontWeight: 500, letterSpacingEm: 0.0075 },
+  body1: { fontSize: 16, lineHeight: 1.5, fontWeight: 400, letterSpacingEm: 0.00938 },
+  body2: { fontSize: 14, lineHeight: 1.43, fontWeight: 400, letterSpacingEm: 0.01071 },
+};
+
+/** MUI's `theme.typography.fontWeightMedium`, which several web styles name outright. */
+export const MUI_FONT_WEIGHT_MEDIUM = 500;
+
+/** A variant multiplied out for a renderer whose `lineHeight` and `letterSpacing` are absolute. */
+export interface MuiTypeStyle {
+  fontFamily: string | undefined;
+  fontSize: number;
+  lineHeight: number;
+  fontWeight: `${MuiTypeVariant['fontWeight']}`;
+  letterSpacing: number;
+}
+
+/**
+ * The variant as absolute numbers, in the theme's font. `fontSize` may be
+ * overridden — the Alert's title is `body1` at 1.05rem — and the ratios
+ * follow it, which is what the browser does with `em` and a unitless
+ * line-height.
+ */
+export function muiTypeStyle(
+  theme: Pick<UiTheme, 'typography'>,
+  variant: MuiTypeVariantName,
+  fontSize: number = MUI_TYPE[variant].fontSize,
+): MuiTypeStyle {
+  const step = MUI_TYPE[variant];
+  return {
+    fontFamily: theme.typography.fontFamily,
+    fontSize,
+    lineHeight: fontSize * step.lineHeight,
+    fontWeight: `${step.fontWeight}`,
+    letterSpacing: fontSize * step.letterSpacingEm,
+  };
+}

package/dist/chunk-5ERH4OIK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Alert/Alert.styles.tsx"],"sourcesContent":["import Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nexport const pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 10px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n// Additional animations can be enabled as needed\n// const slideInAnimation = keyframes`\n//   from {\n//     transform: translateX(-100%);\n//     opacity: 0;\n//   }\n//   to {\n//     transform: translateX(0);\n//     opacity: 1;\n//   }\n// `;\n\n// const bounceIn = keyframes`\n//   0% {\n//     transform: scale(0.3);\n//     opacity: 0;\n//   }\n//   50% {\n//     transform: scale(1.05);\n//   }\n//   70% {\n//     transform: scale(0.9);\n//   }\n//   100% {\n//     transform: scale(1);\n//     opacity: 1;\n//   }\n// `;\n\n// Removed unused slideInAnimation - can be re-added if needed for future features\n\nexport const shimmerAnimation = keyframes`\n  0% {\n    background-position: -1000px 0;\n  }\n  100% {\n    background-position: 1000px 0;\n  }\n`;\n\nexport const fadeInScale = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n`;\n\nexport const iconRotate = keyframes`\n  0% {\n    transform: rotate(0deg) scale(0.8);\n  }\n  50% {\n    transform: rotate(180deg) scale(1.1);\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\nexport const getColorFromTheme = (theme: Theme, variant: string) => {\n  const colorMap: Record<string, { main: string; light?: string; dark?: string }> = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    danger: theme.palette.error,\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    neutral: {\n      main: theme.palette.grey[500] || '#9E9E9E',\n      light: theme.palette.grey[300] || '#E0E0E0',\n      dark: theme.palette.grey[700] || '#616161',\n    },\n  };\n\n  return colorMap[variant] || theme.palette.info;\n};\n\nexport const getVariantIcon = (variant: string) => {\n  const iconMap: Record<string, React.ReactNode> = {\n    info: <Info />,\n    success: <CheckCircle />,\n    warning: <Warning />,\n    danger: <Error />,\n  };\n\n  return iconMap[variant];\n};\n\n// The palette shape getColorFromTheme returns — a main plus optional light/dark,\n// which is narrower than MUI's PaletteColor.\nexport type AlertPalette = { main: string; light?: string; dark?: string };\n\n/** The four semantic variants, which differ only in which palette they read. */\nconst SEMANTIC_VARIANTS = new Set(['info', 'success', 'warning', 'danger']);\n\n/**\n * The room the message is given — padding, the stack's rhythm, and where the\n * icon and the close button sit relative to it.\n *\n * Extracted for the same reason {@link alertVariantStyles} and\n * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and\n * every block written inline is counted against its length by the complexity\n * gate. Keeping the layout here means the callback assembles four named pieces\n * instead of carrying all of them.\n */\nexport const alertLayoutStyles = (\n  theme: Theme,\n  colorPalette: AlertPalette,\n  animate: boolean | undefined,\n): CSSObject => ({\n  // ROOM TO READ.\n  //\n  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert\n  // routinely carries three things stacked — a sentence, a smaller explanation,\n  // then a control — and at 6px they touched top and bottom and ran together\n  // vertically, so the whole card read as one dense block instead of as a\n  // message with parts. The generosity is what makes the structure legible; it\n  // is not decoration.\n  //\n  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants\n  // it tight), because this is a default rather than a rule.\n  padding: theme.spacing(1.75, 2),\n\n  '.MuiAlert-message': {\n    display: 'flex',\n    flexDirection: 'column',\n    // 0.5 put a title, its explanation and a button 4px apart, which reads as a\n    // spacing bug rather than as a group. 1 separates the lines; the extra\n    // margin below goes to whatever CONTROL sits at the end, because the gap\n    // between prose and a thing you press has to be bigger than the gap between\n    // two lines of prose or the button looks like part of the text.\n    gap: theme.spacing(1),\n    fontSize: '0.95rem',\n    lineHeight: 1.5,\n    // No padding of its own — the root's is now doing that job, and MUI's\n    // default `8px 0` on top of it would double the vertical space.\n    padding: 0,\n    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.\n    //\n    // `ghost` and `text` paint no background and no border — bare labels, which\n    // works on white where the surrounding page is obviously not clickable.\n    // Inside a coloured Alert it stops working: the label is one more coloured\n    // phrase among several, and a \"Cancelar\" beside two lines of prose reads as\n    // part of the prose.\n    //\n    // Only the BORDER is set, never the background or the colour, and that is\n    // what makes it safe to apply to every button rather than just the bare\n    // ones: a `solid` keeps its fill and its light label and gains a hairline\n    // in the same hue, while a `ghost` gains the whole affordance.\n    '.MuiButton-root': {\n      marginTop: theme.spacing(0.5),\n      border: `1px solid ${alpha(colorPalette.main, 0.45)}` },\n  },\n\n  '.MuiAlert-icon': {\n    transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    alignItems: 'center',\n    // Clear of the words rather than nearly touching them, and aligned to the\n    // FIRST line instead of centred on the whole block — an icon floating\n    // halfway down a three-line message points at nothing.\n    alignSelf: 'flex-start',\n    marginRight: theme.spacing(1.75),\n    paddingTop: theme.spacing(0.25),\n    animation: animate ? `${iconRotate} 0.6s ease-out` : 'none' },\n\n  // The close button, kept off the text it sits beside.\n  '.MuiAlert-action': {\n    alignItems: 'flex-start',\n    paddingLeft: theme.spacing(2) },\n});\n\n/**\n * A semantic Alert's surface and ink.\n *\n * ## Why this is not `alpha(main, 0.1)`\n *\n * It used to be, four times over, with `color: main` for the text. Both halves\n * were wrong, and independently so.\n *\n * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something\n * opaque is behind it, so the component silently depended on where a consumer\n * put it. Placed over content — a floating notice, an invite anchored above a\n * catalogue — the page came straight through and the sentence interleaved with\n * whatever it was over. That is not a faint banner; it is an unreadable one,\n * and nothing in the component said so.\n *\n * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info\n * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is\n * involved. So the text failed on a plain white page too, where the fill was\n * behaving exactly as intended.\n *\n * ## Why `lighten`/`darken` rather than a hand-picked pair\n *\n * These are the same transforms MUI's own `standard` Alert uses, at the same\n * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint\n * with a dark ink of the same hue, contrast that holds on any surface because\n * it no longer depends on one, and a pairing already proven across MUI's\n * palette rather than eyeballed here. Both modes are handled: on a dark theme\n * the tint darkens and the ink lightens, which an alpha wash could never do\n * because it carries the seed's own lightness through unchanged.\n *\n * The border keeps an alpha — it is a hairline over the tint it belongs to, so\n * translucency there costs nothing and lets the edge follow the fill.\n */\nconst semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {\n  const dark = theme.palette.mode === 'dark';\n  return {\n    backgroundColor: dark ? darken(colorPalette.main, 0.8) : lighten(colorPalette.main, 0.9),\n    color: dark ? lighten(colorPalette.main, 0.6) : darken(colorPalette.main, 0.6),\n    border: `1px solid ${alpha(colorPalette.main, 0.35)}`,\n    '.MuiAlert-icon': {\n      color: colorPalette.main,\n    },\n  };\n};\n\n// The six visual variants. Each block is spread in only when it matches, which\n// is how the original inline version read; keeping that shape here means the\n// styled() callback carries one branch instead of six. The four semantics were\n// four IDENTICAL copies of the same block — they now share one, so the next\n// change to a banner's surface cannot land on three of them.\nexport const alertVariantStyles = (\n  theme: Theme,\n  customVariant: string | undefined,\n  colorPalette: AlertPalette,\n): CSSObject => ({\n...(customVariant !== undefined &&\n  SEMANTIC_VARIANTS.has(customVariant) &&\n  semanticSurface(theme, colorPalette)),\n\n...(customVariant === 'glass' && {\n  // 85%, not 10%. This is the variant that is MEANT to be see-through, and it\n  // was the same mistake in a costume: at 0.1 the blur had almost nothing to\n  // sit on, so `glass` was not frosted, it was a window. A frosted pane has to\n  // be mostly pane — the backdrop should be legible AS texture behind the\n  // text, never as competition with it.\n  backgroundColor: alpha(theme.palette.background.paper, 0.85),\n  backdropFilter: 'blur(20px) saturate(180%)',\n  WebkitBackdropFilter: 'blur(20px) saturate(180%)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.4)}`,\n  color: theme.palette.text.primary,\n  '.MuiAlert-icon': {\n    color: theme.palette.primary.main,\n  },\n  // Safari before 18 and Firefox with the filter disabled paint the declared\n  // alpha with nothing blurred behind it — the see-through banner this is\n  // fixing. There is no degraded frost to fall back to, so it falls back to an\n  // opaque pane: less pretty, still readable.\n  '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {\n    backgroundColor: theme.palette.background.paper,\n  },\n}),\n\n...(customVariant === 'gradient' && {\n  background: `linear-gradient(135deg, ${alpha(colorPalette.light || colorPalette.main, 0.9)}, ${alpha(colorPalette.dark || colorPalette.main, 0.9)})`,\n  color: theme.palette.getContrastText(colorPalette.main),\n  border: 'none',\n  position: 'relative',\n  overflow: 'hidden',\n  '.MuiAlert-icon': {\n    color: theme.palette.getContrastText(colorPalette.main),\n  },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: '-1000px',\n    width: '100%',\n    height: '100%',\n    background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, 0.2)}, transparent)`,\n    animation: `${shimmerAnimation} 3s infinite`,\n  },\n  '&:hover': {\n    filter: 'brightness(1.1)',\n    transform: 'translateY(-2px) scale(1.01)',\n  },\n}),\n});\n\n// glow and pulse combine into three distinct looks, so the combinations are\n// spelled out rather than layered — layering them would let the glow-only shadow\n// leak into the glow+pulse case.\nexport const alertEmphasisStyles = (\n  colorPalette: AlertPalette,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n...(glow &&\n  !pulse && {\n    boxShadow: `0 0 20px 5px ${alpha(colorPalette.main, 0.3)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n\n// Pulse animation\n...(pulse &&\n  !glow && {\n    position: 'relative',\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      borderRadius: 'inherit',\n      backgroundColor: colorPalette.main,\n      opacity: 0.2,\n      animation: `${pulseAnimation} 2s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n  }),\n\n// Both glow and pulse\n...(glow &&\n  pulse && {\n    position: 'relative',\n    boxShadow: `0 0 20px 5px ${alpha(colorPalette.main, 0.3)} !important`,\n    filter: 'brightness(1.05)',\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      borderRadius: 'inherit',\n      backgroundColor: colorPalette.main,\n      opacity: 0.2,\n      animation: `${pulseAnimation} 2s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n  }),\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-7M5BACFQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/EmptyState/EmptyState.tsx"],"sourcesContent":["import AddIcon from '@mui/icons-material/Add';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { EmptyStateProps } from './EmptyState.types';\n\ntype EmptyStateVariant = NonNullable<EmptyStateProps['variant']>;\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;\n\ninterface ActionSpec {\n  key: string;\n  variant: 'contained' | 'outlined';\n  onClick: () => void;\n  label: string;\n  icon?: React.ReactNode;\n}\n\n// The four buttons are one button with different props. Listing them keeps their\n// order — primary, create, secondary, refresh — visible in one place.\nconst actionsOf = (\n  props: EmptyStateProps,\n  refreshLabel: string,\n  createLabel: string,\n): ActionSpec[] => {\n  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;\n  const specs: ActionSpec[] = [];\n\n  if (primaryAction) {\n    specs.push({\n      key: 'primary-action',\n      variant: 'contained',\n      onClick: primaryAction.onClick,\n      label: primaryAction.label,\n    });\n  }\n  if (onCreate) {\n    specs.push({\n      key: 'create-button',\n      variant: 'contained',\n      onClick: onCreate,\n      label: createLabel,\n      icon: <AddIcon />,\n    });\n  }\n  if (secondaryAction) {\n    specs.push({\n      key: 'secondary-action',\n      variant: 'outlined',\n      onClick: secondaryAction.onClick,\n      label: secondaryAction.label,\n    });\n  }\n  if (onRefresh) {\n    specs.push({\n      key: 'refresh-button',\n      variant: 'outlined',\n      onClick: onRefresh,\n      label: refreshLabel,\n      icon: <RefreshIcon />,\n    });\n  }\n\n  return specs;\n};\n\nconst Illustration: React.FC<{\n  illustration: React.ReactNode;\n  variant: EmptyStateVariant;\n  testId: string;\n}> = ({ illustration, variant, testId }) => (\n  <Box\n    data-testid={testId}\n    sx={{\n      maxWidth: variant === 'illustrated' ? 240 : 120,\n      width: '100%',\n      height: 'auto',\n      opacity: variant === 'minimal' ? 0.6 : 0.8,\n      display: variant === 'minimal' ? 'none' : 'block',\n    }}\n  >\n    {illustration}\n  </Box>\n);\n\nconst Actions: React.FC<{\n  specs: ActionSpec[];\n  testId: (suffix: string) => string;\n}> = ({ specs, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={2}\n      alignItems=\"center\"\n      sx={{ mt: theme.spacing(2) }}\n    >\n      {specs.map((spec) => (\n        <Button\n          key={spec.key}\n          variant={spec.variant}\n          onClick={spec.onClick}\n          startIcon={spec.icon}\n          data-testid={testId(spec.key)}\n          sx={{ minWidth: 120 }}\n        >\n          {spec.label}\n        </Button>\n      ))}\n    </Stack>\n  );\n};\n\nconst HelpLink: React.FC<{\n  helpLink: NonNullable<EmptyStateProps['helpLink']>;\n  testId: string;\n}> = ({ helpLink, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Link\n      href={helpLink.href}\n      target={helpLink.external ? '_blank' : undefined}\n      rel={helpLink.external ? 'noopener noreferrer' : undefined}\n      data-testid={testId}\n      sx={{\n        mt: theme.spacing(1),\n        color: theme.palette.primary.main,\n        textDecoration: 'none',\n        '&:hover': {\n          textDecoration: 'underline',\n        },\n      }}\n    >\n      {helpLink.label}\n      {helpLink.external && ' ↗'}\n    </Link>\n  );\n};\n\nconst Content: React.FC<{\n  title: string;\n  description?: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n  actions: ActionSpec[];\n  showActions: boolean;\n  helpLink?: EmptyStateProps['helpLink'];\n}> = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={2} alignItems=\"center\">\n      <Typography\n        id={titleId}\n        variant=\"h6\"\n        component=\"h3\"\n        data-testid={testId('title')}\n        sx={{\n          fontWeight: theme.typography.fontWeightMedium,\n          color: theme.palette.text.primary,\n          maxWidth: 400,\n        }}\n      >\n        {title}\n      </Typography>\n\n      {description && (\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          data-testid={testId('description')}\n          sx={{\n            maxWidth: 480,\n            lineHeight: 1.6,\n          }}\n        >\n          {description}\n        </Typography>\n      )}\n\n      {showActions && <Actions specs={actions} testId={testId} />}\n\n      {helpLink && <HelpLink helpLink={helpLink} testId={testId('help-link')} />}\n    </Stack>\n  );\n};\n\nexport const EmptyState: React.FC<EmptyStateProps> = React.memo((props) => {\n  const {\n    variant = 'default',\n    title,\n    description,\n    illustration,\n    helpLink,\n    refreshLabel = 'Refresh',\n    createLabel = 'Create New',\n    className,\n    dataTestId,\n  } = props;\n  const theme = useTheme();\n  const titleId = React.useId();\n  const testId = makeTestId(dataTestId);\n\n  const actions = actionsOf(props, refreshLabel, createLabel);\n  // The `action` variant reserves the action row even when nothing fills it.\n  const showActions = variant === 'action' || actions.length > 0;\n\n  return (\n    <Box\n      role=\"region\"\n      aria-labelledby={titleId}\n      className={className}\n      data-testid={dataTestId || 'empty-state'}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        padding: theme.spacing(6),\n        minHeight: 200,\n        gap: theme.spacing(3),\n      }}\n    >\n      {/* Illustration */}\n      {illustration && (\n        <Illustration\n          illustration={illustration}\n          variant={variant}\n          testId={testId('icon')}\n        />\n      )}\n\n      {/* Content */}\n      <Content\n        title={title}\n        description={description}\n        titleId={titleId}\n        testId={testId}\n        actions={actions}\n        showActions={showActions}\n        helpLink={helpLink}\n      />\n    </Box>\n  );\n});\n\nEmptyState.displayName = 'EmptyState';\n\nexport default EmptyState;\n"],"mappings":"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","names":[]}

package/dist/chunk-A2GGT4OC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { ParagraphProps } from './Paragraph.types';\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    return theme.palette.text.primary;\n  }\n\n  const colorMap: Record<string, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    info: theme.palette.info.main,\n    danger: theme.palette.error.main,\n  };\n\n  return colorMap[color] || theme.palette.text.primary;\n};\n\nconst StyledParagraph = styled(Typography, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n}>(({ theme, customVariant = 'default', customColor = 'neutral', customSize = 'md' }) => {\n  const textColor = getColorFromTheme(theme, customColor);\n\n  // Size mapping\n  const sizeMap = {\n    xs: { fontSize: '0.75rem', lineHeight: 1.4 },\n    sm: { fontSize: '0.875rem', lineHeight: 1.5 },\n    md: { fontSize: '1rem', lineHeight: 1.6 },\n    lg: { fontSize: '1.125rem', lineHeight: 1.6 },\n    xl: { fontSize: '1.25rem', lineHeight: 1.7 },\n  };\n\n  const baseStyles = {\n    fontFamily: theme.typography.body1.fontFamily,\n    margin: '0 0 1em 0',\n    transition: 'all 0.2s ease',\n    ...sizeMap[customSize as keyof typeof sizeMap],\n  };\n\n  // Variant-specific styles\n  const variantStyles = {\n    default: {\n      ...baseStyles,\n      color: textColor,\n      fontWeight: 400,\n    },\n    lead: {\n      ...baseStyles,\n      color: textColor,\n      fontWeight: 400,\n      fontSize:\n        customSize === 'md' ? '1.125rem' : sizeMap[customSize as keyof typeof sizeMap]?.fontSize,\n      lineHeight: 1.7,\n      letterSpacing: '0.01em',\n    },\n    muted: {\n      ...baseStyles,\n      color: theme.palette.text.secondary,\n      fontWeight: 400,\n      opacity: 0.8,\n    },\n    small: {\n      ...baseStyles,\n      color: theme.palette.text.secondary,\n      fontSize:\n        customSize === 'md' ? '0.875rem' : sizeMap[customSize as keyof typeof sizeMap]?.fontSize,\n      fontWeight: 400,\n      lineHeight: 1.5,\n    },\n  };\n\n  return variantStyles[customVariant as keyof typeof variantStyles] || variantStyles.default;\n});\n\nexport const Paragraph = React.forwardRef<globalThis.HTMLParagraphElement, ParagraphProps>(\n  ({ variant = 'default', color = 'neutral', size = 'md', children, ...props }, ref) => (\n      <StyledParagraph\n        ref={ref}\n        customVariant={variant}\n        customColor={color}\n        customSize={size}\n        {...props}\n      >\n        {children}\n      </StyledParagraph>\n    ),\n);\n\nParagraph.displayName = 'Paragraph';"],"mappings":";AACA,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,OAAO,WAAW;AAoFZ;AAhFN,IAAM,oBAAoB,CAAC,OAAc,UAAkB;AACzD,MAAI,UAAU,WAAW;AACvB,WAAO,MAAM,QAAQ,KAAK;AAAA,EAC5B;AAEA,QAAM,WAAmC;AAAA,IACvC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,UAAU;AAAA,IACnC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,MAAM,MAAM,QAAQ,KAAK;AAAA,IACzB,QAAQ,MAAM,QAAQ,MAAM;AAAA,EAC9B;AAEA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ,KAAK;AAC/C;AAEA,IAAM,kBAAkB,OAAO,YAAY;AAAA,EACzC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,eAAe,YAAY,EAAE,SAAS,IAAc;AAC3E,CAAC,EAIE,CAAC,EAAE,OAAO,gBAAgB,WAAW,cAAc,WAAW,aAAa,KAAK,MAAM;AACvF,QAAM,YAAY,kBAAkB,OAAO,WAAW;AAGtD,QAAM,UAAU;AAAA,IACd,IAAI,EAAE,UAAU,WAAW,YAAY,IAAI;AAAA,IAC3C,IAAI,EAAE,UAAU,YAAY,YAAY,IAAI;AAAA,IAC5C,IAAI,EAAE,UAAU,QAAQ,YAAY,IAAI;AAAA,IACxC,IAAI,EAAE,UAAU,YAAY,YAAY,IAAI;AAAA,IAC5C,IAAI,EAAE,UAAU,WAAW,YAAY,IAAI;AAAA,EAC7C;AAEA,QAAM,aAAa;AAAA,IACjB,YAAY,MAAM,WAAW,MAAM;AAAA,IACnC,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG,QAAQ,UAAkC;AAAA,EAC/C;AAGA,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,MACP,GAAG;AAAA,MACH,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UACE,eAAe,OAAO,aAAa,QAAQ,UAAkC,GAAG;AAAA,MAClF,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC1B,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC1B,UACE,eAAe,OAAO,aAAa,QAAQ,UAAkC,GAAG;AAAA,MAClF,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,cAAc,aAA2C,KAAK,cAAc;AACrF,CAAC;AAEM,IAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,MAAM,UAAU,GAAG,MAAM,GAAG,QAC1E;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAe;AAAA,MACf,aAAa;AAAA,MACb,YAAY;AAAA,MACX,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEN;AAEA,UAAU,cAAc;","names":[]}

package/dist/chunk-C6AZDXEE.js

@@ -1,207 +0,0 @@
-import {
-  alertEmphasisStyles,
-  alertLayoutStyles,
-  alertVariantStyles,
-  fadeInScale,
-  getColorFromTheme,
-  getVariantIcon
-} from "./chunk-5ERH4OIK.js";
-
-// src/components/data-display/Alert/Alert.tsx
-import Close from "@mui/icons-material/Close";
-import MuiAlert from "@mui/material/Alert/index.js";
-import AlertTitle from "@mui/material/AlertTitle/index.js";
-import Box from "@mui/material/Box/index.js";
-import Collapse from "@mui/material/Collapse/index.js";
-import IconButton from "@mui/material/IconButton/index.js";
-import { alpha, styled } from "@mui/material/styles/index.js";
-import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var StyledAlert = styled(MuiAlert, {
-  shouldForwardProp: (prop) => !["customVariant", "customColor", "glow", "pulse", "animate"].includes(prop)
-})(({ theme, customVariant, customColor, glow, pulse, animate }) => {
-  const colorPalette = getColorFromTheme(theme, customColor || customVariant || "info");
-  return {
-    borderRadius: theme.spacing(1.5),
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    position: "relative",
-    overflow: "hidden",
-    animation: animate ? `${fadeInScale} 0.3s ease-out` : "none",
-    willChange: "transform, opacity",
-    ...alertLayoutStyles(theme, colorPalette, animate),
-    // Hover effects
-    "&:hover": {
-      transform: "translateY(-3px) scale(1.01)",
-      boxShadow: `0 8px 20px ${alpha(colorPalette.main, 0.2)}`,
-      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-      ".MuiAlert-icon": {
-        transform: "scale(1.15) rotate(10deg)"
-      },
-      "&::before": {
-        opacity: 1
-      }
-    },
-    // Active state
-    "&:active": {
-      transform: "translateY(-1px) scale(0.99)",
-      transition: "transform 0.1s ease"
-    },
-    // Focus styles for accessibility
-    "&:focus-within": {
-      outline: `3px solid ${alpha(colorPalette.main, 0.5)}`,
-      outlineOffset: "3px",
-      boxShadow: `0 0 0 6px ${alpha(colorPalette.main, 0.1)}`,
-      transition: "all 0.2s ease"
-    },
-    ...alertVariantStyles(theme, customVariant, colorPalette),
-    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse))
-  };
-});
-var ALERT_DEFAULTS = {
-  variant: "info",
-  glow: false,
-  pulse: false,
-  showIcon: true,
-  closable: false,
-  animate: true,
-  role: "alert",
-  "aria-atomic": "true",
-  "data-testid": "alert"
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, value]) => value !== void 0)
-);
-var testIdFor = (base, suffix) => base ? `${base}-${suffix}` : `alert-${suffix}`;
-var MUI_SEVERITY = {
-  danger: "error",
-  glass: "info",
-  gradient: "info"
-};
-var toMuiSeverity = (variant) => MUI_SEVERITY[variant] ?? variant;
-var AlertContent = ({ title, description, dataTestId, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  title && /* @__PURE__ */ jsx(
-    AlertTitle,
-    {
-      "data-testid": testIdFor(dataTestId, "title"),
-      sx: {
-        fontWeight: 600,
-        fontSize: "1.05rem",
-        marginBottom: description ? 0.5 : 0,
-        wordWrap: "break-word",
-        overflowWrap: "break-word",
-        wordBreak: "break-word"
-      },
-      children: title
-    }
-  ),
-  description && /* @__PURE__ */ jsx(
-    Box,
-    {
-      component: "div",
-      "data-testid": testIdFor(dataTestId, "message"),
-      sx: {
-        opacity: 0.9,
-        fontSize: "0.925rem",
-        wordWrap: "break-word",
-        overflowWrap: "break-word",
-        wordBreak: "break-word"
-      },
-      children: description
-    }
-  ),
-  children
-] });
-var AlertCloseButton = ({
-  dataTestId,
-  label,
-  onClose
-}) => /* @__PURE__ */ jsx(
-  IconButton,
-  {
-    "data-testid": testIdFor(dataTestId, "close"),
-    "aria-label": label,
-    color: "inherit",
-    size: "small",
-    onClick: onClose,
-    sx: (theme) => ({
-      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-      opacity: 0.7,
-      "&:hover": {
-        transform: "rotate(90deg) scale(1.1)",
-        opacity: 1,
-        backgroundColor: alpha(theme.palette.action.hover, 0.1)
-      },
-      "&:focus": {
-        opacity: 1,
-        outline: "none",
-        backgroundColor: alpha(theme.palette.action.focus, 0.1)
-      }
-    }),
-    children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
-  }
-);
-function dismissButton(props, dataTestId, onClose) {
-  if (!props.closable) return null;
-  return /* @__PURE__ */ jsx(AlertCloseButton, { dataTestId, label: props.closeLabel, onClose });
-}
-var Alert = React.forwardRef(
-  (alertProps, ref) => {
-    const {
-      variant,
-      color,
-      glow,
-      pulse,
-      icon,
-      showIcon,
-      onClose,
-      title,
-      description,
-      children,
-      animate,
-      role,
-      "aria-atomic": ariaAtomic,
-      "data-testid": dataTestId,
-      ...props
-    } = { ...ALERT_DEFAULTS, ...definedProps(alertProps) };
-    const ariaLive = alertProps["aria-live"] ?? (variant === "danger" ? "assertive" : "polite");
-    const [open, setOpen] = React.useState(true);
-    const [isClosing, setIsClosing] = React.useState(false);
-    const handleClose = () => {
-      setIsClosing(true);
-      window.setTimeout(() => {
-        setOpen(false);
-        onClose?.();
-      }, 200);
-    };
-    const severity = toMuiSeverity(variant);
-    const displayIcon = showIcon ? /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": testIdFor(dataTestId, "icon"), children: icon || getVariantIcon(variant) }) : false;
-    const content = /* @__PURE__ */ jsx(AlertContent, { title, description, dataTestId, children });
-    return /* @__PURE__ */ jsx(Collapse, { in: open && !isClosing, timeout: 300, children: /* @__PURE__ */ jsx(
-      StyledAlert,
-      {
-        ref,
-        "data-testid": dataTestId || "alert",
-        severity,
-        customVariant: variant,
-        customColor: color,
-        glow,
-        pulse,
-        animate,
-        icon: displayIcon,
-        role,
-        "aria-live": ariaLive,
-        "aria-atomic": ariaAtomic,
-        tabIndex: 0,
-        action: dismissButton(alertProps, dataTestId, handleClose),
-        ...props,
-        children: content
-      }
-    ) });
-  }
-);
-Alert.displayName = "Alert";
-
-export {
-  Alert
-};
-//# sourceMappingURL=chunk-C6AZDXEE.js.map