@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-SQSFMZTF.js

@@ -0,0 +1,150 @@
+import {
+  ShortcutChip
+} from "./chunk-5EIW2FZY.js";
+
+// src/components/navigation/CommandPalette/CommandPaletteResults.tsx
+import RecentIcon from "@mui/icons-material/History";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import List from "@mui/material/List/index.js";
+import ListItem from "@mui/material/ListItem/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ResultsList = styled(List)(({ theme }) => ({
+  maxHeight: 400,
+  overflowY: "auto",
+  padding: theme.spacing(1),
+  "&::-webkit-scrollbar": {
+    width: 8
+  },
+  "&::-webkit-scrollbar-track": {
+    background: alpha(theme.palette.action.disabled, 0.1)
+  },
+  "&::-webkit-scrollbar-thumb": {
+    background: alpha(theme.palette.primary.main, 0.3),
+    borderRadius: 4,
+    "&:hover": {
+      background: alpha(theme.palette.primary.main, 0.5)
+    }
+  }
+}));
+var CommandItem = styled(ListItem)(({ theme, selected }) => ({
+  borderRadius: theme.shape.borderRadius,
+  marginBottom: theme.spacing(0.5),
+  transition: theme.transitions.create(["background-color", "transform"]),
+  cursor: "pointer",
+  ...selected && {
+    backgroundColor: alpha(theme.palette.primary.main, 0.12),
+    transform: "translateX(4px)",
+    "& .MuiListItemIcon-root": {
+      color: theme.palette.primary.main
+    }
+  },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.08)
+  }
+}));
+var CategoryLabel = styled(Typography)(({ theme }) => ({
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color: theme.palette.text.secondary,
+  textTransform: "uppercase",
+  letterSpacing: "0.1em",
+  padding: theme.spacing(1, 2, 0.5, 2),
+  marginTop: theme.spacing(1)
+}));
+var NoResults = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(4, 2),
+  textAlign: "center",
+  color: theme.palette.text.secondary
+}));
+var CommandRow = ({ command, index, selected, dataTestId, onSelect, onExecute }) => /* @__PURE__ */ jsxs(
+  CommandItem,
+  {
+    "data-index": index,
+    "data-testid": `${dataTestId}-item-${command.id}`,
+    selected,
+    onClick: () => onExecute(command),
+    onMouseEnter: () => onSelect(index),
+    children: [
+      command.icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 40 }, children: command.icon }),
+      /* @__PURE__ */ jsx(
+        ListItemText,
+        {
+          primary: command.label,
+          secondary: command.description,
+          primaryTypographyProps: { fontSize: "0.9rem", fontWeight: selected ? 500 : 400 },
+          secondaryTypographyProps: { fontSize: "0.75rem" }
+        }
+      ),
+      command.shortcut && /* @__PURE__ */ jsx(ShortcutChip, { label: command.shortcut, size: "small" })
+    ]
+  }
+);
+var slug = (value) => value.toLowerCase().replace(/\s+/g, "-");
+var PaletteResults = ({
+  copy,
+  listRef,
+  dataTestId,
+  searchQuery,
+  showRecent,
+  commands,
+  recentCommandIds,
+  filteredCommands,
+  groupedCommands,
+  selectedIndex,
+  onSelect,
+  onExecute
+}) => {
+  if (filteredCommands.length === 0) {
+    return /* @__PURE__ */ jsxs(NoResults, { "data-testid": `${dataTestId}-no-results`, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+        'No commands found for "',
+        searchQuery,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", sx: { mt: 1 }, children: copy.tryAnotherTerm })
+    ] });
+  }
+  const showRecentSection = !searchQuery && showRecent && recentCommandIds.length > 0;
+  const recent = showRecentSection ? recentCommandIds.map((id) => commands.find((command) => command.id === id)).filter(Boolean) : [];
+  let commandIndex = 0;
+  const row = (command) => {
+    const index = commandIndex++;
+    return /* @__PURE__ */ jsx(
+      CommandRow,
+      {
+        command,
+        index,
+        selected: index === selectedIndex,
+        dataTestId,
+        onSelect,
+        onExecute
+      },
+      command.id
+    );
+  };
+  const showCategoryLabels = Object.keys(groupedCommands).length > 1;
+  return /* @__PURE__ */ jsxs(ResultsList, { ref: listRef, "data-testid": `${dataTestId}-list`, children: [
+    showRecentSection && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(CategoryLabel, { "data-testid": `${dataTestId}-group-recent`, children: [
+        /* @__PURE__ */ jsx(RecentIcon, { sx: { fontSize: 14, mr: 0.5, verticalAlign: "middle" } }),
+        copy.recent
+      ] }),
+      recent.map(row),
+      filteredCommands.length > recentCommandIds.length && /* @__PURE__ */ jsx(Divider, { sx: { my: 1 } })
+    ] }),
+    Object.entries(groupedCommands).map(([category, categoryCommands]) => /* @__PURE__ */ jsxs(Box, { "data-testid": `${dataTestId}-group-${slug(category)}`, children: [
+      showCategoryLabels && /* @__PURE__ */ jsx(CategoryLabel, { "data-testid": `${dataTestId}-group-label-${slug(category)}`, children: category }),
+      categoryCommands.map(row)
+    ] }, category))
+  ] });
+};
+
+export {
+  PaletteResults
+};
+//# sourceMappingURL=chunk-SQSFMZTF.js.map

