@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-TZ23DNKY.js

@@ -0,0 +1,35 @@
+import {
+  blend
+} from "./chunk-F5H2ZXST.js";
+
+// src/tokens/surfaces.ts
+var SOFT_SIGNALS = ["success", "warning", "error", "info"];
+var SOFT_SIGNAL_OPACITY = 0.08;
+function surfaces(theme) {
+  const { background, divider } = theme.palette;
+  const stated = theme.uiSurfaces;
+  return {
+    sunken: stated?.sunken ?? background.default,
+    raised: stated?.raised ?? background.paper,
+    borderOnSunken: stated?.borderOnSunken ?? divider
+  };
+}
+function softSignal(theme, signal) {
+  const stated = theme.uiSoftSignal?.[signal];
+  if (stated !== void 0 && stated !== "") return stated;
+  const paper = theme.palette.background.paper;
+  const main = theme.palette[signal].main;
+  try {
+    return blend(paper, main, SOFT_SIGNAL_OPACITY);
+  } catch {
+    return `color-mix(in srgb, ${main} ${SOFT_SIGNAL_OPACITY * 100}%, ${paper})`;
+  }
+}
+
+export {
+  SOFT_SIGNALS,
+  SOFT_SIGNAL_OPACITY,
+  surfaces,
+  softSignal
+};
+//# sourceMappingURL=chunk-TZ23DNKY.js.map

