@common-origin/design-system 2.20.0 → 2.22.0

package/dist/client.js

@@ -156,31 +156,31 @@ function withCssVariables(tree, path) {
 var tokens = withCssVariables(data.tokensJson);
 
 // Destructure tokens
-var semantic$l = tokens.semantic;
+var semantic$n = tokens.semantic;
 var initials = tokens.component.avatar.initials;
-var color$b = semantic$l.color,
-  size$3 = semantic$l.size;
-var radius$6 = semantic$l.radius;
+var color$d = semantic$n.color,
+  size$4 = semantic$n.size;
+var radius$6 = semantic$n.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$M || (templateObject_1$M = __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$P || (templateObject_1$P = __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$3.avatar[$size];
+  return size$4.avatar[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return size$3.avatar[$size];
-}, radius$6.full, color$b.fill.muted);
+  return size$4.avatar[$size];
+}, radius$6.full, color$d.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$y || (templateObject_2$y = __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$6.full);
+})(templateObject_2$z || (templateObject_2$z = __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$6.full);
 var AvatarInitials = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -192,7 +192,7 @@ var AvatarInitials = /*#__PURE__*/styled__default.default.span.withConfig({
 ])), initials.fontFamily, initials.fontWeight, function (_a) {
   var $size = _a.$size;
   return initials.fontSize[$size];
-}, color$b.text["default"], initials.lineHeight);
+}, color$d.text["default"], initials.lineHeight);
 // Helper function to get initials from name
 var getInitials = function getInitials(name) {
   return name.split(' ').map(function (word) {
@@ -246,7 +246,7 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$M, templateObject_2$y, templateObject_3$w;
+var templateObject_1$P, templateObject_2$z, templateObject_3$w;
 
 // 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$L || (templateObject_1$L = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
+var fadeOut$1 = styled.keyframes(templateObject_1$O || (templateObject_1$O = __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$L || (templateObject_1$L = __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$x || (templateObject_2$x = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
+var exitAnimation = styled.css(templateObject_2$y || (templateObject_2$y = __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);
@@ -333,11 +333,11 @@ var rowStates = {
     },
     hover: {
       background: rowFill['accent-muted-hover'],
-      text: rowText['accent-hover']
+      text: rowText.accent
     },
     pressed: {
       background: rowFill['accent-muted-pressed'],
-      text: rowText['accent-pressed']
+      text: rowText.accent
     }
   }
 };
@@ -399,44 +399,44 @@ 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$L, templateObject_2$x, templateObject_3$v;
+var templateObject_1$O, templateObject_2$y, templateObject_3$v;
 
 var _a$a = tokens.semantic,
-  typography$2 = _a$a.typography,
-  color$a = _a$a.color,
+  typography$3 = _a$a.typography,
+  color$c = _a$a.color,
   letterSpacing = _a$a.letterSpacing;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
-    display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
-    h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
-    h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
-    h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
-    subtitle: "font: ".concat(typography$2.subtitle, ";"),
-    body: "font: ".concat(typography$2.body, ";"),
-    small: "font: ".concat(typography$2.small, ";"),
-    overline: "font: ".concat(typography$2.overline, ";"),
-    caption: "font: ".concat(typography$2.caption, "; text-transform: uppercase;"),
+    display: "font: ".concat(typography$3.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h1: "font: ".concat(typography$3.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h2: "font: ".concat(typography$3.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h3: "font: ".concat(typography$3.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h4: "font: ".concat(typography$3.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h5: "font: ".concat(typography$3.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    h6: "font: ".concat(typography$3.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    subtitle: "font: ".concat(typography$3.subtitle, ";"),
+    body: "font: ".concat(typography$3.body, ";"),
+    small: "font: ".concat(typography$3.small, ";"),
+    overline: "font: ".concat(typography$3.overline, ";"),
+    caption: "font: ".concat(typography$3.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, ";"),
-    label: "font: ".concat(typography$2.label, ";")
+    button3: "font: ".concat(tokens.component.button.sizes.small.font, "; font-weight: ").concat(tokens.component.button.sizes.small.fontWeight, ";"),
+    label: "font: ".concat(typography$3.label, ";")
   };
   return styles[variant] || styles.body;
 };
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
-    "default": color$a.text["default"],
-    emphasis: color$a.text.emphasis,
-    subdued: color$a.text.muted,
-    inverse: color$a.text.inverse,
-    disabled: color$a.text.disabled,
-    interactive: color$a.text.accent,
-    error: color$a.text.danger,
-    success: color$a.text.success,
-    warning: color$a.text.warning
+    "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"];
 };
@@ -467,7 +467,7 @@ var StyledTypography = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
+})(templateObject_1$N || (templateObject_1$N = __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.
  *
@@ -529,20 +529,20 @@ var Typography = function Typography(_a) {
     children: children
   });
 };
-var templateObject_1$K;
+var templateObject_1$N;
 
-var semantic$k = tokens.semantic;
-var color$9 = semantic$k.color;
-var radius$5 = semantic$k.radius;
+var semantic$m = tokens.semantic;
+var color$b = semantic$m.color;
+var radius$5 = semantic$m.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$J || (templateObject_1$J = __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 scaleIn$2 = styled.keyframes(templateObject_1$M || (templateObject_1$M = __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$w || (templateObject_2$w = __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$x || (templateObject_2$x = __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('$');
@@ -556,23 +556,22 @@ var BadgeIndicator = /*#__PURE__*/styled__default.default.span.withConfig({
 }, function (props) {
   return props.$isDot ? dot.size : count.height;
 }, function (props) {
-  return props.$isDot ? '0' : "0 ".concat(semantic$k.space.inset.xs);
-}, radius$5.full, count.lineHeight, ring.width, semantic$k.surface.base, scaleIn$2, semantic$k.motion.duration.moderate, semantic$k.motion.easing.decelerate, reducedMotion, function (props) {
-  return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic$k.border.width.thin, " solid currentColor; }");
+  return props.$isDot ? '0' : "0 ".concat(semantic$m.space.inset.xs);
+}, radius$5.full, count.lineHeight, ring.width, semantic$m.surface.base, scaleIn$2, semantic$m.motion.duration.moderate, semantic$m.motion.easing.decelerate, reducedMotion, function (props) {
+  return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic$m.border.width.thin, " solid currentColor; }");
 }, function (props) {
   switch (props.$variant) {
+    // 'primary', 'error', 'warning' and 'success' are deprecated aliases for 'accent', removed in
+    // 3.0: 'primary' (#169), and the status colours, because a badge's colour alone can't carry a
+    // status (decision 0045, #263)
     case 'accent':
     case 'primary':
-      // Deprecated alias for 'accent', removed in 3.0 (#169)
-      return "\n          background-color: ".concat(color$9.fill.accent, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color$9.fill.danger, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color$9.fill.warning, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color$9.fill.success, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$b.fill.accent, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     default:
-      return "\n          background-color: ".concat(color$9.fill.emphasis, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$b.fill.emphasis, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
   }
 });
 var ScreenReaderOnly$1 = /*#__PURE__*/styled__default.default.span.withConfig({
@@ -616,16 +615,17 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$J, templateObject_2$w, templateObject_3$u, templateObject_4$n;
+var templateObject_1$M, templateObject_2$x, templateObject_3$u, templateObject_4$n;
 
 // Props whose values are token keys keep their published vocabulary in 2.x (P7), but read the
 // semantic grammar's names (decision 0031, #189). Each map covers every key the prop type allows,
 // so TypeScript fails here if a key is added without a mapping.
-var semantic$j = tokens.semantic;
-var color$8 = semantic$j.color,
-  space$e = semantic$j.space,
-  radius$4 = semantic$j.radius,
-  surface = semantic$j.surface;
+var semantic$l = tokens.semantic;
+var color$a = semantic$l.color,
+  space$e = semantic$l.space,
+  radius$4 = semantic$l.radius,
+  surface = semantic$l.surface,
+  opacity = semantic$l.opacity;
 /** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
 var spaceByLayoutKey = {
   none: space$e[0],
@@ -645,7 +645,7 @@ var spaceByLayoutKey = {
   '10xl': space$e[2000],
   '11xl': space$e[2400],
   // A keyword, not a step: it stays until the keyword question is settled (0031)
-  auto: semantic$j.spacing.layout.auto
+  auto: semantic$l.spacing.layout.auto
 };
 /** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
 var radiusByKey = {
@@ -665,73 +665,78 @@ var backgroundByKey = {
   page: surface.base,
   subtle: surface.raised,
   overlay: surface.scrim,
-  emphasis: color$8.fill.emphasis,
-  'emphasis-hover': color$8.fill['emphasis-hover'],
-  'emphasis-active': color$8.fill['emphasis-pressed'],
-  surface: color$8.fill.muted,
-  inverse: color$8.fill.inverse,
-  interactive: color$8.fill.accent,
-  'interactive-hover': color$8.fill['accent-hover'],
-  'interactive-active': color$8.fill['accent-pressed'],
-  'interactive-subtle': color$8.fill['accent-muted'],
-  'interactive-subtle-hover': color$8.fill['accent-muted-hover'],
-  'interactive-subtle-active': color$8.fill['accent-muted-pressed'],
-  error: color$8.fill.danger,
-  'error-hover': color$8.fill['danger-hover'],
-  'error-active': color$8.fill['danger-pressed'],
-  'error-subtle': color$8.fill['danger-muted'],
-  success: color$8.fill.success,
-  'success-subtle': color$8.fill['success-muted'],
-  warning: color$8.fill.warning,
-  'warning-subtle': color$8.fill['warning-muted'],
-  disabled: color$8.fill.disabled,
-  neutral: color$8.fill["default"],
-  'neutral-hover': color$8.fill['default-hover'],
-  'neutral-active': color$8.fill['default-pressed'],
-  transparent: color$8.fill.none,
-  'hover-overlay': color$8.fill['none-hover'],
-  'active-overlay': color$8.fill['none-pressed'],
-  'inverse-overlay': color$8.fill['inverse-none-hover'],
+  emphasis: color$a.fill.emphasis,
+  // A strong fill's states mix its content colour in at the state-layer opacity (decision 0048)
+  'emphasis-hover': "color-mix(in srgb, ".concat(color$a.fill.emphasis, ", ").concat(color$a.text.inverse, " calc(").concat(opacity.state.hover, " * 100%))"),
+  'emphasis-active': "color-mix(in srgb, ".concat(color$a.fill.emphasis, ", ").concat(color$a.text.inverse, " calc(").concat(opacity.state.pressed, " * 100%))"),
+  surface: color$a.fill.muted,
+  inverse: color$a.fill.inverse,
+  interactive: color$a.fill.accent,
+  'interactive-hover': color$a.fill['accent-hover'],
+  'interactive-active': color$a.fill['accent-pressed'],
+  'interactive-subtle': color$a.fill['accent-muted'],
+  'interactive-subtle-hover': color$a.fill['accent-muted-hover'],
+  'interactive-subtle-active': color$a.fill['accent-muted-pressed'],
+  error: color$a.fill.danger,
+  'error-hover': color$a.fill['danger-hover'],
+  'error-active': color$a.fill['danger-pressed'],
+  'error-subtle': color$a.fill['danger-muted'],
+  success: color$a.fill.success,
+  'success-subtle': color$a.fill['success-muted'],
+  warning: color$a.fill.warning,
+  'warning-subtle': color$a.fill['warning-muted'],
+  disabled: color$a.fill.disabled,
+  neutral: color$a.fill["default"],
+  'neutral-hover': color$a.fill['default-hover'],
+  'neutral-active': color$a.fill['default-pressed'],
+  transparent: color$a.fill.none,
+  'hover-overlay': color$a.fill['none-hover'],
+  'active-overlay': color$a.fill['none-pressed'],
+  'inverse-overlay': color$a.fill['inverse-none-hover'],
   // Moved to the component tier (decision 0031 §6)
   progressTrack: tokens.component.track.background
 };
 /** Box's `color` prop: text colours, old and new keys. */
 var textColorByKey = {
-  "default": color$8.text["default"],
-  emphasis: color$8.text.emphasis,
-  inverse: color$8.text.inverse,
-  disabled: color$8.text.disabled,
-  success: color$8.text.success,
-  warning: color$8.text.warning,
-  muted: color$8.text.muted,
-  accent: color$8.text.accent,
-  'accent-hover': color$8.text['accent-hover'],
-  'accent-pressed': color$8.text['accent-pressed'],
-  danger: color$8.text.danger,
-  subdued: color$8.text.muted,
-  interactive: color$8.text.accent,
-  'interactive-hover': color$8.text['accent-hover'],
-  'interactive-active': color$8.text['accent-pressed'],
-  error: color$8.text.danger
+  "default": color$a.text["default"],
+  emphasis: color$a.text["default"],
+  inverse: color$a.text.inverse,
+  disabled: color$a.text.disabled,
+  success: color$a.text.success,
+  warning: color$a.text.warning,
+  muted: color$a.text.muted,
+  accent: color$a.text.accent,
+  'accent-hover': color$a.text.accent,
+  'accent-pressed': color$a.text.accent,
+  danger: color$a.text.danger,
+  serious: color$a.text.serious,
+  ai: color$a.text.ai,
+  subdued: color$a.text.muted,
+  interactive: color$a.text.accent,
+  'interactive-hover': color$a.text.accent,
+  'interactive-active': color$a.text.accent,
+  error: color$a.text.danger
 };
 /** Box's border props: border colours, old and new keys. */
 var borderColorByKey = {
-  "default": color$8.border["default"],
-  success: color$8.border.success,
-  warning: color$8.border.warning,
-  none: color$8.border.none,
-  emphasis: color$8.border.emphasis,
-  input: color$8.border.input,
-  'input-hover': color$8.border['input-hover'],
-  focus: color$8.border.focus,
-  accent: color$8.border.accent,
-  danger: color$8.border.danger,
-  subtle: color$8.border.emphasis,
-  control: color$8.border.input,
+  "default": color$a.border["default"],
+  success: color$a.border.success,
+  warning: color$a.border.warning,
+  none: color$a.border.none,
+  emphasis: color$a.border["default"],
+  input: color$a.border.input,
+  'input-hover': color$a.border['input-hover'],
+  focus: color$a.border.focus,
+  accent: color$a.border.accent,
+  danger: color$a.border.danger,
+  serious: color$a.border.serious,
+  ai: color$a.border.ai,
+  subtle: color$a.border["default"],
+  control: color$a.border.input,
   // `strong` split by use (0031); as a generic firm outline it is the hovered-input border
-  strong: color$8.border['input-hover'],
-  interactive: color$8.border.accent,
-  error: color$8.border.danger
+  strong: color$a.border['input-hover'],
+  interactive: color$a.border.accent,
+  error: color$a.border.danger
 };
 
 var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
@@ -743,9 +748,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$I || (templateObject_1$I = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && styled.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
   return props.$justifyContent && styled.css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
@@ -779,35 +784,35 @@ var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
 }, function (props) {
   return props.$pl && styled.css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), spaceByLayoutKey[props.$pl]);
 }, function (props) {
-  return props.$px && styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), spaceByLayoutKey[props.$px], spaceByLayoutKey[props.$px]);
+  return props.$px && styled.css(templateObject_19$2 || (templateObject_19$2 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), spaceByLayoutKey[props.$px], spaceByLayoutKey[props.$px]);
 }, function (props) {
-  return props.$py && styled.css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), spaceByLayoutKey[props.$py], spaceByLayoutKey[props.$py]);
+  return props.$py && styled.css(templateObject_20$2 || (templateObject_20$2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), spaceByLayoutKey[props.$py], spaceByLayoutKey[props.$py]);
 }, function (props) {
-  return props.$width && styled.css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
+  return props.$width && styled.css(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
 }, function (props) {
-  return props.$height && styled.css(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), props.$height);
+  return props.$height && styled.css(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), props.$height);
 }, function (props) {
-  return props.$maxWidth && styled.css(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["max-width: ", ";"], ["max-width: ", ";"])), props.$maxWidth);
+  return props.$maxWidth && styled.css(templateObject_23$2 || (templateObject_23$2 = __makeTemplateObject(["max-width: ", ";"], ["max-width: ", ";"])), props.$maxWidth);
 }, function (props) {
-  return props.$maxHeight && styled.css(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["max-height: ", ";"], ["max-height: ", ";"])), props.$maxHeight);
+  return props.$maxHeight && styled.css(templateObject_24$2 || (templateObject_24$2 = __makeTemplateObject(["max-height: ", ";"], ["max-height: ", ";"])), props.$maxHeight);
 }, function (props) {
-  return props.$minWidth && styled.css(templateObject_25$1 || (templateObject_25$1 = __makeTemplateObject(["min-width: ", ";"], ["min-width: ", ";"])), props.$minWidth);
+  return props.$minWidth && styled.css(templateObject_25$2 || (templateObject_25$2 = __makeTemplateObject(["min-width: ", ";"], ["min-width: ", ";"])), props.$minWidth);
 }, function (props) {
-  return props.$minHeight && styled.css(templateObject_26$1 || (templateObject_26$1 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), props.$minHeight);
+  return props.$minHeight && styled.css(templateObject_26$2 || (templateObject_26$2 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), props.$minHeight);
 }, function (props) {
-  return props.$position && styled.css(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["position: ", ";"], ["position: ", ";"])), props.$position);
+  return props.$position && styled.css(templateObject_27$2 || (templateObject_27$2 = __makeTemplateObject(["position: ", ";"], ["position: ", ";"])), props.$position);
 }, function (props) {
-  return props.$top && styled.css(templateObject_28$1 || (templateObject_28$1 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), props.$top);
+  return props.$top && styled.css(templateObject_28$2 || (templateObject_28$2 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), props.$top);
 }, function (props) {
-  return props.$right && styled.css(templateObject_29$1 || (templateObject_29$1 = __makeTemplateObject(["right: ", ";"], ["right: ", ";"])), props.$right);
+  return props.$right && styled.css(templateObject_29$2 || (templateObject_29$2 = __makeTemplateObject(["right: ", ";"], ["right: ", ";"])), props.$right);
 }, function (props) {
-  return props.$bottom && styled.css(templateObject_30$1 || (templateObject_30$1 = __makeTemplateObject(["bottom: ", ";"], ["bottom: ", ";"])), props.$bottom);
+  return props.$bottom && styled.css(templateObject_30$2 || (templateObject_30$2 = __makeTemplateObject(["bottom: ", ";"], ["bottom: ", ";"])), props.$bottom);
 }, function (props) {
-  return props.$left && styled.css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
+  return props.$left && styled.css(templateObject_31$2 || (templateObject_31$2 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
 }, function (props) {
-  return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), radiusByKey[props.$borderRadius]);
+  return props.$borderRadius && styled.css(templateObject_32$2 || (templateObject_32$2 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), radiusByKey[props.$borderRadius]);
 }, function (props) {
-  return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
+  return props.$border && styled.css(templateObject_33$2 || (templateObject_33$2 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
 }, function (props) {
   return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderTop]);
 }, function (props) {
@@ -967,7 +972,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$I, templateObject_2$v, templateObject_3$t, templateObject_4$m, templateObject_5$i, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, 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, 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$L, templateObject_2$w, templateObject_3$t, templateObject_4$m, templateObject_5$i, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, 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) {
@@ -975,7 +980,7 @@ var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$H || (templateObject_1$H = __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$K || (templateObject_1$K = __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) {
@@ -987,7 +992,7 @@ var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
     case 'default':
       return tokens.semantic.color.icon["default"];
     case 'emphasis':
-      return tokens.semantic.color.icon.emphasis;
+      return tokens.semantic.color.icon["default"];
     case 'subdued':
       return tokens.semantic.color.icon.muted;
     case 'disabled':
@@ -1052,17 +1057,17 @@ var Icon = function Icon(_a) {
     }))
   });
 };
