@common-origin/design-system 2.14.0 → 2.16.0

package/dist/client.esm.js

@@ -104,44 +104,44 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 // Destructure tokens
-var semantic$g = tokensJson.semantic;
+var semantic$j = tokensJson.semantic;
 var initials = tokensJson.component.avatar.initials;
-var color$a = semantic$g.color,
-  size$1 = semantic$g.size,
-  border$a = semantic$g.border;
-var radius$5 = border$a.radius;
+var color$b = semantic$j.color,
+  size$2 = semantic$j.size,
+  border$b = semantic$j.border;
+var radius$5 = border$b.radius;
 var AvatarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$L || (templateObject_1$L = __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$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) {
   var $size = _a.$size;
-  return size$1.avatar[$size];
+  return size$2.avatar[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return size$1.avatar[$size];
-}, radius$5.circle, color$a.background.surface);
+  return size$2.avatar[$size];
+}, radius$5.circle, color$b.background.surface);
 var AvatarImage = styled.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$w || (templateObject_2$w = __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$5.circle);
+})(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$5.circle);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"
+})(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
 ])), initials.fontFamily, initials.fontWeight, function (_a) {
   var $size = _a.$size;
   return initials.fontSize[$size];
-}, color$a.text["default"], initials.lineHeight);
+}, color$b.text["default"], initials.lineHeight);
 // Helper function to get initials from name
 var getInitials = function getInitials(name) {
   return name.split(' ').map(function (word) {
@@ -195,7 +195,7 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$L, templateObject_2$w, templateObject_3$t;
+var templateObject_1$M, templateObject_2$y, templateObject_3$v;
 
 // Breakpoints from the semantic tokens (decision 0014)
 var breakpoints$1 = {
@@ -220,7 +220,7 @@ var media$1 = {
 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 = keyframes(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
+var fadeOut$1 = keyframes(templateObject_1$L || (templateObject_1$L = __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
@@ -232,51 +232,51 @@ var fadeOut$1 = keyframes(templateObject_1$K || (templateObject_1$K = __makeTemp
 // so it isn't restarted, and the fade runs on top of it. A fade is already the
 // 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.
-var exitAnimation = css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
+var exitAnimation = css(templateObject_2$x || (templateObject_2$x = __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, tokensJson.semantic.motion.duration.fast, tokensJson.semantic.motion.easing.easeOut);
 // 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.
-var visuallyHidden = css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"])));
-var templateObject_1$K, templateObject_2$v, templateObject_3$s;
+var visuallyHidden = css(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"])));
+var templateObject_1$L, templateObject_2$x, templateObject_3$u;
 
-var _a$c = tokensJson.semantic,
-  typography$1 = _a$c.typography,
-  color$9 = _a$c.color,
-  letterSpacing = _a$c.letterSpacing;
+var _a$b = tokensJson.semantic,
+  typography$2 = _a$b.typography,
+  color$a = _a$b.color,
+  letterSpacing = _a$b.letterSpacing;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
-    display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
-    h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
-    h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
-    h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
-    subtitle: "font: ".concat(typography$1.subtitle, ";"),
-    body: "font: ".concat(typography$1.body, ";"),
-    small: "font: ".concat(typography$1.small, ";"),
-    overline: "font: ".concat(typography$1.overline, ";"),
-    caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
-    button1: "font: ".concat(typography$1.button1, ";"),
-    button2: "font: ".concat(typography$1.button2, ";"),
-    button3: "font: ".concat(typography$1.button3, ";"),
-    label: "font: ".concat(typography$1.label, ";")
+    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;"),
+    button1: "font: ".concat(typography$2.button1, ";"),
+    button2: "font: ".concat(typography$2.button2, ";"),
+    button3: "font: ".concat(typography$2.button3, ";"),
+    label: "font: ".concat(typography$2.label, ";")
   };
   return styles[variant] || styles.body;
 };
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
-    "default": color$9.text["default"],
-    emphasis: color$9.text.emphasis,
-    subdued: color$9.text.subdued,
-    inverse: color$9.text.inverse,
-    disabled: color$9.text.disabled,
-    interactive: color$9.text.interactive,
-    error: color$9.text.error,
-    success: color$9.text.success,
-    warning: color$9.text.warning
+    "default": color$a.text["default"],
+    emphasis: color$a.text.emphasis,
+    subdued: color$a.text.subdued,
+    inverse: color$a.text.inverse,
+    disabled: color$a.text.disabled,
+    interactive: color$a.text.interactive,
+    error: color$a.text.error,
+    success: color$a.text.success,
+    warning: color$a.text.warning
   };
   return colorMap[colorVariant] || colorMap["default"];
 };
@@ -307,7 +307,7 @@ var StyledTypography = styled.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
+})(templateObject_1$K || (templateObject_1$K = __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.
  *
@@ -369,53 +369,53 @@ var Typography = function Typography(_a) {
     children: children
   });
 };
-var templateObject_1$J;
+var templateObject_1$K;
 
-var semantic$f = tokensJson.semantic;
-var color$8 = semantic$f.color,
-  border$9 = semantic$f.border;
-var radius$4 = border$9.radius;
-var _a$b = tokensJson.component.badge,
-  dot = _a$b.dot,
-  count = _a$b.count,
-  ring = _a$b.ring;
-var scaleIn$2 = keyframes(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
+var semantic$i = tokensJson.semantic;
+var color$9 = semantic$i.color,
+  border$a = semantic$i.border;
+var radius$4 = border$a.radius;
+var _a$a = tokensJson.component.badge,
+  dot = _a$a.dot,
+  count = _a$a.count,
+  ring = _a$a.ring;
+var scaleIn$2 = 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 BadgeWrapper = styled.span.withConfig({
   displayName: "Badge__BadgeWrapper",
   componentId: "sc-tjz4pp-0"
-})(templateObject_2$u || (templateObject_2$u = __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$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"])));
 var BadgeIndicator = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n  \n  ", "\n"])), function (props) {
+})(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n  \n  ", "\n"])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? dot.size : count.minWidth;
 }, function (props) {
   return props.$isDot ? dot.size : count.height;
 }, function (props) {
-  return props.$isDot ? '0' : "0 ".concat(count.paddingX);
-}, radius$4.circle, count.lineHeight, ring.width, color$8.background["default"], scaleIn$2, semantic$f.motion.duration.normal, semantic$f.motion.easing.easeOut, reducedMotion, function (props) {
+  return props.$isDot ? '0' : "0 ".concat(semantic$i.spacing.component.xs);
+}, radius$4.circle, count.lineHeight, ring.width, color$9.background["default"], scaleIn$2, semantic$i.motion.duration.normal, semantic$i.motion.easing.easeOut, reducedMotion, function (props) {
   switch (props.$variant) {
     case 'primary':
-      return "\n          background-color: ".concat(color$8.background.interactive, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.background.interactive, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color$8.background.error, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.background.error, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color$8.background.warning, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.background.warning, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color$8.background.success, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.background.success, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     default:
-      return "\n          background-color: ".concat(color$8.background.emphasis, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.background.emphasis, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
   }
 });
 var ScreenReaderOnly$1 = styled.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
   componentId: "sc-tjz4pp-2"
-})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+})(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -427,7 +427,8 @@ var Badge = function Badge(_a) {
     _e = _a.dot,
     dot = _e === void 0 ? false : _e,
     ariaLabel = _a["aria-label"],
-    className = _a.className;
+    className = _a.className,
+    dataTestId = _a["data-testid"];
   var isVisible = dot || count > 0;
   var displayCount = count > max ? "".concat(max, "+") : count.toString();
   // Generate default aria-label if not provided
@@ -435,6 +436,7 @@ var Badge = function Badge(_a) {
   var label = ariaLabel || defaultAriaLabel;
   return jsxs(BadgeWrapper, {
     className: className,
+    "data-testid": dataTestId,
     children: [children, jsxs(BadgeIndicator, {
       "$variant": variant,
       "$isDot": dot,
@@ -451,7 +453,7 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$m;
+var templateObject_1$J, templateObject_2$w, templateObject_3$t, templateObject_4$n;
 
 var StyledBox = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -462,15 +464,15 @@ var StyledBox = styled.div.withConfig({
 })(templateObject_49 || (templateObject_49 = __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 && css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
-  return props.$alignItems && css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+  return props.$alignItems && css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
   return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensJson.semantic.spacing.layout[props.$gap]);
 }, function (props) {
@@ -486,7 +488,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$mx && css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$mx], tokensJson.semantic.spacing.layout[props.$mx]);
 }, function (props) {
-  return props.$my && css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$my], tokensJson.semantic.spacing.layout[props.$my]);
+  return props.$my && css(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$my], tokensJson.semantic.spacing.layout[props.$my]);
 }, function (props) {
   return props.$p && css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensJson.semantic.spacing.layout[props.$p]);
 }, function (props) {
@@ -496,7 +498,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$pb && css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$pb]);
 }, function (props) {
-  return props.$pl && css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$pl]);
+  return props.$pl && css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$pl]);
 }, function (props) {
   return props.$px && css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$px], tokensJson.semantic.spacing.layout[props.$px]);
 }, function (props) {
@@ -686,7 +688,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, 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, 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;
+var templateObject_1$I, templateObject_2$v, templateObject_3$s, templateObject_4$m, templateObject_5$h, 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;
 
 var IconStyled = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -694,7 +696,7 @@ var IconStyled = styled.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$G || (templateObject_1$G = __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$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) {
   var $size = _a.$size;
   return tokensJson.semantic.size.icon[$size];
 }, function (_a) {
@@ -760,12 +762,14 @@ var Icon = function Icon(_a) {
     })
   });
 };
-var templateObject_1$G;
+var templateObject_1$H;
 
 var button$1 = tokensJson.component.button,
-  semantic$e = tokensJson.semantic;
+  semantic$h = tokensJson.semantic;
+// Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
+var spacing$a = semantic$h.spacing.component;
 // 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(tokensJson.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$e.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(button$1.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokensJson.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$h.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(semantic$h.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
@@ -794,6 +798,15 @@ var getVariantStyles$1 = function getVariantStyles(_a) {
       disabledBg: button$1.variants.naked.disabled.backgroundColor,
       disabledText: button$1.variants.naked.disabled.textColor
     },
+    accent: {
+      bg: button$1.variants.accent.backgroundColor,
+      text: button$1.variants.accent.textColor,
+      hoverBg: button$1.variants.accent.hover.backgroundColor,
+      activeBg: button$1.variants.accent.active.backgroundColor,
+      disabledBg: button$1.variants.accent.disabled.backgroundColor,
+      disabledText: button$1.variants.accent.disabled.textColor
+    },
+    // Deprecated alias for accent; removed in 3.0
     emphasis: {
       bg: button$1.variants.emphasis.backgroundColor,
       text: button$1.variants.emphasis.textColor,
@@ -819,13 +832,13 @@ var getSizeStyles$1 = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
-      return "\n        font: ".concat(button$1.sizes.small.font, ";\n        padding: ").concat(button$1.sizes.small.padding, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.small.font, ";\n        padding: ").concat(spacing$a.sm, " ").concat(spacing$a.md, ";\n      ");
     case 'medium':
-      return "\n        font: ".concat(button$1.sizes.medium.font, ";\n        padding: ").concat(button$1.sizes.medium.padding, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.medium.font, ";\n        padding: ").concat(spacing$a.sm, " ").concat(spacing$a.lg, ";\n      ");
     case 'large':
-      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        padding: ").concat(button$1.sizes.large.padding, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        padding: ").concat(spacing$a.md, " ").concat(spacing$a.lg, ";\n      ");
     default:
-      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        padding: ").concat(button$1.sizes.large.padding, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        padding: ").concat(spacing$a.md, " ").concat(spacing$a.lg, ";\n      ");
   }
 };
 var StyledButton = styled.button.withConfig({
@@ -834,14 +847,14 @@ var StyledButton = styled.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$F || (templateObject_1$F = __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$1);
+})(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$1);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
-})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+})(templateObject_2$u || (templateObject_2$u = __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$1);
 // Helper function to get icon size based on button size
@@ -885,8 +898,11 @@ var Button = function Button(_a) {
     rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
   // For links with custom link component (e.g., Next.js Link, React Router Link)
   if (purpose === 'link' && url && LinkComponent) {
-    return jsx(LinkComponent, {
+    // The link component renders the <a>, so anchor attributes (id, aria-*, rel, handlers) go to it
+    var linkProps = rest;
+    return jsx(LinkComponent, __assign({}, linkProps, {
       href: url,
+      target: target,
       children: jsx(StyledLink, {
         as: "span",
         "$variant": variant,
@@ -894,18 +910,17 @@ var Button = function Button(_a) {
         "data-testid": dataTestId,
         children: renderButtonContent(children, iconName, size)
       })
-    });
+    }));
   }
   // For standard links (external or without custom component)
   if (purpose === 'link' && url) {
     var linkProps = rest;
-    return jsx(StyledLink, __assign({
+    return jsx(StyledLink, __assign({}, linkProps, {
       href: url,
       target: target,
       "$variant": variant,
       "$size": size,
-      "data-testid": dataTestId
-    }, linkProps, {
+      "data-testid": dataTestId,
       children: renderButtonContent(children, iconName, size)
     }));
   }
@@ -942,49 +957,46 @@ var Button = function Button(_a) {
     children: renderButtonContent(children, iconName, size)
   }));
 };
-var templateObject_1$F, templateObject_2$s;
+var templateObject_1$G, templateObject_2$u;
 
-var semantic$d = tokensJson.semantic;
-var color$7 = semantic$d.color,
-  border$8 = semantic$d.border,
-  spacing$7 = semantic$d.spacing;
+var semantic$g = tokensJson.semantic;
+var color$8 = semantic$g.color,
+  border$9 = semantic$g.border,
+  spacing$9 = semantic$g.spacing;
 var label$2 = tokensJson.component.badge.label;
-var category = color$7.category;
-var radius$3 = border$8.radius;
-var layout$4 = spacing$7.layout;
-var StyledCategoryBadge = styled.span.withConfig({
+var category = color$8.category;
+var radius$3 = border$9.radius;
+var layout$4 = spacing$9.layout;
+var labelHeight$1 = semantic$g.size.label;
+// Text on white or the -subtle 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'],
+  gray: category['gray-text']
+};
+var StyledCategoryLabel = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
-  displayName: "CategoryBadge__StyledCategoryBadge",
-  componentId: "sc-17aslpn-0"
-})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\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  color: ", ";\n  \n  border-color: ", ";\n"], ["\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  color: ", ";\n  \n  border-color: ", ";\n"
-/**
- * CategoryBadge component for displaying transaction categories
- *
- * A static label for categorizing content with support for 8 color options,
- * 3 visual variants, and optional icons. Perfect for categorizing
- * financial transactions or content types.
- *
- * @example
- * ```tsx
- * <CategoryBadge color="orange" icon="restaurant">
- *   Food & Dining
- * </CategoryBadge>
- *
- * <CategoryBadge color="blue" variant="outlined" size="small">
- *   Travel
- * </CategoryBadge>
- * ```
- */])), radius$3.circle, semantic$d.border.width.thin, function (_a) {
+  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"
+// 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.circle, semantic$g.border.width.thin, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? '24px' : '32px';
+  return labelHeight$1[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
+  return $size === 'medium' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? label$2.typography.small : label$2.typography.medium;
+  return $size === 'medium' ? label$2.typography.small : label$2.typography.medium;
 }, label$2.fontWeight, layout$4.xs, function (_a) {
   var $color = _a.$color,
     $variant = _a.$variant;
@@ -1000,9 +1012,9 @@ var StyledCategoryBadge = styled.span.withConfig({
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
-    return color$7.text.inverse;
+    return color$8.text.inverse;
   }
-  return category[$color];
+  return categoryText[$color];
 }, function (_a) {
   var $color = _a.$color,
     $variant = _a.$variant;
@@ -1011,74 +1023,139 @@ var StyledCategoryBadge = styled.span.withConfig({
   }
   return 'transparent';
 });
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+var VisibleContent$1 = styled.span.withConfig({
+  displayName: "CategoryLabel__VisibleContent",
+  componentId: "sc-1jx7bjo-1"
+})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var HiddenLabel = styled.span.withConfig({
+  displayName: "CategoryLabel__HiddenLabel",
+  componentId: "sc-1jx7bjo-2"
+})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <CategoryLabel color="orange" icon="creditCard">
+ *   Shopping
+ * </CategoryLabel>
+ *
+ * <CategoryLabel color="blue" variant="outlined" size="medium">
+ *   Travel
+ * </CategoryLabel>
+ * ```
+ */])), visuallyHidden);
 /**
- * CategoryBadge component for displaying transaction categories
+ * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static label for categorizing content with support for 8 color options,
- * 3 visual variants, and optional icons. Perfect for categorizing
- * financial transactions or content types.
+ * 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.
  *
  * @example
  * ```tsx
- * <CategoryBadge color="orange" icon="restaurant">
- *   Food & Dining
- * </CategoryBadge>
+ * <CategoryLabel color="orange" icon="creditCard">
+ *   Shopping
+ * </CategoryLabel>
  *
- * <CategoryBadge color="blue" variant="outlined" size="small">
+ * <CategoryLabel color="blue" variant="outlined" size="medium">
  *   Travel
- * </CategoryBadge>
+ * </CategoryLabel>
  * ```
  */
-var CategoryBadge = function CategoryBadge(_a) {
+var CategoryLabel = function CategoryLabel(_a) {
   var children = _a.children,
     _b = _a.color,
     color = _b === void 0 ? 'blue' : _b,
     _c = _a.variant,
     variant = _c === void 0 ? 'filled' : _c,
     _d = _a.size,
-    size = _d === void 0 ? 'medium' : _d,
+    size = _d === void 0 ? 'large' : _d,
     icon = _a.icon,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"];
-  var iconSize = size === 'small' ? 'xs' : 'sm';
-  return jsxs(StyledCategoryBadge, {
+  var iconSize = size === 'medium' ? 'xs' : 'sm';
+  // 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 jsxs(StyledCategoryLabel, {
     "$color": color,
     "$variant": variant,
     "$size": size,
-    "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    children: [icon && jsx(Icon, {
-      name: icon,
-      size: iconSize,
-      iconColor: variant === 'filled' ? 'inverse' : 'inherit',
-      "aria-hidden": "true"
-    }), children]
+    children: [jsxs(VisibleContent$1, {
+      "aria-hidden": accessibleLabel ? 'true' : undefined,
+      children: [icon && jsx(Icon, {
+        name: icon,
+        size: iconSize,
+        iconColor: variant === 'filled' ? 'inverse' : 'inherit',
+        "aria-hidden": "true"
+      }), children]
+    }), accessibleLabel && jsx(HiddenLabel, {
+      children: accessibleLabel
+    })]
   });
 };
+CategoryLabel.displayName = 'CategoryLabel';
+var templateObject_1$F, templateObject_2$t, templateObject_3$r;
+
+// CategoryBadge sizes on the decision 0018 scale
+var toLabelSize = {
+  small: 'medium',
+  medium: 'large'
+};
+/**
+ * CategoryBadge displays a category label.
+ *
+ * @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size="small"` to
+ * `"medium"`, and `size="medium"` (or no size) to `"large"`, CategoryLabel's default.
+ * CategoryBadge is removed in 3.0 (decision 0018).
+ */
+var CategoryBadge = function CategoryBadge(_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    props = __rest(_a, ["size"]);
+  return jsx(CategoryLabel, __assign({}, props, {
+    size: toLabelSize[size]
+  }));
+};
 CategoryBadge.displayName = 'CategoryBadge';
-var templateObject_1$E;
 
-var chip = tokensJson.component.chip;
+var chip$1 = tokensJson.component.chip;
 // Helper function to get variant styles matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
   var $variant = _a.$variant,
     $selected = _a.$selected,
     $clickable = _a.$clickable,
     $disabled = _a.$disabled;
-  // Boolean chips with selected state get special background
+  // Selected filter and input chips use the light-blue selected treatment (decision 0016).
+  // The text darkens with the fill so every state stays at least 4.5:1.
   if ($selected) {
-    return "\n      background-color: ".concat(tokensJson.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#CAE8FF' : tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#B5DEFF' : tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n    ");
+    // 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;
+      return "\n        background-color: ".concat(disabled.backgroundColor, ";\n        color: ").concat(disabled.textColor, ";\n      ");
+    }
+    var _b = tokensJson.semantic.color,
+      background = _b.background,
+      text = _b.text;
+    var interactiveStates = $clickable;
+    return "\n      background-color: ".concat(background['interactive-subtle'], ";\n      color: ").concat(text.interactive, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? background['interactive-subtle-hover'] : background['interactive-subtle'], ";\n        color: ").concat(interactiveStates ? text['interactive-hover'] : text.interactive, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? background['interactive-subtle-active'] : background['interactive-subtle'], ";\n        color: ").concat(interactiveStates ? text['interactive-active'] : text.interactive, ";\n      }\n    ");
   }
   switch ($variant) {
     case 'emphasis':
-      return "\n        background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip.variants.emphasis.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.emphasis.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.emphasis.disabled.textColor, ";\n        ") : '', "\n      ");
+      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      ");
     case 'subtle':
-      return "\n        background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n        color: ").concat(chip.variants.subtle.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.subtle.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.subtle.disabled.textColor, ";\n        ") : '', "\n      ");
+      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      ");
     case 'interactive':
-      return "\n        background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n        color: ").concat(chip.variants.interactive.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.interactive.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.interactive.disabled.textColor, ";\n        ") : '', "\n      ");
+      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      ");
     case 'default':
     default:
-      return "\n        background-color: ".concat(chip["default"].backgroundColor, ";\n        color: ").concat(chip["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.hover.backgroundColor : chip["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.active.backgroundColor : chip["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.disabled.backgroundColor, ";\n          color: ").concat(chip.disabled.textColor, ";\n        ") : '', "\n      ");
+      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      ");
   }
 };
 // Helper function to get size styles matching Button's approach
@@ -1086,13 +1163,15 @@ var getSizeStyles = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
-      return "\n        font: ".concat(chip.sizes.small.font, ";\n        padding: ").concat(chip.sizes.small.padding, ";\n      ");
+      return "\n        font: ".concat(chip$1.sizes.small.font, ";\n        // Off-grid 2px: keeps the deprecated token until #129 (decision 0022)\n        padding: ").concat(chip$1.sizes.small.padding, ";\n      ");
     case 'medium':
     default:
-      return "\n        font: ".concat(chip.sizes.medium.font, ";\n        padding: ").concat(chip.sizes.medium.padding, ";\n      ");
+      return "\n        font: ".concat(chip$1.sizes.medium.font, ";\n        padding: ").concat(chip$1.sizes.medium.padding, ";\n      ");
   }
 };
 
+var chip = tokensJson.component.chip,
+  semantic$f = tokensJson.semantic;
 // Base styled component using direct prop interpolation like Button
 var StyledChip = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1100,16 +1179,16 @@ var StyledChip = styled.span.withConfig({
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$D || (templateObject_1$D = __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  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\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  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"
+})(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  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\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  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"
 // Icon container for selected indicator or leading icons
-])), chip["default"].borderRadius, tokensJson.semantic.motion.hover, function (props) {
+])), chip["default"].borderRadius, semantic$f.motion.hover, function (props) {
   return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
-}, getVariantStyles, getSizeStyles, chip.focus.outline, chip.focus.outlineOffset);
+}, getVariantStyles, getSizeStyles, chip.focus.outline, semantic$f.border.focusOffset);
 // Icon container for selected indicator or leading icons
 var IconContainer = styled.span.withConfig({
   displayName: "ChipBase__IconContainer",
   componentId: "sc-moa6zc-1"
-})(templateObject_2$r || (templateObject_2$r = __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$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"
 // Close button for dismissible chips
 ])), tokensJson.semantic.spacing.layout.xs);
 // Close button for dismissible chips
@@ -1119,24 +1198,21 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\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  padding: 2px;\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"])), tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.border.radius.xs, function (props) {
+})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\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  width: ", ";\n  height: ", ";\n  padding: ", ";\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"])), tokensJson.semantic.spacing.layout.sm, chip.closeButton.size, chip.closeButton.size, tokensJson.semantic.spacing.layout.none, tokensJson.semantic.border.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, tokensJson.semantic.motion.hover, tokensJson.semantic.color.background['hover-overlay'], tokensJson.semantic.color.background['active-overlay'], tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
-var templateObject_1$D, templateObject_2$r, templateObject_3$p;
+}, semantic$f.motion.hover, tokensJson.semantic.color.background['hover-overlay'], tokensJson.semantic.color.background['active-overlay'], tokensJson.semantic.color.text.disabled, chip.focus.outline, semantic$f.border.focusOffset, chip["default"].borderRadius);
+var templateObject_1$E, templateObject_2$s, templateObject_3$q;
 
 /**
- * Chip - Compact element for displaying tags, categories, and labels
+ * Chip - a static, non-interactive label for tags, categories and metadata.
  *
- * Use this component for static display chips or simple interactive chips.
- * For specialized filtering patterns, use:
- * - FilterChip: Dismissible chips for showing applied filters
- * - BooleanChip: Toggleable chips for quick filter controls
+ * Chips are classified by job (decision 0016):
+ * - Chip: a static label (`default` variant only)
+ * - InputChip: a removable value, such as an applied filter (formerly `FilterChip`)
+ * - BooleanChip: toggles a filter on and off (becomes `FilterChip` in 3.0)
  *
- * Variants:
- * - default: Standard gray background
- * - emphasis: High-contrast dark background
- * - subtle: Light background for secondary info
- * - interactive: Blue background with hover states
+ * The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are
+ * deprecated and will be removed in 3.0.
  */
 var Chip = function Chip(_a) {
   var children = _a.children,
@@ -1198,22 +1274,22 @@ var LegacyChip = function LegacyChip(_a) {
 };
 
 /**
- * FilterChip - Chip for displaying filters with selected state and optional dismissal
+ * InputChip - A removable value, such as an applied filter, with an optional selected state
  *
- * Use this component to show filters that can be selected/deselected.
- * When selected, displays a checkmark and light blue background.
+ * Use this component to show values the user has entered or applied, such as filters.
+ * When selected, displays a checkmark on the light-blue selected treatment (decision 0016).
+ * A selected disabled chip uses the disabled colours and keeps its checkmark.
  * Optionally dismissible when onDismiss is provided.
  *
  * Features:
  * - Shows checkmark icon when selected
- * - Light blue background when selected
+ * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
  * - Optional close (×) button when onDismiss is provided
  * - Keyboard dismissal with Delete or Backspace keys (when dismissible)
  * - Non-clickable body (only close button is interactive when present)
- * - Uses subtle/interactive background styling based on selected state
  * - Announces as "status" to screen readers
  */
-var FilterChip = function FilterChip(_a) {
+var InputChip = function InputChip(_a) {
   var children = _a.children,
     _b = _a.selected,
     selected = _b === void 0 ? false : _b,
@@ -1266,7 +1342,8 @@ var FilterChip = function FilterChip(_a) {
       "aria-hidden": "true",
       children: jsx(Icon, {
         name: "check",
-        size: "sm"
+        size: "sm",
+        iconColor: "inherit"
       })
     }), children, isDismissible && jsx(CloseButton, {
       type: "button",
@@ -1279,12 +1356,22 @@ var FilterChip = function FilterChip(_a) {
       "data-testid": dataTestId ? "".concat(dataTestId, "-close") : undefined,
       children: jsx(Icon, {
         name: "close",
-        size: "sm"
+        size: "sm",
+        iconColor: "inherit"
       })
     })]
   }));
 };
 
+/**
+ * FilterChip - a removable chip with an optional selected state.
+ *
+ * @deprecated Renamed to `InputChip`; in 3.0 `FilterChip` becomes the toggle chip (today's
+ * `BooleanChip`). Replace `FilterChip` with `InputChip` first, then `BooleanChip` with
+ * `FilterChip` when you upgrade to 3.0 (decision 0016).
+ */
+var FilterChip = InputChip;
+
 /**
  * BooleanChip - Toggleable chip for quick filter controls
  *
@@ -1297,7 +1384,11 @@ var FilterChip = function FilterChip(_a) {
  * - Entire chip is clickable to toggle
  * - Keyboard activation with Space or Enter
  * - Uses checkbox role with aria-checked
- * - Visual background change when selected
+ * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
+ *
+ * @deprecated Becomes `FilterChip` in 3.0, with the same props. Keep using `BooleanChip`
+ * until you upgrade; in 3.0, replace `FilterChip` with `InputChip` first, then
+ * `BooleanChip` with `FilterChip` (decision 0016).
  */
 var BooleanChip = function BooleanChip(_a) {
   var children = _a.children,
@@ -1343,17 +1434,18 @@ var BooleanChip = function BooleanChip(_a) {
       "aria-hidden": "true",
       children: jsx(Icon, {
         name: "check",
-        size: "sm"
+        size: "sm",
+        iconColor: "inherit"
       })
     }), children]
   }));
 };
 
-var spacing$6 = tokensJson.semantic.spacing;
+var spacing$8 = tokensJson.semantic.spacing;
 var StyledContainer$2 = styled.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$C || (templateObject_1$C = __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"])), spacing$6.layout['2xl'], spacing$6.layout['2xl'], 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$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"])), spacing$8.layout['2xl'], spacing$8.layout['2xl'], 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"]);