package/dist/chunk-TZ23DNKY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/surfaces.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { blend } from './color';\n\n/**\n * THE SURFACE AND SOFT-SIGNAL ROLES (FUT-3098, under FUT-2585).\n *\n * Three colours a component or a host needs and the palette has no role for,\n * so until now each caller computed its own:\n *\n * - a ground BELOW the page, for a board that holds cards (a floor plan, a\n *   kanban), so a card on it reads as nearer;\n * - the border a card draws on that ground — `divider` is often the very tone\n *   the sunken ground wants, and a border in the ground's own colour vanishes;\n * - a soft background per signal. Components tint `palette.<signal>.main` by\n *   hand at whatever opacity each author chose (0.05, 0.08, 0.1…), so no two\n *   of them agree by design.\n *\n * Each role reads the theme with a host override layered on top, in the shape\n * `uiInk` uses (`./ink.ts`): `theme.uiSurfaces` and `theme.uiSoftSignal`. A\n * host builds one theme per mode, so it states each mode's values on that\n * mode's theme; with nothing stated, every role falls back to a formula over\n * the mode's own palette, and dark mode therefore resolves its own values.\n *\n * **Every default leaves a host that sets nothing unchanged.** `raised` is the\n * card MUI already paints (`background.paper`), `sunken` is the page itself\n * (`background.default` — no step; a host opts in to a darker ground by\n * stating one), and `borderOnSunken` is `divider`.\n */\n\n/** A signal with a soft background: the four MUI semantic colours. */\nexport type SoftSignal = 'success' | 'warning' | 'error' | 'info';\n\n/** Every signal {@link softSignal} answers for, in a stable order. */\nexport const SOFT_SIGNALS: readonly SoftSignal[] = ['success', 'warning', 'error', 'info'];\n\n/**\n * How much of a signal's `main` its soft background carries by default, over\n * `background.paper` — the value the most careful of the hand tints already\n * used (`PasswordStrength`'s success wash).\n */\nexport const SOFT_SIGNAL_OPACITY = 0.08;\n\n/**\n * The three surface roles.\n *\n * **Not `neutralTones(theme).raised`.** That one is a fixed step on the grey\n * ramp (800) — a dark panel on a light UI, whatever the mode. `raised` here is\n * the mode's own card surface, the one that sits nearer than `sunken`.\n */\nexport interface UiSurfaces {\n  /** The ground below the page: a board, a floor, a lane that holds cards. */\n  sunken: string;\n  /** A card or panel lifted above the ground. */\n  raised: string;\n  /** The border of a `raised` card sitting on the `sunken` ground. */\n  borderOnSunken: string;\n}\n\ndeclare module '@mui/material/styles' {\n  interface Theme {\n    /** Surface roles the host states. See `@12-apps/ui/tokens`' `surfaces`. */\n    uiSurfaces?: Partial<UiSurfaces>;\n    /** Soft signal backgrounds the host states. See `@12-apps/ui/tokens`' `softSignal`. */\n    uiSoftSignal?: Partial<Record<SoftSignal, string>>;\n  }\n  interface ThemeOptions {\n    /**\n     * Replace any of the surface roles, per key; a key left out keeps its\n     * default. One theme is one mode, so a host states each mode's values on\n     * that mode's theme.\n     */\n    uiSurfaces?: Partial<UiSurfaces>;\n    /**\n     * Replace the soft background of any signal, per key. Each value must be\n     * OPAQUE: a translucent wash takes on whatever sits under it (FUT-854).\n     */\n    uiSoftSignal?: Partial<Record<SoftSignal, string>>;\n  }\n}\n\n/** The surface roles, with the host's `theme.uiSurfaces` layered over the defaults. */\nexport function surfaces(theme: Theme): UiSurfaces {\n  const { background, divider } = theme.palette;\n  const stated = theme.uiSurfaces;\n  // `??` per key rather than a spread, so a key a host passes as `undefined`\n  // (a conditional in its theme file) keeps the default instead of erasing it.\n  return {\n    sunken: stated?.sunken ?? background.default,\n    raised: stated?.raised ?? background.paper,\n    borderOnSunken: stated?.borderOnSunken ?? divider,\n  };\n}\n\n/**\n * The soft background for a signal: the host's `theme.uiSoftSignal[signal]`\n * when stated, otherwise the signal's `main` at {@link SOFT_SIGNAL_OPACITY}\n * composited over `background.paper` into one OPAQUE colour.\n *\n * Opaque on purpose. A translucent `alpha(main, 0.08)` is a different colour\n * on every surface it lands on, and its contrast with the signal's own text\n * cannot be known in advance; a composited value is the same colour anywhere.\n *\n * A palette MUI accepts but cannot decompose — a named colour (`white`), a\n * `var(--…)`, a `color(display-p3 …)` — gets the same mix from the browser,\n * as a CSS `color-mix()`, rather than throwing at render.\n */\nexport function softSignal(theme: Theme, signal: SoftSignal): string {\n  const stated = theme.uiSoftSignal?.[signal];\n  if (stated !== undefined && stated !== '') return stated;\n  const paper = theme.palette.background.paper;\n  const main = theme.palette[signal].main;\n  try {\n    return blend(paper, main, SOFT_SIGNAL_OPACITY);\n  } catch {\n    return `color-mix(in srgb, ${main} ${SOFT_SIGNAL_OPACITY * 100}%, ${paper})`;\n  }\n}\n"],"mappings":";;;;;AAkCO,IAAM,eAAsC,CAAC,WAAW,WAAW,SAAS,MAAM;AAOlF,IAAM,sBAAsB;AAyC5B,SAAS,SAAS,OAA0B;AACjD,QAAM,EAAE,YAAY,QAAQ,IAAI,MAAM;AACtC,QAAM,SAAS,MAAM;AAGrB,SAAO;AAAA,IACL,QAAQ,QAAQ,UAAU,WAAW;AAAA,IACrC,QAAQ,QAAQ,UAAU,WAAW;AAAA,IACrC,gBAAgB,QAAQ,kBAAkB;AAAA,EAC5C;AACF;AAeO,SAAS,WAAW,OAAc,QAA4B;AACnE,QAAM,SAAS,MAAM,eAAe,MAAM;AAC1C,MAAI,WAAW,UAAa,WAAW,GAAI,QAAO;AAClD,QAAM,QAAQ,MAAM,QAAQ,WAAW;AACvC,QAAM,OAAO,MAAM,QAAQ,MAAM,EAAE;AACnC,MAAI;AACF,WAAO,MAAM,OAAO,MAAM,mBAAmB;AAAA,EAC/C,QAAQ;AACN,WAAO,sBAAsB,IAAI,IAAI,sBAAsB,GAAG,MAAM,KAAK;AAAA,EAC3E;AACF;","names":[]}

package/dist/chunk-UCRGKQUW.js

@@ -0,0 +1,76 @@
+import {
+  accentFor
+} from "./chunk-B7ZHEOQQ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Menubar/Menubar.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZES = {
+  xs: (theme) => ({ minHeight: rem(theme, 40), fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),
+  sm: (theme) => ({ minHeight: rem(theme, 48), fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),
+  md: (theme) => ({ minHeight: rem(theme, 56), fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),
+  lg: (theme) => ({ minHeight: rem(theme, 64), fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),
+  xl: (theme) => ({ minHeight: rem(theme, 72), fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) })
+};
+var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
+var accentOf = (theme, color) => color === "neutral" ? theme.palette.primary.main : accentFor(theme, color).main;
+var colorStyles = (theme, color, transparent) => {
+  const surface = color === "neutral" ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary } : { backgroundColor: accentFor(theme, color).main, color: accentFor(theme, color).contrastText };
+  return transparent ? { ...surface, backgroundColor: "transparent" } : surface;
+};
+var SURFACES = {
+  glass: (theme, { glass }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`
+  }),
+  gradient: (theme, { color, gradient }) => {
+    const accent = accentFor(theme, color === "neutral" ? "primary" : color);
+    return {
+      background: gradient ? `linear-gradient(135deg, ${accent.light}, ${accent.dark})` : accent.main,
+      color: accent.contrastText
+    };
+  },
+  elevated: (theme, { blur, elevation }) => ({
+    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
+    boxShadow: theme.shadows[elevation]
+  }),
+  minimal: (theme, { blur }) => ({
+    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
+    boxShadow: "none",
+    borderBottom: "none"
+  }),
+  bordered: (theme, { blur, color }) => ({
+    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
+    borderBottom: `${rem(theme, 2)} solid ${color === "neutral" ? theme.palette.divider : accentFor(theme, color).main}`
+  }),
+  default: (theme, { blur }) => ({ ...blur && { backdropFilter: `blur(${rem(theme, 10)})` } })
+};
+var barStyles = (theme, flags) => {
+  const { variant, size, color, glow, pulse, transparent } = flags;
+  return {
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    ...sizeStyles(theme, size),
+    ...colorStyles(theme, color, transparent),
+    ...glow && { boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentOf(theme, color), 0.4)}` },
+    ...pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { opacity: 1 },
+        "50%": { opacity: 0.8 },
+        "100%": { opacity: 1 }
+      }
+    },
+    ...(SURFACES[variant] ?? SURFACES.default)(theme, flags)
+  };
+};
+
+export {
+  sizeStyles,
+  barStyles
+};
+//# sourceMappingURL=chunk-UCRGKQUW.js.map

