@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-TP3XKS72.js

@@ -0,0 +1,295 @@
+import {
+  alertEmphasisStyles,
+  alertLayoutStyles,
+  alertVariantStyles,
+  fadeInScale,
+  getColorFromTheme,
+  getVariantIcon
+} from "./chunk-PAO2IWU5.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-3LHZCVGM.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-TYJR4GOF.js";
+import {
+  absoluteInk,
+  modeInk
+} from "./chunk-SSX5ITPM.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-TP3XKS72.js.map

package/dist/chunk-TTIZUZ57.js

@@ -0,0 +1,249 @@
+import {
+  BoardGlyph,
+  ColumnsGlyph,
+  GridGlyph,
+  ListGlyph,
+  RowsGlyph,
+  TableGlyph
+} from "./chunk-YLGY3D52.js";
+import {
+  useDataViewsLayout
+} from "./chunk-MUIBNHJW.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-AJBRO76D.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-display-tabs.tsx
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tile({
+  active,
+  label,
+  onClick,
+  testId,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick,
+      "aria-pressed": active,
+      "data-testid": testId,
+      sx: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 0.75,
+        p: 1.25,
+        border: 1,
+        borderStyle: "solid",
+        borderColor: active ? "primary.main" : "divider",
+        bgcolor: active ? "action.selected" : "transparent",
+        borderRadius: 1,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: sxRem(12),
+        fontWeight: active ? 600 : 400,
+        color: active ? "primary.main" : "text.secondary",
+        "&:hover": { bgcolor: "action.hover" }
+      },
+      children: [
+        children,
+        label
+      ]
+    }
+  );
+}
+var DIRECTION_LABELS = {
+  number: ["Menor \u2192 maior", "Maior \u2192 menor"],
+  currency: ["Menor \u2192 maior", "Maior \u2192 menor"],
+  date: ["Mais antigo", "Mais recente"],
+  text: ["A \u2192 Z", "Z \u2192 A"]
+};
+function directionLabels(kind) {
+  return DIRECTION_LABELS[kind ?? "text"] ?? DIRECTION_LABELS.text;
+}
+function SortTab({
+  fields,
+  activeField,
+  activeOrder,
+  onChange,
+  sortKinds,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const [ascLabel, descLabel] = directionLabels(sortKinds?.[activeField]);
+  return /* @__PURE__ */ jsxs(default2, { sx: { p: 1 }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { px: 0.5, color: "text.secondary" }, children: copy.display.direction }) }),
+    /* @__PURE__ */ jsx(default2, { sx: { display: "flex", gap: 0.75, mb: 1.5, mt: 0.5 }, children: ["asc", "desc"].map((direction, index) => /* @__PURE__ */ jsx(
+      Tile,
+      {
+        active: activeOrder === direction,
+        label: index === 0 ? ascLabel : descLabel,
+        onClick: () => onChange(activeField || fields[0]?.value || "", direction),
+        testId: `${testIdPrefix}-sort-dir-${direction}`,
+        children: direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpwardRoundedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ArrowDownwardRoundedIcon, { fontSize: "small" })
+      },
+      direction
+    )) }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { px: 0.5, color: "text.secondary" }, children: copy.display.fieldHeading }) }),
+    fields.map((field) => /* @__PURE__ */ jsx(
+      SortFieldRow,
+      {
+        label: field.label,
+        active: field.value === activeField,
+        onClick: () => onChange(field.value, activeOrder),
+        testId: `${testIdPrefix}-sort-field-${field.value}`
+      },
+      field.value
+    ))
+  ] });
+}
+function SortFieldRow({
+  label,
+  active,
+  onClick,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick,
+      "data-testid": testId,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        width: "100%",
+        px: 1,
+        py: 0.75,
+        border: 0,
+        background: "none",
+        borderRadius: 1,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: sxRem(13),
+        textAlign: "left",
+        fontWeight: active ? 600 : 400,
+        color: active ? "primary.main" : "text.primary",
+        "&:hover": { bgcolor: "action.hover" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            sx: { height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: active ? "primary.main" : "action.disabled" }
+          }
+        ),
+        /* @__PURE__ */ jsx(default2, { component: "span", sx: { flex: 1, minWidth: 0 }, children: label })
+      ]
+    }
+  );
+}
+function densityTiles(layout, copy) {
+  const labels = copy.display.densityLabels[layout] ?? copy.display.densityLabels.table;
+  return [
+    { value: "compact", label: labels?.compact ?? "compact", gap: sxRem(2), columns: 4 },
+    { value: "cozy", label: labels?.cozy ?? "cozy", gap: sxRem(5), columns: 3 },
+    { value: "comfortable", label: labels?.comfortable ?? "comfortable", gap: sxRem(8), columns: 2 }
+  ];
+}
+function densityGlyph(layout, tile, active) {
+  if (layout === "cards") return /* @__PURE__ */ jsx(GridGlyph, { n: tile.columns, active });
+  if (layout === "board") return /* @__PURE__ */ jsx(ColumnsGlyph, { n: tile.columns, active });
+  return /* @__PURE__ */ jsx(RowsGlyph, { gap: tile.gap, active });
+}
+function layoutGlyph(layout, active) {
+  if (layout === "table") return /* @__PURE__ */ jsx(TableGlyph, { active });
+  if (layout === "list") return /* @__PURE__ */ jsx(ListGlyph, { active });
+  if (layout === "cards") return /* @__PURE__ */ jsx(GridGlyph, { active });
+  return /* @__PURE__ */ jsx(BoardGlyph, { active });
+}
+var LAYOUT_TILE_LABELS = {
+  table: "Tabela",
+  list: "Lista",
+  cards: "Grade",
+  board: "Quadro"
+};
+function DensityTiles({ testIdPrefix }) {
+  const copy = useDataViewsCopy();
+  const { layout, density, setDensity } = useDataViewsLayout();
+  const isOneColumn = useMediaQuery((t) => t.breakpoints.down("sm"));
+  if (layout === "cards" && isOneColumn) {
+    return /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { px: 0.5, pt: 0.5, display: "block", color: "text.disabled" }, children: copy.display.densityUnavailableNarrow }) });
+  }
+  return /* @__PURE__ */ jsx(default2, { sx: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0.75, mt: 0.5 }, children: densityTiles(layout, copy).map((tile) => /* @__PURE__ */ jsx(
+    Tile,
+    {
+      active: density === tile.value,
+      label: tile.label,
+      onClick: () => setDensity(tile.value),
+      testId: `${testIdPrefix}-density-${tile.value}`,
+      children: densityGlyph(layout, tile, density === tile.value)
+    },
+    tile.value
+  )) });
+}
+function DisplayTab({ testIdPrefix }) {
+  const copy = useDataViewsCopy();
+  const { layout, setLayout, canUseCards, canUseList, canUseBoard } = useDataViewsLayout();
+  const available = [
+    "table",
+    ...canUseList ? ["list"] : [],
+    ...canUseCards ? ["cards"] : [],
+    ...canUseBoard ? ["board"] : []
+  ];
+  return /* @__PURE__ */ jsxs(default2, { sx: { p: 1 }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { px: 0.5, color: "text.secondary" }, children: copy.display.formatHeading }) }),
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: available.length > 3 ? "repeat(2, 1fr)" : `repeat(${available.length}, 1fr)`,
+          gap: 0.75,
+          mt: 0.5
+        },
+        children: available.map((value) => /* @__PURE__ */ jsx(
+          Tile,
+          {
+            active: layout === value,
+            label: LAYOUT_TILE_LABELS[value],
+            onClick: () => setLayout(value),
+            testId: `${testIdPrefix}-layout-${value}`,
+            children: layoutGlyph(value, layout === value)
+          },
+          value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { px: 0.5, py: 1, display: "block", color: "text.disabled" }, children: copy.display.layoutHints[layout] }) }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { px: 0.5, color: "text.secondary" }, children: copy.display.densityHeadings[layout] }) }),
+    /* @__PURE__ */ jsx(DensityTiles, { testIdPrefix }),
+    !canUseBoard && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { px: 0.5, pt: 1.25, display: "block", color: "text.disabled" }, children: copy.display.boardUnavailable }) })
+  ] });
+}
+
+export {
+  SortTab,
+  DisplayTab
+};
+//# sourceMappingURL=chunk-TTIZUZ57.js.map