-var templateObject_1$H;
+var templateObject_1$K;
 
 var button$1 = tokens.component.button,
-  semantic$i = tokens.semantic;
+  semantic$k = 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$i.space.inset;
-var control$1 = semantic$i.size.control;
+var inset = semantic$k.space.inset;
+var control$1 = semantic$k.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$i.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$i.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$k.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$k.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 $variant = _a.$variant;
@@ -1125,7 +1130,7 @@ var getSizeStyles = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
-      return "\n        font: ".concat(button$1.sizes.small.font, ";\n        min-height: ").concat(control$1.sm, ";\n        padding: 0 ").concat(inset.md, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.small.font, ";\n        font-weight: ").concat(button$1.sizes.small.fontWeight, ";\n        min-height: ").concat(control$1.sm, ";\n        padding: 0 ").concat(inset.md, ";\n      ");
     case 'medium':
       return "\n        font: ".concat(button$1.sizes.medium.font, ";\n        min-height: ").concat(control$1.md, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
     case 'large':
@@ -1139,14 +1144,14 @@ var StyledButton = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$G || (templateObject_1$G = __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$J || (templateObject_1$J = __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$u || (templateObject_2$u = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+})(templateObject_2$v || (templateObject_2$v = __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
@@ -1249,24 +1254,35 @@ var Button = function Button(_a) {
     children: renderButtonContent(children, iconName, size)
   }));
 };
-var templateObject_1$G, templateObject_2$u;
+var templateObject_1$J, templateObject_2$v;
 
-var semantic$h = tokens.semantic;
-var color$7 = semantic$h.color;
+var semantic$j = tokens.semantic;
+var color$9 = semantic$j.color;
 var label$2 = tokens.component.badge.label;
-var category = color$7.category;
-var radius$3 = semantic$h.radius;
-var space$d = semantic$h.space;
-var labelHeight$1 = semantic$h.size.label;
-// Text on white or the -subtle fill (outlined and minimal), at least 4.5:1 (#115)
+var category = color$9.category;
+var radius$3 = semantic$j.radius;
+var space$d = semantic$j.space;
+var labelHeight$1 = semantic$j.size.label;
+var displayColor = {
+  olive: 'olive',
+  periwinkle: 'periwinkle',
+  rose: 'rose',
+  magenta: 'magenta',
+  gray: 'gray',
+  blue: 'periwinkle',
+  purple: 'magenta',
+  pink: 'rose',
+  yellow: 'olive',
+  green: 'olive',
+  red: 'rose',
+  orange: 'rose'
+};
+// Text on white or the -muted fill (outlined and minimal), at least 4.5:1 (#115)
 var categoryText = {
-  blue: category['blue-text'],
-  purple: category['purple-text'],
-  pink: category['pink-text'],
-  yellow: category['yellow-text'],
-  green: category['green-text'],
-  red: category['red-text'],
-  orange: category['orange-text'],
+  olive: category['olive-text'],
+  periwinkle: category['periwinkle-text'],
+  rose: category['rose-text'],
+  magenta: category['magenta-text'],
   gray: category['gray-text']
 };
 var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
@@ -1275,10 +1291,10 @@ var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "CategoryLabel__StyledCategoryLabel",
   componentId: "sc-1jx7bjo-0"
-})(templateObject_1$F || (templateObject_1$F = __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$I || (templateObject_1$I = __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$3.full, semantic$h.border.width.thin, function (_a) {
+])), radius$3.full, semantic$j.border.width.thin, function (_a) {
   var $size = _a.$size;
   return labelHeight$1[$size];
 }, function (_a) {
@@ -1302,7 +1318,7 @@ var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
-    return color$7.text.inverse;
+    return color$9.text.inverse;
   }
   return categoryText[$color];
 }, function (_a) {
@@ -1318,7 +1334,7 @@ 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$t || (templateObject_2$t = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
 var HiddenLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "CategoryLabel__HiddenLabel",
   componentId: "sc-1jx7bjo-2"
@@ -1326,16 +1342,17 @@ var HiddenLabel = /*#__PURE__*/styled__default.default.span.withConfig({
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```
@@ -1343,16 +1360,17 @@ var HiddenLabel = /*#__PURE__*/styled__default.default.span.withConfig({
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```
@@ -1360,7 +1378,7 @@ var HiddenLabel = /*#__PURE__*/styled__default.default.span.withConfig({
 var CategoryLabel = function CategoryLabel(_a) {
   var children = _a.children,
     _b = _a.color,
-    color = _b === void 0 ? 'blue' : _b,
+    color = _b === void 0 ? 'periwinkle' : _b,
     _c = _a.variant,
     variant = _c === void 0 ? 'filled' : _c,
     _d = _a.size,
@@ -1372,7 +1390,7 @@ var CategoryLabel = function CategoryLabel(_a) {
   // A blank aria-label is no label at all, so it falls back like a missing one
   var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
   return jsxRuntime.jsxs(StyledCategoryLabel, {
-    "$color": color,
+    "$color": displayColor[color],
     "$variant": variant,
     "$size": size,
     "data-testid": dataTestId,
@@ -1389,7 +1407,7 @@ var CategoryLabel = function CategoryLabel(_a) {
   });
 };
 CategoryLabel.displayName = 'CategoryLabel';
-var templateObject_1$F, templateObject_2$t, templateObject_3$s;
+var templateObject_1$I, templateObject_2$u, templateObject_3$s;
 
 // CategoryBadge sizes on the decision 0018 scale
 var toLabelSize = {
@@ -1413,8 +1431,8 @@ var CategoryBadge = function CategoryBadge(_a) {
 };
 CategoryBadge.displayName = 'CategoryBadge';
 
-var chip$1 = tokens.component.chip,
-  semantic$g = tokens.semantic;
+var chip$2 = tokens.component.chip,
+  semantic$i = tokens.semantic;
 // Helper function to get variant styles matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
   var $variant = _a.$variant,
@@ -1427,34 +1445,34 @@ var getVariantStyles = function getVariantStyles(_a) {
     // A selected disabled chip looks like any disabled chip; the checkmark keeps the
     // selected state visible (#110)
     if ($disabled) {
-      var disabled = chip$1.variants.subtle.disabled;
+      var disabled = chip$2.variants.subtle.disabled;
       return "\n        background-color: ".concat(disabled.backgroundColor, ";\n        color: ").concat(disabled.textColor, ";\n      ");
     }
     var _b = tokens.semantic.color,
       fill = _b.fill,
       text = _b.text;
     var interactiveStates = $clickable;
-    return "\n      background-color: ".concat(fill['accent-muted'], ";\n      color: ").concat(text.accent, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text['accent-hover'] : text.accent, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text['accent-pressed'] : text.accent, ";\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ").concat(forcedColors, " {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    ");
+    return "\n      background-color: ".concat(fill['accent-muted'], ";\n      color: ").concat(text.accent, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text.accent : text.accent, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text.accent : text.accent, ";\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ").concat(forcedColors, " {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    ");
   }
   switch ($variant) {
     case 'emphasis':
-      return "\n        background-color: ".concat(chip$1.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip$1.variants.emphasis.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.variants.emphasis.disabled.backgroundColor : $clickable ? chip$1.variants.emphasis.hover.backgroundColor : chip$1.variants.emphasis.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.variants.emphasis.disabled.backgroundColor : $clickable ? chip$1.variants.emphasis.active.backgroundColor : chip$1.variants.emphasis.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.variants.emphasis.disabled.backgroundColor, ";\n          color: ").concat(chip$1.variants.emphasis.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip$2.variants.emphasis.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.emphasis.disabled.backgroundColor : $clickable ? chip$2.variants.emphasis.hover.backgroundColor : chip$2.variants.emphasis.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.emphasis.disabled.backgroundColor : $clickable ? chip$2.variants.emphasis.active.backgroundColor : chip$2.variants.emphasis.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.emphasis.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.emphasis.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'subtle':
-      return "\n        background-color: ".concat(chip$1.variants.subtle.backgroundColor, ";\n        color: ").concat(chip$1.variants.subtle.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.variants.subtle.disabled.backgroundColor : $clickable ? chip$1.variants.subtle.hover.backgroundColor : chip$1.variants.subtle.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.variants.subtle.disabled.backgroundColor : $clickable ? chip$1.variants.subtle.active.backgroundColor : chip$1.variants.subtle.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.variants.subtle.disabled.backgroundColor, ";\n          color: ").concat(chip$1.variants.subtle.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2.variants.subtle.backgroundColor, ";\n        color: ").concat(chip$2.variants.subtle.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.subtle.disabled.backgroundColor : $clickable ? chip$2.variants.subtle.hover.backgroundColor : chip$2.variants.subtle.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.subtle.disabled.backgroundColor : $clickable ? chip$2.variants.subtle.active.backgroundColor : chip$2.variants.subtle.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.subtle.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.subtle.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'interactive':
-      return "\n        background-color: ".concat(chip$1.variants.interactive.backgroundColor, ";\n        color: ").concat(chip$1.variants.interactive.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.variants.interactive.disabled.backgroundColor : $clickable ? chip$1.variants.interactive.hover.backgroundColor : chip$1.variants.interactive.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.variants.interactive.disabled.backgroundColor : $clickable ? chip$1.variants.interactive.active.backgroundColor : chip$1.variants.interactive.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.variants.interactive.disabled.backgroundColor, ";\n          color: ").concat(chip$1.variants.interactive.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2.variants.interactive.backgroundColor, ";\n        color: ").concat(chip$2.variants.interactive.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.interactive.disabled.backgroundColor : $clickable ? chip$2.variants.interactive.hover.backgroundColor : chip$2.variants.interactive.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.interactive.disabled.backgroundColor : $clickable ? chip$2.variants.interactive.active.backgroundColor : chip$2.variants.interactive.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.interactive.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.interactive.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'default':
     default:
-      return "\n        background-color: ".concat(chip$1["default"].backgroundColor, ";\n        color: ").concat(chip$1["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.disabled.backgroundColor : $clickable ? chip$1.hover.backgroundColor : chip$1["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.disabled.backgroundColor : $clickable ? chip$1.active.backgroundColor : chip$1["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.disabled.backgroundColor, ";\n          color: ").concat(chip$1.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2["default"].backgroundColor, ";\n        color: ").concat(chip$2["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.disabled.backgroundColor : $clickable ? chip$2.hover.backgroundColor : chip$2["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.disabled.backgroundColor : $clickable ? chip$2.active.backgroundColor : chip$2["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.disabled.backgroundColor, ";\n          color: ").concat(chip$2.disabled.textColor, ";\n        ") : '', "\n      ");
   }
 };
 // 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$1.sizes.medium.font, ";\n  min-height: ").concat(semantic$g.size.label.medium, ";\n  padding: 0 ").concat(semantic$g.space.inset.sm, ";\n");
+var sizeStyles = "\n  font: ".concat(chip$2.sizes.medium.font, ";\n  min-height: ").concat(semantic$i.size.label.medium, ";\n  padding: 0 ").concat(semantic$i.space.inset.sm, ";\n");
 
-var chip = tokens.component.chip,
-  semantic$f = tokens.semantic;
+var chip$1 = tokens.component.chip,
+  semantic$h = tokens.semantic;
 // Base styled component using direct prop interpolation like Button
 var StyledChip = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1462,18 +1480,18 @@ var StyledChip = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$E || (templateObject_1$E = __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$H || (templateObject_1$H = __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["default"].borderRadius, semantic$f.motion.transition.feedback, function (props) {
+])), chip$1["default"].borderRadius, semantic$h.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.focus.outline, semantic$f.border.focusOffset);
+}, getVariantStyles, sizeStyles, chip$1.focus.outline, semantic$h.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$s || (templateObject_2$s = __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$t || (templateObject_2$t = __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
@@ -1483,10 +1501,10 @@ var CloseButton = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$r || (templateObject_3$r = __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.closeButton.size, chip.closeButton.size, tokens.semantic.space[0], semantic$f.size.label.medium, semantic$f.size.label.medium, tokens.semantic.radius.xs, function (props) {
+})(templateObject_3$r || (templateObject_3$r = __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$h.size.label.medium, semantic$h.size.label.medium, tokens.semantic.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic$f.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip.focus.outline, semantic$f.border.focusOffset, chip["default"].borderRadius);
-var templateObject_1$E, templateObject_2$s, templateObject_3$r;
+}, semantic$h.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$h.border.focusOffset, chip$1["default"].borderRadius);
+var templateObject_1$H, templateObject_2$t, templateObject_3$r;
 
 /**
  * Chip - a static, non-interactive label for tags, categories and metadata.
@@ -1723,11 +1741,61 @@ var BooleanChip = function BooleanChip(_a) {
   }));
 };
 
+var chip = tokens.component.chip,
+  semantic$g = tokens.semantic;
+var color$8 = semantic$g.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$G || (templateObject_1$G = __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
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - 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$g.border.width.thin, color$8.border.input, chip["default"].borderRadius, color$8.fill.none, color$8.text["default"], semantic$g.motion.transition.feedback, sizeStyles, color$8.fill['none-hover'], color$8.fill['none-pressed'], chip.focus.outline, semantic$g.border.focusOffset, color$8.border["default"], color$8.text.disabled, forcedColors);
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - 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
+ */
+var SuggestionChip = function SuggestionChip(_a) {
+  var children = _a.children,
+    onClick = _a.onClick,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    dataTestId = _a["data-testid"];
+  return jsxRuntime.jsx(StyledSuggestionChip, {
+    type: "button",
+    onClick: onClick,
+    disabled: disabled,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+SuggestionChip.displayName = 'SuggestionChip';
+var templateObject_1$G;
+
 var space$c = tokens.semantic.space;
 var StyledContainer$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$D || (templateObject_1$D = __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$c[600], space$c[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$F || (templateObject_1$F = __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$c[600], space$c[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"]);
@@ -1735,12 +1803,12 @@ var Container$1 = function Container(_a) {
     children: children
   }));
 };
-var templateObject_1$D;
+var templateObject_1$F;
 
 var PictureWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$C || (templateObject_1$C = __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$E || (templateObject_1$E = __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.
@@ -1748,7 +1816,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$r || (templateObject_2$r = __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$s || (templateObject_2$s = __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"
@@ -1790,18 +1858,18 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$C, templateObject_2$r, templateObject_3$q, templateObject_4$l, templateObject_5$h;
+var templateObject_1$E, templateObject_2$s, templateObject_3$q, templateObject_4$l, templateObject_5$h;
 
 var _a$8 = tokens.semantic,
-  typography$1 = _a$8.typography,
-  color$6 = _a$8.color;
+  typography$2 = _a$8.typography,
+  color$7 = _a$8.color;
 var TimeStyled = /*#__PURE__*/styled__default.default.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * Formats a date with smart relative/absolute logic
- */])), typography$1.label, color$6.text.muted);
+ */])), typography$2.label, color$7.text.muted);
 /**
  * Formats a date with smart relative/absolute logic
  */
@@ -1844,21 +1912,21 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$B;
+var templateObject_1$D;
 
 var _a$7 = tokens.semantic,
   motion$5 = _a$7.motion,
   border$3 = _a$7.border,
   space$b = _a$7.space,
-  size$2 = _a$7.size,
+  size$3 = _a$7.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$2.control.sm,
-  medium: size$2.control.md,
-  large: size$2.control.lg
+  small: size$3.control.sm,
+  medium: size$3.control.md,
+  large: size$3.control.lg
 };
 // Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
 var padding = {
@@ -1905,7 +1973,7 @@ var IconButtonStyled = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$A || (templateObject_1$A = __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$C || (templateObject_1$C = __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) {
   var $variant = _a.$variant;
   return colours($variant).bg;
 }, function (_a) {
@@ -1983,7 +2051,7 @@ var IconButton = function IconButton(_a) {
     })
   }));
 };
-var templateObject_1$A;
+var templateObject_1$C;
 
 var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1991,7 +2059,7 @@ var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"
+})(templateObject_1$B || (templateObject_1$B = __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;
@@ -2007,35 +2075,8 @@ var sizeToTypographyVariant = {
   large: 'h3',
   xlarge: 'h2'
 };
-// Map size to Icon size for consistent visual alignment
-var sizeToIconSize = {
-  small: 'xs',
-  medium: 'sm',
-  large: 'md',
-  xlarge: 'lg'
-};
-/**
- * Generates aria-label with spelled out amount
- */
-var generateAriaLabel = function generateAriaLabel(amount, currency, locale) {
-  var _a, _b;
-  var formatter = new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency: currency,
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  });
-  // Get parts to spell out the amount
-  var parts = formatter.formatToParts(Math.abs(amount));
-  var integerPart = ((_a = parts.find(function (p) {
-    return p.type === 'integer';
-  })) === null || _a === void 0 ? void 0 : _a.value) || '0';
-  var fractionPart = ((_b = parts.find(function (p) {
-    return p.type === 'fraction';
-  })) === null || _b === void 0 ? void 0 : _b.value) || '00';
-  var sign = amount < 0 ? 'negative ' : '';
-  return "".concat(sign).concat(integerPart, " dollars and ").concat(fractionPart, " cents");
-};
+// The minus sign, not a hyphen, so it reads and copies as minus (decision 0045)
+var MINUS = "\u2212";
 var MoneyDisplay = function MoneyDisplay(_a) {
   var amount = _a.amount,
     _b = _a.currency,
@@ -2061,51 +2102,33 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     maximumFractionDigits: 2
   });
   var formattedAmount = formatter.format(Math.abs(amount));
-  // Determine if we need to show a sign icon
-  var showPositiveIcon = showSign && amount > 0 || variant === 'positive';
-  var showNegativeIcon = amount < 0 || variant === 'negative';
-  // Generate accessibility label
-  var ariaLabel = generateAriaLabel(amount, currency, locale);
-  // Get typography variant and icon size
+  // A signed amount carries its sign as text, so the sign survives copying and is read aloud, and the
+  // role colour repeats it (decision 0045). Negative amounts always show their sign.
+  var isNegative = amount < 0 || variant === 'negative';
+  var isPositive = !isNegative && (showSign && amount > 0 || variant === 'positive');
+  var sign = isNegative ? MINUS : isPositive ? '+' : '';
   var typographyVariant = sizeToTypographyVariant[size];
-  var iconSize = sizeToIconSize[size];
-  // Determine icon color based on variant
-  var iconColor = variant === 'positive' || showPositiveIcon ? 'success' : variant === 'negative' || showNegativeIcon ? 'error' : variant === 'neutral' ? 'subdued' : 'default';
-  // Amount always uses default color (except neutral which stays subdued)
-  var amountColor = variant === 'neutral' ? 'subdued' : 'default';
-  return jsxRuntime.jsxs(StyledWrapper, {
+  var amountColor = isNegative ? 'error' : isPositive ? 'success' : variant === 'neutral' ? 'subdued' : 'default';
+  return jsxRuntime.jsx(StyledWrapper, {
     "$align": align,
     "$weight": weight,
-    "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    children: [showPositiveIcon && !showNegativeIcon &&
-    // The amount is shown without a sign, so the icon is the sign and needs a name (#85)
-    jsxRuntime.jsx(Icon, {
-      name: "addRing",
-      size: iconSize,
-      iconColor: iconColor,
-      "aria-label": "Plus"
-    }), showNegativeIcon && jsxRuntime.jsx(Icon, {
-      name: "remove",
-      size: iconSize,
-      iconColor: iconColor,
-      "aria-label": "Minus"
-    }), jsxRuntime.jsx(Typography, {
+    children: jsxRuntime.jsxs(Typography, {
       variant: typographyVariant,
       color: amountColor,
       as: "span",
-      children: formattedAmount
-    })]
+      children: [sign, formattedAmount]
+    })
   });
 };
-var templateObject_1$z;
+var templateObject_1$B;
 
 // Destructure tokens
-var semantic$e = tokens.semantic;
-var _a$6 = __assign(__assign({}, semantic$e), {
+var semantic$f = tokens.semantic;
+var _a$6 = __assign(__assign({}, semantic$f), {
     component: tokens.component
   }),
-  color$5 = _a$6.color,
+  color$6 = _a$6.color,
   motion$4 = _a$6.motion,
   radius$2 = _a$6.radius,
   component$2 = _a$6.component;
@@ -2116,9 +2139,9 @@ var ProgressBarContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
 })(templateObject_3$p || (templateObject_3$p = __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$2.xs, forcedColorsEdge, function (props) {
-  return props.$variant === 'horizontal' && styled.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
+  return props.$variant === 'horizontal' && styled.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
 }, function (props) {
-  return props.$variant === 'vertical' && styled.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
+  return props.$variant === 'vertical' && styled.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
 });
 var ProgressBarFill = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2130,15 +2153,15 @@ var ProgressBarFill = /*#__PURE__*/styled__default.default.div.withConfig({
   var backgroundColor;
   switch (props.$color) {
     case 'success':
-      backgroundColor = color$5.fill.success;
+      backgroundColor = color$6.fill.success;
       break;
     case 'error':
-      backgroundColor = color$5.fill.danger;
+      backgroundColor = color$6.fill.danger;
       break;
     case 'default':
     default:
       // Near-black, like Slider's fill (decision 0029)
-      backgroundColor = color$5.fill.emphasis;
+      backgroundColor = color$6.fill.emphasis;
       break;
   }
   return styled.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
@@ -2179,7 +2202,7 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$y, templateObject_2$q, templateObject_3$p, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
+var templateObject_1$A, templateObject_2$r, templateObject_3$p, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
 
 // Destructure tokens for cleaner access
 var separatorTokens = tokens.component.separator;
@@ -2191,7 +2214,7 @@ var StyledDivider = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$x || (templateObject_1$x = __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$z || (templateObject_1$z = __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.
  *
@@ -2304,7 +2327,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$x;
+var templateObject_1$z;
 
 var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2312,7 +2335,7 @@ var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$w || (templateObject_1$w = __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$y || (templateObject_1$y = __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
 ])));
@@ -2366,7 +2389,41 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
-var templateObject_1$w;
+var templateObject_1$y;
+
+// 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
+// bare shape can't be shown without its label. The shape indicator (#264) and the small
+// StatusLabel and InlineAlert sizes render them at 12px or more, with a darker edge.
+var statusShapes = {
+  error: 'M22.5 12L17.25 21.0933L6.75 21.0933L1.5 12L6.75 2.9067L17.25 2.9067Z',
+  serious: 'M12 2L22 12L12 22L2 12Z',
+  warning: 'M12 2.5L22 20.5L2 20.5Z',
+  success: 'M12 2A10 10 0 1 1 12 22A10 10 0 1 1 12 2Z',
+  info: 'M7 2H17A5 5 0 0 1 22 7V17A5 5 0 0 1 17 22H7A5 5 0 0 1 2 17V7A5 5 0 0 1 7 2Z',
+  inProgress: 'M12 2A10 10 0 1 1 12 22A10 10 0 1 1 12 2ZM12 4A8 8 0 1 0 12 20A8 8 0 1 0 12 4ZM12 6A6 6 0 0 1 12 18Z'
+};
+
+// The shape indicator: at least 12px (decision 0045), filled with the current text colour, which is
+// the label's role colour at 5.3:1 or more on its tint, so it needs no edge. Decorative: the text
+// beside it names the status. Internal to the status family (#264): not exported from the package.
+var Mark = /*#__PURE__*/styled__default.default.svg.withConfig({
+  displayName: "StatusShape__Mark",
+  componentId: "sc-1yzi9jt-0"
+})(templateObject_1$x || (templateObject_1$x = __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, {
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    "data-shape": shape,
+    children: jsxRuntime.jsx("path", {
+      d: statusShapes[shape]
+    })
+  });
+};
+var templateObject_1$x;
 
 // Destructure tokens for cleaner access
 var statusColors = tokens.component.status;
@@ -2379,52 +2436,55 @@ var _b$1 = tokens.semantic.motion,
   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$v || (templateObject_1$v = __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$w || (templateObject_1$w = __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.
   var configs = {
     pending: {
       color: statusColors.pending.text,
       bgColor: statusColors.pending.background,
-      icon: 'refresh',
-      // Fallback until 'clock' icon is added
+      icon: 'statusPending',
       label: 'Pending'
     },
     completed: {
       color: statusColors.completed.text,
       bgColor: statusColors.completed.background,
-      icon: 'check',
+      icon: 'statusSuccess',
+      shape: 'success',
       label: 'Completed'
     },
     failed: {
       color: statusColors.failed.text,
       bgColor: statusColors.failed.background,
-      icon: 'close',
+      icon: 'statusError',
+      shape: 'error',
       label: 'Failed'
     },
     cancelled: {
       color: statusColors.cancelled.text,
       bgColor: statusColors.cancelled.background,
-      icon: 'cancel',
+      icon: 'statusCancelled',
       label: 'Cancelled'
     },
     processing: {
       color: statusColors.processing.text,
       bgColor: statusColors.processing.background,
-      icon: 'refresh',
+      icon: 'statusInProgress',
+      shape: 'inProgress',
       label: 'Processing'
     },
     scheduled: {
       color: statusColors.scheduled.text,
       bgColor: statusColors.scheduled.background,
-      icon: 'bell',
-      // Fallback until 'calendar' icon is added
+      icon: 'statusScheduled',
       label: 'Scheduled'
     }
   };
   return configs[status];
 };
 // Size configuration
-var sizeConfig$1 = {
+var sizeConfig$2 = {
   small: {
     height: labelHeight.small,
     padding: "".concat(space$9[100], " ").concat(space$9[200]),
@@ -2446,9 +2506,9 @@ var StyledStatusLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "StatusLabelBase__StyledStatusLabel",
   componentId: "sc-1ye9xz5-0"
-})(templateObject_2$p || (templateObject_2$p = __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$1.full, scaleIn$1, duration$3.moderate, easing$3.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
+})(templateObject_2$q || (templateObject_2$q = __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$1.full, scaleIn$1, duration$3.moderate, easing$3.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
   var $size = _a.$size;
-  var size = sizeConfig$1[$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    ");
 }, function (_a) {
   var $status = _a.$status;
@@ -2470,13 +2530,13 @@ var VisibleContent = /*#__PURE__*/styled__default.default.span.withConfig({
 })(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */])));
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */
 var StatusLabelBase = function StatusLabelBase(_a) {
   var status = _a.status,
@@ -2490,7 +2550,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"];
   var statusConfig = getStatusConfig(status);
-  var sizeStyles = sizeConfig$1[size];
+  var sizeStyles = sizeConfig$2[size];
   var displayLabel = label || statusConfig.label;
   // A blank aria-label is no label at all, so it falls back like a missing one
   var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
@@ -2504,10 +2564,12 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     "data-testid": dataTestId,
     children: [jsxRuntime.jsxs(VisibleContent, {
       "aria-hidden": accessibleLabel ? 'true' : undefined,
-      children: [showIcon && jsxRuntime.jsx(Icon, {
+      children: [showIcon && size === 'medium' && jsxRuntime.jsx(Icon, {
         name: statusConfig.icon,
         size: sizeStyles.iconSize,
         iconColor: "inherit"
+      }), showIcon && size === 'small' && statusConfig.shape && jsxRuntime.jsx(StatusShape, {
+        shape: statusConfig.shape
       }), displayLabel, jsxRuntime.jsxs(ScreenReaderOnly, {
         children: [status, " status"]
       })]
@@ -2516,13 +2578,13 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     })]
   });
 };
-var templateObject_1$v, templateObject_2$p, templateObject_3$o, templateObject_4$j;
+var templateObject_1$w, templateObject_2$q, templateObject_3$o, templateObject_4$j;
 
 /**
  * StatusBadge displays a transaction or task status.
  *
  * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
- * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).
  */
 var StatusBadge = function StatusBadge(props) {
   return jsxRuntime.jsx(StatusLabelBase, __assign({}, props));
@@ -2532,8 +2594,11 @@ StatusBadge.displayName = 'StatusBadge';
 /**
  * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
  *
- * Uses only the status colour tokens and always shows an icon with its text, so status is never
- * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
+ * Uses only the status colour tokens and always shows its text, so status is never conveyed by
+ * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for
+ * completed, failed and processing, and text only for the neutral pending, scheduled and
+ * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen
+ * readers.
  *
  * @example
  * ```tsx
@@ -2550,19 +2615,19 @@ var StatusLabel = function StatusLabel(props) {
 };
 StatusLabel.displayName = 'StatusLabel';
 
-var semantic$d = tokens.semantic;
-var color$4 = semantic$d.color,
-  size$1 = semantic$d.size;
+var semantic$e = tokens.semantic;
+var color$5 = semantic$e.color,
+  size$2 = semantic$e.size;
 var label = tokens.component.badge.label;
-var space$8 = semantic$d.space;
-var radius = semantic$d.radius;
+var space$8 = semantic$e.space;
+var radius = semantic$e.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$u || (templateObject_1$u = __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$v || (templateObject_1$v = __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
  *
@@ -2570,7 +2635,7 @@ var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
  * Tags help users quickly identify and understand content classification.
  */])), radius.sm, function (_a) {
   var $size = _a.$size;
-  return size$1.label[$size];
+  return size$2.label[$size];
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? "0 ".concat(space$8[200]) : "".concat(space$8[100], " ").concat(space$8[200]);
@@ -2578,33 +2643,33 @@ var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$4.fill['accent-muted'];
+      return color$5.fill['accent-muted'];
     case 'success':
-      return color$4.fill['success-muted'];
+      return color$5.fill['success-muted'];
     case 'warning':
-      return color$4.fill['warning-muted'];
+      return color$5.fill['warning-muted'];
     case 'error':
-      return color$4.fill['danger-muted'];
+      return color$5.fill['danger-muted'];
     case 'emphasis':
-      return color$4.fill.emphasis;
+      return color$5.fill.emphasis;
     default:
-      return color$4.fill.muted;
+      return color$5.fill.muted;
   }
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$4.text.accent;
+      return color$5.text.accent;
     case 'success':
-      return color$4.text.success;
+      return color$5.text.success;
     case 'warning':
-      return color$4.text.warning;
+      return color$5.text.warning;
     case 'error':
-      return color$4.text.danger;
+      return color$5.text.danger;
     case 'emphasis':
-      return color$4.text.inverse;
+      return color$5.text.inverse;
     default:
-      return color$4.text["default"];
+      return color$5.text["default"];
   }
 }, function (_a) {
   var $variant = _a.$variant,
@@ -2612,17 +2677,17 @@ var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'interactive':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.accent);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.accent);
     case 'success':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.success);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.success);
     case 'warning':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.warning);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.warning);
     case 'error':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.danger);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.danger);
     case 'emphasis':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.fill.emphasis);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.fill.emphasis);
     default:
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border["default"]);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border["default"]);
   }
 });
 /**
@@ -2654,7 +2719,91 @@ var Tag = function Tag(_a) {
     children: children
   }));
 };
-var templateObject_1$u;
+var templateObject_1$v;
+
+var semantic$d = tokens.semantic;
+var color$4 = semantic$d.color,
+  typography$1 = semantic$d.typography,
+  size$1 = semantic$d.size;
+var labels = {
+  suggested: 'Suggested',
+  removal: 'Will be removed'
+};
+var sizeConfig$1 = {
+  small: {
+    font: typography$1.caption,
+    gap: semantic$d.space[100],
+    icon: 'xs'
+  },
+  medium: {
+    font: typography$1.small,
+    gap: semantic$d.space[200],
+    icon: 'sm'
+  }
+};
+var StyledAILabel = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AILabel__StyledAILabel",
+  componentId: "sc-qknkn-0"
+})(templateObject_1$u || (templateObject_1$u = __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$1.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig$1[$size].gap;
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig$1[$size].font;
+}, color$4.text.ai);
+var StyledIcon = /*#__PURE__*/styled__default.default.span.withConfig({
+  displayName: "AILabel__StyledIcon",
+  componentId: "sc-qknkn-1"
+})(templateObject_2$p || (templateObject_2$p = __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
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */])), color$4.icon.ai);
+/**
+ * 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
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+var AILabel = function AILabel(_a) {
+  var _b = _a.kind,
+    kind = _b === void 0 ? 'suggested' : _b,
+    _c = _a.size,
+    labelSize = _c === void 0 ? 'medium' : _c,
+    dataTestId = _a["data-testid"];
+  return jsxRuntime.jsxs(StyledAILabel, {
+    "$size": labelSize,
+    "data-testid": dataTestId,
+    children: [jsxRuntime.jsx(StyledIcon, {
+      "aria-hidden": "true",
+      children: jsxRuntime.jsx(Icon, {
+        name: "ai",
+        size: sizeConfig$1[labelSize].icon,
+        iconColor: "inherit"
+      })
+    }), labels[kind]]
+  });
+};
+AILabel.displayName = 'AILabel';
+var templateObject_1$u, templateObject_2$p;
 
 // Destructure tokens for cleaner access
 var semantic$c = tokens.semantic;
@@ -2666,7 +2815,10 @@ var StyledBalanceSection = /*#__PURE__*/styled__default.default.div.withConfig({
 var StyledTrendSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
   componentId: "sc-1erp7zn-1"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), space$7[100]);