package/dist/chunk-UG5I4VXS.js

@@ -0,0 +1,90 @@
+import {
+  asFieldSize,
+  fieldHeight
+} from "./chunk-RGVNXES5.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
+import {
+  absoluteInk,
+  controlNeutral
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/InputOTP/InputOTP.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => controlNeutral(theme);
+var namedPalette = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || absoluteInk(theme).white
+  };
+};
+var SIZES = {
+  xs: { fontPx: 12 },
+  sm: { fontPx: 14 },
+  md: { fontPx: 16 },
+  lg: { fontPx: 18 },
+  xl: { fontPx: 20 }
+};
+var otpSlotSx = (theme, flags) => {
+  const { customColor = "primary", customSize = "md", glass, gradient } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  const { fontPx } = SIZES[customSize] ?? SIZES.md;
+  const side = fieldHeight(theme, asFieldSize(customSize));
+  return {
+    width: side,
+    height: side,
+    "& .MuiOutlinedInput-root": {
+      width: side,
+      height: side,
+      fontSize: rem(theme, fontPx),
+      fontWeight: 600,
+      textAlign: "center",
+      borderRadius: fieldRadius(theme),
+      ...glass && {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        "& fieldset": { border: `1px solid ${fieldEdge(theme)}` }
+      },
+      ...gradient && {
+        "&.Mui-focused fieldset": {
+          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,
+          borderWidth: rem(theme, 2)
+        }
+      },
+      "& input": { textAlign: "center", padding: 0, fontWeight: "inherit" },
+      ...!glass && { "& fieldset": { borderColor: fieldEdge(theme) } },
+      "&:hover fieldset": { borderColor: palette.main },
+      "&.Mui-focused fieldset": { borderColor: palette.main, borderWidth: rem(theme, 2) }
+    }
+  };
+};
+
+export {
+  otpSlotSx
+};
+//# sourceMappingURL=chunk-UG5I4VXS.js.map

