@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-EJYJLVPK.js

@@ -0,0 +1,203 @@
+import {
+  glowAnimation,
+  pulseAnimation,
+  shimmerAnimation
+} from "./chunk-IM4DMKH4.js";
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  shadowInk,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Sheet/Sheet.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var isHorizontalPosition = (position) => position === "left" || position === "right";
+var HORIZONTAL_SIZES = {
+  xs: (theme) => `min(92vw, ${rem(theme, 240)})`,
+  sm: (theme) => `min(92vw, ${rem(theme, 320)})`,
+  md: (theme) => `min(92vw, ${rem(theme, 400)})`,
+  lg: (theme) => `min(92vw, max(${rem(theme, 560)}, 32vw))`,
+  xl: (theme) => `min(92vw, max(${rem(theme, 720)}, 40vw))`,
+  full: () => "100%"
+};
+var VERTICAL_SIZES = {
+  xs: (theme) => `min(${rem(theme, 200)}, 100%)`,
+  sm: (theme) => `min(${rem(theme, 300)}, 100%)`,
+  md: (theme) => `min(${rem(theme, 400)}, 100%)`,
+  lg: (theme) => `min(${rem(theme, 500)}, 100%)`,
+  xl: (theme) => `min(${rem(theme, 600)}, 100%)`
+};
+var verticalMaxWidth = (theme) => `min(100%, ${rem(theme, 640)})`;
+var sizeStyles = ({
+  theme,
+  position,
+  size,
+  isDraggableVariant,
+  currentHeight
+}) => {
+  if (isHorizontalPosition(position)) {
+    return { width: (HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md)(theme) };
+  }
+  if (size === "full") return { width: "100%", height: "100%" };
+  const cross = { width: verticalMaxWidth(theme), marginInline: "auto" };
+  if (isDraggableVariant && currentHeight !== null) {
+    return { ...cross, height: currentHeight };
+  }
+  return {
+    ...cross,
+    // A CEILING, not a height — see `VERTICAL_SIZES`. `height: auto` is stated
+    // rather than left off so the rule survives a caller who set a height on a
+    // previous render, and it is what lets the panel hug what it holds.
+    height: "auto",
+    maxHeight: (VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md)(theme)
+  };
+};
+var toRgbTriplet = (hexColor) => {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `${r}, ${g}, ${b}`;
+};
+var roundedStyles = (theme, position) => {
+  const radius = theme.spacing(2);
+  const byPosition = {
+    top: `0 0 ${radius} ${radius}`,
+    bottom: `${radius} ${radius} 0 0`,
+    left: `0 ${radius} ${radius} 0`,
+    right: `${radius} 0 0 ${radius}`
+  };
+  return { borderRadius: byPosition[position] };
+};
+var SURFACES = {
+  draggable: ({ theme, elevation, accent }) => ({
+    boxShadow: `
+            ${theme.shadows[Math.min(elevation + 4, 24)]},
+            ${rems(theme, 0, -2, 10, 0)} ${shadowInk(theme, 0.1)}
+          `,
+    border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+    borderTop: `${rem(theme, 2)} solid ${alpha(accent, 0.3)}`,
+    transition: theme.transitions.create(["transform", "box-shadow", "border-color"], {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeInOut
+    }),
+    "&:hover": { borderTopColor: alpha(accent, 0.5) }
+  }),
+  glass: ({ theme, glass }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),
+    backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,
+    boxShadow: `
+            ${rems(theme, 0, 8, 32, 0)} ${shadowInk(theme, 0.15)},
+            inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${sheen(theme, 0.1)}
+          `
+  }),
+  gradient: ({ theme, color, gradient, accent }) => ({
+    background: gradient ? `linear-gradient(
+                135deg,
+                ${theme.palette.background.paper} 0%,
+                ${alpha(accent, 0.08)} 50%,
+                ${alpha(accentFor(theme, color)?.dark || accent, 0.12)} 100%
+              )` : theme.palette.background.paper,
+    position: "relative",
+    overflow: "hidden",
+    "&::before": gradient ? shimmerOverlay(theme) : {}
+  }),
+  elevated: ({ theme, elevation }) => ({
+    boxShadow: `
+            ${theme.shadows[elevation]},
+            ${rems(theme, 0, 20, 40, -15)} ${shadowInk(theme, 0.15)}
+          `,
+    transform: "translateZ(0)",
+    willChange: "transform"
+  }),
+  minimal: () => ({ boxShadow: "none", border: "none" }),
+  default: () => ({})
+};
+var shimmerOverlay = (theme) => ({
+  content: '""',
+  position: "absolute",
+  top: 0,
+  left: "-100%",
+  width: "100%",
+  height: "100%",
+  background: `linear-gradient(
+              90deg,
+              transparent,
+              ${sheen(theme, 0.2)},
+              transparent
+            )`,
+  animation: `${shimmerAnimation(theme)} 3s infinite`
+});
+var baseSurface = (input, accent) => {
+  const { theme, disabled, isDragging, isAnimating, isDraggableVariant, isVerticalSheet } = input;
+  const colorRgb = toRgbTriplet(accent);
+  return {
+    backgroundColor: theme.palette.background.paper,
+    // A transition would fight the per-frame height writes while a drag or a
+    // snap animation is driving the panel.
+    transition: !isDragging && !isAnimating ? theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard,
+      easing: theme.transitions.easing.easeInOut
+    }) : "none",
+    opacity: disabled ? 0.5 : 1,
+    pointerEvents: disabled ? "none" : "auto",
+    cursor: isDraggableVariant && isVerticalSheet ? "grab" : "auto",
+    "--pulse-color": colorRgb,
+    "--glow-color": colorRgb,
+    ...isDragging && { cursor: "grabbing" }
+  };
+};
+var variantStyles = (input) => {
+  const { theme, variant, color, position, glow, pulse, rounded } = input;
+  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;
+  return {
+    ...baseSurface(input, accent),
+    // glow first, then pulse: with both set the pulse keyframes win the shared
+    // `animation` slot, which is the order the original spread produced.
+    ...glow && { animation: `${glowAnimation(theme)} 2s ease-in-out infinite`, filter: "brightness(1.05)" },
+    ...pulse && { animation: `${pulseAnimation(theme)} 2s infinite`, position: "relative" },
+    ...rounded && roundedStyles(theme, position),
+    ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent })
+  };
+};
+var panelSx = (input) => {
+  const { theme, position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } = input;
+  return {
+    // The DEFAULT, so the glow and the elevated shadow are not clipped by the
+    // panel they hang off. It used to be stated last, which made it a rule
+    // nothing could override — including `gradient`, whose own `overflow:
+    // hidden` is what keeps its shimmer inside the panel. That was invisible
+    // while every vertical sheet was full-bleed, because the sweep starts at
+    // `left: -100%` and a full-width panel put it off-screen; a 640px one puts
+    // it on the backdrop beside the sheet.
+    overflow: "visible",
+    ...sizeStyles({ theme, position, size, isDraggableVariant, currentHeight }),
+    // A COLUMN, so `maxHeight` above can be a ceiling rather than a height: the
+    // body is then a flex item that shrinks against it, and the scrolling falls
+    // to `SheetContent` where it belongs. Without this the panel would clip a
+    // long sheet instead of scrolling it.
+    ...isVerticalSheet ? { display: "flex", flexDirection: "column" } : {},
+    ...variantStyles(input),
+    ...style,
+    // Expand only the cross axis so the chosen `size` still governs the main
+    // axis: side sheets keep their (responsive) width and go full-height;
+    // top/bottom sheets keep their height and go full-width.
+    ...fullHeight && !isDraggableVariant && (isHorizontalPosition(position) ? { height: "100%" } : { width: "100%" })
+  };
+};
+
+export {
+  panelSx
+};
+//# sourceMappingURL=chunk-EJYJLVPK.js.map

