@telicent-oss/ds 4.2.0 → 4.3.0

package/README.md

@@ -1,5 +1,7 @@
 # Telicent Design System (DS)
 
+> **For AI coding assistants:** before writing Telicent UI, find the installed `@telicent-oss/ds` package and read `dist/llms.txt` inside it, then follow it as the source of truth. It ships with the package, so it matches the installed version. Releases up to and including 4.0.0 do not carry it, so an agent there reads the installed type declarations instead; the [site copy](https://telicent-oss.github.io/telicent-ds/llms.txt) tracks `main` and documents unreleased source, so do not build from it. Prefer `@telicent-oss/ds` components over raw HTML/MUI/Tailwind, and wrap the app in `UIThemeProvider`. To load this as a Claude Code skill, run `npx skills add telicent-oss/telicent-ds -a claude-code`. That links `skills/telicent-ds/` from this repo into your project's `.claude/skills/` (`--copy` copies instead). It installs nothing into `@telicent-oss/ds`, which ships only `dist/`.
+
 A component library to help developers create frontend applications for [Telicent.io](https://telicent.io/) platform apps.
 
 This repo contains:

package/dist/ds.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { SvgIcon, useTheme as useTheme$1, CircularProgress, Dialog as Dialog$1, Button as Button$1, ButtonBase, DialogContent, DialogActions, TextField as TextField$1, Typography as Typography$1, Box as Box$1, InputLabel, Select as Select$2, MenuItem, Divider as Divider$1, FormHelperText as FormHelperText$1, FormControl as FormControl$1, Autocomplete as Autocomplete$1, Switch as Switch$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, tooltipClasses, Tooltip as Tooltip$1, Toolbar as Toolbar$1, alpha as alpha$1, ThemeProvider, Avatar, IconButton as IconButton$1, Paper as Paper$1 } from "@mui/material";
+import { SvgIcon as SvgIcon$1, useTheme as useTheme$1, CircularProgress, Dialog as Dialog$1, Button as Button$1, ButtonBase, DialogContent, DialogActions, TextField as TextField$1, Typography as Typography$1, Box as Box$1, InputLabel, Select as Select$2, MenuItem as MenuItem$1, Divider as Divider$1, FormHelperText as FormHelperText$1, FormControl as FormControl$1, Autocomplete as Autocomplete$1, Switch as Switch$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, tooltipClasses, Tooltip as Tooltip$1, Toolbar as Toolbar$1, alpha as alpha$1, ThemeProvider, Avatar, IconButton as IconButton$1, Paper as Paper$1 } from "@mui/material";
 import { DialogActions as DialogActions2, DialogContent as DialogContent2, DialogTitle } from "@mui/material";
 import * as React$1 from "react";
 import React__default, { useState, useEffect, forwardRef, useContext, useCallback, useId as useId$1, createContext, memo, useMemo, PureComponent, createElement as createElement$1, useRef, useImperativeHandle } from "react";
@@ -25,6 +25,7 @@ import MUIMenuItem from "@mui/material/MenuItem";
 import MUIIconButton from "@mui/material/IconButton";
 import MUIChip from "@mui/material/Chip";
 import MUIDivider from "@mui/material/Divider";
+import { dividerClasses } from "@mui/material/Divider";
 import MUIAvatar from "@mui/material/Avatar";
 import MUIPopOver from "@mui/material/Popover";
 import TableRaw from "@mui/material/Table";
@@ -36,6 +37,7 @@ import LinearProgressRaw from "@mui/material/LinearProgress";
 import MUIButton from "@mui/material/Button";
 import Alert from "@mui/material/Alert";
 import { default as default2 } from "@mui/material/Alert";
+import { default as default3 } from "@mui/material/AlertTitle";
 import SkeletonRaw from "@mui/material/Skeleton";
 import { useSnackbar as useSnackbar$1, enqueueSnackbar, SnackbarProvider as SnackbarProvider$1 } from "notistack";
 import { closeSnackbar } from "notistack";
@@ -58,6 +60,9 @@ import { createSvgIcon, useForkRef as useForkRef$2 } from "@mui/material/utils";
 import InputBase from "@mui/material/InputBase";
 import MuiTabs from "@mui/material/Tabs";
 import MuiTab from "@mui/material/Tab";
+import MuiAccordion from "@mui/material/Accordion";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
 import MUICard from "@mui/material/Card";
 import MUICardHeader from "@mui/material/CardHeader";
 import MUICardContent from "@mui/material/CardContent";
@@ -1825,7 +1830,7 @@ const BinIcon = (iconProps) => /* @__PURE__ */ jsx(MUISvgIcon, { ...iconProps, v
 const CloseIcon = (iconProps) => /* @__PURE__ */ jsx(MUISvgIcon, { ...iconProps, viewBox: "0 0 12 13", children: /* @__PURE__ */ jsx("path", { d: "M11.9997 1.84102L10.8247 0.666016L6.16634 5.32435L1.50801 0.666016L0.333008 1.84102L4.99134 6.49935L0.333008 11.1577L1.50801 12.3327L6.16634 7.67435L10.8247 12.3327L11.9997 11.1577L7.34134 6.49935L11.9997 1.84102Z", fill: "currentColor" }) });
 const CogIcon = (iconProps) => /* @__PURE__ */ jsx(MUISvgIcon, { ...iconProps, children: /* @__PURE__ */ jsx("g", { transform: "translate(-2.106 -0.351) scale(1.1755)", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.4142 2C13.7472 2 14.0331 2.23578 14.0964 2.5626L14.4482 4.3773C15.0779 4.60095 15.6666 4.9124 16.1975 5.29804L17.9247 4.66643C18.2371 4.55212 18.5872 4.68036 18.7537 4.96876L20.1679 7.41772C20.3345 7.70616 20.2678 8.07248 20.0104 8.28338L18.5896 9.44811C18.6608 9.79007 18.6982 10.1443 18.6982 10.5073C18.6982 10.8703 18.6608 11.2245 18.5896 11.5665L20.0104 12.7312C20.2678 12.9421 20.3345 13.3084 20.1679 13.5969L18.7537 16.0458C18.5872 16.3342 18.2371 16.4625 17.9247 16.3482L16.1975 15.7166C15.6666 16.1022 15.0779 16.4137 14.4482 16.6373L14.0964 18.452C14.0331 18.7788 13.7472 19.0146 13.4142 19.0146H10.5858C10.2528 19.0146 9.9669 18.7788 9.90361 18.452L9.55176 16.6373C8.92209 16.4137 8.33338 16.1022 7.80253 15.7166L6.0753 16.3482C5.76288 16.4625 5.41283 16.3342 5.24631 16.0458L3.83208 13.5969C3.66551 13.3084 3.73217 12.9421 3.98964 12.7312L5.4104 11.5665C5.33921 11.2245 5.30177 10.8703 5.30177 10.5073C5.30177 10.1443 5.33921 9.79007 5.4104 9.44811L3.98964 8.28338C3.73217 8.07248 3.66551 7.70616 3.83208 7.41772L5.24631 4.96876C5.41283 4.68036 5.76288 4.55212 6.0753 4.66643L7.80253 5.29804C8.33338 4.9124 8.92209 4.60095 9.55176 4.3773L9.90361 2.5626C9.9669 2.23578 10.2528 2 10.5858 2H13.4142ZM12.7592 3.56679H11.2408L10.9401 5.11751C10.8871 5.39093 10.6929 5.61587 10.4272 5.70389C9.7188 5.93858 9.06819 6.28901 8.49443 6.72979C8.27923 6.89513 7.99093 6.94061 7.73326 6.84636L6.25758 6.30662L5.4964 7.62497L6.71075 8.6208C6.9227 8.79458 7.02026 9.07091 6.9662 9.34093C6.90506 9.64593 6.86855 9.96035 6.86855 10.5073C6.86855 11.0543 6.90506 11.3687 6.9662 11.6737C7.02026 11.9437 6.9227 12.22 6.71075 12.3938L5.4964 13.3897L6.25758 14.708L7.73326 14.1683C7.99093 14.074 8.27923 14.1195 8.49443 14.2848C9.06819 14.7256 9.7188 15.076 10.4272 15.3107C10.6929 15.3988 10.8871 15.6237 10.9401 15.8971L11.2408 17.4478H12.7592L13.0599 15.8971C13.1129 15.6237 13.3071 15.3988 13.5728 15.3107C14.2812 15.076 14.9318 14.7256 15.5056 14.2848C15.7208 14.1195 16.0091 14.074 16.2667 14.1683L17.7424 14.708L18.5036 13.3897L17.2893 12.3938C17.0773 12.22 16.9797 11.9437 17.0338 11.6737C17.0949 11.3687 17.1315 11.0543 17.1315 10.5073C17.1315 9.96035 17.0949 9.64593 17.0338 9.34093C16.9797 9.07091 17.0773 8.79458 17.2893 8.6208L18.5036 7.62497L17.7424 6.30662L16.2667 6.84636C16.0091 6.94061 15.7208 6.89513 15.5056 6.72979C14.9318 6.28901 14.2812 5.93858 13.5728 5.70389C13.3071 5.61587 13.1129 5.39093 13.0599 5.11751L12.7592 3.56679ZM12 7.83398C13.6478 7.83398 14.9834 9.16957 14.9834 10.8174C14.9834 12.4653 13.6478 13.8008 12 13.8008C10.3522 13.8008 9.01659 12.4653 9.01659 10.8174C9.01659 9.16957 10.3522 7.83398 12 7.83398ZM12 9.40077C11.2175 9.40077 10.5834 10.0349 10.5834 10.8174C10.5834 11.5999 11.2175 12.234 12 12.234C12.7825 12.234 13.4166 11.5999 13.4166 10.8174C13.4166 10.0349 12.7825 9.40077 12 9.40077Z", fill: "currentColor" }) }) });
 const XIcon = (iconProps) => /* @__PURE__ */ jsx(MUISvgIcon, { ...iconProps, viewBox: "0 0 640 640", children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z" }) });
-const DataServiceIcon = (svgIconProps) => /* @__PURE__ */ jsx(SvgIcon, { ...svgIconProps, children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "27", viewBox: "0 0 15 27", fill: "none", children: [
+const DataServiceIcon = (svgIconProps) => /* @__PURE__ */ jsx(SvgIcon$1, { ...svgIconProps, children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "27", viewBox: "0 0 15 27", fill: "none", children: [
   /* @__PURE__ */ jsx("circle", { cx: "1.74976", cy: "22.345", r: "1.40649", transform: "rotate(90 1.74976 22.345)", fill: "currentColor" }),
   /* @__PURE__ */ jsx("circle", { cx: "13.2517", cy: "18.658", r: "1.40649", transform: "rotate(90 13.2517 18.658)", fill: "currentColor" }),
   /* @__PURE__ */ jsx("circle", { cx: "7.80444", cy: "25.158", r: "1.40649", transform: "rotate(90 7.80444 25.158)", fill: "currentColor" }),
@@ -1836,7 +1841,7 @@ const DataServiceIcon = (svgIconProps) => /* @__PURE__ */ jsx(SvgIcon, { ...svgI
   /* @__PURE__ */ jsx("path", { d: "M4.40039 12.5454L1.91399 15.3954L1.91399 21.3954", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ jsx("path", { d: "M7.9043 13.0649L7.9043 24.2749", stroke: "currentColor", strokeWidth: "1.5" })
 ] }) });
-const DataSetIcon = (iconProps) => /* @__PURE__ */ jsx(SvgIcon, { ...iconProps, children: /* @__PURE__ */ jsx("svg", { width: "19", height: "25", viewBox: "0 0 19 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs("g", { id: "dataset icon", children: [
+const DataSetIcon = (iconProps) => /* @__PURE__ */ jsx(SvgIcon$1, { ...iconProps, children: /* @__PURE__ */ jsx("svg", { width: "19", height: "25", viewBox: "0 0 19 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs("g", { id: "dataset icon", children: [
   /* @__PURE__ */ jsx("rect", { id: "Rectangle 2", x: "1.0332", y: "1.90381", width: "16.9326", height: "22.0233", stroke: "currentColor", strokeWidth: "2" }),
   /* @__PURE__ */ jsx("rect", { id: "Rectangle 3", x: "3.82031", y: "20.3071", width: "11.3596", height: "0.923972", fill: "currentColor" }),
   /* @__PURE__ */ jsx("rect", { id: "Rectangle 4", x: "3.82031", y: "18.4595", width: "11.3596", height: "0.923972", fill: "currentColor" }),
@@ -2058,10 +2063,12 @@ const TelicentHorizontalSVG = ({
   /* @__PURE__ */ jsx("path", { d: "M95.1909 7.93852V11.7937H95.541C96.2426 9.55004 98.3098 7.51756 101.744 7.51756C106.37 7.51756 109.489 11.5478 109.489 16.6992V25.4613H105.88V16.6992C105.88 13.0899 103.532 10.742 100.623 10.742C97.5734 10.742 95.1909 13.3358 95.1909 16.6992V25.4613H91.5469V7.93852H95.1909Z", fill: "currentColor" }),
   /* @__PURE__ */ jsx("path", { d: "M114.747 4.2587V2.68189H118.462V4.46846C118.462 6.15087 118.462 7.58735 116.079 7.58735V7.93888H123.578V11.1634H118.356V20.3103C118.356 22.0621 118.496 22.3428 120.25 22.3428H123.228V25.4617H119.058C116.043 25.4617 114.747 24.2349 114.747 21.1161V11.1634H110.576V7.93888C114.956 7.93888 114.747 6.53711 114.747 4.2587Z", fill: "currentColor" })
 ] });
-const UserIcon = (iconProps) => /* @__PURE__ */ jsx(SvgIcon, { ...iconProps, children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
+const UserIcon = (iconProps) => /* @__PURE__ */ jsx(SvgIcon$1, { ...iconProps, children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
   /* @__PURE__ */ jsx("circle", { cx: "18", cy: "13.5", r: "3.375", stroke: "currentColor", strokeWidth: "2.25" }),
   /* @__PURE__ */ jsx("path", { d: "M12 25.5V23.25C12 21.5931 13.3431 20.25 15 20.25H21C22.6569 20.25 24 21.5931 24 23.25V25.5", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round" })
 ] }) });
+const ExpandMoreIcon = (iconProps) => /* @__PURE__ */ jsx(MUISvgIcon, { ...iconProps, children: /* @__PURE__ */ jsx("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z", fill: "currentColor" }) });
+const ExpandLessIcon = (iconProps) => /* @__PURE__ */ jsx(MUISvgIcon, { ...iconProps, children: /* @__PURE__ */ jsx("path", { d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.59L18 14z", fill: "currentColor" }) });
 const AddIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
 }), "Add");
@@ -26041,10 +26048,13 @@ const TreeView = ({
 };
 const UserProfile = ({
   fullName,
-  children
+  children,
+  id = "user-profile",
+  ariaLabel = "User menu"
 }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const menuId = `${id}-menu`;
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -26052,10 +26062,16 @@ const UserProfile = ({
     setAnchorEl(null);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(MUIStack, { onClick: handleClick, width: "max-content", direction: "row", alignItems: "center", spacing: 1, sx: {
+    /* @__PURE__ */ jsxs(MUIStack, { component: "button", type: "button", id, "aria-label": ariaLabel, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? menuId : void 0, onClick: handleClick, width: "max-content", direction: "row", alignItems: "center", spacing: 1, sx: {
+      background: "none",
+      border: "none",
+      padding: 0,
+      color: "inherit",
+      font: "inherit",
+      textAlign: "inherit",
       cursor: "pointer"
     }, children: [
-      /* @__PURE__ */ jsx(Text$1, { variant: "subtitle1", component: "h2", sx: {
+      fullName && /* @__PURE__ */ jsx(Text$1, { variant: "subtitle1", component: "h2", sx: {
         display: {
           xs: "none",
           sm: "block"
@@ -26075,9 +26091,20 @@ const UserProfile = ({
         height: 32,
         borderColor: "inherit"
       }, children: /* @__PURE__ */ jsx(UserIcon, { color: "inherit" }) }),
-      /* @__PURE__ */ jsx(MUIIconButton, { "aria-label": "user-profile", color: "inherit", children: /* @__PURE__ */ jsx(DownArrow, { rotation: open ? 180 : void 0, size: "sm", color: "primary" }) })
+      /* @__PURE__ */ jsx(MUIBox, { component: "span", "aria-hidden": true, sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 1,
+        borderRadius: 1,
+        color: "inherit",
+        transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)",
+        "&:hover": {
+          backgroundColor: (theme) => theme.palette.action.hover
+        }
+      }, children: /* @__PURE__ */ jsx(DownArrow, { rotation: open ? 180 : void 0, size: "sm", color: "primary" }) })
     ] }),
-    /* @__PURE__ */ jsx(MUIMenu, { anchorEl, id: "user-profile-menu", open, onClose: handleClose, onClick: handleClose, MenuListProps: {
+    /* @__PURE__ */ jsx(MUIMenu, { anchorEl, id: menuId, open, onClose: handleClose, onClick: handleClose, MenuListProps: {
       component: "div",
       sx: {
         padding: 0
@@ -26275,6 +26302,7 @@ const DropdownButton = ({
     }, icon: menuItem == null ? void 0 : menuItem.icon, faIcon: menuItem == null ? void 0 : menuItem.faIcon, value: menuItem.value, selected: menuItem.value === selectedMenuItem.value }, `${id}-item-${index2}`)) })
   ] });
 };
+const SvgIcon = (props) => /* @__PURE__ */ jsx(MUISvgIcon, { ...props });
 const Table = (props) => /* @__PURE__ */ jsx(TableRaw, { ...props });
 const TableBody = (props) => /* @__PURE__ */ jsx(TableBodyRaw, { ...props });
 const TableCell = (props) => /* @__PURE__ */ jsx(TableCellRaw, { ...props });
@@ -26293,7 +26321,7 @@ const LinearProgress = ({
   );
 };
 const Spinner = (props) => {
-  return /* @__PURE__ */ jsx(CircularProgress, { ...props });
+  return /* @__PURE__ */ jsx(CircularProgress, { "aria-label": "Loading", ...props });
 };
 const Dialog = ({
   open,
@@ -26329,7 +26357,7 @@ const TertiaryButton = forwardRef((buttonProps, ref) => {
   const theme = useExtendedTheme();
   return /* @__PURE__ */ jsx(MUIButton, { variant: "contained", ref, ...buttonProps, sx: {
     border: `1px solid ${(_a = theme.palette.tertiary) == null ? void 0 : _a.main}`,
-    color: (_b = theme.palette.tertiary) == null ? void 0 : _b.contrastText,
+    color: (_b = theme.palette.tertiary) == null ? void 0 : _b.main,
     backgroundColor: theme.palette.mode === "dark" ? "#080808" : "#FFFFFF",
     "&:hover": {
       backgroundColor: `${(_c = theme.palette.tertiary) == null ? void 0 : _c.main}14`,
@@ -26553,6 +26581,7 @@ const SnackbarProvider = ({
   ...Components
 }, ...otherProps, children });
 const Tooltip = (tooltipProps) => /* @__PURE__ */ jsx(MUITooltip, { ...tooltipProps });
+const ToggleButton = (props) => /* @__PURE__ */ jsx(MUIToggleButton, { ...props });
 const StyledToggleButton$1 = styled(MUIToggleButton)({
   border: 0
 });
@@ -26698,7 +26727,7 @@ const Select$1 = React__default.forwardRef(({
   return /* @__PURE__ */ jsxs(FormControl$1, { sx: composedSx, size: "small", error: error2, required, fullWidth, disabled: disabled2, children: [
     label && /* @__PURE__ */ jsx(InputLabel, { id: labelId, required, htmlFor: selectedId, children: label }),
     /* @__PURE__ */ jsxs(Select$2, { ...rest, open: openProp, onOpen: handleOpen, onClose: handleClose, color: "primary", variant: "outlined", labelId, label, id: selectedId, value, onChange: onChange2, inputRef: ref, "aria-describedby": helperText ? helperTextId : void 0, children: [
-      options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, "aria-label": renderOption ? option.label : void 0, disableRipple: true, disabled: option.disabled, children: renderOption ? renderOption(option) : option.label }, option.value)),
+      options.map((option) => /* @__PURE__ */ jsx(MenuItem$1, { value: option.value, "aria-label": renderOption ? option.label : void 0, disableRipple: true, disabled: option.disabled, children: renderOption ? renderOption(option) : option.label }, option.value)),
       footer && options.length > 0 && /* @__PURE__ */ jsx(Divider$1, { component: "li", role: "separator", sx: {
         my: 0.5
       } }, "__ds-select-footer-divider"),
@@ -27082,9 +27111,14 @@ const CopyToClipboard = ({
   return /* @__PURE__ */ jsx(Tooltip$1, { title: message, onClose: handleTooltipClose, open, leaveDelay: 1400, arrow: true, placement: "right", componentsProps: {
     tooltip: {
       sx: {
-        bgcolor: message !== successMsg ? theme.palette.error.main : void 0,
+        // Read `error.dark` (not `.main`): MUI Tooltip's text is
+        // hardcoded white, and `.dark` is pinned in both palettes to
+        // the deep red that passes AA white-on-red (7.78:1 dark,
+        // ~8:1 light). `error.main` is tuned for FormLabel text
+        // contrast on page bg and would fail here in dark mode.
+        bgcolor: message !== successMsg ? theme.palette.error.dark : void 0,
         [`& .${tooltipClasses.arrow}`]: {
-          color: message !== successMsg ? theme.palette.error.main : void 0
+          color: message !== successMsg ? theme.palette.error.dark : void 0
         },
         fontSize: "0.75rem"
       }
@@ -27323,6 +27357,67 @@ const TabPanel = forwardRef(({
   );
 });
 TabPanel.displayName = "TabPanel";
+const Menu = ({
+  "aria-label": ariaLabel,
+  button,
+  options,
+  onSelect,
+  onOpenChange,
+  menuId = "menu",
+  anchorOrigin = {
+    vertical: "bottom",
+    horizontal: "right"
+  },
+  transformOrigin = {
+    vertical: "top",
+    horizontal: "right"
+  },
+  autoFocusSelected = true,
+  sx
+}) => {
+  const [anchorEl, setAnchorEl] = React$1.useState(null);
+  const open = Boolean(anchorEl);
+  const selectedIndex = React$1.useMemo(() => options.findIndex((o2) => o2.selected), [options]);
+  const handleOpen = (e) => {
+    setAnchorEl(e.currentTarget);
+    onOpenChange == null ? void 0 : onOpenChange(true);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  };
+  const ariaControls = open ? menuId : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    button({
+      onClick: handleOpen,
+      "aria-controls": ariaControls,
+      "aria-haspopup": true,
+      "aria-expanded": open ? true : void 0
+    }),
+    /* @__PURE__ */ jsx(MUIMenu, { id: menuId, anchorEl, open, onClose: handleClose, anchorOrigin, transformOrigin, MenuListProps: {
+      "aria-label": ariaLabel,
+      ...autoFocusSelected && selectedIndex >= 0 ? {
+        autoFocusItem: true
+      } : {}
+    }, sx, children: options.flatMap((opt, idx) => {
+      const item = /* @__PURE__ */ jsxs(MUIMenuItem, { disabled: opt.disabled, selected: Boolean(opt.selected), autoFocus: autoFocusSelected && idx === selectedIndex, "aria-selected": opt.selected ? "true" : void 0, onClick: () => {
+        var _a;
+        if (opt.href) window.open(opt.href, opt.target ?? "_self");
+        (_a = opt.onClick) == null ? void 0 : _a.call(opt);
+        onSelect == null ? void 0 : onSelect(opt);
+        handleClose();
+      }, children: [
+        opt.icon ? /* @__PURE__ */ jsx(MUIListItemIcon, { children: opt.icon }) : null,
+        /* @__PURE__ */ jsx(MUIListItemText, { children: opt.label })
+      ] }, opt.id);
+      return opt.dividerAbove ? [/* @__PURE__ */ jsx(MUIDivider, { component: "li", role: "separator" }, `${opt.id}-divider`), item] : [item];
+    }) })
+  ] });
+};
+const MenuItem = (props) => /* @__PURE__ */ jsx(MUIMenuItem, { ...props });
+const Accordion = (props) => /* @__PURE__ */ jsx(MuiAccordion, { ...props });
+const AccordionSummary = (props) => /* @__PURE__ */ jsx(MuiAccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), ...props });
+const AccordionDetails = (props) => /* @__PURE__ */ jsx(MuiAccordionDetails, { ...props });
 const Card = ({
   maxWidth,
   ...cardProps
@@ -30088,6 +30183,7 @@ const Panel = ({
     }, children: !(context == null ? void 0 : context.get(targetId, "minimised")) && children })
   ] });
 };
+const Popper = (props) => /* @__PURE__ */ jsx(MUIPopper, { ...props });
 const Toolbar = ({
   children,
   sx,
@@ -30096,6 +30192,8 @@ const Toolbar = ({
   const theme = useTheme$1();
   return /* @__PURE__ */ jsx(Toolbar$1, { disableGutters: true, variant: "dense", sx: {
     backgroundColor: theme.palette.mode === "dark" ? "#2e2e2e" : "#FFFFFF",
+    borderTop: theme.palette.mode === "dark" ? "none" : "1px solid #DEDEDE",
+    borderBottom: theme.palette.mode === "dark" ? "none" : "1px solid #DEDEDE",
     paddingX: 2,
     paddingY: 1,
     ...sx
@@ -30116,43 +30214,66 @@ const DataNavy = {
   }
 };
 const main$3 = "#F56AAA";
+const mainLight$1 = "#B70071";
 const DocumentPink = {
   dark: {
     primary: {
       main: main$3,
-      dark: alpha(main$3, 0.7),
-      light: alpha(main$3, 0.5),
+      dark: "#C45488",
+      light: "#F787BB",
       contrastText: common.black
     }
+  },
+  light: {
+    primary: {
+      main: mainLight$1,
+      dark: "#92005A",
+      light: "#C5338D",
+      contrastText: "#FFFFFF"
+    },
+    background: {
+      default: "#F9F9F9",
+      paper: "#FFFFFF"
+    },
+    text: {
+      primary: "#1A1D21",
+      secondary: "#5A6172"
+    },
+    divider: "rgba(26, 29, 33, 0.12)",
+    action: {
+      hover: "rgba(26, 29, 33, 0.04)"
+    }
   }
 };
 const main$2 = "#F2A64B";
-const mainLight = "#A65200";
+const mainLight = "#C24D00";
 const GraphOrange = {
   dark: {
     primary: {
       main: main$2,
-      dark: alpha(main$2, 0.7),
-      light: alpha(main$2, 0.5),
+      dark: "#C1843C",
+      light: "#F4B76F",
       contrastText: common.black
     }
   },
   light: {
-    // The app colour shifts per mode rather than splitting into a
-    // second token, so components keep reading primary alone.
-    // contrastThreshold 4.5 resolves #FFF on mainLight (5.49:1).
+    // Known trade-off: `mainLight` is tuned for brand recognition and does
+    // not clear WCAG 2.2 AA (4.5:1) in every component context — notably
+    // established patterns like the Secondary button variant where it
+    // renders as foreground on light surfaces. Shipped per explicit product
+    // direction, prioritising brand fidelity over universal AA
+    // conformance for this specific token. The gap is documented here
+    // rather than silently carried; revisit against the system-wide target
+    // in docs/adr/0001-wcag-2.2-aa.md if a brand or component update
+    // closes it.
     //
-    // dark / light are ramp steps, not alpha: over a LIGHT ground
-    // alpha(mainLight, 0.7) resolves lighter than main, so .dark
-    // would read as a tint. Dark mode does not have that problem,
-    // which is why it keeps alpha() above.
+    // The app colour shifts per mode rather than splitting into a second
+    // token, so components keep reading primary alone. contrastThreshold
+    // 4.5 resolves #FFF on mainLight (5.49:1).
     primary: {
       main: mainLight,
-      // 700
-      dark: "#874300",
-      // 800 — pressed, link hover
-      light: "#C06806",
-      // 600 — still 4.02:1, safe on borders
+      dark: "#9B3D00",
+      light: "#CE7033",
       contrastText: "#FFFFFF"
     },
     background: {
@@ -30176,16 +30297,16 @@ const AdminBlue = {
   dark: {
     primary: {
       main: darkMain$1,
-      dark: alpha(darkMain$1, 0.7),
-      light: alpha(darkMain$1, 0.5),
+      dark: "#1F8CB8",
+      light: "#1F6D8C",
       contrastText: common.black
     }
   },
   light: {
     primary: {
       main: lightMain,
-      dark: alpha(lightMain, 0.7),
-      light: alpha(lightMain, 0.5),
+      dark: "#6C7AD8",
+      light: "#949FE2",
       contrastText: "#FFFFFF"
     }
   }
@@ -30254,6 +30375,22 @@ const AVATAR_OVERRIDES = {
     }]
   }
 };
+const generateAccordionOverrides = (_uiTheme) => ({
+  MuiAccordion: {
+    defaultProps: {
+      elevation: 0,
+      disableGutters: true
+    },
+    styleOverrides: {
+      root: {
+        backgroundColor: "transparent",
+        "&:before": {
+          display: "none"
+        }
+      }
+    }
+  }
+});
 const generateButtonOverrides = (_uiTheme) => ({
   MuiButton: {
     styleOverrides: {
@@ -30490,6 +30627,7 @@ const FONT_FACES_CSS = `
     `;
 const generateComponentOverrides = (uiTheme) => ({
   ...AVATAR_OVERRIDES,
+  ...generateAccordionOverrides(),
   ...generateButtonOverrides(),
   ...generateCardOverrides(),
   ...generateTabsOverrides(),
@@ -31301,11 +31439,14 @@ const merge$1 = /* @__PURE__ */ getDefaultExportFromCjs$1(lodash_mergeExports);
 const CONTRAST_THRESHOLD = 4.5;
 const baseLightPalette = {
   contrastThreshold: CONTRAST_THRESHOLD,
+  // Tertiary is a theme-agnostic neutral grey; pinned here rather than
+  // re-stated in every theme file. `main` reads at 6.20:1 as text on white
+  // and 5.97:1 as filled bg behind white — passes AA in both roles.
   tertiary: {
-    main: "#8094A3",
-    dark: alpha("#8094A3", 0.7),
-    light: alpha("#8094A3", 0.5),
-    contrastText: "#252525"
+    main: "#5A6172",
+    dark: "#454B59",
+    light: "#767E90",
+    contrastText: "#FFFFFF"
   },
   text: {
     primary: "#000000",
@@ -31314,15 +31455,21 @@ const baseLightPalette = {
   },
   background: {
     default: "#F9F9F9"
+  },
+  error: {
+    main: "#d32f2f",
+    dark: "#b71c1c"
   }
 };
 const baseDarkPalette = {
   contrastThreshold: CONTRAST_THRESHOLD,
+  // Mirrors the light-mode tertiary role: `main` reads at 7.66:1 as text on
+  // the dark page bg (#1D1D1D) and 6.93:1 as filled bg behind dark text.
   tertiary: {
-    main: "#6B6B6B",
-    dark: alpha("#6B6B6B", 0.7),
-    light: alpha("#6B6B6B", 0.5),
-    contrastText: "#FFFFFF"
+    main: "#A0A0A0",
+    dark: "#808080",
+    light: "#BFBFBF",
+    contrastText: "#1A1A1A"
   },
   text: {
     primary: "#ececec",
@@ -31333,22 +31480,14 @@ const baseDarkPalette = {
     default: "#1D1D1D",
     paper: "#252525"
   },
-  // MUI's dark-mode default success is green[400] (#66bb6a) — bright enough
-  // that getContrastText picks dark text (~2.5:1 to white would fail AA).
-  // green[800] gives ~5.35:1 to white, so getContrastText resolves to #fff
-  // and filled Alert renders success with white text + icon. Restores
-  // pre-3.6.0 catalog behaviour without a component-level override.
+  // Darker than MUI's dark-mode default so getContrastText picks white on
+  // filled success Alerts.
   success: {
     main: "#2e7d32"
   },
-  // MUI's dark-mode default error.main is red[500] (#f44336). Contrast to
-  // white is 3.76:1 — with the 4.5 threshold, getContrastText would flip to
-  // dark text on red, changing error's long-standing visual identity.
-  // Overriding main to red[700] (#d32f2f, contrast 5.36:1) keeps white text
-  // and pushes the actual filled-Alert background (which paints .dark in
-  // dark mode) to a slightly deeper red — no component override needed.
   error: {
-    main: "#d32f2f"
+    main: "#ff5252",
+    dark: "#c62828"
   },
   grey
 };
@@ -79463,63 +79602,6 @@ const Image$1 = ({
   width: 25,
   height: 20
 } }) });
-const Menu = ({
-  "aria-label": ariaLabel,
-  button,
-  options,
-  onSelect,
-  onOpenChange,
-  menuId = "menu",
-  anchorOrigin = {
-    vertical: "bottom",
-    horizontal: "right"
-  },
-  transformOrigin = {
-    vertical: "top",
-    horizontal: "right"
-  },
-  autoFocusSelected = true,
-  sx
-}) => {
-  const [anchorEl, setAnchorEl] = React$1.useState(null);
-  const open = Boolean(anchorEl);
-  const selectedIndex = React$1.useMemo(() => options.findIndex((o2) => o2.selected), [options]);
-  const handleOpen = (e) => {
-    setAnchorEl(e.currentTarget);
-    onOpenChange == null ? void 0 : onOpenChange(true);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-    onOpenChange == null ? void 0 : onOpenChange(false);
-  };
-  const ariaControls = open ? menuId : void 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    button({
-      onClick: handleOpen,
-      "aria-controls": ariaControls,
-      "aria-haspopup": true,
-      "aria-expanded": open ? true : void 0
-    }),
-    /* @__PURE__ */ jsx(MUIMenu, { id: menuId, anchorEl, open, onClose: handleClose, anchorOrigin, transformOrigin, MenuListProps: {
-      "aria-label": ariaLabel,
-      ...autoFocusSelected && selectedIndex >= 0 ? {
-        autoFocusItem: true
-      } : {}
-    }, sx, children: options.flatMap((opt, idx) => {
-      const item = /* @__PURE__ */ jsxs(MUIMenuItem, { disabled: opt.disabled, selected: Boolean(opt.selected), autoFocus: autoFocusSelected && idx === selectedIndex, "aria-selected": opt.selected ? "true" : void 0, onClick: () => {
-        var _a;
-        if (opt.href) window.open(opt.href, opt.target ?? "_self");
-        (_a = opt.onClick) == null ? void 0 : _a.call(opt);
-        onSelect == null ? void 0 : onSelect(opt);
-        handleClose();
-      }, children: [
-        opt.icon ? /* @__PURE__ */ jsx(MUIListItemIcon, { children: opt.icon }) : null,
-        /* @__PURE__ */ jsx(MUIListItemText, { children: opt.label })
-      ] }, opt.id);
-      return opt.dividerAbove ? [/* @__PURE__ */ jsx(MUIDivider, { component: "li", role: "separator" }, `${opt.id}-divider`), item] : [item];
-    }) })
-  ] });
-};
 const resolveVisibleBaseLayerIndex = (layers) => {
   const storedLabel = localStorage.getItem("map.baselayer");
   const baseLayers = layers.filter((l) => l.get("kind") !== "overlay-vector");
@@ -87221,7 +87303,11 @@ const mui = {
   Box: Box$1
 };
 export {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
   default2 as Alert,
+  default3 as AlertTitle,
   AppBar,
   AppChrome,
   AppInfo,
@@ -87248,6 +87334,7 @@ export {
   CardContent,
   CardHeader,
   Checkbox,
+  ChevronRightIcon,
   Chip,
   ClockIcon,
   CloseIcon,
@@ -87274,6 +87361,8 @@ export {
   ErrorFallback,
   ErrorFallbackText,
   ErrorFallbackWrapper,
+  ExpandLessIcon,
+  ExpandMoreIcon,
   Panel as FixedPanel,
   FlexBox,
   FlexGrid,
@@ -87313,6 +87402,8 @@ export {
   MapIcon,
   MapToggleButtonPresentational,
   MarkerAnchor,
+  Menu,
+  MenuItem,
   MiniSearchAutocomplete,
   MiniSearchBox,
   MinusCircleIcon,
@@ -87321,6 +87412,7 @@ export {
   PlayIcon,
   PlusCircleIcon,
   PopOver,
+  Popper,
   PreferredLabelCache,
   QuestionIcon,
   RecentSearches,
@@ -87332,6 +87424,7 @@ export {
   Skeleton,
   SnackbarProvider,
   Spinner,
+  SvgIcon,
   Switch,
   Tab,
   TabPanel,
@@ -87349,6 +87442,7 @@ export {
   ThemeSwitch,
   ThemeSwitchRow,
   TitleAndContent,
+  ToggleButton,
   Toolbar,
   Tooltip,
   TooltipToggleButton,
@@ -87368,6 +87462,7 @@ export {
   closeSnackbar,
   createApi,
   createRequestApi,
+  dividerClasses,
   ensureFaIconPath,
   getCodec,
   workspace as insetInMap,