package/dist/chunk-ULTQIVF3.js

@@ -0,0 +1,223 @@
+import {
+  FLEET_DOT,
+  FLEET_ROSTER,
+  FLEET_ROW,
+  FLEET_SKELETON
+} from "./chunk-BTQZ3EX3.js";
+import {
+  freshnessOf
+} from "./chunk-XPMGFAJ3.js";
+import {
+  Skeleton
+} from "./chunk-H4NS5MMP.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/FleetMap/FleetRoster.tsx
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function freshnessColor(freshness, theme) {
+  if (freshness === "live") return theme.palette.success.main;
+  if (freshness === "lagging") return theme.palette.warning.main;
+  return theme.palette.text.disabled;
+}
+function RowText({
+  unit,
+  copy,
+  freshness,
+  testId
+}) {
+  const theme = useTheme();
+  const meta = [
+    copy.freshness[freshness],
+    copy.lastSeen(unit.staleSeconds),
+    unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM)
+  ].filter((part) => Boolean(part)).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs(Stack, { sx: { minWidth: 0, flexGrow: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        component: "p",
+        "data-testid": `${testId}-label`,
+        sx: { fontWeight: theme.typography.fontWeightMedium, overflowWrap: "anywhere" },
+        children: unit.label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        component: "p",
+        "data-testid": `${testId}-meta`,
+        sx: { color: theme.palette.text.secondary },
+        children: meta
+      }
+    )
+  ] });
+}
+function useKeptInView(selected, position) {
+  const row = React.useRef(null);
+  React.useEffect(() => {
+    const box = row.current;
+    const list = box?.parentElement;
+    if (!selected || !box || !list) return;
+    const top = box.offsetTop - list.offsetTop;
+    if (top < list.scrollTop) {
+      list.scrollTop = top;
+    } else if (top + box.offsetHeight > list.scrollTop + list.clientHeight) {
+      list.scrollTop = top + box.offsetHeight - list.clientHeight;
+    }
+  }, [selected, position]);
+  return row;
+}
+function rowSx(theme, selected) {
+  const resting = selected ? theme.palette.action.selected : "transparent";
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(FLEET_ROW.gapUnits),
+    padding: theme.spacing(FLEET_ROW.paddingYUnits, FLEET_ROW.paddingXUnits),
+    // `1`, not `theme.shape.borderRadius / 4`. MUI's `sx` reads a NUMBER here as
+    // a multiple of `theme.shape.borderRadius`, so dividing the theme value out
+    // and letting `sx` multiply it back in is quadratic: measured 4px on the
+    // default theme — which is why this looked right — and 36px on a host that
+    // sets its own radius to 12. In a package whose whole premise is being
+    // re-themed, only the multiple is portable.
+    borderRadius: FLEET_ROW.radiusMultiple,
+    cursor: "pointer",
+    backgroundColor: resting,
+    "&:hover": {
+      backgroundColor: selected ? theme.palette.action.selected : theme.palette.action.hover
+    }
+  };
+}
+function FleetRow({
+  unit,
+  copy,
+  freshness,
+  selected,
+  onSelect,
+  optionId,
+  position,
+  testId
+}) {
+  const theme = useTheme();
+  const color = freshnessColor(freshness, theme);
+  const row = useKeptInView(selected, position);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: row,
+      role: "option",
+      "aria-selected": selected,
+      id: optionId,
+      "data-testid": testId,
+      "data-freshness": freshness,
+      onClick: () => onSelect(unit.id),
+      sx: rowSx(theme, selected),
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            "aria-hidden": "true",
+            "data-testid": `${testId}-dot`,
+            sx: {
+              width: rem(theme, FLEET_DOT.size),
+              height: rem(theme, FLEET_DOT.size),
+              borderRadius: "50%",
+              flexShrink: 0,
+              backgroundColor: color
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(RowText, { unit, copy, freshness, testId }),
+        unit.badge && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "caption",
+            component: "span",
+            "data-testid": `${testId}-badge`,
+            sx: { color: theme.palette.text.secondary, flexShrink: 0 },
+            children: unit.badge
+          }
+        )
+      ]
+    }
+  );
+}
+function FirstLoad({ testId }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Stack, { spacing: FLEET_SKELETON.gapUnits, "data-testid": `${testId}-skeleton`, "aria-hidden": "true", children: Array.from({ length: FLEET_SKELETON.rows }, (_, row) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "rectangular",
+      height: rem(theme, FLEET_SKELETON.height),
+      borderRadius: FLEET_SKELETON.radiusMultiple
+    },
+    row
+  )) });
+}
+function FleetRoster({
+  units,
+  copy,
+  selectedId,
+  onSelect,
+  laggingAfterSeconds,
+  staleAfterSeconds,
+  loading,
+  testId,
+  onKeyDown
+}) {
+  const theme = useTheme();
+  const rowIdPrefix = React.useId();
+  const optionId = (id) => `${rowIdPrefix}-${id}`;
+  const active = units.some((unit) => unit.id === selectedId) ? selectedId : null;
+  if (loading && units.length === 0) return /* @__PURE__ */ jsx(FirstLoad, { testId });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "listbox",
+      tabIndex: 0,
+      "aria-label": copy.rosterLabel,
+      "aria-activedescendant": active ? optionId(active) : void 0,
+      "data-testid": `${testId}-roster`,
+      onKeyDown,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing(FLEET_ROSTER.gapUnits),
+        overflowY: "auto",
+        minWidth: 0,
+        "&:focus-visible": {
+          outline: `${rem(theme, FLEET_ROSTER.focusRingWidth)} solid ${theme.palette.primary.main}`,
+          outlineOffset: rem(theme, FLEET_ROSTER.focusRingOffset)
+        }
+      },
+      children: units.map((unit, index) => /* @__PURE__ */ jsx(
+        FleetRow,
+        {
+          unit,
+          copy,
+          freshness: freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds),
+          selected: unit.id === active,
+          onSelect,
+          optionId: optionId(unit.id),
+          position: index,
+          testId: `${testId}-${unit.id}`
+        },
+        unit.id
+      ))
+    }
+  );
+}
+
+export {
+  FleetRoster
+};
+//# sourceMappingURL=chunk-ULTQIVF3.js.map

