@12-apps/ui 6.39.20 → 6.41.0

package/dist/{chunk-FWPFCK4D.js → chunk-NDHDBOUH.js}

@@ -1,9 +1,9 @@
-import {
-  ConfirmActionDialog
-} from "./chunk-BJZOBG24.js";
 import {
   useConfirmAction
 } from "./chunk-EMYESBIT.js";
+import {
+  ConfirmActionDialog
+} from "./chunk-BJZOBG24.js";
 
 // src/components/feedback/ConfirmAction/ConfirmAction.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -23,4 +23,4 @@ ConfirmAction.displayName = "ConfirmAction";
 export {
   ConfirmAction
 };
-//# sourceMappingURL=chunk-FWPFCK4D.js.map
+//# sourceMappingURL=chunk-NDHDBOUH.js.map

package/dist/{chunk-WRCLYSTX.js → chunk-NFGIA2ZV.js}

@@ -1,6 +1,6 @@
 import {
   fieldControlStyles
-} from "./chunk-CGO452DC.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   fieldRadius
 } from "./chunk-GDN2LUTZ.js";
@@ -63,4 +63,4 @@ var MapSearchBar = ({
 export {
   MapSearchBar
 };
-//# sourceMappingURL=chunk-WRCLYSTX.js.map
+//# sourceMappingURL=chunk-NFGIA2ZV.js.map

package/dist/{chunk-VPPIODKX.js → chunk-NQ7NMCRI.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-HM2JJNUE.js";
+} from "./chunk-K6LNHHSH.js";
 import {
   rem,
   sxRem
@@ -166,4 +166,4 @@ export {
   togglePillValues,
   cardGridTracks
 };
-//# sourceMappingURL=chunk-VPPIODKX.js.map
+//# sourceMappingURL=chunk-NQ7NMCRI.js.map

package/dist/{chunk-YMTZN54Q.js → chunk-NRSVI23L.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-U3DBQXPI.js";
 import {
   Button
-} from "./chunk-HM2JJNUE.js";
+} from "./chunk-K6LNHHSH.js";
 
 // src/components/data-display/CardKit/CardKebab.tsx
 import { jsx } from "react/jsx-runtime";
@@ -25,4 +25,4 @@ function CardKebab({
 export {
   CardKebab
 };
-//# sourceMappingURL=chunk-YMTZN54Q.js.map
+//# sourceMappingURL=chunk-NRSVI23L.js.map

package/dist/{chunk-2622YFM6.js → chunk-NSVSC6ZC.js}

@@ -1,3 +1,6 @@
+import {
+  STACK_BREAK
+} from "./chunk-JE6GQB5J.js";
 import {
   CARD_RADIUS,
   cardSurfaceStyles,
@@ -5,9 +8,6 @@ import {
   isSelectable,
   slotTestIds
 } from "./chunk-BYH5GPLT.js";
-import {
-  STACK_BREAK
-} from "./chunk-FLDLUAHW.js";
 import {
   useDragItem
 } from "./chunk-K4EKTMTC.js";
@@ -16,10 +16,10 @@ import {
   RAIL_GAP,
   railsTemplateFor,
   useListRails
-} from "./chunk-VY6L74JQ.js";
+} from "./chunk-EQXIW5MQ.js";
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-YKEO6UHN.js";
+} from "./chunk-XZJM6EPC.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -189,4 +189,4 @@ export {
   actionProps,
   rowStyles
 };
-//# sourceMappingURL=chunk-2622YFM6.js.map
+//# sourceMappingURL=chunk-NSVSC6ZC.js.map

package/dist/{chunk-Z43N7ASP.js → chunk-NU55QUMO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   Input
-} from "./chunk-JRJCBDGN.js";
+} from "./chunk-SDKOOVEX.js";
 import {
   FormControl,
   FormLabel,
@@ -38,4 +38,4 @@ function TextField({ name, label, type = "text", placeholder }) {
 export {
   TextField
 };
-//# sourceMappingURL=chunk-Z43N7ASP.js.map
+//# sourceMappingURL=chunk-NU55QUMO.js.map

package/dist/{chunk-66O55OZI.js → chunk-NYFGFELX.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-3ZVUNSFF.js";
 import {
   AvatarView
-} from "./chunk-Y6C4MYZE.js";
+} from "./chunk-TNQDSTIA.js";
 import {
   BORDER_WIDTH,
   GROUP_HOVER,
@@ -175,4 +175,4 @@ export {
   Avatar,
   AvatarGroup
 };
-//# sourceMappingURL=chunk-66O55OZI.js.map
+//# sourceMappingURL=chunk-NYFGFELX.js.map

package/dist/{chunk-PZBK3F52.js → chunk-O6MJWHU5.js}

@@ -8,8 +8,8 @@ var FIELD_HEIGHT_SCALE = {
   lg: 1.2,
   xl: 1.4
 };
-function resolveFieldHeight(height) {
-  return typeof height === "number" && Number.isFinite(height) && height > 0 ? height : DEFAULT_FIELD_HEIGHT;
+function resolveFieldHeight(height, fallback = DEFAULT_FIELD_HEIGHT) {
+  return typeof height === "number" && Number.isFinite(height) && height > 0 ? height : fallback;
 }
 function fieldHeightRem(height, size = "md") {
   return Math.round(resolveFieldHeight(height) * FIELD_HEIGHT_SCALE[size] * 1e4) / 1e4;
@@ -28,4 +28,4 @@ export {
   fieldHeightPx,
   FIELD_BORDER_WIDTH
 };
-//# sourceMappingURL=chunk-PZBK3F52.js.map
+//# sourceMappingURL=chunk-O6MJWHU5.js.map

package/dist/chunk-O6MJWHU5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/field-height.core.ts"],"sourcesContent":["import type { SizeValue } from './vocabulary';\n\n/**\n * THE ONE HEIGHT EVERY FIELD IS DRAWN AT, WITH NO RENDERER BEHIND IT.\n *\n * A filter row used to stand at three heights — a 40px search box, 34px filter\n * pills, 38px category and \"Mais\" triggers — and a form's default field was\n * 56px beside a 44px button (FUT-2555). A field's height is one decision, so it\n * is one token, the same way its corner is (`./field-radius.core.ts`).\n *\n * It is a multiple of the DEFAULT FONT SIZE — `rem` on the web, the body size on\n * native — not a pixel count, so a field grows with the type it holds: a reader\n * who raises the browser's base size gets taller fields with it instead of text\n * crammed into a fixed box.\n *\n * The web reader and the theme channel are in `./field-height.ts`.\n */\n\n/**\n * The standard field height, in multiples of the default font size.\n *\n * 2.5 — 40px at the 16px default: what MUI's small outlined field has always\n * drawn (the filter row's search box), and the 40px touch-target floor the\n * product already holds its controls to.\n */\nexport const DEFAULT_FIELD_HEIGHT = 2.5;\n\n/** The px (dp) the default font size stands for — `1rem`, the body size. */\nexport const FIELD_HEIGHT_FONT_PX = 16;\n\n/**\n * How each step of the size scale relates to the standard height.\n *\n * `sm` and `md` ARE the standard: they were the two everyday densities (a 40px\n * small field, a 56px medium one, a 36px and a 44px button), and a row mixing\n * them is exactly what this token ends. `xs` is the compact step; `lg` and `xl`\n * the roomy ones. All of them stay multiples of the font size.\n */\nexport const FIELD_HEIGHT_SCALE: Record<SizeValue, number> = {\n  xs: 0.8,\n  sm: 1,\n  md: 1,\n  lg: 1.2,\n  xl: 1.4,\n};\n\n/**\n * A usable standard height: the given one when it is a positive number, a\n * caller's own `fallback` otherwise — {@link DEFAULT_FIELD_HEIGHT} unless a\n * density factor (`./density.core`) already worked out a denser or roomier\n * one to fall back to instead.\n */\nexport function resolveFieldHeight(height: unknown, fallback: number = DEFAULT_FIELD_HEIGHT): number {\n  return typeof height === 'number' && Number.isFinite(height) && height > 0 ? height : fallback;\n}\n\n/** A field's height for a size, in multiples of the default font size (`rem`). */\nexport function fieldHeightRem(height: number, size: SizeValue = 'md'): number {\n  // Rounded to 1/10000rem: `3 * 0.8` is 2.4000000000000004 in floating point,\n  // and that would be the CSS every field of the step is written with.\n  return Math.round(resolveFieldHeight(height) * FIELD_HEIGHT_SCALE[size] * 10_000) / 10_000;\n}\n\n/** A field's height for a size in px (dp) — what the native renderer lays out. */\nexport function fieldHeightPx(height: number, size: SizeValue = 'md'): number {\n  return fieldHeightRem(height, size) * FIELD_HEIGHT_FONT_PX;\n}\n\n/**\n * THE ONE RESTING BORDER EVERY FIELD DRAWS: this width, in `fieldEdge`'s colour\n * (`./field-edge.core.ts`, the tone of the theme's hairline that clears the 3:1\n * non-text contrast floor). A variant that draws a different edge on purpose —\n * `glass`, `gradient`, `underline`, a coloured outline button — keeps it.\n */\nexport const FIELD_BORDER_WIDTH = 1;\n"],"mappings":";AAyBO,IAAM,uBAAuB;AAG7B,IAAM,uBAAuB;AAU7B,IAAM,qBAAgD;AAAA,EAC3D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQO,SAAS,mBAAmB,QAAiB,WAAmB,sBAA8B;AACnG,SAAO,OAAO,WAAW,YAAY,OAAO,SAAS,MAAM,KAAK,SAAS,IAAI,SAAS;AACxF;AAGO,SAAS,eAAe,QAAgB,OAAkB,MAAc;AAG7E,SAAO,KAAK,MAAM,mBAAmB,MAAM,IAAI,mBAAmB,IAAI,IAAI,GAAM,IAAI;AACtF;AAGO,SAAS,cAAc,QAAgB,OAAkB,MAAc;AAC5E,SAAO,eAAe,QAAQ,IAAI,IAAI;AACxC;AAQO,IAAM,qBAAqB;","names":[]}

package/dist/chunk-OJUORFGO.js

@@ -0,0 +1,87 @@
+import {
+  SettingGroupContext
+} from "./chunk-XJQNSMGA.js";
+import {
+  useAsyncSwitch
+} from "./chunk-SALQ65SM.js";
+import {
+  SettingSwitchBlock,
+  useSettingSwitchIds
+} from "./chunk-RDZGXJOD.js";
+import {
+  partTestId
+} from "./chunk-PEOOCQ2T.js";
+import {
+  dependentsStyles,
+  hintStyles,
+  surfaceStyles,
+  withCallerSx
+} from "./chunk-3DO5AJCG.js";
+import {
+  Icon
+} from "./chunk-JAGAFEZL.js";
+
+// src/components/layout/SettingCard/SettingGroup.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { forwardRef, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SettingGroup = forwardRef(function SettingGroup2(props, ref) {
+  const {
+    checked,
+    onChange,
+    copy,
+    formatError,
+    inactiveHint,
+    children,
+    disabled = false,
+    dataTestId,
+    className,
+    sx
+  } = props;
+  const theme = useTheme();
+  const ids = useSettingSwitchIds();
+  const hintId = `${useId()}-hint`;
+  const state = useAsyncSwitch({ checked, onChange, formatError, fallback: copy.saveFailed });
+  const active = checked && state.shown && !disabled;
+  const context = useMemo(() => ({ inactive: !active }), [active]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "section",
+      ref,
+      "aria-labelledby": ids.titleId,
+      "aria-busy": state.saving || void 0,
+      "data-active": active,
+      "data-testid": dataTestId,
+      className,
+      sx: withCallerSx((t) => surfaceStyles(t, false), sx),
+      children: [
+        /* @__PURE__ */ jsx(SettingSwitchBlock, { ...props, disabled, ids, state }),
+        !active && /* @__PURE__ */ jsxs(Box, { component: "p", id: hintId, sx: hintStyles(theme), "data-testid": partTestId(dataTestId, "hint"), children: [
+          /* @__PURE__ */ jsx(Icon, { name: "InfoOutlined", size: "xs" }),
+          /* @__PURE__ */ jsx("span", { children: inactiveHint })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "group",
+            "aria-labelledby": ids.titleId,
+            "aria-describedby": active ? void 0 : hintId,
+            "aria-disabled": active ? void 0 : true,
+            inert: !active,
+            sx: dependentsStyles(theme, active),
+            "data-testid": partTestId(dataTestId, "dependents"),
+            children: /* @__PURE__ */ jsx(SettingGroupContext.Provider, { value: context, children })
+          }
+        )
+      ]
+    }
+  );
+});
+SettingGroup.displayName = "SettingGroup";
+
+export {
+  SettingGroup
+};
+//# sourceMappingURL=chunk-OJUORFGO.js.map

package/dist/chunk-OJUORFGO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingCard/SettingGroup.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport { forwardRef, useId, useMemo } from 'react';\n\nimport { Icon } from '../../../icons';\n\nimport { useAsyncSwitch } from './SettingCard.hooks';\nimport { partTestId } from './SettingCard.parts';\nimport { dependentsStyles, hintStyles, surfaceStyles, withCallerSx } from './SettingCard.styles';\nimport type { SettingGroupProps } from './SettingCard.types';\nimport { SettingGroupContext } from './SettingGroup.context';\nimport { SettingSwitchBlock, useSettingSwitchIds } from './SettingSwitch';\n\n/**\n * ONE subject: a main switch, and the settings that only mean something while\n * it is on, indented beneath it.\n *\n * With the main switch off the dependent rows stay where they are — dimmed,\n * `inert`, and explained by `inactiveHint` — rather than disappearing. A\n * reader deciding whether to turn a feature on is helped by seeing what it\n * would let them configure, and a layout that jumps when a switch flips moves\n * the thing they were about to press.\n *\n * The rows are active only while the main switch is on AND saved: turning it\n * on lights them once the save lands; turning it off dims them at once.\n *\n * Several subjects are several cards, never one group — see `SettingGroup.md`.\n */\nexport const SettingGroup = forwardRef<HTMLElement, SettingGroupProps>(function SettingGroup(props, ref) {\n  const {\n    checked, onChange, copy, formatError, inactiveHint, children, disabled = false, dataTestId, className, sx,\n  } = props;\n  const theme = useTheme();\n  const ids = useSettingSwitchIds();\n  const hintId = `${useId()}-hint`;\n  const state = useAsyncSwitch({ checked, onChange, formatError, fallback: copy.saveFailed });\n  const active = checked && state.shown && !disabled;\n  const context = useMemo(() => ({ inactive: !active }), [active]);\n\n  return (\n    <Box\n      component=\"section\"\n      ref={ref}\n      aria-labelledby={ids.titleId}\n      aria-busy={state.saving || undefined}\n      data-active={active}\n      data-testid={dataTestId}\n      className={className}\n      sx={withCallerSx((t) => surfaceStyles(t, false), sx)}\n    >\n      <SettingSwitchBlock {...props} disabled={disabled} ids={ids} state={state} />\n      {!active && (\n        <Box component=\"p\" id={hintId} sx={hintStyles(theme)} data-testid={partTestId(dataTestId, 'hint')}>\n          <Icon name=\"InfoOutlined\" size=\"xs\" />\n          <span>{inactiveHint}</span>\n        </Box>\n      )}\n      <Box\n        role=\"group\"\n        aria-labelledby={ids.titleId}\n        aria-describedby={active ? undefined : hintId}\n        aria-disabled={active ? undefined : true}\n        inert={!active}\n        sx={dependentsStyles(theme, active)}\n        data-testid={partTestId(dataTestId, 'dependents')}\n      >\n        <SettingGroupContext.Provider value={context}>{children}</SettingGroupContext.Provider>\n      </Box>\n    </Box>\n  );\n});\n\nSettingGroup.displayName = 'SettingGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AACzB,SAAS,YAAY,OAAO,eAAe;AAgDrC,cAEE,YAFF;AAtBC,IAAM,eAAe,WAA2C,SAASA,cAAa,OAAO,KAAK;AACvG,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAU;AAAA,IAAM;AAAA,IAAa;AAAA,IAAc;AAAA,IAAU,WAAW;AAAA,IAAO;AAAA,IAAY;AAAA,IAAW;AAAA,EACzG,IAAI;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,MAAM,oBAAoB;AAChC,QAAM,SAAS,GAAG,MAAM,CAAC;AACzB,QAAM,QAAQ,eAAe,EAAE,SAAS,UAAU,aAAa,UAAU,KAAK,WAAW,CAAC;AAC1F,QAAM,SAAS,WAAW,MAAM,SAAS,CAAC;AAC1C,QAAM,UAAU,QAAQ,OAAO,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,mBAAiB,IAAI;AAAA,MACrB,aAAW,MAAM,UAAU;AAAA,MAC3B,eAAa;AAAA,MACb,eAAa;AAAA,MACb;AAAA,MACA,IAAI,aAAa,CAAC,MAAM,cAAc,GAAG,KAAK,GAAG,EAAE;AAAA,MAEnD;AAAA,4BAAC,sBAAoB,GAAG,OAAO,UAAoB,KAAU,OAAc;AAAA,QAC1E,CAAC,UACA,qBAAC,OAAI,WAAU,KAAI,IAAI,QAAQ,IAAI,WAAW,KAAK,GAAG,eAAa,WAAW,YAAY,MAAM,GAC9F;AAAA,8BAAC,QAAK,MAAK,gBAAe,MAAK,MAAK;AAAA,UACpC,oBAAC,UAAM,wBAAa;AAAA,WACtB;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,mBAAiB,IAAI;AAAA,YACrB,oBAAkB,SAAS,SAAY;AAAA,YACvC,iBAAe,SAAS,SAAY;AAAA,YACpC,OAAO,CAAC;AAAA,YACR,IAAI,iBAAiB,OAAO,MAAM;AAAA,YAClC,eAAa,WAAW,YAAY,YAAY;AAAA,YAEhD,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,SAAU,UAAS;AAAA;AAAA,QAC1D;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,aAAa,cAAc;","names":["SettingGroup"]}

package/dist/{chunk-JXECOCNA.js → chunk-P6Q2O3TU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-GWFAINQ7.js";
 import {
   accentFor
-} from "./chunk-TCAQOUIB.js";
+} from "./chunk-ZSTSISM6.js";
 import {
   rem,
   sxRem
@@ -258,4 +258,4 @@ export {
   AppHeaderStatus,
   AppHeaderIdentity
 };
-//# sourceMappingURL=chunk-JXECOCNA.js.map
+//# sourceMappingURL=chunk-P6Q2O3TU.js.map

package/dist/{chunk-RTEY5COP.js → chunk-PAICZOL5.js}

@@ -4,12 +4,12 @@ import {
 import {
   RichTextEditorToolbar
 } from "./chunk-WVZBYTIK.js";
-import {
-  fieldRadiusPx
-} from "./chunk-GDN2LUTZ.js";
 import {
   fieldEdge
 } from "./chunk-7FDU3FIN.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -174,4 +174,4 @@ export {
   RichTextEditor,
   RichTextEditor_default
 };
-//# sourceMappingURL=chunk-RTEY5COP.js.map
+//# sourceMappingURL=chunk-PAICZOL5.js.map

package/dist/{chunk-ZN6YATOG.js → chunk-PAT2BQOQ.js}

@@ -1,7 +1,7 @@
 import {
   FONT_WEIGHTS,
   TYPE_SIZES
-} from "./chunk-BLW6KLDR.js";
+} from "./chunk-YFODI4KT.js";
 
 // src/components/typography/Text/Text.metrics.ts
 var TEXT_SIZES = TYPE_SIZES;
@@ -31,4 +31,4 @@ export {
   CODE_PADDING,
   CODE_RADIUS_FACTOR
 };
-//# sourceMappingURL=chunk-ZN6YATOG.js.map
+//# sourceMappingURL=chunk-PAT2BQOQ.js.map

package/dist/chunk-PEOOCQ2T.js

@@ -0,0 +1,140 @@
+import {
+  errorStyles,
+  headerStyles,
+  iconStyles,
+  titleStyles
+} from "./chunk-3DO5AJCG.js";
+import {
+  SETTING_CARD
+} from "./chunk-IC7GHPMK.js";
+import {
+  Collapsible
+} from "./chunk-JYWF76Z5.js";
+import {
+  Chip
+} from "./chunk-OZPLAOI4.js";
+import {
+  Icon
+} from "./chunk-JAGAFEZL.js";
+import {
+  Button
+} from "./chunk-K6LNHHSH.js";
+import {
+  BUTTON_SIZES
+} from "./chunk-LN46DSMF.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/SettingCard/SettingCard.parts.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var partTestId = (root, part) => root ? `${root}-${part}` : void 0;
+var SettingHeader = ({
+  titleId,
+  title,
+  headingLevel,
+  icon,
+  status,
+  trailing,
+  labelFor,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Box, { sx: headerStyles(theme), children: [
+    icon && /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, sx: iconStyles(theme), children: icon }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 1, minWidth: 0, flex: 1 }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: labelFor ? "label" : headingLevel,
+          id: titleId,
+          htmlFor: labelFor,
+          sx: { ...titleStyles(theme), ...labelFor ? { cursor: "pointer" } : {} },
+          "data-testid": partTestId(dataTestId, "title"),
+          children: title
+        }
+      ),
+      status && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: status.label,
+          color: status.color ?? "neutral",
+          size: "sm",
+          variant: "outlined",
+          dataTestId: partTestId(dataTestId, "status")
+        }
+      )
+    ] }),
+    trailing
+  ] });
+};
+var SaveError = ({
+  id,
+  message,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  if (!message) return null;
+  return /* @__PURE__ */ jsx(Box, { component: "p", id, role: "alert", sx: errorStyles(theme), "data-testid": partTestId(dataTestId, "error"), children: message });
+};
+var PendingSpinner = ({ dataTestId }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    CircularProgress,
+    {
+      size: rem(theme, SETTING_CARD.spinnerSize),
+      color: "inherit",
+      "aria-hidden": true,
+      "data-testid": partTestId(dataTestId, "saving")
+    }
+  );
+};
+var LearnMore = ({ label, children, dataTestId }) => {
+  const [expanded, setExpanded] = useState(false);
+  const regionId = useId();
+  const theme = useTheme();
+  return (
+    // Pulled out by the button's own padding, so the words line up with the form above.
+    /* @__PURE__ */ jsxs(Box, { sx: { marginLeft: `-${rem(theme, BUTTON_SIZES.sm.paddingHorizontal)}` }, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "text",
+          size: "sm",
+          "aria-expanded": expanded,
+          "aria-controls": regionId,
+          onClick: () => setExpanded((was) => !was),
+          icon: /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              sx: {
+                display: "inline-flex",
+                transform: expanded ? "rotate(180deg)" : "none",
+                transition: theme.transitions.create("transform")
+              },
+              children: /* @__PURE__ */ jsx(Icon, { name: "ExpandMore", size: "xs" })
+            }
+          ),
+          iconPosition: "right",
+          dataTestId: partTestId(dataTestId, "learn-more"),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(Collapsible, { open: expanded, keepMounted: true, sx: { marginLeft: rem(theme, BUTTON_SIZES.sm.paddingHorizontal) }, dataTestId: partTestId(dataTestId, "learn-more-content"), children: /* @__PURE__ */ jsx(Box, { id: regionId, sx: { ...theme.typography.body2, color: "text.secondary", pt: 1 }, children }) })
+    ] })
+  );
+};
+
+export {
+  partTestId,
+  SettingHeader,
+  SaveError,
+  PendingSpinner,
+  LearnMore
+};
+//# sourceMappingURL=chunk-PEOOCQ2T.js.map

