@common-origin/design-system 3.1.0 → 3.2.0

package/dist/client.js

@@ -156,31 +156,31 @@ function withCssVariables(tree, path) {
 var tokens = withCssVariables(data.tokensJson);
 
 // Destructure tokens
-var semantic$t = tokens.semantic;
+var semantic$u = tokens.semantic;
 var initials = tokens.component.avatar.initials;
-var color$i = semantic$t.color,
-  size$8 = semantic$t.size;
-var radius$b = semantic$t.radius;
+var color$i = semantic$u.color,
+  size$a = semantic$u.size;
+var radius$8 = semantic$u.radius;
 var AvatarContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
+})(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
   var $size = _a.$size;
-  return size$8.avatar[$size];
+  return size$a.avatar[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return size$8.avatar[$size];
-}, radius$b.full, color$i.fill.muted);
+  return size$a.avatar[$size];
+}, radius$8.full, color$i.fill.muted);
 var AvatarImage = /*#__PURE__*/styled__default.default.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$b.full);
+})(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$8.full);
 var AvatarInitials = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -246,7 +246,7 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$U, templateObject_2$F, templateObject_3$C;
+var templateObject_1$V, templateObject_2$G, templateObject_3$C;
 
 // Breakpoints from the semantic tokens (decision 0014)
 var breakpoints$1 = {
@@ -281,7 +281,7 @@ var forcedColorsEdge = "".concat(forcedColors, " {\n  border: ").concat(tokens.s
 var reducedMotion = '@media (prefers-reduced-motion: reduce)';
 // No `from` keyframe: the fade starts from the element's current opacity, including a
 // still-running entrance, so closing mid-entrance doesn't jump back to fully visible.
-var fadeOut$1 = styled.keyframes(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
+var fadeOut$1 = styled.keyframes(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
 // Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
 // the element's `animation` declarations while it exits: the entrance stays in the list,
 // so it isn't restarted, and the fade runs on top of it. A fade is already the
@@ -295,7 +295,7 @@ var fadeOut$1 = styled.keyframes(templateObject_1$T || (templateObject_1$T = __m
 // reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
 // still catches clicks (so they can't reach the page behind it) and the panel is inert.
 // Exits accelerate: things leaving speed up as they go (decision 0037).
-var exitAnimation = styled.css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
+var exitAnimation = styled.css(templateObject_2$F || (templateObject_2$F = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
 // Content for screen readers only. The 1px size and -1px margin are part of the standard
 // visually-hidden technique, not design values, so they aren't tokens.
 ])), fadeOut$1, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.accelerate);
@@ -314,6 +314,10 @@ var visuallyHidden = styled.css(templateObject_3$B || (templateObject_3$B = __ma
 var _a$b = tokens.semantic.color,
   rowFill = _a$b.fill,
   rowText = _a$b.text;
+/** Corner radius of a button inside a field (a stepper, a clear or show-password button): one step tighter than the field, so its corner nests (decision 0055). */
+var fieldButtonRadius = tokens.semantic.radius.sm;
+/** Corner radius every row and tab shares: the control radius (decision 0055). */
+var rowRadius = tokens.semantic.radius.md;
 var rowStates = {
   unselected: {
     rest: {
@@ -399,178 +403,57 @@ var rowForcedColors = function rowForcedColors(_a) {
   // the descendants' own rules.
   return "".concat(forcedColors, " {\n    ").concat(selected ? "background-color: Highlight;\n    ".concat(text('HighlightText'), "\n    && * {\n      color: inherit;\n      background-color: transparent;\n    }") : '', "\n    ").concat(!disabled && focused ? hover : '', "\n    ").concat(disabled ? '' : "&:hover {\n      ".concat(hover, "\n    }"), "\n  }");
 };
-var templateObject_1$T, templateObject_2$E, templateObject_3$B;
-
-var _a$a = tokens.semantic,
-  typography$7 = _a$a.typography,
-  color$h = _a$a.color,
-  letterSpacing = _a$a.letterSpacing;
-var getTypographyStyles = function getTypographyStyles(variant) {
-  var styles = {
-    display: "font: ".concat(typography$7.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
-    h1: "font: ".concat(typography$7.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
-    h2: "font: ".concat(typography$7.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h3: "font: ".concat(typography$7.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h4: "font: ".concat(typography$7.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h5: "font: ".concat(typography$7.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
-    h6: "font: ".concat(typography$7.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
-    subtitle: "font: ".concat(typography$7.subtitle, ";"),
-    body: "font: ".concat(typography$7.body, ";"),
-    small: "font: ".concat(typography$7.small, ";"),
-    overline: "font: ".concat(typography$7.overline, ";"),
-    caption: "font: ".concat(typography$7.caption, "; text-transform: uppercase;"),
-    button1: "font: ".concat(tokens.component.button.sizes.large.font, ";"),
-    button2: "font: ".concat(tokens.component.button.sizes.medium.font, ";"),
-    button3: "font: ".concat(tokens.component.button.sizes.small.font, "; font-weight: ").concat(tokens.component.button.sizes.small.fontWeight, ";"),
-    label: "font: ".concat(typography$7.label, ";")
-  };
-  return styles[variant] || styles.body;
-};
-var getTextColor = function getTextColor(colorVariant) {
-  var colorMap = {
-    "default": color$h.text["default"],
-    emphasis: color$h.text["default"],
-    subdued: color$h.text.muted,
-    inverse: color$h.text.inverse,
-    disabled: color$h.text.disabled,
-    interactive: color$h.text.accent,
-    error: color$h.text.danger,
-    success: color$h.text.success,
-    warning: color$h.text.warning
-  };
-  return colorMap[colorVariant] || colorMap["default"];
-};
-var getDefaultElement = function getDefaultElement(variant) {
-  var elementMap = {
-    display: 'h1',
-    h1: 'h1',
-    h2: 'h2',
-    h3: 'h3',
-    h4: 'h4',
-    h5: 'h5',
-    h6: 'h6',
-    subtitle: 'p',
-    body: 'p',
-    small: 'span',
-    overline: 'span',
-    caption: 'span',
-    button1: 'span',
-    button2: 'span',
-    button3: 'span',
-    label: 'span'
-  };
-  return elementMap[variant] || 'span';
-};
-var StyledTypography = /*#__PURE__*/styled__default.default.span.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "Typography__StyledTypography",
-  componentId: "sc-17mqo4k-0"
-})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
-/**
- * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
- *
- * Features:
- * - Semantic variants (h1-h6, body, subtitle, etc.)
- * - Color variants for different contexts
- * - Automatic semantic HTML element selection
- * - Manual element override support
- * - Direct semantic token usage (no component tokens needed)
- * - Full accessibility support
- *
- * @example
- * ```tsx
- * <Typography variant="h1">Main Heading</Typography>
- * <Typography variant="body" color="subdued">Body text</Typography>
- * <Typography variant="caption" as="figcaption">Image caption</Typography>
- * ```
- */])), function (_a) {
-  var $variant = _a.$variant;
-  return getTypographyStyles($variant);
-}, function (_a) {
-  var $color = _a.$color;
-  return getTextColor($color);
-});
-/**
- * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
- *
- * Features:
- * - Semantic variants (h1-h6, body, subtitle, etc.)
- * - Color variants for different contexts
- * - Automatic semantic HTML element selection
- * - Manual element override support
- * - Direct semantic token usage (no component tokens needed)
- * - Full accessibility support
- *
- * @example
- * ```tsx
- * <Typography variant="h1">Main Heading</Typography>
- * <Typography variant="body" color="subdued">Body text</Typography>
- * <Typography variant="caption" as="figcaption">Image caption</Typography>
- * ```
- */
-var Typography = function Typography(_a) {
-  var _b = _a.variant,
-    variant = _b === void 0 ? 'body' : _b,
-    children = _a.children,
-    _c = _a.color,
-    color = _c === void 0 ? 'default' : _c,
-    as = _a.as,
-    dataTestId = _a["data-testid"];
-  // $variant and $color are only used for styled-components prop filtering
-  var defaultElement = getDefaultElement(variant);
-  var elementType = as || defaultElement;
-  return jsxRuntime.jsx(StyledTypography, {
-    as: elementType,
-    "$variant": variant,
-    "$color": color,
-    "data-testid": dataTestId,
-    children: children
-  });
-};
-var templateObject_1$S;
+var templateObject_1$U, templateObject_2$F, templateObject_3$B;
 
-var semantic$s = tokens.semantic;
-var color$g = semantic$s.color;
-var radius$a = semantic$s.radius;
-var _a$9 = tokens.component.badge,
-  dot = _a$9.dot,
-  count = _a$9.count,
-  ring = _a$9.ring;
-var scaleIn$2 = styled.keyframes(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
+var semantic$t = tokens.semantic;
+var color$h = semantic$t.color;
+var radius$7 = semantic$t.radius;
+var _a$a = tokens.component.badge,
+  dot = _a$a.dot,
+  count = _a$a.count,
+  ring = _a$a.ring;
+var scaleIn$2 = styled.keyframes(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Badge__BadgeWrapper",
   componentId: "sc-tjz4pp-0"
-})(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
+})(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
 var BadgeIndicator = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"])), function (props) {
+})(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"
+// The count takes the indicator's colour, so each variant's content colour reaches it: inverse on
+// the strong fill, on-fill on the accent fill (decision 0056)
+])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? dot.size : count.minWidth;
 }, function (props) {
   return props.$isDot ? dot.size : count.height;
 }, function (props) {
-  return props.$isDot ? '0' : "0 ".concat(semantic$s.space.inset.xs);
-}, radius$a.full, count.lineHeight, ring.width, semantic$s.surface.base, scaleIn$2, semantic$s.motion.duration.moderate, semantic$s.motion.easing.decelerate, reducedMotion, function (props) {
-  return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic$s.border.width.thin, " solid currentColor; }");
+  return props.$isDot ? '0' : "0 ".concat(semantic$t.space.inset.xs);
+}, radius$7.full, count.lineHeight, ring.width, semantic$t.surface.base, scaleIn$2, semantic$t.motion.duration.moderate, semantic$t.motion.easing.decelerate, reducedMotion, function (props) {
+  return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic$t.border.width.thin, " solid currentColor; }");
 }, function (props) {
   switch (props.$variant) {
     case 'accent':
-      return "\n          background-color: ".concat(color$g.fill.accent, ";\n          color: ").concat(color$g.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$h.fill.accent, ";\n          color: ").concat(color$h.text['on-fill'], ";\n        ");
     default:
-      return "\n          background-color: ".concat(color$g.fill.emphasis, ";\n          color: ").concat(color$g.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$h.fill.emphasis, ";\n          color: ").concat(color$h.text.inverse, ";\n        ");
   }
 });
+// The count takes the indicator's colour, so each variant's content colour reaches it: inverse on
+// the strong fill, on-fill on the accent fill (decision 0056)
+var Count = /*#__PURE__*/styled__default.default.span.withConfig({
+  displayName: "Badge__Count",
+  componentId: "sc-tjz4pp-2"
+})(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n  font: ", ";\n  text-transform: uppercase;\n"], ["\n  font: ", ";\n  text-transform: uppercase;\n"])), semantic$t.typography.caption);
 var ScreenReaderOnly$1 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
-  componentId: "sc-tjz4pp-2"
-})(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+  componentId: "sc-tjz4pp-3"
+})(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -598,9 +481,7 @@ var Badge = function Badge(_a) {
       "$isVisible": isVisible,
       role: "status",
       "aria-live": "polite",
-      children: [!dot && jsxRuntime.jsx(Typography, {
-        variant: "caption",
-        color: "inverse",
+      children: [!dot && jsxRuntime.jsx(Count, {
         children: displayCount
       }), jsxRuntime.jsx(ScreenReaderOnly$1, {
         children: label
@@ -608,88 +489,89 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$R, templateObject_2$D, templateObject_3$A, templateObject_4$t;
+var templateObject_1$T, templateObject_2$E, templateObject_3$A, templateObject_4$t, templateObject_5$o;
 
 // Box's spacing and radius props keep their own names, which 3.0 decoupled from the removed
 // spacing.layout and border.radius tokens (P7, #99), and read the semantic grammar's tokens
 // (decision 0031). Each map covers every key the prop type allows, so TypeScript fails here if a
 // key is added without a mapping.
-var semantic$r = tokens.semantic;
-var color$f = semantic$r.color,
-  space$j = semantic$r.space,
-  radius$9 = semantic$r.radius,
-  surface = semantic$r.surface;
+var semantic$s = tokens.semantic;
+var color$g = semantic$s.color,
+  space$k = semantic$s.space,
+  radius$6 = semantic$s.radius,
+  surface = semantic$s.surface;
 /** Box's spacing props: each name maps to the space step that replaced its spacing.layout token. */
 var spaceByLayoutKey = {
-  none: space$j[0],
-  xs: space$j[100],
-  sm: space$j[200],
-  md: space$j[300],
-  lg: space$j[400],
-  xl: space$j[500],
-  '2xl': space$j[600],
-  '3xl': space$j[700],
-  '4xl': space$j[800],
-  '5xl': space$j[900],
-  '6xl': space$j[1000],
-  '7xl': space$j[1200],
-  '8xl': space$j[1400],
-  '9xl': space$j[1600],
-  '10xl': space$j[2000],
-  '11xl': space$j[2400],
+  none: space$k[0],
+  xs: space$k[100],
+  sm: space$k[200],
+  md: space$k[300],
+  lg: space$k[400],
+  xl: space$k[500],
+  '2xl': space$k[600],
+  '3xl': space$k[700],
+  '4xl': space$k[800],
+  '5xl': space$k[900],
+  '6xl': space$k[1000],
+  '7xl': space$k[1200],
+  '8xl': space$k[1400],
+  '9xl': space$k[1600],
+  '10xl': space$k[2000],
+  '11xl': space$k[2400],
   // A keyword, not a step (0031)
-  auto: semantic$r.spacing.layout.auto
+  auto: semantic$s.spacing.layout.auto
 };
 /** Box's `borderRadius` prop, read from `radius`. */
 var radiusByKey = {
-  none: radius$9.none,
-  xs: radius$9.xs,
-  sm: radius$9.sm,
-  md: radius$9.md,
-  lg: radius$9.lg,
-  xl: radius$9.xl,
-  '2xl': radius$9['2xl'],
-  '3xl': radius$9['3xl'],
-  circle: radius$9.full
+  none: radius$6.none,
+  xs: radius$6.xs,
+  sm: radius$6.sm,
+  md: radius$6.md,
+  lg: radius$6.lg,
+  xl: radius$6.xl,
+  '2xl': radius$6['2xl'],
+  '3xl': radius$6['3xl'],
+  circle: radius$6.full
 };
 /** Box's `bg` prop: the grammar's token paths, read from the token at that path. */
 var backgroundByPath = {
   'surface.base': surface.base,
   'surface.raised': surface.raised,
+  'surface.overlay': surface.overlay,
   'surface.scrim': surface.scrim,
-  'color.fill.emphasis': color$f.fill.emphasis,
-  'color.fill.muted': color$f.fill.muted,
-  'color.fill.inverse': color$f.fill.inverse,
-  'color.fill.accent': color$f.fill.accent,
-  'color.fill.accent-hover': color$f.fill['accent-hover'],
-  'color.fill.accent-pressed': color$f.fill['accent-pressed'],
-  'color.fill.accent-muted': color$f.fill['accent-muted'],
-  'color.fill.accent-muted-hover': color$f.fill['accent-muted-hover'],
-  'color.fill.accent-muted-pressed': color$f.fill['accent-muted-pressed'],
-  'color.fill.danger': color$f.fill.danger,
-  'color.fill.danger-hover': color$f.fill['danger-hover'],
-  'color.fill.danger-pressed': color$f.fill['danger-pressed'],
-  'color.fill.danger-muted': color$f.fill['danger-muted'],
-  'color.fill.success': color$f.fill.success,
-  'color.fill.success-muted': color$f.fill['success-muted'],
-  'color.fill.warning': color$f.fill.warning,
-  'color.fill.warning-muted': color$f.fill['warning-muted'],
-  'color.fill.serious': color$f.fill.serious,
-  'color.fill.serious-muted': color$f.fill['serious-muted'],
-  'color.fill.ai-muted': color$f.fill['ai-muted'],
-  'color.fill.disabled': color$f.fill.disabled,
-  'color.fill.default': color$f.fill["default"],
-  'color.fill.default-hover': color$f.fill['default-hover'],
-  'color.fill.default-pressed': color$f.fill['default-pressed'],
-  'color.fill.none': color$f.fill.none,
-  'color.fill.none-hover': color$f.fill['none-hover'],
-  'color.fill.none-pressed': color$f.fill['none-pressed'],
-  'color.fill.inverse-none-hover': color$f.fill['inverse-none-hover']
+  'color.fill.emphasis': color$g.fill.emphasis,
+  'color.fill.muted': color$g.fill.muted,
+  'color.fill.inverse': color$g.fill.inverse,
+  'color.fill.accent': color$g.fill.accent,
+  'color.fill.accent-hover': color$g.fill['accent-hover'],
+  'color.fill.accent-pressed': color$g.fill['accent-pressed'],
+  'color.fill.accent-muted': color$g.fill['accent-muted'],
+  'color.fill.accent-muted-hover': color$g.fill['accent-muted-hover'],
+  'color.fill.accent-muted-pressed': color$g.fill['accent-muted-pressed'],
+  'color.fill.danger': color$g.fill.danger,
+  'color.fill.danger-hover': color$g.fill['danger-hover'],
+  'color.fill.danger-pressed': color$g.fill['danger-pressed'],
+  'color.fill.danger-muted': color$g.fill['danger-muted'],
+  'color.fill.success': color$g.fill.success,
+  'color.fill.success-muted': color$g.fill['success-muted'],
+  'color.fill.warning': color$g.fill.warning,
+  'color.fill.warning-muted': color$g.fill['warning-muted'],
+  'color.fill.serious': color$g.fill.serious,
+  'color.fill.serious-muted': color$g.fill['serious-muted'],
+  'color.fill.ai-muted': color$g.fill['ai-muted'],
+  'color.fill.disabled': color$g.fill.disabled,
+  'color.fill.default': color$g.fill["default"],
+  'color.fill.default-hover': color$g.fill['default-hover'],
+  'color.fill.default-pressed': color$g.fill['default-pressed'],
+  'color.fill.none': color$g.fill.none,
+  'color.fill.none-hover': color$g.fill['none-hover'],
+  'color.fill.none-pressed': color$g.fill['none-pressed'],
+  'color.fill.inverse-none-hover': color$g.fill['inverse-none-hover']
 };
 /** Box's `color` prop: the text colours. */
-var textColorByKey = color$f.text;
+var textColorByKey = color$g.text;
 /** Box's border props: the border colours. */
-var borderColorByKey = color$f.border;
+var borderColorByKey = color$g.border;
 
 var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -700,9 +582,9 @@ var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
 })(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
 // Transform component that maps clean props to $-prefixed props for styled-components
 ])), function (props) {
-  return props.$display && styled.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && styled.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && styled.css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && styled.css(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
   return props.$justifyContent && styled.css(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
@@ -712,13 +594,13 @@ var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
 }, function (props) {
   return props.$gap && styled.css(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), spaceByLayoutKey[props.$gap]);
 }, function (props) {
-  return props.$m && styled.css(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), spaceByLayoutKey[props.$m]);
+  return props.$m && styled.css(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), spaceByLayoutKey[props.$m]);
 }, function (props) {
   return props.$mt && styled.css(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), spaceByLayoutKey[props.$mt]);
 }, function (props) {
   return props.$mr && styled.css(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), spaceByLayoutKey[props.$mr]);
 }, function (props) {
-  return props.$mb && styled.css(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), spaceByLayoutKey[props.$mb]);
+  return props.$mb && styled.css(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), spaceByLayoutKey[props.$mb]);
 }, function (props) {
   return props.$ml && styled.css(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), spaceByLayoutKey[props.$ml]);
 }, function (props) {
@@ -924,7 +806,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$Q, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$h, templateObject_7$e, templateObject_8$b, templateObject_9$9, templateObject_10$5, templateObject_11$5, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2, templateObject_22$2, templateObject_23$2, templateObject_24$2, templateObject_25$2, templateObject_26$2, templateObject_27$2, templateObject_28$2, templateObject_29$2, templateObject_30$2, templateObject_31$2, templateObject_32$2, templateObject_33$2, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51;
+var templateObject_1$S, templateObject_2$D, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$9, templateObject_10$7, templateObject_11$5, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2, templateObject_22$2, templateObject_23$2, templateObject_24$2, templateObject_25$2, templateObject_26$2, templateObject_27$2, templateObject_28$2, templateObject_29$2, templateObject_30$2, templateObject_31$2, templateObject_32$2, templateObject_33$2, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51;
 
 var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -932,7 +814,7 @@ var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.icon[$size];
 }, function (_a) {
@@ -1009,17 +891,17 @@ var Icon = function Icon(_a) {
     }))
   });
 };
-var templateObject_1$P;
+var templateObject_1$R;
 
 var button$1 = tokens.component.button,
-  semantic$q = tokens.semantic;
+  semantic$r = tokens.semantic;
 // Height comes from size.control as a minimum and the content is centred, so there is no
 // vertical padding (decision 0034). Horizontal padding comes from the semantic spacing scale:
 // no component spacing tokens (decision 0022)
-var inset = semantic$q.space.inset;
-var control$1 = semantic$q.size.control;
+var inset = semantic$r.space.inset;
+var control$1 = semantic$r.size.control;
 // Base styles shared between button and link
-var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$q.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(semantic$q.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$r.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(semantic$r.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
   var _b;
@@ -1089,14 +971,14 @@ var StyledButton = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
+})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
 var StyledLink = /*#__PURE__*/styled__default.default.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
