@12-apps/ui 6.40.0 → 6.41.0

package/dist/{chunk-SCVBGQFO.js → chunk-KQZGUHYZ.js}

@@ -1,7 +1,7 @@
 import {
   asFieldSize,
   fieldHeight
-} from "./chunk-EXFX3JRN.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   fieldRadius
 } from "./chunk-GDN2LUTZ.js";
@@ -140,4 +140,4 @@ ToggleGroup.displayName = "ToggleGroup";
 export {
   ToggleGroup
 };
-//# sourceMappingURL=chunk-SCVBGQFO.js.map
+//# sourceMappingURL=chunk-KQZGUHYZ.js.map

package/dist/{chunk-GJ7GIGDS.js → chunk-LCWGNDTH.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-H2J2MTRE.js";
 import {
   MapSearchBar
-} from "./chunk-SE4WZIKD.js";
+} from "./chunk-NFGIA2ZV.js";
 
 // src/components/data-display/MapPreview/MapLayers.tsx
 import { useTheme } from "@mui/material/styles/index.js";
@@ -56,4 +56,4 @@ var MapLayers = ({ settings, zoom, mapType, search, controls }) => {
 export {
   MapLayers
 };
-//# sourceMappingURL=chunk-GJ7GIGDS.js.map
+//# sourceMappingURL=chunk-LCWGNDTH.js.map

package/dist/{chunk-4D2IVVHR.js → chunk-LF3EVXMF.js}

@@ -2,7 +2,7 @@ import {
   asFieldSize,
   fieldBorder,
   fieldHeight
-} from "./chunk-EXFX3JRN.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   fieldRadius
 } from "./chunk-GDN2LUTZ.js";
@@ -181,4 +181,4 @@ export {
   variantStyles,
   effectStyles
 };
-//# sourceMappingURL=chunk-4D2IVVHR.js.map
+//# sourceMappingURL=chunk-LF3EVXMF.js.map

package/dist/{chunk-2XTBGZSR.js → chunk-LGCRL7DK.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-ODFJTEIL.js";
 import {
   MapLayers
-} from "./chunk-GJ7GIGDS.js";
+} from "./chunk-LCWGNDTH.js";
 import {
   useMapPreview
 } from "./chunk-QSRZOXQI.js";
@@ -108,4 +108,4 @@ export {
   MapPreview,
   MapPreview_default
 };
-//# sourceMappingURL=chunk-2XTBGZSR.js.map
+//# sourceMappingURL=chunk-LGCRL7DK.js.map

package/dist/{chunk-WY35GCHY.js → chunk-LODMNSLR.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-O5UGAL2V.js";
 import {
   SelectAllStrip
-} from "./chunk-GPT673YL.js";
+} from "./chunk-H72YKEGD.js";
 import {
   cardGridTracks
-} from "./chunk-H772ZSAI.js";
+} from "./chunk-NQ7NMCRI.js";
 import {
   ListCardGroup
 } from "./chunk-EQXIW5MQ.js";
@@ -273,4 +273,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-WY35GCHY.js.map
+//# sourceMappingURL=chunk-LODMNSLR.js.map

package/dist/{chunk-EXFX3JRN.js → chunk-M47ZOUGF.js}

@@ -1,10 +1,10 @@
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
 import {
   fieldRadiusOverrides,
   fieldRootStyles
 } from "./chunk-GDN2LUTZ.js";
-import {
-  fieldEdge
-} from "./chunk-7FDU3FIN.js";
 import {
   DEFAULT_FIELD_HEIGHT,
   FIELD_BORDER_WIDTH,
@@ -90,4 +90,4 @@ export {
   fieldOverrides,
   fieldTextFieldStyles
 };
-//# sourceMappingURL=chunk-EXFX3JRN.js.map
+//# sourceMappingURL=chunk-M47ZOUGF.js.map

package/dist/{chunk-AQCQ2USS.js → chunk-M65ZNPLO.js}

@@ -1,6 +1,6 @@
 import {
   fieldHeight
-} from "./chunk-EXFX3JRN.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
@@ -192,4 +192,4 @@ function SortByDropdown({
 export {
   SortByDropdown
 };
-//# sourceMappingURL=chunk-AQCQ2USS.js.map
+//# sourceMappingURL=chunk-M65ZNPLO.js.map

package/dist/{chunk-JZ5IGO5G.js → chunk-NCB4GBRL.js}

@@ -6,7 +6,7 @@ import {
   triggerClearSx,
   triggerCountSx,
   triggerSx
-} from "./chunk-NFJ3VVD3.js";
+} from "./chunk-Z6T5SXST.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -93,4 +93,4 @@ function CategoryTrigger({
 export {
   CategoryTrigger
 };
-//# sourceMappingURL=chunk-JZ5IGO5G.js.map
+//# sourceMappingURL=chunk-NCB4GBRL.js.map

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

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

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

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

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

@@ -3,7 +3,7 @@ import {
 } from "./chunk-U3DBQXPI.js";
 import {
   Button
-} from "./chunk-BLUURKCY.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-P7JF6XT7.js.map
+//# sourceMappingURL=chunk-NRSVI23L.js.map

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

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

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-JB56E4XQ.js → chunk-PAICZOL5.js}

@@ -1,15 +1,15 @@
-import {
-  RichTextEditorToolbar
-} from "./chunk-WVZBYTIK.js";
 import {
   useRichTextEditor
 } from "./chunk-EUACQR6N.js";
 import {
-  fieldRadiusPx
-} from "./chunk-GDN2LUTZ.js";
+  RichTextEditorToolbar
+} from "./chunk-WVZBYTIK.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-JB56E4XQ.js.map
+//# sourceMappingURL=chunk-PAICZOL5.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-QX3CXOJ3.js → chunk-PTONBPZL.js}

@@ -4,7 +4,7 @@ import {
 import {
   asFieldSize,
   fieldTextFieldStyles
-} from "./chunk-EXFX3JRN.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   rem,
   sxRem
@@ -73,4 +73,4 @@ export {
   ItemsPerPageSelect,
   PageInfo
 };
-//# sourceMappingURL=chunk-QX3CXOJ3.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-4UASV6VL.js → chunk-QDELBNL3.js}

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

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

@@ -4,13 +4,13 @@ import {
 } from "./chunk-4RDJMIWL.js";
 import {
   fieldBorder
-} from "./chunk-EXFX3JRN.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-O6MJWHU5.js";
@@ -225,4 +225,4 @@ Textarea.displayName = "Textarea";
 export {
   Textarea
 };
-//# sourceMappingURL=chunk-ZE56GK5C.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":[]}

package/dist/{chunk-3UXBIUJF.js → chunk-RDFPM2AQ.js}

@@ -1,18 +1,18 @@
 import {
   DataViewsExportMenu
-} from "./chunk-VE3P77TV.js";
+} from "./chunk-DLWLIPCP.js";
 import {
   DataViewsDisplayPanel
-} from "./chunk-BDBI4W77.js";
+} from "./chunk-6MD5QXXJ.js";
 import {
   renderBulkActions
-} from "./chunk-H772ZSAI.js";
+} from "./chunk-NQ7NMCRI.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   FilterTrigger
-} from "./chunk-5K4G2XYS.js";
+} from "./chunk-SNBAMWI5.js";
 import {
   ContentToolbar
 } from "./chunk-TZFBJ47T.js";
@@ -136,4 +136,4 @@ function GridToolbar(props) {
 export {
   GridToolbar
 };
-//# sourceMappingURL=chunk-3UXBIUJF.js.map
+//# sourceMappingURL=chunk-RDFPM2AQ.js.map