@common-origin/design-system 2.21.0 → 2.22.0

package/dist/client.js

@@ -167,7 +167,7 @@ var AvatarContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$O || (templateObject_1$O = __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$4.avatar[$size];
 }, function (_a) {
@@ -246,7 +246,7 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$O, templateObject_2$z, 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$N || (templateObject_1$N = __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
@@ -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,7 +399,7 @@ 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$N, templateObject_2$y, templateObject_3$v;
+var templateObject_1$O, templateObject_2$y, templateObject_3$v;
 
 var _a$a = tokens.semantic,
   typography$3 = _a$a.typography,
@@ -421,7 +421,7 @@ var getTypographyStyles = function getTypographyStyles(variant) {
     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, ";"),
+    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;
@@ -429,7 +429,7 @@ var getTypographyStyles = function getTypographyStyles(variant) {
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
     "default": color$c.text["default"],
-    emphasis: color$c.text.emphasis,
+    emphasis: color$c.text["default"],
     subdued: color$c.text.muted,
     inverse: color$c.text.inverse,
     disabled: color$c.text.disabled,
@@ -467,7 +467,7 @@ var StyledTypography = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$M || (templateObject_1$M = __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,7 +529,7 @@ var Typography = function Typography(_a) {
     children: children
   });
 };
-var templateObject_1$M;
+var templateObject_1$N;
 
 var semantic$m = tokens.semantic;
 var color$b = semantic$m.color;
@@ -538,7 +538,7 @@ 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$L || (templateObject_1$L = __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"
@@ -561,16 +561,15 @@ var BadgeIndicator = /*#__PURE__*/styled__default.default.span.withConfig({
   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$b.fill.accent, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color$b.fill.danger, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color$b.fill.warning, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color$b.fill.success, ";\n          color: ").concat(color$b.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$b.fill.emphasis, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
   }
@@ -616,7 +615,7 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$L, templateObject_2$x, 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,
@@ -625,7 +624,8 @@ 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;
+  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],
@@ -666,8 +666,9 @@ var backgroundByKey = {
   subtle: surface.raised,
   overlay: surface.scrim,
   emphasis: color$a.fill.emphasis,
-  'emphasis-hover': color$a.fill['emphasis-hover'],
-  'emphasis-active': color$a.fill['emphasis-pressed'],
+  // 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,
@@ -698,21 +699,22 @@ var backgroundByKey = {
 /** Box's `color` prop: text colours, old and new keys. */
 var textColorByKey = {
   "default": color$a.text["default"],
-  emphasis: color$a.text.emphasis,
+  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-hover'],
-  'accent-pressed': color$a.text['accent-pressed'],
+  '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-hover'],
-  'interactive-active': color$a.text['accent-pressed'],
+  '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. */
@@ -721,13 +723,15 @@ var borderColorByKey = {
   success: color$a.border.success,
   warning: color$a.border.warning,
   none: color$a.border.none,
-  emphasis: color$a.border.emphasis,
+  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,
-  subtle: color$a.border.emphasis,
+  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$a.border['input-hover'],
@@ -744,7 +748,7 @@ 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$K || (templateObject_1$K = __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$w || (templateObject_2$w = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
@@ -968,7 +972,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$K, 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 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) {
@@ -976,7 +980,7 @@ var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$J || (templateObject_1$J = __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) {
@@ -988,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':
@@ -1053,7 +1057,7 @@ var Icon = function Icon(_a) {
     }))
   });
 };
-var templateObject_1$J;
+var templateObject_1$K;
 
 var button$1 = tokens.component.button,
   semantic$k = tokens.semantic;
@@ -1126,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':
@@ -1140,7 +1144,7 @@ var StyledButton = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$I || (templateObject_1$I = __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('$');
@@ -1250,7 +1254,7 @@ var Button = function Button(_a) {
     children: renderButtonContent(children, iconName, size)
   }));
 };
-var templateObject_1$I, templateObject_2$v;
+var templateObject_1$J, templateObject_2$v;
 
 var semantic$j = tokens.semantic;
 var color$9 = semantic$j.color;
@@ -1259,15 +1263,26 @@ var category = color$9.category;
 var radius$3 = semantic$j.radius;
 var space$d = semantic$j.space;
 var labelHeight$1 = semantic$j.size.label;
-// Text on white or the -subtle fill (outlined and minimal), at least 4.5:1 (#115)
+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({
@@ -1276,7 +1291,7 @@ var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "CategoryLabel__StyledCategoryLabel",
   componentId: "sc-1jx7bjo-0"
-})(templateObject_1$H || (templateObject_1$H = __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$j.border.width.thin, function (_a) {
@@ -1327,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>
  * ```
@@ -1344,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>
  * ```
@@ -1361,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,
@@ -1373,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,
@@ -1390,7 +1407,7 @@ var CategoryLabel = function CategoryLabel(_a) {
   });
 };
 CategoryLabel.displayName = 'CategoryLabel';
-var templateObject_1$H, templateObject_2$u, templateObject_3$s;
+var templateObject_1$I, templateObject_2$u, templateObject_3$s;
 
 // CategoryBadge sizes on the decision 0018 scale
 var toLabelSize = {
@@ -1435,7 +1452,7 @@ var getVariantStyles = function getVariantStyles(_a) {
       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':
@@ -1463,7 +1480,7 @@ var StyledChip = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$G || (templateObject_1$G = __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$1["default"].borderRadius, semantic$h.motion.transition.feedback, function (props) {
   return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
@@ -1487,7 +1504,7 @@ var CloseButton = /*#__PURE__*/styled__default.default.button.withConfig({
 })(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$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$G, templateObject_2$t, templateObject_3$r;
+var templateObject_1$H, templateObject_2$t, templateObject_3$r;
 
 /**
  * Chip - a static, non-interactive label for tags, categories and metadata.
@@ -1732,7 +1749,7 @@ var color$8 = semantic$g.color;
 var StyledSuggestionChip = /*#__PURE__*/styled__default.default.button.withConfig({
   displayName: "SuggestionChip__StyledSuggestionChip",
   componentId: "sc-1k0njm-0"
-})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"
+})(templateObject_1$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
  *
@@ -1744,7 +1761,7 @@ var StyledSuggestionChip = /*#__PURE__*/styled__default.default.button.withConfi
  * - A native button: Enter and Space pick it, and its text is its accessible name
  * - Outlined, with the naked hover and pressed fills; no selected state
  * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
- */])), semantic$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.emphasis, color$8.text.disabled, forcedColors);
+ */])), 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
  *