@@ -1361,24 +1453,24 @@ var Container$1 = function Container(_a) {
     children: children
   }));
 };
-var templateObject_1$C;
+var templateObject_1$D;
 
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$B || (templateObject_1$B = __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"])), media$1.sm);
+})(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"])), media$1.sm);
 var ImageLink = styled.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
-})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut);
+})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut);
 var ImageButton = styled.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut);
+})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
-})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), tokensJson.semantic.border.radius.sm);
+})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), tokensJson.semantic.border.radius.sm);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -1408,18 +1500,18 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
+var templateObject_1$C, templateObject_2$r, templateObject_3$p, templateObject_4$l;
 
-var _a$a = tokensJson.semantic,
-  typography = _a$a.typography,
-  color$6 = _a$a.color;
+var _a$9 = tokensJson.semantic,
+  typography$1 = _a$9.typography,
+  color$7 = _a$9.color;
 var TimeStyled = styled.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * Formats a date with smart relative/absolute logic
- */])), typography.label, color$6.text.subdued);
+ */])), typography$1.label, color$7.text.subdued);
 /**
  * Formats a date with smart relative/absolute logic
  */
@@ -1465,43 +1557,67 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$A;
+var templateObject_1$B;
 
-var motion$5 = tokensJson.semantic.motion,
-  _a$9 = tokensJson.component,
-  iconButton = _a$9.iconButton,
-  button = _a$9.button;
+var _a$8 = tokensJson.semantic,
+  motion$5 = _a$8.motion,
+  border$8 = _a$8.border,
+  spacing$7 = _a$8.spacing,
+  _b$1 = tokensJson.component,
+  iconButton = _b$1.iconButton,
+  button = _b$1.button;
+// Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
+var padding = {
+  small: spacing$7.component.xs,
+  medium: spacing$7.component.sm,
+  large: spacing$7.component.md
+};
+// Colours and motion come from Button's tokens, so IconButton's variants look and behave exactly like
+// Button's in every state (#130). Only the size and the icon differ
+var variants = {
+  primary: {
+    bg: button.primary.backgroundColor,
+    text: button.primary.textColor,
+    hoverBg: button.hover.backgroundColor,
+    activeBg: button.active.backgroundColor,
+    disabledBg: button.disabled.backgroundColor,
+    disabledText: button.disabled.textColor
+  },
+  secondary: {
+    bg: button.variants.secondary.backgroundColor,
+    text: button.variants.secondary.textColor,
+    hoverBg: button.variants.secondary.hover.backgroundColor,
+    activeBg: button.variants.secondary.active.backgroundColor,
+    disabledBg: button.variants.secondary.disabled.backgroundColor,
+    disabledText: button.variants.secondary.disabled.textColor
+  },
+  naked: {
+    bg: button.variants.naked.backgroundColor,
+    text: button.variants.naked.textColor,
+    hoverBg: button.variants.naked.hover.backgroundColor,
+    activeBg: button.variants.naked.active.backgroundColor,
+    disabledBg: button.variants.naked.disabled.backgroundColor,
+    disabledText: button.variants.naked.disabled.textColor
+  }
+};
+// JavaScript callers can pass any string, so an unknown variant falls back to primary, as before
+var colours = function colours(variant) {
+  var _a;
+  return (_a = variants[variant]) !== null && _a !== void 0 ? _a : variants.primary;
+};
 var IconButtonStyled = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\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  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: ", " solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\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  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: ", " solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
+})(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  /* Size-specific dimensions from component tokens */\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  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  /* Size-specific dimensions from component tokens */\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"])), function (_a) {
   var $variant = _a.$variant;
-  switch ($variant) {
-    case 'primary':
-      return iconButton.primary.backgroundColor;
-    case 'secondary':
-      return iconButton.variants.secondary.backgroundColor;
-    case 'naked':
-      return iconButton.variants.naked.backgroundColor;
-    default:
-      return iconButton.primary.backgroundColor;
-  }
+  return colours($variant).bg;
 }, function (_a) {
   var $variant = _a.$variant;
-  switch ($variant) {
-    case 'primary':
-      return button.primary.textColor;
-    case 'secondary':
-      return button.variants.secondary.textColor;
-    case 'naked':
-      return button.variants.naked.textColor;
-    default:
-      return button.primary.textColor;
-  }
-}, iconButton.primary.borderRadius, motion$5.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
+  return colours($variant).text;
+}, iconButton.primary.borderRadius, motion$5.hover, function (_a) {
   var $size = _a.$size;
   return iconButton.sizes[$size].minWidth;
 }, function (_a) {
@@ -1509,32 +1625,20 @@ var IconButtonStyled = styled.button.withConfig({
   return iconButton.sizes[$size].minHeight;
 }, function (_a) {
   var $size = _a.$size;
-  return iconButton.sizes[$size].padding;
+  return padding[$size];
 }, function (_a) {
   var $variant = _a.$variant;
-  switch ($variant) {
-    case 'primary':
-      return iconButton.hover.backgroundColor;
-    case 'secondary':
-      return iconButton.variants.secondary.hover.backgroundColor;
-    case 'naked':
-      return iconButton.variants.naked.hover.backgroundColor;
-    default:
-      return iconButton.hover.backgroundColor;
-  }
-}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor, function (_a) {
+  return colours($variant).hoverBg;
+}, function (_a) {
   var $variant = _a.$variant;
-  switch ($variant) {
-    case 'primary':
-      return button.disabled.textColor;
-    case 'secondary':
-      return button.variants.secondary.disabled.textColor;
-    case 'naked':
-      return button.variants.naked.disabled.textColor;
-    default:
-      return button.disabled.textColor;
-  }
-}, tokensJson.semantic.border.width.thin);
+  return colours($variant).activeBg;
+}, iconButton.focus.outline, border$8.focusOffset, function (_a) {
+  var $variant = _a.$variant;
+  return colours($variant).disabledBg;
+}, function (_a) {
+  var $variant = _a.$variant;
+  return colours($variant).disabledText;
+});
 var IconButton = function IconButton(_a) {
   var variant = _a.variant,
     _b = _a.size,
@@ -1585,7 +1689,7 @@ var IconButton = function IconButton(_a) {
     })
   }));
 };
-var templateObject_1$z;
+var templateObject_1$A;
 
 var StyledWrapper = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1593,7 +1697,7 @@ var StyledWrapper = styled.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$y || (templateObject_1$y = __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$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"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -1696,17 +1800,17 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     })]
   });
 };
-var templateObject_1$y;
+var templateObject_1$z;
 
 // Destructure tokens
-var semantic$c = tokensJson.semantic;
-var _a$8 = __assign(__assign({}, semantic$c), {
+var semantic$e = tokensJson.semantic;
+var _a$7 = __assign(__assign({}, semantic$e), {
     component: tokensJson.component
   }),
-  color$5 = _a$8.color,
-  border$7 = _a$8.border,
-  motion$4 = _a$8.motion,
-  component$2 = _a$8.component;
+  color$6 = _a$7.color,
+  border$7 = _a$7.border,
+  motion$4 = _a$7.motion,
+  component$2 = _a$7.component;
 var radius$2 = border$7.radius;
 var ProgressBarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1714,10 +1818,10 @@ var ProgressBarContainer = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
-})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), color$5.background.disabled, radius$2.xs, function (props) {
-  return props.$variant === 'horizontal' && css(templateObject_1$x || (templateObject_1$x = __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);
+})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), color$6.background.disabled, radius$2.xs, function (props) {
+  return props.$variant === 'horizontal' && 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);
 }, function (props) {
-  return props.$variant === 'vertical' && css(templateObject_2$p || (templateObject_2$p = __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' && 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);
 });
 var ProgressBarFill = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1729,19 +1833,19 @@ var ProgressBarFill = styled.div.withConfig({
   var backgroundColor;
   switch (props.$color) {
     case 'success':
-      backgroundColor = color$5.background.success;
+      backgroundColor = color$6.background.success;
       break;
     case 'error':
-      backgroundColor = color$5.background.error;
+      backgroundColor = color$6.background.error;
       break;
     case 'default':
     default:
-      backgroundColor = color$5.background.interactive;
+      backgroundColor = color$6.background.interactive;
       break;
   }
-  return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
+  return css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
 }, function (props) {
-  return props.$variant === 'horizontal' && css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+  return props.$variant === 'horizontal' && css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 }, function (props) {
   return props.$variant === 'vertical' && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 });
@@ -1753,13 +1857,20 @@ var ProgressBar = function ProgressBar(_a) {
     color = _c === void 0 ? 'default' : _c,
     height = _a.height,
     width = _a.width,
+    ariaLabel = _a["aria-label"],
+    ariaLabelledBy = _a["aria-labelledby"],
     dataTestId = _a["data-testid"];
+  // Blank values are no name at all, so they fall back like missing ones
+  var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
+  var labelledBy = (ariaLabelledBy === null || ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy.trim()) ? ariaLabelledBy : undefined;
   return jsx(ProgressBarContainer, {
     "$variant": variant,
     "$height": height,
     "$width": width,
     "data-testid": dataTestId,
     role: "progressbar",
+    "aria-label": label !== null && label !== void 0 ? label : labelledBy ? undefined : 'Progress',
+    "aria-labelledby": labelledBy,
     "aria-valuenow": Math.min(100, Math.max(0, value)),
     "aria-valuemin": 0,
     "aria-valuemax": 100,
@@ -1770,10 +1881,11 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a;
+var templateObject_1$y, templateObject_2$q, templateObject_3$o, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
 
 // Destructure tokens for cleaner access
 var separatorTokens = tokensJson.component.separator;
+// Margins come from the semantic separator spacing: no component spacing tokens (decision 0022)
 var separatorSpacing = tokensJson.semantic.spacing.separator;
 var StyledDivider = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1781,7 +1893,7 @@ var StyledDivider = styled.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$w || (templateObject_1$w = __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$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"
 /**
  * Divider is an atomic component that provides visual separation between content sections.
  *
@@ -1830,7 +1942,7 @@ var StyledDivider = styled.div.withConfig({
     $orientation = _d === void 0 ? 'horizontal' : _d;
   if ($variant === 'minimal' && $orientation === 'horizontal') {
     // Minimal variant always uses its predefined spacing for horizontal
-    return "margin: ".concat(separatorTokens.variants.minimal.margin, ";");
+    return "margin: ".concat(separatorSpacing.md, " 0;");
   }
   if ($orientation === 'vertical') {
     // Vertical orientation uses horizontal margins (left/right)
@@ -1849,14 +1961,14 @@ var StyledDivider = styled.div.withConfig({
   // Horizontal orientation uses vertical margins (top/bottom)
   switch ($size) {
     case 'small':
-      return "margin: ".concat(separatorTokens.sizes.small.margin, ";");
+      return "margin: ".concat(separatorSpacing.sm, " 0;");
     case 'medium':
-      return "margin: ".concat(separatorTokens.sizes.medium.margin, ";");
+      return "margin: ".concat(separatorSpacing.md, " 0;");
     case 'xlarge':
-      return "margin: ".concat(separatorTokens.sizes.xlarge.margin, ";");
+      return "margin: ".concat(separatorSpacing.xl, " 0;");
     case 'large':
     default:
-      return "margin: ".concat(separatorTokens.sizes.large.margin, ";");
+      return "margin: ".concat(separatorSpacing.lg, " 0;");
   }
 });
 /**
@@ -1894,7 +2006,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$w;
+var templateObject_1$x;
 
 var StyledStack = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1902,7 +2014,7 @@ var StyledStack = styled.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$v || (templateObject_1$v = __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$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"
 // Helper function to convert gap prop to CSS value
 ])));
 // Helper function to convert gap prop to CSS value
@@ -1941,18 +2053,19 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
-var templateObject_1$v;
+var templateObject_1$w;
 
 // Destructure tokens for cleaner access
 var statusColors = tokensJson.semantic.color.status;
-var spacing$5 = tokensJson.semantic.spacing.layout;
+var spacing$6 = tokensJson.semantic.spacing.layout;
 var radius$1 = tokensJson.semantic.border.radius;
-var _a$7 = tokensJson.semantic.motion,
-  transition = _a$7.transition,
-  duration$3 = _a$7.duration,
-  easing$3 = _a$7.easing;
+var _a$6 = tokensJson.semantic.motion,
+  transition = _a$6.transition,
+  duration$3 = _a$6.duration,
+  easing$3 = _a$6.easing;
+var labelHeight = tokensJson.semantic.size.label;
 var label$1 = tokensJson.component.badge.label;
-var scaleIn$1 = keyframes(templateObject_1$u || (templateObject_1$u = __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 = 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 getStatusConfig = function getStatusConfig(status) {
   var configs = {
     pending: {
@@ -1997,31 +2110,31 @@ var getStatusConfig = function getStatusConfig(status) {
   return configs[status];
 };
 // Size configuration
-var sizeConfig = {
+var sizeConfig$1 = {
   small: {
-    height: '20px',
-    padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
+    height: labelHeight.small,
+    padding: "".concat(spacing$6.xs, " ").concat(spacing$6.sm),
     font: label$1.typography.small,
-    gap: spacing$5.xs,
+    gap: spacing$6.xs,
     iconSize: 'xs'
   },
   medium: {
-    height: '24px',
-    padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
+    height: labelHeight.medium,
+    padding: "".concat(spacing$6.xs, " ").concat(spacing$6.sm),
     font: label$1.typography.medium,
-    gap: spacing$5.xs,
+    gap: spacing$6.xs,
     iconSize: 'sm'
   }
 };
-var StyledStatusBadge = styled.span.withConfig({
+var StyledStatusLabel = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
-  displayName: "StatusBadge__StyledStatusBadge",
-  componentId: "sc-1paksgb-0"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\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  /* transition.fast covers all properties, so a size change would animate the badge's dimensions */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\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  /* transition.fast covers all properties, so a size change would animate the badge's dimensions */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.circle, scaleIn$1, duration$3.normal, easing$3.easeOut, transition.fast, reducedMotion, function (_a) {
+  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  /* transition.fast covers all properties, so a size change would animate the label's dimensions */\n  ", " {\n    animation: none;\n    transition: none;\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  /* transition.fast covers all properties, so a size change would animate the label's dimensions */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.circle, scaleIn$1, duration$3.normal, easing$3.easeOut, transition.fast, reducedMotion, function (_a) {
   var $size = _a.$size;
-  var size = sizeConfig[$size];
+  var size = sizeConfig$1[$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;
@@ -2029,56 +2142,29 @@ var StyledStatusBadge = styled.span.withConfig({
   return "\n      background-color: ".concat(config.bgColor, ";\n      color: ").concat(config.color, ";\n    ");
 });
 var ScreenReaderOnly = styled.span.withConfig({
-  displayName: "StatusBadge__ScreenReaderOnly",
-  componentId: "sc-1paksgb-1"
-})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+  displayName: "StatusLabelBase__ScreenReaderOnly",
+  componentId: "sc-1ye9xz5-1"
+})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+])), visuallyHidden);
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+var VisibleContent = styled.span.withConfig({
+  displayName: "StatusLabelBase__VisibleContent",
+  componentId: "sc-1ye9xz5-2"
+})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
 /**
- * StatusBadge component for displaying transaction or task status
- *
- * Displays status with appropriate color, icon, and supports live updates for screen readers.
- * Maps to 6 common status types with semantic color tokens.
- *
- * @example
- * ```tsx
- * <StatusBadge status="completed" />
- *
- * <StatusBadge
- *   status="pending"
- *   label="Awaiting approval"
- *   size="small"
- * />
- *
- * <StatusBadge
- *   status="failed"
- *   showIcon={false}
- *   liveRegion={true}
- * />
- * ```
- */])), visuallyHidden);
+ * 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).
+ */])));
 /**
- * StatusBadge component for displaying transaction or task status
- *
- * Displays status with appropriate color, icon, and supports live updates for screen readers.
- * Maps to 6 common status types with semantic color tokens.
- *
- * @example
- * ```tsx
- * <StatusBadge status="completed" />
- *
- * <StatusBadge
- *   status="pending"
- *   label="Awaiting approval"
- *   size="small"
- * />
- *
- * <StatusBadge
- *   status="failed"
- *   showIcon={false}
- *   liveRegion={true}
- * />
- * ```
+ * 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).
  */