package/dist/chunk-UMICTXMP.js

@@ -0,0 +1,69 @@
+import {
+  Text
+} from "./chunk-AJBRO76D.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DescriptionItem/DescriptionItem.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FLEX_ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
+var containerSx = (isHorizontal, align) => ({
+  display: "flex",
+  flexDirection: isHorizontal ? "row" : "column",
+  alignItems: isHorizontal ? "center" : FLEX_ALIGN[align],
+  gap: isHorizontal ? 1 : 0,
+  // `alignItems` places the two boxes; `textAlign` handles a label or value
+  // that WRAPS, whose second line would otherwise fall back to flush-left
+  // inside a box the alignment had already centred.
+  textAlign: align
+});
+var labelStyle = (theme, isHorizontal) => ({
+  textTransform: "uppercase",
+  marginBottom: isHorizontal ? 0 : rem(theme, 4),
+  minWidth: isHorizontal ? "fit-content" : void 0,
+  flexShrink: isHorizontal ? 0 : void 0
+});
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `description-item-${suffix}`;
+var DescriptionItem = ({
+  label,
+  value,
+  orientation = "vertical",
+  align = "start",
+  className,
+  "data-testid": dataTestId
+}) => {
+  const theme = useTheme();
+  const isHorizontal = orientation === "horizontal";
+  const testId = makeTestId(dataTestId);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      sx: containerSx(isHorizontal, align),
+      "data-testid": dataTestId || "description-item",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "caption",
+            size: "xs",
+            color: "secondary",
+            style: labelStyle(theme, isHorizontal),
+            "data-testid": testId("label"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { "data-testid": testId("value"), children: typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "semibold", children: value }) : value })
+      ]
+    }
+  );
+};
+DescriptionItem.displayName = "DescriptionItem";
+
+export {
+  DescriptionItem
+};
+//# sourceMappingURL=chunk-UMICTXMP.js.map

