@12-apps/ui 6.34.0 → 6.36.0

package/dist/_internal/user-avatar/user-avatar.js

@@ -2,13 +2,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "../../chunk-EIJC5DWG.js";
+} from "../../chunk-2UCLUDEB.js";
 import "../../chunk-UDQSIRAP.js";
-import "../../chunk-L7Q5BH4A.js";
-import "../../chunk-7IQDLEB5.js";
+import "../../chunk-PGPPN63I.js";
+import "../../chunk-TNQDSTIA.js";
 import "../../chunk-6ZZGK5DT.js";
 import "../../chunk-3ZVUNSFF.js";
-import "../../chunk-XRMZMBE3.js";
+import "../../chunk-MTEQEPNY.js";
 import "../../chunk-VUHLNYAE.js";
 import "../../chunk-2GSIEDGN.js";
 import "../../chunk-N6CSXHFJ.js";
@@ -17,11 +17,11 @@ import "../../chunk-LVEG6XQL.js";
 import "../../chunk-JH7EEJEQ.js";
 import "../../chunk-BA4RHQ3B.js";
 import "../../chunk-73BEVJCS.js";
-import "../../chunk-3EDZU2H7.js";
-import "../../chunk-BOU3HR4C.js";
+import "../../chunk-KH25WUSX.js";
+import "../../chunk-HBICO6AX.js";
 import "../../chunk-LN46DSMF.js";
 import "../../chunk-TAMIZE4Q.js";
-import "../../chunk-H57ZS6W2.js";
+import "../../chunk-WTOYEWW6.js";
 import "../../chunk-U3PPLAFB.js";
 import "../../chunk-TYJR4GOF.js";
 import "../../chunk-CGO452DC.js";
@@ -37,6 +37,7 @@ import "../../chunk-26X4CZVR.js";
 import "../../chunk-FQ6UW7IY.js";
 import "../../chunk-6JAIFIPW.js";
 import "../../chunk-N3GAFIXG.js";
+import "../../chunk-YKCAJ2TN.js";
 import "../../chunk-PZ5AY32C.js";
 export {
   UserAvatar,

package/dist/charts.js

@@ -1,10 +1,10 @@
 import "./chunk-5KLSLD72.js";
 import {
   SpecChart
-} from "./chunk-LCVQOJKG.js";
+} from "./chunk-CPWWMGYR.js";
 import {
   Chart
-} from "./chunk-52APLKAG.js";
+} from "./chunk-Q2YNXJEL.js";
 import {
   CHART_SEMANTIC_COLORS,
   ChartSpecError,
@@ -16,23 +16,22 @@ import {
   getRegisteredChartSpecTypes,
   registerChartSpecRenderer
 } from "./chunk-WKUA6P3W.js";
-import "./chunk-BHLGZLXQ.js";
-import "./chunk-GJF3CVIE.js";
-import "./chunk-4V532JF6.js";
+import "./chunk-TXGB2WSW.js";
+import "./chunk-3GTMGPNQ.js";
+import "./chunk-SOHQPPYJ.js";
 import {
   ChartContainer,
   ChartLegend,
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent
-} from "./chunk-M5T3COS2.js";
-import "./chunk-JKNLKUCX.js";
+} from "./chunk-RIRTW5EU.js";
+import "./chunk-EA2UNEL6.js";
 import {
   chartValueFormatter,
   formatChartValue
 } from "./chunk-QVWNK4JO.js";
 import "./chunk-TCAQOUIB.js";
-import "./chunk-YKCAJ2TN.js";
 import "./chunk-7ZPUN7TV.js";
 import "./chunk-PT6TCWIW.js";
 import "./chunk-CGO452DC.js";
@@ -48,6 +47,7 @@ import "./chunk-26X4CZVR.js";
 import "./chunk-FQ6UW7IY.js";
 import "./chunk-6JAIFIPW.js";
 import "./chunk-N3GAFIXG.js";