-var StatusBadge = function StatusBadge(_a) {
+var StatusLabelBase = function StatusLabelBase(_a) {
   var status = _a.status,
     label = _a.label,
     _b = _a.size,
@@ -2090,36 +2176,74 @@ var StatusBadge = function StatusBadge(_a) {
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"];
   var statusConfig = getStatusConfig(status);
-  var sizeStyles = sizeConfig[size];
+  var sizeStyles = sizeConfig$1[size];
   var displayLabel = label || statusConfig.label;
-  return jsxs(StyledStatusBadge, {
+  // 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 jsxs(StyledStatusLabel, {
     "$status": status,
     "$size": size,
     role: "status",
-    "aria-label": ariaLabel || "Status: ".concat(displayLabel),
-    "aria-live": liveRegion ? 'polite' : undefined,
+    "aria-label": accessibleLabel || "Status: ".concat(displayLabel),
+    "aria-live": liveRegion ? 'polite' : 'off',
     "aria-atomic": liveRegion ? 'true' : undefined,
     "data-testid": dataTestId,
-    children: [showIcon && jsx(Icon, {
-      name: statusConfig.icon,
-      size: sizeStyles.iconSize,
-      iconColor: "inherit",
-      "aria-hidden": "true"
-    }), displayLabel, jsxs(ScreenReaderOnly, {
-      children: [status, " status"]
+    children: [jsxs(VisibleContent, {
+      "aria-hidden": accessibleLabel ? 'true' : undefined,
+      children: [showIcon && jsx(Icon, {
+        name: statusConfig.icon,
+        size: sizeStyles.iconSize,
+        iconColor: "inherit",
+        "aria-hidden": "true"
+      }), displayLabel, jsxs(ScreenReaderOnly, {
+        children: [status, " status"]
+      })]
+    }), accessibleLabel && jsx(ScreenReaderOnly, {
+      children: accessibleLabel
     })]
   });
 };
+var templateObject_1$v, templateObject_2$p, templateObject_3$n, 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).
+ */
+var StatusBadge = function StatusBadge(props) {
+  return jsx(StatusLabelBase, __assign({}, props));
+};
 StatusBadge.displayName = 'StatusBadge';
-var templateObject_1$u, templateObject_2$o, templateObject_3$m;
 
-var semantic$b = tokensJson.semantic;
-var color$4 = semantic$b.color,
-  spacing$4 = semantic$b.spacing,
-  border$6 = semantic$b.border,
-  size = semantic$b.size;
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <StatusLabel status="completed" />
+ *
+ * <StatusLabel status="pending" label="Awaiting approval" size="small" />
+ * ```
+ */
+// showIcon comes last so no caller (for example plain JavaScript) can hide the icon
+var StatusLabel = function StatusLabel(props) {
+  return jsx(StatusLabelBase, __assign({}, props, {
+    showIcon: true
+  }));
+};
+StatusLabel.displayName = 'StatusLabel';
+
+var semantic$d = tokensJson.semantic;
+var color$5 = semantic$d.color,
+  spacing$5 = semantic$d.spacing,
+  border$6 = semantic$d.border,
+  size$1 = semantic$d.size;
 var label = tokensJson.component.badge.label;
-var layout$3 = spacing$4.layout;
+var layout$3 = spacing$5.layout;
 var radius = border$6.radius;
 var StyledTag = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2127,43 +2251,49 @@ var StyledTag = styled.span.withConfig({
   },
   displayName: "Tag__StyledTag",
   componentId: "sc-lzfmti-0"
-})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+})(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"
 /**
  * Tag component for categorizing and labeling content
  *
  * A static, non-interactive label used to categorize elements or objects in the UI.
  * Tags help users quickly identify and understand content classification.
- */])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, label.typography.small, label.fontWeight, function (_a) {
+ */])), radius.sm, function (_a) {
+  var $size = _a.$size;
+  return size$1.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? "0 ".concat(layout$3.sm) : "".concat(layout$3.xs, " ").concat(layout$3.sm);
+}, label.typography.small, label.fontWeight, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$4.background['interactive-subtle'];
+      return color$5.background['interactive-subtle'];
     case 'success':
-      return color$4.background['success-subtle'];
+      return color$5.background['success-subtle'];
     case 'warning':
-      return color$4.background['warning-subtle'];
+      return color$5.background['warning-subtle'];
     case 'error':
-      return color$4.background['error-subtle'];
+      return color$5.background['error-subtle'];
     case 'emphasis':
-      return color$4.background.emphasis;
+      return color$5.background.emphasis;
     default:
-      return color$4.background.surface;
+      return color$5.background.surface;
   }
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$4.text.interactive;
+      return color$5.text.interactive;
     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.error;
+      return color$5.text.error;
     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,
@@ -2171,17 +2301,17 @@ var StyledTag = styled.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'interactive':
-      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.interactive);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.interactive);
     case 'success':
-      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.success);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.success);
     case 'warning':
-      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.warning);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.warning);
     case 'error':
-      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.error);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.error);
     case 'emphasis':
-      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.background.emphasis);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.background.emphasis);
     default:
-      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border["default"]);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border["default"]);
   }
 });
 /**
@@ -2196,11 +2326,14 @@ var Tag = function Tag(_a) {
     variant = _b === void 0 ? 'default' : _b,
     _c = _a.border,
     border = _c === void 0 ? true : _c,
+    _d = _a.size,
+    tagSize = _d === void 0 ? 'medium' : _d,
     dataTestId = _a["data-testid"],
-    props = __rest(_a, ["children", "variant", "border", 'data-testid']);
+    props = __rest(_a, ["children", "variant", "border", "size", 'data-testid']);
   return jsx(StyledTag, __assign({
     "$variant": variant,
     "$border": border,
+    "$size": tagSize,
     "data-testid": dataTestId,
     "data-variant": variant,
     "data-border": border,
@@ -2210,24 +2343,24 @@ var Tag = function Tag(_a) {
     children: children
   }));
 };
-var templateObject_1$t;
+var templateObject_1$u;
 
 // Destructure tokens for cleaner access
-var semantic$a = tokensJson.semantic;
-var spacing$3 = semantic$a.spacing;
-var layout$2 = spacing$3.layout;
+var semantic$c = tokensJson.semantic;
+var spacing$4 = semantic$c.spacing;
+var layout$2 = spacing$4.layout;
 var StyledBalanceSection = styled.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
   componentId: "sc-1erp7zn-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), layout$2.lg);
+})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), layout$2.lg);
 var StyledTrendSection = styled.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
   componentId: "sc-1erp7zn-1"
-})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), layout$2.xs);
+})(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"])), layout$2.xs);
 styled.div.withConfig({
   displayName: "AccountCard__StyledActions",
   componentId: "sc-1erp7zn-2"
-})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), layout$2.sm);
+})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), layout$2.sm);
 var StyledStackWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
   componentId: "sc-1erp7zn-3"
@@ -2235,7 +2368,7 @@ var StyledStackWrapper = styled.div.withConfig({
 var StyledHeaderWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledHeaderWrapper",
   componentId: "sc-1erp7zn-4"
-})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"
+})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"
 // Map trend direction to icon and color
 ])), tokensJson.component.accountCard.header.minHeight, layout$2.none, layout$2.xs);
 // Map trend direction to icon and color
@@ -2291,7 +2424,7 @@ var AccountCard = function AccountCard(_a) {
     bg: "subtle",
     border: "default",
     borderRadius: "xl",
-    transition: "box-shadow ".concat(semantic$a.motion.duration.normal, " ").concat(semantic$a.motion.easing.easeOut),
+    transition: "box-shadow ".concat(semantic$c.motion.duration.normal, " ").concat(semantic$c.motion.easing.easeOut),
     cursor: isClickable ? 'pointer' : 'default',
     hoverShadow: isClickable ? 'floating' : undefined,
     onClick: handleClick,
@@ -2345,8 +2478,8 @@ var AccountCard = function AccountCard(_a) {
                 }), trend && trendValue && jsx(StyledTrendSection, {
                   "aria-label": "Trend ".concat(trend),
                   role: "img",
-                  children: jsx(CategoryBadge, {
-                    size: "small",
+                  children: jsx(CategoryLabel, {
+                    size: "medium",
                     icon: trendIcon,
                     color: trendColor,
                     variant: "minimal",
@@ -2386,28 +2519,28 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
+var templateObject_1$t, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$f;
 
-var semantic$9 = tokensJson.semantic;
-var _a$6 = semantic$9.motion,
-  duration$2 = _a$6.duration,
-  easing$2 = _a$6.easing;
+var semantic$b = tokensJson.semantic;
+var _a$5 = semantic$b.motion,
+  duration$2 = _a$5.duration,
+  easing$2 = _a$5.easing;
 var StyledListItem = styled.li.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledListItem",
   componentId: "sc-1wzzt21-0"
-})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), semantic$9.size.touchTarget, function (_a) {
+})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), semantic$b.size.touchTarget, function (_a) {
   var $interactive = _a.$interactive;
   return $interactive && 'user-select: none;';
 }, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled && "\n    opacity: ".concat(semantic$9.opacity.disabled, ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
+  return $disabled && "\n    opacity: ".concat(semantic$b.opacity.disabled, ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
 }, function (_a) {
   var $destructive = _a.$destructive,
     $disabled = _a.$disabled;
-  return $destructive && !$disabled && "\n    color: ".concat(semantic$9.color.text.error, ";\n  ");
+  return $destructive && !$disabled && "\n    color: ".concat(semantic$b.color.text.error, ";\n  ");
 });
 var StyledItemContent = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2415,12 +2548,12 @@ var StyledItemContent = styled.div.withConfig({
   },
   displayName: "ListItem__StyledItemContent",
   componentId: "sc-1wzzt21-1"
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color ", " ", ";\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color ", " ", ";\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"])), semantic$9.spacing.layout.md, function (_a) {
+})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color ", " ", ";\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color ", " ", ";\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"])), semantic$b.spacing.layout.md, function (_a) {
   var $spacing = _a.$spacing;
-  return $spacing === 'compact' ? "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.md) : "".concat(semantic$9.spacing.layout.md, " ").concat(semantic$9.spacing.layout.lg);
-}, semantic$9.border.radius.sm, function (_a) {
+  return $spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md) : "".concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.lg);
+}, semantic$b.border.radius.sm, function (_a) {
   var $selected = _a.$selected;
-  return $selected ? semantic$9.color.background['interactive-subtle'] : 'transparent';
+  return $selected ? semantic$b.color.background['interactive-subtle'] : 'transparent';
 }, duration$2.fast, easing$2.easeOut, function (_a) {
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled;
@@ -2432,26 +2565,26 @@ var StyledItemContent = styled.div.withConfig({
     $disabled = _a.$disabled,
     $selected = _a.$selected;
   return !$disabled && $interactive && "\n    &:hover {\n      background-color: ".concat($selected ? tokensJson.component.button.variants.secondary.backgroundColor : tokensJson.component.button.variants.secondary.backgroundColor, ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensJson.component.button.variants.naked.backgroundColor, ";\n    }\n  ");
-}, semantic$9.border.width.thick, semantic$9.color.border.interactive, semantic$9.border.focusOffset);
+}, semantic$b.border.width.thick, semantic$b.color.border.interactive, semantic$b.border.focusOffset);
 var StyledIconContainer$1 = styled.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
   componentId: "sc-1wzzt21-2"
-})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic$9.size.icon.lg, semantic$9.size.icon.lg);
+})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg);
 var StyledTextContent = styled.div.withConfig({
   displayName: "ListItem__StyledTextContent",
   componentId: "sc-1wzzt21-3"
-})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$9.spacing.layout.xs);
+})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$b.spacing.layout.xs);
 var StyledRightContent = styled.div.withConfig({
   displayName: "ListItem__StyledRightContent",
   componentId: "sc-1wzzt21-4"
-})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$9.spacing.layout.sm);
+})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$b.spacing.layout.sm);
 var StyledChevronIcon = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledChevronIcon",
   componentId: "sc-1wzzt21-5"
-})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"])), semantic$9.size.icon.lg, semantic$9.size.icon.lg, semantic$9.color.icon.subdued, duration$2.fast, easing$2.easeOut, function (_a) {
+})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg, semantic$b.color.icon.subdued, duration$2.fast, easing$2.easeOut, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '180deg' : '0deg';
 }, reducedMotion);
@@ -2473,7 +2606,7 @@ var StyledExpandedContent = styled.div.withConfig({
 }, reducedMotion, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, function (_a) {
   var $expanded = _a.$expanded,
     $spacing = _a.$spacing;
-  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.md, " ").concat(semantic$9.spacing.layout.sm, " ").concat(tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.lg, " ").concat(semantic$9.spacing.layout.md, " ").concat(tokensJson.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic$9.color.background['subtle'], ";\n    border-radius: ").concat(semantic$9.border.radius.sm, ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$9.spacing.layout.md : semantic$9.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md, ";\n  ");
+  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.sm, " ").concat(tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.lg, " ").concat(semantic$b.spacing.layout.md, " ").concat(tokensJson.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic$b.color.background['subtle'], ";\n    border-radius: ").concat(semantic$b.border.radius.sm, ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$b.spacing.layout.md : semantic$b.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$b.spacing.layout.sm : semantic$b.spacing.layout.md, ";\n  ");
 });
 var ListItem = function ListItem(_a) {
   var primary = _a.primary,
@@ -2586,7 +2719,7 @@ var ListItem = function ListItem(_a) {
   }));
 };
 ListItem.displayName = 'ListItem';
-var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
+var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
 
 // How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils.
 var EXIT_DURATION_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
@@ -2631,25 +2764,25 @@ function useInert(ref, isInert) {
   }, [ref, isInert]);
 }
 
-var _a$5 = tokensJson.semantic,
-  color$3 = _a$5.color,
-  border$5 = _a$5.border,
-  layout$1 = _a$5.spacing.layout,
-  motion$3 = _a$5.motion,
-  elevation$2 = _a$5.elevation;
-var slideUp = keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
-var fadeIn$2 = keyframes(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var _a$4 = tokensJson.semantic,
+  color$4 = _a$4.color,
+  border$5 = _a$4.border,
+  layout$1 = _a$4.spacing.layout,
+  motion$3 = _a$4.motion,
+  elevation$2 = _a$4.elevation;
+var slideUp = keyframes(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
+var fadeIn$2 = keyframes(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 var StyledOverlay$2 = styled.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
-})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), color$3.background.overlay, tokensJson.semantic.zIndex.modal, fadeIn$2, motion$3.duration.normal, motion$3.easing.easeOut, function (_a) {
+})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), color$4.background.overlay, tokensJson.semantic.zIndex.modal, fadeIn$2, motion$3.duration.normal, motion$3.easing.easeOut, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
 var StyledActionSheet = styled.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
-})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), color$3.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$2.overlay, tokensJson.semantic.zIndex.modal, slideUp, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
+})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), color$4.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$2.overlay, tokensJson.semantic.zIndex.modal, slideUp, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }, reducedMotion, fadeIn$2, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
@@ -2659,7 +2792,7 @@ var StyledActionSheet = styled.div.withConfig({
 var StyledHeader$2 = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeader",
   componentId: "sc-regbol-2"
-})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
+})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
 var StyledHeaderContent = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
@@ -2667,7 +2800,7 @@ var StyledHeaderContent = styled.div.withConfig({
 var StyledCloseButton = styled.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), layout$1.sm, color$3.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$3.icon["default"], color$3.background.surface, border$5.focus, layout$1.xs);
+})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), layout$1.sm, color$4.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$4.icon["default"], color$4.background.surface, border$5.focus, layout$1.xs);
 var StyledActionsList = styled.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
@@ -2894,7 +3027,7 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$7;
+var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
 
 function detectSpeechRecognitionConstructor(targetWindow) {
   if (!targetWindow) return null;
@@ -2994,36 +3127,36 @@ function agentInputStateTransition(currentState, event) {
   }
 }
 
-var semantic$8 = tokensJson.semantic,
+var semantic$a = tokensJson.semantic,
   component$1 = tokensJson.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…';
-var rotateRing = keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var rotateRing = 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 = styled.div.withConfig({
   displayName: "AgentInput__Container",
   componentId: "sc-fhl996-0"
-})(templateObject_2$k || (templateObject_2$k = __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$8.spacing.layout.sm);
+})(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.spacing.layout.sm);
 var ControlsRow = styled.div.withConfig({
   displayName: "AgentInput__ControlsRow",
   componentId: "sc-fhl996-1"
-})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var InputShell = styled.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$8.spacing.layout.sm, semantic$8.spacing.layout.xs, semantic$8.spacing.layout.sm, semantic$8.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$8.border.radius['3xl'], semantic$8.elevation.raised, semantic$8.motion.duration.normal, semantic$8.motion.easing.easeInOut, semantic$8.motion.duration.normal, semantic$8.motion.easing.easeInOut, component$1.input.focus.borderColor, component$1.input.focus.outline, component$1.input.focus.outlineOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
+})(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.spacing.layout.sm, semantic$a.spacing.layout.xs, semantic$a.spacing.layout.sm, semantic$a.spacing.layout.xs, semantic$a.spacing.component.lg, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.border.radius['3xl'], semantic$a.elevation.raised, semantic$a.motion.duration.normal, semantic$a.motion.easing.easeInOut, semantic$a.motion.duration.normal, semantic$a.motion.easing.easeInOut, 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 = styled.input.withConfig({
   displayName: "AgentInput__Input",
   componentId: "sc-fhl996-3"
-})(templateObject_5$b || (templateObject_5$b = __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  }\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  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$8.spacing.layout['7xl'], semantic$8.typography.body, semantic$8.color.text["default"], semantic$8.color.text.subdued, semantic$8.color.text.disabled);
+})(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.spacing.layout['7xl'], semantic$a.typography.body, semantic$a.color.text["default"], component$1.input.placeholder.textColor, semantic$a.color.text.disabled);
 var InputActions = styled.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$8.spacing.layout.sm);
+})(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.spacing.layout.sm);
 var CircularActionIconButton = styled(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$8.border.radius.circle);
+})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$a.border.radius.circle);
 var InputWrapper = styled.div.withConfig({
   displayName: "AgentInput__InputWrapper",
   componentId: "sc-fhl996-6"
@@ -3034,50 +3167,56 @@ var MicButtonWrapper = styled.div.withConfig({
   },
   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"])), semantic$8.border.radius.circle);
+})(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"
+// 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.border.radius.circle);
+// 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 = 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 MicListeningRing = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicListeningRing",
   componentId: "sc-fhl996-8"
-})(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\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: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\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: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), semantic$8.border.width.thick, semantic$8.spacing.layout.xs, component$1.iconButton.focus.outlineOffset, semantic$8.border.radius.circle, semantic$8.color.background['interactive-subtle'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-hover'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-subtle'], function (_a) {
+})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\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(-", " - ", ");\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.spacing.layout.xs, semantic$a.border.focusOffset, semantic$a.border.radius.circle, semantic$a.color.background['interactive-subtle'], semantic$a.color.background.interactive, semantic$a.color.background['interactive-hover'], semantic$a.color.background.interactive, semantic$a.color.background['interactive-subtle'], ringMask, ringMask, function (_a) {
   var $reducedMotion = _a.$reducedMotion;
-  return !$reducedMotion && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+  return !$reducedMotion && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
 });
 var StatusRow = styled.div.withConfig({
   displayName: "AgentInput__StatusRow",
   componentId: "sc-fhl996-9"
-})(templateObject_12$3 || (templateObject_12$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$8.spacing.layout.md, semantic$8.spacing.layout['2xl']);
+})(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.spacing.layout.md, semantic$a.spacing.layout['2xl']);
 var StatusText = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__StatusText",
   componentId: "sc-fhl996-10"
-})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$8.spacing.layout.xl);
+})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$a.spacing.layout.xl);
 var StatusAnnouncement = styled.div.withConfig({
   displayName: "AgentInput__StatusAnnouncement",
   componentId: "sc-fhl996-11"
-})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject([""], [""])));
+})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject([""], [""])));
 var MeterContainer = styled.div.withConfig({
   displayName: "AgentInput__MeterContainer",
   componentId: "sc-fhl996-12"
-})(templateObject_15$1 || (templateObject_15$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$8.spacing.layout.xs, semantic$8.spacing.layout.lg);
+})(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.spacing.layout.xs, semantic$a.spacing.layout.lg);
 var MeterBar = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MeterBar",
   componentId: "sc-fhl996-13"
-})(templateObject_16$1 || (templateObject_16$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$8.spacing.layout.xs, semantic$8.border.radius.xs, semantic$8.color.background.interactive, function (_a) {
+})(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.spacing.layout.xs, semantic$a.border.radius.xs, semantic$a.color.background.interactive, function (_a) {
   var $height = _a.$height;
   return "".concat($height * 100, "%");
-}, semantic$8.motion.duration.fast, semantic$8.motion.easing.easeOut);
+}, semantic$a.motion.duration.fast, semantic$a.motion.easing.easeOut);
 var VisuallyHiddenLabel = styled.label.withConfig({
   displayName: "AgentInput__VisuallyHiddenLabel",
   componentId: "sc-fhl996-14"
-})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+})(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 function getInitialState(hasText) {
   return hasText ? 'typing' : 'idle';
 }
@@ -3706,21 +3845,21 @@ var AgentInput = function AgentInput(_a) {
     })]
   });
 };
-var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
+var templateObject_1$q, templateObject_2$l, templateObject_3$j, 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 semantic$7 = tokensJson.semantic;
+var semantic$9 = tokensJson.semantic;
 var alert = tokensJson.component.alert;
-var _a$4 = semantic$7.motion,
-  duration$1 = _a$4.duration,
-  easing$1 = _a$4.easing;
+var _a$3 = semantic$9.motion,
+  duration$1 = _a$3.duration,
+  easing$1 = _a$3.easing;
 // Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
 // Each half takes duration.fast, so the whole exit stays within the 300ms maximum (P6).
 var FADE_MS = parseInt(duration$1.fast, 10);
 var EXIT_MS = FADE_MS * 2;
 // The --alert-exit-* properties are the alert's height and vertical padding, measured
 // when it's dismissed, so nothing moves until the fade has finished
-var fadeThenCollapse = keyframes(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"], ["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"])), semantic$7.border.width.thin);
-var fadeOut = keyframes(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"], ["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"
+var fadeThenCollapse = keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"], ["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"])), semantic$9.border.width.thin);
+var fadeOut = keyframes(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"], ["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"
 // The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
 // (chosen when dismissed). A timer of the same length removes it if no animation event
 // arrives, for example where animations are disabled or the tab is hidden.
@@ -3732,7 +3871,7 @@ var fadeOut = keyframes(templateObject_2$j || (templateObject_2$j = __makeTempla
 // The generated names of the two exits (full, and reduced motion)
 var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
 // Default icons by variant
-var variantIcons = {
+var variantIcons$1 = {
   error: 'crossCircle',
   warning: 'bell',
   info: 'info',
@@ -3758,35 +3897,32 @@ var StyledAlert = styled.div.withConfig({
   },
   displayName: "Alert__StyledAlert",
   componentId: "sc-18tq5d-0"
-})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), function (_a) {
+})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), function (_a) {
   var $inline = _a.$inline;
-  return $inline ? 'center' : 'flex-start';
+  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
 }, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
+  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
+}, semantic$9.border.radius.sm, semantic$9.border.width.thin, function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'info' : _b;
+  return alert.severity[$variant].background;
 }, function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'info' : _b;
+  return alert.severity[$variant].text;
+}, function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'info' : _b,
+    $appearance = _a.$appearance;
+  return alert.appearance[$appearance].borderColor[$variant];
+}, semantic$9.breakpoint.md, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
-}, semantic$7.border.radius.sm, semantic$7.border.width.thin, function (_a) {
-  var $variant = _a.$variant;
-  switch ($variant) {
-    case 'error':
-      return "\n          background-color: ".concat(semantic$7.color.background['error-subtle'], ";\n          border-color: ").concat(semantic$7.color.border.error, ";\n          color: ").concat(semantic$7.color.text.error, ";\n        ");
-    case 'warning':
-      return "\n          background-color: ".concat(semantic$7.color.background['warning-subtle'], ";\n          border-color: ").concat(semantic$7.color.border.warning, ";\n          color: ").concat(semantic$7.color.text.warning, ";\n        ");
-    case 'success':
-      return "\n          background-color: ".concat(semantic$7.color.background['success-subtle'], ";\n          border-color: ").concat(semantic$7.color.border.success, ";\n          color: ").concat(semantic$7.color.text.success, ";\n        ");
-    case 'info':
-    default:
-      return "\n          background-color: ".concat(semantic$7.color.background['interactive-subtle'], ";\n          border-color: ").concat(semantic$7.color.border.interactive, ";\n          color: ").concat(semantic$7.color.text.interactive, ";\n        ");
-  }
-}, semantic$7.breakpoint.md, function (_a) {
-  var $inline = _a.$inline;
-  return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
+  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.lg;
 }, function (_a) {
   var $isExiting = _a.$isExiting,
     $reducedExit = _a.$reducedExit;
-  return $isExiting && css(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
+  return $isExiting && css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
 });
 var StyledIconContainer = styled.div.withConfig({
   displayName: "Alert__StyledIconContainer",
@@ -3795,47 +3931,81 @@ var StyledIconContainer = styled.div.withConfig({
 var StyledContent$1 = styled.div.withConfig({
   displayName: "Alert__StyledContent",
   componentId: "sc-18tq5d-2"
-})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$7.spacing.layout.xs);
+})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$9.spacing.layout.xs);
 var StyledTitle = styled.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
 })(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"], ["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"])), alert.title.typography, alert.title.fontWeight, alert.title.lineHeight);
-var StyledMessage = styled.span.withConfig({
+var StyledMessage$1 = styled.span.withConfig({
   displayName: "Alert__StyledMessage",
   componentId: "sc-18tq5d-4"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  font: ", ";\n  line-height: ", ";\n"], ["\n  font: ", ";\n  line-height: ", ";\n"])), alert.message.typography, alert.message.lineHeight);
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  font: ", ";\n  line-height: ", ";\n"], ["\n  font: ", ";\n  line-height: ", ";\n"
+// The action follows the content, left-aligned with it, so it's read after the message
+// (#122). With the content's xs gap, the space above it is md: a separate step.
+])), alert.message.typography, alert.message.lineHeight);
+// The action follows the content, left-aligned with it, so it's read after the message
+// (#122). With the content's xs gap, the space above it is md: a separate step.
 var StyledActions = styled.div.withConfig({
   displayName: "Alert__StyledActions",
   componentId: "sc-18tq5d-5"
-})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$7.spacing.layout.sm);
+})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: ", ";\n  margin-top: calc(", " - ", ");\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: ", ";\n  margin-top: calc(", " - ", ");\n"
+// The dismiss button's centre lines up with the first line of content: the title, or the
+// message when there's no title (decision 0019). The slot is as tall as that line and the
+// button is centred in it, overflowing evenly into the padding, so it stays aligned at every
+// padding and line height. Being in the row, it also keeps text and actions from running under it.
+])), semantic$9.spacing.layout.sm, semantic$9.spacing.layout.md, semantic$9.spacing.layout.xs);
+// The dismiss button's centre lines up with the first line of content: the title, or the
+// message when there's no title (decision 0019). The slot is as tall as that line and the
+// button is centred in it, overflowing evenly into the padding, so it stays aligned at every
+// padding and line height. Being in the row, it also keeps text and actions from running under it.
+var StyledDismissSlot = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Alert__StyledDismissSlot",
+  componentId: "sc-18tq5d-6"
+})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: ", ";\n"
+// The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
+// alert's padding is too small for that, so its button stays inside the padding.
+])), function (_a) {
+  var $lineHeight = _a.$lineHeight;
+  return $lineHeight;
+});
+// The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
+// alert's padding is too small for that, so its button stays inside the padding.
 var StyledDismissButton = styled(IconButton).withConfig({
   displayName: "Alert__StyledDismissButton",
-  componentId: "sc-18tq5d-6"
-})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: ", ";\n\ttop: ", ";\n"], ["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: ", ";\n\ttop: ", ";\n"])), semantic$7.spacing.layout.xs, semantic$7.spacing.layout.sm, semantic$7.spacing.layout.sm);
+  componentId: "sc-18tq5d-7"
+})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+  var $inline = _a.$inline;
+  return $inline ? 0 : "calc((".concat(tokensJson.component.iconButton.sizes.small.minWidth, " - ").concat(semantic$9.size.icon.sm, ") / -2)");
+});
 var Alert = function Alert(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'info' : _b,
+    _c = _a.appearance,
+    appearance = _c === void 0 ? 'outlined' : _c,
     children = _a.children,
     title = _a.title,
-    _c = _a.dismissible,
-    dismissible = _c === void 0 ? false : _c,
+    _d = _a.dismissible,
+    dismissible = _d === void 0 ? false : _d,
     onDismiss = _a.onDismiss,
     action = _a.action,
-    _d = _a.inline,
-    inline = _d === void 0 ? false : _d,
-    _e = _a.ariaLive,
-    ariaLive = _e === void 0 ? 'polite' : _e,
+    _e = _a.inline,
+    inline = _e === void 0 ? false : _e,
+    _f = _a.ariaLive,
+    ariaLive = _f === void 0 ? 'polite' : _f,
     dataTestId = _a["data-testid"],
-    props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
-  var _f = React.useState('visible'),
-    phase = _f[0],
-    setPhase = _f[1];
-  var _g = React.useState(false),
-    reducedExit = _g[0],
-    setReducedExit = _g[1];
-  var _h = React.useState(),
-    exitStyle = _h[0],
-    setExitStyle = _h[1];
+    props = __rest(_a, ["variant", "appearance", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
+  var _g = React.useState('visible'),
+    phase = _g[0],
+    setPhase = _g[1];
+  var _h = React.useState(false),
+    reducedExit = _h[0],
+    setReducedExit = _h[1];
+  var _j = React.useState(),
+    exitStyle = _j[0],
+    setExitStyle = _j[1];
   var alertRef = React.useRef(null);
   // While it exits, its controls leave the tab order and can't be activated
   useInert(alertRef, phase === 'exiting');
@@ -3892,7 +4062,7 @@ var Alert = function Alert(_a) {
     }
   };
   // Get the icon for the current variant
-  var iconName = variantIcons[variant];
+  var iconName = variantIcons$1[variant];
   var alertIconColor = variantIconColors[variant];
   var alertTitleColor = variantTitleColors[variant];
   // Determine ARIA role based on variant and aria-live
@@ -3901,6 +4071,7 @@ var Alert = function Alert(_a) {
     role: role,
     "aria-live": ariaLive,
     "$variant": variant,
+    "$appearance": appearance,
     "$inline": inline,
     "$isExiting": isExiting,
     "$reducedExit": reducedExit,
@@ -3923,29 +4094,163 @@ var Alert = function Alert(_a) {
         "aria-level": 6,
         color: alertTitleColor,
         children: title
-      }), jsx(StyledMessage, {
+      }), jsx(StyledMessage$1, {
         children: children
+      }), action && jsx(StyledActions, {
+        children: action
       })]
-    }), (action || dismissible) && jsxs(StyledActions, {
-      children: [action, dismissible && jsx(StyledDismissButton, {
+    }), dismissible && jsx(StyledDismissSlot, {
+      "$lineHeight": title ? alert.title.lineHeight : alert.message.lineHeight,
+      children: jsx(StyledDismissButton, {
         iconName: "close",
         size: "small",
         variant: "naked",
+        "$inline": inline,
         onClick: handleDismiss,
         "aria-label": "Dismiss alert",
         "data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined
-      })]
+      })
     })]
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2;
+var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$e, templateObject_5$b, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2;
+
+var semantic$8 = tokensJson.semantic;
+var color$3 = semantic$8.color,
+  typography = semantic$8.typography,
+  spacing$3 = semantic$8.spacing,
+  size = semantic$8.size;
+var variantIcons = {
+  error: 'crossCircle',
+  warning: 'bell',
+  info: 'info',
+  success: 'checkRing'
+};
+var variantTextColors = {
+  error: color$3.text.error,
+  warning: color$3.text.warning,
+  info: color$3.text.interactive,
+  success: color$3.text.success
+};
+var sizeConfig = {
+  small: {
+    font: typography.caption,
+    gap: spacing$3.layout.xs,
+    icon: 'xs'
+  },
+  medium: {
+    font: typography.small,
+    gap: spacing$3.layout.sm,
+    icon: 'sm'
+  }
+};
+var StyledInlineAlert = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "InlineAlert__StyledInlineAlert",
+  componentId: "sc-eervmb-0"
+})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n"
+// One line of the message's font tall, so the icon centres on the first line at any size:
+// the zero-width space gives the box the font's line height without a fixed value
+])), function (_a) {
+  var $size = _a.$size,
+    $empty = _a.$empty;
+  return $empty ? '0' : size.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].gap;
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].font;
+}, function (_a) {
+  var $variant = _a.$variant;
+  return variantTextColors[$variant];
+});
+// One line of the message's font tall, so the icon centres on the first line at any size:
+// the zero-width space gives the box the font's line height without a fixed value
+var StyledIconLine = styled.span.withConfig({
+  displayName: "InlineAlert__StyledIconLine",
+  componentId: "sc-eervmb-1"
+})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\200B';\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\\\200B';\n  }\n"])));
+var StyledMessage = styled.span.withConfig({
+  displayName: "InlineAlert__StyledMessage",
+  componentId: "sc-eervmb-2"
+})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  min-width: 0;\n"], ["\n  min-width: 0;\n"
+/**
+ * InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
+ * below a field or in a table cell (decision 0019). A severity icon and text in the severity
+ * colour, with no background or border. For a title, an action or a dismiss button, use Alert.
+ *
+ * @example
+ * ```tsx
+ * <InlineAlert variant="success">Saved</InlineAlert>
+ *
+ * // Field feedback: the control references the message with aria-describedby
+ * <input id="email" aria-describedby="email-error" aria-invalid="true" />
+ * <InlineAlert id="email-error" variant="error" size="small">Enter a valid email address</InlineAlert>
+ * ```
+ */])));
+/**
+ * InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
+ * below a field or in a table cell (decision 0019). A severity icon and text in the severity
+ * colour, with no background or border. For a title, an action or a dismiss button, use Alert.
+ *
+ * @example
+ * ```tsx
+ * <InlineAlert variant="success">Saved</InlineAlert>
+ *
+ * // Field feedback: the control references the message with aria-describedby
+ * <input id="email" aria-describedby="email-error" aria-invalid="true" />
+ * <InlineAlert id="email-error" variant="error" size="small">Enter a valid email address</InlineAlert>
+ * ```
+ */
+var InlineAlert = function InlineAlert(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'info' : _b,
+    _c = _a.size,
+    alertSize = _c === void 0 ? 'medium' : _c,
+    children = _a.children,
+    _d = _a.ariaLive,
+    ariaLive = _d === void 0 ? 'polite' : _d,
+    id = _a.id,
+    dataTestId = _a["data-testid"];
+  // A live region is announced reliably only when it exists before its content changes, so with
+  // no message it stays mounted as an empty region, with no icon and no minimum height
+  var hasMessage = children !== undefined && children !== null && children !== false && children !== '';
+  return jsx(StyledInlineAlert
+  // Same roles as Alert; ariaLive sets how urgently changes are announced
+  , {
+    // Same roles as Alert; ariaLive sets how urgently changes are announced
+    role: variant === 'error' ? 'alert' : 'status',
+    "aria-live": ariaLive,
+    id: id,
+    "data-testid": dataTestId,
+    "$variant": variant,
+    "$size": alertSize,
+    "$empty": !hasMessage,
+    children: hasMessage && jsxs(Fragment, {
+      children: [jsx(StyledIconLine, {
+        "aria-hidden": "true",
+        children: jsx(Icon, {
+          name: variantIcons[variant],
+          size: sizeConfig[alertSize].icon,
+          iconColor: "inherit"
+        })
+      }), jsx(StyledMessage, {
+        children: children
+      })]
+    })
+  });
+};
+InlineAlert.displayName = 'InlineAlert';
+var templateObject_1$o, templateObject_2$j, templateObject_3$h;
 
-var _a$3, _b$1;
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensJson.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), tokensJson.semantic.border["default"]);
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
@@ -4013,7 +4318,8 @@ var CardSmall = function CardSmall(_a) {
     subtitle = _a.subtitle,
     meta = _a.meta,
     href = _a.href,
-    LinkComponent = _a.linkComponent;
+    LinkComponent = _a.linkComponent,
+    dataTestId = _a["data-testid"];
   if (!picture || !meta) {
     return null;
   }
@@ -4047,6 +4353,7 @@ var CardSmall = function CardSmall(_a) {
     })]
   });
   return jsx(CardSmallStyled, {
+    "data-testid": dataTestId,
     children: LinkComponent && href ? jsx(LinkComponent, {
       href: href,
       "aria-label": title,
@@ -4073,8 +4380,10 @@ var CardLarge = function CardLarge(_a) {
     labels = _b === void 0 ? [] : _b,
     picture = _a.picture,
     onImageClick = _a.onImageClick,
-    imageHref = _a.imageHref;
+    imageHref = _a.imageHref,
+    dataTestId = _a["data-testid"];
   return jsx(CardLargeStyled, {
+    "data-testid": dataTestId,
     children: jsxs(Stack, {
       direction: "column",
       gap: "md",
@@ -4160,7 +4469,7 @@ var StyledCheckbox = styled.span.withConfig({
   return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
 }, tokensJson.semantic.motion.duration.fast, tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
   return props.$state === 'error' ? tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensJson.semantic.border.strong : tokensJson.component.input.hover.borderColor;
-}, HiddenCheckboxInput, tokensJson.component.input.focus.outline, tokensJson.component.input.focus.outlineOffset, function (props) {
+}, HiddenCheckboxInput, tokensJson.component.input.focus.outline, tokensJson.semantic.border.focusOffset, function (props) {
   return props.$state === 'error' ? tokensJson.component.input.error.focus.borderColor : tokensJson.component.input.focus.borderColor;
 }, function (props) {
   return props.$state === 'disabled' && "\n    background-color: ".concat(tokensJson.component.input.disabled.backgroundColor, ";\n    border-color: ").concat(tokensJson.component.input.disabled.borderColor, ";\n  ");
@@ -4448,6 +4757,37 @@ var CopyButton = function CopyButton(_a) {
     })
   });
 };
+var LiveRegion = styled.span.withConfig({
+  displayName: "CodeBlock__LiveRegion",
+  componentId: "sc-1p1t0kp-4"
+})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+/**
+ * CodeBlock component for displaying formatted code with optional copy functionality
+ * and expandable content for long code blocks.
+ *
+ * @param children - The code content to display
+ * @param showCopyButton - Whether to show the copy button (default: true)
+ * @param onCopy - Optional callback when code is copied
+ * @param maxHeight - Maximum height in pixels before enabling expand/collapse
+ * @param defaultExpanded - Initial expanded state when maxHeight is set
+ * @param data-testid - Test identifier for the code block
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeBlock>const x = 1;</CodeBlock>
+ *
+ * // With max height and expand/collapse
+ * <CodeBlock maxHeight={200}>
+ *   {longCodeString}
+ * </CodeBlock>
+ *
+ * // Start expanded
+ * <CodeBlock maxHeight={200} defaultExpanded>
+ *   {longCodeString}
+ * </CodeBlock>
+ * ```
+ */])), visuallyHidden);
 /**
  * CodeBlock component for displaying formatted code with optional copy functionality
  * and expandable content for long code blocks.
@@ -4490,6 +4830,9 @@ var CodeBlock = function CodeBlock(_a) {
   var _e = useState(false),
     needsExpansion = _e[0],
     setNeedsExpansion = _e[1];
+  var _f = useState(''),
+    announcement = _f[0],
+    setAnnouncement = _f[1];
   var contentRef = useRef(null);
   // Check if content exceeds maxHeight
   useEffect(function () {
@@ -4503,17 +4846,7 @@ var CodeBlock = function CodeBlock(_a) {
       return !prev;
     });
     // Announce state change to screen readers
-    var announcement = isExpanded ? 'Code block collapsed' : 'Code block expanded';
-    var announcer = document.createElement('div');
-    announcer.setAttribute('aria-live', 'polite');
-    announcer.setAttribute('aria-atomic', 'true');
-    announcer.setAttribute('class', 'sr-only');
-    announcer.style.cssText = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;';
-    announcer.textContent = announcement;
-    document.body.appendChild(announcer);
-    setTimeout(function () {
-      document.body.removeChild(announcer);
-    }, 1000);
+    setAnnouncement(isExpanded ? 'Code block collapsed' : 'Code block expanded');
   };
   var showExpandButton = maxHeight && needsExpansion;
   return jsxs(CodeBlockWrapper, {
@@ -4538,13 +4871,17 @@ var CodeBlock = function CodeBlock(_a) {
         "data-testid": "expand-button",
         children: isExpanded ? 'Show less' : 'Show more'
       })
+    }), showExpandButton && jsx(LiveRegion, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: announcement
     }), showCopyButton && jsx(CopyButton, {
       text: children,
       onCopy: onCopy
     })]
   });
 };
-var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c;
+var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c, templateObject_5$a;
 
 var StyledHeader$1 = styled.div.withConfig({
   displayName: "DateGroup__StyledHeader",
@@ -4638,7 +4975,7 @@ var DateGroup = function DateGroup(_a) {
 };
 var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
 
-var semantic$6 = tokensJson.semantic;
+var semantic$7 = tokensJson.semantic;
 var StyledContainer$1 = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -4647,7 +4984,7 @@ var StyledContainer$1 = styled.div.withConfig({
   componentId: "sc-1u5hxh-0"
 })(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"])), tokensJson.component.emptyState.maxWidth, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? semantic$6.spacing.layout['4xl'] : $size === 'large' ? semantic$6.spacing.layout['8xl'] : semantic$6.spacing.layout['6xl'];
+  return $size === 'small' ? semantic$7.spacing.layout['4xl'] : $size === 'large' ? semantic$7.spacing.layout['8xl'] : semantic$7.spacing.layout['6xl'];
 });
 var StyledIllustration = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -4661,16 +4998,16 @@ var StyledIllustration = styled.div.withConfig({
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? tokensJson.component.emptyState.illustration.small : $size === 'large' ? tokensJson.component.emptyState.illustration.large : tokensJson.component.emptyState.illustration.medium;
-}, semantic$6.spacing.layout['2xl'], function (_a) {
+}, semantic$7.spacing.layout['2xl'], function (_a) {
   var $variant = _a.$variant;
-  return $variant === 'error' ? semantic$6.color.icon.error : $variant === 'success' ? semantic$6.color.icon.success : semantic$6.color.icon.subdued;
+  return $variant === 'error' ? semantic$7.color.icon.error : $variant === 'success' ? semantic$7.color.icon.success : semantic$7.color.icon.subdued;
 });
 var StyledTextContainer = styled.div.withConfig({
   displayName: "EmptyState__StyledTextContainer",
   componentId: "sc-1u5hxh-2"
 })(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  max-width: ", ";\n  margin-bottom: ", ";\n"], ["\n  max-width: ", ";\n  margin-bottom: ", ";\n"
 // Map illustration type to icon name
-])), tokensJson.component.emptyState.text.maxWidth, semantic$6.spacing.layout['2xl']);
+])), tokensJson.component.emptyState.text.maxWidth, semantic$7.spacing.layout['2xl']);
 // Map illustration type to icon name
 var illustrationToIcon = {
   search: 'search',
@@ -4725,7 +5062,7 @@ var EmptyState = function EmptyState(_a) {
         children: title
       }), jsx("div", {
         style: {
-          marginTop: semantic$6.spacing.layout.md
+          marginTop: semantic$7.spacing.layout.md
         },
         children: jsx(Typography, {
           variant: "body",
@@ -4790,9 +5127,11 @@ var FeatureBlock = function FeatureBlock(_a) {
     onReadMore = _a.onReadMore,
     readMoreHref = _a.readMoreHref,
     _c = _a.readMoreText,
-    readMoreText = _c === void 0 ? "Read more" : _c;
+    readMoreText = _c === void 0 ? "Read more" : _c,
+    dataTestId = _a["data-testid"];
   return jsxs(Fragment, {
     children: [jsxs(FeatureBlockStyled, {
+      "data-testid": dataTestId,
       children: [jsx(ImageWrapper, {
         children: jsx(Picture, {
           title: title,
@@ -4848,6 +5187,9 @@ var _a = tokensJson.semantic,
   _b = tokensJson.component,
   input$1 = _b.input,
   field$3 = _b.field;
+// Spacing comes from the semantic scales: no component spacing tokens (decision 0022).
+// The 11px vertical padding is off-grid and keeps its deprecated token until #129.
+var controlPaddingX = tokensJson.semantic.spacing.component.lg;
 var duration = motion$1.duration,
   easing = motion$1.easing;
 var DropdownContainer = styled.div.withConfig({
@@ -4860,7 +5202,7 @@ var DropdownTrigger = styled.button.withConfig({
   },
   displayName: "Dropdown__DropdownTrigger",
   componentId: "sc-kz07c4-1"
-})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, controlPaddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
 }, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.normal, easing.easeInOut, duration.normal, easing.easeInOut, function (_a) {
@@ -4869,7 +5211,7 @@ var DropdownTrigger = styled.button.withConfig({
 }, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor;
-}, input$1.focus.outline, input$1.focus.outlineOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, input$1.disabled.cursor, function (_a) {
+}, input$1.focus.outline, border$1.focusOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, function (_a) {
   var $isOpen = _a.$isOpen,
     $hasError = _a.$hasError;
   return $isOpen && "\n    border-color: ".concat($hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor, ";\n  ");
@@ -4890,7 +5232,7 @@ var DropdownMenu = styled.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  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all ", " ", ";\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  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), zIndex.dropdown, input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, elevation$1.floating, spacing.xs, 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: all ", " ", ";\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: all ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), zIndex.dropdown, input$1["default"].backgroundColor, border$1.subtle, input$1["default"].borderRadius, elevation$1.floating, spacing.xs, function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -4906,7 +5248,7 @@ var DropdownOption = styled.button.withConfig({
   },
   displayName: "Dropdown__DropdownOption",
   componentId: "sc-kz07c4-4"
-})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
+})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, controlPaddingX, function (_a) {
   var $isSelected = _a.$isSelected,
     $isFocused = _a.$isFocused;
   if ($isFocused) return color$1.background.surface;
@@ -4919,7 +5261,7 @@ var StyledHelperText$3 = styled.div.withConfig({
 })(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), field$3.helperText.typography, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? field$3.helperText.colorError : field$3.helperText.color;
-}, field$3.gap);
+}, spacing.sm);
 var Dropdown = function Dropdown(_a) {
   var options = _a.options,
     value = _a.value,
@@ -4931,7 +5273,8 @@ var Dropdown = function Dropdown(_a) {
     className = _a.className,
     label = _a.label,
     helperText = _a.helperText,
-    error = _a.error;
+    error = _a.error,
+    dataTestId = _a["data-testid"];
   var _d = useState(false),
     isOpen = _d[0],
     setIsOpen = _d[1];
@@ -5036,11 +5379,12 @@ var Dropdown = function Dropdown(_a) {
   return jsxs(DropdownContainer, {
     ref: dropdownRef,
     className: className,
+    "data-testid": dataTestId,
     children: [label && jsx("label", {
       htmlFor: dropdownId,
       style: {
         display: 'block',
-        marginBottom: field$3.gap
+        marginBottom: spacing.sm
       },
       children: jsx(Typography, {
         variant: "label",
@@ -5095,7 +5439,7 @@ var Dropdown = function Dropdown(_a) {
 };
 var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
 
-var semantic$5 = tokensJson.semantic;
+var semantic$6 = tokensJson.semantic;
 var StyledList = styled.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -5104,7 +5448,7 @@ var StyledList = styled.ul.withConfig({
   componentId: "sc-1irksg5-0"
 })(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
   var $dividers = _a.$dividers;
-  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: ".concat(semantic$5.border.width.thin, " solid ").concat(semantic$5.color.border["default"], ";\n    }\n  ");
+  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: ".concat(semantic$6.border.width.thin, " solid ").concat(semantic$6.color.border["default"], ";\n    }\n  ");
 });
 var List = function List(_a) {
   var children = _a.children,
@@ -5128,12 +5472,12 @@ var List = function List(_a) {
 List.displayName = 'List';
 var templateObject_1$c;
 
-var semantic$4 = tokensJson.semantic;
-var layout = semantic$4.spacing.layout,
-  color = semantic$4.color,
-  border = semantic$4.border,
-  elevation = semantic$4.elevation,
-  motion = semantic$4.motion;
+var semantic$5 = tokensJson.semantic;
+var layout = semantic$5.spacing.layout,
+  color = semantic$5.color,
+  border = semantic$5.border,
+  elevation = semantic$5.elevation,
+  motion = semantic$5.motion;
 // ---------------------------------------------------------------------------
 // Size map
 // ---------------------------------------------------------------------------
@@ -5157,7 +5501,7 @@ var scaleIn = keyframes(templateObject_2$a || (templateObject_2$a = __makeTempla
 var StyledOverlay$1 = styled.div.withConfig({
   displayName: "Modal__StyledOverlay",
   componentId: "sc-1d3g5gh-0"
-})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), color.background.overlay, semantic$4.zIndex.modal, css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
+})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), color.background.overlay, semantic$5.zIndex.modal, css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }));
@@ -5167,7 +5511,7 @@ var StyledDialog = styled.div.withConfig({
   },
   displayName: "Modal__StyledDialog",
   componentId: "sc-1d3g5gh-1"
-})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), semantic$4.zIndex.modal, function (_a) {
+})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), semantic$5.zIndex.modal, function (_a) {
   var $width = _a.$width;
   return $width;
 }, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.normal, motion.easing.easeOut, function (_a) {
@@ -5176,7 +5520,7 @@ var StyledDialog = styled.div.withConfig({
 }), reducedMotion, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
-}, semantic$4.breakpoint.md, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
+}, semantic$5.breakpoint.md, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
@@ -5187,7 +5531,7 @@ var StyledHeader = styled.div.withConfig({
 var StyledBody = styled.div.withConfig({
   displayName: "Modal__StyledBody",
   componentId: "sc-1d3g5gh-3"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), layout.md, layout.lg, semantic$4.spacing.layout.sm, color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
+})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), layout.md, layout.lg, semantic$5.spacing.layout.sm, color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
 var StyledFooter = styled.div.withConfig({
   displayName: "Modal__StyledFooter",
   componentId: "sc-1d3g5gh-4"
@@ -5371,20 +5715,21 @@ var Modal = function Modal(_a) {
 Modal.displayName = 'Modal';
 var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
 
-var input = tokensJson.component.input;
+var input = tokensJson.component.input,
+  semantic$4 = tokensJson.semantic;
 var StyledInputBase = styled.input.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "InputBase__StyledInputBase",
   componentId: "sc-1bpf4e8-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"
+})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"
 /**
  * Base styled textarea with shared styling
  */])), input["default"].font, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? input.disabled.textColor : input["default"].textColor;