+})(templateObject_2$o || (templateObject_2$o = __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$7[100], function (_a) {
+  var $color = _a.$color;
+  return $color;
+}, semantic$c.typography.small);
 /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledActions",
   componentId: "sc-1erp7zn-2"
@@ -2687,10 +2839,12 @@ var trendToIcon = {
   down: 'arrowDown',
   neutral: 'arrowRight'
 };
+// 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: 'green',
-  down: 'red',
-  neutral: 'blue'
+  up: semantic$c.color.text.success,
+  down: semantic$c.color.text.danger,
+  neutral: semantic$c.color.text.muted
 };
 /**
  * AccountCard component
@@ -2785,16 +2939,19 @@ var AccountCard = function AccountCard(_a) {
                 }), jsxRuntime.jsx(Typography, {
                   color: "subdued",
                   children: "Available"
-                }), trend && trendValue && jsxRuntime.jsx(StyledTrendSection, {
+                }), trend && trendValue &&
+                // A group rather than an image, so screen readers read the value as well as the direction
+                jsxRuntime.jsxs(StyledTrendSection, {
+                  role: "group",
                   "aria-label": "Trend ".concat(trend),
-                  role: "img",
-                  children: jsxRuntime.jsx(CategoryLabel, {
-                    size: "medium",
-                    icon: trendIcon,
-                    color: trendColor,
-                    variant: "minimal",
+                  "$color": trendColor,
+                  children: [jsxRuntime.jsx(Icon, {
+                    name: trendIcon,
+                    size: "sm",
+                    iconColor: "inherit"
+                  }), jsxRuntime.jsx("span", {
                     children: trendValue
-                  })
+                  })]
                 })]
               })
             })]
@@ -3370,6 +3527,10 @@ function detectSpeechRecognitionConstructor(targetWindow) {
 function normalizeTranscript(input) {
   return input.replace(/\s+/g, ' ').trim();
 }
+/** Typed text: like a transcript, but line breaks are kept (spaces around them are dropped). */
+function normalizeMessage(input) {
+  return input.replace(/[^\S\n]+/g, ' ').replace(/ ?\n ?/g, '\n').trim();
+}
 function mapSpeechErrorCode(error) {
   switch (error) {
     case 'not-allowed':
@@ -3456,94 +3617,165 @@ function agentInputStateTransition(currentState, event) {
 
 var semantic$a = tokens.semantic,
   component$1 = tokens.component;
-var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
 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$q || (templateObject_1$q = __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_2$l || (templateObject_2$l = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), semantic$a.space[200]);
+})(templateObject_3$k || (templateObject_3$k = __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$a.space[200], function (_a) {
+  var $docked = _a.$docked;
+  return $docked && styled.css(templateObject_2$l || (templateObject_2$l = __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$a.layer.sticky, semantic$a.surface.base, semantic$a.space[300]);
+});
 var ControlsRow = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__ControlsRow",
   componentId: "sc-fhl996-1"
-})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var InputShell = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__InputShell",
   componentId: "sc-fhl996-2"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\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  align-items: center;\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"])), semantic$a.space[200], semantic$a.space[100], semantic$a.space[200], semantic$a.space[100], semantic$a.space.inset.lg, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.radius['3xl'], semantic$a.elevation.raised, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, component$1.input.focus.borderColor, component$1.input.focus.outline, semantic$a.border.focusOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
-var Input = /*#__PURE__*/styled__default.default.input.withConfig({
+})(templateObject_5$c || (templateObject_5$c = __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$a.space[200], semantic$a.space[100], semantic$a.space[200], semantic$a.space[100], semantic$a.space.inset.lg, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.radius['3xl'], semantic$a.elevation.raised, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, component$1.input.focus.borderColor, component$1.input.focus.outline, semantic$a.border.focusOffset, component$1.input.disabled.backgroundColor, component$1.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_5$c || (templateObject_5$c = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\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  flex: 1;\n  min-width: 0;\n  min-height: ", ";\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$a.size.control.lg, semantic$a.typography.body, semantic$a.color.text["default"], component$1.input.placeholder.textColor, semantic$a.color.text.disabled);
+})(templateObject_6$9 || (templateObject_6$9 = __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$a.size.control.lg, semantic$a.size.control.lg, semantic$a.size.control.lg, semantic$a.size.control.lg, semantic$a.typography.body, semantic$a.color.text["default"], component$1.input.placeholder.textColor, semantic$a.color.text.disabled);
 var InputActions = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__InputActions",
   componentId: "sc-fhl996-4"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$a.space[200]);
+})(templateObject_7$7 || (templateObject_7$7 = __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$a.space[200], semantic$a.size.control.lg, semantic$a.size.control.md);
 var CircularActionIconButton = /*#__PURE__*/styled__default.default(IconButton).withConfig({
   displayName: "AgentInput__CircularActionIconButton",
   componentId: "sc-fhl996-5"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$a.radius.full);
+})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$a.radius.full);
 var InputWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__InputWrapper",
   componentId: "sc-fhl996-6"