-})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+})(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
 // Helper function to get icon size based on button size
 ])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
 // Helper function to get icon size based on button size
@@ -1199,15 +1081,15 @@ var Button = function Button(_a) {
     children: renderButtonContent(children, iconName, size)
   }));
 };
-var templateObject_1$O, templateObject_2$B;
+var templateObject_1$Q, templateObject_2$C;
 
-var semantic$p = tokens.semantic;
-var color$e = semantic$p.color;
+var semantic$q = tokens.semantic;
+var color$f = semantic$q.color;
 var label$2 = tokens.component.badge.label;
-var category = color$e.category;
-var radius$8 = semantic$p.radius;
-var space$i = semantic$p.space;
-var labelHeight$1 = semantic$p.size.label;
+var category = color$f.category;
+var radius$5 = semantic$q.radius;
+var space$j = semantic$q.space;
+var labelHeight$1 = semantic$q.size.label;
 var displayColors = ['olive', 'periwinkle', 'rose', 'magenta', 'gray'];
 // Text on white or the -muted fill (outlined and minimal), at least 4.5:1 (#115)
 var categoryText = {
@@ -1223,19 +1105,19 @@ var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "CategoryLabel__StyledCategoryLabel",
   componentId: "sc-1jx7bjo-0"
-})(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"
+})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"
 // The visible content, hidden from assistive technology when an aria-label replaces it.
 // display: contents keeps the root's flex layout and gap.
-])), radius$8.full, semantic$p.border.width.thin, function (_a) {
+])), radius$5.full, semantic$q.border.width.thin, function (_a) {
   var $size = _a.$size;
   return labelHeight$1[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'medium' ? "".concat(space$i[100], " ").concat(space$i[200]) : "".concat(space$i[200], " ").concat(space$i[300]);
+  return $size === 'medium' ? "".concat(space$j[100], " ").concat(space$j[200]) : "".concat(space$j[200], " ").concat(space$j[300]);
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'medium' ? label$2.typography.small : label$2.typography.medium;
-}, label$2.fontWeight, space$i[100], function (_a) {
+}, label$2.fontWeight, space$j[100], function (_a) {
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
@@ -1250,7 +1132,7 @@ var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
-    return color$e.text.inverse;
+    return color$f.text.inverse;
   }
   return categoryText[$color];
 }, function (_a) {
@@ -1266,8 +1148,8 @@ var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
 var VisibleContent$1 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "CategoryLabel__VisibleContent",
   componentId: "sc-1jx7bjo-1"
-})(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
-var HiddenLabel$1 = /*#__PURE__*/styled__default.default.span.withConfig({
+})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var HiddenLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "CategoryLabel__HiddenLabel",
   componentId: "sc-1jx7bjo-2"
 })(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
@@ -1335,16 +1217,16 @@ var CategoryLabel = function CategoryLabel(_a) {
         size: iconSize,
         iconColor: variant === 'filled' ? 'inverse' : 'inherit'
       }), children]
-    }), accessibleLabel && jsxRuntime.jsx(HiddenLabel$1, {
+    }), accessibleLabel && jsxRuntime.jsx(HiddenLabel, {
       children: accessibleLabel
     })]
   });
 };
 CategoryLabel.displayName = 'CategoryLabel';
-var templateObject_1$N, templateObject_2$A, templateObject_3$y;
+var templateObject_1$P, templateObject_2$B, templateObject_3$y;
 
 var chip$2 = tokens.component.chip,
-  semantic$o = tokens.semantic;
+  semantic$p = tokens.semantic;
 // The chip's fill and text for its surface and state, matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
   var $surface = _a.$surface,
@@ -1377,10 +1259,10 @@ var getVariantStyles = function getVariantStyles(_a) {
 // Chips have one size: 24px from the label scale as a minimum, with the content centred
 // and no vertical padding (decisions 0034 and 0035). Horizontal padding comes from the
 // semantic spacing scale (decision 0022).
-var sizeStyles = "\n  font: ".concat(chip$2.sizes.medium.font, ";\n  min-height: ").concat(semantic$o.size.label.medium, ";\n  padding: 0 ").concat(semantic$o.space.inset.sm, ";\n");
+var sizeStyles = "\n  font: ".concat(chip$2.sizes.medium.font, ";\n  min-height: ").concat(semantic$p.size.label.medium, ";\n  padding: 0 ").concat(semantic$p.space.inset.sm, ";\n");
 
 var chip$1 = tokens.component.chip,
-  semantic$n = tokens.semantic;
+  semantic$o = tokens.semantic;
 // Base styled component using direct prop interpolation like Button
 var StyledChip = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1388,18 +1270,18 @@ var StyledChip = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"
+})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"
 // Icon container for selected indicator or leading icons
-])), chip$1["default"].borderRadius, semantic$n.motion.transition.feedback, function (props) {
+])), chip$1["default"].borderRadius, semantic$o.motion.transition.feedback, function (props) {
   return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
 }, forcedColorsEdge, function (props) {
   return props.$disabled ? "".concat(forcedColors, " { color: GrayText; }") : '';
-}, getVariantStyles, sizeStyles, chip$1.focus.outline, semantic$n.border.focusOffset);
+}, getVariantStyles, sizeStyles, chip$1.focus.outline, semantic$o.border.focusOffset);
 // Icon container for selected indicator or leading icons
 var IconContainer = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "ChipBase__IconContainer",
   componentId: "sc-moa6zc-1"
-})(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
+})(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
 // Close button for dismissible chips
 ])), tokens.semantic.space[100]);
 // Close button for dismissible chips
@@ -1409,10 +1291,10 @@ var CloseButton = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip$1.closeButton.size, chip$1.closeButton.size, tokens.semantic.space[0], semantic$n.size.label.medium, semantic$n.size.label.medium, tokens.semantic.radius.xs, function (props) {
+})(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip$1.closeButton.size, chip$1.closeButton.size, tokens.semantic.space[0], semantic$o.size.label.medium, semantic$o.size.label.medium, tokens.semantic.radius.full, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic$n.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip$1.focus.outline, semantic$n.border.focusOffset, chip$1["default"].borderRadius);
-var templateObject_1$M, templateObject_2$z, templateObject_3$x;
+}, semantic$o.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip$1.focus.outline, semantic$o.border.focusOffset, chip$1["default"].borderRadius);
+var templateObject_1$O, templateObject_2$A, templateObject_3$x;
 
 /**
  * Chip - a static, non-interactive label for tags, categories and metadata.
@@ -1611,14 +1493,14 @@ var FilterChip = function FilterChip(_a) {
 };
 
 var chip = tokens.component.chip,
-  semantic$m = tokens.semantic;
-var color$d = semantic$m.color;
+  semantic$n = tokens.semantic;
+var color$e = semantic$n.color;
 // Outlined, with the naked fill ladder on hover and press (decisions 0030, 0046): the edge keeps it
 // visible on white, the page and AgentInput's docked band
 var StyledSuggestionChip = /*#__PURE__*/styled__default.default.button.withConfig({
   displayName: "SuggestionChip__StyledSuggestionChip",
   componentId: "sc-1k0njm-0"
-})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"
+})(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"
 /**
  * SuggestionChip - Offers text to put in the agent input
  *
@@ -1630,7 +1512,7 @@ var StyledSuggestionChip = /*#__PURE__*/styled__default.default.button.withConfi
  * - A native button: Enter and Space pick it, and its text is its accessible name
  * - Outlined, with the naked hover and pressed fills; no selected state
  * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
- */])), semantic$m.border.width.thin, color$d.border.input, chip["default"].borderRadius, color$d.fill.none, color$d.text["default"], semantic$m.motion.transition.feedback, sizeStyles, color$d.fill['none-hover'], color$d.fill['none-pressed'], chip.focus.outline, semantic$m.border.focusOffset, color$d.border["default"], color$d.text.disabled, forcedColors);
+ */])), semantic$n.border.width.thin, color$e.border.input, chip["default"].borderRadius, color$e.fill.none, color$e.text["default"], semantic$n.motion.transition.feedback, sizeStyles, color$e.fill['none-hover'], color$e.fill['none-pressed'], chip.focus.outline, semantic$n.border.focusOffset, color$e.border["default"], color$e.text.disabled, forcedColors);
 /**
  * SuggestionChip - Offers text to put in the agent input
  *
@@ -1658,13 +1540,13 @@ var SuggestionChip = function SuggestionChip(_a) {
   });
 };
 SuggestionChip.displayName = 'SuggestionChip';
-var templateObject_1$L;
+var templateObject_1$N;
 
-var space$h = tokens.semantic.space;
+var space$i = tokens.semantic.space;
 var StyledContainer$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), space$h[600], space$h[600], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
+})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), space$i[600], space$i[600], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
 var Container$1 = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
@@ -1672,12 +1554,12 @@ var Container$1 = function Container(_a) {
     children: children
   }));
 };
-var templateObject_1$K;
+var templateObject_1$M;
 
 var PictureWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"
+})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"
 // A clickable image answers input on the image itself (decision 0029, #185): it fades on hover and
 // one step further while pressed, and draws the system focus ring around the image, following its
 // rounded corners. Fading isn't movement, so it stays under reduced motion.
@@ -1685,7 +1567,7 @@ var PictureWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
 // A clickable image answers input on the image itself (decision 0029, #185): it fades on hover and
 // one step further while pressed, and draws the system focus ring around the image, following its
 // rounded corners. Fading isn't movement, so it stays under reduced motion.
-var clickableImage = styled.css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
+var clickableImage = styled.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
 var ImageLink = /*#__PURE__*/styled__default.default.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
@@ -1727,18 +1609,18 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$J, templateObject_2$y, templateObject_3$w, templateObject_4$r, templateObject_5$m;
+var templateObject_1$L, templateObject_2$z, templateObject_3$w, templateObject_4$r, templateObject_5$m;
 
-var _a$8 = tokens.semantic,
-  typography$6 = _a$8.typography,
-  color$c = _a$8.color;
+var _a$9 = tokens.semantic,
+  typography$7 = _a$9.typography,
+  color$d = _a$9.color;
 var TimeStyled = /*#__PURE__*/styled__default.default.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * Formats a date with smart relative/absolute logic
- */])), typography$6.label, color$c.text.muted);
+ */])), typography$7.label, color$d.text.muted);
 /**
  * Formats a date with smart relative/absolute logic
  */
@@ -1780,27 +1662,27 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$I;
+var templateObject_1$K;
 
-var _a$7 = tokens.semantic,
-  motion$b = _a$7.motion,
-  border$8 = _a$7.border,
-  space$g = _a$7.space,
-  size$7 = _a$7.size,
+var _a$8 = tokens.semantic,
+  motion$c = _a$8.motion,
+  border$7 = _a$8.border,
+  space$h = _a$8.space,
+  size$9 = _a$8.size,
   _b$2 = tokens.component,
   iconButton = _b$2.iconButton,
   button = _b$2.button;
 // Height and width come from size.control as a minimum (decision 0034)
 var control = {
-  small: size$7.control.sm,
-  medium: size$7.control.md,
-  large: size$7.control.lg
+  small: size$9.control.sm,
+  medium: size$9.control.md,
+  large: size$9.control.lg
 };
 // Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
 var padding = {
-  small: space$g.inset.xs,
-  medium: space$g.inset.sm,
-  large: space$g.inset.md
+  small: space$h.inset.xs,
+  medium: space$h.inset.sm,
+  large: space$h.inset.md
 };
 // Colours and motion come from Button's tokens, so IconButton's variants look and behave exactly like
 // Button's in every state (#130). Only the size and the icon differ
@@ -1841,13 +1723,13 @@ var IconButtonStyled = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
+})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
   var $variant = _a.$variant;
   return colours($variant).bg;
 }, function (_a) {
   var $variant = _a.$variant;
   return colours($variant).text;
-}, iconButton.primary.borderRadius, motion$b.transition.feedback, function (_a) {
+}, iconButton.primary.borderRadius, motion$c.transition.feedback, function (_a) {
   var $size = _a.$size;
   return control[$size];
 }, function (_a) {
@@ -1862,7 +1744,7 @@ var IconButtonStyled = /*#__PURE__*/styled__default.default.button.withConfig({
 }, function (_a) {
   var $variant = _a.$variant;
   return colours($variant).activeBg;
-}, iconButton.focus.outline, border$8.focusOffset, function (_a) {
+}, iconButton.focus.outline, border$7.focusOffset, function (_a) {
   var $variant = _a.$variant;
   return colours($variant).disabledBg;
 }, function (_a) {
@@ -1919,7 +1801,137 @@ var IconButton = function IconButton(_a) {
     })
   }));
 };
-var templateObject_1$H;
+var templateObject_1$J;
+
+var _a$7 = tokens.semantic,
+  typography$6 = _a$7.typography,
+  color$c = _a$7.color,
+  letterSpacing = _a$7.letterSpacing;
+var getTypographyStyles = function getTypographyStyles(variant) {
+  var styles = {
+    display: "font: ".concat(typography$6.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h1: "font: ".concat(typography$6.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h2: "font: ".concat(typography$6.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h3: "font: ".concat(typography$6.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h4: "font: ".concat(typography$6.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h5: "font: ".concat(typography$6.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    h6: "font: ".concat(typography$6.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    subtitle: "font: ".concat(typography$6.subtitle, ";"),
+    body: "font: ".concat(typography$6.body, ";"),
+    small: "font: ".concat(typography$6.small, ";"),
+    overline: "font: ".concat(typography$6.overline, ";"),
+    caption: "font: ".concat(typography$6.caption, "; text-transform: uppercase;"),
+    button1: "font: ".concat(tokens.component.button.sizes.large.font, ";"),
+    button2: "font: ".concat(tokens.component.button.sizes.medium.font, ";"),
+    button3: "font: ".concat(tokens.component.button.sizes.small.font, "; font-weight: ").concat(tokens.component.button.sizes.small.fontWeight, ";"),
+    label: "font: ".concat(typography$6.label, ";")
+  };
+  return styles[variant] || styles.body;
+};
+var getTextColor = function getTextColor(colorVariant) {
+  var colorMap = {
+    "default": color$c.text["default"],
+    emphasis: color$c.text["default"],
+    subdued: color$c.text.muted,
+    inverse: color$c.text.inverse,
+    disabled: color$c.text.disabled,
+    interactive: color$c.text.accent,
+    error: color$c.text.danger,
+    success: color$c.text.success,
+    warning: color$c.text.warning
+  };
+  return colorMap[colorVariant] || colorMap["default"];
+};
+var getDefaultElement = function getDefaultElement(variant) {
+  var elementMap = {
+    display: 'h1',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    subtitle: 'p',
+    body: 'p',
+    small: 'span',
+    overline: 'span',
+    caption: 'span',
+    button1: 'span',
+    button2: 'span',
+    button3: 'span',
+    label: 'span'
+  };
+  return elementMap[variant] || 'span';
+};
+var StyledTypography = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Typography__StyledTypography",
+  componentId: "sc-17mqo4k-0"
+})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */])), function (_a) {
+  var $variant = _a.$variant;
+  return getTypographyStyles($variant);
+}, function (_a) {
+  var $color = _a.$color;
+  return getTextColor($color);
+});
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */
+var Typography = function Typography(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'body' : _b,
+    children = _a.children,
+    _c = _a.color,
+    color = _c === void 0 ? 'default' : _c,
+    as = _a.as,
+    dataTestId = _a["data-testid"];
+  // $variant and $color are only used for styled-components prop filtering
+  var defaultElement = getDefaultElement(variant);
+  var elementType = as || defaultElement;
+  return jsxRuntime.jsx(StyledTypography, {
+    as: elementType,
+    "$variant": variant,
+    "$color": color,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var templateObject_1$I;
 
 var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1927,7 +1939,7 @@ var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"
+})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -1989,27 +2001,27 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     })
   });
 };
-var templateObject_1$G;
+var templateObject_1$H;
 
 // Destructure tokens
-var semantic$l = tokens.semantic;
-var _a$6 = __assign(__assign({}, semantic$l), {
+var semantic$m = tokens.semantic;
+var _a$6 = __assign(__assign({}, semantic$m), {
     component: tokens.component
   }),
   color$b = _a$6.color,
-  motion$a = _a$6.motion,
-  radius$7 = _a$6.radius,
-  component$3 = _a$6.component;
+  motion$b = _a$6.motion,
+  radius$4 = _a$6.radius,
+  component$4 = _a$6.component;
 var ProgressBarContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
-})(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"])), tokens.component.track.background, radius$7.xs, forcedColorsEdge, function (props) {
-  return props.$variant === 'horizontal' && styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$3.progressBar.sizes[props.$height].height : component$3.progressBar.sizes.md.height);
+})(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"])), tokens.component.track.background, radius$4.xs, forcedColorsEdge, function (props) {
+  return props.$variant === 'horizontal' && styled.css(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$4.progressBar.sizes[props.$height].height : component$4.progressBar.sizes.md.height);
 }, function (props) {
-  return props.$variant === 'vertical' && styled.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$3.progressBar.sizes[props.$width].height : component$3.progressBar.sizes.md.height);
+  return props.$variant === 'vertical' && styled.css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$4.progressBar.sizes[props.$width].height : component$4.progressBar.sizes.md.height);
 });
 var ProgressBarFill = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2017,7 +2029,7 @@ var ProgressBarFill = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarFill",
   componentId: "sc-1nco33q-1"
-})(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n  height: 100%;\n  transition: width ", " ", ",\n              height ", " ", ",\n              background-color ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  /* The fill is the value, so it keeps a fill in forced colours, in the system selection colour (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: width ", " ", ",\n              height ", " ", ",\n              background-color ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  /* The fill is the value, so it keeps a fill in forced colours, in the system selection colour (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), motion$a.duration.moderate, motion$a.easing.standard, motion$a.duration.moderate, motion$a.easing.standard, motion$a.duration.moderate, motion$a.easing.standard, reducedMotion, forcedColors, function (props) {
+})(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n  height: 100%;\n  transition: width ", " ", ",\n              height ", " ", ",\n              background-color ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  /* The fill is the value, so it keeps a fill in forced colours, in the system selection colour (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: width ", " ", ",\n              height ", " ", ",\n              background-color ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  /* The fill is the value, so it keeps a fill in forced colours, in the system selection colour (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), motion$b.duration.moderate, motion$b.easing.standard, motion$b.duration.moderate, motion$b.easing.standard, motion$b.duration.moderate, motion$b.easing.standard, reducedMotion, forcedColors, function (props) {
   var backgroundColor;
   switch (props.$color) {
     case 'success':
@@ -2070,19 +2082,19 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$F, templateObject_2$x, templateObject_3$v, templateObject_4$q, templateObject_5$l, templateObject_6$g, templateObject_7$d;
+var templateObject_1$G, templateObject_2$y, templateObject_3$v, templateObject_4$q, templateObject_5$l, templateObject_6$g, templateObject_7$e;
 
 // Destructure tokens for cleaner access
 var separatorTokens = tokens.component.separator;
 // Margins come from the semantic separator spacing: no component spacing tokens (decision 0022)
-var space$f = tokens.semantic.space;
+var space$g = tokens.semantic.space;
 var StyledDivider = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
+})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
 /**
  * Divider is an atomic component that provides visual separation between content sections.
  *
@@ -2131,33 +2143,33 @@ var StyledDivider = /*#__PURE__*/styled__default.default.div.withConfig({
     $orientation = _d === void 0 ? 'horizontal' : _d;
   if ($variant === 'minimal' && $orientation === 'horizontal') {
     // Minimal variant always uses its predefined spacing for horizontal
-    return "margin: ".concat(space$f[600], " 0;");
+    return "margin: ".concat(space$g[600], " 0;");
   }
   if ($orientation === 'vertical') {
     // Vertical orientation uses horizontal margins (left/right)
     switch ($size) {
       case 'small':
-        return "margin: 0 ".concat(space$f[400], ";");
+        return "margin: 0 ".concat(space$g[400], ";");
       case 'medium':
-        return "margin: 0 ".concat(space$f[600], ";");
+        return "margin: 0 ".concat(space$g[600], ";");
       case 'xlarge':
-        return "margin: 0 ".concat(space$f[1200], ";");
+        return "margin: 0 ".concat(space$g[1200], ";");
       case 'large':
       default:
-        return "margin: 0 ".concat(space$f[800], ";");
+        return "margin: 0 ".concat(space$g[800], ";");
     }
   }
   // Horizontal orientation uses vertical margins (top/bottom)
   switch ($size) {
     case 'small':
-      return "margin: ".concat(space$f[400], " 0;");
+      return "margin: ".concat(space$g[400], " 0;");
     case 'medium':
-      return "margin: ".concat(space$f[600], " 0;");
+      return "margin: ".concat(space$g[600], " 0;");
     case 'xlarge':
-      return "margin: ".concat(space$f[1200], " 0;");
+      return "margin: ".concat(space$g[1200], " 0;");
     case 'large':
     default:
-      return "margin: ".concat(space$f[800], " 0;");
+      return "margin: ".concat(space$g[800], " 0;");
   }
 });
 /**
@@ -2195,7 +2207,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$E;
+var templateObject_1$F;
 
 var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2203,7 +2215,7 @@ var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
+})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
 // Each gap name maps to the space step that replaced its old spacing.layout token (decision 0031),
 // so every gap keeps its value
 ])));
@@ -2257,7 +2269,7 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
-var templateObject_1$D;
+var templateObject_1$E;
 
 // Shape indicators for the six coloured statuses (decision 0045): filled silhouettes on the
 // 24px grid, each the same outline as its status icon. Internal: they aren't public icons, so a
@@ -2278,7 +2290,7 @@ var statusShapes = {
 var Mark = /*#__PURE__*/styled__default.default.svg.withConfig({
   displayName: "StatusShape__Mark",
   componentId: "sc-1yzi9jt-0"
-})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"], ["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"])), tokens.semantic.size.icon.xs, tokens.semantic.size.icon.xs);
+})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"], ["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"])), tokens.semantic.size.icon.xs, tokens.semantic.size.icon.xs);
 var StatusShape = function StatusShape(_a) {
   var shape = _a.shape;
   return jsxRuntime.jsx(Mark, {
@@ -2291,20 +2303,20 @@ var StatusShape = function StatusShape(_a) {
     })
   });
 };