-}, input["default"].paddingY, input["default"].paddingX, function (_a) {
+}, input["default"].paddingY, semantic$4.spacing.component.lg, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? input.disabled.backgroundColor : input["default"].backgroundColor;
 }, input["default"].borderWidth, function (_a) {
@@ -5396,10 +5741,10 @@ var StyledInputBase = styled.input.withConfig({
 }, input["default"].borderRadius, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut, input.placeholder.textColor, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
-}, input.focus.outline, input.focus.outlineOffset, function (_a) {
+}, input.focus.outline, semantic$4.border.focusOffset, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
-}, input.disabled.cursor);
+});
 /**
  * Base styled textarea with shared styling
  */
@@ -5413,14 +5758,16 @@ var StyledTextAreaBase = styled.textarea.withConfig({
 var templateObject_1$a, templateObject_2$9;
 
 var field$2 = tokensJson.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var gap$2 = tokensJson.semantic.spacing.layout;
 var StyledFieldContainer$2 = styled.div.withConfig({
   displayName: "NumberInput__StyledFieldContainer",
   componentId: "sc-qotc3w-0"
-})(templateObject_1$9 || (templateObject_1$9 = __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"])), field$2.gap);
+})(templateObject_1$9 || (templateObject_1$9 = __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"])), gap$2.sm);
 var StyledLabel$3 = styled.label.withConfig({
   displayName: "NumberInput__StyledLabel",
   componentId: "sc-qotc3w-1"
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), field$2.label.gap, field$2.label.typography, field$2.label.color, field$2.label.colorDisabled);
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), gap$2.xs, field$2.label.typography, field$2.label.color, field$2.label.colorDisabled);
 var StyledRequiredIndicator$2 = styled.span.withConfig({
   displayName: "NumberInput__StyledRequiredIndicator",
   componentId: "sc-qotc3w-2"
@@ -5672,10 +6019,36 @@ var PageTitleStyled = styled.div.withConfig({
   },
   displayName: "PageTitle__PageTitleStyled",
   componentId: "sc-16h256f-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokensJson.semantic.spacing.layout['2xl'], function (_a) {
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */])), tokensJson.semantic.spacing.layout['2xl'], function (_a) {
   var $hasBackButton = _a.$hasBackButton;
   return $hasBackButton ? tokensJson.semantic.spacing.layout.none : tokensJson.semantic.spacing.layout['7xl'];
 });
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */
 var PageTitle = function PageTitle(_a) {
   var title = _a.title,
     _b = _a.hasBackButton,
@@ -5706,14 +6079,16 @@ var PageTitle = function PageTitle(_a) {
 var templateObject_1$8;
 
 var field$1 = tokensJson.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var gap$1 = tokensJson.semantic.spacing.layout;
 var StyledFieldContainer$1 = styled.div.withConfig({
   displayName: "PasswordField__StyledFieldContainer",
   componentId: "sc-1p15zk0-0"
-})(templateObject_1$7 || (templateObject_1$7 = __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"])), field$1.gap);
+})(templateObject_1$7 || (templateObject_1$7 = __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"])), gap$1.sm);
 var StyledLabel$2 = styled.label.withConfig({
   displayName: "PasswordField__StyledLabel",
   componentId: "sc-1p15zk0-1"
-})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), field$1.label.gap, field$1.label.typography, field$1.label.color, field$1.label.colorDisabled);
+})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), gap$1.xs, field$1.label.typography, field$1.label.color, field$1.label.colorDisabled);
 var StyledRequiredIndicator$1 = styled.span.withConfig({
   displayName: "PasswordField__StyledRequiredIndicator",
   componentId: "sc-1p15zk0-2"
@@ -5847,14 +6222,14 @@ var StyledInputWrapper = styled.div.withConfig({
   displayName: "SearchField__StyledInputWrapper",
   componentId: "sc-qhz9i8-1"
 })(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic$3.spacing.layout.sm, semantic$3.spacing.layout.sm, semantic$3.spacing.layout.md, component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic$3.motion.duration.normal, semantic$3.motion.easing.easeInOut, semantic$3.motion.duration.normal, semantic$3.motion.easing.easeInOut, function (props) {
-  return props.$isFocused && "\n    border-color: ".concat(component.input.focus.borderColor, ";\n    outline: ").concat(component.input.focus.outline, ";\n    outline-offset: ").concat(component.input.focus.outlineOffset, ";\n  ");
+  return props.$isFocused && "\n    border-color: ".concat(component.input.focus.borderColor, ";\n    outline: ").concat(component.input.focus.outline, ";\n    outline-offset: ").concat(semantic$3.border.focusOffset, ";\n  ");
 }, function (props) {
   return props.$disabled && "\n    background-color: ".concat(component.input.disabled.backgroundColor, ";\n    border-color: ").concat(component.input.disabled.borderColor, ";\n    cursor: not-allowed;\n  ");
 }, component.input.hover.borderColor);
 var StyledInput = styled.input.withConfig({
   displayName: "SearchField__StyledInput",
   componentId: "sc-qhz9i8-2"
-})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$3.typography.body, semantic$3.color.text["default"], semantic$3.color.text.subdued, semantic$3.color.text.disabled);
+})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  flex: 1;\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  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$3.typography.body, semantic$3.color.text["default"], component.input.placeholder.textColor, semantic$3.color.text.disabled);
 var StyledSuggestionsList = styled.ul.withConfig({
   displayName: "SearchField__StyledSuggestionsList",
   componentId: "sc-qhz9i8-3"
@@ -6417,7 +6792,7 @@ var StyledTrack = styled.div.withConfig({
   componentId: "sc-6mh2d4-3"
 })(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n"])), semantic$1.spacing.layout.xs, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$1.color.background.disabled : semantic$1.color.border["default"];
+  return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.progressTrack;
 }, semantic$1.border.radius.circle, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
@@ -6427,7 +6802,7 @@ var StyledTrackFill = styled.div.withConfig({
   componentId: "sc-6mh2d4-4"
 })(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n"], ["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n"])), function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
+  return $disabled ? semantic$1.color.icon.disabled : semantic$1.color.background.emphasis;
 }, semantic$1.border.radius.circle);
 var StyledThumb = styled.div.withConfig({
   displayName: "Slider__StyledThumb",
@@ -6437,7 +6812,7 @@ var StyledThumb = styled.div.withConfig({
   return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
 }, semantic$1.border.width.thick, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
+  return $disabled ? semantic$1.color.icon.disabled : semantic$1.color.background.emphasis;
 }, semantic$1.border.radius.circle, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? 'not-allowed' : 'grab';
@@ -6803,47 +7178,42 @@ var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4
 
 var semantic = tokensJson.semantic;
 var StyledTabList = styled.div.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
   displayName: "TabBar__StyledTabList",
   componentId: "sc-1g9ib0y-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  border-bottom: ", ";\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  gap: ", ";\n  border-bottom: ", ";\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"])), function (props) {
-  return props.$variant === 'pills' ? semantic.spacing.layout.sm : '0';
-}, function (props) {
-  return props.$variant === 'underline' ? "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border.subtle) : 'none';
-}, tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.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.subtle, tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
 var StyledTab = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "TabBar__StyledTab",
   componentId: "sc-1g9ib0y-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Variant-specific styles */\n  ", "\n  \n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Active/pressed state */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Variant-specific styles */\n  ", "\n  \n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Active/pressed state */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Pressed nudge */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Pressed nudge */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