+import "./chunk-YKCAJ2TN.js";
 import "./chunk-PZ5AY32C.js";
 export {
   CHART_SEMANTIC_COLORS,

package/dist/chunk-2CTTASUD.js

@@ -0,0 +1,169 @@
+import {
+  SettingsStatusMarker
+} from "./chunk-2OIP3T5O.js";
+import {
+  TOUCH_TARGET,
+  atLeastRail
+} from "./chunk-LIG7TKIB.js";
+
+// src/components/layout/SettingsLayout/SettingsLayout.items.tsx
+import Box from "@mui/material/Box/index.js";
+import List from "@mui/material/List/index.js";
+import ListItem from "@mui/material/ListItem/index.js";
+import ListItemButton from "@mui/material/ListItemButton/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RailItemContent({
+  item,
+  active,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon ? /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, color: "inherit" }, children: item.icon }) : null,
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        primary: item.label,
+        primaryTypographyProps: { variant: "body2", noWrap: true, fontWeight: active ? 600 : 500 }
+      }
+    ),
+    item.status ? /* @__PURE__ */ jsx(
+      SettingsStatusMarker,
+      {
+        status: item.status,
+        label: item.statusLabel,
+        testId: `${testIdPrefix}-status-${item.id}`
+      }
+    ) : null
+  ] });
+}
+function SettingsRailItem({
+  item,
+  active,
+  linkComponent,
+  onSelectItem,
+  onNavigate,
+  testIdPrefix,
+  variant,
+  breakpoint
+}) {
+  const theme = useTheme();
+  const touchFloor = variant === "drilldown" ? { minHeight: TOUCH_TARGET, [atLeastRail(theme, breakpoint)]: { minHeight: "auto" } } : null;
+  const shared = {
+    "data-testid": `${testIdPrefix}-item-${item.id}`,
+    sx: {
+      borderRadius: 1.5,
+      mb: 0.25,
+      gap: 1.5,
+      ...touchFloor,
+      color: active ? "primary.main" : "text.secondary",
+      "&.Mui-selected": {
+        bgcolor: alpha(theme.palette.primary.main, 0.12),
+        "&:hover": { bgcolor: alpha(theme.palette.primary.main, 0.18) }
+      }
+    }
+  };
+  const content = /* @__PURE__ */ jsx(RailItemContent, { item, active, testIdPrefix });
+  if (item.inert) {
+    return /* @__PURE__ */ jsx(ListItem, { ...shared, "data-inert": "true", children: content });
+  }
+  const interactive = {
+    ...shared,
+    selected: active,
+    "aria-current": active ? "page" : void 0
+  };
+  if (item.href && linkComponent) {
+    const LinkComponent = linkComponent;
+    return /* @__PURE__ */ jsx(
+      ListItemButton,
+      {
+        component: LinkComponent,
+        href: item.href,
+        onClick: onNavigate,
+        ...interactive,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ListItemButton,
+    {
+      onClick: () => {
+        onSelectItem?.(item.id);
+        onNavigate?.();
+      },
+      ...interactive,
+      children: content
+    }
+  );
+}
+function indexListSx(shape) {
+  if (shape.variant !== "drilldown" || !shape.atIndex) return null;
+  return (theme) => ({
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    // One spacing unit (8px). This is an `sx` callback, where a bare 8 is
+    // EIGHT units — it drew a 64px gutter between the two columns.
+    columnGap: 1,
+    [theme.breakpoints.up("sm")]: { gridTemplateColumns: "1fr 1fr" },
+    [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: "1fr" }
+  });
+}
+function SettingsRailGroup({
+  group,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  onNavigate,
+  testIdPrefix,
+  ...shape
+}) {
+  const grid = indexListSx(shape);
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testIdPrefix}-group-${group.id}`, sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          display: "block",
+          px: 1,
+          color: "text.secondary",
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.06em"
+        },
+        children: group.label
+      }
+    ),
+    group.description ? /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", sx: { px: 1, mt: 0.25, color: "text.disabled" }, children: group.description }) : null,
+    /* @__PURE__ */ jsx(
+      List,
+      {
+        disablePadding: true,
+        sx: (theme) => ({ mt: 0.5, ...grid ? grid(theme) : null }),
+        children: group.items.map((item) => /* @__PURE__ */ jsx(
+          SettingsRailItem,
+          {
+            item,
+            active: item.id === activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate,
+            testIdPrefix,
+            ...shape
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+
+export {
+  SettingsRailItem,
+  SettingsRailGroup
+};
+//# sourceMappingURL=chunk-2CTTASUD.js.map

package/dist/chunk-2E2WOBID.js

@@ -0,0 +1,170 @@
+import {
+  SettingsSectionChips
+} from "./chunk-CSTAQX2B.js";
+import {
+  SettingsSectionHeader
+} from "./chunk-CPTY6UZ6.js";
+import {
+  TOUCH_TARGET,
+  atLeastRail,
+  displayAcrossRail
+} from "./chunk-LIG7TKIB.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/SettingsLayout/SettingsPanel.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BackLink({
+  href,
+  label,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: linkComponent,
+      href,
+      "aria-label": label,
+      "data-testid": `${testIdPrefix}-back`,
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
+        alignItems: "center",
+        gap: 0.5,
+        minHeight: TOUCH_TARGET,
+        pr: 1,
+        textDecoration: "none",
+        color: "text.secondary",
+        font: "inherit",
+        fontSize: rem(theme, 14)
+      }),
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" }),
+        label
+      ]
+    }
+  );
+}
+function PanelBack({
+  href,
+  backLabel,
+  sectionTitle,
+  sectionDescription,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  if (sectionTitle === void 0) {
+    return /* @__PURE__ */ jsx(
+      BackLink,
+      {
+        href,
+        label: backLabel,
+        breakpoint,
+        linkComponent,
+        testIdPrefix
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SettingsSectionHeader,
+    {
+      href,
+      backLabel,
+      title: sectionTitle,
+      description: sectionDescription,
+      breakpoint,
+      linkComponent,
+      testIdPrefix
+    }
+  );
+}
+function panelSx(breakpoint, hideOnNarrow, fillHeight) {
+  return (theme) => ({
+    display: hideOnNarrow ? "none" : "block",
+    flex: "1 1 auto",
+    minWidth: 0,
+    width: "100%",
+    [atLeastRail(theme, breakpoint)]: {
+      ...hideOnNarrow ? { display: "block" } : {},
+      ...fillHeight ? {
+        height: "100%",
+        minHeight: 0,
+        overflowY: "auto",
+        overscrollBehavior: "contain"
+      } : {}
+    }
+  });
+}
+function SettingsPanel({
+  inSection,
+  hideOnNarrow,
+  breakpoint,
+  indexHref,
+  backLabel,
+  sectionTitle,
+  sectionDescription,
+  ariaLabel,
+  sectionChips,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix,
+  fillHeight = false,
+  children
+}) {
+  const showBack = inSection && indexHref !== void 0 && linkComponent !== void 0;
+  const showChips = inSection && sectionChips !== void 0 && sectionChips.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-panel`,
+      sx: panelSx(breakpoint, hideOnNarrow, fillHeight),
+      children: [
+        showBack ? /* @__PURE__ */ jsx(
+          PanelBack,
+          {
+            href: indexHref,
+            backLabel,
+            sectionTitle,
+            sectionDescription,
+            breakpoint,
+            linkComponent,
+            testIdPrefix
+          }
+        ) : null,
+        showChips ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: (theme) => ({
+              ...displayAcrossRail(theme, breakpoint, "block", "none"),
+              mb: 1,
+              minWidth: 0
+            }),
+            children: /* @__PURE__ */ jsx(
+              SettingsSectionChips,
+              {
+                items: sectionChips,
+                activeItemId,
+                ariaLabel,
+                linkComponent,
+                onSelectItem,
+                testIdPrefix
+              }
+            )
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+
+export {
+  SettingsPanel
+};
+//# sourceMappingURL=chunk-2E2WOBID.js.map

package/dist/chunk-2E2WOBID.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport type { CSSObject, Theme } from \"@mui/material/styles/index.js\";\nimport Box from \"@mui/material/Box/index.js\";\nimport React from \"react\";\n\nimport {\n  atLeastRail,\n  displayAcrossRail,\n  TOUCH_TARGET,\n} from \"./SettingsLayout.styles\";\nimport { SettingsSectionChips } from \"./SettingsSectionChips\";\nimport { SettingsSectionHeader } from \"./SettingsSectionHeader\";\nimport type {\n  SettingsLayoutProps,\n  SettingsNavItem,\n  SettingsRailBreakpoint,\n} from \"./SettingsLayout.types\";\nimport { rem } from \"../../../tokens/relative\";\n\nexport interface SettingsPanelProps {\n  /** True in `drilldown`, inside a section rather than at the index. */\n  inSection: boolean;\n  /** True in `drilldown`, at the area's index. */\n  hideOnNarrow: boolean;\n  breakpoint: SettingsRailBreakpoint;\n  indexHref?: string;\n  backLabel: string;\n  /** The open section's own name — turns the back link into a compact header. */\n  sectionTitle?: string;\n  /** One line under that name. */\n  sectionDescription?: string;\n  ariaLabel: string;\n  sectionChips?: SettingsNavItem[];\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps[\"linkComponent\"];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n  children: React.ReactNode;\n  /** Scroll inside the panel rather than with the page. See `fillHeight`. */\n  fillHeight?: boolean;\n}\n\n/** The way back to the area's index — narrow widths only. */\nfunction BackLink({\n  href,\n  label,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  label: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps[\"linkComponent\"]>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component={linkComponent}\n      href={href}\n      aria-label={label}\n      data-testid={`${testIdPrefix}-back`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, \"inline-flex\", \"none\"),\n        alignItems: \"center\",\n        gap: 0.5,\n        minHeight: TOUCH_TARGET,\n        pr: 1,\n        textDecoration: \"none\",\n        color: \"text.secondary\",\n        font: \"inherit\",\n        fontSize: rem(theme, 14),\n      })}\n    >\n      <ChevronLeftIcon fontSize=\"small\" />\n      {label}\n    </Box>\n  );\n}\n\n/**\n * Two shapes of the same control, chosen by whether the host named the section.\n *\n * With a `sectionTitle` the back folds into a compact header that also says\n * where you are; without one the original text link is kept, so no existing\n * consumer's header grows a title and pushes their first field down the page on\n * upgrade. Its own component so `SettingsPanel` keeps one branch rather than\n * three.\n */\nfunction PanelBack({\n  href,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  sectionTitle?: string;\n  sectionDescription?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  if (sectionTitle === undefined) {\n    return (\n      <BackLink\n        href={href}\n        label={backLabel}\n        breakpoint={breakpoint}\n        linkComponent={linkComponent}\n        testIdPrefix={testIdPrefix}\n      />\n    );\n  }\n  return (\n    <SettingsSectionHeader\n      href={href}\n      backLabel={backLabel}\n      title={sectionTitle}\n      description={sectionDescription}\n      breakpoint={breakpoint}\n      linkComponent={linkComponent}\n      testIdPrefix={testIdPrefix}\n    />\n  );\n}\n\n/**\n * The panel's own box, as ONE object per media query rather than two.\n *\n * Both the `display` rule and `fillHeight`'s belong at the same wide-shape\n * query, and spreading them as separate `{ [query]: … }` objects makes the\n * second REPLACE the first — so turning `fillHeight` on silently dropped the\n * `display: block` that `hideOnNarrow` puts there and left the panel\n * `display: none` at every width. That only shows at a drilldown INDEX, where\n * `hideOnNarrow` is true, which is why a section route looked fine.\n *\n * `overflowY` here is also what lets a `position: sticky` toolbar inside\n * `children` pin to the TOP OF THE PANEL — under the host's header — instead\n * of to a document that is not the scroller.\n */\nfunction panelSx(\n  breakpoint: SettingsRailBreakpoint,\n  hideOnNarrow: boolean,\n  fillHeight: boolean,\n): (theme: Theme) => CSSObject {\n  return (theme) => ({\n    display: hideOnNarrow ? \"none\" : \"block\",\n    flex: \"1 1 auto\",\n    minWidth: 0,\n    width: \"100%\",\n    [atLeastRail(theme, breakpoint)]: {\n      ...(hideOnNarrow ? { display: \"block\" } : {}),\n      ...(fillHeight\n        ? {\n            height: \"100%\",\n            minHeight: 0,\n            overflowY: \"auto\",\n            overscrollBehavior: \"contain\",\n          }\n        : {}),\n    },\n  });\n}\n\n/**\n * The central column: the open screen, and — in `drilldown`, inside a section —\n * the back link and sibling-section strip above it.\n *\n * At the index in `drilldown` this whole column is `display: none` below the\n * breakpoint and the rail becomes the page. Mounted either way: the panel and\n * the list are one tree with `display` between them, not two branches of a\n * render.\n */\nexport function SettingsPanel({\n  inSection,\n  hideOnNarrow,\n  breakpoint,\n  indexHref,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  ariaLabel,\n  sectionChips,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n  fillHeight = false,\n  children,\n}: SettingsPanelProps): React.JSX.Element {\n  const showBack =\n    inSection && indexHref !== undefined && linkComponent !== undefined;\n  const showChips =\n    inSection && sectionChips !== undefined && sectionChips.length > 0;\n\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-panel`}\n      sx={panelSx(breakpoint, hideOnNarrow, fillHeight)}\n    >\n      {showBack ? (\n        <PanelBack\n          href={indexHref}\n          backLabel={backLabel}\n          sectionTitle={sectionTitle}\n          sectionDescription={sectionDescription}\n          breakpoint={breakpoint}\n          linkComponent={linkComponent}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : null}\n\n      {showChips ? (\n        <Box\n          sx={(theme) => ({\n            ...displayAcrossRail(theme, breakpoint, \"block\", \"none\"),\n            mb: 1,\n            minWidth: 0,\n          })}\n        >\n          <SettingsSectionChips\n            items={sectionChips}\n            activeItemId={activeItemId}\n            ariaLabel={ariaLabel}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            testIdPrefix={testIdPrefix}\n          />\n        </Box>\n      ) : null}\n\n      {children}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-2FM5SUQV.js

@@ -0,0 +1,97 @@
+import {
+  getSizeStyles
+} from "./chunk-KJDBY2KN.js";
+import {
+  BADGE_CONTENT_GAP,
+  BADGE_SIZES
+} from "./chunk-PYC4CWCQ.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Badge/BadgeContent.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var CLOSE_ICON_SIZES = Object.fromEntries(
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize])
+);
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;
+var BadgeIcon = ({
+  icon,
+  size,
+  testId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-testid": testId,
+      style: {
+        fontSize: rem(theme, getSizeStyles(theme, size).step.iconSize),
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      children: icon
+    },
+    "icon"
+  );
+};
+var BadgeCloseButton = ({
+  size,
+  testId,
+  onClose
+}) => /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    size: "small",
+    onClick: onClose,
+    "data-testid": testId,
+    sx: {
+      p: 0,
+      ml: 0.5,
+      color: "inherit",
+      "& svg": { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },
+      "&:hover": { opacity: 0.8 }
+    },
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
+  },
+  "close"
+);
+var BadgeRun = ({ children }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", alignItems: "center", gap: rem(theme, BADGE_CONTENT_GAP) }, children });
+};
+var buildBadgeContent = ({
+  variant,
+  size,
+  icon,
+  closable,
+  dataTestId,
+  baseContent,
+  onClose
+}) => {
+  if (variant === "dot") return "";
+  const testId = makeTestId(dataTestId);
+  const parts = [];
+  if (icon) parts.push(/* @__PURE__ */ jsx(BadgeIcon, { icon, size, testId: testId("icon") }, "icon"));
+  if (baseContent !== null && baseContent !== void 0) {
+    parts.push(
+      /* @__PURE__ */ jsx("span", { "data-testid": testId("content"), children: baseContent }, "content")
+    );
+  }
+  if (closable && !variant.includes("dot")) {
+    parts.push(
+      /* @__PURE__ */ jsx(BadgeCloseButton, { size, testId: testId("close"), onClose }, "close")
+    );
+  }
+  if (parts.length === 0) return null;
+  return /* @__PURE__ */ jsx(BadgeRun, { children: parts });
+};
+
+export {
+  buildBadgeContent
+};
+//# sourceMappingURL=chunk-2FM5SUQV.js.map