package/dist/chunk-UN3F3K4B.js

@@ -0,0 +1,176 @@
+import {
+  NavigationMegaSection
+} from "./chunk-4PALX7AQ.js";
+import {
+  NavigationStandardBody
+} from "./chunk-INZD3TMN.js";
+import {
+  LogoBar,
+  NavigationShell
+} from "./chunk-WGG7XNQB.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/NavigationMenu/NavigationMenu.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React, { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MegaMenuLayout = React.forwardRef(
+  ({
+    variant,
+    logo,
+    items,
+    size,
+    minimal,
+    dataTestId: _dataTestId,
+    className,
+    maxWidth,
+    style,
+    ...props
+  }, ref) => {
+    const theme = useTheme();
+    const cap = typeof maxWidth === "number" ? rem(theme, maxWidth) : maxWidth;
+    return /* @__PURE__ */ jsx(
+      NavigationShell,
+      {
+        ref,
+        variant,
+        minimal,
+        className,
+        style: { maxWidth: cap, ...style },
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          Paper,
+          {
+            elevation: minimal ? 0 : 1,
+            sx: {
+              width: "100%",
+              overflow: "hidden",
+              background: minimal ? "transparent" : void 0
+            },
+            children: [
+              logo && /* @__PURE__ */ jsx(LogoBar, { children: logo }),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: `repeat(auto-fit, minmax(${rem(theme, 280)}, 1fr))`,
+                    gap: 3,
+                    p: 3
+                  },
+                  children: items.map((section, sectionIndex) => /* @__PURE__ */ jsx(
+                    NavigationMegaSection,
+                    {
+                      section,
+                      sectionIndex,
+                      variant,
+                      size,
+                      minimal
+                    },
+                    section.id
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MegaMenuLayout.displayName = "MegaMenuLayout";
+var NAVIGATION_DEFAULTS = {
+  variant: "vertical",
+  size: "md",
+  minimal: false,
+  collapsible: false,
+  showDividers: false
+};
+var resolveProps = (props) => ({
+  ...NAVIGATION_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var NavigationMenu = React.forwardRef(
+  (componentProps, ref) => {
+    const {
+      variant,
+      items,
+      size,
+      minimal,
+      collapsible,
+      collapsed: controlledCollapsed,
+      onCollapseChange,
+      logo,
+      endContent,
+      maxWidth,
+      showDividers,
+      className,
+      style,
+      ...props
+    } = resolveProps(componentProps);
+    const [internalCollapsed, setInternalCollapsed] = useState(false);
+    const isControlled = controlledCollapsed !== void 0;
+    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const handleCollapseToggle = () => {
+      if (!isControlled) setInternalCollapsed(!collapsed);
+      onCollapseChange?.(!collapsed);
+    };
+    if (variant === "mega") {
+      return /* @__PURE__ */ jsx(
+        MegaMenuLayout,
+        {
+          ref,
+          variant,
+          collapsed,
+          logo,
+          items,
+          size,
+          minimal,
+          className,
+          maxWidth,
+          style,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      NavigationShell,
+      {
+        ref,
+        variant,
+        minimal,
+        collapsed,
+        className,
+        style,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          NavigationStandardBody,
+          {
+            variant,
+            size,
+            minimal,
+            collapsed,
+            collapsible,
+            showDividers,
+            items,
+            logo,
+            endContent,
+            onCollapseToggle: handleCollapseToggle
+          }
+        )
+      }
+    );
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+
+export {
+  NavigationMenu
+};
+//# sourceMappingURL=chunk-UN3F3K4B.js.map