@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-WF3P7GE5.js

@@ -0,0 +1,178 @@
+import {
+  Box,
+  CONTROL_RESET,
+  CountedIcon,
+  controlProps,
+  focusRing
+} from "./chunk-IK2ZVV3M.js";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader
+} from "./chunk-UYCFHV2S.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/SectionNav/SectionNav.sheet.tsx
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GridEntry({ entry, linkComponent, copy, testId, onDone }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...controlProps({
+        href: entry.href,
+        linkComponent,
+        inert: entry.disabled === true,
+        onClick: () => {
+          entry.onSelect?.();
+          onDone();
+        }
+      }),
+      "aria-current": entry.active ? "page" : void 0,
+      "data-testid": entry.dataTestId ?? `${testId}-entry-${entry.id}`,
+      sx: {
+        ...CONTROL_RESET,
+        ...focusRing(theme),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 0.75,
+        minHeight: rem(theme, 76),
+        px: 0.5,
+        py: 1,
+        borderRadius: 1.5,
+        textAlign: "center",
+        bgcolor: entry.active ? "action.selected" : "action.hover",
+        color: entry.active ? "primary.main" : "text.primary",
+        "& svg": { color: "primary.main" },
+        "&:disabled": { color: "text.disabled", "& svg": { color: "text.disabled" } }
+      },
+      children: [
+        /* @__PURE__ */ jsx(CountedIcon, { icon: entry.icon, count: entry.badge, label: copy.badge, testId: `${testId}-badge-${entry.id}` }),
+        /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", sx: { lineHeight: 1.2, fontWeight: entry.active ? 700 : 500 }, children: entry.label })
+      ]
+    }
+  );
+}
+function ListEntry({ entry, linkComponent, copy, testId, onDone }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...controlProps({
+        href: entry.href,
+        linkComponent,
+        inert: entry.disabled === true,
+        onClick: () => {
+          entry.onSelect?.();
+          onDone();
+        }
+      }),
+      "aria-current": entry.active ? "page" : void 0,
+      "data-testid": entry.dataTestId ?? `${testId}-entry-${entry.id}`,
+      sx: {
+        ...CONTROL_RESET,
+        ...focusRing(theme),
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        width: "100%",
+        minHeight: rem(theme, 52),
+        px: 1.5,
+        py: 1,
+        borderRadius: 1.5,
+        textAlign: "start",
+        bgcolor: entry.active ? "action.selected" : "action.hover",
+        "& svg": { color: "primary.main" },
+        "&:disabled": { color: "text.disabled", "& svg": { color: "text.disabled" } }
+      },
+      children: [
+        /* @__PURE__ */ jsx(CountedIcon, { icon: entry.icon, count: entry.badge, label: copy.badge, testId: `${testId}-badge-${entry.id}` }),
+        /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", sx: { fontWeight: 600 }, children: entry.label }),
+          entry.description ? /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", children: entry.description }) : null
+        ] })
+      ]
+    }
+  );
+}
+function SheetGroup({
+  group,
+  linkComponent,
+  copy,
+  testId,
+  onDone
+}) {
+  const grid = group.layout === "grid";
+  const Entry = grid ? GridEntry : ListEntry;
+  return /* @__PURE__ */ jsxs(Box, { component: "section", "data-testid": `${testId}-group-${group.id}`, sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    group.title ? /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", sx: { lineHeight: 1.6 }, children: group.title }) : null,
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: grid ? { display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 1 } : { display: "flex", flexDirection: "column", gap: 0.75 },
+        children: group.entries.map((entry) => /* @__PURE__ */ jsx(Entry, { entry, linkComponent, copy, testId, onDone }, entry.id))
+      }
+    )
+  ] });
+}
+function SectionNavSheet({
+  menu,
+  open,
+  onClose,
+  linkComponent,
+  copy,
+  testId,
+  bottomOffset
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      open,
+      onClose,
+      anchor: "bottom",
+      height: "auto",
+      dataTestId: testId,
+      paperSx: {
+        borderTopLeftRadius: rem(theme, Number(theme.shape.borderRadius) * 3),
+        borderTopRightRadius: rem(theme, Number(theme.shape.borderRadius) * 3),
+        maxHeight: `calc(85dvh - ${bottomOffset})`,
+        bottom: bottomOffset
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": menu.title,
+          sx: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 },
+          children: [
+            /* @__PURE__ */ jsx(DrawerHeader, { onClose, closeLabel: copy.close, dataTestId: `${testId}-header`, children: menu.title }),
+            /* @__PURE__ */ jsx(DrawerContent, { children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: menu.groups.map((group) => /* @__PURE__ */ jsx(
+              SheetGroup,
+              {
+                group,
+                linkComponent,
+                copy,
+                testId,
+                onDone: onClose
+              },
+              group.id
+            )) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  SectionNavSheet
+};
+//# sourceMappingURL=chunk-WF3P7GE5.js.map

package/dist/chunk-WGFHZNFR.js

@@ -0,0 +1,164 @@
+import {
+  DIALOG_BACKDROP,
+  DIALOG_BORDER_WIDTH,
+  DIALOG_GLASS,
+  DIALOG_GLOW,
+  DIALOG_GRADIENT,
+  DIALOG_MARGIN_UNITS,
+  DIALOG_MAX_WIDTH,
+  DIALOG_PULSE,
+  DIALOG_RADIUS_UNITS,
+  DIALOG_WIDTH_PERCENT
+} from "./chunk-AL5E624U.js";
+import {
+  dynamicViewportHeight
+} from "./chunk-AKZWDZCZ.js";
+import {
+  scrim,
+  shadowInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/feedback/Dialog/Dialog.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var pulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, DIALOG_PULSE.spread)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+function borderRadiusOf(theme, borderRadius) {
+  const units = DIALOG_RADIUS_UNITS[borderRadius] ?? DIALOG_RADIUS_UNITS.lg;
+  return units === 0 ? "0" : theme.spacing(units);
+}
+function maxWidthOf(theme, size) {
+  return rem(theme, DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md);
+}
+function baseStylesOf(theme, opts) {
+  return {
+    borderRadius: borderRadiusOf(theme, opts.borderRadius),
+    maxWidth: maxWidthOf(theme, opts.size),
+    width: `${DIALOG_WIDTH_PERCENT}vw`,
+    margin: theme.spacing(DIALOG_MARGIN_UNITS),
+    transition: theme.transitions.create(
+      ["box-shadow", "background-color", "backdrop-filter"],
+      { duration: theme.transitions.duration.standard }
+    )
+  };
+}
+function glowStylesOf(theme, glow) {
+  return glow ? {
+    boxShadow: `${rems(theme, 0, 0, DIALOG_GLOW.blurRadius)} ${alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)}`
+  } : {};
+}
+function pulseStylesOf(theme, pulse) {
+  if (!pulse) return {};
+  return {
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      backgroundColor: theme.palette.primary.main,
+      opacity: DIALOG_PULSE.alpha,
+      animation: `${pulseAnimation(theme)} ${DIALOG_PULSE.durationMs / 1e3}s infinite`,
+      pointerEvents: "none",
+      zIndex: DIALOG_PULSE.zIndex
+    }
+  };
+}
+function defaultVariantStyles(theme, opts) {
+  const gradientStyles = opts.gradient ? {
+    background: `linear-gradient(${DIALOG_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, DIALOG_GRADIENT.stopAlpha)}, ${alpha(theme.palette.secondary.main, DIALOG_GRADIENT.stopAlpha)})`,
+    backdropFilter: `blur(${rem(theme, DIALOG_GRADIENT.blurPx)})`
+  } : {};
+  return {
+    ...gradientStyles,
+    backgroundColor: opts.glass ? alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha) : theme.palette.background.paper,
+    backdropFilter: opts.glass ? `blur(${rem(theme, DIALOG_GLASS.blurPx)})` : "none",
+    border: opts.glass ? `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}` : "none"
+  };
+}
+var NO_FOCUS_OUTLINE = { outline: 0 };
+function variantStylesOf(theme, opts) {
+  const decorations = {
+    ...glowStylesOf(theme, opts.glow),
+    ...pulseStylesOf(theme, opts.pulse)
+  };
+  switch (opts.variant) {
+    case "glass":
+      return {
+        ...baseStylesOf(theme, opts),
+        ...decorations,
+        ...NO_FOCUS_OUTLINE,
+        backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
+        backdropFilter: `blur(${rem(theme, DIALOG_GLASS.blurPx)})`,
+        border: `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`,
+        boxShadow: `${rems(theme, 0, DIALOG_GLASS.shadow.offsetY, DIALOG_GLASS.shadow.blurRadius)} ${shadowInk(theme, DIALOG_GLASS.shadow.alpha)}`
+      };
+    case "fullscreen":
+      return {
+        borderRadius: 0,
+        margin: 0,
+        width: "100vw",
+        // `100dvh`, not `100vh` — see `dynamicViewportHeight`.
+        ...dynamicViewportHeight("height"),
+        maxWidth: "none",
+        maxHeight: "none",
+        ...decorations,
+        ...NO_FOCUS_OUTLINE
+      };
+    case "drawer": {
+      const radius = borderRadiusOf(theme, opts.borderRadius);
+      return {
+        // `radius` is already a length (`theme.spacing(n)` → '16px', or 0): gluing
+        // another `px` on wrote '16pxpx', which the browser dropped, leaving the
+        // panel's leading corners square.
+        borderRadius: `${radius} 0 0 ${radius}`,
+        margin: 0,
+        width: maxWidthOf(theme, opts.size),
+        // Never wider than the screen: a 600px panel on a 375px phone put its
+        // title and the start of every line off the left edge.
+        maxWidth: "100%",
+        ...dynamicViewportHeight("height"),
+        maxHeight: "none",
+        ...decorations,
+        ...NO_FOCUS_OUTLINE
+      };
+    }
+    default:
+      return {
+        ...baseStylesOf(theme, opts),
+        ...decorations,
+        ...defaultVariantStyles(theme, opts),
+        ...NO_FOCUS_OUTLINE
+      };
+  }
+}
+function backdropSxOf(theme, glass) {
+  return {
+    backgroundColor: scrim(theme, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),
+    backdropFilter: glass ? `blur(${rem(theme, DIALOG_BACKDROP.blurPx)})` : "none"
+  };
+}
+
+export {
+  variantStylesOf,
+  backdropSxOf
+};
+//# sourceMappingURL=chunk-WGFHZNFR.js.map

package/dist/chunk-WGG7XNQB.js

@@ -0,0 +1,199 @@
+import {
+  slideIn
+} from "./chunk-3AIRFAI3.js";
+import {
+  shadowInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx
+import Box from "@mui/material/Box/index.js";
+import List from "@mui/material/List/index.js";
+import ListItemButton from "@mui/material/ListItemButton/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var megaMenuSlide = (theme) => keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(${rem(theme, 20)});
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var NavigationContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["variant", "collapsed", "minimal"].includes(prop)
+})(({ theme, variant, collapsed, minimal }) => ({
+  display: "flex",
+  position: "relative",
+  animation: `${slideIn(theme)} 0.4s ease-out`,
+  ...variant === "horizontal" && {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    ...!minimal && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.95)} 0%, ${alpha(theme.palette.background.paper, 0.98)} 100%)`,
+      backdropFilter: `blur(${rem(theme, 10)})`,
+      borderRadius: theme.spacing(2),
+      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.08)}`
+    }
+  },
+  ...variant === "vertical" && {
+    flexDirection: "column",
+    width: rem(theme, collapsed ? 80 : 280),
+    transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+    height: "100%",
+    ...!minimal && {
+      background: `linear-gradient(180deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+      backdropFilter: `blur(${rem(theme, 12)})`,
+      borderRadius: theme.spacing(2),
+      boxShadow: `0 ${rems(theme, 12, 40)} ${shadowInk(theme, 0.1)}`,
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: rem(theme, 200),
+        background: `radial-gradient(ellipse at top, ${alpha(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,
+        pointerEvents: "none"
+      }
+    }
+  },
+  ...variant === "mega" && {
+    flexDirection: "column",
+    width: "100%",
+    ...!minimal && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,
+      backdropFilter: `blur(${rem(theme, 15)})`,
+      borderRadius: theme.spacing(3),
+      overflow: "hidden",
+      boxShadow: `0 ${rems(theme, 20, 60)} ${shadowInk(theme, 0.12)}`
+    }
+  }
+}));
+var StyledList = styled(List, {
+  shouldForwardProp: (prop) => !["variant", "size"].includes(prop)
+})(({ theme, variant }) => ({
+  padding: 0,
+  width: "100%",
+  ...variant === "horizontal" && {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  ...variant === "mega" && {
+    display: "grid",
+    gridTemplateColumns: `repeat(auto-fit, minmax(${rem(theme, 250)}, 1fr))`,
+    gap: theme.spacing(2),
+    padding: theme.spacing(2)
+  }
+}));
+var LogoContainer = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(2.5),
+  marginBottom: theme.spacing(2),
+  position: "relative",
+  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)} 0%, ${alpha(theme.palette.primary.dark, 0.04)} 100%)`,
+  borderBottom: `${rem(theme, 2)} solid ${alpha(theme.palette.primary.main, 0.2)}`,
+  overflow: "hidden",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: "-50%",
+    right: "-50%",
+    width: "200%",
+    height: "200%",
+    background: `radial-gradient(circle, ${alpha(theme.palette.primary.light, 0.1)} 0%, transparent 70%)`,
+    animation: `${slideIn(theme)} 1s ease-out`
+  },
+  "& > *": {
+    position: "relative",
+    zIndex: 1
+  }
+}));
+var CollapseButton = styled(ListItemButton)(({ theme }) => ({
+  borderRadius: theme.spacing(1.5),
+  margin: theme.spacing(1),
+  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)} 0%, ${alpha(theme.palette.primary.dark, 0.04)} 100%)`,
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.12),
+    transform: "scale(1.05)",
+    boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.2)}`,
+    "& .MuiListItemIcon-root": {
+      transform: "rotate(180deg)",
+      transition: "transform 0.3s ease"
+    }
+  },
+  "&:active": {
+    transform: "scale(0.98)"
+  }
+}));
+var MegaMenuSection = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(3),
+  borderRadius: theme.spacing(2),
+  background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.9)} 100%)`,
+  boxShadow: `0 ${rems(theme, 10, 30)} ${shadowInk(theme, 0.08)}`,
+  border: `1px solid ${alpha(theme.palette.divider, 0.08)}`,
+  position: "relative",
+  overflow: "hidden",
+  animation: `${megaMenuSlide(theme)} 0.5s ease-out`,
+  animationFillMode: "both",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: rem(theme, 3),
+    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 50%, ${theme.palette.primary.main} 100%)`,
+    backgroundSize: "200% 100%",
+    animation: "shimmer 3s ease-in-out infinite"
+  },
+  "@keyframes shimmer": {
+    "0%": {
+      backgroundPosition: "200% 0"
+    },
+    "100%": {
+      backgroundPosition: "-200% 0"
+    }
+  },
+  "&:hover": {
+    transform: `translateY(${rem(theme, -4)})`,
+    boxShadow: `0 ${rems(theme, 15, 40)} ${shadowInk(theme, 0.12)}`,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  "&:nth-of-type(1)": { animationDelay: "0.1s" },
+  "&:nth-of-type(2)": { animationDelay: "0.2s" },
+  "&:nth-of-type(3)": { animationDelay: "0.3s" },
+  "&:nth-of-type(4)": { animationDelay: "0.4s" }
+}));
+var NavigationShell = React.forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(NavigationContainer, { ref, ...props, children })
+);
+NavigationShell.displayName = "NavigationShell";
+var LogoBar = ({ children }) => /* @__PURE__ */ jsx(LogoContainer, { children });
+var MenuList = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(StyledList, { ...props, children });
+var CollapseToggle = ({
+  children,
+  onClick
+}) => /* @__PURE__ */ jsx(CollapseButton, { onClick, children });
+var MegaSection = ({ children }) => /* @__PURE__ */ jsx(MegaMenuSection, { children });
+
+export {
+  NavigationShell,
+  LogoBar,
+  MenuList,
+  CollapseToggle,
+  MegaSection
+};
+//# sourceMappingURL=chunk-WGG7XNQB.js.map

package/dist/chunk-WQBHJXXW.js

@@ -0,0 +1,109 @@
+import {
+  NOTICE_ACTION_GAP_UNITS,
+  NOTICE_STEPS_INDENT_UNITS,
+  NOTICE_STEP_GAP_UNITS
+} from "./chunk-55FFONIV.js";
+import {
+  NOTICE_VARIANT
+} from "./chunk-L7BRU4UF.js";
+import {
+  Alert
+} from "./chunk-TP3XKS72.js";
+import {
+  Button
+} from "./chunk-JE6FNSQV.js";
+
+// src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TEST_ID = "notification-status-notice";
+var EnableAction = ({
+  props,
+  testId
+}) => /* @__PURE__ */ jsx(Box, { sx: { mt: NOTICE_ACTION_GAP_UNITS }, children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    variant: "solid",
+    color: "primary",
+    size: "sm",
+    loading: props.pending,
+    onClick: props.onEnable,
+    dataTestId: `${testId}-enable`,
+    children: props.enableLabel
+  }
+) });
+var BlockedSteps = ({
+  props,
+  testId
+}) => {
+  const [open, setOpen] = React.useState(props.defaultStepsOpen ?? false);
+  const listId = React.useId();
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: NOTICE_ACTION_GAP_UNITS }, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "text",
+        color: "primary",
+        size: "sm",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        onClick: () => setOpen((was) => !was),
+        dataTestId: `${testId}-steps-toggle`,
+        children: props.stepsToggleLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "ol",
+        id: listId,
+        hidden: !open,
+        "data-testid": `${testId}-steps`,
+        sx: {
+          m: 0,
+          mt: NOTICE_STEP_GAP_UNITS,
+          pl: NOTICE_STEPS_INDENT_UNITS,
+          display: open ? "flex" : "none",
+          flexDirection: "column",
+          gap: NOTICE_STEP_GAP_UNITS
+        },
+        children: props.steps.map((step, index) => /* @__PURE__ */ jsx(Typography, { component: "li", variant: "body2", children: step }, `${index}-${step}`))
+      }
+    )
+  ] });
+};
+var NoticeAction = ({
+  props,
+  testId
+}) => {
+  if (props.status === "disabled") return /* @__PURE__ */ jsx(EnableAction, { props, testId });
+  if (props.status === "blocked") return /* @__PURE__ */ jsx(BlockedSteps, { props, testId });
+  return null;
+};
+var NotificationStatusNotice = React.forwardRef((props, ref) => {
+  const testId = props.dataTestId ?? DEFAULT_TEST_ID;
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      ref,
+      variant: NOTICE_VARIANT[props.status],
+      title: props.title,
+      description: props.description,
+      announce: "polite",
+      showIcon: true,
+      "data-testid": testId,
+      "data-status": props.status,
+      className: props.className,
+      sx: props.sx,
+      children: /* @__PURE__ */ jsx(NoticeAction, { props, testId })
+    }
+  );
+});
+NotificationStatusNotice.displayName = "NotificationStatusNotice";
+
+export {
+  NotificationStatusNotice
+};
+//# sourceMappingURL=chunk-WQBHJXXW.js.map