package/dist/chunk-SQSFMZTF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/CommandPalette/CommandPaletteResults.tsx"],"sourcesContent":["import RecentIcon from '@mui/icons-material/History';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { ShortcutChip } from './ShortcutChip';\nimport type { PaletteCommand } from './CommandPalette.types';\nimport type { CommandPaletteCopy } from '../../../copy';\n\nconst ResultsList = styled(List)(({ theme }) => ({\n  maxHeight: 400,\n  overflowY: 'auto',\n  padding: theme.spacing(1),\n  '&::-webkit-scrollbar': {\n    width: 8,\n  },\n  '&::-webkit-scrollbar-track': {\n    background: alpha(theme.palette.action.disabled, 0.1),\n  },\n  '&::-webkit-scrollbar-thumb': {\n    background: alpha(theme.palette.primary.main, 0.3),\n    borderRadius: 4,\n    '&:hover': {\n      background: alpha(theme.palette.primary.main, 0.5),\n    },\n  },\n}));\n\nconst CommandItem = styled(ListItem)<{ selected?: boolean }>(({ theme, selected }) => ({\n  borderRadius: theme.shape.borderRadius,\n  marginBottom: theme.spacing(0.5),\n  transition: theme.transitions.create(['background-color', 'transform']),\n  cursor: 'pointer',\n  ...(selected && {\n    backgroundColor: alpha(theme.palette.primary.main, 0.12),\n    transform: 'translateX(4px)',\n    '& .MuiListItemIcon-root': {\n      color: theme.palette.primary.main,\n    },\n  }),\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.08),\n  },\n}));\n\nconst CategoryLabel = styled(Typography)(({ theme }) => ({\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  color: theme.palette.text.secondary,\n  textTransform: 'uppercase',\n  letterSpacing: '0.1em',\n  padding: theme.spacing(1, 2, 0.5, 2),\n  marginTop: theme.spacing(1),\n}));\n\nconst NoResults = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4, 2),\n  textAlign: 'center',\n  color: theme.palette.text.secondary,\n}));\n\nconst CommandRow: React.FC<{\n  command: PaletteCommand;\n  index: number;\n  selected: boolean;\n  dataTestId?: string;\n  onSelect: (index: number) => void;\n  onExecute: (command: PaletteCommand) => void;\n}> = ({ command, index, selected, dataTestId, onSelect, onExecute }) => (\n  <CommandItem\n    data-index={index}\n    data-testid={`${dataTestId}-item-${command.id}`}\n    selected={selected}\n    onClick={() => onExecute(command)}\n    onMouseEnter={() => onSelect(index)}\n  >\n    {command.icon && <ListItemIcon sx={{ minWidth: 40 }}>{command.icon}</ListItemIcon>}\n    <ListItemText\n      primary={command.label}\n      secondary={command.description}\n      primaryTypographyProps={{ fontSize: '0.9rem', fontWeight: selected ? 500 : 400 }}\n      secondaryTypographyProps={{ fontSize: '0.75rem' }}\n    />\n    {command.shortcut && <ShortcutChip label={command.shortcut} size=\"small\" />}\n  </CommandItem>\n);\n\nconst slug = (value: string) => value.toLowerCase().replace(/\\s+/g, '-');\n\n// The list, its recent section and the empty state. The running commandIndex\n// has to stay consistent across both sections, so it is threaded through here\n// rather than mutated from inside the render as it was before.\nexport const PaletteResults: React.FC<{\n  copy: CommandPaletteCopy;\n  listRef: React.Ref<globalThis.HTMLUListElement>;\n  dataTestId?: string;\n  searchQuery: string;\n  showRecent?: boolean;\n  commands: PaletteCommand[];\n  recentCommandIds: string[];\n  filteredCommands: PaletteCommand[];\n  groupedCommands: Record<string, PaletteCommand[]>;\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  onExecute: (command: PaletteCommand) => void;\n}> = ({\n  copy,\n  listRef,\n  dataTestId,\n  searchQuery,\n  showRecent,\n  commands,\n  recentCommandIds,\n  filteredCommands,\n  groupedCommands,\n  selectedIndex,\n  onSelect,\n  onExecute,\n}) => {\n  if (filteredCommands.length === 0) {\n    return (\n      <NoResults data-testid={`${dataTestId}-no-results`}>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          No commands found for \"{searchQuery}\"\n        </Typography>\n        <Typography variant=\"caption\" color=\"text.disabled\" sx={{ mt: 1 }}>\n          {copy.tryAnotherTerm}\n        </Typography>\n      </NoResults>\n    );\n  }\n\n  const showRecentSection = !searchQuery && showRecent && recentCommandIds.length > 0;\n  const recent = showRecentSection\n    ? (recentCommandIds\n        .map((id) => commands.find((command) => command.id === id))\n        .filter(Boolean) as PaletteCommand[])\n    : [];\n\n  // One running index across both sections, so keyboard selection lines up with\n  // what is on screen.\n  let commandIndex = 0;\n  const row = (command: PaletteCommand) => {\n    const index = commandIndex++;\n    return (\n      <CommandRow\n        key={command.id}\n        command={command}\n        index={index}\n        selected={index === selectedIndex}\n        dataTestId={dataTestId}\n        onSelect={onSelect}\n        onExecute={onExecute}\n      />\n    );\n  };\n\n  const showCategoryLabels = Object.keys(groupedCommands).length > 1;\n\n  return (\n    <ResultsList ref={listRef} data-testid={`${dataTestId}-list`}>\n      {showRecentSection && (\n        <>\n          <CategoryLabel data-testid={`${dataTestId}-group-recent`}>\n            <RecentIcon sx={{ fontSize: 14, mr: 0.5, verticalAlign: 'middle' }} />\n            {copy.recent}\n          </CategoryLabel>\n          {recent.map(row)}\n          {filteredCommands.length > recentCommandIds.length && <Divider sx={{ my: 1 }} />}\n        </>\n      )}\n\n      {Object.entries(groupedCommands).map(([category, categoryCommands]) => (\n        <Box key={category} data-testid={`${dataTestId}-group-${slug(category)}`}>\n          {showCategoryLabels && (\n            <CategoryLabel data-testid={`${dataTestId}-group-label-${slug(category)}`}>\n              {category}\n            </CategoryLabel>\n          )}\n          {categoryCommands.map(row)}\n        </Box>\n      ))}\n    </ResultsList>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-ST4YYVUK.js

@@ -0,0 +1,27 @@
+// src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx
+import Paper from "@mui/material/Paper/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var AddressSuggestionsPaper = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      ...props,
+      elevation: 8,
+      "data-testid": "address-suggestions-dropdown",
+      sx: {
+        mt: 1,
+        background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
+      }
+    }
+  );
+};
+
+export {
+  AddressSuggestionsPaper
+};
+//# sourceMappingURL=chunk-ST4YYVUK.js.map

