@12-apps/ui 6.30.1 → 6.30.3

package/dist/chunk-Q6FUSSLK.js

@@ -0,0 +1,140 @@
+import {
+  errorStyles,
+  headerStyles,
+  iconStyles,
+  titleStyles
+} from "./chunk-KRR6KK5J.js";
+import {
+  rem
+} from "./chunk-4HDP2PZD.js";
+import {
+  SETTING_CARD
+} from "./chunk-IC7GHPMK.js";
+import {
+  Collapsible
+} from "./chunk-WUTHROII.js";
+import {
+  Chip
+} from "./chunk-FPWB5ILF.js";
+import {
+  Icon
+} from "./chunk-HT7DWIR4.js";
+import {
+  Button
+} from "./chunk-LKAKYP42.js";
+import {
+  BUTTON_SIZES
+} from "./chunk-5LQ7PKMW.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-Q6FUSSLK.js.map

package/dist/chunk-Q6FUSSLK.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 './SettingCard.rem';\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-6FUOUUYO.js → chunk-Q6STVEYJ.js}

@@ -1,7 +1,7 @@
 import {
   MoreGroup,
   fieldClearing
-} from "./chunk-EZMCWRXO.js";
+} from "./chunk-OTMJBGJA.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -10,10 +10,10 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-BKAB4KZK.js";
+} from "./chunk-LKAKYP42.js";
 import {
   Text
-} from "./chunk-YTYROOLY.js";
+} from "./chunk-D22EGB3T.js";
 
 // src/components/data-display/DataViews/data-views-more-filters.tsx
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
@@ -180,4 +180,4 @@ function MoreFilters({
 export {
   MoreFilters
 };
-//# sourceMappingURL=chunk-6FUOUUYO.js.map
+//# sourceMappingURL=chunk-Q6STVEYJ.js.map

package/dist/{chunk-6IKX5IIX.js → chunk-Q75SJ35X.js}

@@ -1,12 +1,12 @@
+import {
+  useAddressAutocomplete
+} from "./chunk-ZOUWHGV3.js";
 import {
   AddressFallbackField
 } from "./chunk-HKKSZ7HG.js";
 import {
   AddressAutocompleteField
-} from "./chunk-WREIYOXN.js";
-import {
-  useAddressAutocomplete
-} from "./chunk-ZOUWHGV3.js";
+} from "./chunk-TLMLEC4F.js";
 import {
   resolveAddressProps
 } from "./chunk-MTGEJRE4.js";
@@ -35,4 +35,4 @@ export {
   AddressAutocomplete,
   AddressAutocomplete_default
 };
-//# sourceMappingURL=chunk-6IKX5IIX.js.map
+//# sourceMappingURL=chunk-Q75SJ35X.js.map

package/dist/{chunk-WC5XYWTE.js → chunk-QGJBNVC2.js}

@@ -24,7 +24,7 @@ import {
 } from "./chunk-PTP3CZL4.js";
 import {
   px
-} from "./chunk-SONWG2RT.js";
+} from "./chunk-OW4UEIXA.js";
 
 // src/components/data-display/Alert/Alert.styles.tsx
 import Error from "@mui/icons-material/Error";
@@ -266,4 +266,4 @@ export {
   alertVariantStyles,
   alertEmphasisStyles
 };
-//# sourceMappingURL=chunk-WC5XYWTE.js.map
+//# sourceMappingURL=chunk-QGJBNVC2.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-KFZT3PHA.js → chunk-QHJ7FTZK.js}

@@ -1,9 +1,9 @@
 import {
   SaveViewModal
-} from "./chunk-7OZBOS75.js";
+} from "./chunk-CK2NTT4S.js";
 import {
   ManageViewsDialog
-} from "./chunk-DUWF5LUK.js";
+} from "./chunk-TNCCCLLO.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk-EFEZWG4C.js";
 import {
   Alert
-} from "./chunk-L6TCIZFR.js";
+} from "./chunk-SUAGBFYJ.js";
 
 // src/components/data-display/DataViews/data-views-table-parts.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -121,4 +121,4 @@ export {
   ViewsMenuSlot,
   ViewDialogs
 };