-var templateObject_1$C;
+var templateObject_1$D;
 
 // Destructure tokens for cleaner access
 var statusColors = tokens.component.status;
 var _a$5 = tokens.semantic,
-  space$e = _a$5.space,
-  radius$6 = _a$5.radius;
+  space$f = _a$5.space,
+  radius$3 = _a$5.radius;
 var _b$1 = tokens.semantic.motion,
   transition = _b$1.transition,
   duration$3 = _b$1.duration,
   easing$3 = _b$1.easing;
 var labelHeight = tokens.semantic.size.label;
 var label$1 = tokens.component.badge.label;
-var scaleIn$1 = styled.keyframes(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
+var scaleIn$1 = styled.keyframes(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
   // Each status's icon and, for the coloured statuses, its shape indicator (decision 0045). The
   // neutral statuses have no shape: at the small size they're plain text.
@@ -2355,16 +2367,16 @@ var getStatusConfig = function getStatusConfig(status) {
 var sizeConfig$2 = {
   small: {
     height: labelHeight.small,
-    padding: "".concat(space$e[100], " ").concat(space$e[200]),
+    padding: "".concat(space$f[100], " ").concat(space$f[200]),
     font: label$1.typography.small,
-    gap: space$e[100],
+    gap: space$f[100],
     iconSize: 'xs'
   },
   medium: {
     height: labelHeight.medium,
-    padding: "".concat(space$e[100], " ").concat(space$e[200]),
+    padding: "".concat(space$f[100], " ").concat(space$f[200]),
     font: label$1.typography.medium,
-    gap: space$e[100],
+    gap: space$f[100],
     iconSize: 'sm'
   }
 };
@@ -2374,7 +2386,7 @@ var StyledStatusLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "StatusLabelBase__StyledStatusLabel",
   componentId: "sc-1ye9xz5-0"
-})(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$6.full, scaleIn$1, duration$3.moderate, easing$3.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
+})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$3.full, scaleIn$1, duration$3.moderate, easing$3.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
   var $size = _a.$size;
   var size = sizeConfig$2[$size];
   return "\n      height: ".concat(size.height, ";\n      padding: ").concat(size.padding, ";\n      font: ").concat(size.font, ";\n      font-weight: ").concat(label$1.fontWeight, ";\n      gap: ").concat(size.gap, ";\n    ");
@@ -2444,7 +2456,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     })]
   });
 };
-var templateObject_1$B, templateObject_2$w, templateObject_3$u, templateObject_4$p;
+var templateObject_1$C, templateObject_2$x, templateObject_3$u, templateObject_4$p;
 
 /**
  * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
@@ -2467,30 +2479,30 @@ var StatusLabel = function StatusLabel(props) {
 };
 StatusLabel.displayName = 'StatusLabel';
 
-var semantic$k = tokens.semantic;
-var color$a = semantic$k.color,
-  size$6 = semantic$k.size;
+var semantic$l = tokens.semantic;
+var color$a = semantic$l.color,
+  size$8 = semantic$l.size;
 var label = tokens.component.badge.label;
-var space$d = semantic$k.space;
-var radius$5 = semantic$k.radius;
+var space$e = semantic$l.space;
+var radius$2 = semantic$l.radius;
 var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Tag__StyledTag",
   componentId: "sc-lzfmti-0"
-})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
 /**
  * Tag component for categorizing and labeling content
  *
  * A static, non-interactive label used to categorize elements or objects in the UI.
  * Tags help users quickly identify and understand content classification.
- */])), radius$5.sm, function (_a) {
+ */])), radius$2.sm, function (_a) {
   var $size = _a.$size;
-  return size$6.label[$size];
+  return size$8.label[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? "0 ".concat(space$d[200]) : "".concat(space$d[100], " ").concat(space$d[200]);
+  return $size === 'small' ? "0 ".concat(space$e[200]) : "".concat(space$e[100], " ").concat(space$e[200]);
 }, label.typography.small, label.fontWeight, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
@@ -2513,9 +2525,9 @@ var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'emphasis':
-      return "".concat(semantic$k.border.width.thin, " solid ").concat(color$a.fill.emphasis);
+      return "".concat(semantic$l.border.width.thin, " solid ").concat(color$a.fill.emphasis);
     default:
-      return "".concat(semantic$k.border.width.thin, " solid ").concat(color$a.border["default"]);
+      return "".concat(semantic$l.border.width.thin, " solid ").concat(color$a.border["default"]);
   }
 });
 /**
@@ -2547,7 +2559,7 @@ var Tag = function Tag(_a) {
     children: children
   }));
 };
-var templateObject_1$A;
+var templateObject_1$B;
 
 // How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils. A timer
 // needs the resolved value, not the CSS variable (decision 0041).
@@ -2683,6 +2695,8 @@ var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayou
 var supportsPopover = function supportsPopover() {
   return typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;
 };
+/** The trigger's width in px, set on the floating element when `matchAnchorWidth` is on */
+var ANCHOR_WIDTH_VAR = '--co-floating-anchor-width';
 var remToPx = function remToPx(value) {
   return parseFloat(value) * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
 };
@@ -2697,6 +2711,8 @@ function useFloatingLayer(_a) {
     anchorRef = _a.anchorRef,
     side = _a.side,
     align = _a.align,
+    _b = _a.matchAnchorWidth,
+    matchAnchorWidth = _b === void 0 ? false : _b,
     onDetach = _a.onDetach;
   useIsomorphicLayoutEffect$1(function () {
     var floating = floatingRef.current;
@@ -2709,6 +2725,8 @@ function useFloatingLayer(_a) {
       var trigger = laidOutElement(anchorRef.current);
       if (!trigger) return;
       var anchor = trigger.getBoundingClientRect();
+      // Before measuring, since it can widen the floating element
+      if (matchAnchorWidth) floating.style.setProperty(ANCHOR_WIDTH_VAR, "".concat(anchor.width, "px"));else floating.style.removeProperty(ANCHOR_WIDTH_VAR);
       var _a = floating.getBoundingClientRect(),
         width = _a.width,
         height = _a.height;
@@ -2735,10 +2753,13 @@ function useFloatingLayer(_a) {
     if (typeof ResizeObserver === 'undefined') return;
     var observer = new ResizeObserver(place);
     observer.observe(floating);
+    // Its width follows the trigger's, so a trigger that resizes while it's open places it again
+    var trigger = matchAnchorWidth ? laidOutElement(anchorRef.current) : null;
+    if (trigger) observer.observe(trigger);
     return function () {
       return observer.disconnect();
     };
-  }, [isPresent, side, align, floatingRef, anchorRef]);
+  }, [isPresent, side, align, matchAnchorWidth, floatingRef, anchorRef]);
   React.useEffect(function () {
     if (!isPresent) return;
     var onScroll = function onScroll(event) {
@@ -2769,19 +2790,19 @@ function isKeyboardFocus(target) {
   }
 }
 
-var semantic$j = tokens.semantic;
-var motion$9 = data.tokensJson.semantic.motion;
+var semantic$k = tokens.semantic;
+var motion$a = data.tokensJson.semantic.motion;
 // How long the pointer rests before the tooltip opens (#326)
-var HINT_DELAY_MS = parseInt(motion$9.delay.hint, 10);
+var HINT_DELAY_MS = parseInt(motion$a.delay.hint, 10);
 // Moving to another trigger within this window opens its tooltip at once, so a rail feels immediate
-var SKIP_DELAY_MS = parseInt(motion$9.duration.slow, 10);
+var SKIP_DELAY_MS = parseInt(motion$a.duration.slow, 10);
 // The grace period for the pointer to cross from the trigger onto the tooltip (WCAG 1.4.13)
-var CLOSE_GRACE_MS = parseInt(motion$9.duration.fast, 10);
+var CLOSE_GRACE_MS = parseInt(motion$a.duration.fast, 10);
 // Shared by every Tooltip: only one is open at a time, and the next one opens at once while one
 // is open or within the skip-delay window after it closed
 var lastClosedAt = 0;
 var active = null;
-var fadeIn$3 = styled.keyframes(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
+var fadeIn$3 = styled.keyframes(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
 // A fade, so it needs no reduced-motion fallback (0015). Entrances decelerate (0037).
 ])));
 // A fade, so it needs no reduced-motion fallback (0015). Entrances decelerate (0037).
@@ -2791,9 +2812,9 @@ var Bubble = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Tooltip__Bubble",
   componentId: "sc-ajez94-0"
-})(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"], ["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"])), semantic$j.size[7500], semantic$j.space.inset.xs, semantic$j.space.inset.sm, semantic$j.radius.sm, semantic$j.color.fill.inverse, semantic$j.color.text.inverse, semantic$j.typography.small, fadeIn$3, semantic$j.motion.duration.fast, semantic$j.motion.easing.decelerate, function (_a) {
+})(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"], ["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"])), semantic$k.size[7500], semantic$k.space.inset.xs, semantic$k.space.inset.sm, semantic$k.radius.sm, semantic$k.color.fill.inverse, semantic$k.color.text.inverse, semantic$k.typography.small, fadeIn$3, semantic$k.motion.duration.fast, semantic$k.motion.easing.decelerate, function (_a) {
   var $exiting = _a.$exiting;
-  return $exiting ? exitAnimation : styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject([""], [""])));
+  return $exiting ? exitAnimation : styled.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject([""], [""])));
 }, forcedColorsEdge);
 var Description$1 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Tooltip__Description",
@@ -2828,6 +2849,8 @@ var Tooltip = function Tooltip(_a) {
     side = _c === void 0 ? 'top' : _c,
     _d = _a.align,
     align = _d === void 0 ? 'center' : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
     children = _a.children,
     dataTestId = _a["data-testid"];
   var descriptionId = React.useId();
@@ -2840,12 +2863,20 @@ var Tooltip = function Tooltip(_a) {
   })[0];
   // Set by a press, so the focus that follows a click or tap doesn't reopen the tooltip
   var pressed = React.useRef(false);
-  var _e = React.useState(false),
-    isOpen = _e[0],
-    setIsOpen = _e[1];
-  var _f = usePresence(isOpen),
-    isPresent = _f.isPresent,
-    isExiting = _f.isExiting;
+  var _f = React.useState(false),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
+  // Turned off while showing (its label became visible): close it on the same render
+  var _g = React.useState(disabled),
+    wasDisabled = _g[0],
+    setWasDisabled = _g[1];
+  if (wasDisabled !== disabled) {
+    setWasDisabled(disabled);
+    if (disabled) setIsOpen(false);
+  }
+  var _h = usePresence(isOpen),
+    isPresent = _h.isPresent,
+    isExiting = _h.isExiting;
   var clearTimers = function clearTimers() {
     clearTimeout(openTimer.current);
     clearTimeout(closeTimer.current);
@@ -2869,7 +2900,7 @@ var Tooltip = function Tooltip(_a) {
   }, [owner, close]);
   var scheduleOpen = function scheduleOpen() {
     clearTimeout(closeTimer.current);
-    if (isOpen) return;
+    if (isOpen || disabled) return;
     // Moving straight from one trigger to the next (another tooltip still open) or just after one
     // closed skips the delay, so a rail feels immediate
     if (active || Date.now() - lastClosedAt < SKIP_DELAY_MS) return open();
@@ -2926,7 +2957,7 @@ var Tooltip = function Tooltip(_a) {
         pressed.current = false;
         return;
       }
-      if (isKeyboardFocus(event.target)) open();
+      if (!disabled && isKeyboardFocus(event.target)) open();
     },
     onBlur: function onBlur() {
       // A press on an already focused trigger has no focus to skip; don't carry it over
@@ -2956,12 +2987,12 @@ var Tooltip = function Tooltip(_a) {
   });
 };
 Tooltip.displayName = 'Tooltip';
-var templateObject_1$z, templateObject_2$v, templateObject_3$t, templateObject_4$o, templateObject_5$k;
+var templateObject_1$A, templateObject_2$w, templateObject_3$t, templateObject_4$o, templateObject_5$k;
 
-var semantic$i = tokens.semantic;
-var color$9 = semantic$i.color,
-  typography$5 = semantic$i.typography,
-  size$5 = semantic$i.size;
+var semantic$j = tokens.semantic;
+var color$9 = semantic$j.color,
+  typography$5 = semantic$j.typography,
+  size$7 = semantic$j.size;
 var labels = {
   suggested: 'Suggested',
   removal: 'Will be removed'
@@ -2969,12 +3000,12 @@ var labels = {
 var sizeConfig$1 = {
   small: {
     font: typography$5.caption,
-    gap: semantic$i.space[100],
+    gap: semantic$j.space[100],
     icon: 'xs'
   },
   medium: {
     font: typography$5.small,
-    gap: semantic$i.space[200],
+    gap: semantic$j.space[200],
     icon: 'sm'
   }
 };
@@ -2984,9 +3015,9 @@ var StyledAILabel = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "AILabel__StyledAILabel",
   componentId: "sc-qknkn-0"
-})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
   var $size = _a.$size;
-  return size$5.label[$size];
+  return size$7.label[$size];
 }, function (_a) {
   var $size = _a.$size;
   return sizeConfig$1[$size].gap;
@@ -2997,7 +3028,7 @@ var StyledAILabel = /*#__PURE__*/styled__default.default.span.withConfig({
 var StyledIcon = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "AILabel__StyledIcon",
   componentId: "sc-qknkn-1"
-})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: inline-flex;\n  color: ", ";\n"], ["\n  display: inline-flex;\n  color: ", ";\n"
+})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  display: inline-flex;\n  color: ", ";\n"], ["\n  display: inline-flex;\n  color: ", ";\n"
 /**
  * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
  * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
@@ -3040,26 +3071,26 @@ var AILabel = function AILabel(_a) {
   });
 };
 AILabel.displayName = 'AILabel';
-var templateObject_1$y, templateObject_2$u;
+var templateObject_1$z, templateObject_2$v;
 
 // Destructure tokens for cleaner access
-var semantic$h = tokens.semantic;
-var space$c = semantic$h.space;
+var semantic$i = tokens.semantic;
+var space$d = semantic$i.space;
 var StyledBalanceSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
   componentId: "sc-1erp7zn-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), space$c[400]);
+})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), space$d[400]);
 var StyledTrendSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
   componentId: "sc-1erp7zn-1"
-})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n  font: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n  font: ", ";\n"])), space$c[100], function (_a) {
+})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n  font: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n  font: ", ";\n"])), space$d[100], function (_a) {
   var $color = _a.$color;
   return $color;
-}, semantic$h.typography.small);
+}, semantic$i.typography.small);
 /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledActions",
   componentId: "sc-1erp7zn-2"
-})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), space$c[200]);
+})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), space$d[200]);
 var StyledStackWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
   componentId: "sc-1erp7zn-3"
@@ -3069,7 +3100,7 @@ var StyledHeaderWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   componentId: "sc-1erp7zn-4"
 })(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: calc(-1 * ", ");\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: calc(-1 * ", ");\n  }\n"
 // Map trend direction to icon and color
-])), tokens.component.accountCard.header.minHeight, space$c[0], space$c[100]);
+])), tokens.component.accountCard.header.minHeight, space$d[0], space$d[100]);
 // Map trend direction to icon and color
 var trendToIcon = {
   up: 'arrowUp',
@@ -3079,9 +3110,9 @@ var trendToIcon = {
 // A trend is a differential indicator (decision 0045): the arrow and the signed value carry the
 // direction, and the role colour repeats it. Category colours carry no meaning, so they aren't used.
 var trendToColor = {
-  up: semantic$h.color.text.success,
-  down: semantic$h.color.text.danger,
-  neutral: semantic$h.color.text.muted
+  up: semantic$i.color.text.success,
+  down: semantic$i.color.text.danger,
+  neutral: semantic$i.color.text.muted
 };
 /**
  * AccountCard component
@@ -3125,7 +3156,7 @@ var AccountCard = function AccountCard(_a) {
     bg: "surface.raised",
     border: "default",
     borderRadius: "xl",
-    transition: "box-shadow ".concat(semantic$h.motion.duration.moderate, " ").concat(semantic$h.motion.easing.decelerate),
+    transition: "box-shadow ".concat(semantic$i.motion.duration.moderate, " ").concat(semantic$i.motion.easing.decelerate),
     cursor: isClickable ? 'pointer' : 'default',
     hoverShadow: isClickable ? 'floating' : undefined,
     onClick: handleClick,
@@ -3223,7 +3254,7 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$x, templateObject_2$t, templateObject_3$s, templateObject_4$n, templateObject_5$j;
+var templateObject_1$y, templateObject_2$u, templateObject_3$s, templateObject_4$n, templateObject_5$j;
 
 /**
  * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
@@ -3231,8 +3262,8 @@ var templateObject_1$x, templateObject_2$t, templateObject_3$s, templateObject_4
  */
 var ListSpacingContext = /*#__PURE__*/React.createContext('comfortable');
 
-var semantic$g = tokens.semantic;
-var _a$4 = semantic$g.motion,
+var semantic$h = tokens.semantic;
+var _a$4 = semantic$h.motion,
   duration$2 = _a$4.duration,
   easing$2 = _a$4.easing;
 var StyledListItem = /*#__PURE__*/styled__default.default.li.withConfig({
@@ -3241,16 +3272,16 @@ var StyledListItem = /*#__PURE__*/styled__default.default.li.withConfig({
   },
   displayName: "ListItem__StyledListItem",
   componentId: "sc-1wzzt21-0"
-})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), semantic$g.size.row.md, function (_a) {
+})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), semantic$h.size.row.md, function (_a) {
   var $interactive = _a.$interactive;
   return $interactive && 'user-select: none;';
 }, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled && "\n    opacity: ".concat(semantic$g.opacity.disabled, ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
+  return $disabled && "\n    opacity: ".concat(semantic$h.opacity.disabled, ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
 }, function (_a) {
   var $destructive = _a.$destructive,
     $disabled = _a.$disabled;
-  return $destructive && !$disabled && "\n    color: ".concat(semantic$g.color.text.danger, ";\n  ");
+  return $destructive && !$disabled && "\n    color: ".concat(semantic$h.color.text.danger, ";\n  ");
 });
 var StyledItemContent = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3258,10 +3289,10 @@ var StyledItemContent = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "ListItem__StyledItemContent",
   componentId: "sc-1wzzt21-1"
-})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  /* Insets, so the row's padding follows density with its height (decision 0051) */\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  /* Insets, so the row's padding follows density with its height (decision 0051) */\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), semantic$g.space[300], function (_a) {
+})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  /* Insets, so the row's padding follows density with its height (decision 0051) */\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  /* Insets, so the row's padding follows density with its height (decision 0051) */\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), semantic$h.space[300], function (_a) {
   var $spacing = _a.$spacing;
-  return $spacing === 'compact' ? "".concat(semantic$g.space.inset.sm, " ").concat(semantic$g.space.inset.md) : "".concat(semantic$g.space.inset.md, " ").concat(semantic$g.space.inset.lg);
-}, semantic$g.radius.sm, duration$2.fast, easing$2.decelerate, duration$2.fast, easing$2.decelerate, function (_a) {
+  return $spacing === 'compact' ? "".concat(semantic$h.space.inset.sm, " ").concat(semantic$h.space.inset.md) : "".concat(semantic$h.space.inset.md, " ").concat(semantic$h.space.inset.lg);
+}, rowRadius, duration$2.fast, easing$2.decelerate, duration$2.fast, easing$2.decelerate, function (_a) {
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled;
   if ($disabled) return 'not-allowed';
@@ -3276,26 +3307,26 @@ var StyledItemContent = /*#__PURE__*/styled__default.default.div.withConfig({
     disabled: $disabled || !$interactive,
     textSelector: "".concat(StyledTextContent, " > :first-child")
   });
-}, semantic$g.border.focus, semantic$g.border.focusOffset);
+}, semantic$h.border.focus, semantic$h.border.focusOffset);
 var StyledIconContainer$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
   componentId: "sc-1wzzt21-2"
-})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic$g.size.icon.lg, semantic$g.size.icon.lg);
+})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic$h.size.icon.lg, semantic$h.size.icon.lg);
 var StyledTextContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ListItem__StyledTextContent",
   componentId: "sc-1wzzt21-3"
-})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$g.space[100]);
+})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$h.space[100]);
 var StyledRightContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ListItem__StyledRightContent",
   componentId: "sc-1wzzt21-4"
-})(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$g.space[200]);
+})(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$h.space[200]);
 var StyledChevronIcon = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledChevronIcon",
   componentId: "sc-1wzzt21-5"
-})(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"])), semantic$g.size.icon.lg, semantic$g.size.icon.lg, semantic$g.color.icon.muted, duration$2.fast, easing$2.decelerate, function (_a) {
+})(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"])), semantic$h.size.icon.lg, semantic$h.size.icon.lg, semantic$h.color.icon.muted, duration$2.fast, easing$2.decelerate, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '180deg' : '0deg';
 }, reducedMotion);
@@ -3305,7 +3336,7 @@ var StyledExpandedContent = /*#__PURE__*/styled__default.default.div.withConfig(
   },
   displayName: "ListItem__StyledExpandedContent",
   componentId: "sc-1wzzt21-6"