package/dist/chunk-PEOOCQ2T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingCard/SettingCard.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useId, useState } from 'react';\n\nimport { Icon } from '../../../icons';\nimport { rem } from '../../../tokens/relative';\nimport { Chip } from '../../data-display/Chip';\nimport { Button } from '../../form/Button';\nimport { BUTTON_SIZES } from '../../form/Button/Button.metrics';\nimport { Collapsible } from '../Collapsible';\n\nimport { SETTING_CARD } from './SettingCard.metrics';\nimport { errorStyles, headerStyles, iconStyles, titleStyles } from './SettingCard.styles';\nimport type { SettingHeadingLevel, SettingStatus } from './SettingCard.types';\n\n/** `<root>-<part>` when the host gave a root test id, else nothing. */\nexport const partTestId = (root: string | undefined, part: string): string | undefined =>\n  root ? `${root}-${part}` : undefined;\n\ninterface HeaderProps {\n  titleId: string;\n  title: string;\n  headingLevel: SettingHeadingLevel;\n  icon?: React.ReactNode;\n  status?: SettingStatus;\n  /** Rendered at the row's far end — the Edit trigger, or a switch. */\n  trailing?: React.ReactNode;\n  /** Renders the title as a `<label>` for this control instead of a heading. */\n  labelFor?: string;\n  dataTestId?: string;\n}\n\n/**\n * Icon, title, status pill, and whatever the row ends with.\n *\n * A switch card's title is the switch's `<label>`, so the words are both its\n * accessible name and a tap target far larger than the track. An editable\n * card's title is a heading, so the page outline lists every setting.\n */\nexport const SettingHeader: React.FC<HeaderProps> = ({\n  titleId,\n  title,\n  headingLevel,\n  icon,\n  status,\n  trailing,\n  labelFor,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box sx={headerStyles(theme)}>\n      {icon && (\n        <Box component=\"span\" aria-hidden sx={iconStyles(theme)}>\n          {icon}\n        </Box>\n      )}\n      <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 1, minWidth: 0, flex: 1 }}>\n        <Box\n          component={labelFor ? 'label' : headingLevel}\n          id={titleId}\n          htmlFor={labelFor}\n          sx={{ ...titleStyles(theme), ...(labelFor ? { cursor: 'pointer' } : {}) }}\n          data-testid={partTestId(dataTestId, 'title')}\n        >\n          {title}\n        </Box>\n        {status && (\n          <Chip\n            label={status.label}\n            color={status.color ?? 'neutral'}\n            size=\"sm\"\n            variant=\"outlined\"\n            dataTestId={partTestId(dataTestId, 'status')}\n          />\n        )}\n      </Box>\n      {trailing}\n    </Box>\n  );\n};\n\n/**\n * The failure line. `role=\"alert\"` so it is announced the moment it appears,\n * without anyone having to move focus to find it.\n */\nexport const SaveError: React.FC<{ id: string; message: string | null; dataTestId?: string }> = ({\n  id,\n  message,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  if (!message) return null;\n  return (\n    <Box component=\"p\" id={id} role=\"alert\" sx={errorStyles(theme)} data-testid={partTestId(dataTestId, 'error')}>\n      {message}\n    </Box>\n  );\n};\n\n/** The spinner that rides beside a pending control; decorative — the words are announced separately. */\nexport const PendingSpinner: React.FC<{ dataTestId?: string }> = ({ dataTestId }) => {\n  const theme = useTheme();\n  return (\n    <CircularProgress\n      size={rem(theme, SETTING_CARD.spinnerSize)}\n      color=\"inherit\"\n      aria-hidden\n      data-testid={partTestId(dataTestId, 'saving')}\n    />\n  );\n};\n\n/**\n * The \"learn more\" disclosure: a text button that owns `aria-expanded`, and\n * the collapsible region it controls. Closed by default — it is the longer\n * explanation, and the form is what the reader came for.\n */\nexport const LearnMore: React.FC<{\n  label: string;\n  children: React.ReactNode;\n  dataTestId?: string;\n}> = ({ label, children, dataTestId }) => {\n  const [expanded, setExpanded] = useState(false);\n  const regionId = useId();\n  const theme = useTheme();\n  return (\n    // Pulled out by the button's own padding, so the words line up with the form above.\n    <Box sx={{ marginLeft: `-${rem(theme, BUTTON_SIZES.sm.paddingHorizontal)}` }}>\n      <Button\n        variant=\"text\"\n        size=\"sm\"\n        aria-expanded={expanded}\n        aria-controls={regionId}\n        onClick={() => setExpanded((was) => !was)}\n        icon={\n          <Box\n            component=\"span\"\n            sx={{\n              display: 'inline-flex',\n              transform: expanded ? 'rotate(180deg)' : 'none',\n              transition: theme.transitions.create('transform'),\n            }}\n          >\n            <Icon name=\"ExpandMore\" size=\"xs\" />\n          </Box>\n        }\n        iconPosition=\"right\"\n        dataTestId={partTestId(dataTestId, 'learn-more')}\n      >\n        {label}\n      </Button>\n      {/* Kept mounted so `aria-controls` always names an element that exists. */}\n      <Collapsible open={expanded} keepMounted sx={{ marginLeft: rem(theme, BUTTON_SIZES.sm.paddingHorizontal) }} dataTestId={partTestId(dataTestId, 'learn-more-content')}>\n        <Box id={regionId} sx={{ ...theme.typography.body2, color: 'text.secondary', pt: 1 }}>\n          {children}\n        </Box>\n      </Collapsible>\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-PGGGKYWG.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-PGGGKYWG.js.map

package/dist/chunk-PGGGKYWG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-TZBOWSAM.js → chunk-PICOOZLX.js}

@@ -1,14 +1,14 @@
 import {
   renderChartByType
-} from "./chunk-VJ2BNJ5M.js";
+} from "./chunk-QMELMQPA.js";
+import {
+  ChartContainer
+} from "./chunk-RIRTW5EU.js";
 import {
   getSizeStyles,
   getVariantStyles,
   plotHeightPx
-} from "./chunk-EA2UNEL6.js";
-import {
-  ChartContainer
-} from "./chunk-RIRTW5EU.js";
+} from "./chunk-CNR5RFKC.js";
 import {
   muiColor
 } from "./chunk-7ZPUN7TV.js";
@@ -111,4 +111,4 @@ var Chart = (props) => {
 export {
   Chart
 };
-//# sourceMappingURL=chunk-TZBOWSAM.js.map
+//# sourceMappingURL=chunk-PICOOZLX.js.map

package/dist/{chunk-JJJM75XF.js → chunk-PNDYAIKM.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-HPK33ACY.js";
 import {
   accentFor
-} from "./chunk-TCAQOUIB.js";
+} from "./chunk-ZSTSISM6.js";
 import {
   muiSize
 } from "./chunk-7ZPUN7TV.js";
@@ -325,4 +325,4 @@ export {
   CarouselArrows,
   CarouselThumbnails
 };
-//# sourceMappingURL=chunk-JJJM75XF.js.map
+//# sourceMappingURL=chunk-PNDYAIKM.js.map

package/dist/{chunk-EJYJLVPK.js → chunk-PRLYYKMG.js}

@@ -5,10 +5,10 @@ import {
 } from "./chunk-IM4DMKH4.js";
 import {
   accentFor
-} from "./chunk-TCAQOUIB.js";
+} from "./chunk-ZSTSISM6.js";
 import {
   FIELD_BORDER_WIDTH
-} from "./chunk-PZBK3F52.js";
+} from "./chunk-O6MJWHU5.js";
 import {
   shadowInk,
   sheen
@@ -200,4 +200,4 @@ var panelSx = (input) => {
 export {
   panelSx
 };
-//# sourceMappingURL=chunk-EJYJLVPK.js.map
+//# sourceMappingURL=chunk-PRLYYKMG.js.map

package/dist/{chunk-4GB46HLK.js → chunk-PTONBPZL.js}

@@ -4,7 +4,7 @@ import {
 import {
   asFieldSize,
   fieldTextFieldStyles
-} from "./chunk-CGO452DC.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   rem,
   sxRem
@@ -73,4 +73,4 @@ export {
   ItemsPerPageSelect,
   PageInfo
 };
-//# sourceMappingURL=chunk-4GB46HLK.js.map
+//# sourceMappingURL=chunk-PTONBPZL.js.map

package/dist/chunk-Q4JWWTL4.js

@@ -0,0 +1,36 @@
+// src/components/form/NumberField/NumberField.helpers.ts
+var MAX_DIGITS = 15;
+function digitsOf(raw) {
+  return raw.replace(/\D+/g, "").slice(0, MAX_DIGITS);
+}
+function parseDigits(raw) {
+  const digits = digitsOf(raw);
+  return digits === "" ? null : Number(digits);
+}
+function formatValue(value) {
+  return value === null || !Number.isFinite(value) ? "" : String(value);
+}
+function clamp(value, { min, max }) {
+  if (max !== void 0 && value > max) return max;
+  if (min !== void 0 && value < min) return min;
+  return value;
+}
+function stepValue(value, direction, step, bounds) {
+  if (value === null) return clamp(bounds.min ?? 0, bounds);
+  return clamp(value + direction * step, bounds);
+}
+function isRefusedKey(event) {
+  if (event.ctrlKey || event.metaKey || event.altKey) return false;
+  return event.key.length === 1 && !/\d/.test(event.key);
+}
+
+export {
+  MAX_DIGITS,
+  digitsOf,
+  parseDigits,
+  formatValue,
+  clamp,
+  stepValue,
+  isRefusedKey
+};
+//# sourceMappingURL=chunk-Q4JWWTL4.js.map

package/dist/chunk-Q4JWWTL4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/NumberField/NumberField.helpers.ts"],"sourcesContent":["/**\n * The pure half of `NumberField`: what a keystroke may add, what a string of\n * digits is worth, and where an arrow key lands. Kept apart from the component\n * so every rule is a plain function a unit test can hold.\n */\n\n/**\n * The most digits the field keeps. Fifteen is the longest run that is always\n * a safe integer (`Number.MAX_SAFE_INTEGER` has sixteen, but not every\n * sixteen-digit number is below it), so a pasted serial number can never turn\n * into a rounded float.\n */\nexport const MAX_DIGITS = 15;\n\nexport interface NumberBounds {\n  min?: number;\n  max?: number;\n}\n\n/** Everything that is not a digit, removed; then cut to {@link MAX_DIGITS}. */\nexport function digitsOf(raw: string): string {\n  return raw.replace(/\\D+/g, '').slice(0, MAX_DIGITS);\n}\n\n/**\n * What the field's text is worth. An empty field is `null` — never `0`, and\n * never `NaN` — so \"cleared\" and \"zero\" stay two different answers.\n */\nexport function parseDigits(raw: string): number | null {\n  const digits = digitsOf(raw);\n  return digits === '' ? null : Number(digits);\n}\n\n/** The text a value shows as. */\nexport function formatValue(value: number | null): string {\n  return value === null || !Number.isFinite(value) ? '' : String(value);\n}\n\n/** `value`, held inside whichever bounds are set. */\nexport function clamp(value: number, { min, max }: NumberBounds): number {\n  if (max !== undefined && value > max) return max;\n  if (min !== undefined && value < min) return min;\n  return value;\n}\n\n/**\n * Where ArrowUp (`+1`) or ArrowDown (`-1`) takes the value.\n *\n * From empty, either arrow lands on the floor (`min`, else 0) rather than\n * stepping past it: the first press says \"give me a number\", and the floor is\n * the only one both directions agree on.\n */\nexport function stepValue(\n  value: number | null,\n  direction: 1 | -1,\n  step: number,\n  bounds: NumberBounds,\n): number {\n  if (value === null) return clamp(bounds.min ?? 0, bounds);\n  return clamp(value + direction * step, bounds);\n}\n\n/**\n * A key that would type a character the field refuses. Shortcuts (Ctrl/Cmd +\n * a letter — copy, paste, select all) and the named keys (`Backspace`,\n * `ArrowLeft`, `Tab`) are left alone: only a single printable character that\n * is not a digit is blocked.\n */\nexport function isRefusedKey(event: {\n  key: string;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  altKey: boolean;\n}): boolean {\n  if (event.ctrlKey || event.metaKey || event.altKey) return false;\n  return event.key.length === 1 && !/\\d/.test(event.key);\n}\n"],"mappings":";AAYO,IAAM,aAAa;AAQnB,SAAS,SAAS,KAAqB;AAC5C,SAAO,IAAI,QAAQ,QAAQ,EAAE,EAAE,MAAM,GAAG,UAAU;AACpD;AAMO,SAAS,YAAY,KAA4B;AACtD,QAAM,SAAS,SAAS,GAAG;AAC3B,SAAO,WAAW,KAAK,OAAO,OAAO,MAAM;AAC7C;AAGO,SAAS,YAAY,OAA8B;AACxD,SAAO,UAAU,QAAQ,CAAC,OAAO,SAAS,KAAK,IAAI,KAAK,OAAO,KAAK;AACtE;AAGO,SAAS,MAAM,OAAe,EAAE,KAAK,IAAI,GAAyB;AACvE,MAAI,QAAQ,UAAa,QAAQ,IAAK,QAAO;AAC7C,MAAI,QAAQ,UAAa,QAAQ,IAAK,QAAO;AAC7C,SAAO;AACT;AASO,SAAS,UACd,OACA,WACA,MACA,QACQ;AACR,MAAI,UAAU,KAAM,QAAO,MAAM,OAAO,OAAO,GAAG,MAAM;AACxD,SAAO,MAAM,QAAQ,YAAY,MAAM,MAAM;AAC/C;AAQO,SAAS,aAAa,OAKjB;AACV,MAAI,MAAM,WAAW,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC3D,SAAO,MAAM,IAAI,WAAW,KAAK,CAAC,KAAK,KAAK,MAAM,GAAG;AACvD;","names":[]}

package/dist/{chunk-FNG33MKA.js → chunk-QDELBNL3.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   ToggleGroup
-} from "./chunk-W5TI46QN.js";
+} from "./chunk-KQZGUHYZ.js";
 import {
   FormControl,
   FormLabel,
@@ -38,4 +38,4 @@ function ToggleField({ name, options, label }) {
 export {
   ToggleField
 };
-//# sourceMappingURL=chunk-FNG33MKA.js.map
+//# sourceMappingURL=chunk-QDELBNL3.js.map

package/dist/{chunk-DSF4VT7L.js → chunk-QEI5DC6S.js}

@@ -4,16 +4,16 @@ import {
 } from "./chunk-4RDJMIWL.js";
 import {
   fieldBorder
-} from "./chunk-CGO452DC.js";
-import {
-  fieldRadius
-} from "./chunk-GDN2LUTZ.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   fieldEdge
 } from "./chunk-7FDU3FIN.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
 import {
   FIELD_BORDER_WIDTH
-} from "./chunk-PZBK3F52.js";
+} from "./chunk-O6MJWHU5.js";
 import {
   rem,
   rems,
@@ -225,4 +225,4 @@ Textarea.displayName = "Textarea";
 export {
   Textarea
 };
-//# sourceMappingURL=chunk-DSF4VT7L.js.map
+//# sourceMappingURL=chunk-QEI5DC6S.js.map

package/dist/chunk-QGUNUXTT.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-QGUNUXTT.js.map

package/dist/chunk-QGUNUXTT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}