-//# sourceMappingURL=chunk-KFZT3PHA.js.map
+//# sourceMappingURL=chunk-QHJ7FTZK.js.map

package/dist/{chunk-NUB4T3RQ.js → chunk-QJ6KWJJH.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   Checkbox
-} from "./chunk-MGPA6KTM.js";
+} from "./chunk-AMFP64L3.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -131,4 +131,4 @@ export {
   SelectSlot,
   DiscloseSlot
 };
-//# sourceMappingURL=chunk-NUB4T3RQ.js.map
+//# sourceMappingURL=chunk-QJ6KWJJH.js.map

package/dist/chunk-R6XVOUNC.js

@@ -0,0 +1,85 @@
+import {
+  clamp,
+  formatValue,
+  isRefusedKey,
+  parseDigits,
+  stepValue
+} from "./chunk-Q4JWWTL4.js";
+import {
+  Input
+} from "./chunk-5ZXVYKHU.js";
+
+// src/components/form/NumberField/NumberField.tsx
+import React, { useCallback, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+var NumberField = React.forwardRef(function NumberField2(props, ref) {
+  const {
+    value,
+    onChange,
+    min,
+    max,
+    step = 1,
+    suffix,
+    onKeyDown,
+    onBlur,
+    inputProps,
+    id: idProp,
+    "aria-describedby": callerDescribedBy,
+    ...rest
+  } = props;
+  const generated = useId();
+  const id = idProp ?? `number-field-${generated}`;
+  const suffixId = `${id}-suffix`;
+  const commit = useCallback(
+    (next) => {
+      if (next !== value) onChange(next);
+    },
+    [value, onChange]
+  );
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      commit(stepValue(value, event.key === "ArrowUp" ? 1 : -1, step, { min, max }));
+    } else if (isRefusedKey(event)) {
+      event.preventDefault();
+    }
+  };
+  const handleBlur = (event) => {
+    if (value !== null) commit(clamp(value, { min, max }));
+    onBlur?.(event);
+  };
+  const describedBy = [callerDescribedBy, suffix != null ? suffixId : void 0].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      ...rest,
+      id,
+      type: "text",
+      autoComplete: "off",
+      value: formatValue(value),
+      onChange: (event) => commit(parseDigits(event.target.value)),
+      onBlur: handleBlur,
+      "aria-describedby": describedBy || void 0,
+      endAdornment: suffix != null ? /* @__PURE__ */ jsx("span", { id: suffixId, children: suffix }) : void 0,
+      inputProps: {
+        ...inputProps,
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        role: "spinbutton",
+        "aria-valuenow": value ?? void 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        onKeyDown: handleKeyDown
+      }
+    }
+  );
+});
+NumberField.displayName = "NumberField";
+
+export {
+  NumberField
+};
+//# sourceMappingURL=chunk-R6XVOUNC.js.map