package/dist/chunk-2FM5SUQV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/BadgeContent.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { BADGE_CONTENT_GAP, BADGE_SIZES } from './Badge.metrics';\nimport { getSizeStyles } from './Badge.styles';\nimport type { BadgeSize } from './Badge.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Derived from the shared metrics: `xl` takes `lg`'s glyph, which is what the\n// hand-written map did through its `?? CLOSE_ICON_SIZES.lg` fallback.\nconst CLOSE_ICON_SIZES: Record<string, number> = Object.fromEntries(\n  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize]),\n);\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;\n\nconst BadgeIcon: FC<{ icon: ReactNode; size: BadgeSize; testId: string }> = ({\n  icon,\n  size,\n  testId,\n}) => {\n  const theme = useTheme();\n  return (\n    <span\n      key=\"icon\"\n      data-testid={testId}\n      style={{\n        fontSize: rem(theme, getSizeStyles(theme, size).step.iconSize),\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n    >\n      {icon}\n    </span>\n  );\n};\n\nconst BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React.MouseEvent) => void }> = ({\n  size,\n  testId,\n  onClose,\n}) => (\n  <IconButton\n    key=\"close\"\n    size=\"small\"\n    onClick={onClose}\n    data-testid={testId}\n    sx={{\n      p: 0,\n      ml: 0.5,\n      color: 'inherit',\n      '& svg': { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },\n      '&:hover': { opacity: 0.8 },\n    }}\n  >\n    <CloseIcon />\n  </IconButton>\n);\n\n/** The row the parts sit in, `BADGE_CONTENT_GAP` apart. */\nconst BadgeRun: FC<{ children: ReactNode }> = ({ children }) => {\n  const theme = useTheme();\n  return (\n    <span style={{ display: 'inline-flex', alignItems: 'center', gap: rem(theme, BADGE_CONTENT_GAP) }}>{children}</span>\n  );\n};\n\n// The badge's inner run: optional icon, the content itself, optional close\n// button. A dot badge shows none of it.\nexport const buildBadgeContent = ({\n  variant,\n  size,\n  icon,\n  closable,\n  dataTestId,\n  baseContent,\n  onClose,\n}: {\n  variant: string;\n  size: BadgeSize;\n  icon?: ReactNode;\n  closable?: boolean;\n  dataTestId?: string;\n  baseContent: ReactNode;\n  onClose: (e: React.MouseEvent) => void;\n}): ReactNode => {\n  if (variant === 'dot') return '';\n\n  const testId = makeTestId(dataTestId);\n  const parts: ReactNode[] = [];\n\n  if (icon) parts.push(<BadgeIcon key=\"icon\" icon={icon} size={size} testId={testId('icon')} />);\n\n  if (baseContent !== null && baseContent !== undefined) {\n    parts.push(\n      <span key=\"content\" data-testid={testId('content')}>\n        {baseContent}\n      </span>,\n    );\n  }\n\n  if (closable && !variant.includes('dot')) {\n    parts.push(\n      <BadgeCloseButton key=\"close\" size={size} testId={testId('close')} onClose={onClose} />,\n    );\n  }\n\n  if (parts.length === 0) return null;\n\n  return <BadgeRun>{parts}</BadgeRun>;\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA2BrB;AAhBJ,IAAM,mBAA2C,OAAO;AAAA,EACtD,OAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC,MAAM,QAAQ,aAAa,CAAC;AACpF;AAEA,IAAM,aACJ,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,SAAS,MAAM;AAE5D,IAAM,YAAsE,CAAC;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa;AAAA,MACb,OAAO;AAAA,QACL,UAAU,IAAI,OAAO,cAAc,OAAO,IAAI,EAAE,KAAK,QAAQ;AAAA,QAC7D,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,IARG;AAAA,EASN;AAEJ;AAEA,IAAM,mBAAoG,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IAEC,MAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAa;AAAA,IACb,IAAI;AAAA,MACF,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,SAAS,EAAE,UAAU,MAAM,iBAAiB,IAAI,KAAK,YAAY,GAAG,aAAa,EAAE;AAAA,MACnF,WAAW,EAAE,SAAS,IAAI;AAAA,IAC5B;AAAA,IAEA,8BAAC,aAAU;AAAA;AAAA,EAZP;AAaN;AAIF,IAAM,WAAwC,CAAC,EAAE,SAAS,MAAM;AAC9D,QAAM,QAAQ,SAAS;AACvB,SACE,oBAAC,UAAK,OAAO,EAAE,SAAS,eAAe,YAAY,UAAU,KAAK,IAAI,OAAO,iBAAiB,EAAE,GAAI,UAAS;AAEjH;AAIO,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQiB;AACf,MAAI,YAAY,MAAO,QAAO;AAE9B,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,QAAqB,CAAC;AAE5B,MAAI,KAAM,OAAM,KAAK,oBAAC,aAAqB,MAAY,MAAY,QAAQ,OAAO,MAAM,KAApD,MAAuD,CAAE;AAE7F,MAAI,gBAAgB,QAAQ,gBAAgB,QAAW;AACrD,UAAM;AAAA,MACJ,oBAAC,UAAmB,eAAa,OAAO,SAAS,GAC9C,yBADO,SAEV;AAAA,IACF;AAAA,EACF;AAEA,MAAI,YAAY,CAAC,QAAQ,SAAS,KAAK,GAAG;AACxC,UAAM;AAAA,MACJ,oBAAC,oBAA6B,MAAY,QAAQ,OAAO,OAAO,GAAG,WAA7C,OAA+D;AAAA,IACvF;AAAA,EACF;AAEA,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SAAO,oBAAC,YAAU,iBAAM;AAC1B;","names":[]}