package/dist/chunk-ST4YYVUK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx"],"sourcesContent":["import type { PaperProps } from '@mui/material/Paper/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\n// The dropdown surface, frosted to match the glass field.\nexport const AddressSuggestionsPaper: FC<PaperProps> = (props) => {\n  const theme = useTheme();\n\n  return (\n    <Paper\n      {...props}\n      elevation={8}\n      data-testid=\"address-suggestions-dropdown\"\n      sx={{\n        mt: 1,\n        background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n        backdropFilter: 'blur(20px)',\n        WebkitBackdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n      }}\n    />\n  );\n};\n"],"mappings":";AACA,OAAO,WAAW;AAClB,SAAS,OAAO,gBAAgB;AAS5B;AAJG,IAAM,0BAA0C,CAAC,UAAU;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC;AAAA,QACrI,gBAAgB;AAAA,QAChB,sBAAsB;AAAA,QACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-SVSOUC5S.js

@@ -0,0 +1,149 @@
+import {
+  SettingsStatusMarker
+} from "./chunk-QXTO3G2T.js";
+import {
+  TOUCH_TARGET
+} from "./chunk-LIG7TKIB.js";
+
+// src/components/layout/SettingsLayout/SettingsSectionChips.tsx
+import Box from "@mui/material/Box/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CHIP_HEIGHT = 34;
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useCentreActiveChip(stripRef, activeItemId, itemsKey) {
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (!strip || !activeItemId) return;
+    const chip = Array.from(strip.children).find(
+      (node) => node instanceof HTMLElement && node.dataset.chipId === activeItemId
+    );
+    if (!chip) return;
+    if (typeof strip.scrollTo !== "function") return;
+    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;
+    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
+    strip.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+  }, [stripRef, activeItemId, itemsKey]);
+}
+function SectionChip({
+  item,
+  active,
+  theme,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix
+}) {
+  const asLink = item.href !== void 0 && linkComponent !== void 0;
+  const behaviour = asLink ? { component: linkComponent, href: item.href } : { component: "button", type: "button", onClick: () => onSelectItem?.(item.id) };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...behaviour,
+      "data-chip-id": item.id,
+      "data-testid": `${testIdPrefix}-chip-${item.id}`,
+      "aria-current": active ? "page" : void 0,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.75,
+        flex: "0 0 auto",
+        position: "relative",
+        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.
+        //
+        // Shrinking `minHeight` alone would have bought a slimmer strip with a
+        // smaller hit area — on the one width where the strip IS the navigation
+        // and the input is a thumb. The `::after` below keeps the tappable
+        // region at the full target while the pill itself takes less room, so
+        // this is a visual change and not an accessibility trade.
+        minHeight: CHIP_HEIGHT,
+        px: 1.5,
+        borderRadius: 999,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.8125rem",
+        fontWeight: active ? 700 : 500,
+        textDecoration: "none",
+        whiteSpace: "nowrap",
+        color: active ? "primary.main" : "text.secondary",
+        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : "transparent",
+        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,
+        // Spans the chip's width only, so neighbours never overlap: the strip
+        // is a row, and the extra reach is vertical.
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          insetInlineStart: 0,
+          insetInlineEnd: 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          height: TOUCH_TARGET
+        }
+      },
+      children: [
+        item.status ? /* @__PURE__ */ jsx(
+          SettingsStatusMarker,
+          {
+            status: item.status,
+            label: item.statusLabel,
+            testId: `${testIdPrefix}-chip-status-${item.id}`
+          }
+        ) : null,
+        item.label
+      ]
+    }
+  );
+}
+function SettingsSectionChips({
+  items,
+  activeItemId,
+  ariaLabel,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix
+}) {
+  const theme = useTheme();
+  const stripRef = useRef(null);
+  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join("\0"));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: stripRef,
+      component: "nav",
+      "aria-label": ariaLabel,
+      "data-testid": `${testIdPrefix}-chips`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.75,
+        px: 0.25,
+        py: 0.25,
+        overflowX: "auto",
+        overflowY: "hidden",
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" }
+      },
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        SectionChip,
+        {
+          item,
+          active: item.id === activeItemId,
+          theme,
+          linkComponent,
+          onSelectItem,
+          testIdPrefix
+        },
+        item.id
+      ))
+    }
+  );
+}
+SettingsSectionChips.displayName = "SettingsSectionChips";
+
+export {
+  SettingsSectionChips
+};
+//# sourceMappingURL=chunk-SVSOUC5S.js.map