-})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
+})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
 var MicButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicButtonWrapper",
   componentId: "sc-fhl996-7"
-})(templateObject_9$5 || (templateObject_9$5 = __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$3 || (templateObject_10$3 = __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$a.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_10$3 || (templateObject_10$3 = __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)))"])));
+var ringMask = styled.css(templateObject_11$3 || (templateObject_11$3 = __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)))"])));
 var MicListeningRing = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicListeningRing",
   componentId: "sc-fhl996-8"
-})(templateObject_12$3 || (templateObject_12$3 = __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"])), semantic$a.border.width.thick, semantic$a.space[100], semantic$a.border.focusOffset, semantic$a.radius.full, semantic$a.color.fill['accent-muted'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-hover'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-muted'], ringMask, ringMask, function (_a) {
+})(templateObject_13$3 || (templateObject_13$3 = __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$a.border.width.thick, semantic$a.space[100], semantic$a.border.focusOffset, semantic$a.radius.full, semantic$a.color.fill['accent-muted'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-hover'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-muted'], ringMask, ringMask, function (_a) {
   var $reducedMotion = _a.$reducedMotion;
-  return !$reducedMotion && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+  return !$reducedMotion && styled.css(templateObject_12$3 || (templateObject_12$3 = __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$1 || (templateObject_14$1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"])), semantic$a.motion.distance.sm);
+var regionFadeIn = styled.keyframes(templateObject_15$1 || (templateObject_15$1 = __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.
+])));
+// 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.
+var regionFadeThenCollapse = styled.keyframes(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  0%, 50% {\n    grid-template-rows: 1fr;\n  }\n  0% {\n    opacity: 1;\n  }\n  50%, 100% {\n    opacity: 0;\n  }\n  100% {\n    grid-template-rows: 0fr;\n  }\n"], ["\n  0%, 50% {\n    grid-template-rows: 1fr;\n  }\n  0% {\n    opacity: 1;\n  }\n  50%, 100% {\n    opacity: 0;\n  }\n  100% {\n    grid-template-rows: 0fr;\n  }\n"])));
+var regionFadeOut = styled.keyframes(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  to {\n    opacity: 0;\n  }\n"], ["\n  to {\n    opacity: 0;\n  }\n"
+// One part of the region above the field: the review bar or the suggestions
+])));
+// One part of the region above the field: the review bar or the suggestions
+var RegionItem = /*#__PURE__*/styled__default.default.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__RegionItem",
+  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$a.motion.duration.moderate, semantic$a.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$a.motion.duration.fast, semantic$a.motion.easing.accelerate) : styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["", " calc(2 * ", ") ", " forwards"], ["", " calc(2 * ", ") ", " forwards"])), regionFadeThenCollapse, semantic$a.motion.duration.fast, semantic$a.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({
+  displayName: "AgentInput__RegionItemContent",
+  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$a.space[200], semantic$a.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$a.space[300], semantic$a.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$a.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$a.space[200]);
 var StatusRow = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__StatusRow",
-  componentId: "sc-fhl996-9"
-})(templateObject_13$3 || (templateObject_13$3 = __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$a.space[300], semantic$a.space[600]);
+  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$a.space[300], semantic$a.space[600]);
 var StatusText = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__StatusText",