-})(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              margin ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"], ["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              margin ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"])), duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, function (_a) {
+})(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              margin ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"], ["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              margin ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"])), duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '1000px' : '0';
 }, function (_a) {
@@ -3317,7 +3348,7 @@ var StyledExpandedContent = /*#__PURE__*/styled__default.default.div.withConfig(
 }, reducedMotion, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, function (_a) {
   var $expanded = _a.$expanded,
     $spacing = _a.$spacing;
-  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$g.space[200], " ").concat(semantic$g.space[300], " ").concat(semantic$g.space[200], " ").concat(tokens.component.listItem.expandedIndent.compact) : "".concat(semantic$g.space[200], " ").concat(semantic$g.space[400], " ").concat(semantic$g.space[300], " ").concat(tokens.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic$g.surface.raised, ";\n    border-radius: ").concat(semantic$g.radius.sm, ";\n    /* The row's own insets, so the panel lines up with the row in every density (0051) */\n    margin: 0 ").concat($spacing === 'compact' ? semantic$g.space.inset.md : semantic$g.space.inset.lg, " ").concat($spacing === 'compact' ? semantic$g.space.inset.sm : semantic$g.space.inset.md, ";\n  ");
+  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$h.space[200], " ").concat(semantic$h.space[300], " ").concat(semantic$h.space[200], " ").concat(tokens.component.listItem.expandedIndent.compact) : "".concat(semantic$h.space[200], " ").concat(semantic$h.space[400], " ").concat(semantic$h.space[300], " ").concat(tokens.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic$h.surface.raised, ";\n    border-radius: ").concat(rowRadius, ";\n    /* The row's own insets, so the panel lines up with the row in every density (0051) */\n    margin: 0 ").concat($spacing === 'compact' ? semantic$h.space.inset.md : semantic$h.space.inset.lg, " ").concat($spacing === 'compact' ? semantic$h.space.inset.sm : semantic$h.space.inset.md, ";\n  ");
 });
 var ListItem = function ListItem(_a) {
   var primary = _a.primary,
@@ -3439,37 +3470,37 @@ var ListItem = function ListItem(_a) {
   );
 };
 ListItem.displayName = 'ListItem';
-var templateObject_1$w, templateObject_2$s, templateObject_3$r, templateObject_4$m, templateObject_5$i, templateObject_6$f, templateObject_7$c;
+var templateObject_1$x, templateObject_2$t, templateObject_3$r, templateObject_4$m, templateObject_5$i, templateObject_6$f, templateObject_7$d;
 
 var _a$3 = tokens.semantic,
   color$8 = _a$3.color,
-  border$7 = _a$3.border,
-  space$b = _a$3.space,
-  motion$8 = _a$3.motion,
+  border$6 = _a$3.border,
+  space$c = _a$3.space,
+  motion$9 = _a$3.motion,
   elevation$3 = _a$3.elevation;
-var slideUp = styled.keyframes(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
-var fadeIn$2 = styled.keyframes(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var slideUp = styled.keyframes(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
+var fadeIn$2 = styled.keyframes(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 var StyledOverlay$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
-})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), tokens.semantic.surface.scrim, tokens.semantic.layer.modal, fadeIn$2, motion$8.duration.moderate, motion$8.easing.decelerate, function (_a) {
+})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), tokens.semantic.surface.scrim, tokens.semantic.layer.modal, fadeIn$2, motion$9.duration.moderate, motion$9.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
 var StyledActionSheet = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
-})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.raised, tokens.semantic.radius.lg, tokens.semantic.radius.lg, elevation$3.overlay, tokens.semantic.layer.modal, slideUp, motion$8.duration.slow, motion$8.easing.decelerate, function (_a) {
+})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.overlay, tokens.component.overlay.borderRadius, tokens.component.overlay.borderRadius, elevation$3.overlay, tokens.semantic.layer.modal, slideUp, motion$9.duration.slow, motion$9.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
-}, reducedMotion, fadeIn$2, motion$8.duration.slow, motion$8.easing.decelerate, function (_a) {
+}, reducedMotion, fadeIn$2, motion$9.duration.slow, motion$9.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
 var StyledHeader$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledHeader",
   componentId: "sc-regbol-2"
-})(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), space$b[400], space$b[400], space$b[300], border$7["default"]);
+})(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), space$c[400], space$c[400], space$c[300], border$6["default"]);
 var StyledHeaderContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
@@ -3477,7 +3508,7 @@ var StyledHeaderContent = /*#__PURE__*/styled__default.default.div.withConfig({
 var StyledCloseButton = /*#__PURE__*/styled__default.default.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space$b[200], color$8.icon.muted, tokens.semantic.radius.sm, motion$8.transition.feedback, space$b[200], color$8.icon["default"], color$8.fill.muted, border$7.focus, border$7.focusOffset);
+})(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space$c[200], color$8.icon.muted, tokens.semantic.radius.md, motion$9.transition.feedback, space$c[200], color$8.icon["default"], color$8.fill.muted, border$6.focus, border$6.focusOffset);
 var StyledActionsList = /*#__PURE__*/styled__default.default.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