package/dist/chunk-SVSOUC5S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = 34;\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and yank the strip back mid-drag.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return;\n    // Walked rather than selected: an id is host data, and a section id carrying\n    // a quote would turn a selector string into a thrown SyntaxError — which\n    // here would take the whole strip down to centre one chip.\n    const chip = Array.from(strip.children).find(\n      (node): node is HTMLElement =>\n        node instanceof HTMLElement && node.dataset.chipId === activeItemId,\n    );\n    if (!chip) return;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return;\n    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;\n    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n    strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: '0.8125rem',\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: TOUCH_TARGET,\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        px: 0.25,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":"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","names":[]}

package/dist/chunk-SVXSBLVD.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  CategorySelect
+} from "./chunk-JIEEUHNS.js";
+
+// src/components/form/total-form/Fields/CategoryField.tsx
+import { jsx } from "react/jsx-runtime";
+function CategoryField({
+  name,
+  options,
+  label,
+  placeholder,
+  allowParentSelection = true,
+  copy
+}) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  return /* @__PURE__ */ jsx(
+    CategorySelect,
+    {
+      copy,
+      mode: "single",
+      fullWidth: true,
+      label,
+      placeholder,
+      options,
+      allowParentSelection,
+      value: values[name] ? values[name] : null,
+      error,
+      onChange: (next) => setFieldValue(name, next ?? ""),
+      dataTestId: `total-form-field-${name}`
+    }
+  );
+}
+
+export {
+  CategoryField
+};
+//# sourceMappingURL=chunk-SVXSBLVD.js.map