package/dist/chunk-R6XVOUNC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/NumberField/NumberField.tsx"],"sourcesContent":["import React, { useCallback, useId } from 'react';\n\nimport { Input } from '../Input';\n\nimport { clamp, formatValue, isRefusedKey, parseDigits, stepValue } from './NumberField.helpers';\nimport type { NumberFieldProps } from './NumberField.types';\n\n/**\n * A digits-only number input whose value is a `number | null`.\n *\n * - `inputMode=\"numeric\"` on the `<input>` itself, so a phone opens its number\n *   pad (the attribute does nothing anywhere else — see `Input.types.ts`).\n * - A non-digit keystroke never reaches the field, and a paste keeps only its\n *   digits: `\"1.500 min\"` pastes as `1500`.\n * - `suffix` is drawn inside the field's border, and read as its description.\n * - ArrowUp / ArrowDown move by `step`, never past `min` / `max`. Typing may go\n *   out of bounds for a moment (typing `5` on the way to `50` must not snap to a\n *   minimum of 10); the blur brings it back inside.\n * - Clearing the field reports `null`, not `0` and not `NaN`.\n *\n * `role=\"spinbutton\"` with `aria-valuenow` / `-min` / `-max`, because that is\n * what the arrow keys make it — a screen reader then says so, and says where\n * in the range the value sits.\n */\nexport const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(\n  props,\n  ref,\n) {\n  const {\n    value, onChange, min, max, step = 1, suffix, onKeyDown, onBlur, inputProps, id: idProp,\n    'aria-describedby': callerDescribedBy, ...rest\n  } = props;\n  const generated = useId();\n  const id = idProp ?? `number-field-${generated}`;\n  const suffixId = `${id}-suffix`;\n\n  const commit = useCallback(\n    (next: number | null) => {\n      if (next !== value) onChange(next);\n    },\n    [value, onChange],\n  );\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      commit(stepValue(value, event.key === 'ArrowUp' ? 1 : -1, step, { min, max }));\n    } else if (isRefusedKey(event)) {\n      event.preventDefault();\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (value !== null) commit(clamp(value, { min, max }));\n    onBlur?.(event);\n  };\n\n  const describedBy = [callerDescribedBy, suffix != null ? suffixId : undefined].filter(Boolean).join(' ');\n\n  return (\n    <Input\n      ref={ref}\n      {...rest}\n      id={id}\n      type=\"text\"\n      autoComplete=\"off\"\n      value={formatValue(value)}\n      onChange={(event) => commit(parseDigits(event.target.value))}\n      onBlur={handleBlur}\n      aria-describedby={describedBy || undefined}\n      endAdornment={suffix != null ? <span id={suffixId}>{suffix}</span> : undefined}\n      inputProps={{\n        ...inputProps,\n        inputMode: 'numeric',\n        pattern: '[0-9]*',\n        role: 'spinbutton',\n        'aria-valuenow': value ?? undefined,\n        'aria-valuemin': min,\n        'aria-valuemax': max,\n        onKeyDown: handleKeyDown,\n      }}\n    />\n  );\n});\n\nNumberField.displayName = 'NumberField';\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,SAAS,aAAa,aAAa;AAwEL;AAhD9B,IAAM,cAAc,MAAM,WAA+C,SAASA,aACvF,OACA,KACA;AACA,QAAM;AAAA,IACJ;AAAA,IAAO;AAAA,IAAU;AAAA,IAAK;AAAA,IAAK,OAAO;AAAA,IAAG;AAAA,IAAQ;AAAA,IAAW;AAAA,IAAQ;AAAA,IAAY,IAAI;AAAA,IAChF,oBAAoB;AAAA,IAAmB,GAAG;AAAA,EAC5C,IAAI;AACJ,QAAM,YAAY,MAAM;AACxB,QAAM,KAAK,UAAU,gBAAgB,SAAS;AAC9C,QAAM,WAAW,GAAG,EAAE;AAEtB,QAAM,SAAS;AAAA,IACb,CAAC,SAAwB;AACvB,UAAI,SAAS,MAAO,UAAS,IAAI;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,QAAM,gBAAgB,CAAC,UAAiD;AACtE,gBAAY,KAAK;AACjB,QAAI,MAAM,iBAAkB;AAC5B,QAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;AACxD,YAAM,eAAe;AACrB,aAAO,UAAU,OAAO,MAAM,QAAQ,YAAY,IAAI,IAAI,MAAM,EAAE,KAAK,IAAI,CAAC,CAAC;AAAA,IAC/E,WAAW,aAAa,KAAK,GAAG;AAC9B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,aAAa,CAAC,UAA8C;AAChE,QAAI,UAAU,KAAM,QAAO,MAAM,OAAO,EAAE,KAAK,IAAI,CAAC,CAAC;AACrD,aAAS,KAAK;AAAA,EAChB;AAEA,QAAM,cAAc,CAAC,mBAAmB,UAAU,OAAO,WAAW,MAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEvG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL,cAAa;AAAA,MACb,OAAO,YAAY,KAAK;AAAA,MACxB,UAAU,CAAC,UAAU,OAAO,YAAY,MAAM,OAAO,KAAK,CAAC;AAAA,MAC3D,QAAQ;AAAA,MACR,oBAAkB,eAAe;AAAA,MACjC,cAAc,UAAU,OAAO,oBAAC,UAAK,IAAI,UAAW,kBAAO,IAAU;AAAA,MACrE,YAAY;AAAA,QACV,GAAG;AAAA,QACH,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,iBAAiB,SAAS;AAAA,QAC1B,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,WAAW;AAAA,MACb;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,YAAY,cAAc;","names":["NumberField"]}