@@ -3514,7 +3545,7 @@ var StyledActionsList = /*#__PURE__*/styled__default.default.ul.withConfig({
  *   ]}
  * />
  * ```
- */])), space$b[200], space$b[300]);
+ */])), space$c[200], space$c[300]);
 /**
  * ActionSheet component for bottom sheet modals
  *
@@ -3705,7 +3736,7 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$v, templateObject_2$r, templateObject_3$q, templateObject_4$l, templateObject_5$h, templateObject_6$e, templateObject_7$b, templateObject_8$a;
+var templateObject_1$w, templateObject_2$s, templateObject_3$q, templateObject_4$l, templateObject_5$h, templateObject_6$e, templateObject_7$c, templateObject_8$a;
 
 function detectSpeechRecognitionConstructor(targetWindow) {
   if (!targetWindow) return null;
@@ -3809,24 +3840,24 @@ function agentInputStateTransition(currentState, event) {
   }
 }
 
-var semantic$f = tokens.semantic,
-  component$2 = tokens.component;
+var semantic$g = tokens.semantic,
+  component$3 = tokens.component;
 var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
 var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
 // The counter appears from this share of maxLength
 var COUNTER_THRESHOLD = 0.8;
 // Layout effects warn during server rendering in React 18
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-var rotateRing = styled.keyframes(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var rotateRing = styled.keyframes(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 var Container = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__Container",
   componentId: "sc-fhl996-0"
-})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n\n  ", "\n"])), semantic$f.space[200], function (_a) {
+})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n\n  ", "\n"])), semantic$g.space[200], function (_a) {
   var $docked = _a.$docked;
-  return $docked && styled.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n      position: sticky;\n      bottom: 0;\n      z-index: ", ";\n      /* The band hides content scrolling past the field and status line (decisions 0006, 0031) */\n      background-color: ", ";\n      padding-top: ", ";\n      /* Clears the home indicator; zero unless the page sets viewport-fit=cover */\n      padding-bottom: env(safe-area-inset-bottom, 0px);\n    "], ["\n      position: sticky;\n      bottom: 0;\n      z-index: ", ";\n      /* The band hides content scrolling past the field and status line (decisions 0006, 0031) */\n      background-color: ", ";\n      padding-top: ", ";\n      /* Clears the home indicator; zero unless the page sets viewport-fit=cover */\n      padding-bottom: env(safe-area-inset-bottom, 0px);\n    "])), semantic$f.layer.sticky, semantic$f.surface.base, semantic$f.space[300]);
+  return $docked && styled.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n      position: sticky;\n      bottom: 0;\n      z-index: ", ";\n      /* The band hides content scrolling past the field and status line (decisions 0006, 0031) */\n      background-color: ", ";\n      padding-top: ", ";\n      /* Clears the home indicator; zero unless the page sets viewport-fit=cover */\n      padding-bottom: env(safe-area-inset-bottom, 0px);\n    "], ["\n      position: sticky;\n      bottom: 0;\n      z-index: ", ";\n      /* The band hides content scrolling past the field and status line (decisions 0006, 0031) */\n      background-color: ", ";\n      padding-top: ", ";\n      /* Clears the home indicator; zero unless the page sets viewport-fit=cover */\n      padding-bottom: env(safe-area-inset-bottom, 0px);\n    "])), semantic$g.layer.sticky, semantic$g.surface.base, semantic$g.space[300]);
 });
 var ControlsRow = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__ControlsRow",
@@ -3838,21 +3869,21 @@ var InputShell = /*#__PURE__*/styled__default.default.div.withConfig({
 })(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  display: flex;\n  /* Actions sit beside the last line as the field grows */\n  align-items: flex-end;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  /* Actions sit beside the last line as the field grows */\n  align-items: flex-end;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"
 // One row is a control-height field; it grows with its content to six rows, then scrolls.
 // The height is set from scrollHeight in resizeField; 1lh is the body line height.
-])), semantic$f.space[200], semantic$f.space[100], semantic$f.space[200], semantic$f.space[100], semantic$f.space.inset.lg, component$2.input["default"].backgroundColor, component$2.input["default"].borderWidth, component$2.input["default"].borderColor, semantic$f.radius['3xl'], semantic$f.elevation.raised, semantic$f.motion.duration.moderate, semantic$f.motion.easing.standard, semantic$f.motion.duration.moderate, semantic$f.motion.easing.standard, component$2.input.focus.borderColor, component$2.input.focus.outline, semantic$f.border.focusOffset, component$2.input.disabled.backgroundColor, component$2.input.disabled.borderColor);
+])), semantic$g.space[200], semantic$g.space[100], semantic$g.space[200], semantic$g.space[100], semantic$g.space.inset.lg, component$3.input["default"].backgroundColor, component$3.input["default"].borderWidth, component$3.input["default"].borderColor, semantic$g.radius['3xl'], semantic$g.elevation.raised, semantic$g.motion.duration.moderate, semantic$g.motion.easing.standard, semantic$g.motion.duration.moderate, semantic$g.motion.easing.standard, component$3.input.focus.borderColor, component$3.input.focus.outline, semantic$g.border.focusOffset, component$3.input.disabled.backgroundColor, component$3.input.disabled.borderColor);
 // One row is a control-height field; it grows with its content to six rows, then scrolls.
 // The height is set from scrollHeight in resizeField; 1lh is the body line height.
 var Input = /*#__PURE__*/styled__default.default.textarea.withConfig({
   displayName: "AgentInput__Input",
   componentId: "sc-fhl996-3"
-})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  display: block;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  height: ", ";\n  min-height: ", ";\n  max-height: calc(5lh + ", ");\n  margin: 0;\n  padding: calc((", " - 1lh) / 2) 0;\n  resize: none;\n  overflow-y: hidden;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  display: block;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  height: ", ";\n  min-height: ", ";\n  max-height: calc(5lh + ", ");\n  margin: 0;\n  padding: calc((", " - 1lh) / 2) 0;\n  resize: none;\n  overflow-y: hidden;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$f.size.control.lg, semantic$f.size.control.lg, semantic$f.size.control.lg, semantic$f.size.control.lg, semantic$f.typography.body, semantic$f.color.text["default"], component$2.input.placeholder.textColor, semantic$f.color.text.disabled);
+})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  display: block;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  height: ", ";\n  min-height: ", ";\n  max-height: calc(5lh + ", ");\n  margin: 0;\n  padding: calc((", " - 1lh) / 2) 0;\n  resize: none;\n  overflow-y: hidden;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  display: block;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  height: ", ";\n  min-height: ", ";\n  max-height: calc(5lh + ", ");\n  margin: 0;\n  padding: calc((", " - 1lh) / 2) 0;\n  resize: none;\n  overflow-y: hidden;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$g.size.control.lg, semantic$g.size.control.lg, semantic$g.size.control.lg, semantic$g.size.control.lg, semantic$g.typography.body, semantic$g.color.text["default"], component$3.input.placeholder.textColor, semantic$g.color.text.disabled);
 var InputActions = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__InputActions",
   componentId: "sc-fhl996-4"
-})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  /* Centres the buttons on a one-row field, and keeps them level with the last line as it grows */\n  padding-bottom: calc((", " - ", ") / 2);\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  /* Centres the buttons on a one-row field, and keeps them level with the last line as it grows */\n  padding-bottom: calc((", " - ", ") / 2);\n"])), semantic$f.space[200], semantic$f.size.control.lg, semantic$f.size.control.md);
+})(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  /* Centres the buttons on a one-row field, and keeps them level with the last line as it grows */\n  padding-bottom: calc((", " - ", ") / 2);\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  /* Centres the buttons on a one-row field, and keeps them level with the last line as it grows */\n  padding-bottom: calc((", " - ", ") / 2);\n"])), semantic$g.space[200], semantic$g.size.control.lg, semantic$g.size.control.md);
 var CircularActionIconButton = /*#__PURE__*/styled__default.default(IconButton).withConfig({
   displayName: "AgentInput__CircularActionIconButton",
   componentId: "sc-fhl996-5"
-})(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$f.radius.full);
+})(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$g.radius.full);
 var InputWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__InputWrapper",
   componentId: "sc-fhl996-6"
@@ -3863,10 +3894,10 @@ var MicButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "AgentInput__MicButtonWrapper",
   componentId: "sc-fhl996-7"
-})(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"
+})(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"
 // Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
 // eslint-disable-next-line no-restricted-syntax
-])), semantic$f.radius.full);
+])), semantic$g.radius.full);
 // Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
 // eslint-disable-next-line no-restricted-syntax
 var ringMask = styled.css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"], ["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"])));
@@ -3878,13 +3909,13 @@ var MicListeningRing = /*#__PURE__*/styled__default.default.span.withConfig({
   componentId: "sc-fhl996-8"
 })(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"
 // Maximum suggestions shown (decision 0046, #280)
-])), semantic$f.border.width.thick, semantic$f.space[100], semantic$f.border.focusOffset, semantic$f.radius.full, semantic$f.color.fill['accent-muted'], semantic$f.color.fill.accent, semantic$f.color.fill['accent-hover'], semantic$f.color.fill.accent, semantic$f.color.fill['accent-muted'], ringMask, ringMask, function (_a) {
+])), semantic$g.border.width.thick, semantic$g.space[100], semantic$g.border.focusOffset, semantic$g.radius.full, semantic$g.color.fill['accent-muted'], semantic$g.color.fill.accent, semantic$g.color.fill['accent-hover'], semantic$g.color.fill.accent, semantic$g.color.fill['accent-muted'], ringMask, ringMask, function (_a) {
   var $reducedMotion = _a.$reducedMotion;
   return !$reducedMotion && styled.css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
 });
 // Maximum suggestions shown (decision 0046, #280)
 var MAX_SUGGESTIONS = 3;
-var regionEnter = styled.keyframes(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"])), semantic$f.motion.distance.sm);
+var regionEnter = styled.keyframes(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"])), semantic$g.motion.distance.sm);
 var regionFadeIn = styled.keyframes(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n"
 // Leaving content fades, then its space closes, as with Alert's dismiss (decision 0015). A grid
 // row from 1fr to 0fr collapses to the content's own height without measuring it.
@@ -3904,10 +3935,10 @@ var RegionItem = /*#__PURE__*/styled__default.default.div.withConfig({
   componentId: "sc-fhl996-9"
 })(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: 1fr;\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation-name: ", ";\n  }\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: 1fr;\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation-name: ", ";\n  }\n\n  ", "\n"
 // Clips while the row collapses. Its bottom padding is the space to the next part, so it closes too.
-])), regionEnter, semantic$f.motion.duration.moderate, semantic$f.motion.easing.decelerate, reducedMotion, regionFadeIn, function (_a) {
+])), regionEnter, semantic$g.motion.duration.moderate, semantic$g.motion.easing.decelerate, reducedMotion, regionFadeIn, function (_a) {
   var $exiting = _a.$exiting,
     $reducedExit = _a.$reducedExit;
-  return $exiting && styled.css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n      pointer-events: none;\n      animation: ", ";\n    "], ["\n      pointer-events: none;\n      animation: ", ";\n    "])), $reducedExit ? styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), regionFadeOut, semantic$f.motion.duration.fast, semantic$f.motion.easing.accelerate) : styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["", " calc(2 * ", ") ", " forwards"], ["", " calc(2 * ", ") ", " forwards"])), regionFadeThenCollapse, semantic$f.motion.duration.fast, semantic$f.motion.easing.accelerate));
+  return $exiting && styled.css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n      pointer-events: none;\n      animation: ", ";\n    "], ["\n      pointer-events: none;\n      animation: ", ";\n    "])), $reducedExit ? styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), regionFadeOut, semantic$g.motion.duration.fast, semantic$g.motion.easing.accelerate) : styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["", " calc(2 * ", ") ", " forwards"], ["", " calc(2 * ", ") ", " forwards"])), regionFadeThenCollapse, semantic$g.motion.duration.fast, semantic$g.motion.easing.accelerate));
 });
 // Clips while the row collapses. Its bottom padding is the space to the next part, so it closes too.
 var RegionItemContent = /*#__PURE__*/styled__default.default.div.withConfig({
@@ -3915,31 +3946,31 @@ var RegionItemContent = /*#__PURE__*/styled__default.default.div.withConfig({
   componentId: "sc-fhl996-10"
 })(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n  min-height: 0;\n  overflow: hidden;\n  padding-bottom: ", ";\n  padding-left: ", ";\n"], ["\n  min-height: 0;\n  overflow: hidden;\n  padding-bottom: ", ";\n  padding-left: ", ";\n"
 // The summary first, then the actions, left-aligned after it; they wrap below on narrow screens (0021)
-])), semantic$f.space[200], semantic$f.space[500]);
+])), semantic$g.space[200], semantic$g.space[500]);
 // The summary first, then the actions, left-aligned after it; they wrap below on narrow screens (0021)
 var ReviewBar = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__ReviewBar",
   componentId: "sc-fhl996-11"
-})(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: ", ";\n  row-gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: ", ";\n  row-gap: ", ";\n"])), semantic$f.space[300], semantic$f.space[200]);
+})(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: ", ";\n  row-gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: ", ";\n  row-gap: ", ";\n"])), semantic$g.space[300], semantic$g.space[200]);
 var ReviewActions = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__ReviewActions",
   componentId: "sc-fhl996-12"
-})(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"])), semantic$f.space[200]);
+})(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"])), semantic$g.space[200]);
 var SuggestionList = /*#__PURE__*/styled__default.default.ul.withConfig({
   displayName: "AgentInput__SuggestionList",
   componentId: "sc-fhl996-13"
-})(templateObject_25$1 || (templateObject_25$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  & > li {\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  & > li {\n    max-width: 100%;\n  }\n"])), semantic$f.space[200]);
+})(templateObject_25$1 || (templateObject_25$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  & > li {\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  & > li {\n    max-width: 100%;\n  }\n"])), semantic$g.space[200]);
 var StatusRow = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__StatusRow",
   componentId: "sc-fhl996-14"
-})(templateObject_26$1 || (templateObject_26$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$f.space[300], semantic$f.space[600]);
+})(templateObject_26$1 || (templateObject_26$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$g.space[300], semantic$g.space[600]);
 var StatusText = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__StatusText",
   componentId: "sc-fhl996-15"
-})(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$f.space[500]);
+})(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$g.space[500]);
 var StatusAnnouncement = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__StatusAnnouncement",
   componentId: "sc-fhl996-16"
@@ -3947,7 +3978,7 @@ var StatusAnnouncement = /*#__PURE__*/styled__default.default.div.withConfig({
 var StatusEnd = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__StatusEnd",
   componentId: "sc-fhl996-17"
-})(templateObject_29$1 || (templateObject_29$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$f.space[300]);
+})(templateObject_29$1 || (templateObject_29$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$g.space[300]);
 var VisuallyHidden = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "AgentInput__VisuallyHidden",
   componentId: "sc-fhl996-18"
@@ -3955,17 +3986,17 @@ var VisuallyHidden = /*#__PURE__*/styled__default.default.span.withConfig({
 var MeterContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__MeterContainer",
   componentId: "sc-fhl996-19"
-})(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic$f.space[100], semantic$f.space[400]);
+})(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic$g.space[100], semantic$g.space[400]);
 var MeterBar = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MeterBar",
   componentId: "sc-fhl996-20"
-})(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$f.space[100], semantic$f.radius.xs, semantic$f.color.fill.accent, function (_a) {
+})(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$g.space[100], semantic$g.radius.xs, semantic$g.color.fill.accent, function (_a) {
   var $height = _a.$height;
   return "".concat($height * 100, "%");
-}, semantic$f.motion.duration.fast, semantic$f.motion.easing.decelerate);
+}, semantic$g.motion.duration.fast, semantic$g.motion.easing.decelerate);
 var VisuallyHiddenLabel = /*#__PURE__*/styled__default.default.label.withConfig({
   displayName: "AgentInput__VisuallyHiddenLabel",
   componentId: "sc-fhl996-21"
@@ -4886,11 +4917,11 @@ function AgentInputWithRef(_a, ref) {
 }
 var AgentInput = /*#__PURE__*/React.forwardRef(AgentInputWithRef);
 AgentInput.displayName = 'AgentInput';
-var templateObject_1$u, templateObject_2$q, templateObject_3$p, templateObject_4$k, templateObject_5$g, templateObject_6$d, templateObject_7$a, templateObject_8$9, templateObject_9$8, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1;
+var templateObject_1$v, templateObject_2$r, templateObject_3$p, templateObject_4$k, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$9, templateObject_9$8, templateObject_10$6, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1;
 
-var semantic$e = tokens.semantic;
+var semantic$f = tokens.semantic;
 var alert = tokens.component.alert;
-var _a$2 = semantic$e.motion,
+var _a$2 = semantic$f.motion,
   duration$1 = _a$2.duration,
   easing$1 = _a$2.easing;
 // Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
@@ -4900,8 +4931,8 @@ var FADE_MS = parseInt(data.tokensJson.semantic.motion.duration.fast, 10);
 var EXIT_MS = FADE_MS * 2;
 // The --alert-exit-* properties are the alert's height and vertical padding, measured
 // when it's dismissed, so nothing moves until the fade has finished
-var fadeThenCollapse = styled.keyframes(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"], ["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"])), semantic$e.border.width.thin);
-var fadeOut = styled.keyframes(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"], ["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"
+var fadeThenCollapse = styled.keyframes(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"], ["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"])), semantic$f.border.width.thin);
+var fadeOut = styled.keyframes(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"], ["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"
 // The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
 // (chosen when dismissed). A timer of the same length removes it if no animation event
 // arrives, for example where animations are disabled or the tab is hidden.
@@ -4940,7 +4971,7 @@ var StyledAlert = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Alert__StyledAlert",
   componentId: "sc-18tq5d-0"
-})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), semantic$e.space[300], semantic$e.space[300], semantic$e.radius.sm, semantic$e.border.width.thin, function (_a) {
+})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), semantic$f.space[300], semantic$f.space[300], semantic$f.radius.lg, semantic$f.border.width.thin, function (_a) {
   var _b = _a.$variant,
     $variant = _b === void 0 ? 'info' : _b;
   return alert.severity[$variant].background;
@@ -4953,7 +4984,7 @@ var StyledAlert = /*#__PURE__*/styled__default.default.div.withConfig({
     $variant = _b === void 0 ? 'info' : _b,
     $appearance = _a.$appearance;
   return alert.appearance[$appearance].borderColor[$variant];
-}, semantic$e.breakpoint.md, semantic$e.space[400], function (_a) {
+}, semantic$f.breakpoint.md, semantic$f.space[400], function (_a) {
   var $isExiting = _a.$isExiting,
     $reducedExit = _a.$reducedExit;
   return $isExiting && styled.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? styled.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.accelerate) : styled.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.accelerate));
@@ -4961,11 +4992,11 @@ var StyledAlert = /*#__PURE__*/styled__default.default.div.withConfig({
 var StyledIconContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Alert__StyledIconContainer",
   componentId: "sc-18tq5d-1"
-})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
+})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
 var StyledContent$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Alert__StyledContent",
   componentId: "sc-18tq5d-2"
-})(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$e.space[100]);
+})(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$f.space[100]);
 var StyledTitle = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
@@ -4973,7 +5004,7 @@ var StyledTitle = /*#__PURE__*/styled__default.default.span.withConfig({
 var StyledMessage$1 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Alert__StyledMessage",
   componentId: "sc-18tq5d-4"
-})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  font: ", ";\n  line-height: ", ";\n"], ["\n  font: ", ";\n  line-height: ", ";\n"
+})(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n  font: ", ";\n  line-height: ", ";\n"], ["\n  font: ", ";\n  line-height: ", ";\n"
 // The action follows the content, left-aligned with it, so it's read after the message
 // (#122). With the content's xs gap, the space above it is md: a separate step.
 ])), alert.message.typography, alert.message.lineHeight);
@@ -4987,7 +5018,7 @@ var StyledActions = /*#__PURE__*/styled__default.default.div.withConfig({
 // message when there's no title (decision 0019). The slot is as tall as that line and the
 // button is centred in it, overflowing evenly into the padding, so it stays aligned at every
 // padding and line height. Being in the row, it also keeps text and actions from running under it.
-])), semantic$e.space[200], semantic$e.space[300], semantic$e.space[100]);
+])), semantic$f.space[200], semantic$f.space[300], semantic$f.space[100]);
 // The dismiss button's centre lines up with the first line of content: the title, or the
 // message when there's no title (decision 0019). The slot is as tall as that line and the
 // button is centred in it, overflowing evenly into the padding, so it stays aligned at every
@@ -5008,7 +5039,7 @@ var StyledDismissSlot = /*#__PURE__*/styled__default.default.div.withConfig({
 var StyledDismissButton = /*#__PURE__*/styled__default.default(IconButton).withConfig({
   displayName: "Alert__StyledDismissButton",
   componentId: "sc-18tq5d-7"
-})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n  margin-right: calc((", " - ", ") / -2);\n"], ["\n  margin-right: calc((", " - ", ") / -2);\n"])), semantic$e.size.control.sm, semantic$e.size.icon.sm);
+})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n  margin-right: calc((", " - ", ") / -2);\n"], ["\n  margin-right: calc((", " - ", ") / -2);\n"])), semantic$f.size.control.sm, semantic$f.size.icon.sm);
 var Alert = function Alert(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'info' : _b,
@@ -5144,12 +5175,12 @@ var Alert = function Alert(_a) {
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$t, templateObject_2$p, templateObject_3$o, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$7, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3;
+var templateObject_1$u, templateObject_2$q, templateObject_3$o, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$3, templateObject_13$3;
 
-var semantic$d = tokens.semantic;
-var color$7 = semantic$d.color,
-  typography$4 = semantic$d.typography,
-  size$4 = semantic$d.size;
+var semantic$e = tokens.semantic;
+var color$7 = semantic$e.color,
+  typography$4 = semantic$e.typography,
+  size$6 = semantic$e.size;
 // Each severity's status icon and, at the small size, its shape (decision 0045)
 var variantIcons = {
   error: 'statusError',
@@ -5172,12 +5203,12 @@ var variantShapes = {
 var sizeConfig = {
   small: {
     font: typography$4.caption,
-    gap: semantic$d.space[100],
+    gap: semantic$e.space[100],
     icon: 'xs'
   },
   medium: {
     font: typography$4.small,
-    gap: semantic$d.space[200],
+    gap: semantic$e.space[200],
     icon: 'sm'
   }
 };
@@ -5187,13 +5218,13 @@ var StyledInlineAlert = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "InlineAlert__StyledInlineAlert",
   componentId: "sc-eervmb-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n"
 // One line of the message's font tall, so the icon centres on the first line at any size:
 // the zero-width space gives the box the font's line height without a fixed value
 ])), function (_a) {
   var $size = _a.$size,
     $empty = _a.$empty;
-  return $empty ? '0' : size$4.label[$size];
+  return $empty ? '0' : size$6.label[$size];
 }, function (_a) {
   var $size = _a.$size;
   return sizeConfig[$size].gap;
@@ -5209,7 +5240,7 @@ var StyledInlineAlert = /*#__PURE__*/styled__default.default.div.withConfig({
 var StyledIconLine = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "InlineAlert__StyledIconLine",
   componentId: "sc-eervmb-1"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\200B';\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\\\200B';\n  }\n"])));
+})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\200B';\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\\\200B';\n  }\n"])));
 var StyledMessage = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "InlineAlert__StyledMessage",
   componentId: "sc-eervmb-2"
@@ -5283,16 +5314,16 @@ var InlineAlert = function InlineAlert(_a) {
   });
 };
 InlineAlert.displayName = 'InlineAlert';
-var templateObject_1$s, templateObject_2$o, templateObject_3$n;
+var templateObject_1$t, templateObject_2$p, templateObject_3$n;
 
 var BreadcrumbNavStyled = /*#__PURE__*/styled__default.default.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), tokens.semantic.border["default"]);
+})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), tokens.semantic.border["default"]);
 var BreadcrumbStyled = /*#__PURE__*/styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
-})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), tokens.semantic.space[200], tokens.semantic.space[200], tokens.semantic.color.text.muted, tokens.component.breadcrumbs.item.maxWidth, tokens.semantic.color.text["default"]);
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), tokens.semantic.space[200], tokens.semantic.space[200], tokens.semantic.color.text.muted, tokens.component.breadcrumbs.item.maxWidth, tokens.semantic.color.text["default"]);
 var BreadcrumbSeparator = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Breadcrumbs__BreadcrumbSeparator",
   componentId: "sc-7ouzg5-2"
@@ -5344,14 +5375,14 @@ var Breadcrumbs = function Breadcrumbs(_a) {
     })
   });
 };
-var templateObject_1$r, templateObject_2$n, templateObject_3$m;
+var templateObject_1$s, templateObject_2$o, templateObject_3$m;
 
 // The whole card is one link (#185): hovering anywhere fades its image, pressing fades it one step
 // further, and keyboard focus draws the system focus ring around the card (decision 0029)
 var CardSmallStyled = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
   componentId: "sc-jpcqvd-0"
-})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.radius.sm, tokens.semantic.radius.sm, tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
+})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.radius.sm, tokens.semantic.radius.sm, tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
 var CardSmall = function CardSmall(_a) {
   var title = _a.title,
     picture = _a.picture,
@@ -5405,12 +5436,12 @@ var CardSmall = function CardSmall(_a) {
     })
   });
 };
-var templateObject_1$q;
+var templateObject_1$r;
 
 var CardLargeStyled = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
   componentId: "sc-1rfgdzl-0"
-})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"], ["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"])), tokens.component.cardLarge.maxWidth, tokens.semantic.radius['2xl']);
+})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"], ["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"])), tokens.component.cardLarge.maxWidth, tokens.semantic.radius['2xl']);
 var CardLarge = function CardLarge(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -5465,7 +5496,7 @@ var CardLarge = function CardLarge(_a) {
     })
   });
 };
-var templateObject_1$p;
+var templateObject_1$q;
 
 /**
  * Hidden native checkbox input for accessibility
@@ -5477,7 +5508,7 @@ var HiddenCheckboxInput = /*#__PURE__*/styled__default.default.input.withConfig(
   },
   displayName: "SelectableInputBase__HiddenCheckboxInput",
   componentId: "sc-1ddpctx-0"
-})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
+})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
 /**
  * Custom checkbox visual component
  * 24px × 24px for 8px grid alignment
@@ -5494,11 +5525,11 @@ var StyledCheckbox = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckbox",
   componentId: "sc-1ddpctx-1"
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: background-color ", " ", ",\n              border-color ", " ", ",\n              ", ";\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  /* Forced colours drop fills (decision 0038): a checked or indeterminate box takes the system\n     selection colour, or GrayText when disabled, and its mark the matching text colour. The\n     indeterminate dash is a fill, so it needs the same treatment. */\n  ", "\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: background-color ", " ", ",\n              border-color ", " ", ",\n              ", ";\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  /* Forced colours drop fills (decision 0038): a checked or indeterminate box takes the system\n     selection colour, or GrayText when disabled, and its mark the matching text colour. The\n     indeterminate dash is a fill, so it needs the same treatment. */\n  ", "\n"
+})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: background-color ", " ", ",\n              border-color ", " ", ",\n              ", ";\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  /* Forced colours drop fills (decision 0038): a checked or indeterminate box takes the system\n     selection colour, or GrayText when disabled, and its mark the matching text colour. The\n     indeterminate dash is a fill, so it needs the same treatment. */\n  ", "\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: background-color ", " ", ",\n              border-color ", " ", ",\n              ", ";\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  /* Forced colours drop fills (decision 0038): a checked or indeterminate box takes the system\n     selection colour, or GrayText when disabled, and its mark the matching text colour. The\n     indeterminate dash is a fill, so it needs the same treatment. */\n  ", "\n"
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
- */])), tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.input["default"].borderRadius, tokens.component.input["default"].borderWidth, function (props) {
+ */])), tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.borderRadius, tokens.component.input["default"].borderWidth, function (props) {
   return props.$checked || props.$indeterminate ? tokens.semantic.color.fill.inverse : tokens.component.input["default"].backgroundColor;
 }, function (props) {
   if (props.$state === 'error') return tokens.component.input.error.borderColor;
@@ -5555,16 +5586,16 @@ var StyledCheckboxLabel = /*#__PURE__*/styled__default.default.span.withConfig({
 })(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokens.component.input["default"].font, function (props) {
   return props.$disabled ? tokens.component.input.disabled.textColor : tokens.component.input["default"].textColor;
 });
-var templateObject_1$o, templateObject_2$m, templateObject_3$l, templateObject_4$i;
+var templateObject_1$p, templateObject_2$n, templateObject_3$l, templateObject_4$i;
 
 var StyledFieldContainer$3 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Checkbox__StyledFieldContainer",
   componentId: "sc-vquz3v-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokens.semantic.space[100]);
+})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokens.semantic.space[100]);
 var StyledHelperText$4 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
-})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
+})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
 /**
  * Checkbox component for binary selection with WCAG 2.2 AA compliance
  *
@@ -5683,12 +5714,12 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
 });
 Checkbox.displayName = 'Checkbox';
-var templateObject_1$n, templateObject_2$l;
+var templateObject_1$o, templateObject_2$m;
 
 var ChipGroupWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ChipGroup__ChipGroupWrapper",
   componentId: "sc-ae049w-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
 var ChipGroup = function ChipGroup(_a) {
   var labels = _a.labels,
     dataTestId = _a["data-testid"];
@@ -5705,20 +5736,20 @@ var ChipGroup = function ChipGroup(_a) {
     })
   });
 };
-var templateObject_1$m;
+var templateObject_1$n;
 
 var _a$1 = tokens.semantic,
   color$6 = _a$1.color,
-  border$6 = _a$1.border,
-  motion$7 = _a$1.motion;
+  border$5 = _a$1.border,
+  motion$8 = _a$1.motion;
 var StyledCodeBlock = /*#__PURE__*/styled__default.default.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border$6["default"], tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color$6.text["default"], function (_a) {
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border$5["default"], tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color$6.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
-}, tokens.semantic.space[200], motion$7.duration.slow, motion$7.easing.standard, reducedMotion, function (_a) {
+}, tokens.semantic.space[200], motion$8.duration.slow, motion$8.easing.standard, reducedMotion, function (_a) {
   var $maxHeight = _a.$maxHeight,
     $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
@@ -5726,11 +5757,11 @@ var StyledCodeBlock = /*#__PURE__*/styled__default.default.pre.withConfig({
   // Use a large value when expanded to allow smooth transition
   // 10000px is effectively "no limit" for most code blocks
   return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
-}, border$6.focus, border$6.focusOffset);
+}, border$5.focus, border$5.focusOffset);
 var CodeBlockWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CodeBlock__CodeBlockWrapper",
   componentId: "sc-1p1t0kp-1"
-})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
+})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
 var CopyButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CodeBlock__CopyButtonWrapper",
   componentId: "sc-1p1t0kp-2"
@@ -5738,7 +5769,7 @@ var CopyButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
 var ExpandButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CodeBlock__ExpandButtonWrapper",
   componentId: "sc-1p1t0kp-3"
-})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"])), tokens.semantic.space[200], tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.space[200], tokens.semantic.radius.sm, motion$7.duration.slow, motion$7.easing.standard, motion$7.duration.slow, motion$7.easing.standard, function (_a) {
+})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"])), tokens.semantic.space[200], tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.space[200], tokens.semantic.radius.sm, motion$8.duration.slow, motion$8.easing.standard, motion$8.duration.slow, motion$8.easing.standard, function (_a) {
   var $hasGradient = _a.$hasGradient;
   return $hasGradient ? "\n    margin-top: calc(-1 * ".concat(tokens.semantic.space[800], ");\n    padding-top: ").concat(tokens.semantic.space[800], ";\n    background: linear-gradient(\n      to bottom,\n      transparent 0%,\n      ").concat(tokens.semantic.surface.raised, " 60%\n    );\n  ") : "\n    background: transparent;\n  ";
 });
@@ -5924,19 +5955,19 @@ var CodeBlock = function CodeBlock(_a) {
     })]
   });
 };
-var templateObject_1$l, templateObject_2$k, templateObject_3$k, templateObject_4$h, templateObject_5$e;
+var templateObject_1$m, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$e;
 
 var StyledHeader$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledHeader",
   componentId: "sc-9nfm1f-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"])), tokens.semantic.space[300], tokens.semantic.space[200], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], function (_a) {
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"])), tokens.semantic.space[300], tokens.semantic.space[200], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], function (_a) {
   var $sticky = _a.$sticky;
   return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: ".concat(tokens.semantic.layer.sticky, ";\n    box-shadow: ").concat(tokens.semantic.elevation.sticky, ";\n  ");
 });
 var StyledLeftSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledLeftSection",
   componentId: "sc-9nfm1f-1"
-})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
+})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
 var StyledRightSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledRightSection",
   componentId: "sc-9nfm1f-2"
@@ -6016,18 +6047,18 @@ var DateGroup = function DateGroup(_a) {
     })]
   });
 };
-var templateObject_1$k, templateObject_2$j, templateObject_3$j, templateObject_4$g;
+var templateObject_1$l, templateObject_2$k, templateObject_3$j, templateObject_4$g;
 
-var semantic$c = tokens.semantic;
+var semantic$d = tokens.semantic;
 var StyledContainer$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "EmptyState__StyledContainer",
   componentId: "sc-1u5hxh-0"
-})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"])), tokens.component.emptyState.maxWidth, function (_a) {
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"])), tokens.component.emptyState.maxWidth, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? semantic$c.space[800] : $size === 'large' ? semantic$c.space[1400] : semantic$c.space[1000];
+  return $size === 'small' ? semantic$d.space[800] : $size === 'large' ? semantic$d.space[1400] : semantic$d.space[1000];
 });
 var StyledIllustration = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -6035,22 +6066,22 @@ var StyledIllustration = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "EmptyState__StyledIllustration",
   componentId: "sc-1u5hxh-1"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"])), function (_a) {
+})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? tokens.component.emptyState.illustration.small : $size === 'large' ? tokens.component.emptyState.illustration.large : tokens.component.emptyState.illustration.medium;
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? tokens.component.emptyState.illustration.small : $size === 'large' ? tokens.component.emptyState.illustration.large : tokens.component.emptyState.illustration.medium;
-}, semantic$c.space[600], function (_a) {
+}, semantic$d.space[600], function (_a) {
   var $variant = _a.$variant;
-  return $variant === 'error' ? semantic$c.color.icon.danger : $variant === 'success' ? semantic$c.color.icon.success : semantic$c.color.icon.muted;
+  return $variant === 'error' ? semantic$d.color.icon.danger : $variant === 'success' ? semantic$d.color.icon.success : semantic$d.color.icon.muted;
 });
 var StyledTextContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "EmptyState__StyledTextContainer",
   componentId: "sc-1u5hxh-2"
 })(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  max-width: ", ";\n  margin-bottom: ", ";\n"], ["\n  max-width: ", ";\n  margin-bottom: ", ";\n"
 // Map illustration type to icon name
-])), tokens.component.emptyState.text.maxWidth, semantic$c.space[600]);
+])), tokens.component.emptyState.text.maxWidth, semantic$d.space[600]);
 // Map illustration type to icon name
 var illustrationToIcon = {
   search: 'search',
@@ -6105,7 +6136,7 @@ var EmptyState = function EmptyState(_a) {
         children: title
       }), jsxRuntime.jsx("div", {
         style: {
-          marginTop: semantic$c.space[300]
+          marginTop: semantic$d.space[300]
         },
         children: jsxRuntime.jsx(Typography, {
           variant: "body",
@@ -6135,25 +6166,25 @@ var EmptyState = function EmptyState(_a) {
     })]
   });
 };
-var templateObject_1$j, templateObject_2$i, templateObject_3$i;
+var templateObject_1$k, templateObject_2$j, templateObject_3$i;
 
-var space$a = tokens.semantic.space;
+var space$b = tokens.semantic.space;
 var FeatureBlockStyled = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__FeatureBlockStyled",
   componentId: "sc-1mi4lso-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.semantic.breakpoint.md, tokens.semantic.breakpoint.lg, space$a[1200], tokens.semantic.radius['2xl']);
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.semantic.breakpoint.md, tokens.semantic.breakpoint.lg, space$b[1200], tokens.semantic.radius['2xl']);
 var ImageWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ImageWrapper",
   componentId: "sc-1mi4lso-1"
-})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokens.semantic.breakpoint.lg);
+})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokens.semantic.breakpoint.lg);
 var ContentSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ContentSection",
   componentId: "sc-1mi4lso-2"
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), space$a[600], tokens.semantic.breakpoint.lg, space$a[800], tokens.semantic.breakpoint.xl, space$a[2400]);
+})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), space$b[600], tokens.semantic.breakpoint.lg, space$b[800], tokens.semantic.breakpoint.xl, space$b[2400]);
 var ButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ButtonWrapper",
   componentId: "sc-1mi4lso-3"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), space$a[400]);
+})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), space$b[400]);
 var ContentWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ContentWrapper",
   componentId: "sc-1mi4lso-4"
@@ -6216,13 +6247,13 @@ var FeatureBlock = function FeatureBlock(_a) {
     }), jsxRuntime.jsx(Divider, {})]
   });
 };
-var templateObject_1$i, templateObject_2$h, templateObject_3$h, templateObject_4$f, templateObject_5$d;
+var templateObject_1$j, templateObject_2$i, templateObject_3$h, templateObject_4$f, templateObject_5$d;
 
 var _a = tokens.semantic,
-  border$5 = _a.border,
+  border$4 = _a.border,
   elevation$2 = _a.elevation,
-  motion$6 = _a.motion,
-  space$9 = _a.space,
+  motion$7 = _a.motion,
+  space$a = _a.space,
   _b = tokens.component,
   input$1 = _b.input,
   field$3 = _b.field;
@@ -6231,21 +6262,21 @@ var _a = tokens.semantic,
 // their content (decision 0034). The small vertical padding only matters when a long
 // label wraps; a single line is shorter than the minimum.
 var controlPaddingX = tokens.semantic.space.inset.lg;
-var controlPaddingY = space$9[200];
+var controlPaddingY = space$a[200];
 var controlHeight = tokens.semantic.size.control.lg;
-var duration = motion$6.duration,
-  easing = motion$6.easing;
+var duration = motion$7.duration,
+  easing = motion$7.easing;
 var DropdownContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Dropdown__DropdownContainer",
   componentId: "sc-kz07c4-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var DropdownTrigger = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Dropdown__DropdownTrigger",
   componentId: "sc-kz07c4-1"
-})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"])), controlHeight, controlPaddingY, controlPaddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
+})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"])), controlHeight, controlPaddingY, controlPaddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
 }, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.moderate, easing.standard, duration.moderate, easing.standard, function (_a) {
@@ -6254,7 +6285,7 @@ var DropdownTrigger = /*#__PURE__*/styled__default.default.button.withConfig({
 }, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor;
-}, input$1.focus.outline, border$5.focusOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, function (_a) {
+}, input$1.focus.outline, border$4.focusOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, function (_a) {
   var $isOpen = _a.$isOpen,
     $hasError = _a.$hasError;
   return $isOpen && "\n    border-color: ".concat($hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor, ";\n  ");
@@ -6265,7 +6296,7 @@ var DropdownIcon = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Dropdown__DropdownIcon",
   componentId: "sc-kz07c4-2"
-})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform ", " ", ";\n  \n  ", "\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform ", " ", ";\n  \n  ", "\n\n  ", " {\n    transition: none;\n  }\n"])), space$9[200], duration.fast, easing.decelerate, function (_a) {
+})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform ", " ", ";\n  \n  ", "\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform ", " ", ";\n  \n  ", "\n\n  ", " {\n    transition: none;\n  }\n"])), space$a[200], duration.fast, easing.decelerate, function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen && "\n    transform: rotate(180deg);\n  ";
 }, reducedMotion);
@@ -6275,7 +6306,7 @@ var DropdownMenu = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, input$1["default"].backgroundColor, border$5["default"], input$1["default"].borderRadius, elevation$2.floating, space$9[100], function (_a) {
+})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  /* The panel radius Menu and SearchField share, not the control token (decision 0055) */\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  /* The panel radius Menu and SearchField share, not the control token (decision 0055) */\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, tokens.semantic.surface.overlay, border$4["default"], tokens.semantic.radius.md, elevation$2.floating, space$a[100], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -6291,21 +6322,21 @@ var DropdownOption = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "Dropdown__DropdownOption",
   componentId: "sc-kz07c4-4"
-})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n\n  /* The shared row states (decisions 0029, 0030): focus shows the hover state in grey; only the\n     selected option is light blue, with its text darkening with the fill */\n  ", "\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n\n  /* The shared row states (decisions 0029, 0030): focus shows the hover state in grey; only the\n     selected option is light blue, with its text darkening with the fill */\n  ", "\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), space$9[200], controlHeight, controlPaddingY, controlPaddingX, input$1["default"].font, input$1["default"].textColor, duration.fast, easing.decelerate, duration.fast, easing.decelerate, function (_a) {
+})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n\n  /* The shared row states (decisions 0029, 0030): focus shows the hover state in grey; only the\n     selected option is light blue, with its text darkening with the fill */\n  ", "\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n\n  /* The shared row states (decisions 0029, 0030): focus shows the hover state in grey; only the\n     selected option is light blue, with its text darkening with the fill */\n  ", "\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), space$a[200], controlHeight, controlPaddingY, controlPaddingX, input$1["default"].font, input$1["default"].textColor, duration.fast, easing.decelerate, duration.fast, easing.decelerate, function (_a) {
   var $isSelected = _a.$isSelected,
     $isFocused = _a.$isFocused;
   return interactiveRow({
     selected: $isSelected,
     focused: $isFocused
   });
-}, border$5["default"]);
+}, border$4["default"]);
 var StyledHelperText$3 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"
 })(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), field$3.helperText.typography, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? field$3.helperText.colorError : field$3.helperText.color;
-}, space$9[200]);
+}, space$a[200]);
 var Dropdown = function Dropdown(_a) {
   var options = _a.options,
     value = _a.value,
@@ -6428,7 +6459,7 @@ var Dropdown = function Dropdown(_a) {
       htmlFor: dropdownId,
       style: {
         display: 'block',
-        marginBottom: space$9[200]
+        marginBottom: space$a[200]
       },
       children: jsxRuntime.jsx(Typography, {
         variant: "label",
@@ -6485,18 +6516,18 @@ var Dropdown = function Dropdown(_a) {
     })]
   });
 };
-var templateObject_1$h, templateObject_2$g, templateObject_3$g, templateObject_4$e, templateObject_5$c, templateObject_6$b;
+var templateObject_1$i, templateObject_2$h, templateObject_3$g, templateObject_4$e, templateObject_5$c, templateObject_6$b;
 
-var semantic$b = tokens.semantic;
+var semantic$c = tokens.semantic;
 var StyledList = /*#__PURE__*/styled__default.default.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "List__StyledList",
   componentId: "sc-1irksg5-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
   var $dividers = _a.$dividers;
-  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: ".concat(semantic$b.border.width.thin, " solid ").concat(semantic$b.color.border["default"], ";\n    }\n  ");
+  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: ".concat(semantic$c.border.width.thin, " solid ").concat(semantic$c.color.border["default"], ";\n    }\n  ");
 });
 var List$2 = function List(_a) {
   var children = _a.children,
@@ -6520,17 +6551,17 @@ var List$2 = function List(_a) {
   });
 };
 List$2.displayName = 'List';
-var templateObject_1$g;
+var templateObject_1$h;
 
-var semantic$a = tokens.semantic;
-var space$8 = semantic$a.space,
-  color$5 = semantic$a.color,
-  motion$5 = semantic$a.motion,
-  radius$4 = semantic$a.radius,
-  size$3 = semantic$a.size,
-  elevation$1 = semantic$a.elevation,
-  border$4 = semantic$a.border,
-  typography$3 = semantic$a.typography;
+var semantic$b = tokens.semantic;
+var space$9 = semantic$b.space,
+  color$5 = semantic$b.color,
+  motion$6 = semantic$b.motion,
+  radius$1 = semantic$b.radius,
+  size$5 = semantic$b.size,
+  elevation$1 = semantic$b.elevation,
+  border$3 = semantic$b.border,
+  typography$3 = semantic$b.typography;
 // Typeahead keeps typed characters together for this long. An input timing, not a motion value.
 var TYPEAHEAD_RESET_MS = 500;
 var ITEM_SELECTOR = '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]';
@@ -6540,8 +6571,8 @@ var useMenu = function useMenu(component) {
   if (!context) throw new Error("".concat(component, " must be used inside a Menu"));
   return context;
 };
-var enter = styled.keyframes(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(calc(-1 * ", "));\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(calc(-1 * ", "));\n  }\n"])), motion$5.distance.sm);
-var fade = styled.keyframes(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
+var enter = styled.keyframes(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(calc(-1 * ", "));\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(calc(-1 * ", "));\n  }\n"])), motion$6.distance.sm);
+var fade$1 = styled.keyframes(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
 // Dropdown's panel (P5): the raised surface with a decorative outline and floating elevation,
 // dropping in over duration.fast (0037); under reduced motion it only fades (0015)
 ])));
@@ -6553,12 +6584,12 @@ var Panel = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Menu__Panel",
   componentId: "sc-13mple2-0"
-})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-width: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  padding: ", " 0;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  animation: ", " ", " ", "\n    ", ";\n\n  ", " {\n    animation: ", " ", " ", "\n      ", ";\n  }\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-width: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  padding: ", " 0;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  animation: ", " ", " ", "\n    ", ";\n\n  ", " {\n    animation: ", " ", " ", "\n      ", ";\n  }\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"
+})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  /* At least the trigger's width when matchTriggerWidth sets the variable, within the usual range */\n  min-width: min(max(", ", var(", ", 0px)), ", ");\n  max-width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  padding: ", " 0;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  animation: ", " ", " ", "\n    ", ";\n\n  ", " {\n    animation: ", " ", " ", "\n      ", ";\n  }\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  /* At least the trigger's width when matchTriggerWidth sets the variable, within the usual range */\n  min-width: min(max(", ", var(", ", 0px)), ", ");\n  max-width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  padding: ", " 0;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  animation: ", " ", " ", "\n    ", ";\n\n  ", " {\n    animation: ", " ", " ", "\n      ", ";\n  }\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"
 // The trigger's wrapper takes no box of its own
-])), size$3[4500], size$3[7500], size$3.menu.maxHeight, space$8[100], semantic$a.surface.raised, color$5.text["default"], border$4["default"], radius$4.md, elevation$1.floating, enter, motion$5.duration.fast, motion$5.easing.decelerate, function (_a) {
+])), size$5[4500], ANCHOR_WIDTH_VAR, size$5[7500], size$5[7500], size$5.menu.maxHeight, space$9[100], semantic$b.surface.overlay, color$5.text["default"], border$3["default"], radius$1.md, elevation$1.floating, enter, motion$6.duration.fast, motion$6.easing.decelerate, function (_a) {
   var $exiting = _a.$exiting;
   return $exiting ? exitAnimation : styled.css(templateObject_3$f || (templateObject_3$f = __makeTemplateObject([""], [""])));
-}, reducedMotion, fade, motion$5.duration.fast, motion$5.easing.decelerate, function (_a) {
+}, reducedMotion, fade$1, motion$6.duration.fast, motion$6.easing.decelerate, function (_a) {
   var $exiting = _a.$exiting;
   return $exiting ? exitAnimation : styled.css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject([""], [""])));
 }, forcedColorsEdge);
@@ -6587,6 +6618,8 @@ var Menu = function Menu(_a) {
     side = _c === void 0 ? 'bottom' : _c,
     _d = _a.align,
     align = _d === void 0 ? 'start' : _d,
+    _e = _a.matchTriggerWidth,
+    matchTriggerWidth = _e === void 0 ? false : _e,
     dataTestId = _a["data-testid"];
   var menuId = React.useId();
   var triggerId = React.useId();
@@ -6599,14 +6632,14 @@ var Menu = function Menu(_a) {
     text: '',
     timer: undefined
   });
-  var _e = React.useState(defaultOpen),
-    uncontrolledOpen = _e[0],
-    setUncontrolledOpen = _e[1];
+  var _f = React.useState(defaultOpen),
+    uncontrolledOpen = _f[0],
+    setUncontrolledOpen = _f[1];
   var isControlled = openProp !== undefined;
   var isOpen = isControlled ? openProp : uncontrolledOpen;
-  var _f = usePresence(isOpen),
-    isPresent = _f.isPresent,
-    isExiting = _f.isExiting;
+  var _g = usePresence(isOpen),
+    isPresent = _g.isPresent,
+    isExiting = _g.isExiting;
   var triggerElement = function triggerElement() {
     return laidOutElement(anchorRef.current);
   };
@@ -6657,6 +6690,7 @@ var Menu = function Menu(_a) {
     anchorRef: anchorRef,
     side: side,
     align: align,
+    matchAnchorWidth: matchTriggerWidth,
     onDetach: detach
   });
   // Opening from the trigger focuses the first or last item. An open that didn't come from the
@@ -6783,13 +6817,13 @@ var Row$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Menu__Row",
   componentId: "sc-13mple2-2"
-})(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  cursor: ", ";\n  user-select: none;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030): focus shows the hover state (0029); only checked items are\n     light blue, with the checkmark so the state isn't colour alone */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  cursor: ", ";\n  user-select: none;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030): focus shows the hover state (0029); only checked items are\n     light blue, with the checkmark so the state isn't colour alone */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space$8[200], size$3.row.sm, space$8.inset.xs, space$8.inset.md, typography$3.small, function (_a) {
+})(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  cursor: ", ";\n  user-select: none;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030): focus shows the hover state (0029); only checked items are\n     light blue, with the checkmark so the state isn't colour alone */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  cursor: ", ";\n  user-select: none;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030): focus shows the hover state (0029); only checked items are\n     light blue, with the checkmark so the state isn't colour alone */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space$9[200], size$5.row.sm, space$9.inset.xs, space$9.inset.md, typography$3.small, function (_a) {
   var $destructive = _a.$destructive;
   return $destructive ? color$5.text.danger : color$5.text["default"];
 }, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
-}, motion$5.duration.fast, motion$5.easing.decelerate, motion$5.duration.fast, motion$5.easing.decelerate, function (_a) {
+}, motion$6.duration.fast, motion$6.easing.decelerate, motion$6.duration.fast, motion$6.easing.decelerate, function (_a) {
   var $checked = _a.$checked,
     $focused = _a.$focused,
     $disabled = _a.$disabled;
@@ -6800,8 +6834,8 @@ var Row$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   });
 }, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled && styled.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color$5.text.disabled);
-}, border$4.focus, border$4.focusOffset);
+  return $disabled && styled.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color$5.text.disabled);
+}, border$3.focus, border$3.focusOffset);
 var Leading = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Menu__Leading",
   componentId: "sc-13mple2-3"
@@ -6809,7 +6843,7 @@ var Leading = /*#__PURE__*/styled__default.default.span.withConfig({
 var Text = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Menu__Text",
   componentId: "sc-13mple2-4"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n"])));
+})(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n"])));
 var Description = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Menu__Description",
   componentId: "sc-13mple2-5"
@@ -6943,7 +6977,7 @@ var GroupLabel = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Menu__GroupLabel",
   componentId: "sc-13mple2-8"
 })(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n"
-/** Groups related items. Radio and checkbox items always sit in a group. */])), space$8.inset.xs, space$8.inset.md, typography$3.caption, color$5.text.muted);
+/** Groups related items. Radio and checkbox items always sit in a group. */])), space$9.inset.xs, space$9.inset.md, typography$3.caption, color$5.text.muted);
 /** Groups related items. Radio and checkbox items always sit in a group. */
 var MenuGroup = function MenuGroup(_a) {
   var label = _a.label,
@@ -6965,7 +6999,7 @@ var Separator = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Menu__Separator",
   componentId: "sc-13mple2-9"
 })(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  margin: ", " 0;\n  border-top: ", ";\n"], ["\n  margin: ", " 0;\n  border-top: ", ";\n"
-/** Separates groups */])), space$8[100], border$4["default"]);
+/** Separates groups */])), space$9[100], border$3["default"]);
 /** Separates groups */
 var MenuDivider = function MenuDivider() {
   return jsxRuntime.jsx(Separator, {
@@ -6978,7 +7012,7 @@ MenuItemRadio.displayName = 'MenuItemRadio';
 MenuItemCheckbox.displayName = 'MenuItemCheckbox';
 MenuGroup.displayName = 'MenuGroup';
 MenuDivider.displayName = 'MenuDivider';
-var templateObject_1$f, templateObject_2$f, templateObject_3$f, templateObject_4$d, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$6, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1;
+var templateObject_1$g, templateObject_2$g, templateObject_3$f, templateObject_4$d, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$6, templateObject_10$4, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1;
 
 var SidebarNavContext = /*#__PURE__*/React.createContext({
   collapsed: false,
@@ -6988,13 +7022,72 @@ var useSidebarNav = function useSidebarNav() {
   return React.useContext(SidebarNavContext);
 };
 
+// How SidebarNav's pieces move between expanded and the rail (issue 348), shared by the nav, its rows
+// and its sections so they move as one: nothing unmounts or re-lays out mid-move.
+var semantic$a = tokens.semantic,
+  component$2 = tokens.component;
+var motion$5 = semantic$a.motion,
+  space$8 = semantic$a.space,
+  size$4 = semantic$a.size;
+/**
+ * SidebarNav sets this on itself: its expanded width. Content inside keeps that width while the nav
+ * narrows, so the nav's edge clips it instead of it reflowing or ellipsising mid-move.
+ */
+var EXPANDED_WIDTH_VAR = '--co-sidebar-nav-expanded';
+/**
+ * SidebarNav sets this to its body's scrollbar width (0 for overlay scrollbars), measured while
+ * expanded, since a classic scrollbar narrows every row
+ */
+var SCROLLBAR_VAR = '--co-sidebar-nav-scrollbar';
+/** The nav's own side padding: the rail's inner width is the rail less twice this */
+var NAV_PADDING = space$8[200];
+/** A row's left inset: centres an icon in the rail, and stays the same expanded, so icons never move */
+var ROW_INSET = "calc((".concat(component$2.sidebarNav.width.rail, " - 2 * ").concat(NAV_PADDING, " - ").concat(size$4.icon.md, ") / 2)");
+/**
+ * Fades content that the rail doesn't show (labels, meta text, the badge count, the header and
+ * footer). Leaving is quick and accelerates; arriving decelerates over the width's duration (0037).
+ * Hidden content also leaves the keyboard and screen readers once the fade ends.
+ */
+var fade = function fade(hidden) {
+  return styled.css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  opacity: ", ";\n  /* Shown content inherits, so anything hidden around it (a folded section) still wins */\n  visibility: ", ";\n  transition: ", ";\n"], ["\n  opacity: ", ";\n  /* Shown content inherits, so anything hidden around it (a folded section) still wins */\n  visibility: ", ";\n  transition: ", ";\n"
+  /**
+   * Folds something away (its height animates to nothing, with a fade), for what the rail leaves out:
+   * a section's header, a section with nothing to show, an item without an icon. Under reduced motion
+   * the height changes at once and only the fade remains (0015).
+   */])), hidden ? 0 : 1, hidden ? 'hidden' : 'inherit', hidden ? "opacity ".concat(motion$5.duration.fast, " ").concat(motion$5.easing.accelerate, ", visibility ").concat(motion$5.duration.fast, " ").concat(motion$5.easing.accelerate) : "opacity ".concat(motion$5.duration.moderate, " ").concat(motion$5.easing.decelerate, ", visibility ").concat(motion$5.duration.moderate, " ").concat(motion$5.easing.decelerate));
+};
+/**
+ * Folds something away (its height animates to nothing, with a fade), for what the rail leaves out:
+ * a section's header, a section with nothing to show, an item without an icon. Under reduced motion
+ * the height changes at once and only the fade remains (0015).
+ */
+var Fold = /*#__PURE__*/styled__default.default.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "sidebarNavMotion__Fold",
+  componentId: "sc-1h4byrj-0"
+})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  ", "\n  transition: grid-template-rows ", " ", ",\n    ", ";\n\n  /* Clipped only while folded: once open, focus rings outside a control aren't cut off */\n  & > * {\n    min-height: 0;\n    overflow: ", ";\n  }\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  ", "\n  transition: grid-template-rows ", " ", ",\n    ", ";\n\n  /* Clipped only while folded: once open, focus rings outside a control aren't cut off */\n  & > * {\n    min-height: 0;\n    overflow: ", ";\n  }\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"])), function (_a) {
+  var $open = _a.$open;
+  return $open ? '1fr' : '0fr';
+}, function (_a) {
+  var $open = _a.$open;
+  return fade(!$open);
+}, motion$5.duration.moderate, motion$5.easing.decelerate, function (_a) {
+  var $open = _a.$open;
+  return $open ? "opacity ".concat(motion$5.duration.moderate, " ").concat(motion$5.easing.decelerate, ", visibility ").concat(motion$5.duration.moderate, " ").concat(motion$5.easing.decelerate) : "opacity ".concat(motion$5.duration.fast, " ").concat(motion$5.easing.accelerate, ", visibility ").concat(motion$5.duration.moderate, " ").concat(motion$5.easing.accelerate);
+}, function (_a) {
+  var $open = _a.$open;
+  return $open ? 'visible' : 'hidden';
+}, reducedMotion, motion$5.duration.fast, motion$5.easing.decelerate, motion$5.duration.fast, motion$5.easing.decelerate);
+var templateObject_1$f, templateObject_2$f;
+
 var semantic$9 = tokens.semantic;
 var space$7 = semantic$9.space,
   color$4 = semantic$9.color,
   motion$4 = semantic$9.motion,
-  radius$3 = semantic$9.radius,
-  size$2 = semantic$9.size,
-  border$3 = semantic$9.border,
+  size$3 = semantic$9.size,
+  border$2 = semantic$9.border,
   typography$2 = semantic$9.typography;
 // Anything without a scheme (https:, mailto:) or a protocol-relative start is the app's own URL,
 // relative ones included, so it goes through the router's link
@@ -7007,7 +7100,10 @@ var Row = /*#__PURE__*/styled__default.default.a.withConfig({
   },
   displayName: "SidebarNavItem__Row",
   componentId: "sc-1nfqk5n-0"
-})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  /* The row's height is its token, with the content centred (as controls, 0034): vertical\n     padding would hold a compact row above its 24px (0051) */\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030); the current page takes the light-blue selected ladder */\n  ", "\n\n  /* Inside SidebarNav one highlight glides to the hovered row, so an unselected row stays clear\n     underneath it; pressed and selected rows keep their own fills (0053) */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  /* The row's height is its token, with the content centred (as controls, 0034): vertical\n     padding would hold a compact row above its 24px (0051) */\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030); the current page takes the light-blue selected ladder */\n  ", "\n\n  /* Inside SidebarNav one highlight glides to the hovered row, so an unselected row stays clear\n     underneath it; pressed and selected rows keep their own fills (0053) */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space$7[200], size$2.row.sm, space$7.inset.sm, radius$3.sm, typography$2.small, color$4.text["default"], motion$4.duration.fast, motion$4.easing.decelerate, motion$4.duration.fast, motion$4.easing.decelerate, function (_a) {
+})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  /* The row's height is its token, with the content centred (as controls, 0034): vertical\n     padding would hold a compact row above its 24px (0051) */\n  min-height: ", ";\n  /* The left inset is the same expanded and in the rail, so the icon never moves (issue 348); the row\n     clips what the rail doesn't show as the nav narrows */\n  padding: 0 ", " 0 ", ";\n  overflow: hidden;\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030); the current page takes the light-blue selected ladder */\n  ", "\n\n  /* Inside SidebarNav one highlight glides to the hovered row, so an unselected row stays clear\n     underneath it; pressed and selected rows keep their own fills (0053) */\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  /* The row's height is its token, with the content centred (as controls, 0034): vertical\n     padding would hold a compact row above its 24px (0051) */\n  min-height: ", ";\n  /* The left inset is the same expanded and in the rail, so the icon never moves (issue 348); the row\n     clips what the rail doesn't show as the nav narrows */\n  padding: 0 ", " 0 ", ";\n  overflow: hidden;\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030); the current page takes the light-blue selected ladder */\n  ", "\n\n  /* Inside SidebarNav one highlight glides to the hovered row, so an unselected row stays clear\n     underneath it; pressed and selected rows keep their own fills (0053) */\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"
+// The row's content keeps the nav's expanded width (when it's in a SidebarNav), so the nav's edge
+// clips it as the nav narrows, instead of the label reflowing or ellipsising mid-move
+])), space$7[200], size$3.row.sm, space$7.inset.sm, ROW_INSET, rowRadius, typography$2.small, color$4.text["default"], motion$4.duration.fast, motion$4.easing.decelerate, motion$4.duration.fast, motion$4.easing.decelerate, function (_a) {
   var $current = _a.$current;
   return interactiveRow({
     selected: $current
@@ -7016,25 +7112,88 @@ var Row = /*#__PURE__*/styled__default.default.a.withConfig({
   var $glide = _a.$glide,
     $current = _a.$current;
   return $glide && !$current && styled.css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n      &:hover:not(:active) {\n        background-color: transparent;\n      }\n    "], ["\n      &:hover:not(:active) {\n        background-color: transparent;\n      }\n    "])));
-}, function (_a) {
-  var $collapsed = _a.$collapsed;
-  return $collapsed && styled.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n      justify-content: center;\n      padding: 0 ", ";\n    "], ["\n      justify-content: center;\n      padding: 0 ", ";\n    "])), space$7.inset.xs);
-}, border$3.focus, border$3.focusOffset);
+}, border$2.focus, border$2.focusOffset);
+// The row's content keeps the nav's expanded width (when it's in a SidebarNav), so the nav's edge
+// clips it as the nav narrows, instead of the label reflowing or ellipsising mid-move
+var Inner = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavItem__Inner",
+  componentId: "sc-1nfqk5n-1"
+})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: flex;\n  flex: 1 0 auto;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  /* The row's content width when expanded: the nav's width less any scrollbar, its padding, the row's\n     insets and, beside an icon, the icon and its gap */\n  width: calc(\n    var(", ", 0px) - var(", ", 0px) - 2 * ", " - ", " - ", "\n      ", "\n  );\n"], ["\n  display: flex;\n  flex: 1 0 auto;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  /* The row's content width when expanded: the nav's width less any scrollbar, its padding, the row's\n     insets and, beside an icon, the icon and its gap */\n  width: calc(\n    var(", ", 0px) - var(", ", 0px) - 2 * ", " - ", " - ", "\n      ", "\n  );\n"])), space$7[200], EXPANDED_WIDTH_VAR, SCROLLBAR_VAR, NAV_PADDING, ROW_INSET, space$7.inset.sm, function (_a) {
+  var $withIcon = _a.$withIcon;
+  return $withIcon ? "- ".concat(size$3.icon.md, " - ").concat(space$7[200]) : '';
+});
 var Label = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNavItem__Label",
-  componentId: "sc-1nfqk5n-1"
-})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+  componentId: "sc-1nfqk5n-2"
+})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  ", "\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  ", "\n"])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
 var Meta = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNavItem__Meta",
-  componentId: "sc-1nfqk5n-2"
-})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n"], ["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n"
+  componentId: "sc-1nfqk5n-3"
+})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n  ", "\n"], ["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n  ", "\n"
 // A badge needs something to sit on: the icon, or this mark at the end of an item without one
-])), typography$2.caption, color$4.text.muted);
+// Badge normally sits centred on its anchor's top-right corner (0045). At the end of the row the
+// count is laid out in place instead, so a count of any width ("3", "12", "99+") stays inside the
+// row in every density and never reaches the rows around it
+])), typography$2.caption, color$4.text.muted, function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
 // A badge needs something to sit on: the icon, or this mark at the end of an item without one
-var BadgeAnchor = /*#__PURE__*/styled__default.default.span.withConfig({
-  displayName: "SidebarNavItem__BadgeAnchor",
-  componentId: "sc-1nfqk5n-3"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n"
+// Badge normally sits centred on its anchor's top-right corner (0045). At the end of the row the
+// count is laid out in place instead, so a count of any width ("3", "12", "99+") stays inside the
+// row in every density and never reaches the rows around it
+var EndSlot = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavItem__EndSlot",
+  componentId: "sc-1nfqk5n-4"
+})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  ", "\n\n  & [role='status'] {\n    position: static;\n    transform: none;\n  }\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  ", "\n\n  & [role='status'] {\n    position: static;\n    transform: none;\n  }\n"])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
+var EndAnchor = /*#__PURE__*/styled__default.default.span.withConfig({
+  displayName: "SidebarNavItem__EndAnchor",
+  componentId: "sc-1nfqk5n-5"
+})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: inline-flex;\n  width: 0;\n  height: 0;\n"], ["\n  display: inline-flex;\n  width: 0;\n  height: 0;\n"
+// In the rail there's no room for a count, so a dot sits inside the icon's top-right corner
+])));
+// In the rail there's no room for a count, so a dot sits inside the icon's top-right corner
+var IconBox = /*#__PURE__*/styled__default.default.span.withConfig({
+  displayName: "SidebarNavItem__IconBox",
+  componentId: "sc-1nfqk5n-6"
+})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n"])));
+var Corner = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavItem__Corner",
+  componentId: "sc-1nfqk5n-7"
+})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  right: 25%;\n  display: inline-flex;\n  ", "\n"], ["\n  position: absolute;\n  top: 25%;\n  right: 25%;\n  display: inline-flex;\n  ", "\n"
+// An item folds away in the rail when it has no icon to show there
+])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
+// An item folds away in the rail when it has no icon to show there
+var Item = /*#__PURE__*/styled__default.default(Fold).attrs({
+  as: 'li'
+}).withConfig({
+  displayName: "SidebarNavItem__Item",
+  componentId: "sc-1nfqk5n-8"
+})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject([""], [""
 /**
  * One row of a SidebarNav (#327): a link to a page, or a button for an action such as "New chat".
  * Renders an `li`, so it sits in SidebarNav's or a SidebarNavSection's list.
@@ -7058,39 +7217,52 @@ var SidebarNavItem = function SidebarNavItem(_a) {
     collapsed = _c.collapsed,
     linkComponent = _c.linkComponent,
     glide = _c.glide;
-  // The rail shows icons only: an item without one has nothing to show there
-  if (collapsed && !icon) return null;
   var hasBadge = badge === 'dot' || typeof badge === 'number' && badge > 0;
   var badgeText = badgeLabel !== null && badgeLabel !== void 0 ? badgeLabel : badge === 'dot' ? 'new' : "".concat(badge, " new");
   // The badge's own text would make a noisy name, so a badged item is named outright; so is an
   // item in the rail, where the label isn't shown
   var name = hasBadge ? "".concat(label, ", ").concat(badgeText) : collapsed ? label : undefined;
-  var withBadge = function withBadge(anchor) {
-    return hasBadge ? jsxRuntime.jsx(Badge, {
-      variant: "accent",
-      dot: badge === 'dot',
-      count: typeof badge === 'number' ? badge : 0,
-      "aria-label": badgeText,
-      children: anchor
-    }) : anchor;
-  };
+  var count = typeof badge === 'number' ? badge : 0;
+  // Everything stays mounted and fades, so collapsing and expanding never jump (issue 348). Hidden
+  // content leaves screen readers once its fade ends; the rail names the row with aria-label.
   var content = jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [icon && withBadge(jsxRuntime.jsx(Icon, {
-      name: icon,
-      size: "md",
-      iconColor: "inherit"
-    })), !collapsed && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [icon && jsxRuntime.jsxs(IconBox, {
+      children: [jsxRuntime.jsx(Icon, {
+        name: icon,
+        size: "md",
+        iconColor: "inherit"
+      }), hasBadge && jsxRuntime.jsx(Corner, {
+        "$hidden": !collapsed,
+        children: jsxRuntime.jsx(Badge, {
+          variant: "accent",
+          dot: true,
+          "aria-label": badgeText,
+          children: jsxRuntime.jsx("span", {})
+        })
+      })]
+    }), jsxRuntime.jsxs(Inner, {
+      "$withIcon": Boolean(icon),
       children: [jsxRuntime.jsx(Label, {
+        "$hidden": collapsed,
         children: label
       }), meta && jsxRuntime.jsx(Meta, {
+        "$hidden": collapsed,
         children: meta
-      }), !icon && hasBadge && withBadge(jsxRuntime.jsx(BadgeAnchor, {}))]
+      }), hasBadge && jsxRuntime.jsx(EndSlot, {
+        "$hidden": collapsed,
+        children: jsxRuntime.jsx(Badge, {
+          variant: "accent",
+          dot: badge === 'dot',
+          count: count,
+          "aria-label": badgeText,
+          children: jsxRuntime.jsx(EndAnchor, {})
+        })
+      })]
     })]
   });
   var shared = {
     $current: current,
     $glide: glide,
-    $collapsed: collapsed,
     // The icon is decorative (0028)
     'aria-label': name,
     'data-testid': dataTestId,
@@ -7111,16 +7283,24 @@ var SidebarNavItem = function SidebarNavItem(_a) {
     type: "button",
     children: content
   }));
-  return jsxRuntime.jsx("li", {
-    children: collapsed ? jsxRuntime.jsx(Tooltip, {
-      text: label,
-      side: "right",
-      children: row
-    }) : row
-  });
+  return (
+    // The Tooltip is always there, turned off while the label is visible, so collapsing never
+    // remounts the row (which would lose focus and skip its transitions)
+    jsxRuntime.jsx(Item, {
+      "$open": !collapsed || Boolean(icon),
+      children: jsxRuntime.jsx("div", {
+        children: jsxRuntime.jsx(Tooltip, {
+          text: label,
+          side: "right",
+          disabled: !collapsed,
+          children: row
+        })
+      })
+    })
+  );
 };
 SidebarNavItem.displayName = 'SidebarNavItem';
-var templateObject_1$e, templateObject_2$e, templateObject_3$e, templateObject_4$c, templateObject_5$a, templateObject_6$9;
+var templateObject_1$e, templateObject_2$e, templateObject_3$e, templateObject_4$c, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6, templateObject_9$5, templateObject_10$3;
 
 // How long the items take to show or hide: the clip lifts after this even if no transition ran
 // (reduced motion, or a background tab)
@@ -7129,46 +7309,44 @@ var semantic$8 = tokens.semantic;
 var space$6 = semantic$8.space,
   color$3 = semantic$8.color,
   motion$3 = semantic$8.motion,
-  radius$2 = semantic$8.radius,
-  size$1 = semantic$8.size,
-  border$2 = semantic$8.border,
+  size$2 = semantic$8.size,
+  border$1 = semantic$8.border,
   typography$1 = semantic$8.typography;
-var Section = /*#__PURE__*/styled__default.default.div.withConfig({
+// The space above a section is the same expanded and in the rail, so the switch never shifts rows;
+// only the rule's colour changes: clear when the label separates the section, visible in the rail,
+// where there's no label (issue 348)
+var Section = /*#__PURE__*/styled__default.default(Fold).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "SidebarNavSection__Section",
   componentId: "sc-16cbmnb-0"
-})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  /* In the rail there's no label, so a rule separates sections */\n  ", "\n"], ["\n  /* In the rail there's no label, so a rule separates sections */\n  ", "\n"])), function (_a) {
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  margin-top: ", ";\n  padding-top: ", ";\n  border-top: ", " solid ", ";\n\n  /* Nothing above to separate it from */\n  &:first-child {\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n"], ["\n  margin-top: ", ";\n  padding-top: ", ";\n  border-top: ", " solid ", ";\n\n  /* Nothing above to separate it from */\n  &:first-child {\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n"])), space$6[200], space$6[100], border$1.width.thin, function (_a) {
   var $collapsed = _a.$collapsed;
-  return $collapsed && styled.css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n      border-top: ", ";\n      padding-top: ", ";\n      margin-top: ", ";\n\n      /* Nothing above to separate it from */\n      &:first-child {\n        border-top: none;\n        padding-top: 0;\n        margin-top: 0;\n      }\n    "], ["\n      border-top: ", ";\n      padding-top: ", ";\n      margin-top: ", ";\n\n      /* Nothing above to separate it from */\n      &:first-child {\n        border-top: none;\n        padding-top: 0;\n        margin-top: 0;\n      }\n    "])), border$2["default"], space$6[100], space$6[100]);
+  return $collapsed ? color$3.border["default"] : 'transparent';
 });
 var Header$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SidebarNavSection__Header",
   componentId: "sc-16cbmnb-1"
-})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"
+})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"
 // The label's look: quiet, small and muted, so the items lead
-])), space$6[100], size$1.row.sm);
+])), space$6[100], size$2.row.sm);
 // The label's look: quiet, small and muted, so the items lead
-var labelText = styled.css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography$1.caption, color$3.text.muted);
+var labelText = styled.css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography$1.caption, color$3.text.muted);
 var StaticLabel = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SidebarNavSection__StaticLabel",
   componentId: "sc-16cbmnb-2"
-})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"], ["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"])), labelText, space$6.inset.sm);
-var HiddenLabel = /*#__PURE__*/styled__default.default.div.withConfig({
-  displayName: "SidebarNavSection__HiddenLabel",
-  componentId: "sc-16cbmnb-3"
-})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"], ["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"])), labelText, space$6.inset.sm);
 var Disclosure = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "SidebarNavSection__Disclosure",
-  componentId: "sc-16cbmnb-4"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"
+  componentId: "sc-16cbmnb-3"
+})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"
 // The items' height animates from nothing to their own height with grid rows, so no
 // "no limit" max-height is needed. Once hidden, the items leave the keyboard and screen readers.
-])), labelText, space$6[100], size$1.row.sm, space$6.inset.sm, radius$2.sm, motion$3.duration.fast, motion$3.easing.decelerate, interactiveRow(), border$2.focus, border$2.focusOffset, motion$3.duration.fast, motion$3.easing.standard, function (_a) {
+])), labelText, space$6[100], size$2.row.sm, space$6.inset.sm, rowRadius, motion$3.duration.fast, motion$3.easing.decelerate, interactiveRow(), border$1.focus, border$1.focusOffset, motion$3.duration.fast, motion$3.easing.standard, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '0deg' : '-90deg';
 }, reducedMotion);
@@ -7179,24 +7357,27 @@ var Collapse = /*#__PURE__*/styled__default.default.div.withConfig({
     return !prop.startsWith('$');
   },
   displayName: "SidebarNavSection__Collapse",
-  componentId: "sc-16cbmnb-5"
-})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  visibility: ", ";\n  transition: grid-template-rows ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  visibility: ", ";\n  transition: grid-template-rows ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"
+  componentId: "sc-16cbmnb-4"
+})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  opacity: ", ";\n  /* Shown items inherit, so a section folded away in the rail hides them too */\n  visibility: ", ";\n  /* The items fold and fade together (issue 348) */\n  transition: grid-template-rows ", " ", ",\n    opacity ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  opacity: ", ";\n  /* Shown items inherit, so a section folded away in the rail hides them too */\n  visibility: ", ";\n  /* The items fold and fade together (issue 348) */\n  transition: grid-template-rows ", " ", ",\n    opacity ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"
 // Clipped only while hidden or moving: once shown, an item's Badge can overhang its row
 ])), function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '1fr' : '0fr';
 }, function (_a) {
   var $expanded = _a.$expanded;
-  return $expanded ? 'visible' : 'hidden';
-}, motion$3.duration.moderate, motion$3.easing.standard, motion$3.duration.moderate, motion$3.easing.standard, reducedMotion);
+  return $expanded ? 1 : 0;
+}, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? 'inherit' : 'hidden';
+}, motion$3.duration.moderate, motion$3.easing.decelerate, motion$3.duration.moderate, motion$3.easing.decelerate, motion$3.duration.moderate, motion$3.easing.decelerate, reducedMotion, motion$3.duration.fast, motion$3.easing.decelerate, motion$3.duration.fast, motion$3.easing.decelerate);
 // Clipped only while hidden or moving: once shown, an item's Badge can overhang its row
 var List$1 = /*#__PURE__*/styled__default.default.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "SidebarNavSection__List",
-  componentId: "sc-16cbmnb-6"
-})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"
+  componentId: "sc-16cbmnb-5"
+})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"
 /**
  * A labelled group of SidebarNavItems (#328), optionally collapsible, with one optional action.
  * In the rail its label and action are hidden and a rule separates it from the section above.
@@ -7249,12 +7430,14 @@ var SidebarNavSection = function SidebarNavSection(_a) {
     if (!isControlled) setUncontrolledExpanded(next);
     onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
   };
-  var header = collapsed ?
-  // The rail shows no label, but the list keeps its name
-  jsxRuntime.jsx(HiddenLabel, {
-    id: labelId,
-    children: label
-  }) : jsxRuntime.jsxs(Header$1, {
+  // The rail shows items by their icons only; a section with none has nothing to show there, so it
+  // isn't drawn at all, not even its separating rule. Items wrapped in other components count as
+  // showing, since their icons can't be seen from here.
+  var showsInRail = React__default.default.Children.toArray(children).some(function (child) {
+    return ! /*#__PURE__*/React__default.default.isValidElement(child) || child.type !== SidebarNavItem || Boolean(child.props.icon);
+  });
+  // The header stays mounted, folding away in the rail; the list keeps its name from it there
+  var header = jsxRuntime.jsxs(Header$1, {
     children: [collapsible ? jsxRuntime.jsxs(Disclosure, {
       type: "button",
       id: labelId,
@@ -7274,27 +7457,36 @@ var SidebarNavSection = function SidebarNavSection(_a) {
   });
   return (
     // In a SidebarNav the body is one list, so the section is one of its items
-    jsxRuntime.jsxs(Section, {
+    // In the rail, a section with nothing to show folds away, rule and all
+    jsxRuntime.jsx(Section, {
       as: inNav ? 'li' : 'div',
+      "$open": !collapsed || showsInRail,
       "$collapsed": collapsed,
       "data-testid": dataTestId,
-      children: [header, jsxRuntime.jsx(Collapse, {
-        "$expanded": expanded,
-        onTransitionEnd: function onTransitionEnd(event) {
-          if (event.target === event.currentTarget && event.propertyName === 'grid-template-rows') setAnimating(false);
-        },
-        children: jsxRuntime.jsx(List$1, {
-          id: listId,
-          "aria-labelledby": labelId,
-          "$clip": !expanded || animating,
-          children: children
-        })
-      })]
+      children: jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsx(Fold, {
+          "$open": !collapsed,
+          children: jsxRuntime.jsx("div", {
+            children: header
+          })
+        }), jsxRuntime.jsx(Collapse, {
+          "$expanded": expanded,
+          onTransitionEnd: function onTransitionEnd(event) {
+            if (event.target === event.currentTarget && event.propertyName === 'grid-template-rows') setAnimating(false);
+          },
+          children: jsxRuntime.jsx(List$1, {
+            id: listId,
+            "aria-labelledby": labelId,
+            "$clip": !expanded || animating,
+            children: children
+          })
+        })]
+      })
     })
   );
 };
 SidebarNavSection.displayName = 'SidebarNavSection';
-var templateObject_1$d, templateObject_2$d, templateObject_3$d, templateObject_4$b, templateObject_5$9, templateObject_6$8, templateObject_7$7, templateObject_8$6, templateObject_9$5;
+var templateObject_1$d, templateObject_2$d, templateObject_3$d, templateObject_4$b, templateObject_5$9, templateObject_6$8, templateObject_7$7;
 
 var semantic$7 = tokens.semantic;
 var space$5 = semantic$7.space,
@@ -7337,7 +7529,7 @@ var StyledDialog = /*#__PURE__*/styled__default.default.div.withConfig({
 })(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), semantic$7.layer.modal, function (_a) {
   var $width = _a.$width;
   return $width;
-}, space$5[400], space$5[400], semantic$7.surface.raised, semantic$7.radius.xl, elevation.overlay, styled.css(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion$2.duration.moderate, motion$2.easing.decelerate, function (_a) {
+}, space$5[400], space$5[400], semantic$7.surface.overlay, tokens.component.overlay.borderRadius, elevation.overlay, styled.css(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion$2.duration.moderate, motion$2.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }), reducedMotion, fadeIn$1, motion$2.duration.moderate, motion$2.easing.decelerate, function (_a) {
@@ -7612,7 +7804,7 @@ var StyledNumberInput = /*#__PURE__*/styled__default.default(StyledInputBase).wi
 var StyledStepperContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "NumberInput__StyledStepperContainer",
   componentId: "sc-qotc3w-5"
-})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), tokens.semantic.space[200], tokens.semantic.space[200]);
+})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], tokens.semantic.space[200], fieldButtonRadius);
 var StyledHelperText$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "NumberInput__StyledHelperText",
   componentId: "sc-qotc3w-6"
@@ -7871,7 +8063,7 @@ var StyledInputWrapper$1 = /*#__PURE__*/styled__default.default.div.withConfig({
 var StyledToggleButton = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "PasswordField__StyledToggleButton",
   componentId: "sc-1p15zk0-5"
-})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"
+})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n"
 /**
  * PasswordField component for secure password input with visibility toggle
  *
@@ -7883,7 +8075,7 @@ var StyledToggleButton = /*#__PURE__*/styled__default.default.div.withConfig({
  *   required
  * />
  * ```