package/dist/chunk-EJYJLVPK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';\nimport type { SheetProps } from './Sheet.types';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';\nimport { shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { accentFor } from '../../../tokens/scales';\n\ntype Position = NonNullable<SheetProps['position']>;\ntype Variant = NonNullable<SheetProps['variant']>;\ntype Size = NonNullable<SheetProps['size']>;\ntype Color = NonNullable<SheetProps['color']>;\n\nconst isHorizontalPosition = (position: Position) => position === 'left' || position === 'right';\n\n/**\n * Horizontal (left/right) sheets are viewport-aware: a design-px floor (through\n * `rem`) keeps the panel\n * usable, `…vw` lets the larger presets grow on wide screens (lg ≥32%, xl ≥40%\n * of the viewport), and the outer `min(92vw, …)` guarantees the panel never\n * overflows a small screen.\n */\nconst HORIZONTAL_SIZES: Record<Size, (theme: Theme) => string> = {\n  xs: (theme) => `min(92vw, ${rem(theme, 240)})`,\n  sm: (theme) => `min(92vw, ${rem(theme, 320)})`,\n  md: (theme) => `min(92vw, ${rem(theme, 400)})`,\n  lg: (theme) => `min(92vw, max(${rem(theme, 560)}, 32vw))`,\n  xl: (theme) => `min(92vw, max(${rem(theme, 720)}, 40vw))`,\n  full: () => '100%',\n};\n\n/**\n * `size` governs a vertical sheet's MAIN axis, and it is a CEILING rather than\n * a height: the panel is as tall as what it holds, and starts scrolling only\n * once that would pass the preset.\n *\n * It was a fixed `height`, which meant a short sheet reserved the rest of the\n * preset as dead space — a `md` sheet holding three lines and a button drew a\n * 400px panel and floated them in it. `min(…, 100%)` keeps the ceiling under\n * the viewport, which is also what MUI's own bottom paper asks for.\n *\n * `full` is absent on purpose: it is not a ceiling, it is the whole viewport,\n * and `sizeStyles` answers it before it gets here.\n */\nconst VERTICAL_SIZES: Record<Exclude<Size, 'full'>, (theme: Theme) => string> = {\n  xs: (theme) => `min(${rem(theme, 200)}, 100%)`,\n  sm: (theme) => `min(${rem(theme, 300)}, 100%)`,\n  md: (theme) => `min(${rem(theme, 400)}, 100%)`,\n  lg: (theme) => `min(${rem(theme, 500)}, 100%)`,\n  xl: (theme) => `min(${rem(theme, 600)}, 100%)`,\n};\n\n/**\n * How wide a top/bottom sheet is allowed to get — its CROSS axis, so it is one\n * rule rather than one per `size` preset.\n *\n * A bottom sheet spanning the full width is a phone layout, and it was the only\n * layout this component had: on a desktop a panel holding a sentence and one\n * button was drawn 1900px wide, with the content stranded in the middle of it.\n * 640px is Material's own ceiling for a bottom sheet above the handset\n * breakpoint, and below it `100%` gives the phone back exactly what it had.\n *\n * `fullHeight` is the documented opt-out — it expands a vertical sheet along\n * this axis — and it becomes meaningful here for the first time: it used to\n * name the behaviour every bottom sheet already had.\n */\nconst verticalMaxWidth = (theme: Theme): string => `min(100%, ${rem(theme, 640)})`;\n\ninterface SizeStyleInput {\n  theme: Theme;\n  position: Position;\n  size: Size;\n  isDraggableVariant: boolean;\n  currentHeight: number | null;\n}\n\nconst sizeStyles = ({\n  theme,\n  position,\n  size,\n  isDraggableVariant,\n  currentHeight,\n}: SizeStyleInput) => {\n  if (isHorizontalPosition(position)) {\n    return { width: (HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md)(theme) };\n  }\n\n  // `full` is not a size on the scale — it is THE WHOLE VIEWPORT, on both axes,\n  // and it has to stay that: a consumer using it for a phone takeover would\n  // otherwise get a content-hugging 640px card out of a catalog bump, with\n  // nothing in the API left to ask for what they had. So it is answered before\n  // either rule below touches it.\n  if (size === 'full') return { width: '100%', height: '100%' };\n\n  // The cross axis is the same rule whatever the preset, and the draggable\n  // variant needs it too — dragging moves the panel's height, never its width.\n  // `marginInline` is what centres it: MUI pins the bottom paper `left: 0;\n  // right: 0`, so a definite width plus auto margins resolves to the middle.\n  const cross = { width: verticalMaxWidth(theme), marginInline: 'auto' };\n\n  // The draggable variant owns its own height: the snap point decides it, so a\n  // preset would fight the drag.\n  if (isDraggableVariant && currentHeight !== null) {\n    return { ...cross, height: currentHeight };\n  }\n\n  return {\n    ...cross,\n    // A CEILING, not a height — see `VERTICAL_SIZES`. `height: auto` is stated\n    // rather than left off so the rule survives a caller who set a height on a\n    // previous render, and it is what lets the panel hug what it holds.\n    height: 'auto',\n    maxHeight: (VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md)(theme),\n  };\n};\n\n/** `r, g, b` for a hex colour, so it can feed an `rgba(var(--x), a)` custom property. */\nconst toRgbTriplet = (hexColor: string) => {\n  const hex = hexColor.replace('#', '');\n  const r = parseInt(hex.substring(0, 2), 16);\n  const g = parseInt(hex.substring(2, 4), 16);\n  const b = parseInt(hex.substring(4, 6), 16);\n  return `${r}, ${g}, ${b}`;\n};\n\nconst roundedStyles = (theme: Theme, position: Position) => {\n  const radius = theme.spacing(2);\n  const byPosition: Record<Position, string> = {\n    top: `0 0 ${radius} ${radius}`,\n    bottom: `${radius} ${radius} 0 0`,\n    left: `0 ${radius} ${radius} 0`,\n    right: `${radius} 0 0 ${radius}`,\n  };\n  return { borderRadius: byPosition[position] };\n};\n\ninterface VariantStyleInput {\n  theme: Theme;\n  variant: Variant;\n  color: Color;\n  position: Position;\n  elevation: number;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  rounded: boolean;\n  disabled: boolean;\n  isDragging: boolean;\n  isAnimating: boolean;\n  isDraggableVariant: boolean;\n  isVerticalSheet: boolean;\n}\n\ntype SurfaceInput = VariantStyleInput & { accent: string };\n\n/**\n * Each variant's own additions to the shared surface — never the shared part\n * itself. Every arm of the old switch re-spread the same base, glow, pulse and\n * rounded objects before adding these few rules; `variantStyles` applies that\n * prefix once and lets the table hold only what actually differs.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>> = {\n  draggable: ({ theme, elevation, accent }) => ({\n    boxShadow: `\n            ${theme.shadows[Math.min(elevation + 4, 24)]},\n            ${rems(theme, 0, -2, 10, 0)} ${shadowInk(theme, 0.1)}\n          `,\n    border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n    borderTop: `${rem(theme, 2)} solid ${alpha(accent, 0.3)}`,\n    transition: theme.transitions.create(['transform', 'box-shadow', 'border-color'], {\n      duration: theme.transitions.duration.shorter,\n      easing: theme.transitions.easing.easeInOut,\n    }),\n    '&:hover': { borderTopColor: alpha(accent, 0.5) },\n  }),\n\n  glass: ({ theme, glass }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),\n    backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,\n    boxShadow: `\n            ${rems(theme, 0, 8, 32, 0)} ${shadowInk(theme, 0.15)},\n            inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${sheen(theme, 0.1)}\n          `,\n  }),\n\n  gradient: ({ theme, color, gradient, accent }) => ({\n    background: gradient\n      ? `linear-gradient(\n                135deg,\n                ${theme.palette.background.paper} 0%,\n                ${alpha(accent, 0.08)} 50%,\n                ${alpha(accentFor(theme, color)?.dark || accent, 0.12)} 100%\n              )`\n      : theme.palette.background.paper,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    '&::before': gradient ? shimmerOverlay(theme) : {},\n  }),\n\n  elevated: ({ theme, elevation }) => ({\n    boxShadow: `\n            ${theme.shadows[elevation]},\n            ${rems(theme, 0, 20, 40, -15)} ${shadowInk(theme, 0.15)}\n          `,\n    transform: 'translateZ(0)',\n    willChange: 'transform',\n  }),\n\n  minimal: () => ({ boxShadow: 'none', border: 'none' }),\n\n  default: () => ({}),\n};\n\n/** The sweep of light the gradient variant runs across itself. */\nconst shimmerOverlay = (theme: Theme) => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: 0,\n  left: '-100%',\n  width: '100%',\n  height: '100%',\n  background: `linear-gradient(\n              90deg,\n              transparent,\n              ${sheen(theme, 0.2)},\n              transparent\n            )`,\n  animation: `${shimmerAnimation(theme)} 3s infinite`,\n});\n\n/**\n * The parts of the surface that do not depend on the variant: the paper colour,\n * the transition suppression while a drag or spring is driving the panel, the\n * disabled and cursor states, and the two colour custom properties the glow and\n * pulse keyframes read.\n */\nconst baseSurface = (input: VariantStyleInput, accent: string) => {\n  const { theme, disabled, isDragging, isAnimating, isDraggableVariant, isVerticalSheet } = input;\n  const colorRgb = toRgbTriplet(accent);\n\n  return {\n    backgroundColor: theme.palette.background.paper,\n    // A transition would fight the per-frame height writes while a drag or a\n    // snap animation is driving the panel.\n    transition:\n      !isDragging && !isAnimating\n        ? theme.transitions.create(['all'], {\n            duration: theme.transitions.duration.standard,\n            easing: theme.transitions.easing.easeInOut,\n          })\n        : 'none',\n    opacity: disabled ? 0.5 : 1,\n    pointerEvents: disabled ? ('none' as const) : ('auto' as const),\n    cursor: isDraggableVariant && isVerticalSheet ? 'grab' : 'auto',\n    '--pulse-color': colorRgb,\n    '--glow-color': colorRgb,\n    ...(isDragging && { cursor: 'grabbing' }),\n  };\n};\n\nconst variantStyles = (input: VariantStyleInput) => {\n  const { theme, variant, color, position, glow, pulse, rounded } = input;\n  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;\n\n  return {\n    ...baseSurface(input, accent),\n    // glow first, then pulse: with both set the pulse keyframes win the shared\n    // `animation` slot, which is the order the original spread produced.\n    ...(glow && { animation: `${glowAnimation(theme)} 2s ease-in-out infinite`, filter: 'brightness(1.05)' }),\n    ...(pulse && { animation: `${pulseAnimation(theme)} 2s infinite`, position: 'relative' as const }),\n    ...(rounded && roundedStyles(theme, position)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent }),\n  };\n};\n\ninterface PanelSxInput extends VariantStyleInput {\n  size: Size;\n  currentHeight: number | null;\n  fullHeight: boolean;\n  style?: React.CSSProperties;\n}\n\n/**\n * The drawer paper's complete `sx`: its size, its variant surface, the caller's\n * own `style`, and the full-height rule.\n *\n * Built here rather than in the component so the component holds no style\n * branches of its own — the cross-axis rule below is four on its own.\n */\nexport const panelSx = (input: PanelSxInput): CSSObject => {\n  const { theme, position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } =\n    input;\n\n  return {\n    // The DEFAULT, so the glow and the elevated shadow are not clipped by the\n    // panel they hang off. It used to be stated last, which made it a rule\n    // nothing could override — including `gradient`, whose own `overflow:\n    // hidden` is what keeps its shimmer inside the panel. That was invisible\n    // while every vertical sheet was full-bleed, because the sweep starts at\n    // `left: -100%` and a full-width panel put it off-screen; a 640px one puts\n    // it on the backdrop beside the sheet.\n    overflow: 'visible',\n    ...sizeStyles({ theme, position, size, isDraggableVariant, currentHeight }),\n    // A COLUMN, so `maxHeight` above can be a ceiling rather than a height: the\n    // body is then a flex item that shrinks against it, and the scrolling falls\n    // to `SheetContent` where it belongs. Without this the panel would clip a\n    // long sheet instead of scrolling it.\n    ...(isVerticalSheet ? { display: 'flex', flexDirection: 'column' } : {}),\n    ...variantStyles(input),\n    ...style,\n    // Expand only the cross axis so the chosen `size` still governs the main\n    // axis: side sheets keep their (responsive) width and go full-height;\n    // top/bottom sheets keep their height and go full-width.\n    ...(fullHeight &&\n      !isDraggableVariant &&\n      (isHorizontalPosition(position) ? { height: '100%' } : { width: '100%' })),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-EL7CMURV.js

@@ -0,0 +1,241 @@
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/ContentToolbar/SavedViewsMenu.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KebabIcon from "@mui/icons-material/MoreVert";
+import ViewIcon from "@mui/icons-material/Visibility";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RECENT_LIMIT = 5;
+function DefaultTag({ label, testId }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      "data-testid": testId,
+      sx: { px: 0.75, py: 0.125, borderRadius: 1, fontSize: sxRem(11.2), bgcolor: "primary.main", color: "primary.contrastText" },
+      children: label
+    }
+  );
+}
+function buildActions(view, handlers, labels) {
+  const actions = [{ id: "apply", label: labels.apply, run: () => handlers.apply(view) }];
+  if (!view.isOwner) return actions;
+  if (!view.isDefault) {
+    actions.push({ id: "default", label: labels.setDefault, run: () => handlers.onSetDefault(view) });
+  }
+  actions.push({ id: "pin", label: view.pinned ? labels.unpin : labels.pin, run: () => handlers.onTogglePin(view) });
+  actions.push({ id: "share", label: view.shared ? labels.unshare : labels.share, run: () => handlers.onToggleShare(view) });
+  actions.push({ id: "edit", label: labels.edit, run: () => handlers.onEdit(view) });
+  actions.push({ id: "delete", label: labels.remove, danger: true, run: () => handlers.onDelete(view) });
+  return actions;
+}
+function ViewKebab({
+  view,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const close = () => setAnchorEl(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "aria-label": `${labels.apply} ${view.name}`,
+        "data-testid": `${testIdPrefix}-kebab-${view.id}`,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { width: 28, height: 28, color: "text.secondary" },
+        children: /* @__PURE__ */ jsx(KebabIcon, { sx: { fontSize: sxRem(16) } })
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open: Boolean(anchorEl), onClose: close, children: buildActions(view, handlers, labels).map((action) => /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        "data-testid": `${testIdPrefix}-item-${action.id}-${view.id}`,
+        onClick: () => {
+          action.run();
+          close();
+        },
+        sx: action.danger ? { color: "error.main" } : void 0,
+        children: action.label
+      },
+      action.id
+    )) })
+  ] });
+}
+function ViewRow({
+  view,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, "data-testid": `${testIdPrefix}-row-${view.id}`, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        onClick: () => handlers.apply(view),
+        sx: { flex: 1, minWidth: 0, cursor: "pointer", display: "flex", alignItems: "center", gap: 0.75 },
+        "data-testid": `${testIdPrefix}-apply-${view.id}`,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(14) }, children: view.name }),
+          view.isDefault && /* @__PURE__ */ jsx(DefaultTag, { label: labels.defaultTag, testId: `${testIdPrefix}-default-${view.id}` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ViewKebab, { view, handlers, labels, testIdPrefix })
+  ] });
+}
+function ViewSection({
+  title,
+  list,
+  sectionKey,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  if (list.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testIdPrefix}-section-${sectionKey}`, children: [
+    /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(12), fontWeight: 600, color: "text.secondary" }, children: title }),
+    /* @__PURE__ */ jsx(Stack, { spacing: 0.5, sx: { mt: 0.5 }, children: list.map((view) => /* @__PURE__ */ jsx(ViewRow, { view, handlers, labels, testIdPrefix }, view.id)) })
+  ] });
+}
+function FooterButton({
+  label,
+  testId,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", color: "inherit", onClick, "data-testid": testId, sx: { textTransform: "none" }, children: label });
+}
+function PopoverBody({
+  views,
+  pinned,
+  recent,
+  activeViewName,
+  labels,
+  handlers,
+  onSelectMain,
+  onSaveCurrent,
+  onManageAll,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { p: 1.5, width: 300 }, "data-testid": `${testIdPrefix}-popover`, children: [
+    /* @__PURE__ */ jsxs(MenuItem, { "data-testid": `${testIdPrefix}-main`, selected: !activeViewName, onClick: onSelectMain, sx: { borderRadius: 1, px: 1, gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, fontSize: sxRem(14) }, children: labels.mainView }),
+      !activeViewName && /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: sxRem(16), color: "primary.main" } })
+    ] }),
+    views.length === 0 ? /* @__PURE__ */ jsx(Typography, { sx: { fontSize: sxRem(12), color: "text.secondary" }, children: labels.empty }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ViewSection, { title: labels.pinned, list: pinned, sectionKey: "pinned", handlers, labels, testIdPrefix }),
+      /* @__PURE__ */ jsx(ViewSection, { title: labels.recent, list: recent, sectionKey: "recent", handlers, labels, testIdPrefix })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: { borderTop: 1, borderColor: "divider", pt: 1 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: { alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsx(FooterButton, { label: labels.saveCurrent, testId: `${testIdPrefix}-save-current`, onClick: onSaveCurrent }),
+      /* @__PURE__ */ jsx(FooterButton, { label: labels.manageAll, testId: `${testIdPrefix}-manage-all`, onClick: onManageAll })
+    ] }) })
+  ] });
+}
+function SavedViewsMenu({
+  views,
+  activeViewName,
+  onApply,
+  onSelectMain,
+  onSaveCurrent,
+  onEdit,
+  onDelete,
+  onSetDefault,
+  onTogglePin,
+  onToggleShare,
+  onManageAll,
+  labels: labelOverrides,
+  testIdPrefix = "views"
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const close = () => setAnchorEl(null);
+  const runAndClose = (action) => () => {
+    action();
+    close();
+  };
+  const labels = labelOverrides;
+  const pinned = views.filter((view) => view.pinned);
+  const recent = views.filter((view) => !view.pinned).slice(0, RECENT_LIMIT);
+  const handlers = {
+    apply: (view) => {
+      onApply(view);
+      close();
+    },
+    onEdit,
+    onDelete,
+    onSetDefault,
+    onTogglePin,
+    onToggleShare
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        "data-testid": `${testIdPrefix}-button`,
+        "aria-haspopup": "menu",
+        "aria-expanded": Boolean(anchorEl),
+        "aria-label": activeViewName ?? labels.mainView,
+        sx: { minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: "text.primary", textTransform: "none", fontWeight: 600 },
+        children: [
+          /* @__PURE__ */ jsx(ViewIcon, { sx: { fontSize: sxRem(18), display: { xs: "inline-flex", md: "none" } } }),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: { xs: "none", md: "inline" } }, children: activeViewName ?? labels.mainView }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: sxRem(14) } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchorEl),
+        anchorEl,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsx(
+          PopoverBody,
+          {
+            views,
+            pinned,
+            recent,
+            activeViewName,
+            labels,
+            handlers,
+            onSelectMain: runAndClose(onSelectMain),
+            onSaveCurrent: runAndClose(onSaveCurrent),
+            onManageAll: runAndClose(onManageAll),
+            testIdPrefix
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  SavedViewsMenu
+};
+//# sourceMappingURL=chunk-EL7CMURV.js.map

package/dist/chunk-EL7CMURV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/SavedViewsMenu.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport KebabIcon from '@mui/icons-material/MoreVert';\nimport ViewIcon from '@mui/icons-material/Visibility';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useState } from 'react';\n\nimport type {\n  SavedViewLike,\n  SavedViewsLabels,\n  SavedViewsMenuProps,\n} from './ContentToolbar.types';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { sxRem } from '../../../tokens/relative';\n\n/** How many non-pinned views show under \"Recentes\". */\nconst RECENT_LIMIT = 5;\n\ninterface RowHandlers<V extends SavedViewLike> {\n  apply: (view: V) => void;\n  onEdit: (view: V) => void;\n  onDelete: (view: V) => void;\n  onSetDefault: (view: V) => void;\n  onTogglePin: (view: V) => void;\n  onToggleShare: (view: V) => void;\n}\n\nfunction DefaultTag({ label, testId }: { label: string; testId: string }): React.JSX.Element {\n  return (\n    <Box\n      component=\"span\"\n      data-testid={testId}\n      sx={{ px: 0.75, py: 0.125, borderRadius: 1, fontSize: sxRem(11.2), bgcolor: 'primary.main', color: 'primary.contrastText' }}\n    >\n      {label}\n    </Box>\n  );\n}\n\ninterface KebabAction {\n  id: string;\n  label: string;\n  danger?: boolean;\n  run: () => void;\n}\n\n/** Build the per-view ⋮ actions; owner-only mutations follow \"Apply\". */\nfunction buildActions<V extends SavedViewLike>(\n  view: V,\n  handlers: RowHandlers<V>,\n  labels: SavedViewsLabels,\n): KebabAction[] {\n  const actions: KebabAction[] = [{ id: 'apply', label: labels.apply, run: () => handlers.apply(view) }];\n  if (!view.isOwner) return actions;\n  if (!view.isDefault) {\n    actions.push({ id: 'default', label: labels.setDefault, run: () => handlers.onSetDefault(view) });\n  }\n  actions.push({ id: 'pin', label: view.pinned ? labels.unpin : labels.pin, run: () => handlers.onTogglePin(view) });\n  actions.push({ id: 'share', label: view.shared ? labels.unshare : labels.share, run: () => handlers.onToggleShare(view) });\n  actions.push({ id: 'edit', label: labels.edit, run: () => handlers.onEdit(view) });\n  actions.push({ id: 'delete', label: labels.remove, danger: true, run: () => handlers.onDelete(view) });\n  return actions;\n}\n\nfunction ViewKebab<V extends SavedViewLike>({\n  view,\n  handlers,\n  labels,\n  testIdPrefix,\n}: {\n  view: V;\n  handlers: RowHandlers<V>;\n  labels: SavedViewsLabels;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const close = (): void => setAnchorEl(null);\n  return (\n    <>\n      <IconButton\n        size=\"small\"\n        aria-label={`${labels.apply} ${view.name}`}\n        data-testid={`${testIdPrefix}-kebab-${view.id}`}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ width: 28, height: 28, color: 'text.secondary' }}\n      >\n        <KebabIcon sx={{ fontSize: sxRem(16) }} />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={close}>\n        {buildActions(view, handlers, labels).map((action) => (\n          <MenuItem\n            key={action.id}\n            data-testid={`${testIdPrefix}-item-${action.id}-${view.id}`}\n            onClick={() => {\n              action.run();\n              close();\n            }}\n            sx={action.danger ? { color: 'error.main' } : undefined}\n          >\n            {action.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n\nfunction ViewRow<V extends SavedViewLike>({\n  view,\n  handlers,\n  labels,\n  testIdPrefix,\n}: {\n  view: V;\n  handlers: RowHandlers<V>;\n  labels: SavedViewsLabels;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }} data-testid={`${testIdPrefix}-row-${view.id}`}>\n      <Box\n        onClick={() => handlers.apply(view)}\n        sx={{ flex: 1, minWidth: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 0.75 }}\n        data-testid={`${testIdPrefix}-apply-${view.id}`}\n      >\n        <Typography component=\"span\" sx={{ fontSize: sxRem(14) }}>\n          {view.name}\n        </Typography>\n        {view.isDefault && <DefaultTag label={labels.defaultTag} testId={`${testIdPrefix}-default-${view.id}`} />}\n      </Box>\n      <ViewKebab view={view} handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />\n    </Stack>\n  );\n}\n\nfunction ViewSection<V extends SavedViewLike>({\n  title,\n  list,\n  sectionKey,\n  handlers,\n  labels,\n  testIdPrefix,\n}: {\n  title: string;\n  list: V[];\n  sectionKey: string;\n  handlers: RowHandlers<V>;\n  labels: SavedViewsLabels;\n  testIdPrefix: string;\n}): React.JSX.Element | null {\n  if (list.length === 0) return null;\n  return (\n    <Box data-testid={`${testIdPrefix}-section-${sectionKey}`}>\n      <Typography component=\"span\" sx={{ fontSize: sxRem(12), fontWeight: 600, color: 'text.secondary' }}>\n        {title}\n      </Typography>\n      <Stack spacing={0.5} sx={{ mt: 0.5 }}>\n        {list.map((view) => (\n          <ViewRow key={view.id} view={view} handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />\n        ))}\n      </Stack>\n    </Box>\n  );\n}\n\n/** A borderless footer text button (Save current / Manage all). */\nfunction FooterButton({\n  label,\n  testId,\n  onClick,\n}: {\n  label: string;\n  testId: string;\n  onClick: () => void;\n}): React.JSX.Element {\n  return (\n    <Button variant=\"text\" size=\"small\" color=\"inherit\" onClick={onClick} data-testid={testId} sx={{ textTransform: 'none' }}>\n      {label}\n    </Button>\n  );\n}\n\n/** The popover contents: the built-in Main vision default, saved-view sections, and footer. */\nfunction PopoverBody<V extends SavedViewLike>({\n  views,\n  pinned,\n  recent,\n  activeViewName,\n  labels,\n  handlers,\n  onSelectMain,\n  onSaveCurrent,\n  onManageAll,\n  testIdPrefix,\n}: {\n  views: V[];\n  pinned: V[];\n  recent: V[];\n  activeViewName?: string;\n  labels: SavedViewsLabels;\n  handlers: RowHandlers<V>;\n  onSelectMain: () => void;\n  onSaveCurrent: () => void;\n  onManageAll: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Stack spacing={1.5} sx={{ p: 1.5, width: 300 }} data-testid={`${testIdPrefix}-popover`}>\n      {/* Built-in no-filter default, always available above the saved views. */}\n      <MenuItem data-testid={`${testIdPrefix}-main`} selected={!activeViewName} onClick={onSelectMain} sx={{ borderRadius: 1, px: 1, gap: 1 }}>\n        <Box component=\"span\" sx={{ flex: 1, minWidth: 0, fontSize: sxRem(14) }}>\n          {labels.mainView}\n        </Box>\n        {!activeViewName && <CheckIcon sx={{ fontSize: sxRem(16), color: 'primary.main' }} />}\n      </MenuItem>\n      {views.length === 0 ? (\n        <Typography sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>{labels.empty}</Typography>\n      ) : (\n        <>\n          <ViewSection title={labels.pinned} list={pinned} sectionKey=\"pinned\" handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />\n          <ViewSection title={labels.recent} list={recent} sectionKey=\"recent\" handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />\n        </>\n      )}\n      <Box sx={{ borderTop: 1, borderColor: 'divider', pt: 1 }}>\n        <Stack spacing={0.5} sx={{ alignItems: 'flex-start' }}>\n          <FooterButton label={labels.saveCurrent} testId={`${testIdPrefix}-save-current`} onClick={onSaveCurrent} />\n          <FooterButton label={labels.manageAll} testId={`${testIdPrefix}-manage-all`} onClick={onManageAll} />\n        </Stack>\n      </Box>\n    </Stack>\n  );\n}\n\n/**\n * Stateless saved-views dropdown: a neutral trigger (styled like the sibling\n * toolbar controls) that shows `activeViewName` when a view is applied, else the\n * built-in \"Main vision\" label. The popover lists the Main vision default plus\n * pinned + recent views; a per-view ⋮ exposes owner-only mutations. This\n * component owns NO data — every action is a callback, so a page-level Connector\n * wires it to the backend.\n */\nexport function SavedViewsMenu<V extends SavedViewLike = SavedViewLike>({\n  views,\n  activeViewName,\n  onApply,\n  onSelectMain,\n  onSaveCurrent,\n  onEdit,\n  onDelete,\n  onSetDefault,\n  onTogglePin,\n  onToggleShare,\n  onManageAll,\n  labels: labelOverrides,\n  testIdPrefix = 'views',\n}: SavedViewsMenuProps<V>): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const close = (): void => setAnchorEl(null);\n  const runAndClose = (action: () => void) => (): void => {\n    action();\n    close();\n  };\n  const labels = labelOverrides;\n  const pinned = views.filter((view) => view.pinned);\n  const recent = views.filter((view) => !view.pinned).slice(0, RECENT_LIMIT);\n\n  const handlers: RowHandlers<V> = {\n    apply: (view) => {\n      onApply(view);\n      close();\n    },\n    onEdit,\n    onDelete,\n    onSetDefault,\n    onTogglePin,\n    onToggleShare,\n  };\n\n  return (\n    <>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        data-testid={`${testIdPrefix}-button`}\n        aria-haspopup=\"menu\"\n        aria-expanded={Boolean(anchorEl)}\n        aria-label={activeViewName ?? labels.mainView}\n        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}\n      >\n        {/* Mobile: an eye icon stands in for the view name to keep the toolbar one line. */}\n        <ViewIcon sx={{ fontSize: sxRem(18), display: { xs: 'inline-flex', md: 'none' } }} />\n        <Box component=\"span\" sx={{ display: { xs: 'none', md: 'inline' } }}>\n          {activeViewName ?? labels.mainView}\n        </Box>\n        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />\n      </Button>\n      <Popover\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={close}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n      >\n        <PopoverBody\n          views={views}\n          pinned={pinned}\n          recent={recent}\n          activeViewName={activeViewName}\n          labels={labels}\n          handlers={handlers}\n          onSelectMain={runAndClose(onSelectMain)}\n          onSaveCurrent={runAndClose(onSaveCurrent)}\n          onManageAll={runAndClose(onManageAll)}\n          testIdPrefix={testIdPrefix}\n        />\n      </Popover>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-EOW2ECB3.js

@@ -0,0 +1,107 @@
+import {
+  StepRow
+} from "./chunk-R75DZ3AK.js";
+import {
+  resolveWorkflowStepProps,
+  withDerivedStatus
+} from "./chunk-V5KKBMAT.js";
+
+// src/components/utility/WorkflowStep/WorkflowStep.tsx
+import Box from "@mui/material/Box/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var StepContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "variant"].includes(prop)
+})(({ theme, orientation, variant }) => ({
+  display: "flex",
+  flexDirection: orientation === "vertical" ? "column" : "row",
+  alignItems: orientation === "vertical" ? "flex-start" : "center",
+  gap: orientation === "vertical" ? theme.spacing(2) : theme.spacing(1),
+  width: "100%",
+  position: "relative",
+  // Variant-specific styles
+  ...variant === "minimal" && {
+    gap: orientation === "vertical" ? theme.spacing(1) : theme.spacing(0.5)
+  }
+}));
+var WorkflowStep = forwardRef((rawProps, ref) => {
+  const {
+    steps,
+    currentStep,
+    variant,
+    orientation,
+    color,
+    size,
+    showProgress,
+    animated,
+    interactive,
+    showNumbers,
+    showIcons,
+    completedIcon,
+    errorIcon,
+    onStepClick,
+    disabled,
+    className,
+    style,
+    "data-testid": dataTestId,
+    ...other
+  } = resolveWorkflowStepProps(rawProps);
+  const handleStepClick = useCallback((stepIndex, step) => {
+    if (onStepClick && !disabled && !step.disabled) {
+      onStepClick(stepIndex, step);
+    }
+  }, [onStepClick, disabled]);
+  const stepsWithStatus = useMemo(
+    () => withDerivedStatus(steps, currentStep),
+    [steps, currentStep]
+  );
+  return /* @__PURE__ */ jsx(
+    StepContainer,
+    {
+      ref,
+      orientation,
+      variant,
+      className,
+      style,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": steps.length - 1,
+      "aria-valuenow": currentStep,
+      "aria-valuetext": `Step ${currentStep + 1} of ${steps.length}: ${steps[currentStep]?.title}`,
+      "data-testid": dataTestId,
+      ...other,
+      children: stepsWithStatus.map((step, index) => /* @__PURE__ */ jsx(
+        StepRow,
+        {
+          step,
+          index,
+          isLast: index === steps.length - 1,
+          orientation,
+          variant,
+          color,
+          size,
+          showNumbers,
+          showIcons,
+          showProgress,
+          completedIcon,
+          errorIcon,
+          interactive,
+          animated,
+          disabled,
+          onClick: handleStepClick,
+          dataTestId
+        },
+        index
+      ))
+    }
+  );
+});
+WorkflowStep.displayName = "WorkflowStep";
+var WorkflowStep_default = WorkflowStep;
+
+export {
+  WorkflowStep,
+  WorkflowStep_default
+};
+//# sourceMappingURL=chunk-EOW2ECB3.js.map