@@ -1772,13 +1789,13 @@ var SuggestionChip = function SuggestionChip(_a) {
   });
 };
 SuggestionChip.displayName = 'SuggestionChip';
-var templateObject_1$F;
+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$E || (templateObject_1$E = __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"]);
@@ -1786,12 +1803,12 @@ var Container$1 = function Container(_a) {
     children: children
   }));
 };
-var templateObject_1$E;
+var templateObject_1$F;
 
 var PictureWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$D || (templateObject_1$D = __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.
@@ -1841,7 +1858,7 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$D, templateObject_2$s, 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$2 = _a$8.typography,
@@ -1849,7 +1866,7 @@ var _a$8 = tokens.semantic,
 var TimeStyled = /*#__PURE__*/styled__default.default.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$C || (templateObject_1$C = __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$2.label, color$7.text.muted);
@@ -1895,7 +1912,7 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$C;
+var templateObject_1$D;
 
 var _a$7 = tokens.semantic,
   motion$5 = _a$7.motion,
@@ -1956,7 +1973,7 @@ var IconButtonStyled = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$B || (templateObject_1$B = __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) {
@@ -2034,7 +2051,7 @@ var IconButton = function IconButton(_a) {
     })
   }));
 };
-var templateObject_1$B;
+var templateObject_1$C;
 
 var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2042,7 +2059,7 @@ var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$A || (templateObject_1$A = __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;
@@ -2058,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,
@@ -2112,44 +2102,26 @@ 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$A;
+var templateObject_1$B;
 
 // Destructure tokens
 var semantic$f = tokens.semantic;
@@ -2167,7 +2139,7 @@ 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$z || (templateObject_1$z = __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$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);
 });
@@ -2230,7 +2202,7 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$z, templateObject_2$r, 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;
@@ -2242,7 +2214,7 @@ var StyledDivider = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$y || (templateObject_1$y = __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.
  *
@@ -2355,7 +2327,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$y;
+var templateObject_1$z;
 
 var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2363,7 +2335,7 @@ var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$x || (templateObject_1$x = __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
 ])));
@@ -2417,6 +2389,40 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
+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
@@ -2432,43 +2438,46 @@ var labelHeight = tokens.semantic.size.label;
 var label$1 = tokens.component.badge.label;
 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'
     }
   };
@@ -2521,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,
@@ -2555,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"]
       })]
@@ -2573,7 +2584,7 @@ var templateObject_1$w, templateObject_2$q, templateObject_3$o, templateObject_4
  * 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));
@@ -2583,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
@@ -2801,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"
@@ -2822,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
@@ -2920,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
-                  })
+                  })]
                 })]
               })
             })]
@@ -4697,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 = {
@@ -4946,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,
@@ -4958,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,
@@ -5058,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"
@@ -5504,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';
@@ -6065,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) {
@@ -6088,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"
@@ -8069,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('$');
@@ -8089,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);
@@ -8414,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'
   },
@@ -8445,12 +8479,6 @@ var categoryConfig = {
     label: 'Other'
   }
 };
-// Map status to badge variant
-var statusToBadgeVariant = {
-  completed: 'success',
-  pending: 'warning',
-  failed: 'error'
-};
 /**
  * TransactionListItem component
  *
@@ -8458,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,
@@ -8482,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();
@@ -8501,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"
@@ -8533,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,