- */])), tokens.semantic.space[200]);
+ */])), tokens.semantic.space[200], fieldButtonRadius);
 /**
  * PasswordField component for secure password input with visibility toggle
  *
@@ -7985,7 +8177,7 @@ var StyledSearchContainer = /*#__PURE__*/styled__default.default.div.withConfig(
 var StyledInputWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SearchField__StyledInputWrapper",
   componentId: "sc-qhz9i8-1"
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic$5.space[200], semantic$5.size.control.lg, semantic$5.space[200], semantic$5.space[300], component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, component$1.input["default"].borderRadius, semantic$5.motion.duration.moderate, semantic$5.motion.easing.standard, semantic$5.motion.duration.moderate, semantic$5.motion.easing.standard, function (props) {
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic$5.space[200], semantic$5.size.control.lg, semantic$5.space[200], semantic$5.space[300], component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, component$1.input["default"].borderRadius, fieldButtonRadius, semantic$5.motion.duration.moderate, semantic$5.motion.easing.standard, semantic$5.motion.duration.moderate, semantic$5.motion.easing.standard, function (props) {
   return props.$isFocused && "\n    border-color: ".concat(component$1.input.focus.borderColor, ";\n    outline: ").concat(component$1.input.focus.outline, ";\n    outline-offset: ").concat(semantic$5.border.focusOffset, ";\n  ");
 }, function (props) {
   return props.$disabled && "\n    background-color: ".concat(component$1.input.disabled.backgroundColor, ";\n    border-color: ").concat(component$1.input.disabled.borderColor, ";\n    cursor: not-allowed;\n  ");
@@ -7997,7 +8189,7 @@ var StyledInput = /*#__PURE__*/styled__default.default.input.withConfig({
 var StyledSuggestionsList = /*#__PURE__*/styled__default.default.ul.withConfig({
   displayName: "SearchField__StyledSuggestionsList",
   componentId: "sc-qhz9i8-3"
-})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic$5.space[100], tokens.semantic.size.menu.maxHeight, semantic$5.surface.raised, semantic$5.border.width.thin, semantic$5.color.border["default"], semantic$5.radius.md, semantic$5.elevation.floating, semantic$5.space[100], semantic$5.layer.dropdown, rowStates.unselected.hover.background);
+})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic$5.space[100], tokens.semantic.size.menu.maxHeight, semantic$5.surface.overlay, semantic$5.border.width.thin, semantic$5.color.border["default"], semantic$5.radius.md, semantic$5.elevation.floating, semantic$5.space[100], semantic$5.layer.dropdown, rowStates.unselected.hover.background);
 var StyledSectionHeader = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SearchField__StyledSectionHeader",
   componentId: "sc-qhz9i8-4"
@@ -8330,14 +8522,14 @@ var StyledSheet = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Sheet__StyledSheet",
   componentId: "sc-8abisx-1"
-})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic$4.surface.base, semantic$4.elevation.overlay, semantic$4.layer.overlay, function (_a) {
+})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  position: fixed;\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", "; /* matches the panel */\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", "; /* matches the panel */\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic$4.surface.overlay, semantic$4.elevation.overlay, semantic$4.layer.overlay, function (_a) {
   var $position = _a.$position,
     $variant = _a.$variant,
     $width = _a.$width,
     $height = _a.$height;
   var isDrawer = $variant === 'drawer';
   var margin = isDrawer ? semantic$4.space[400] : '0';
-  var borderRadius = isDrawer ? semantic$4.radius.md : '0';
+  var borderRadius = isDrawer ? tokens.component.overlay.borderRadius : '0';
   switch ($position) {
     case 'right':
       return styled.css(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic$4.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInRight, semantic$4.motion.duration.moderate, semantic$4.motion.easing.standard, function (_a) {
@@ -8350,7 +8542,7 @@ var StyledSheet = /*#__PURE__*/styled__default.default.div.withConfig({
         return $isExiting && exitAnimation;
       });
     case 'top':
-      return styled.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $height, isDrawer ? "".concat(semantic$4.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInTop, semantic$4.motion.duration.moderate, semantic$4.motion.easing.standard, function (_a) {
+      return styled.css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $height, isDrawer ? "".concat(semantic$4.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInTop, semantic$4.motion.duration.moderate, semantic$4.motion.easing.standard, function (_a) {
         var $isExiting = _a.$isExiting;
         return $isExiting && exitAnimation;
       });
@@ -8363,7 +8555,7 @@ var StyledSheet = /*#__PURE__*/styled__default.default.div.withConfig({
 }, reducedMotion, fadeIn, semantic$4.motion.duration.moderate, semantic$4.motion.easing.standard, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
-}, semantic$4.space[200], semantic$4.surface.raised, semantic$4.color.border["default"], semantic$4.radius.full, semantic$4.color.fill.inverse);
+}, semantic$4.space[200], semantic$4.surface.overlay, semantic$4.color.border["default"], semantic$4.radius.full, semantic$4.color.fill.inverse);
 var StyledSheetContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Sheet__StyledSheetContent",
   componentId: "sc-8abisx-2"
@@ -8533,7 +8725,7 @@ var Sheet = function Sheet(_a) {
   });
 };
 Sheet.displayName = 'Sheet';
-var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$3, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
+var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1;
 
 var semantic$3 = tokens.semantic;
 var StyledSliderContainer = /*#__PURE__*/styled__default.default.div.withConfig({
@@ -8999,7 +9191,7 @@ var StyledTab = /*#__PURE__*/styled__default.default.button.withConfig({
   componentId: "sc-1g9ib0y-1"
 })(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"])), semantic$2.space[200], semantic$2.space[300], semantic$2.space[400], tokens.component.button.sizes.medium.font, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic$2.motion.transition.feedback, semantic$2.radius.sm, semantic$2.radius.sm, function (props) {
+}, semantic$2.motion.transition.feedback, rowRadius, rowRadius, function (props) {
   return props.$isActive ? semantic$2.color.fill['accent-muted'] : 'transparent';
 }, function (props) {
   return props.$isActive ? semantic$2.color.text.accent : semantic$2.color.text.muted;
@@ -9042,7 +9234,7 @@ var StyledBadge = /*#__PURE__*/styled__default.default.span.withConfig({
  *   onTabChange={setActiveTab}
  * />
  * ```
- */])), tokens.component.tabBar.badge.size, tokens.component.tabBar.badge.size, semantic$2.space[100], tokens.component.tabBar.badge.typography, tokens.component.tabBar.badge.fontWeight, semantic$2.radius.full, semantic$2.color.fill.accent, semantic$2.color.text.inverse);
+ */])), tokens.component.tabBar.badge.size, tokens.component.tabBar.badge.size, semantic$2.space[100], tokens.component.tabBar.badge.typography, tokens.component.tabBar.badge.fontWeight, semantic$2.radius.full, semantic$2.color.fill.accent, semantic$2.color.text['on-fill']);
 /**
  * TabBar component for tabbed navigation
  *
@@ -9485,9 +9677,9 @@ var semantic$1 = tokens.semantic;
 var space$1 = semantic$1.space,
   color$1 = semantic$1.color,
   motion$1 = semantic$1.motion,
-  radius$1 = semantic$1.radius,
-  size = semantic$1.size,
-  border$1 = semantic$1.border,
+  radius = semantic$1.radius,
+  size$1 = semantic$1.size,
+  border = semantic$1.border,
   typography = semantic$1.typography;
 var Trigger = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -9495,10 +9687,10 @@ var Trigger = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "WorkspaceSwitcher__Trigger",
   componentId: "sc-s35ke-0"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space$1[200], size.row.sm, space$1.inset.xs, space$1.inset.sm, radius$1.sm, typography.label, color$1.text["default"], motion$1.duration.fast, motion$1.easing.decelerate, interactiveRow(), function (_a) {
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space$1[200], size$1.row.sm, space$1.inset.xs, space$1.inset.sm, radius.md, typography.label, color$1.text["default"], motion$1.duration.fast, motion$1.easing.decelerate, interactiveRow(), function (_a) {
   var $collapsed = _a.$collapsed;
   return $collapsed && styled.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n      justify-content: center;\n      padding: ", ";\n    "], ["\n      justify-content: center;\n      padding: ", ";\n    "])), space$1.inset.xs);
-}, border$1.focus, border$1.focusOffset);
+}, border.focus, border.focusOffset);
 var Name = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "WorkspaceSwitcher__Name",
   componentId: "sc-s35ke-1"
@@ -9567,6 +9759,8 @@ var WorkspaceSwitcher = function WorkspaceSwitcher(_a) {
     }) : trigger,
     side: collapsed ? 'right' : 'bottom',
     align: "start",
+    // Lines up with the full-width trigger beneath it (issue 350)
+    matchTriggerWidth: true,
     children: [jsxRuntime.jsx(MenuGroup, {
       label: label,
       children: workspaces.map(function (workspace) {
@@ -9600,9 +9794,8 @@ var semantic = tokens.semantic,
   component = tokens.component;
 var space = semantic.space,
   motion = semantic.motion,
-  radius = semantic.radius,
-  border = semantic.border,
-  color = semantic.color;
+  color = semantic.color,
+  size = semantic.size;
 var widths = component.sidebarNav.width;
 var Nav = /*#__PURE__*/styled__default.default.nav.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -9610,39 +9803,67 @@ var Nav = /*#__PURE__*/styled__default.default.nav.withConfig({
   },
   displayName: "SidebarNav__Nav",
   componentId: "sc-1as46tp-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with a thin edge */\n  border-right: ", ";\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with a thin edge */\n  border-right: ", ";\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"])), space[200], function (_a) {
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with no edge of its own (issue 348). The width\n     moves with everything inside it, decelerating (0037) */\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with no edge of its own (issue 348). The width\n     moves with everything inside it, decelerating (0037) */\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"
+// The header holds two toggles in fixed places that cross-fade (issue 348): collapse beside the
+// header content, and expand in the content's place, where the rail shows it. Nothing moves.
+])), space[200], function (_a) {
   var $width = _a.$width;
   return $width;
-}, space[200], border["default"], motion.duration.moderate, motion.easing.standard, reducedMotion);
+}, space[200], motion.duration.moderate, motion.easing.decelerate, reducedMotion);
+// The header holds two toggles in fixed places that cross-fade (issue 348): collapse beside the
+// header content, and expand in the content's place, where the rail shows it. Nothing moves.
 var Header = /*#__PURE__*/styled__default.default.div.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
   displayName: "SidebarNav__Header",
   componentId: "sc-1as46tp-1"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"])), space[100], function (_a) {
-  var $collapsed = _a.$collapsed;
-  return $collapsed && styled.css(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
-});
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"])), space[100], size.control.sm);
 var HeaderContent = /*#__PURE__*/styled__default.default.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNav__HeaderContent",
   componentId: "sc-1as46tp-2"
-})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n"], ["\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n"])));
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n\n  /* Keeps its expanded width, so the nav's edge clips it rather than it reflowing mid-move */\n  & > div {\n    width: calc(var(", ") - 2 * ", " - ", " - ", ");\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n\n  /* Keeps its expanded width, so the nav's edge clips it rather than it reflowing mid-move */\n  & > div {\n    width: calc(var(", ") - 2 * ", " - ", " - ", ");\n  }\n"])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+}, EXPANDED_WIDTH_VAR, NAV_PADDING, size.control.sm, space[100]);
+var CollapseSlot = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__CollapseSlot",
+  componentId: "sc-1as46tp-3"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  ", "\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  ", "\n"
+// Centred in the rail, where the header content starts
+])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
+// Centred in the rail, where the header content starts
+var ExpandSlot = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__ExpandSlot",
+  componentId: "sc-1as46tp-4"
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((", " - 2 * ", " - ", ") / 2);\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((", " - 2 * ", " - ", ") / 2);\n  display: flex;\n  align-items: center;\n  ", "\n"])), component.sidebarNav.width.rail, NAV_PADDING, size.control.sm, function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
 var Body = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SidebarNav__Body",
-  componentId: "sc-1as46tp-3"
-})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"
+  componentId: "sc-1as46tp-5"
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"
 // The rows and the highlight share this box, so the highlight scrolls with the rows
 ])));
 // The rows and the highlight share this box, so the highlight scrolls with the rows
 var Content = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SidebarNav__Content",
-  componentId: "sc-1as46tp-4"
-})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+  componentId: "sc-1as46tp-6"
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"])));
 var List = /*#__PURE__*/styled__default.default.ul.withConfig({
   displayName: "SidebarNav__List",
-  componentId: "sc-1as46tp-5"
-})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"])));
+  componentId: "sc-1as46tp-7"
+})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"])));
 // One highlight glides to the hovered or keyboard-focused row (0053): the row hover colour,
 // moving over duration.fast. It jumps under reduced motion and hides in forced colours, where
 // rows outline themselves instead.
@@ -9651,61 +9872,109 @@ var Highlight = /*#__PURE__*/styled__default.default.div.withConfig({
     return !prop.startsWith('$');
   },
   displayName: "SidebarNav__Highlight",
-  componentId: "sc-1as46tp-6"
-})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"])), radius.sm, color.fill.muted, function (_a) {
+  componentId: "sc-1as46tp-8"
+})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"
+// The footer fades out in the rail, keeping its expanded width so it doesn't reflow mid-move
+])), rowRadius, color.fill.muted, function (_a) {
   var $visible = _a.$visible;
   return $visible ? 1 : 0;
 }, function (_a) {
   var $instant = _a.$instant;
   return $instant ? "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.decelerate) : "transform ".concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    height ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    width ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    opacity ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate);
 }, reducedMotion, motion.duration.fast, motion.easing.decelerate, forcedColors);
+// The footer fades out in the rail, keeping its expanded width so it doesn't reflow mid-move
 var Footer = /*#__PURE__*/styled__default.default.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNav__Footer",
-  componentId: "sc-1as46tp-7"
-})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"
+  componentId: "sc-1as46tp-9"
+})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  flex-shrink: 0;\n  overflow: hidden;\n  ", "\n\n  & > div {\n    width: calc(var(", ") - 2 * ", ");\n  }\n"], ["\n  flex-shrink: 0;\n  overflow: hidden;\n  ", "\n\n  & > div {\n    width: calc(var(", ") - 2 * ", ");\n  }\n"
 /**
  * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
  * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
  * On small screens, place it in a Sheet with `collapsible={false}`.
- */])));
+ */])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+}, EXPANDED_WIDTH_VAR, NAV_PADDING);
 /**
  * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
  * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
  * On small screens, place it in a Sheet with `collapsible={false}`.
  */
 var SidebarNav = function SidebarNav(_a) {
+  var _b;
   var label = _a.label,
     children = _a.children,
     header = _a.header,
     footer = _a.footer,
-    _b = _a.width,
-    width = _b === void 0 ? 'default' : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 'default' : _c,
     collapsedProp = _a.collapsed,
-    _c = _a.defaultCollapsed,
-    defaultCollapsed = _c === void 0 ? false : _c,
+    _d = _a.defaultCollapsed,
+    defaultCollapsed = _d === void 0 ? false : _d,
     onCollapsedChange = _a.onCollapsedChange,
-    _d = _a.collapsible,
-    collapsible = _d === void 0 ? true : _d,
+    _e = _a.collapsible,
+    collapsible = _e === void 0 ? true : _e,
     linkComponent = _a.linkComponent,
     dataTestId = _a["data-testid"];
-  var _e = React.useState(defaultCollapsed),
-    uncontrolledCollapsed = _e[0],
-    setUncontrolledCollapsed = _e[1];
+  var _f = React.useState(defaultCollapsed),
+    uncontrolledCollapsed = _f[0],
+    setUncontrolledCollapsed = _f[1];
   var isControlled = collapsedProp !== undefined;
   var collapsed = collapsible && (isControlled ? collapsedProp : uncontrolledCollapsed);
   var contentRef = React.useRef(null);
-  var _f = React.useState({
+  var navRef = React.useRef(null);
+  var bodyRef = React.useRef(null);
+  // A classic scrollbar narrows every row, so rows need its width. Measured while expanded (the rail
+  // only clips what rows hold) and written straight to a CSS variable, so it re-renders nothing.
+  React.useEffect(function () {
+    var nav = navRef.current;
+    var body = bodyRef.current;
+    if (!nav || !body || collapsed) return;
+    var measure = function measure() {
+      return nav.style.setProperty(SCROLLBAR_VAR, "".concat(body.offsetWidth - body.clientWidth, "px"));
+    };
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(measure);
+    observer.observe(body);
+    if (contentRef.current) observer.observe(contentRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [collapsed]);
+  var _g = React.useState({
       box: null,
       visible: false,
       instant: true
     }),
-    highlight = _f[0],
-    setHighlight = _f[1];
+    highlight = _g[0],
+    setHighlight = _g[1];
+  // Focus follows the toggle: the one pressed fades away, so focus moves to the one now shown
+  var collapseSlot = React.useRef(null);
+  var expandSlot = React.useRef(null);
+  // Which state a toggle asked for, and when: focus moves only if that state arrives promptly, so a
+  // controlled parent that declined the change can't have focus jump on some later change
+  var focusToggle = React.useRef(null);
   var toggle = function toggle() {
     var next = !collapsed;
+    focusToggle.current = {
+      to: next,
+      at: Date.now()
+    };
     if (!isControlled) setUncontrolledCollapsed(next);
     onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(next);
   };
+  React.useEffect(function () {
+    var _a;
+    var request = focusToggle.current;
+    focusToggle.current = null;
+    if (!request || request.to !== collapsed || Date.now() - request.at > 1000) return;
+    var slot = collapsed ? expandSlot.current : collapseSlot.current;
+    (_a = slot === null || slot === void 0 ? void 0 : slot.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [collapsed]);
   var hide = function hide() {
     return setHighlight(function (state) {
       return __assign(__assign({}, state), {
@@ -9715,9 +9984,9 @@ var SidebarNav = function SidebarNav(_a) {
   };
   // Collapsing or expanding moves every row, so the highlight's box is stale: hide it until the
   // pointer or focus finds a row again (adjusted during render, React's pattern for a prop change)
-  var _g = React.useState(collapsed),
-    layout = _g[0],
-    setLayout = _g[1];
+  var _h = React.useState(collapsed),
+    layout = _h[0],
+    setLayout = _h[1];
   if (layout !== collapsed) {
     setLayout(collapsed);
     setHighlight(function (state) {
@@ -9754,32 +10023,64 @@ var SidebarNav = function SidebarNav(_a) {
     glide: true,
     inNav: true
   };
-  var toggleLabel = collapsed ? 'Expand sidebar' : 'Collapse sidebar';
-  var toggleButton = collapsible && jsxRuntime.jsx(Tooltip, {
-    text: toggleLabel,
-    side: collapsed ? 'right' : 'bottom',
-    children: jsxRuntime.jsx(IconButton, {
-      variant: "naked",
-      size: "small",
-      iconName: "sidebar",
-      "aria-label": toggleLabel,
-      "aria-expanded": !collapsed,
-      onClick: toggle
-    })
+  // The header content keeps its expanded layout: it fades out in the rail rather than turning into
+  // a rail version of itself mid-move
+  var headerContext = __assign(__assign({}, context), {
+    collapsed: false
   });
   return jsxRuntime.jsx(SidebarNavContext.Provider, {
     value: context,
     children: jsxRuntime.jsxs(Nav, {
+      ref: navRef,
       "aria-label": label,
       "$width": collapsed ? widths.rail : widths[width],
       "data-collapsed": collapsed || undefined,
       "data-testid": dataTestId,
-      children: [(header || toggleButton) && jsxRuntime.jsxs(Header, {
-        "$collapsed": collapsed,
+      style: (_b = {}, _b[EXPANDED_WIDTH_VAR] = widths[width], _b),
+      children: [(header || collapsible) && jsxRuntime.jsxs(Header, {
         children: [header && jsxRuntime.jsx(HeaderContent, {
-          children: header
-        }), toggleButton]
+          "$hidden": collapsed,
+          children: jsxRuntime.jsx("div", {
+            children: jsxRuntime.jsx(SidebarNavContext.Provider, {
+              value: headerContext,
+              children: header
+            })
+          })
+        }), collapsible && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(CollapseSlot, {
+            ref: collapseSlot,
+            "$hidden": collapsed,
+            children: jsxRuntime.jsx(Tooltip, {
+              text: "Collapse sidebar",
+              side: "bottom",
+              children: jsxRuntime.jsx(IconButton, {
+                variant: "naked",
+                size: "small",
+                iconName: "sidebar",
+                "aria-label": "Collapse sidebar",
+                "aria-expanded": true,
+                onClick: toggle
+              })
+            })
+          }), jsxRuntime.jsx(ExpandSlot, {
+            ref: expandSlot,
+            "$hidden": !collapsed,
+            children: jsxRuntime.jsx(Tooltip, {
+              text: "Expand sidebar",
+              side: "right",
+              children: jsxRuntime.jsx(IconButton, {
+                variant: "naked",
+                size: "small",
+                iconName: "sidebar",
+                "aria-label": "Expand sidebar",
+                "aria-expanded": false,
+                onClick: toggle
+              })
+            })
+          })]
+        })]
       }), jsxRuntime.jsx(Body, {
+        ref: bodyRef,
         children: jsxRuntime.jsxs(Content, {
           ref: contentRef,
           onPointerOver: function onPointerOver(event) {
@@ -9807,14 +10108,17 @@ var SidebarNav = function SidebarNav(_a) {
             children: children
           })]
         })
-      }), footer && !collapsed && jsxRuntime.jsx(Footer, {
-        children: footer
+      }), footer && jsxRuntime.jsx(Footer, {
+        "$hidden": collapsed,
+        children: jsxRuntime.jsx("div", {
+          children: footer
+        })
       })]
     })
   });
 };
 SidebarNav.displayName = 'SidebarNav';
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1;
 
 // Exception to decision 0014: the gap props are typed as base dimension keys (public API),
 // so they are looked up in the base tier until they accept semantic keys.