-  componentId: "sc-fhl996-10"
-})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$a.space[500]);
+  componentId: "sc-fhl996-15"
+})(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$a.space[500]);
 var StatusAnnouncement = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__StatusAnnouncement",
-  componentId: "sc-fhl996-11"
-})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject([""], [""])));
+  componentId: "sc-fhl996-16"
+})(templateObject_28$1 || (templateObject_28$1 = __makeTemplateObject([""], [""])));
+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$a.space[300]);
+var VisuallyHidden = /*#__PURE__*/styled__default.default.span.withConfig({
+  displayName: "AgentInput__VisuallyHidden",
+  componentId: "sc-fhl996-18"
+})(templateObject_30$1 || (templateObject_30$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 var MeterContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__MeterContainer",
-  componentId: "sc-fhl996-12"
-})(templateObject_16$1 || (templateObject_16$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$a.space[100], semantic$a.space[400]);
+  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$a.space[100], semantic$a.space[400]);
 var MeterBar = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MeterBar",
-  componentId: "sc-fhl996-13"
-})(templateObject_17$1 || (templateObject_17$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$a.space[100], semantic$a.radius.xs, semantic$a.color.fill.accent, function (_a) {
+  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$a.space[100], semantic$a.radius.xs, semantic$a.color.fill.accent, function (_a) {
   var $height = _a.$height;
   return "".concat($height * 100, "%");
 }, semantic$a.motion.duration.fast, semantic$a.motion.easing.decelerate);
 var VisuallyHiddenLabel = /*#__PURE__*/styled__default.default.label.withConfig({
   displayName: "AgentInput__VisuallyHiddenLabel",
-  componentId: "sc-fhl996-14"
-})(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+  componentId: "sc-fhl996-21"
+})(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 function getInitialState(hasText) {
   return hasText ? 'typing' : 'idle';
 }
@@ -3551,60 +3783,104 @@ function createMeterBars(level) {
   var clampedLevel = Math.max(0, Math.min(level, 1));
   return [0.25 + clampedLevel * 0.75, 0.2 + clampedLevel * 0.6, 0.3 + clampedLevel * 0.7, 0.2 + clampedLevel * 0.5];
 }
-var AgentInput = function AgentInput(_a) {
+// Declared separately so the react-hooks lint rules analyse it (they skip functions inline in forwardRef)
+// Development builds warn about props that break the pattern. Bundlers replace process.env.NODE_ENV
+// with a literal; without a bundler, a browser has no process, so reading it throws.
+function readIsProduction() {
+  try {
+    return process.env.NODE_ENV === 'production';
+  } catch (_a) {
+    return false;
+  }
+}
+var isProduction = readIsProduction();
+// A part of the region above the field. It stays mounted while it fades out and its space closes.
+function RegionPart(_a) {
+  var show = _a.show,
+    reducedExit = _a.reducedExit,
+    children = _a.children;
+  var _b = usePresence(show, reducedExit ? EXIT_DURATION_MS : EXIT_DURATION_MS * 2),
+    isPresent = _b.isPresent,
+    isExiting = _b.isExiting;
+  var ref = React.useRef(null);
+  // Leaving controls drop out of the tab order and can't be activated
+  useInert(ref, isExiting);
+  if (!isPresent) return null;
+  return jsxRuntime.jsx(RegionItem, {
+    ref: ref,
+    "$exiting": isExiting,
+    "$reducedExit": reducedExit,
+    "aria-hidden": isExiting || undefined,
+    children: jsxRuntime.jsx(RegionItemContent, {
+      children: children
+    })
+  });
+}
+function AgentInputWithRef(_a, ref) {
+  var _this = this;
+  var _b;
   var value = _a.value,
-    _b = _a.defaultValue,
-    defaultValue = _b === void 0 ? '' : _b,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? '' : _c,
     onChange = _a.onChange,
     onSubmit = _a.onSubmit,
-    _c = _a.placeholder,
-    placeholder = _c === void 0 ? 'Ask a question' : _c,
-    _d = _a.disabled,
-    disabled = _d === void 0 ? false : _d,
+    onStop = _a.onStop,
+    review = _a.review,
+    suggestions = _a.suggestions,
+    onSuggestionSelect = _a.onSuggestionSelect,
+    _d = _a.placeholder,
+    placeholder = _d === void 0 ? 'Ask a question' : _d,
+    maxLength = _a.maxLength,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
     isSubmitting = _a.isSubmitting,
-    _e = _a.enableVoice,
-    enableVoice = _e === void 0 ? true : _e,
-    _f = _a.autoSubmitOnVoiceFinal,
-    autoSubmitOnVoiceFinal = _f === void 0 ? true : _f,
-    _g = _a.voiceLanguage,
-    voiceLanguage = _g === void 0 ? 'en-AU' : _g,
-    _h = _a.noSpeechTimeoutMs,
-    noSpeechTimeoutMs = _h === void 0 ? 8000 : _h,
+    _f = _a.enableVoice,
+    enableVoice = _f === void 0 ? true : _f,
+    _g = _a.autoSubmitOnVoiceFinal,
+    autoSubmitOnVoiceFinal = _g === void 0 ? true : _g,
+    _h = _a.voiceLanguage,
+    voiceLanguage = _h === void 0 ? 'en-AU' : _h,
+    _j = _a.noSpeechTimeoutMs,
+    noSpeechTimeoutMs = _j === void 0 ? 8000 : _j,
     onVoiceStart = _a.onVoiceStart,
     onVoiceStop = _a.onVoiceStop,
     onVoiceInterim = _a.onVoiceInterim,
     onVoiceFinal = _a.onVoiceFinal,
     onVoiceError = _a.onVoiceError,
+    _k = _a.helperText,
+    helperText = _k === void 0 ? '' : _k,
     statusMessage = _a.statusMessage,
     errorMessage = _a.errorMessage,
-    _j = _a.label,
-    label = _j === void 0 ? 'Agent input' : _j,
+    _l = _a.label,
+    label = _l === void 0 ? 'Agent input' : _l,
+    _m = _a.docked,
+    docked = _m === void 0 ? false : _m,
     dataTestId = _a["data-testid"];
   var isControlled = value !== undefined;
-  var _k = React.useState(defaultValue),
-    internalValue = _k[0],
-    setInternalValue = _k[1];
-  var _l = React.useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
-    machineState = _l[0],
-    setMachineState = _l[1];
-  var _m = React.useState(''),
-    interimTranscript = _m[0],
-    setInterimTranscript = _m[1];
-  var _o = React.useState(false),
-    internalSubmitting = _o[0],
-    setInternalSubmitting = _o[1];
-  var _p = React.useState(undefined),
-    internalErrorMessage = _p[0],
-    setInternalErrorMessage = _p[1];
-  var _q = React.useState(false),
-    voiceSupported = _q[0],
-    setVoiceSupported = _q[1];
+  var _o = React.useState(defaultValue),
+    internalValue = _o[0],
+    setInternalValue = _o[1];
+  var _p = React.useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
+    machineState = _p[0],
+    setMachineState = _p[1];
+  var _q = React.useState(''),
+    interimTranscript = _q[0],
+    setInterimTranscript = _q[1];
   var _r = React.useState(false),
-    prefersReducedMotion = _r[0],
-    setPrefersReducedMotion = _r[1];
-  var _s = React.useState(0),
-    meterLevel = _s[0],
-    setMeterLevel = _s[1];
+    internalSubmitting = _r[0],
+    setInternalSubmitting = _r[1];
+  var _s = React.useState(undefined),
+    internalErrorMessage = _s[0],
+    setInternalErrorMessage = _s[1];
+  var _t = React.useState(false),
+    voiceSupported = _t[0],
+    setVoiceSupported = _t[1];
+  var _u = React.useState(false),
+    prefersReducedMotion = _u[0],
+    setPrefersReducedMotion = _u[1];
+  var _v = React.useState(0),
+    meterLevel = _v[0],
+    setMeterLevel = _v[1];
   var recognitionRef = React.useRef(null);
   var noSpeechTimeoutRef = React.useRef(null);
   var isStoppingRef = React.useRef(false);
@@ -3612,10 +3888,19 @@ var AgentInput = function AgentInput(_a) {
   var audioStreamRef = React.useRef(null);
   var audioContextRef = React.useRef(null);
   var meterRafRef = React.useRef(null);
+  var inputRef = React.useRef(null);
   var inputId = React.useId();
   var statusId = "".concat(inputId, "-status");
+  var counterId = "".concat(inputId, "-counter");
   var currentValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
+  // Read after onSubmit settles, when the closure's value may be stale
+  var currentValueRef = React.useRef(currentValue);
+  React.useEffect(function () {
+    currentValueRef.current = currentValue;
+  }, [currentValue]);
   var hasText = normalizeTranscript(currentValue).length > 0;
+  var messageLength = normalizeMessage(currentValue).length;
+  var isOverLimit = maxLength !== undefined && messageLength > maxLength;
   var effectiveSubmitting = isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : internalSubmitting;
   var effectiveState = disabled ? 'disabled' : machineState;
   var isListening = effectiveState === 'listening';
@@ -3638,7 +3923,7 @@ var AgentInput = function AgentInput(_a) {
     }
   }, []);
   var stopMeter = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -3666,7 +3951,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, []);
   var startMeter = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       var stream, audioContext, analyser_1, source, data_1, _loop_;
       var _b;
       return __generator(this, function (_c) {
@@ -3727,15 +4012,22 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [onVoiceError, updateMachineState]);
   var submitPayload = React.useCallback(function (rawText, source) {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       var text;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            text = normalizeTranscript(rawText);
+            text = source === 'text' ? normalizeMessage(rawText) : normalizeTranscript(rawText);
             if (!text || disabled || effectiveSubmitting) {
               return [2 /*return*/];
             }
+            if (maxLength !== undefined && text.length > maxLength) {
+              // A long transcript goes into the field to be shortened, unless the user has typed since
+              if (source === 'voice-final' && !normalizeMessage(currentValueRef.current)) {
+                updateValue(text);
+              }
+              return [2 /*return*/];
+            }
             updateMachineState({
               type: 'SUBMIT'
             });
@@ -3757,14 +4049,18 @@ var AgentInput = function AgentInput(_a) {
               type: 'SUBMIT_SUCCESS'
             });
             setInterimTranscript('');
-            updateValue('');
+            // Keep a follow-up typed while submitting
+            if (normalizeMessage(currentValueRef.current) === text) {
+              updateValue('');
+            }
             return [3 /*break*/, 5];
           case 3:
             _b.sent();
             updateMachineState({
               type: 'SUBMIT_ERROR'
             });
-            if (source === 'voice-final') {
+            // Restore the transcript unless the user has typed something since
+            if (source === 'voice-final' && !normalizeMessage(currentValueRef.current)) {
               updateValue(text);
             }
             setInternalErrorMessage('Submission failed. Please try again.');
@@ -3779,13 +4075,13 @@ var AgentInput = function AgentInput(_a) {
         }
       });
     });
-  }, [disabled, effectiveSubmitting, isSubmitting, onSubmit, updateMachineState, updateValue]);
+  }, [disabled, effectiveSubmitting, isSubmitting, maxLength, onSubmit, updateMachineState, updateValue]);
   var stopListening = React.useCallback(function (emitStopEvent_1) {
     var args_1 = [];
     for (var _i = 1; _i < arguments.length; _i++) {
       args_1[_i - 1] = arguments[_i];
     }
-    return __awaiter(void 0, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
+    return __awaiter(_this, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
       if (preserveState === void 0) {
         preserveState = false;
       }
@@ -3821,7 +4117,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [clearNoSpeechTimeout, hasText, onVoiceStop, stopMeter, updateMachineState]);
   var onNoSpeechTimeout = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       var message;
       return __generator(this, function (_a) {
         switch (_a.label) {
@@ -3845,7 +4141,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [clearNoSpeechTimeout, onVoiceError, stopListening, updateMachineState]);
   var beginListening = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
@@ -3889,7 +4185,7 @@ var AgentInput = function AgentInput(_a) {
     recognition.interimResults = true;
     recognition.continuous = false;
     recognition.onresult = function (event) {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         var interim, finalText, index, result, normalizedInterim, normalizedFinal;
         return __generator(this, function (_a) {
           switch (_a.label) {
@@ -3947,7 +4243,7 @@ var AgentInput = function AgentInput(_a) {
       });
     };
     recognition.onerror = function (event) {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         var mappedCode;
         return __generator(this, function (_a) {
           switch (_a.label) {
@@ -3963,7 +4259,7 @@ var AgentInput = function AgentInput(_a) {
       });
     };
     recognition.onend = function () {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
@@ -3992,6 +4288,95 @@ var AgentInput = function AgentInput(_a) {
       stopMeter();
     };
   }, [autoSubmitOnVoiceFinal, clearNoSpeechTimeout, emitVoiceError, enableVoice, hasText, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceFinal, onVoiceInterim, stopListening, stopMeter, submitPayload, updateMachineState, updateValue, voiceLanguage]);
+  var focusField = React.useCallback(function (cursor) {
+    var input = inputRef.current;
+    if (!input) return;
+    input.focus();
+    if (!cursor) return;
+    var placeCursor = function placeCursor() {
+      if (cursor === 'all') {
+        input.select();
+        return;
+      }
+      var position = cursor === 'start' ? 0 : input.value.length;
+      input.setSelectionRange(position, position);
+    };
+    placeCursor();
+    // Again after the render a prefill in the same handler triggers, so 'end' lands after the new text
+    window.setTimeout(placeCursor, 0);
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus(options) {
+        return focusField(options === null || options === void 0 ? void 0 : options.cursor);
+      },
+      clear: function clear() {
+        setInterimTranscript('');
+        updateValue('');
+      }
+    };
+  }, [focusField, updateValue]);
+  // The region above the field (decision 0046). The last review and suggestions shown are kept, so
+  // they can fade out after the product removes them.
+  var _w = React.useState(review),
+    shownReview = _w[0],
+    setShownReview = _w[1];
+  var _x = React.useState(null),
+    lastReviewAction = _x[0],
+    setLastReviewAction = _x[1];
+  if (review && review !== shownReview) {
+    setShownReview(review);
+    // A new proposal or change replaces what the last Discard or Undo announced
+    if (lastReviewAction) setLastReviewAction(null);
+  }
+  // A proposal replacing an open one is announced as an update (decision 0047). Consecutive
+  // replacements alternate a trailing no-break space, so the live region's text changes each time
+  // even when the summary doesn't; screen readers don't speak it.
+  var openProposalId = (review === null || review === void 0 ? void 0 : review.state) === 'proposal' ? review.id : null;
+  var _y = React.useState(openProposalId),
+    announcedProposalId = _y[0],
+    setAnnouncedProposalId = _y[1];
+  var _z = React.useState(0),
+    replacementCount = _z[0],
+    setReplacementCount = _z[1];
+  if (openProposalId !== announcedProposalId) {
+    setAnnouncedProposalId(openProposalId);
+    setReplacementCount(openProposalId !== null && announcedProposalId !== null ? replacementCount + 1 : 0);
+  }
+  var cappedSuggestions = React.useMemo(function () {
+    return (suggestions !== null && suggestions !== void 0 ? suggestions : []).slice(0, MAX_SUGGESTIONS);
+  }, [suggestions]);
+  var showSuggestions = cappedSuggestions.length > 0 && !hasText && (review === null || review === void 0 ? void 0 : review.state) !== 'proposal';
+  var _0 = React.useState(cappedSuggestions),
+    shownSuggestions = _0[0],
+    setShownSuggestions = _0[1];
+  if (showSuggestions && cappedSuggestions !== shownSuggestions) {
+    setShownSuggestions(cappedSuggestions);
+  }
+  var suggestionCount = (_b = suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) !== null && _b !== void 0 ? _b : 0;
+  React.useEffect(function () {
+    if (!isProduction && suggestionCount > MAX_SUGGESTIONS) {
+      console.warn("AgentInput shows at most ".concat(MAX_SUGGESTIONS, " suggestions (decision 0046); ").concat(suggestionCount, " were passed, so the rest are hidden."));
+    }
+  }, [suggestionCount]);
+  var reviewAnnouncement = review ? review.state === 'proposal' ? "".concat(replacementCount > 0 ? 'Proposal updated. ' : '').concat(review.summary, ". Accept or discard.").concat(replacementCount > 0 && replacementCount % 2 === 0 ? "\xA0" : '') : 'Changes applied. Undo available.' : lastReviewAction === 'discarded' ? 'Suggestion discarded.' : lastReviewAction === 'undone' ? 'Changes undone.' : '';
+  var onReviewDiscard = function onReviewDiscard(onDiscard) {
+    setLastReviewAction('discarded');
+    onDiscard();
+    // The bar is leaving, so focus goes to the field rather than being lost
+    focusField();
+  };
+  var onReviewUndo = function onReviewUndo(onUndo) {
+    setLastReviewAction('undone');
+    onUndo();
+    focusField();
+  };
+  var onPickSuggestion = function onPickSuggestion(text) {
+    updateValue(text);
+    onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(text);
+    // Fills, never sends: the user reviews the text in the field first
+    focusField('end');
+  };
   React.useEffect(function () {
     var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
     var sync = function sync() {
@@ -4023,8 +4408,40 @@ var AgentInput = function AgentInput(_a) {
     if (!interimTranscript) {
       return currentValue;
     }
-    return normalizeTranscript([currentValue, interimTranscript].filter(Boolean).join(' '));
+    return normalizeMessage([currentValue, interimTranscript].filter(Boolean).join(' '));
   }, [currentValue, interimTranscript]);
+  var lastFieldWidthRef = React.useRef(0);
+  var resizeField = React.useCallback(function () {
+    var field = inputRef.current;
+    // Hidden (for example in a closed sheet): measure when it's shown, via the observer below
+    if (!field || field.clientWidth === 0) return;
+    lastFieldWidthRef.current = field.clientWidth;
+    // Collapsing the field to measure it shrinks the page for a moment; some engines clamp a page
+    // scrolled to the bottom when that happens, so restore its scroll position
+    var scrollX = window.scrollX,
+      scrollY = window.scrollY;
+    field.style.height = 'auto';
+    field.style.height = "".concat(field.scrollHeight, "px");
+    if (window.scrollY !== scrollY) window.scrollTo(scrollX, scrollY);
+    // Scroll only once max-height (six rows) clips the content
+    field.style.overflowY = field.scrollHeight > field.clientHeight ? 'auto' : 'hidden';
+  }, []);
+  useIsomorphicLayoutEffect(function () {
+    resizeField();
+  }, [displayedValue, resizeField]);
+  // Text rewraps when the field's width changes (layout, or being shown), not only the window's
+  React.useEffect(function () {
+    var field = inputRef.current;
+    if (!field || typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(function () {
+      // Its own height changes trigger this too; only a width change can rewrap the text
+      if (field.clientWidth !== lastFieldWidthRef.current) resizeField();
+    });
+    observer.observe(field);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [resizeField]);
   var onTextChange = function onTextChange(event) {
     updateValue(event.target.value);
     if (effectiveState === 'error') {
@@ -4036,10 +4453,18 @@ var AgentInput = function AgentInput(_a) {
     }
   };
   var onInputKeyDown = function onInputKeyDown(event) {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
+      var isComposing;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
+            isComposing = event.nativeEvent.isComposing || event.keyCode === 229;
+            // Escape during an IME composition cancels the composition, not the request
+            if (event.key === 'Escape' && onStop && effectiveSubmitting && !isComposing) {
+              event.preventDefault();
+              onStop();
+              return [2 /*return*/];
+            }
             if (!(event.key === 'Escape' && isListening)) return [3 /*break*/, 2];
             event.preventDefault();
             return [4 /*yield*/, stopListening(true)];
@@ -4047,7 +4472,7 @@ var AgentInput = function AgentInput(_a) {
             _a.sent();
             return [2 /*return*/];
           case 2:
-            if (!(event.key === 'Enter')) return [3 /*break*/, 4];
+            if (!(event.key === 'Enter' && !event.shiftKey && !isComposing)) return [3 /*break*/, 4];
             event.preventDefault();
             return [4 /*yield*/, submitPayload(currentValue, 'text')];
           case 3:
@@ -4060,7 +4485,7 @@ var AgentInput = function AgentInput(_a) {
     });
   };
   var onMicToggle = function onMicToggle() {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -4080,40 +4505,105 @@ var AgentInput = function AgentInput(_a) {
     });
   };
   var statusByState = {
-    idle: statusMessage || DEFAULT_IDLE_HELPER,
-    typing: statusMessage || DEFAULT_IDLE_HELPER,
+    idle: statusMessage || helperText,
+    typing: statusMessage || helperText,
     listening: statusMessage || DEFAULT_LISTENING_MESSAGE,
     processingFinalTranscript: statusMessage || DEFAULT_PROCESSING_MESSAGE,
     submitting: statusMessage || 'Submitting…',
     error: errorMessage || internalErrorMessage || 'Voice input failed. Try again.',
-    disabled: statusMessage || DEFAULT_IDLE_HELPER
+    disabled: statusMessage || helperText
   };
-  var unsupportedMessage = defaultVoiceErrorMessage('not-supported');
-  var shouldShowUnsupported = enableVoice && !hasVoice;
-  var resolvedStatus = shouldShowUnsupported ? unsupportedMessage : statusByState[effectiveState];
-  var isStatusError = effectiveState === 'error' || shouldShowUnsupported;
+  var overLimitMessage = isOverLimit && maxLength !== undefined ? "Over the ".concat(maxLength, "-character limit. Shorten your message to send.") : undefined;
+  // A product-set error shows in any state. Unsupported voice hides the mic without a message.
+  var resolvedStatus = errorMessage || overLimitMessage || statusByState[effectiveState];
+  var isStatusError = Boolean(errorMessage) || isOverLimit || effectiveState === 'error';
   var meterBars = createMeterBars(meterLevel);
-  var sendDisabled = disabled || effectiveSubmitting || normalizeTranscript(currentValue).length === 0;
+  var showStop = Boolean(onStop) && effectiveSubmitting;
+  var sendDisabled = disabled || effectiveSubmitting || isOverLimit || messageLength === 0;
+  var showCounter = maxLength !== undefined && messageLength >= maxLength * COUNTER_THRESHOLD;
+  // Announced once when the limit is reached; going over is announced by the status line
+  var limitAnnouncement = maxLength !== undefined && messageLength === maxLength ? "Character limit reached: ".concat(maxLength, " characters") : '';
   return jsxRuntime.jsxs(Container, {
     "data-testid": dataTestId,
+    "$docked": docked,
+    "data-docked": docked || undefined,
     children: [jsxRuntime.jsx(VisuallyHiddenLabel, {
       htmlFor: inputId,
       children: label
-    }), jsxRuntime.jsx(ControlsRow, {
-      children: jsxRuntime.jsx(InputWrapper, {
+    }), jsxRuntime.jsxs(ControlsRow, {
+      children: [jsxRuntime.jsx(RegionPart, {
+        show: Boolean(review),
+        reducedExit: prefersReducedMotion,
+        children: shownReview && jsxRuntime.jsxs(ReviewBar, {
+          "data-testid": "agent-input-review",
+          children: [jsxRuntime.jsx(Typography, {
+            variant: "small",
+            color: "default",
+            children: shownReview.state === 'proposal' ? shownReview.summary : 'Changes applied'
+          }), jsxRuntime.jsx(ReviewActions, {
+            children: shownReview.state === 'proposal' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx(Button, {
+                variant: "primary",
+                size: "small",
+                onClick: shownReview.onAccept,
+                children: "Accept"
+              }), jsxRuntime.jsx(Button, {
+                variant: "secondary",
+                size: "small",
+                onClick: function onClick() {
+                  return onReviewDiscard(shownReview.onDiscard);
+                },
+                children: "Discard"
+              })]
+            }) : jsxRuntime.jsx(Button, {
+              variant: "naked",
+              size: "small",
+              onClick: function onClick() {
+                return onReviewUndo(shownReview.onUndo);
+              },
+              children: "Undo"
+            })
+          })]
+        })
+      }), jsxRuntime.jsx(RegionPart, {
+        show: showSuggestions,
+        reducedExit: prefersReducedMotion,
+        children: jsxRuntime.jsx(SuggestionList, {
+          "aria-label": "Suggestions",
+          "data-testid": "agent-input-suggestions",
+          children: shownSuggestions.map(function (suggestion, index) {
+            return jsxRuntime.jsx("li", {
+              children: jsxRuntime.jsx(SuggestionChip, {
+                onClick: function onClick() {
+                  return onPickSuggestion(suggestion);
+                },
+                children: suggestion
+              })
+            }, "".concat(index, "-").concat(suggestion));
+          })
+        })
+      }), jsxRuntime.jsx(VisuallyHidden, {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "data-testid": "agent-input-review-announcement",
+        children: reviewAnnouncement
+      }), jsxRuntime.jsx(InputWrapper, {
         children: jsxRuntime.jsxs(InputShell, {
-          "data-disabled": disabled || effectiveSubmitting,
+          "data-disabled": disabled,
           children: [jsxRuntime.jsx(Input, {
+            ref: inputRef,
             id: inputId,
-            type: "text",
+            rows: 1,
+            enterKeyHint: "send",
             "aria-label": label,
             value: displayedValue,
             onChange: onTextChange,
             onKeyDown: onInputKeyDown,
             placeholder: placeholder,
-            disabled: disabled || effectiveSubmitting,
+            disabled: disabled,
             readOnly: isListening,
-            "aria-describedby": statusId
+            "aria-describedby": showCounter ? "".concat(statusId, " ").concat(counterId) : statusId,
+            "aria-invalid": isOverLimit || undefined
           }), jsxRuntime.jsxs(InputActions, {
             children: [hasVoice && jsxRuntime.jsxs(MicButtonWrapper, {
               "$isListening": isListening,
@@ -4133,7 +4623,17 @@ var AgentInput = function AgentInput(_a) {
                 disabled: disabled || effectiveSubmitting,
                 type: "button"
               })]
-            }), jsxRuntime.jsx(CircularActionIconButton, {
+            }), showStop ? jsxRuntime.jsx(CircularActionIconButton, {
+              variant: "secondary",
+              size: "medium",
+              iconName: "stop",
+              onClick: function onClick() {
+                return onStop === null || onStop === void 0 ? void 0 : onStop();
+              },
+              disabled: disabled,
+              "aria-label": "Stop",
+              type: "button"
+            }) : jsxRuntime.jsx(CircularActionIconButton, {
               variant: "secondary",
               size: "medium",
               iconName: "directionUp",
@@ -4146,7 +4646,7 @@ var AgentInput = function AgentInput(_a) {
             })]
           })]
         })
-      })
+      })]
     }), jsxRuntime.jsxs(StatusRow, {
       children: [jsxRuntime.jsx(StatusText, {
         "$isError": isStatusError,
@@ -4155,24 +4655,44 @@ var AgentInput = function AgentInput(_a) {
           role: "status",
           "aria-live": "polite",
           "aria-atomic": "true",
-          children: jsxRuntime.jsx(Typography, {
+          children: resolvedStatus && jsxRuntime.jsx(Typography, {
             variant: "small",
             color: isStatusError ? 'error' : 'subdued',
             children: resolvedStatus
           })
         })
-      }), isListening && !prefersReducedMotion && jsxRuntime.jsx(MeterContainer, {
-        "aria-hidden": "true",
-        children: meterBars.map(function (barHeight, index) {
-          return jsxRuntime.jsx(MeterBar, {
-            "$height": barHeight
-          }, "meter-".concat(index));
-        })
+      }), jsxRuntime.jsxs(StatusEnd, {
+        children: [isListening && !prefersReducedMotion && jsxRuntime.jsx(MeterContainer, {
+          "aria-hidden": "true",
+          children: meterBars.map(function (barHeight, index) {
+            return jsxRuntime.jsx(MeterBar, {
+              "$height": barHeight
+            }, "meter-".concat(index));
+          })
+        }), showCounter && jsxRuntime.jsx(Typography, {
+          variant: "small",
+          color: isOverLimit ? 'error' : 'subdued',
+          children: jsxRuntime.jsxs("span", {
+            id: counterId,
+            "data-testid": "agent-input-counter",
+            children: [messageLength, "/", maxLength, jsxRuntime.jsx(VisuallyHidden, {
+              children: " characters"
+            })]
+          })
+        })]
+      }), maxLength !== undefined && jsxRuntime.jsx(VisuallyHidden, {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "data-testid": "agent-input-limit-announcement",
+        children: limitAnnouncement
       })]
     })]
   });
-};
-var templateObject_1$q, templateObject_2$l, templateObject_3$k, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
+}
+var AgentInput = /*#__PURE__*/React.forwardRef(AgentInputWithRef);
+AgentInput.displayName = 'AgentInput';
+var templateObject_1$q, templateObject_2$l, templateObject_3$k, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, 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$9 = tokens.semantic;
 var alert = tokens.component.alert;
@@ -4199,11 +4719,12 @@ var fadeOut = styled.keyframes(templateObject_2$k || (templateObject_2$k = __mak
 // The generated names of the two exits (full, and reduced motion)
 var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
 // Default icons by variant
+// Each severity's status icon (decision 0045): decorative, because the title and message say it
 var variantIcons$1 = {
-  error: 'crossCircle',
-  warning: 'bell',
-  info: 'info',
-  success: 'checkRing'
+  error: 'statusError',
+  warning: 'statusWarning',
+  info: 'statusInfo',
+  success: 'statusSuccess'
 };
 // Icon colors by variant (using semantic icon color tokens)
 var variantIconColors = {
@@ -4448,11 +4969,12 @@ var semantic$8 = tokens.semantic;
 var color$2 = semantic$8.color,
   typography = semantic$8.typography,
   size = semantic$8.size;
+// Each severity's status icon and, at the small size, its shape (decision 0045)
 var variantIcons = {
-  error: 'crossCircle',
-  warning: 'bell',
-  info: 'info',
-  success: 'checkRing'
+  error: 'statusError',
+  warning: 'statusWarning',
+  info: 'statusInfo',
+  success: 'statusSuccess'
 };
 var variantTextColors = {
   error: color$2.text.danger,
@@ -4460,6 +4982,12 @@ var variantTextColors = {
   info: color$2.text.accent,
   success: color$2.text.success
 };
+var variantShapes = {
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  success: 'success'
+};
 var sizeConfig = {
   small: {
     font: typography.caption,
@@ -4560,7 +5088,9 @@ var InlineAlert = function InlineAlert(_a) {
     children: hasMessage && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(StyledIconLine, {
         "aria-hidden": "true",
-        children: jsxRuntime.jsx(Icon, {
+        children: alertSize === 'small' ? jsxRuntime.jsx(StatusShape, {
+          shape: variantShapes[variant]
+        }) : jsxRuntime.jsx(Icon, {
           name: variantIcons[variant],
           size: sizeConfig[alertSize].icon,
           iconColor: "inherit"
@@ -5006,7 +5536,7 @@ var _a$1 = tokens.semantic,
 var StyledCodeBlock = /*#__PURE__*/styled__default.default.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$h || (templateObject_1$h = __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$1.emphasis, tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color$1.text["default"], function (_a) {
+})(templateObject_1$h || (templateObject_1$h = __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$1["default"], tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color$1.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
@@ -5567,7 +6097,7 @@ var DropdownMenu = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4$9 || (templateObject_4$9 = __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.emphasis, input$1["default"].borderRadius, elevation$1.floating, space$4[100], function (_a) {
+})(templateObject_4$9 || (templateObject_4$9 = __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["default"], input$1["default"].borderRadius, elevation$1.floating, space$4[100], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -5590,7 +6120,7 @@ var DropdownOption = /*#__PURE__*/styled__default.default.button.withConfig({
     selected: $isSelected,
     focused: $isFocused
   });
-}, border.emphasis);
+}, border["default"]);
 var StyledHelperText$3 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"
@@ -7571,7 +8101,7 @@ var semantic = tokens.semantic;
 var StyledTabList = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TabBar__StyledTabList",
   componentId: "sc-1g9ib0y-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border.emphasis, tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border["default"], tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
 var StyledTab = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -7591,11 +8121,11 @@ var StyledTab = /*#__PURE__*/styled__default.default.button.withConfig({
 }, function (props) {
   return props.$isActive ? semantic.color.fill['accent-muted-hover'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text['accent-hover'] : semantic.color.text["default"];
+  return props.$isActive ? semantic.color.text.accent : semantic.color.text["default"];
 }, function (props) {
   return props.$isActive ? semantic.color.fill['accent-muted-pressed'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text['accent-pressed'] : semantic.color.text["default"];
+  return props.$isActive ? semantic.color.text.accent : semantic.color.text["default"];
 }, function (props) {
   return props.$disabled ? '0.5' : '1';
 }, semantic.border.focus, semantic.border.focusOffset);
@@ -7916,28 +8446,30 @@ var StyledTruncatedText = /*#__PURE__*/styled__default.default.span.withConfig({
 ])));
 // Map categories to CategoryLabel configurations
 var categoryConfig = {
+  // Display colours carry no meaning (decision 0043); five coloured categories share four colours,
+  // so the icon and label tell dining and bills apart
   shopping: {
-    color: 'purple',
+    color: 'magenta',
     icon: 'paper',
     label: 'Shopping'
   },
   dining: {
-    color: 'orange',
+    color: 'rose',
     icon: 'paper',
     label: 'Dining'
   },
   transport: {
-    color: 'blue',
+    color: 'periwinkle',
     icon: 'paper',
     label: 'Transport'
   },
   entertainment: {
-    color: 'pink',
+    color: 'olive',
     icon: 'star',
     label: 'Entertainment'
   },
   bills: {
-    color: 'red',
+    color: 'rose',
     icon: 'paper',
     label: 'Bills'
   },
@@ -7947,12 +8479,6 @@ var categoryConfig = {
     label: 'Other'
   }
 };
-// Map status to badge variant
-var statusToBadgeVariant = {
-  completed: 'success',
-  pending: 'warning',
-  failed: 'error'
-};
 /**
  * TransactionListItem component
  *
@@ -7960,7 +8486,7 @@ var statusToBadgeVariant = {
  * status, and optional metadata (category, receipt, notes). Minimum height 72px
  * with interactive states for clickable items.
  *
- * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ * Composes: Avatar, CategoryLabel, StatusLabel, MoneyDisplay, Icon, DateFormatter, Typography, Stack
  */
 var TransactionListItem = function TransactionListItem(_a) {
   var merchant = _a.merchant,
@@ -7984,8 +8510,6 @@ var TransactionListItem = function TransactionListItem(_a) {
   var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
   // Get category configuration
   var categoryData = category ? categoryConfig[category] : undefined;
-  // Get badge variant from status
-  var badgeVariant = statusToBadgeVariant[status];
   var handleClick = function handleClick() {
     if (isClickable && onClick) {
       onClick();
@@ -8003,19 +8527,10 @@ var TransactionListItem = function TransactionListItem(_a) {
     onKeyDown: handleKeyDown,
     tabIndex: isClickable ? 0 : undefined,
     role: isClickable ? 'button' : undefined,
-    "aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
+    "aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)).concat(status === 'completed' ? '' : ", ".concat(status)) : undefined,
     "data-testid": dataTestId,
     children: [jsxRuntime.jsx(StyledAvatarSection, {
-      children: status === 'pending' ? jsxRuntime.jsx(Badge, {
-        variant: badgeVariant,
-        dot: true,
-        "aria-label": "Pending transaction",
-        children: jsxRuntime.jsx(Avatar, {
-          name: merchant,
-          picture: merchantLogo,
-          size: "md"
-        })
-      }) : jsxRuntime.jsx(Avatar, {
+      children: jsxRuntime.jsx(Avatar, {
         name: merchant,
         picture: merchantLogo,
         size: "md"
@@ -8035,11 +8550,10 @@ var TransactionListItem = function TransactionListItem(_a) {
             variant: "minimal",
             "aria-label": "Category: ".concat(categoryData.label),
             children: categoryData.label
-          }), status === 'failed' && jsxRuntime.jsx(Badge, {
-            variant: "error",
-            dot: true,
-            "aria-label": "Failed transaction",
-            children: jsxRuntime.jsx("span", {})
+          }), status !== 'completed' && jsxRuntime.jsx(StatusLabel, {
+            status: status,
+            size: "small",
+            liveRegion: false
           })]
         }), jsxRuntime.jsx(MoneyDisplay, {
           amount: amount,
@@ -8292,6 +8806,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
 
+exports.AILabel = AILabel;
 exports.AccountCard = AccountCard;
 exports.ActionSheet = ActionSheet;
 exports.AgentInput = AgentInput;
@@ -8343,6 +8858,7 @@ exports.StatusBadge = StatusBadge;
 exports.StatusLabel = StatusLabel;
 exports.StyledInputBase = StyledInputBase;
 exports.StyledTextAreaBase = StyledTextAreaBase;
+exports.SuggestionChip = SuggestionChip;
 exports.TabBar = TabBar;
 exports.Tag = Tag;
 exports.TextField = TextField;