package/dist/{chunk-CZPU5TW3.js → chunk-RFZU5BTG.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-6VP2L3DJ.js";
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-ZPIMPOHV.js";
+} from "./chunk-M7E66OSC.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -129,4 +129,4 @@ export {
   cellRailCount,
   ListCardGroup
 };
-//# sourceMappingURL=chunk-CZPU5TW3.js.map
+//# sourceMappingURL=chunk-RFZU5BTG.js.map

package/dist/chunk-RH4QT7YT.js

@@ -0,0 +1,74 @@
+import {
+  PendingSpinner,
+  SaveError,
+  SettingHeader,
+  partTestId
+} from "./chunk-Q6FUSSLK.js";
+import {
+  descriptionStyles
+} from "./chunk-KRR6KK5J.js";
+import {
+  Switch
+} from "./chunk-E3O72LBJ.js";
+import {
+  SR_ONLY_SX
+} from "./chunk-RNCQ5KHQ.js";
+
+// src/components/layout/SettingCard/SettingSwitch.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var useSettingSwitchIds = () => {
+  const base = useId();
+  return {
+    titleId: `${base}-title`,
+    inputId: `${base}-switch`,
+    summaryId: `${base}-summary`,
+    errorId: `${base}-error`
+  };
+};
+var SettingSwitchBlock = ({ title, headingLevel = "h3", icon, summary, copy, disabled, dataTestId, ids, state }) => {
+  const theme = useTheme();
+  const { shown, saving, error, flip } = state;
+  const describedBy = [summary != null ? ids.summaryId : null, error ? ids.errorId : null].filter(Boolean).join(" ");
+  const control = /* @__PURE__ */ jsxs(Box, { sx: { display: "inline-flex", alignItems: "center", gap: 1, flexShrink: 0 }, children: [
+    saving && /* @__PURE__ */ jsx(PendingSpinner, { dataTestId }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        id: ids.inputId,
+        checked: shown,
+        onChange: (event) => void flip(event.target.checked),
+        disabled,
+        error: Boolean(error),
+        "aria-describedby": describedBy || void 0,
+        inputProps: { role: "switch", "aria-busy": saving },
+        dataTestId: partTestId(dataTestId, "switch")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SettingHeader,
+      {
+        titleId: ids.titleId,
+        title,
+        headingLevel,
+        icon,
+        labelFor: ids.inputId,
+        trailing: control,
+        dataTestId
+      }
+    ),
+    summary != null && /* @__PURE__ */ jsx(Box, { component: "p", id: ids.summaryId, sx: descriptionStyles(theme), "data-testid": partTestId(dataTestId, "summary"), children: summary }),
+    /* @__PURE__ */ jsx(SaveError, { id: ids.errorId, message: error, dataTestId }),
+    /* @__PURE__ */ jsx(Box, { role: "status", "aria-live": "polite", sx: SR_ONLY_SX, children: saving ? copy.saving : "" })
+  ] });
+};
+
+export {
+  useSettingSwitchIds,
+  SettingSwitchBlock
+};
+//# sourceMappingURL=chunk-RH4QT7YT.js.map