package/dist/chunk-TWWA7QPA.js

@@ -0,0 +1,151 @@
+import {
+  resolveLightboxProps
+} from "./chunk-UOS7DEQZ.js";
+import {
+  LightboxThumbnails
+} from "./chunk-HMXBBWIO.js";
+import {
+  LightboxStage
+} from "./chunk-CUZGBE3L.js";
+import {
+  LightboxOverlay
+} from "./chunk-N6GBJGKW.js";
+import {
+  LightboxCurrentMedia
+} from "./chunk-RBGUS7WO.js";
+import {
+  useLightbox
+} from "./chunk-ZMZUBLG3.js";
+import {
+  makeTestId
+} from "./chunk-NAQ2PIV5.js";
+import {
+  LightboxCopyProvider
+} from "./chunk-TEQYTEM2.js";
+import {
+  scrim
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/Lightbox.tsx
+import Dialog from "@mui/material/Dialog/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_STATIC_PROPS = {
+  maxWidth: false,
+  fullScreen: true,
+  TransitionComponent: Fade,
+  TransitionProps: { timeout: 300 },
+  PaperProps: { sx: { background: (theme) => scrim(theme, 0.9), backdropFilter: (theme) => `blur(${rem(theme, 2)})` } },
+  // `aria-labelledby` is the one accessible name for the modal itself: MUI
+  // forwards it (with `aria-modal` and its own `role="dialog"`) onto the
+  // Paper, the element that is actually the WAI-ARIA dialog. A plain
+  // `aria-label` alongside it would land on the OUTER root instead — a
+  // second, non-modal `role="dialog"` this component sets of its own accord
+  // — duplicating (and, as a static English literal, contradicting) the name
+  // the Paper already carries.
+  //
+  // For the same reason, `role` is deliberately NOT set here (FUT-2861):
+  // `Dialog` destructures `aria-labelledby` and `aria-modal` by name and
+  // applies them to the Paper alongside its own hard-coded `role="dialog"`,
+  // but `role` itself is not one of the props it destructures — a `role`
+  // passed here falls into `...other` and lands a second, unlabelled
+  // `role="dialog"` on the outer Modal root instead of the Paper.
+  "aria-labelledby": "lightbox-title",
+  "aria-modal": "true"
+};
+var Lightbox = React.forwardRef((componentProps, ref) => {
+  const props = resolveLightboxProps(componentProps);
+  const { isOpen, items, loop, autoplay, showControls, showCaptions, thumbnails, zoomable } = props;
+  const { className, style, dataTestId } = props;
+  const testId = makeTestId(dataTestId);
+  const lightbox = useLightbox(props, ref);
+  const { currentIndex, currentItem, zoom } = lightbox;
+  return /* @__PURE__ */ jsx(LightboxCopyProvider, { copy: props.copy, children: /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: isOpen,
+      onClose: lightbox.close,
+      ...DIALOG_STATIC_PROPS,
+      className,
+      style,
+      onTouchStart: lightbox.handleTouchStart,
+      onTouchEnd: lightbox.handleTouchEnd,
+      "data-testid": dataTestId || "lightbox",
+      children: [
+        /* @__PURE__ */ jsxs(Typography, { id: "lightbox-title", variant: "h6", sx: { position: "absolute", left: sxRem(-1e4) }, children: [
+          props.copy.dialogLabel,
+          " - ",
+          currentItem?.alt || props.copy.itemPosition(currentIndex + 1, items.length)
+        ] }),
+        /* @__PURE__ */ jsx(
+          LightboxOverlay,
+          {
+            testId,
+            itemCount: items.length,
+            currentIndex,
+            showControls,
+            loop,
+            autoplay,
+            canZoom: lightbox.canZoom,
+            isAutoPlaying: lightbox.isAutoPlaying,
+            onClose: lightbox.close,
+            onPrev: lightbox.prev,
+            onNext: lightbox.next,
+            onZoomIn: zoom.zoomIn,
+            onZoomOut: zoom.zoomOut,
+            onResetZoom: zoom.resetZoom,
+            onToggleAutoplay: () => lightbox.setIsAutoPlaying((playing) => !playing)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LightboxStage,
+          {
+            items,
+            currentItem,
+            currentIndex,
+            isLoading: lightbox.isLoading,
+            showCaptions,
+            thumbnails,
+            testId,
+            media: /* @__PURE__ */ jsx(
+              LightboxCurrentMedia,
+              {
+                item: currentItem,
+                index: currentIndex,
+                total: items.length,
+                zoomable,
+                zoom,
+                testId,
+                onLoadingChange: lightbox.setIsLoading,
+                onWheel: lightbox.handleWheel
+              }
+            ),
+            thumbnailStrip: thumbnails && items.length > 1 && /* @__PURE__ */ jsx(
+              LightboxThumbnails,
+              {
+                items,
+                currentIndex,
+                testId,
+                onSelect: lightbox.goToIndex
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+});
+Lightbox.displayName = "Lightbox";
+var Lightbox_default = Lightbox;
+
+export {
+  Lightbox,
+  Lightbox_default
+};
+//# sourceMappingURL=chunk-TWWA7QPA.js.map