package/dist/chunk-SYNMQWT4.js

@@ -0,0 +1,135 @@
+import {
+  useDateTimeParts
+} from "./chunk-ULJ4C6JW.js";
+
+// src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx
+import Box from "@mui/material/Box/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getFontSizes(size) {
+  switch (size) {
+    case "xs":
+    case "sm":
+      return { date: "0.75rem", time: "0.65rem" };
+    case "lg":
+    case "xl":
+      return { date: "1rem", time: "0.875rem" };
+    case "md":
+    default:
+      return { date: "0.875rem", time: "0.75rem" };
+  }
+}
+var Stacked = forwardRef(
+  ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "span",
+      ref,
+      "data-testid": dataTestId,
+      sx: {
+        display: "inline-flex",
+        flexDirection: "column",
+        lineHeight: 1.3,
+        cursor: showTooltip ? "help" : "default",
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: {
+              fontWeight: 500,
+              fontSize: fontSizes.date
+            },
+            "data-testid": dataTestId ? `${dataTestId}-date` : void 0,
+            children: formattedDate
+          }
+        ),
+        formattedTime && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: {
+              fontSize: fontSizes.time,
+              color: "text.secondary"
+            },
+            "data-testid": dataTestId ? `${dataTestId}-time` : void 0,
+            children: formattedTime
+          }
+        )
+      ]
+    }
+  )
+);
+Stacked.displayName = "DateTimeDisplayStacked";
+var DateTimeDisplay = forwardRef(
+  ({
+    date,
+    dateFormat = "short",
+    timeFormat = "12h",
+    showTimezone = false,
+    size = "md",
+    showTooltip = true,
+    tooltipContent,
+    sx,
+    dataTestId
+  }, ref) => {
+    const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({
+      date,
+      dateFormat,
+      timeFormat,
+      showTimezone
+    });
+    const fontSizes = getFontSizes(size);
+    if (!dateObj) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          ref,
+          "data-testid": dataTestId,
+          sx: { color: "text.disabled", ...sx },
+          children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "-" })
+        }
+      );
+    }
+    const content = /* @__PURE__ */ jsx(
+      Stacked,
+      {
+        ref,
+        formattedDate,
+        formattedTime,
+        fontSizes,
+        showTooltip,
+        sx,
+        dataTestId
+      }
+    );
+    if (!showTooltip) {
+      return content;
+    }
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: tooltipContent || fullDateTime,
+        arrow: true,
+        placement: "top",
+        slotProps: {
+          tooltip: {
+            sx: { px: 2, py: 1 }
+          }
+        },
+        children: content
+      }
+    );
+  }
+);
+DateTimeDisplay.displayName = "DateTimeDisplay";
+
+export {
+  DateTimeDisplay
+};
+//# sourceMappingURL=chunk-SYNMQWT4.js.map