package/dist/chunk-RH4QT7YT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingCard/SettingSwitch.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useId } from 'react';\n\nimport { Switch } from '../../form/Switch';\nimport { SR_ONLY_SX } from '../../form/Label/Label.styles';\n\nimport { useAsyncSwitch } from './SettingCard.hooks';\nimport { PendingSpinner, SaveError, SettingHeader, partTestId } from './SettingCard.parts';\nimport { descriptionStyles } from './SettingCard.styles';\nimport type { SettingToggleProps } from './SettingCard.types';\n\n/** Everything the switch-driven cards share, minus the surface each draws around it. */\nexport type SettingSwitchBlockProps = Pick<\n  SettingToggleProps,\n  'title' | 'headingLevel' | 'icon' | 'summary' | 'checked' | 'onChange' | 'copy' | 'formatError' | 'dataTestId'\n> & { disabled: boolean };\n\n/** The ids one switch block wires its label, description and failure line with. */\nexport interface SettingSwitchIds {\n  titleId: string;\n  inputId: string;\n  summaryId: string;\n  errorId: string;\n}\n\nexport const useSettingSwitchIds = (): SettingSwitchIds => {\n  const base = useId();\n  return {\n    titleId: `${base}-title`,\n    inputId: `${base}-switch`,\n    summaryId: `${base}-summary`,\n    errorId: `${base}-error`,\n  };\n};\n\n/**\n * Title-as-label, the switch, its explanation and the failure line.\n *\n * The switch is never `disabled` while it saves, for the reason Save is not\n * (`SettingCard.tsx`): a disabled control drops keyboard focus. It says\n * `aria-busy` instead, ignores flips until the save settles (see\n * `useAsyncSwitch`), shows a spinner, and a polite live region says the words.\n */\nexport const SettingSwitchBlock: React.FC<\n  SettingSwitchBlockProps & { ids: SettingSwitchIds; state: ReturnType<typeof useAsyncSwitch> }\n> = ({ title, headingLevel = 'h3', icon, summary, copy, disabled, dataTestId, ids, state }) => {\n  const theme = useTheme();\n  const { shown, saving, error, flip } = state;\n  const describedBy = [summary != null ? ids.summaryId : null, error ? ids.errorId : null]\n    .filter(Boolean)\n    .join(' ');\n\n  const control = (\n    <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>\n      {saving && <PendingSpinner dataTestId={dataTestId} />}\n      <Switch\n        id={ids.inputId}\n        checked={shown}\n        onChange={(event) => void flip(event.target.checked)}\n        disabled={disabled}\n        error={Boolean(error)}\n        aria-describedby={describedBy || undefined}\n        inputProps={{ role: 'switch', 'aria-busy': saving }}\n        dataTestId={partTestId(dataTestId, 'switch')}\n      />\n    </Box>\n  );\n\n  return (\n    <>\n      <SettingHeader\n        titleId={ids.titleId}\n        title={title}\n        headingLevel={headingLevel}\n        icon={icon}\n        labelFor={ids.inputId}\n        trailing={control}\n        dataTestId={dataTestId}\n      />\n      {summary != null && (\n        <Box component=\"p\" id={ids.summaryId} sx={descriptionStyles(theme)} data-testid={partTestId(dataTestId, 'summary')}>\n          {summary}\n        </Box>\n      )}\n      <SaveError id={ids.errorId} message={error} dataTestId={dataTestId} />\n      <Box role=\"status\" aria-live=\"polite\" sx={SR_ONLY_SX}>\n        {saving ? copy.saving : ''}\n      </Box>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AACzB,SAAgB,aAAa;AAoDzB,SAgBA,UAfa,KADb;AA5BG,IAAM,sBAAsB,MAAwB;AACzD,QAAM,OAAO,MAAM;AACnB,SAAO;AAAA,IACL,SAAS,GAAG,IAAI;AAAA,IAChB,SAAS,GAAG,IAAI;AAAA,IAChB,WAAW,GAAG,IAAI;AAAA,IAClB,SAAS,GAAG,IAAI;AAAA,EAClB;AACF;AAUO,IAAM,qBAET,CAAC,EAAE,OAAO,eAAe,MAAM,MAAM,SAAS,MAAM,UAAU,YAAY,KAAK,MAAM,MAAM;AAC7F,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,OAAO,QAAQ,OAAO,KAAK,IAAI;AACvC,QAAM,cAAc,CAAC,WAAW,OAAO,IAAI,YAAY,MAAM,QAAQ,IAAI,UAAU,IAAI,EACpF,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,UACJ,qBAAC,OAAI,IAAI,EAAE,SAAS,eAAe,YAAY,UAAU,KAAK,GAAG,YAAY,EAAE,GAC5E;AAAA,cAAU,oBAAC,kBAAe,YAAwB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,IAAI;AAAA,QACR,SAAS;AAAA,QACT,UAAU,CAAC,UAAU,KAAK,KAAK,MAAM,OAAO,OAAO;AAAA,QACnD;AAAA,QACA,OAAO,QAAQ,KAAK;AAAA,QACpB,oBAAkB,eAAe;AAAA,QACjC,YAAY,EAAE,MAAM,UAAU,aAAa,OAAO;AAAA,QAClD,YAAY,WAAW,YAAY,QAAQ;AAAA;AAAA,IAC7C;AAAA,KACF;AAGF,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,IAAI;AAAA,QACd,UAAU;AAAA,QACV;AAAA;AAAA,IACF;AAAA,IACC,WAAW,QACV,oBAAC,OAAI,WAAU,KAAI,IAAI,IAAI,WAAW,IAAI,kBAAkB,KAAK,GAAG,eAAa,WAAW,YAAY,SAAS,GAC9G,mBACH;AAAA,IAEF,oBAAC,aAAU,IAAI,IAAI,SAAS,SAAS,OAAO,YAAwB;AAAA,IACpE,oBAAC,OAAI,MAAK,UAAS,aAAU,UAAS,IAAI,YACvC,mBAAS,KAAK,SAAS,IAC1B;AAAA,KACF;AAEJ;","names":[]}

package/dist/{chunk-JGV66VUK.js → chunk-RLCMVSJZ.js}

@@ -1,6 +1,6 @@
 import {
   FleetCanvas
-} from "./chunk-B474PL5O.js";
+} from "./chunk-PKFFJAQ6.js";
 import {
   FleetRoster
 } from "./chunk-E6D2Y5EK.js";
@@ -76,4 +76,4 @@ function FleetBody({
 export {
   FleetBody
 };
-//# sourceMappingURL=chunk-JGV66VUK.js.map
+//# sourceMappingURL=chunk-RLCMVSJZ.js.map

package/dist/chunk-RN7UJI7S.js

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

package/dist/chunk-RN7UJI7S.js.map

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

package/dist/{chunk-JB67KPGM.js → chunk-RRO2EOJB.js}

@@ -1,9 +1,9 @@
-import {
-  tileBackground
-} from "./chunk-DRADVLHZ.js";
 import {
   TILE_SIZE
 } from "./chunk-TUBCN4DJ.js";
+import {
+  tileBackground
+} from "./chunk-DRADVLHZ.js";
 
 // src/components/data-display/MapPreview/MapTiles.tsx
 import { alpha, useTheme } from "@mui/material/styles/index.js";
@@ -61,4 +61,4 @@ var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
 export {
   MapTiles
 };
-//# sourceMappingURL=chunk-JB67KPGM.js.map
+//# sourceMappingURL=chunk-RRO2EOJB.js.map

package/dist/{chunk-JJ3VR7WX.js → chunk-RZLWW3KC.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   CategorySelect
-} from "./chunk-57W2C7HY.js";
+} from "./chunk-VOHT6ZX3.js";
 
 // src/components/form/total-form/Fields/CategoryField.tsx
 import { jsx } from "react/jsx-runtime";
@@ -38,4 +38,4 @@ function CategoryField({
 export {
   CategoryField
 };
-//# sourceMappingURL=chunk-JJ3VR7WX.js.map
+//# sourceMappingURL=chunk-RZLWW3KC.js.map

package/dist/{chunk-MZQTHSLN.js → chunk-S7HRED4D.js}

@@ -1,6 +1,6 @@
 import {
   Chart
-} from "./chunk-OH3YGJT5.js";
+} from "./chunk-EMNGIYH6.js";
 import {
   CHART_SEMANTIC_COLORS,
   specToChartProps
@@ -46,4 +46,4 @@ var SpecChart = ({
 export {
   SpecChart
 };
-//# sourceMappingURL=chunk-MZQTHSLN.js.map
+//# sourceMappingURL=chunk-S7HRED4D.js.map

package/dist/{chunk-EXJBPKGW.js → chunk-SHDIZSN5.js}

@@ -1,13 +1,13 @@
+import {
+  HeatmapOverlay,
+  RouteOverlay
+} from "./chunk-KUVOMH5I.js";
 import {
   MapControlBar
 } from "./chunk-5ZT4ZIZB.js";
 import {
   MapSearchBar
 } from "./chunk-J3D34ZBL.js";
-import {
-  HeatmapOverlay,
-  RouteOverlay
-} from "./chunk-KUVOMH5I.js";
 import {
   HEATMAP_VIEWBOX
 } from "./chunk-H2J2MTRE.js";
@@ -57,4 +57,4 @@ var MapLayers = ({ settings, zoom, mapType, search, controls }) => {
 export {
   MapLayers
 };
-//# sourceMappingURL=chunk-EXJBPKGW.js.map
+//# sourceMappingURL=chunk-SHDIZSN5.js.map

package/dist/{chunk-GJQYM3PM.js → chunk-SHQWIDD5.js}

@@ -1,9 +1,9 @@
-import {
-  CalendarDay
-} from "./chunk-YU26GBNX.js";
 import {
   buildDayArgs
 } from "./chunk-E2Y7G4MP.js";
+import {
+  CalendarDay
+} from "./chunk-YU26GBNX.js";
 import {
   isSameDay
 } from "./chunk-TERT6TIS.js";
@@ -40,4 +40,4 @@ var CalendarDayCell = ({
 export {
   CalendarDayCell
 };
-//# sourceMappingURL=chunk-GJQYM3PM.js.map
+//# sourceMappingURL=chunk-SHQWIDD5.js.map

package/dist/{chunk-L6TCIZFR.js → chunk-SUAGBFYJ.js}

@@ -5,7 +5,7 @@ import {
   fadeInScale,
   getColorFromTheme,
   getVariantIcon
-} from "./chunk-WC5XYWTE.js";
+} from "./chunk-QGJBNVC2.js";
 import {
   resolveAlertProps,
   resolveAnnouncement,
@@ -33,7 +33,7 @@ import {
 } from "./chunk-TYJR4GOF.js";
 import {
   px
-} from "./chunk-SONWG2RT.js";
+} from "./chunk-OW4UEIXA.js";
 
 // src/components/data-display/Alert/Alert.tsx
 import Close from "@mui/icons-material/Close";
@@ -286,4 +286,4 @@ export {
   Alert,
   ALERT_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-L6TCIZFR.js.map
+//# sourceMappingURL=chunk-SUAGBFYJ.js.map

package/dist/{chunk-K5V3KCFI.js → chunk-SVBR3GWG.js}

@@ -9,15 +9,15 @@ import {
   DragHandle,
   useDragItem
 } from "./chunk-JCJGJX7V.js";
-import {
-  CARD_ASPECT_RATIOS
-} from "./chunk-LHHAYZ55.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
+import {
+  CARD_ASPECT_RATIOS
+} from "./chunk-LHHAYZ55.js";
 import {
   Checkbox
-} from "./chunk-MGPA6KTM.js";
+} from "./chunk-AMFP64L3.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk-AVI3XHRQ.js";
 import {
   Text
-} from "./chunk-YTYROOLY.js";
+} from "./chunk-D22EGB3T.js";
 
 // src/components/data-display/DataViews/base-card.tsx
 import { useTheme } from "@mui/material/styles/index.js";
@@ -263,4 +263,4 @@ function BaseCard(props) {
 export {
   BaseCard
 };
-//# sourceMappingURL=chunk-K5V3KCFI.js.map
+//# sourceMappingURL=chunk-SVBR3GWG.js.map