package/dist/chunk-2HVNPWFV.js

@@ -0,0 +1,116 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Form/Form.tsx
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledForm = styled("form", {
+  shouldForwardProp: (prop) => prop !== "variant"
+})(({ theme, variant }) => ({
+  width: "100%",
+  ...variant === "inline" && {
+    display: "flex",
+    gap: theme.spacing(2),
+    alignItems: "flex-start"
+  }
+}));
+var spacingMap = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5
+};
+var maxWidthMap = {
+  sm: "600px",
+  md: "900px",
+  lg: "1200px",
+  xl: "1536px",
+  full: "100%"
+};
+var Form = React.forwardRef(
+  ({ variant = "vertical", maxWidth = "full", spacing = "md", children, dataTestId, ...props }, ref) => /* @__PURE__ */ jsx(StyledForm, { ref, variant, role: "form", "data-testid": dataTestId, ...props, children: /* @__PURE__ */ jsx(Box, { sx: { maxWidth: maxWidthMap[maxWidth], width: "100%" }, children: variant === "inline" ? children : /* @__PURE__ */ jsx(Stack, { spacing: spacingMap[spacing], children }) }) })
+);
+Form.displayName = "Form";
+var StyledFormField = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "variant"
+})(
+  ({ theme, variant }) => ({
+    display: variant === "horizontal" ? "grid" : "flex",
+    flexDirection: variant === "horizontal" ? void 0 : "column",
+    gridTemplateColumns: variant === "horizontal" ? "200px 1fr" : void 0,
+    columnGap: variant === "horizontal" ? theme.spacing(1) : void 0,
+    alignItems: variant === "horizontal" ? "center" : void 0
+  })
+);
+var FormField = ({
+  name,
+  label,
+  required,
+  error,
+  helperText,
+  children,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(StyledFormField, { "data-testid": dataTestId, children: [
+  label && /* @__PURE__ */ jsx(FormLabel, { required, error: !!error, htmlFor: name, dataTestId: dataTestId ? `${dataTestId}-label` : void 0, children: label }),
+  /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, dataTestId: dataTestId ? `${dataTestId}-control` : void 0, children: [
+    children,
+    (error || helperText) && /* @__PURE__ */ jsx(FormMessage, { error: !!error, dataTestId: dataTestId ? `${dataTestId}-message` : void 0, children: error || helperText })
+  ] })
+] });
+var StyledFormLabel = styled("label", {
+  shouldForwardProp: (prop) => prop !== "error"
+})(({ theme, error }) => ({
+  fontSize: rem(theme, 14),
+  fontWeight: 500,
+  color: error ? theme.palette.error.main : theme.palette.text.primary,
+  marginBottom: theme.spacing(0.5),
+  display: "block",
+  "&::after": {
+    content: '" *"',
+    color: theme.palette.error.main,
+    display: "var(--required-display, none)"
+  }
+}));
+var FormLabel = ({ required, error, children, htmlFor, dataTestId }) => /* @__PURE__ */ jsx(
+  StyledFormLabel,
+  {
+    error,
+    htmlFor,
+    "data-testid": dataTestId,
+    style: { "--required-display": required ? "inline" : "none" },
+    children
+  }
+);
+var StyledFormControl = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "fullWidth"
+})(({ fullWidth }) => ({
+  width: fullWidth ? "100%" : "auto",
+  position: "relative"
+}));
+var FormControl = ({ fullWidth = true, children, dataTestId }) => (
+  // Don't pass error prop to the DOM element
+  /* @__PURE__ */ jsx(StyledFormControl, { fullWidth, "data-testid": dataTestId, children })
+);
+var StyledFormMessage = styled("span", {
+  shouldForwardProp: (prop) => prop !== "error"
+})(({ theme, error }) => ({
+  fontSize: rem(theme, 12),
+  marginTop: theme.spacing(0.5),
+  color: error ? theme.palette.error.main : theme.palette.text.secondary,
+  display: "block"
+}));
+var FormMessage = ({ error, children, dataTestId }) => /* @__PURE__ */ jsx(StyledFormMessage, { error, "data-testid": dataTestId, children });
+
+export {
+  Form,
+  FormField,
+  FormLabel,
+  FormControl,
+  FormMessage
+};
+//# sourceMappingURL=chunk-2HVNPWFV.js.map