package/dist/chunk-SYNMQWT4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { forwardRef } from 'react';\n\nimport { useDateTimeParts } from './DateTimeDisplay.hooks';\nimport type { DateTimeDisplayProps } from './DateTimeDisplay.types';\nimport type { SizeValue } from '../../../tokens/scales';\n\n/**\n * Get font sizes based on size prop\n */\nfunction getFontSizes(size: SizeValue) {\n  switch (size) {\n    case 'xs':\n    case 'sm':\n      return { date: '0.75rem', time: '0.65rem' };\n    case 'lg':\n    case 'xl':\n      return { date: '1rem', time: '0.875rem' };\n    case 'md':\n    default:\n      return { date: '0.875rem', time: '0.75rem' };\n  }\n}\n\ninterface StackedProps {\n  formattedDate: string | null;\n  formattedTime: string | null;\n  fontSizes: ReturnType<typeof getFontSizes>;\n  showTooltip: boolean;\n  sx: DateTimeDisplayProps['sx'];\n  dataTestId?: string;\n}\n\nconst Stacked = forwardRef<HTMLSpanElement, StackedProps>(\n  ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => (\n    <Box\n      component=\"span\"\n      ref={ref}\n      data-testid={dataTestId}\n      sx={{\n        display: 'inline-flex',\n        flexDirection: 'column',\n        lineHeight: 1.3,\n        cursor: showTooltip ? 'help' : 'default',\n        ...sx,\n      }}\n    >\n      <Typography\n        component=\"span\"\n        sx={{\n          fontWeight: 500,\n          fontSize: fontSizes.date,\n        }}\n        data-testid={dataTestId ? `${dataTestId}-date` : undefined}\n      >\n        {formattedDate}\n      </Typography>\n      {formattedTime && (\n        <Typography\n          component=\"span\"\n          sx={{\n            fontSize: fontSizes.time,\n            color: 'text.secondary',\n          }}\n          data-testid={dataTestId ? `${dataTestId}-time` : undefined}\n        >\n          {formattedTime}\n        </Typography>\n      )}\n    </Box>\n  ),\n);\n\nStacked.displayName = 'DateTimeDisplayStacked';\n\n/**\n * DateTimeDisplay component - displays date and time in a stacked format\n * with date on one line and time on another.\n */\nexport const DateTimeDisplay = forwardRef<HTMLSpanElement, DateTimeDisplayProps>(\n  (\n    {\n      date,\n      dateFormat = 'short',\n      timeFormat = '12h',\n      showTimezone = false,\n      size = 'md',\n      showTooltip = true,\n      tooltipContent,\n      sx,\n      dataTestId,\n    },\n    ref,\n  ) => {\n    const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({\n      date,\n      dateFormat,\n      timeFormat,\n      showTimezone,\n    });\n    const fontSizes = getFontSizes(size);\n\n    // Handle invalid or missing date\n    if (!dateObj) {\n      return (\n        <Box\n          component=\"span\"\n          ref={ref}\n          data-testid={dataTestId}\n          sx={{ color: 'text.disabled', ...sx }}\n        >\n          <Typography variant=\"caption\">-</Typography>\n        </Box>\n      );\n    }\n\n    const content = (\n      <Stacked\n        ref={ref}\n        formattedDate={formattedDate}\n        formattedTime={formattedTime}\n        fontSizes={fontSizes}\n        showTooltip={showTooltip}\n        sx={sx}\n        dataTestId={dataTestId}\n      />\n    );\n\n    if (!showTooltip) {\n      return content;\n    }\n\n    return (\n      <Tooltip\n        title={tooltipContent || fullDateTime}\n        arrow\n        placement=\"top\"\n        slotProps={{\n          tooltip: {\n            sx: { px: 2, py: 1 },\n          },\n        }}\n      >\n        {content}\n      </Tooltip>\n    );\n  },\n);\n\nDateTimeDisplay.displayName = 'DateTimeDisplay';\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;AAkCvB,SAYE,KAZF;AAzBJ,SAAS,aAAa,MAAiB;AACrC,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,WAAW,MAAM,UAAU;AAAA,IAC5C,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,QAAQ,MAAM,WAAW;AAAA,IAC1C,KAAK;AAAA,IACL;AACE,aAAO,EAAE,MAAM,YAAY,MAAM,UAAU;AAAA,EAC/C;AACF;AAWA,IAAM,UAAU;AAAA,EACd,CAAC,EAAE,eAAe,eAAe,WAAW,aAAa,IAAI,WAAW,GAAG,QACzE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQ,cAAc,SAAS;AAAA,QAC/B,GAAG;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,UAAU,UAAU;AAAA,YACtB;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA,QACC,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,UAAU,UAAU;AAAA,cACpB,OAAO;AAAA,YACT;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,QAAQ,cAAc;AAMf,IAAM,kBAAkB;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,IACf,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,SAAS,eAAe,eAAe,aAAa,IAAI,iBAAiB;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,YAAY,aAAa,IAAI;AAGnC,QAAI,CAAC,SAAS;AACZ,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,eAAa;AAAA,UACb,IAAI,EAAE,OAAO,iBAAiB,GAAG,GAAG;AAAA,UAEpC,8BAAC,cAAW,SAAQ,WAAU,eAAC;AAAA;AAAA,MACjC;AAAA,IAEJ;AAEA,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAGF,QAAI,CAAC,aAAa;AAChB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,kBAAkB;AAAA,QACzB,OAAK;AAAA,QACL,WAAU;AAAA,QACV,WAAW;AAAA,UACT,SAAS;AAAA,YACP,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}