+}, semantic.motion.hover, semantic.border.radius.sm, semantic.border.radius.sm, function (props) {
+  return props.$isActive ? semantic.color.background['interactive-subtle'] : 'transparent';
+}, function (props) {
+  return props.$isActive ? semantic.color.text.interactive : semantic.color.text.subdued;
+}, semantic.border.width.thick, function (props) {
+  return props.$isActive ? semantic.color.background.interactive : 'transparent';
 }, semantic.motion.hover, function (props) {
-  if (props.$variant === 'pills') {
-    return "\n        border-radius: ".concat(semantic.border.radius.circle, ";\n        background-color: ").concat(props.$isActive ? semantic.color.background.interactive : semantic.color.background.subtle, ";\n        color: ").concat(props.$isActive ? semantic.color.text.inverse : semantic.color.text["default"], ";\n        \n        &:hover:not(:disabled) {\n          background-color: ").concat(props.$isActive ? semantic.color.background['interactive-hover'] : semantic.color.background.surface, ";\n        }\n      ");
-  }
-  if (props.$variant === 'underline') {
-    return "\n        color: ".concat(props.$isActive ? semantic.color.text.interactive : semantic.color.text.subdued, ";\n        \n        &::after {\n          content: '';\n          position: absolute;\n          bottom: -1px;\n          left: 0;\n          right: 0;\n          height: ").concat(semantic.border.width.thick, ";\n          background-color: ").concat(props.$isActive ? semantic.color.background.interactive : 'transparent', ";\n          transition: ").concat(semantic.motion.hover, ";\n        }\n        \n        &:hover:not(:disabled) {\n          color: ").concat(semantic.color.text.interactive, ";\n        }\n      ");
-  }
-  // default variant
-  return "\n      border-radius: ".concat(semantic.border.radius.sm, " ").concat(semantic.border.radius.sm, " 0 0;\n      background-color: ").concat(props.$isActive ? semantic.color.background.subtle : semantic.color.background["default"], ";\n      color: ").concat(props.$isActive ? semantic.color.text["default"] : semantic.color.text.subdued, ";\n      border: ").concat(semantic.border.width.thin, " solid ").concat(semantic.color.border["default"], ";\n      border-bottom: ").concat(props.$isActive ? 'none' : "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border["default"]), ";\n      margin-bottom: ").concat(props.$isActive ? '-1px' : '0', ";\n      \n      &:hover:not(:disabled) {\n        background-color: ").concat(semantic.color.background.surface, ";\n        color: ").concat(semantic.color.text["default"], ";\n      }\n    ");
+  return props.$isActive ? semantic.color.background['interactive-subtle-hover'] : 'transparent';
+}, function (props) {
+  return props.$isActive ? semantic.color.text['interactive-hover'] : semantic.color.text["default"];
+}, function (props) {
+  return props.$isActive ? semantic.color.background['interactive-subtle-active'] : 'transparent';
+}, function (props) {
+  return props.$isActive ? semantic.color.text['interactive-active'] : semantic.color.text["default"];
 }, function (props) {
   return props.$disabled ? '0.5' : '1';
 }, semantic.border.width.thick, semantic.color.border.strong, semantic.spacing.layout.xs);
 var StyledBadge = styled.span.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
   displayName: "TabBar__StyledBadge",
   componentId: "sc-1g9ib0y-2"
 })(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"
 /**
  * TabBar component for tabbed navigation
  *
- * Provides accessible tab navigation with 3 visual variants, keyboard support,
+ * Provides accessible tab navigation with an underline style, keyboard support,
  * and optional badge counts. Follows ARIA tablist pattern.
  *
  * @example
@@ -6858,21 +7228,13 @@ var StyledBadge = styled.span.withConfig({
  *   ]}
  *   activeTab={activeTab}
  *   onTabChange={setActiveTab}
- *   variant="pills"
  * />
  * ```
- */])), tokensJson.component.tabBar.badge.size, tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, tokensJson.component.tabBar.badge.typography, tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle, function (props) {
-  if (props.$variant === 'pills') {
-    return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic.color.background.interactive;
-  }
-  return semantic.color.background.interactive;
-}, function (props) {
-  return props.$variant === 'pills' && props.$isActive ? semantic.color.text.inverse : semantic.color.text.inverse;
-});
+ */])), tokensJson.component.tabBar.badge.size, tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, tokensJson.component.tabBar.badge.typography, tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle, semantic.color.background.interactive, semantic.color.text.inverse);
 /**
  * TabBar component for tabbed navigation
  *
- * Provides accessible tab navigation with 3 visual variants, keyboard support,
+ * Provides accessible tab navigation with an underline style, keyboard support,
  * and optional badge counts. Follows ARIA tablist pattern.
  *
  * @example
@@ -6887,27 +7249,26 @@ var StyledBadge = styled.span.withConfig({
  *   ]}
  *   activeTab={activeTab}
  *   onTabChange={setActiveTab}
- *   variant="pills"
  * />
  * ```
  */
 var TabBar = function TabBar(_a) {
   var tabs = _a.tabs,
     activeTab = _a.activeTab,
-    onTabChange = _a.onTabChange,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'default' : _b,
-    _c = _a["aria-label"],
-    ariaLabel = _c === void 0 ? 'Tab navigation' : _c,
+    onTabChange = _a.onTabChange;
+    // Deprecated: every variant renders as underline (decision 0020)
+    _a.variant;
+    var _b = _a["aria-label"],
+    ariaLabel = _b === void 0 ? 'Tab navigation' : _b,
     dataTestId = _a["data-testid"];
   var tabRefs = useRef([]);
-  var _d = useState(function () {
+  var _c = useState(function () {
       return tabs.findIndex(function (tab) {
         return tab.id === activeTab;
       });
     }),
-    focusedIndex = _d[0],
-    setFocusedIndex = _d[1];
+    focusedIndex = _c[0],
+    setFocusedIndex = _c[1];
   // Update focused index when active tab changes externally
   useEffect(function () {
     var newIndex = tabs.findIndex(function (tab) {
@@ -6982,7 +7343,6 @@ var TabBar = function TabBar(_a) {
     }
   };
   return jsx(StyledTabList, {
-    "$variant": variant,
     role: "tablist",
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -6991,7 +7351,6 @@ var TabBar = function TabBar(_a) {
         ref: function ref(el) {
           tabRefs.current[index] = el;
         },
-        "$variant": variant,
         "$isActive": tab.id === activeTab,
         "$disabled": tab.disabled || false,
         role: "tab",
@@ -7007,8 +7366,6 @@ var TabBar = function TabBar(_a) {
         },
         "data-testid": "".concat(dataTestId, "-tab-").concat(tab.id),
         children: [tab.label, typeof tab.badge === 'number' && tab.badge > 0 && jsx(StyledBadge, {
-          "$variant": variant,
-          "$isActive": tab.id === activeTab,
           "aria-label": "".concat(tab.badge, " items"),
           children: tab.badge > 99 ? '99+' : tab.badge
         })]
@@ -7020,14 +7377,16 @@ TabBar.displayName = 'TabBar';
 var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 
 var field = tokensJson.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var gap = tokensJson.semantic.spacing.layout;
 var StyledFieldContainer = styled.div.withConfig({
   displayName: "TextField__StyledFieldContainer",
   componentId: "sc-1ys3b0-0"
-})(templateObject_1$2 || (templateObject_1$2 = __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"])), field.gap);
+})(templateObject_1$2 || (templateObject_1$2 = __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"])), gap.sm);
 var StyledLabel = styled.label.withConfig({
   displayName: "TextField__StyledLabel",
   componentId: "sc-1ys3b0-1"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), field.label.gap, field.label.typography, field.label.color, field.label.colorDisabled);
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), gap.xs, field.label.typography, field.label.color, field.label.colorDisabled);
 var StyledRequiredIndicator = styled.span.withConfig({
   displayName: "TextField__StyledRequiredIndicator",
   componentId: "sc-1ys3b0-2"
@@ -7160,9 +7519,9 @@ var StyledTruncatedText = styled.span.withConfig({
   displayName: "TransactionListItem__StyledTruncatedText",
   componentId: "sc-7yunm0-8"
 })(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"
-// Map categories to CategoryBadge configurations
+// Map categories to CategoryLabel configurations
 ])));
-// Map categories to CategoryBadge configurations
+// Map categories to CategoryLabel configurations
 var categoryConfig = {
   shopping: {
     color: 'purple',
@@ -7276,10 +7635,10 @@ var TransactionListItem = function TransactionListItem(_a) {
               variant: "body",
               children: merchant
             })
-          }), categoryData && jsx(CategoryBadge, {
+          }), categoryData && jsx(CategoryLabel, {
             color: categoryData.color,
             icon: categoryData.icon,
-            size: "small",
+            size: "medium",
             variant: "minimal",
             "aria-label": "Category: ".concat(categoryData.label),
             children: categoryData.label
@@ -7378,6 +7737,7 @@ var Grid = function Grid(_a) {
     gapX = _a.gapX,
     gapY = _a.gapY,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsx(GridContainer, {
     "$cols": cols,
@@ -7385,6 +7745,7 @@ var Grid = function Grid(_a) {
     "$gapX": gapX ? gapSpacing[gapX] : undefined,
     "$gapY": gapY ? gapSpacing[gapY] : undefined,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7397,7 +7758,7 @@ var GridColContainer = styled.div.withConfig({
 })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
   return props.$span && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["grid-column: span ", " / span ", ";"], ["grid-column: span ", " / span ", ";"])), props.$span, props.$span);
 }, function (props) {
-  return props.$order && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
+  return props.$order !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
 }, function (props) {
   return props.$spanSm && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.sm, props.$spanSm, props.$spanSm);
 }, function (props) {
@@ -7407,13 +7768,13 @@ var GridColContainer = styled.div.withConfig({
 }, function (props) {
   return props.$spanXl && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.xl, props.$spanXl, props.$spanXl);
 }, function (props) {
-  return props.$orderSm && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
+  return props.$orderSm !== undefined && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
 }, function (props) {
-  return props.$orderMd && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
+  return props.$orderMd !== undefined && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
 }, function (props) {
-  return props.$orderLg && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
+  return props.$orderLg !== undefined && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
 }, function (props) {
-  return props.$orderXl && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
+  return props.$orderXl !== undefined && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
 });
 var GridCol = function GridCol(_a) {
   var span = _a.span,
@@ -7427,6 +7788,7 @@ var GridCol = function GridCol(_a) {
     orderLg = _a.orderLg,
     orderXl = _a.orderXl,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsx(GridColContainer, {
     "$span": span,
@@ -7440,6 +7802,7 @@ var GridCol = function GridCol(_a) {
     "$orderLg": orderLg,
     "$orderXl": orderXl,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7512,6 +7875,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     gapYLg = _a.gapYLg,
     gapYXl = _a.gapYXl,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsx(ResponsiveGridContainer, {
     "$cols": cols,
@@ -7535,10 +7899,11 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     "$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
     "$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
 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;
 
-export { Avatar as A, Badge as B, CategoryBadge as C, DateFormatter as D, EmptyState as E, FilterChip as F, GridCol as G, Modal as H, Icon as I, PageTitle as J, PasswordField as K, LegacyChip as L, MoneyDisplay as M, NumberInput as N, SearchField as O, Picture as P, Sheet as Q, ResponsiveGrid as R, Stack as S, Tag as T, Slider as U, TabBar as V, TextField as W, StyledInputBase as X, StyledTextAreaBase as Y, TransactionListItem as Z, Grid as a, Box as b, Button as c, Chip as d, BooleanChip as e, Container$1 as f, IconButton as g, ProgressBar as h, Divider as i, StatusBadge as j, Typography as k, AccountCard as l, ActionSheet as m, AgentInput as n, Alert as o, Breadcrumbs as p, CardSmall as q, CardLarge as r, Checkbox as s, ChipGroup as t, CodeBlock as u, DateGroup as v, FeatureBlock as w, Dropdown as x, List as y, ListItem as z };
+export { StyledInputBase as $, Avatar as A, Badge as B, CategoryBadge as C, DateFormatter as D, EmptyState as E, FilterChip as F, GridCol as G, FeatureBlock as H, InputChip as I, Dropdown as J, List as K, LegacyChip as L, MoneyDisplay as M, ListItem as N, Modal as O, Picture as P, NumberInput as Q, ResponsiveGrid as R, Stack as S, Tag as T, PageTitle as U, PasswordField as V, SearchField as W, Sheet as X, Slider as Y, TabBar as Z, TextField as _, Grid as a, StyledTextAreaBase as a0, TransactionListItem as a1, Box as b, Button as c, CategoryLabel as d, Chip as e, BooleanChip as f, Container$1 as g, Icon as h, IconButton as i, ProgressBar as j, Divider as k, StatusBadge as l, StatusLabel as m, Typography as n, AccountCard as o, ActionSheet as p, AgentInput as q, Alert as r, InlineAlert as s, Breadcrumbs as t, CardSmall as u, CardLarge as v, Checkbox as w, ChipGroup as x, CodeBlock as y, DateGroup as z };
 //# sourceMappingURL=client.esm.js.map