@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-AJ5SDHX5.js

@@ -0,0 +1,294 @@
+import {
+  NumberBoundInput
+} from "./chunk-57FZM6GH.js";
+import {
+  RangePresets
+} from "./chunk-7D7CJRL7.js";
+import {
+  presetsFor
+} from "./chunk-CBOB5AV6.js";
+import {
+  isRangeInverted,
+  isRangeSet,
+  numericRange,
+  rangeChipLabel
+} from "./chunk-GCZJH4XL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-HXEBKOSM.js";
+import {
+  DayBoundInput
+} from "./chunk-GY4NBSCN.js";
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-range-pill.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BoundField({
+  field,
+  label,
+  value,
+  onChange,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (field.kind === "day") {
+    return /* @__PURE__ */ jsx(
+      DayBoundInput,
+      {
+        mask: copy.filters.dayMask,
+        label,
+        value: value == null ? void 0 : String(value),
+        onChange,
+        testId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    NumberBoundInput,
+    {
+      label,
+      value,
+      unit: field.unit,
+      onChange,
+      testId
+    }
+  );
+}
+function RangeBounds({
+  field,
+  value,
+  onChange,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  const inverted = isRangeInverted(value);
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testId}-panel`, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { "&:not(:empty)": { mb: 1.5 } }, children: /* @__PURE__ */ jsx(RangePresets, { presets: presetsFor(field, copy), value, onChange, testId }) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+      /* @__PURE__ */ jsx(
+        BoundField,
+        {
+          field,
+          label: copy.filters.rangeStart,
+          value: value.min,
+          onChange: (min) => onChange({ ...value, min }),
+          testId: `${testId}-min`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        BoundField,
+        {
+          field,
+          label: copy.filters.rangeEnd,
+          value: value.max,
+          onChange: (max) => onChange({ ...value, max }),
+          testId: `${testId}-max`
+        }
+      )
+    ] }),
+    inverted && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "p",
+        "data-testid": `${testId}-inverted`,
+        sx: { mt: 0.75, fontSize: sxRem(12), color: "error.main" },
+        children: copy.filters.rangeInvalid
+      }
+    ),
+    field.kind === "day" && !inverted && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "p",
+        "data-testid": `${testId}-inclusive`,
+        sx: { mt: 0.75, fontSize: sxRem(12), color: "text.disabled" },
+        children: copy.filters.rangeInclusiveNote
+      }
+    )
+  ] });
+}
+function ClearAffordance({
+  label,
+  onClear,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  const clear = (event) => {
+    event.stopPropagation();
+    onClear();
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": copy.filters.clearRange(label),
+      "data-testid": testId,
+      onClick: clear,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        clear(event);
+      },
+      sx: { display: "inline-flex", borderRadius: 999, p: 0.125, "&:hover": { bgcolor: "action.selected" } },
+      children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: sxRem(14) } })
+    }
+  );
+}
+function RangeTrigger({
+  field,
+  value,
+  onChange,
+  onOpen,
+  open,
+  testId
+}) {
+  const active = isRangeSet(value);
+  const inverted = isRangeInverted(value);
+  const tone = inverted ? "error.main" : active ? "primary.main" : null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outlined",
+      color: "inherit",
+      size: "small",
+      "data-testid": testId,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      onClick: (event) => onOpen(event.currentTarget),
+      startIcon: active ? /* @__PURE__ */ jsx(ClearAffordance, { label: field.label, onClear: () => onChange({}), testId: `${testId}-clear-inline` }) : void 0,
+      endIcon: /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: sxRem(16) } }),
+      sx: {
+        borderRadius: fieldRadiusPx,
+        height: fieldHeight,
+        px: 1.5,
+        maxWidth: sxRem(280),
+        color: inverted ? "error.main" : "text.primary",
+        fontWeight: 600,
+        fontSize: sxRem(13),
+        textTransform: "none",
+        whiteSpace: "nowrap",
+        borderColor: (theme) => tone ?? fieldEdge(theme),
+        bgcolor: active ? "action.selected" : "background.paper",
+        "&:hover": {
+          borderColor: active ? tone : "text.primary",
+          bgcolor: active ? "action.selected" : "action.hover"
+        }
+      },
+      children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { overflow: "hidden", textOverflow: "ellipsis" }, children: active ? rangeChipLabel(field, value) : field.label })
+    }
+  );
+}
+function RangePill({
+  field,
+  value,
+  onChange,
+  onOpenChange,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const [anchor, setAnchor] = useState(null);
+  const active = isRangeSet(value);
+  const testId = `${testIdPrefix}-range-${field.id}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RangeTrigger,
+      {
+        field,
+        value,
+        onChange,
+        onOpen: (element) => {
+          setAnchor(element);
+          onOpenChange?.(true);
+        },
+        open: Boolean(anchor),
+        testId
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: () => {
+          setAnchor(null);
+          onOpenChange?.(false);
+        },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        slotProps: { paper: { sx: { p: 2, mt: 0.5 } } },
+        children: [
+          /* @__PURE__ */ jsx(RangeBounds, { field, value, onChange, testId }),
+          active && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mt: 1.5 }, children: [
+            /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(12), color: "text.secondary" }, children: rangeChipLabel(field, value) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "text",
+                size: "small",
+                onClick: () => onChange({}),
+                "data-testid": `${testId}-clear`,
+                sx: { textTransform: "none" },
+                children: copy.filters.clear
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function PanelRangeField({
+  field,
+  value,
+  onChange,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (field.kind === "day") {
+    return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: field.label }),
+      /* @__PURE__ */ jsx(RangeBounds, { field, value, onChange, testId })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      TableFilter.RangeField,
+      {
+        label: field.label,
+        unit: field.unit,
+        value: numericRange(value),
+        onChange: (range) => onChange(range),
+        testId
+      }
+    ),
+    /* @__PURE__ */ jsx(RangePresets, { presets: presetsFor(field, copy), value, onChange, testId })
+  ] });
+}
+
+export {
+  RangeBounds,
+  RangePill,
+  PanelRangeField
+};
+//# sourceMappingURL=chunk-AJ5SDHX5.js.map

package/dist/chunk-AJ5SDHX5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-pill.tsx"],"sourcesContent":["'use client';\n\n/**\n * A range filter as a PILL in the inline filter bar — the same affordance the\n * multi-select facets use, so \"Data\" and \"Valor\" sit in the filter row beside\n * \"Pagamento\"/\"Situação\"/\"Método\" instead of floating above the grid.\n *\n * Before this the inline bar rendered pills only, and `rangeFields` had a\n * surface on the slide-in panel alone — which `inlineFilters` REPLACES on a wide\n * screen. So a range filter was invisible on exactly the screens that use it,\n * and a page wanting one had to hang its own inputs outside the grid, outside\n * `DataViewState`, and outside the grid's \"Limpar filtros\" (FUT-668).\n */\nimport CloseIcon from '@mui/icons-material/Close';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useState } from 'react';\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { TableFilter } from '../../layout/TableFilter';\nimport { DayBoundInput } from './data-views-day-input';\nimport { NumberBoundInput } from './data-views-number-input';\nimport { RangePresets } from './data-views-preset-chips';\nimport { presetsFor } from './data-views-range-presets';\nimport {\n  isRangeInverted,\n  isRangeSet,\n  numericRange,\n  rangeChipLabel,\n} from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { sxRem } from '../../../tokens/relative';\n\n\n\n/**\n * One end of the range. A day keeps its `AAAA-MM-DD` string verbatim (the form\n * both the field and the backend speak) and is typed through the masked\n * `dd/mm/aaaa` field rather than a native date input — see\n * {@link DayBoundInput} for why. A number parses, and an unparseable/blank\n * entry CLEARS the bound rather than writing `NaN`.\n */\nfunction BoundField<T extends Record<string, unknown>>({\n  field,\n  label,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  label: string;\n  value: number | string | undefined;\n  onChange: (bound: number | string | undefined) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  if (field.kind === 'day') {\n    return (\n      <DayBoundInput\n        mask={copy.filters.dayMask}\n        label={label}\n        value={value == null ? undefined : String(value)}\n        onChange={onChange}\n        testId={testId}\n      />\n    );\n  }\n  return (\n    <NumberBoundInput\n      label={label}\n      value={value}\n      unit={field.unit}\n      onChange={onChange}\n      testId={testId}\n    />\n  );\n}\n\n\n/**\n * The `De`/`Até` pair for a range — shared by the pill's popover and the\n * slide-in panel's day fields, so the two surfaces cannot drift on what a bound\n * accepts or how it clears.\n */\nexport function RangeBounds<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const inverted = isRangeInverted(value);\n  return (\n    <Box data-testid={`${testId}-panel`}>\n      {/* Above the inputs, not below: the presets are the answer for most\n          merchants, and the two date pickers are the escape hatch. */}\n      <Box sx={{ '&:not(:empty)': { mb: 1.5 } }}>\n        <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n      </Box>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n        <BoundField\n          field={field}\n          label={copy.filters.rangeStart}\n          value={value.min}\n          onChange={(min) => onChange({ ...value, min })}\n          testId={`${testId}-min`}\n        />\n        <BoundField\n          field={field}\n          label={copy.filters.rangeEnd}\n          value={value.max}\n          onChange={(max) => onChange({ ...value, max })}\n          testId={`${testId}-max`}\n        />\n      </Box>\n      {inverted && (\n        <Typography\n          component=\"p\"\n          data-testid={`${testId}-inverted`}\n          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}\n        >\n          {copy.filters.rangeInvalid}\n        </Typography>\n      )}\n      {/* BOTH days are in the result. Saying so is FUT-668's other half: the\n          bounds compare as ISO strings precisely so `até` keeps its whole day,\n          and nothing on screen would otherwise tell the merchant that. */}\n      {field.kind === 'day' && !inverted && (\n        <Typography\n          component=\"p\"\n          data-testid={`${testId}-inclusive`}\n          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'text.disabled' }}\n        >\n          {copy.filters.rangeInclusiveNote}\n        </Typography>\n      )}\n    </Box>\n  );\n}\n\n/**\n * The pill + its popover. Bounds commit on change (the list is server-driven, so\n * each edit is a query) and the popover stays open, which is what lets a\n * merchant set \"de\" and then \"até\" without re-opening it.\n */\n/** An applied range clears from the pill itself — re-opening to empty two fields is three gestures for one intent. */\nfunction ClearAffordance({\n  label,\n  onClear,\n  testId,\n}: {\n  label: string;\n  onClear: () => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const clear = (event: React.SyntheticEvent): void => {\n    event.stopPropagation();\n    onClear();\n  };\n  return (\n    <Box\n      component=\"span\"\n      role=\"button\"\n      tabIndex={0}\n      aria-label={copy.filters.clearRange(label)}\n      data-testid={testId}\n      onClick={clear}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (event.key !== 'Enter' && event.key !== ' ') return;\n        event.preventDefault();\n        clear(event);\n      }}\n      sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}\n    >\n      <CloseIcon sx={{ fontSize: sxRem(14) }} />\n    </Box>\n  );\n}\n\n/** The pill button: its label carries the applied window, and its tone the state. */\nfunction RangeTrigger<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpen,\n  open,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  onOpen: (anchor: HTMLElement) => void;\n  open: boolean;\n  testId: string;\n}): React.JSX.Element {\n  const active = isRangeSet(value);\n  const inverted = isRangeInverted(value);\n  // An INVERTED window gets its own tone rather than the ordinary \"applied\"\n  // one: it is applied, and it matches nothing, and those are different states.\n  // At rest the pill draws the one field border (`fieldEdge`).\n  const tone = inverted ? 'error.main' : active ? 'primary.main' : null;\n  return (\n    <Button\n      variant=\"outlined\"\n      color=\"inherit\"\n      size=\"small\"\n      data-testid={testId}\n      aria-haspopup=\"dialog\"\n      aria-expanded={open}\n      onClick={(event) => onOpen(event.currentTarget)}\n      // ✕ FIRST, chevron LAST — the same shape as every other pill. It used to\n      // replace the chevron at the end, so a range pill and a multi-select pill\n      // put the clear in different places, and an applied range lost the\n      // affordance that says it opens.\n      startIcon={\n        active ? (\n          <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />\n        ) : undefined\n      }\n      endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}\n      sx={{\n        borderRadius: fieldRadiusPx,\n        height: fieldHeight,\n        px: 1.5,\n        maxWidth: sxRem(280),\n        color: inverted ? 'error.main' : 'text.primary',\n        fontWeight: 600,\n        fontSize: sxRem(13),\n        textTransform: 'none',\n        whiteSpace: 'nowrap',\n        borderColor: (theme) => tone ?? fieldEdge(theme),\n        bgcolor: active ? 'action.selected' : 'background.paper',\n        '&:hover': {\n          borderColor: active ? tone : 'text.primary',\n          bgcolor: active ? 'action.selected' : 'action.hover',\n        },\n      }}\n    >\n      {/* The applied bounds, in the label — a pill reading only \"Valor\" hides\n          the very thing that is narrowing the list. */}\n      <Box component=\"span\" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n        {active ? rangeChipLabel(field, value) : field.label}\n      </Box>\n    </Button>\n  );\n}\n\nexport function RangePill<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpenChange,\n  testIdPrefix,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  /** So a measured toolbar can hold still while this is open. */\n  onOpenChange?: (open: boolean) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  const active = isRangeSet(value);\n  const testId = `${testIdPrefix}-range-${field.id}`;\n  return (\n    <>\n      <RangeTrigger\n        field={field}\n        value={value}\n        onChange={onChange}\n        onOpen={(element) => {\n          setAnchor(element);\n          onOpenChange?.(true);\n        }}\n        open={Boolean(anchor)}\n        testId={testId}\n      />\n      <Popover\n        open={Boolean(anchor)}\n        anchorEl={anchor}\n        onClose={() => {\n          setAnchor(null);\n          onOpenChange?.(false);\n        }}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n        slotProps={{ paper: { sx: { p: 2, mt: 0.5 } } }}\n      >\n        <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />\n        {/* An inverted window is not an error the merchant must fix before the\n            list responds — it simply matches nothing, and saying so beats an\n            empty grid with no explanation (FUT-668). */}\n        {active && (\n          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: 1.5 }}>\n            <Typography component=\"span\" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>\n              {rangeChipLabel(field, value)}\n            </Typography>\n            <Button\n              variant=\"text\"\n              size=\"small\"\n              onClick={() => onChange({})}\n              data-testid={`${testId}-clear`}\n              sx={{ textTransform: 'none' }}\n            >\n              {copy.filters.clear}\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </>\n  );\n}\n\n\n/**\n * One range on the SLIDE-IN panel (and the narrow-screen modal): the numeric\n * control the panel already had, or — for a day range, which that control cannot\n * express — the same `De`/`Até` pair the pill's popover uses.\n */\nexport function PanelRangeField<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  if (field.kind === \"day\") {\n    return (\n      <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n        <Typography component=\"span\" sx={{ fontSize: sxRem(12), fontWeight: 500, color: \"text.secondary\" }}>\n          {field.label}\n        </Typography>\n        <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />\n      </Box>\n    );\n  }\n  return (\n    <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n      <TableFilter.RangeField\n        label={field.label}\n        unit={field.unit}\n        value={numericRange(value)}\n        onChange={(range) => onChange(range)}\n        testId={testId}\n      />\n      {/* Below the numeric control here, unlike the pill's popover: this one\n          renders its own label, and chips above it would separate the label\n          from the field it names. */}\n      <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-AUHYR7ID.js

@@ -0,0 +1,295 @@
+import {
+  alertEmphasisStyles,
+  alertLayoutStyles,
+  alertVariantStyles,
+  fadeInScale,
+  getColorFromTheme,
+  getVariantIcon
+} from "./chunk-MO47Y26B.js";
+import {
+  resolveAlertProps,
+  resolveAnnouncement,
+  testIdFor
+} from "./chunk-L7VH6IMR.js";
+import {
+  ACTIVE,
+  ALERT_EASING,
+  ALERT_RADIUS_UNITS,
+  ALERT_TRANSITION_MS,
+  CLOSE_BUTTON,
+  CLOSE_DELAY_MS,
+  COLLAPSE_MS,
+  DESCRIPTION,
+  FADE_IN,
+  FOCUS,
+  GLOW,
+  HOVER,
+  TITLE,
+  seconds
+} from "./chunk-P2UIXDEG.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-TYJR4GOF.js";
+import {
+  absoluteInk,
+  modeInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.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 transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
+function pointerShadow(theme, colorPalette, glow, variant) {
+  const ink = variant === "gradient" ? absoluteInk(theme).black : modeInk(theme);
+  const glowShadow = glow ? `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}` : null;
+  return (alpha_) => [`inset 0 0 0 100vmax ${alpha(ink, alpha_)}`, glowShadow].filter(Boolean).join(", ");
+}
+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");
+  const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);
+  return {
+    borderRadius: theme.spacing(ALERT_RADIUS_UNITS),
+    transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,
+    position: "relative",
+    overflow: "hidden",
+    animation: animate ? `${fadeInScale(theme)} ${seconds(FADE_IN.ms)} ease-out` : "none",
+    willChange: "transform, opacity",
+    ...alertLayoutStyles(theme, colorPalette, animate),
+    // Hover: one tint step, and nothing that moves. An alert is a surface
+    // rather than a control, so the pointer only needs telling it is here. The
+    // icon keeps its own place for the same reason — it is the variant's
+    // meaning, not an affordance to animate.
+    "&:hover": {
+      boxShadow: withTint(HOVER.tintAlpha),
+      "&::before": {
+        opacity: 1
+      }
+    },
+    // Press: a 20% tint, landing at once and easing back. Still no geometry.
+    //
+    // `transition: none` here is what makes the dip INSTANT: a click's
+    // `:active` lasts about as long as the finger is down, so easing into it
+    // would be cut off in its first tenth and read as a flicker. The ease is on
+    // the way back, governed by the root.
+    //
+    // Neither `:hover` nor `:focus-visible` may declare `transition`, and that
+    // is not a style preference. `:active` under a mouse ALWAYS implies
+    // `:hover`, so a bare shorthand in the hover block outranks the root's
+    // (0,2,0 beats 0,1,0) and silently resets the timing this state rests on.
+    //
+    // The `:not(:has(…))` names CONTROLS, not any descendant. `:active`
+    // matches an ancestor of whatever is pressed, so dismissing an alert
+    // dimmed the alert being dismissed and pressing a call to action dimmed
+    // the message explaining it. Excluding `:has(:active)` wholesale does not
+    // work and was the first attempt: pressing the TEXT makes that text
+    // `:active` too, so the guard matched on every press and the state never
+    // fired at all.
+    '&:active:not(:has(button:active, a:active, [role="button"]:active))': {
+      boxShadow: withTint(ACTIVE.tintAlpha),
+      transition: "none"
+    },
+    // Focus: `:focus-visible`, not `:focus-within`.
+    //
+    // The alert carries `tabIndex={0}`, so a MOUSE CLICK focused it and painted
+    // the ring — a keyboard affordance answering a pointer, which is what made
+    // clicking one look like an error state. `:focus-visible` is the browser's
+    // own answer to "did this focus come from the keyboard": the ring stays for
+    // whoever tabs here and never fires on a click.
+    //
+    // One ring, not three. It was a 3px outline at 3px offset UNDER a 6px halo,
+    // and stacking two rings on one edge is what read as unfinished rather than
+    // as emphasis.
+    // It declares no `transition`: `outline-style` is discrete, so the ring
+    // arrives at full width with only its COLOUR easing — from `currentcolor`,
+    // the near-black alert ink, to the blue. That is a visible dark flash on
+    // every keyboard focus, and it would also outrank the root's opacity
+    // transition the way the hover block did.
+    "&:focus-visible": {
+      outline: `${rem(theme, FOCUS.ringWidth)} solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
+      outlineOffset: rem(theme, FOCUS.offset)
+    },
+    ...alertVariantStyles(theme, customVariant, colorPalette),
+    ...alertEmphasisStyles(theme, colorPalette, Boolean(glow), Boolean(pulse))
+  };
+});
+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: TITLE.fontWeight,
+        fontSize: sxRem(TITLE.fontSize),
+        marginBottom: description ? TITLE.marginBottomUnits : 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: DESCRIPTION.opacity,
+        fontSize: sxRem(DESCRIPTION.fontSize),
+        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,
+      opacity: CLOSE_BUTTON.opacity,
+      // Opacity and a wash only: the button used to spin 90deg and grow 1.1,
+      // which drew the eye to the dismiss rather than to the message.
+      "&:hover": {
+        opacity: 1,
+        backgroundColor: alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha)
+      },
+      // A REAL ring, on the keyboard-only selector.
+      //
+      // This used to be `&:focus` setting `outline: 'none'` over a
+      // `rgba(0,0,0,0.1)` wash — 1.25:1 against the info surface, and MUI's
+      // ButtonBase already sets `outline: 0`, so there was no UA fallback
+      // either. It went unnoticed while the ROOT still matched `:focus-within`
+      // and drew a ring around the whole alert; moving the root to
+      // `:focus-visible` took that away and left this button with no visible
+      // focus at all. `Banner`'s dismiss already draws its own outline, so
+      // this is also what keeps the two surfaces telling a keyboard user the
+      // same thing.
+      "&:focus-visible": {
+        opacity: 1,
+        // `currentColor` is the alert's own ink, inherited through
+        // `color="inherit"`, so the ring is drawn in whatever colour was
+        // already chosen to be READ on this surface. Measured 11.2:1 on the
+        // semantic variants and 5.7:1 on `gradient`.
+        //
+        // That is a reasoned choice, not a test-backed one, and the difference
+        // matters: `alert-contrast.test.tsx` covers the ink of the four
+        // semantic variants only — its `glass` case asserts the pane's alpha
+        // rather than its ink, and `gradient` it does not render at all. A
+        // translucent surface's contrast depends on what sits behind it, which
+        // is why that test stops where it does and why this comment does not
+        // borrow a guarantee it never made.
+        outline: `${rem(theme, FOCUS.ringWidth)} solid currentColor`,
+        outlineOffset: rem(theme, FOCUS.offset),
+        backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha)
+      }
+    }),
+    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: _role,
+    announce: _announce,
+    // resolved from `alertProps` — see `resolveAnnouncement`
+    "aria-atomic": ariaAtomic,
+    ...others
+  } = resolveAlertProps(alertProps);
+  const dataTestId = resolveTestId(others, "alert");
+  const props = withoutAlertOnlyProps(withoutTestIdProps(others));
+  const announcement = resolveAnnouncement(alertProps, variant);
+  const [open, setOpen] = React.useState(true);
+  const [isClosing, setIsClosing] = React.useState(false);
+  const handleClose = () => {
+    setIsClosing(true);
+    window.setTimeout(() => {
+      setOpen(false);
+      onClose?.();
+    }, CLOSE_DELAY_MS);
+  };
+  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: COLLAPSE_MS, children: /* @__PURE__ */ jsx(
+    StyledAlert,
+    {
+      ref,
+      "data-testid": dataTestId,
+      severity,
+      customVariant: variant,
+      customColor: color,
+      glow,
+      pulse,
+      animate,
+      icon: displayIcon,
+      role: announcement.role,
+      "aria-live": announcement["aria-live"],
+      "aria-atomic": ariaAtomic,
+      tabIndex: 0,
+      action: dismissButton(alertProps, dataTestId, handleClose),
+      ...props,
+      children: content
+    }
+  ) });
+});
+var ALERT_ONLY_PROPS = ["closable", "closeLabel"];
+function withoutAlertOnlyProps(rest) {
+  const html = { ...rest };
+  for (const key of ALERT_ONLY_PROPS) delete html[key];
+  return html;
+}
+Alert.displayName = "Alert";
+
+export {
+  Alert,
+  ALERT_ONLY_PROPS
+};
+//# sourceMappingURL=chunk-AUHYR7ID.js.map

package/dist/chunk-AUHYR7ID.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport MuiAlert from '@mui/material/Alert/index.js';\nimport AlertTitle from '@mui/material/AlertTitle/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { absoluteInk, modeInk } from '../../../tokens/ink';\n\nimport { resolveAlertProps, resolveAnnouncement, testIdFor } from './Alert.helpers';\nimport type { AlertPalette } from './Alert.metrics';\nimport {\n  ACTIVE,\n  GLOW,\n  ALERT_EASING,\n  ALERT_RADIUS_UNITS,\n  ALERT_TRANSITION_MS,\n  CLOSE_BUTTON,\n  CLOSE_DELAY_MS,\n  COLLAPSE_MS,\n  DESCRIPTION,\n  FADE_IN,\n  FOCUS,\n  HOVER,\n  seconds,\n  TITLE,\n} from './Alert.metrics';\nimport {\n  alertEmphasisStyles,\n  alertLayoutStyles,\n  alertVariantStyles,\n  fadeInScale,\n  getColorFromTheme,\n  getVariantIcon,\n} from './Alert.styles';\nimport type { AlertColor } from '@mui/material/Alert/index.js';\nimport type { AlertProps } from './Alert.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\nconst transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;\n\n// Define animations\n/**\n * The pointer states' shadow: a flat tint, plus the glow when the alert has one.\n *\n * The tint is an inset spread at 100vmax, which always exceeds the element, so\n * it covers the surface edge to edge. It paints ABOVE the background and BELOW\n * the content, which is what keeps the ink's own contrast out of these states\n * entirely — see `ACTIVE` in `Alert.metrics.ts` for why a layer replaced the\n * opacity dip and the brightness multiplier that each preceded it.\n *\n * The glow is COMPOSED rather than replaced, so hovering a glowing alert keeps\n * its glow; `glowStyles` gave up its `!important` for this.\n */\nfunction pointerShadow(\n  theme: Theme,\n  colorPalette: AlertPalette,\n  glow: boolean,\n  variant: string | undefined,\n): (alpha_: number) => string {\n  // The tint moves the surface AWAY from its own ink, which is why this reads\n  // the variant and not only the mode.\n  //\n  // `gradient` is the one variant where the two disagree: it paints a\n  // mid-lightness sweep (L* 42–61) under WHITE ink in BOTH modes, so the\n  // mode-keyed answer tinted it white in dark mode — toward the text. Measured:\n  // white-on-gradient fell to 2.90:1 on hover and 2.41:1 pressed, under the 3:1\n  // floor and below its own idle. Every other variant's surface tracks the mode,\n  // so for them the two rules agree.\n  const ink = variant === 'gradient' ? absoluteInk(theme).black : modeInk(theme);\n  const glowShadow = glow\n    ? `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`\n    : null;\n  return (alpha_) =>\n    [`inset 0 0 0 100vmax ${alpha(ink, alpha_)}`, glowShadow].filter(Boolean).join(', ');\n}\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'glow', 'pulse', 'animate'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  animate?: boolean;\n}>(({ theme, customVariant, customColor, glow, pulse, animate }) => {\n  const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');\n\n  const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);\n\n  return {\n    borderRadius: theme.spacing(ALERT_RADIUS_UNITS),\n    transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,\n    position: 'relative',\n    overflow: 'hidden',\n    animation: animate ? `${fadeInScale(theme)} ${seconds(FADE_IN.ms)} ease-out` : 'none',\n    willChange: 'transform, opacity',\n\n    ...alertLayoutStyles(theme, colorPalette, animate),\n\n    // Hover: one tint step, and nothing that moves. An alert is a surface\n    // rather than a control, so the pointer only needs telling it is here. The\n    // icon keeps its own place for the same reason — it is the variant's\n    // meaning, not an affordance to animate.\n    '&:hover': {\n      boxShadow: withTint(HOVER.tintAlpha),\n\n      '&::before': {\n        opacity: 1,\n      },\n    },\n\n    // Press: a 20% tint, landing at once and easing back. Still no geometry.\n    //\n    // `transition: none` here is what makes the dip INSTANT: a click's\n    // `:active` lasts about as long as the finger is down, so easing into it\n    // would be cut off in its first tenth and read as a flicker. The ease is on\n    // the way back, governed by the root.\n    //\n    // Neither `:hover` nor `:focus-visible` may declare `transition`, and that\n    // is not a style preference. `:active` under a mouse ALWAYS implies\n    // `:hover`, so a bare shorthand in the hover block outranks the root's\n    // (0,2,0 beats 0,1,0) and silently resets the timing this state rests on.\n    //\n    // The `:not(:has(…))` names CONTROLS, not any descendant. `:active`\n    // matches an ancestor of whatever is pressed, so dismissing an alert\n    // dimmed the alert being dismissed and pressing a call to action dimmed\n    // the message explaining it. Excluding `:has(:active)` wholesale does not\n    // work and was the first attempt: pressing the TEXT makes that text\n    // `:active` too, so the guard matched on every press and the state never\n    // fired at all.\n    '&:active:not(:has(button:active, a:active, [role=\"button\"]:active))': {\n      boxShadow: withTint(ACTIVE.tintAlpha),\n      transition: 'none',\n    },\n\n    // Focus: `:focus-visible`, not `:focus-within`.\n    //\n    // The alert carries `tabIndex={0}`, so a MOUSE CLICK focused it and painted\n    // the ring — a keyboard affordance answering a pointer, which is what made\n    // clicking one look like an error state. `:focus-visible` is the browser's\n    // own answer to \"did this focus come from the keyboard\": the ring stays for\n    // whoever tabs here and never fires on a click.\n    //\n    // One ring, not three. It was a 3px outline at 3px offset UNDER a 6px halo,\n    // and stacking two rings on one edge is what read as unfinished rather than\n    // as emphasis.\n    // It declares no `transition`: `outline-style` is discrete, so the ring\n    // arrives at full width with only its COLOUR easing — from `currentcolor`,\n    // the near-black alert ink, to the blue. That is a visible dark flash on\n    // every keyboard focus, and it would also outrank the root's opacity\n    // transition the way the hover block did.\n    '&:focus-visible': {\n      outline: `${rem(theme, FOCUS.ringWidth)} solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,\n      outlineOffset: rem(theme, FOCUS.offset),\n    },\n\n    ...alertVariantStyles(theme, customVariant, colorPalette),\n    ...alertEmphasisStyles(theme, colorPalette, Boolean(glow), Boolean(pulse)),\n  };\n});\n\n// glass and gradient are our own looks with no MUI severity of their own; both\n// borrow info's. danger is MUI's error.\nconst MUI_SEVERITY: Record<string, AlertColor> = {\n  danger: 'error',\n  glass: 'info',\n  gradient: 'info',\n};\n\nconst toMuiSeverity = (variant: string): AlertColor =>\n  MUI_SEVERITY[variant] ?? (variant as AlertColor);\n\nconst AlertContent: React.FC<{\n  title?: AlertProps['title'];\n  description?: AlertProps['description'];\n  dataTestId?: string;\n  children?: React.ReactNode;\n}> = ({ title, description, dataTestId, children }) => (\n  <>\n    {title && (\n      <AlertTitle\n        data-testid={testIdFor(dataTestId, 'title')}\n        sx={{\n          fontWeight: TITLE.fontWeight,\n          fontSize: sxRem(TITLE.fontSize),\n          marginBottom: description ? TITLE.marginBottomUnits : 0,\n          wordWrap: 'break-word',\n          overflowWrap: 'break-word',\n          wordBreak: 'break-word',\n        }}\n      >\n        {title}\n      </AlertTitle>\n    )}\n    {description && (\n      <Box\n        component=\"div\"\n        data-testid={testIdFor(dataTestId, 'message')}\n        sx={{\n          opacity: DESCRIPTION.opacity,\n          fontSize: sxRem(DESCRIPTION.fontSize),\n          wordWrap: 'break-word',\n          overflowWrap: 'break-word',\n          wordBreak: 'break-word',\n        }}\n      >\n        {description}\n      </Box>\n    )}\n    {children}\n  </>\n);\n\nconst AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose: () => void }> = ({\n  dataTestId,\n  label,\n  onClose,\n}) => (\n  <IconButton\n    data-testid={testIdFor(dataTestId, 'close')}\n    aria-label={label}\n    color=\"inherit\"\n    size=\"small\"\n    onClick={onClose}\n    sx={(theme) => ({\n      transition,\n      opacity: CLOSE_BUTTON.opacity,\n      // Opacity and a wash only: the button used to spin 90deg and grow 1.1,\n      // which drew the eye to the dismiss rather than to the message.\n      '&:hover': {\n        opacity: 1,\n        backgroundColor: alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha),\n      },\n      // A REAL ring, on the keyboard-only selector.\n      //\n      // This used to be `&:focus` setting `outline: 'none'` over a\n      // `rgba(0,0,0,0.1)` wash — 1.25:1 against the info surface, and MUI's\n      // ButtonBase already sets `outline: 0`, so there was no UA fallback\n      // either. It went unnoticed while the ROOT still matched `:focus-within`\n      // and drew a ring around the whole alert; moving the root to\n      // `:focus-visible` took that away and left this button with no visible\n      // focus at all. `Banner`'s dismiss already draws its own outline, so\n      // this is also what keeps the two surfaces telling a keyboard user the\n      // same thing.\n      '&:focus-visible': {\n        opacity: 1,\n        // `currentColor` is the alert's own ink, inherited through\n        // `color=\"inherit\"`, so the ring is drawn in whatever colour was\n        // already chosen to be READ on this surface. Measured 11.2:1 on the\n        // semantic variants and 5.7:1 on `gradient`.\n        //\n        // That is a reasoned choice, not a test-backed one, and the difference\n        // matters: `alert-contrast.test.tsx` covers the ink of the four\n        // semantic variants only — its `glass` case asserts the pane's alpha\n        // rather than its ink, and `gradient` it does not render at all. A\n        // translucent surface's contrast depends on what sits behind it, which\n        // is why that test stops where it does and why this comment does not\n        // borrow a guarantee it never made.\n        outline: `${rem(theme, FOCUS.ringWidth)} solid currentColor`,\n        outlineOffset: rem(theme, FOCUS.offset),\n        backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha),\n      },\n    })}\n  >\n    <Close fontSize=\"inherit\" />\n  </IconButton>\n);\n\n/**\n * The dismiss button, or nothing.\n *\n * Reads `closeLabel` straight off the props rather than through the\n * `definedProps` merge, which would widen it to `string | undefined` and hand\n * the button an empty name. The UNION in `AlertProps` guarantees the label\n * wherever `closable` is true — that narrowing is gone inside the component,\n * which is why the fallback below exists and why it is unreachable.\n */\nfunction dismissButton(\n  props: AlertProps,\n  dataTestId: string | undefined,\n  onClose: () => void,\n): React.JSX.Element | null {\n  if (!props.closable) return null;\n  return <AlertCloseButton dataTestId={dataTestId} label={props.closeLabel} onClose={onClose} />;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>((alertProps, ref) => {\n  const {\n    variant,\n    color,\n    glow,\n    pulse,\n    icon,\n    showIcon,\n    onClose,\n    title,\n    description,\n    children,\n    animate,\n    role: _role, announce: _announce, // resolved from `alertProps` — see `resolveAnnouncement`\n    'aria-atomic': ariaAtomic,\n    ...others\n  } = resolveAlertProps(alertProps);\n\n  // Every spelling of the test id the shared contract allows, mapped to the\n  // one the DOM reads and defaulted to `alert`; the native Alert does the same.\n  const dataTestId = resolveTestId(others, 'alert');\n  // Then the dismiss union, which `dismissButton` reads off `alertProps` rather\n  // than through this destructure — so without this strip it rides `...props`\n  // onto the DOM. `ALERT_DEFAULTS` supplies `closable: false`, so that happened\n  // on EVERY alert, not only the closable ones.\n  const props = withoutAlertOnlyProps(withoutTestIdProps(others));\n\n  // Depends on `variant`, so it cannot live in the static defaults above.\n  const announcement = resolveAnnouncement(alertProps, variant);\n  const [open, setOpen] = React.useState(true);\n  const [isClosing, setIsClosing] = React.useState(false);\n\n  const handleClose = () => {\n    setIsClosing(true);\n    window.setTimeout(() => {\n      setOpen(false);\n      onClose?.();\n    }, CLOSE_DELAY_MS);\n  };\n\n  const severity = toMuiSeverity(variant);\n\n  const displayIcon = showIcon ? (\n    <Box component=\"span\" data-testid={testIdFor(dataTestId, 'icon')}>\n      {icon || getVariantIcon(variant)}\n    </Box>\n  ) : (\n    false\n  );\n\n  const content = (\n    <AlertContent title={title} description={description} dataTestId={dataTestId}>\n      {children}\n    </AlertContent>\n  );\n\n  return (\n    <Collapse in={open && !isClosing} timeout={COLLAPSE_MS}>\n      <StyledAlert\n        ref={ref}\n        data-testid={dataTestId}\n        severity={severity}\n        customVariant={variant}\n        customColor={color}\n        glow={glow}\n        pulse={pulse}\n        animate={animate}\n        icon={displayIcon}\n        role={announcement.role}\n        aria-live={announcement['aria-live']}\n        aria-atomic={ariaAtomic}\n        tabIndex={0}\n        action={dismissButton(alertProps, dataTestId, handleClose)}\n        {...props}\n      >\n        {content}\n      </StyledAlert>\n    </Collapse>\n  );\n});\n\n/**\n * The props `Alert` OWNS, which must never reach the DOM.\n *\n * `AlertProps` extends MUI's, whose rest-spread is how a host's real HTML\n * attributes get onto the root — so the same spread carries the alert's own\n * configuration unless it is named here. Everything else the component consumes\n * leaves through the destructure above; these two do not, because\n * `dismissButton` reads them off the original props to keep the dismiss union's\n * narrowing intact.\n *\n * Exported so a test can render an alert carrying every name on it and assert\n * none reaches the DOM — the check that would have caught `closable`.\n */\nexport const ALERT_ONLY_PROPS = ['closable', 'closeLabel'] as const;\n\nfunction withoutAlertOnlyProps<P extends object>(rest: P): P {\n  const html = { ...rest } as Record<string, unknown>;\n  for (const key of ALERT_ONLY_PROPS) delete html[key];\n  return html as P;\n}\n\nAlert.displayName = 'Alert';\n"],"mappings":"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","names":[]}