@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-OV5HCGUK.js

@@ -0,0 +1,270 @@
+import {
+  onMedia,
+  uiInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Timeline/TimelineRow.tsx
+import DotIcon from "@mui/icons-material/Circle";
+import ExpandIcon from "@mui/icons-material/ExpandMore";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Card from "@mui/material/Card/index.js";
+import CardContent from "@mui/material/CardContent/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var slideInAnimation = (theme) => keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } to { opacity: 1; transform: translateX(0); }`;
+var pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;
+var TimelineItemContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["animated", "alternating", "index"].includes(prop)
+})(({ theme, animated, alternating, index, orientation }) => ({
+  display: "flex",
+  gap: theme.spacing(2),
+  position: "relative",
+  ...animated && {
+    animation: `${slideInAnimation(theme)} 0.5s ease ${index * 0.1}s both`
+  },
+  ...orientation === "vertical" && alternating && {
+    flexDirection: index % 2 === 0 ? "row" : "row-reverse",
+    textAlign: index % 2 === 0 ? "left" : "right"
+  },
+  ...orientation === "horizontal" && {
+    flexDirection: "column",
+    alignItems: "center",
+    minWidth: rem(theme, 280)
+  }
+}));
+var TimelineConnector = styled(Box, {
+  shouldForwardProp: (prop) => !["isLast"].includes(prop)
+})(({ theme, orientation, isLast }) => ({
+  position: "absolute",
+  background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,
+  ...orientation === "vertical" ? {
+    width: rem(theme, 2),
+    height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,
+    left: rem(theme, 19),
+    top: rem(theme, 40)
+  } : {
+    height: rem(theme, 2),
+    width: isLast ? 0 : rem(theme, 240),
+    top: rem(theme, 19),
+    left: rem(theme, 40)
+  }
+}));
+var TimelineDot = styled(Box, {
+  shouldForwardProp: (prop) => !["dotColor", "hasIcon", "animated"].includes(prop)
+})(({ theme, dotColor, hasIcon, animated }) => ({
+  width: rem(theme, 40),
+  height: rem(theme, 40),
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: dotColor ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)` : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,
+  boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
+  border: `${rem(theme, 2)} solid ${theme.palette.background.paper}`,
+  zIndex: 1,
+  flexShrink: 0,
+  ...animated && {
+    animation: `${pulseAnimation} 2s ease infinite`
+  },
+  "& svg": {
+    fontSize: rem(theme, hasIcon ? 19.2 : 12.8),
+    color: theme.palette.background.paper
+  }
+}));
+var TimelineCard = styled(Card, {
+  shouldForwardProp: (prop) => !["timelineVariant", "isClickable"].includes(prop)
+})(
+  ({ theme, timelineVariant, isClickable }) => ({
+    flex: 1,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    transition: theme.transitions.create(["transform", "box-shadow"]),
+    ...isClickable && {
+      cursor: "pointer",
+      "&:hover": {
+        transform: `translateY(${rem(theme, -2)})`,
+        boxShadow: theme.shadows[8]
+      }
+    },
+    ...timelineVariant === "compact" && {
+      padding: theme.spacing(1.5),
+      "& .MuiCardContent-root": {
+        padding: 0,
+        "&:last-child": {
+          paddingBottom: 0
+        }
+      }
+    }
+  })
+);
+var TimelineTimestamp = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: rem(theme, 12),
+  fontWeight: 500,
+  letterSpacing: rem(theme, 0.5),
+  textTransform: "uppercase"
+}));
+var MetadataChip = styled(Chip)(({ theme }) => ({
+  height: rem(theme, 24),
+  fontSize: rem(theme, 12),
+  background: alpha(theme.palette.primary.main, 0.08),
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+}));
+var TimelineDetails = ({ item, isExpanded, variant }) => {
+  const open = isExpanded || variant === "detailed";
+  return /* @__PURE__ */ jsx(Collapse, { in: open, children: /* @__PURE__ */ jsx(Fade, { in: open, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { mt: 1 }, children: [
+    item.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: item.description }),
+    item.metadata && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: Object.entries(item.metadata).map(([key, value]) => /* @__PURE__ */ jsx(MetadataChip, { label: `${key}: ${value}`, size: "small" }, key)) }),
+    item.action && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          item.action.onClick();
+        },
+        sx: (theme) => ({
+          background: `linear-gradient(135deg, ${uiInk(theme).celebration.violet[0]} 0%, ${uiInk(theme).celebration.violet[1]} 100%)`,
+          color: onMedia(theme)
+        }),
+        children: item.action.label
+      }
+    ) })
+  ] }) }) });
+};
+var TimelineCardHeader = ({ item, variant, isExpanded, onExpandClick }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+    children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx(TimelineTimestamp, { "data-testid": "timeline-timestamp", children: item.timestamp }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: variant === "compact" ? "body2" : "h6",
+            fontWeight: variant === "compact" ? 500 : 600,
+            sx: { mt: 0.5 },
+            children: item.title
+          }
+        )
+      ] }),
+      item.description && variant !== "compact" && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => onExpandClick(item.id, e),
+          "aria-label": isExpanded ? "Collapse item details" : "Expand item details",
+          sx: {
+            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+            transition: "transform 0.3s ease"
+          },
+          children: /* @__PURE__ */ jsx(ExpandIcon, {})
+        }
+      )
+    ]
+  }
+);
+var TimelineRowCard = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick }) => /* @__PURE__ */ jsx(
+  TimelineCard,
+  {
+    timelineVariant: variant,
+    isClickable,
+    onClick: isClickable ? () => onItemClick?.(item) : void 0,
+    role: "article",
+    "aria-label": `Timeline item: ${item.title}`,
+    "data-testid": "timeline-card",
+    children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      /* @__PURE__ */ jsx(
+        TimelineCardHeader,
+        {
+          item,
+          variant,
+          isExpanded,
+          onExpandClick
+        }
+      ),
+      variant === "compact" && item.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: item.description }),
+      variant !== "compact" && /* @__PURE__ */ jsx(TimelineDetails, { item, isExpanded, variant })
+    ] }) })
+  }
+);
+var TimelineRow = ({
+  item,
+  index,
+  isLast,
+  variant,
+  orientation,
+  showConnector,
+  animated,
+  alternating,
+  isExpanded,
+  onItemClick,
+  onExpandClick
+}) => {
+  const hasExpandableContent = item.description && variant !== "compact";
+  const isClickable = !!onItemClick || !!hasExpandableContent;
+  return /* @__PURE__ */ jsxs(
+    TimelineItemContainer,
+    {
+      animated,
+      alternating: alternating && orientation === "vertical",
+      index,
+      orientation,
+      "data-testid": "timeline-item-container",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            TimelineDot,
+            {
+              dotColor: item.color,
+              hasIcon: !!item.icon,
+              animated,
+              "data-testid": "timeline-dot",
+              children: item.icon ? /* @__PURE__ */ jsx(Box, { "data-testid": "item-icon", children: item.icon }) : /* @__PURE__ */ jsx(DotIcon, { "data-testid": "item-icon-default" })
+            }
+          ),
+          showConnector && !isLast && /* @__PURE__ */ jsx(
+            TimelineConnector,
+            {
+              orientation,
+              isLast,
+              "data-testid": "timeline-connector"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          TimelineRowCard,
+          {
+            item,
+            variant,
+            isClickable,
+            isExpanded,
+            onItemClick,
+            onExpandClick
+          }
+        )
+      ]
+    },
+    item.id
+  );
+};
+
+export {
+  TimelineRow
+};
+//# sourceMappingURL=chunk-OV5HCGUK.js.map

package/dist/chunk-OYHLSFFQ.js

@@ -0,0 +1,79 @@
+import {
+  avatarFor,
+  chipStyles,
+  iconWithTestId,
+  makeKeyDownHandler
+} from "./chunk-DE745AV7.js";
+import {
+  chipMuiSize
+} from "./chunk-KU6VHNRV.js";
+import {
+  chipRole,
+  isClickable,
+  makeTestId
+} from "./chunk-BF4FYOAR.js";
+
+// src/components/data-display/Chip/Chip.tsx
+import CancelIcon from "@mui/icons-material/Cancel";
+import MuiChip from "@mui/material/Chip/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var muiColorFor = (color) => {
+  if (color === "danger") return "error";
+  return color === "neutral" ? "default" : color;
+};
+var Chip = forwardRef(({
+  label,
+  variant = "filled",
+  size = "md",
+  color = "primary",
+  avatarSrc,
+  avatar,
+  icon,
+  selected,
+  selectable,
+  deletable,
+  disabled,
+  onClick,
+  onDelete,
+  className,
+  dataTestId,
+  // React Native's spelling of the same id; it names the component on both
+  // sides and must not reach the DOM as an attribute.
+  testID,
+  ...props
+}, ref) => {
+  const chipId = testID ?? dataTestId;
+  const testId = makeTestId(chipId);
+  const clickable = isClickable(disabled, onClick, selectable);
+  return /* @__PURE__ */ jsx(
+    MuiChip,
+    {
+      ref,
+      label: /* @__PURE__ */ jsx("span", { "data-testid": testId("label"), children: label }),
+      variant,
+      size: chipMuiSize(size),
+      color: muiColorFor(color),
+      avatar: avatarFor(avatar, avatarSrc),
+      icon: iconWithTestId(icon, testId("icon")),
+      onDelete: deletable ? onDelete : void 0,
+      deleteIcon: deletable ? /* @__PURE__ */ jsx(CancelIcon, { "data-testid": testId("delete") }) : void 0,
+      disabled,
+      clickable,
+      onClick: clickable ? onClick : void 0,
+      onKeyDown: makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete }),
+      className,
+      role: chipRole(selectable, onClick),
+      "aria-selected": selectable ? selected : void 0,
+      "data-testid": chipId || "chip",
+      sx: chipStyles({ variant, selected, clickable, disabled }),
+      ...props
+    }
+  );
+});
+Chip.displayName = "Chip";
+
+export {
+  Chip
+};
+//# sourceMappingURL=chunk-OYHLSFFQ.js.map

package/dist/chunk-P7OGKSBF.js

@@ -0,0 +1,76 @@
+import {
+  HEADING_DEFAULT_COLOR,
+  HEADING_DEFAULT_WEIGHT,
+  headingGradient,
+  headingWeight,
+  stepOf
+} from "./chunk-NNKMYH6U.js";
+import {
+  headingMetrics
+} from "./chunk-PT6TCWIW.js";
+import {
+  neutralTones
+} from "./chunk-SSX5ITPM.js";
+
+// src/components/typography/Heading/Heading.styles.ts
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return theme.palette.text.primary;
+  }
+  const colorMap = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
+    danger: theme.palette.error.main
+  };
+  return colorMap[color];
+};
+var PRIMARY_STOPS = (theme) => [
+  theme.palette.primary.main,
+  theme.palette.secondary.main
+];
+var GRADIENT_STOPS = {
+  primary: PRIMARY_STOPS,
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+  // The grey ramp has no light/dark pair: the muted tone into the darkest
+  // (`NEUTRAL_GRADIENT_STEPS`, 500 into 900).
+  neutral: (theme) => [neutralTones(theme).muted, neutralTones(theme).inverseSurface]
+};
+var gradientFor = (theme, color) => {
+  const [from, to] = GRADIENT_STOPS[color](theme);
+  return headingGradient(from, to);
+};
+var headingSx = (theme, flags) => {
+  const { customSize, customColor = HEADING_DEFAULT_COLOR, customWeight = HEADING_DEFAULT_WEIGHT, gradient } = flags;
+  const { normalWeight, ...metrics } = headingMetrics(theme, stepOf(customSize));
+  const base = {
+    fontFamily: theme.typography.h1.fontFamily,
+    margin: 0,
+    transition: "all 0.2s ease",
+    ...metrics,
+    fontWeight: headingWeight(customWeight, normalWeight)
+  };
+  if (!gradient) {
+    return { ...base, color: getColorFromTheme(theme, customColor) };
+  }
+  return {
+    ...base,
+    background: gradientFor(theme, customColor),
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    MozBackgroundClip: "text",
+    MozTextFillColor: "transparent"
+  };
+};
+
+export {
+  headingSx
+};
+//# sourceMappingURL=chunk-P7OGKSBF.js.map

package/dist/chunk-PAO2IWU5.js

@@ -0,0 +1,270 @@
+import {
+  VARIANT_ICON
+} from "./chunk-L7VH6IMR.js";
+import {
+  ACTION_SLOT,
+  ALERT_EASING,
+  ALERT_PADDING_UNITS,
+  ALERT_TRANSITION_MS,
+  FADE_IN,
+  GLASS,
+  GLOW,
+  GRADIENT,
+  ICON_SLOT,
+  ICON_SPIN,
+  MESSAGE_BUTTON,
+  MESSAGE_FONT_SIZE,
+  MESSAGE_GAP_UNITS,
+  MESSAGE_LINE_HEIGHT,
+  PULSE,
+  SEMANTIC_SURFACE,
+  SEMANTIC_VARIANTS,
+  seconds
+} from "./chunk-3LHZCVGM.js";
+import {
+  sheen,
+  softNeutral
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Alert/Alert.styles.tsx
+import Error from "@mui/icons-material/Error";
+import Info from "@mui/icons-material/Info";
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import Warning from "@mui/icons-material/Warning";
+import { alpha, darken, keyframes, lighten } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var pulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, PULSE.spread)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var shimmerAnimation = (theme) => keyframes`
+  0% {
+    background-position: ${rem(theme, -GRADIENT.shimmerTravel)} 0;
+  }
+  100% {
+    background-position: ${rem(theme, GRADIENT.shimmerTravel)} 0;
+  }
+`;
+var fadeInScale = (theme) => keyframes`
+  from {
+    opacity: 0;
+    transform: scale(${FADE_IN.scale}) translateY(${rem(theme, -FADE_IN.lift)});
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+`;
+var iconRotate = keyframes`
+  0% {
+    transform: rotate(0deg) scale(${ICON_SPIN.from});
+  }
+  50% {
+    transform: rotate(180deg) scale(${ICON_SPIN.mid});
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+`;
+var getColorFromTheme = (theme, variant) => {
+  const soft = softNeutral(theme);
+  const colorMap = {
+    info: theme.palette.info,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    danger: theme.palette.error,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    neutral: { main: soft.main, light: soft.light, dark: soft.dark }
+  };
+  return colorMap[variant] || theme.palette.info;
+};
+var VARIANT_ICONS = {
+  Info: /* @__PURE__ */ jsx(Info, {}),
+  CheckCircle: /* @__PURE__ */ jsx(CheckCircle, {}),
+  Warning: /* @__PURE__ */ jsx(Warning, {}),
+  Error: /* @__PURE__ */ jsx(Error, {})
+};
+var getVariantIcon = (variant) => {
+  const name = VARIANT_ICON[variant];
+  return name ? VARIANT_ICONS[name] : void 0;
+};
+var alertLayoutStyles = (theme, colorPalette, animate) => ({
+  // ROOM TO READ.
+  //
+  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert
+  // routinely carries three things stacked — a sentence, a smaller explanation,
+  // then a control — and at 6px they touched top and bottom and ran together
+  // vertically, so the whole card read as one dense block instead of as a
+  // message with parts. The generosity is what makes the structure legible; it
+  // is not decoration.
+  //
+  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants
+  // it tight), because this is a default rather than a rule.
+  padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),
+  ".MuiAlert-message": {
+    display: "flex",
+    flexDirection: "column",
+    // 0.5 put a title, its explanation and a button 4px apart, which reads as a
+    // spacing bug rather than as a group. 1 separates the lines; the extra
+    // margin below goes to whatever CONTROL sits at the end, because the gap
+    // between prose and a thing you press has to be bigger than the gap between
+    // two lines of prose or the button looks like part of the text.
+    gap: theme.spacing(MESSAGE_GAP_UNITS),
+    fontSize: rem(theme, MESSAGE_FONT_SIZE),
+    lineHeight: MESSAGE_LINE_HEIGHT,
+    // No padding of its own — the root's is now doing that job, and MUI's
+    // default `8px 0` on top of it would double the vertical space.
+    padding: 0,
+    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.
+    //
+    // `ghost` and `text` paint no background and no border — bare labels, which
+    // works on white where the surrounding page is obviously not clickable.
+    // Inside a coloured Alert it stops working: the label is one more coloured
+    // phrase among several, and a "Cancelar" beside two lines of prose reads as
+    // part of the prose.
+    //
+    // Only the BORDER is set, never the background or the colour, and that is
+    // what makes it safe to apply to every button rather than just the bare
+    // ones: a `solid` keeps its fill and its light label and gains a hairline
+    // in the same hue, while a `ghost` gains the whole affordance.
+    ".MuiButton-root": {
+      marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),
+      border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`
+    }
+  },
+  ".MuiAlert-icon": {
+    transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,
+    alignItems: "center",
+    // Clear of the words rather than nearly touching them, and aligned to the
+    // FIRST line instead of centred on the whole block — an icon floating
+    // halfway down a three-line message points at nothing.
+    alignSelf: "flex-start",
+    marginRight: theme.spacing(ICON_SLOT.marginRightUnits),
+    paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),
+    animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : "none"
+  },
+  // The close button, kept off the text it sits beside.
+  ".MuiAlert-action": {
+    alignItems: "flex-start",
+    paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits)
+  }
+});
+var semanticSurface = (theme, colorPalette) => {
+  const dark = theme.palette.mode === "dark";
+  return {
+    backgroundColor: dark ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark) : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),
+    color: dark ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink) : darken(colorPalette.main, SEMANTIC_SURFACE.ink),
+    border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,
+    ".MuiAlert-icon": {
+      color: colorPalette.main
+    }
+  };
+};
+var alertVariantStyles = (theme, customVariant, colorPalette) => ({
+  ...customVariant !== void 0 && SEMANTIC_VARIANTS.has(customVariant) && semanticSurface(theme, colorPalette),
+  ...customVariant === "glass" && {
+    // 85%, not 10%. This is the variant that is MEANT to be see-through, and it
+    // was the same mistake in a costume: at 0.1 the blur had almost nothing to
+    // sit on, so `glass` was not frosted, it was a window. A frosted pane has to
+    // be mostly pane — the backdrop should be legible AS texture behind the
+    // text, never as competition with it.
+    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),
+    backdropFilter: `blur(${rem(theme, GLASS.blur)}) saturate(${GLASS.saturatePercent}%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, GLASS.blur)}) saturate(${GLASS.saturatePercent}%)`,
+    border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,
+    color: theme.palette.text.primary,
+    ".MuiAlert-icon": {
+      color: theme.palette.primary.main
+    },
+    // Safari before 18 and Firefox with the filter disabled paint the declared
+    // alpha with nothing blurred behind it — the see-through banner this is
+    // fixing. There is no degraded frost to fall back to, so it falls back to an
+    // opaque pane: less pretty, still readable.
+    [`@supports not ((backdrop-filter: blur(${rem(theme, 1)})) or (-webkit-backdrop-filter: blur(${rem(theme, 1)})))`]: {
+      backgroundColor: theme.palette.background.paper
+    }
+  },
+  ...customVariant === "gradient" && {
+    background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,
+    color: theme.palette.getContrastText(colorPalette.main),
+    border: "none",
+    position: "relative",
+    overflow: "hidden",
+    ".MuiAlert-icon": {
+      color: theme.palette.getContrastText(colorPalette.main)
+    },
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: rem(theme, -GRADIENT.shimmerTravel),
+      width: "100%",
+      height: "100%",
+      background: `linear-gradient(90deg, transparent, ${sheen(theme, GRADIENT.shimmerAlpha)}, transparent)`,
+      animation: `${shimmerAnimation(theme)} ${seconds(GRADIENT.shimmerMs)} infinite`
+    }
+  }
+});
+var glowStyles = (theme, colorPalette) => ({
+  // No `!important`: the pointer states paint their tint as an INSET shadow on
+  // the same property, and compose this one alongside it rather than fighting
+  // it. `glowShadow` in `Alert.tsx` is the other half of that pair.
+  boxShadow: `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`,
+  filter: `brightness(${GLOW.brightness})`
+});
+var pulseAfter = (theme, colorPalette) => ({
+  content: '""',
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderRadius: "inherit",
+  backgroundColor: colorPalette.main,
+  opacity: PULSE.alpha,
+  animation: `${pulseAnimation(theme)} ${seconds(PULSE.ms)} infinite`,
+  pointerEvents: "none",
+  zIndex: -1
+});
+var alertEmphasisStyles = (theme, colorPalette, glow, pulse) => ({
+  ...glow && !pulse && glowStyles(theme, colorPalette),
+  // Pulse animation
+  ...pulse && !glow && {
+    position: "relative",
+    "&::after": pulseAfter(theme, colorPalette)
+  },
+  // Both glow and pulse
+  ...glow && pulse && {
+    position: "relative",
+    ...glowStyles(theme, colorPalette),
+    "&::after": pulseAfter(theme, colorPalette)
+  }
+});
+
+export {
+  pulseAnimation,
+  shimmerAnimation,
+  fadeInScale,
+  iconRotate,
+  getColorFromTheme,
+  getVariantIcon,
+  alertLayoutStyles,
+  alertVariantStyles,
+  alertEmphasisStyles
+};
+//# sourceMappingURL=chunk-PAO2IWU5.js.map