@common-origin/design-system 2.14.0 → 2.16.0

package/dist/client.js

@@ -111,44 +111,44 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 // Destructure tokens
-var semantic$g = data.tokensJson.semantic;
+var semantic$j = data.tokensJson.semantic;
 var initials = data.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__default.default.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__default.default.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__default.default.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) {
@@ -202,7 +202,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 = {
@@ -227,7 +227,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 = styled.keyframes(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
+var fadeOut$1 = styled.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
@@ -239,51 +239,51 @@ var fadeOut$1 = styled.keyframes(templateObject_1$K || (templateObject_1$K = __m
 // 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 = styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
+var exitAnimation = styled.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, data.tokensJson.semantic.motion.duration.fast, data.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 = styled.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 = styled.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 = data.tokensJson.semantic,
-  typography$1 = _a$c.typography,
-  color$9 = _a$c.color,
-  letterSpacing = _a$c.letterSpacing;
+var _a$b = data.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"];
 };
@@ -314,7 +314,7 @@ var StyledTypography = styled__default.default.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.
  *
@@ -376,53 +376,53 @@ var Typography = function Typography(_a) {
     children: children
   });
 };
-var templateObject_1$J;
+var templateObject_1$K;
 
-var semantic$f = data.tokensJson.semantic;
-var color$8 = semantic$f.color,
-  border$9 = semantic$f.border;
-var radius$4 = border$9.radius;
-var _a$b = data.tokensJson.component.badge,
-  dot = _a$b.dot,
-  count = _a$b.count,
-  ring = _a$b.ring;
-var scaleIn$2 = styled.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 = data.tokensJson.semantic;
+var color$9 = semantic$i.color,
+  border$a = semantic$i.border;
+var radius$4 = border$a.radius;
+var _a$a = data.tokensJson.component.badge,
+  dot = _a$a.dot,
+  count = _a$a.count,
+  ring = _a$a.ring;
+var scaleIn$2 = styled.keyframes(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = styled__default.default.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__default.default.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__default.default.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,
@@ -434,7 +434,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
@@ -442,6 +443,7 @@ var Badge = function Badge(_a) {
   var label = ariaLabel || defaultAriaLabel;
   return jsxRuntime.jsxs(BadgeWrapper, {
     className: className,
+    "data-testid": dataTestId,
     children: [children, jsxRuntime.jsxs(BadgeIndicator, {
       "$variant": variant,
       "$isDot": dot,
@@ -458,7 +460,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__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -469,15 +471,15 @@ var StyledBox = styled__default.default.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 && styled.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && styled.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && styled.css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && styled.css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && styled.css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
-  return props.$alignItems && styled.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+  return props.$alignItems && styled.css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && styled.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && styled.css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
   return props.$gap && styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$gap]);
 }, function (props) {
@@ -493,7 +495,7 @@ var StyledBox = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$mx && styled.css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), data.tokensJson.semantic.spacing.layout[props.$mx], data.tokensJson.semantic.spacing.layout[props.$mx]);
 }, function (props) {
-  return props.$my && styled.css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), data.tokensJson.semantic.spacing.layout[props.$my], data.tokensJson.semantic.spacing.layout[props.$my]);
+  return props.$my && styled.css(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), data.tokensJson.semantic.spacing.layout[props.$my], data.tokensJson.semantic.spacing.layout[props.$my]);
 }, function (props) {
   return props.$p && styled.css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$p]);
 }, function (props) {
@@ -503,7 +505,7 @@ var StyledBox = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$pb && styled.css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$pb]);
 }, function (props) {
-  return props.$pl && styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$pl]);
+  return props.$pl && styled.css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$pl]);
 }, function (props) {
   return props.$px && styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), data.tokensJson.semantic.spacing.layout[props.$px], data.tokensJson.semantic.spacing.layout[props.$px]);
 }, function (props) {
@@ -693,7 +695,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__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -701,7 +703,7 @@ var IconStyled = styled__default.default.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 data.tokensJson.semantic.size.icon[$size];
 }, function (_a) {
@@ -767,12 +769,14 @@ var Icon = function Icon(_a) {
     })
   });
 };
-var templateObject_1$G;
+var templateObject_1$H;
 
 var button$1 = data.tokensJson.component.button,
-  semantic$e = data.tokensJson.semantic;
+  semantic$h = data.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(data.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(data.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;
@@ -801,6 +805,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,
@@ -826,13 +839,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__default.default.button.withConfig({
@@ -841,14 +854,14 @@ var StyledButton = styled__default.default.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__default.default.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
@@ -892,8 +905,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 jsxRuntime.jsx(LinkComponent, {
+    // The link component renders the <a>, so anchor attributes (id, aria-*, rel, handlers) go to it
+    var linkProps = rest;
+    return jsxRuntime.jsx(LinkComponent, __assign({}, linkProps, {
       href: url,
+      target: target,
       children: jsxRuntime.jsx(StyledLink, {
         as: "span",
         "$variant": variant,
@@ -901,18 +917,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 jsxRuntime.jsx(StyledLink, __assign({
+    return jsxRuntime.jsx(StyledLink, __assign({}, linkProps, {
       href: url,
       target: target,
       "$variant": variant,
       "$size": size,
-      "data-testid": dataTestId
-    }, linkProps, {
+      "data-testid": dataTestId,
       children: renderButtonContent(children, iconName, size)
     }));
   }
@@ -949,49 +964,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 = data.tokensJson.semantic;
-var color$7 = semantic$d.color,
-  border$8 = semantic$d.border,
-  spacing$7 = semantic$d.spacing;
+var semantic$g = data.tokensJson.semantic;
+var color$8 = semantic$g.color,
+  border$9 = semantic$g.border,
+  spacing$9 = semantic$g.spacing;
 var label$2 = data.tokensJson.component.badge.label;
-var category = color$7.category;
-var radius$3 = border$8.radius;
-var layout$4 = spacing$7.layout;
-var StyledCategoryBadge = styled__default.default.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__default.default.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;
@@ -1007,9 +1019,9 @@ var StyledCategoryBadge = styled__default.default.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;
@@ -1018,74 +1030,139 @@ var StyledCategoryBadge = styled__default.default.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__default.default.span.withConfig({
+  displayName: "CategoryLabel__VisibleContent",
+  componentId: "sc-1jx7bjo-1"
+})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var HiddenLabel = styled__default.default.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 jsxRuntime.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 jsxRuntime.jsxs(StyledCategoryLabel, {
     "$color": color,
     "$variant": variant,
     "$size": size,
-    "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    children: [icon && jsxRuntime.jsx(Icon, {
-      name: icon,
-      size: iconSize,
-      iconColor: variant === 'filled' ? 'inverse' : 'inherit',
-      "aria-hidden": "true"
-    }), children]
+    children: [jsxRuntime.jsxs(VisibleContent$1, {
+      "aria-hidden": accessibleLabel ? 'true' : undefined,
+      children: [icon && jsxRuntime.jsx(Icon, {
+        name: icon,
+        size: iconSize,
+        iconColor: variant === 'filled' ? 'inverse' : 'inherit',
+        "aria-hidden": "true"
+      }), children]
+    }), accessibleLabel && jsxRuntime.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 jsxRuntime.jsx(CategoryLabel, __assign({}, props, {
+    size: toLabelSize[size]
+  }));
+};
 CategoryBadge.displayName = 'CategoryBadge';
-var templateObject_1$E;
 
-var chip = data.tokensJson.component.chip;
+var chip$1 = data.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(data.tokensJson.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? data.tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#CAE8FF' : data.tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? data.tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#B5DEFF' : data.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 = data.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
@@ -1093,13 +1170,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 = data.tokensJson.component.chip,
+  semantic$f = data.tokensJson.semantic;
 // Base styled component using direct prop interpolation like Button
 var StyledChip = styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1107,16 +1186,16 @@ var StyledChip = styled__default.default.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, data.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__default.default.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
 ])), data.tokensJson.semantic.spacing.layout.xs);
 // Close button for dismissible chips
@@ -1126,24 +1205,21 @@ var CloseButton = styled__default.default.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"])), data.tokensJson.semantic.spacing.layout.sm, data.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"])), data.tokensJson.semantic.spacing.layout.sm, chip.closeButton.size, chip.closeButton.size, data.tokensJson.semantic.spacing.layout.none, data.tokensJson.semantic.border.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, data.tokensJson.semantic.motion.hover, data.tokensJson.semantic.color.background['hover-overlay'], data.tokensJson.semantic.color.background['active-overlay'], data.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, data.tokensJson.semantic.color.background['hover-overlay'], data.tokensJson.semantic.color.background['active-overlay'], data.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,
@@ -1205,22 +1281,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,
@@ -1273,7 +1349,8 @@ var FilterChip = function FilterChip(_a) {
       "aria-hidden": "true",
       children: jsxRuntime.jsx(Icon, {
         name: "check",
-        size: "sm"
+        size: "sm",
+        iconColor: "inherit"
       })
     }), children, isDismissible && jsxRuntime.jsx(CloseButton, {
       type: "button",
@@ -1286,12 +1363,22 @@ var FilterChip = function FilterChip(_a) {
       "data-testid": dataTestId ? "".concat(dataTestId, "-close") : undefined,
       children: jsxRuntime.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
  *
@@ -1304,7 +1391,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,
@@ -1350,17 +1441,18 @@ var BooleanChip = function BooleanChip(_a) {
       "aria-hidden": "true",
       children: jsxRuntime.jsx(Icon, {
         name: "check",
-        size: "sm"
+        size: "sm",
+        iconColor: "inherit"
       })
     }), children]
   }));
 };
 
-var spacing$6 = data.tokensJson.semantic.spacing;
+var spacing$8 = data.tokensJson.semantic.spacing;
 var StyledContainer$2 = styled__default.default.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"]);
@@ -1368,24 +1460,24 @@ var Container$1 = function Container(_a) {
     children: children
   }));
 };
-var templateObject_1$C;
+var templateObject_1$D;
 
 var PictureWrapper = styled__default.default.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__default.default.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"])), data.tokensJson.semantic.motion.duration.normal, data.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"])), data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut);
 var ImageButton = styled__default.default.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"])), data.tokensJson.semantic.motion.duration.normal, data.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"])), data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut);
 var StyledImage = styled__default.default.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"])), data.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"])), data.tokensJson.semantic.border.radius.sm);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -1415,18 +1507,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 = data.tokensJson.semantic,
-  typography = _a$a.typography,
-  color$6 = _a$a.color;
+var _a$9 = data.tokensJson.semantic,
+  typography$1 = _a$9.typography,
+  color$7 = _a$9.color;
 var TimeStyled = styled__default.default.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
  */
@@ -1472,43 +1564,67 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$A;
+var templateObject_1$B;
 
-var motion$5 = data.tokensJson.semantic.motion,
-  _a$9 = data.tokensJson.component,
-  iconButton = _a$9.iconButton,
-  button = _a$9.button;
+var _a$8 = data.tokensJson.semantic,
+  motion$5 = _a$8.motion,
+  border$8 = _a$8.border,
+  spacing$7 = _a$8.spacing,
+  _b$1 = data.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__default.default.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) {
@@ -1516,32 +1632,20 @@ var IconButtonStyled = styled__default.default.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;
-  }
-}, data.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,
@@ -1592,7 +1696,7 @@ var IconButton = function IconButton(_a) {
     })
   }));
 };
-var templateObject_1$z;
+var templateObject_1$A;
 
 var StyledWrapper = styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1600,7 +1704,7 @@ var StyledWrapper = styled__default.default.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;
@@ -1703,17 +1807,17 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     })]
   });
 };
-var templateObject_1$y;
+var templateObject_1$z;
 
 // Destructure tokens
-var semantic$c = data.tokensJson.semantic;
-var _a$8 = __assign(__assign({}, semantic$c), {
+var semantic$e = data.tokensJson.semantic;
+var _a$7 = __assign(__assign({}, semantic$e), {
     component: data.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__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1721,10 +1825,10 @@ var ProgressBarContainer = styled__default.default.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' && styled.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' && styled.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
 }, function (props) {
-  return props.$variant === 'vertical' && styled.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' && styled.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
 });
 var ProgressBarFill = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1736,19 +1840,19 @@ var ProgressBarFill = styled__default.default.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 styled.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
+  return styled.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
 }, function (props) {
-  return props.$variant === 'horizontal' && styled.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' && styled.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' && styled.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)));
 });
@@ -1760,13 +1864,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 jsxRuntime.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,
@@ -1777,10 +1888,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 = data.tokensJson.component.separator;
+// Margins come from the semantic separator spacing: no component spacing tokens (decision 0022)
 var separatorSpacing = data.tokensJson.semantic.spacing.separator;
 var StyledDivider = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1788,7 +1900,7 @@ var StyledDivider = styled__default.default.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.
  *
@@ -1837,7 +1949,7 @@ var StyledDivider = styled__default.default.div.withConfig({
     $orientation = _d === void 0 ? 'horizontal' : _d;
   if ($variant === 'minimal' && $orientation === 'horizontal') {
     // Minimal variant always uses its predefined spacing for horizontal
-    return "margin: ".concat(separatorTokens.variants.minimal.margin, ";");
+    return "margin: ".concat(separatorSpacing.md, " 0;");
   }
   if ($orientation === 'vertical') {
     // Vertical orientation uses horizontal margins (left/right)
@@ -1856,14 +1968,14 @@ var StyledDivider = styled__default.default.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;");
   }
 });
 /**
@@ -1901,7 +2013,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$w;
+var templateObject_1$x;
 
 var StyledStack = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1909,7 +2021,7 @@ var StyledStack = styled__default.default.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
@@ -1948,18 +2060,19 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
-var templateObject_1$v;
+var templateObject_1$w;
 
 // Destructure tokens for cleaner access
 var statusColors = data.tokensJson.semantic.color.status;
-var spacing$5 = data.tokensJson.semantic.spacing.layout;
+var spacing$6 = data.tokensJson.semantic.spacing.layout;
 var radius$1 = data.tokensJson.semantic.border.radius;
-var _a$7 = data.tokensJson.semantic.motion,
-  transition = _a$7.transition,
-  duration$3 = _a$7.duration,
-  easing$3 = _a$7.easing;
+var _a$6 = data.tokensJson.semantic.motion,
+  transition = _a$6.transition,
+  duration$3 = _a$6.duration,
+  easing$3 = _a$6.easing;
+var labelHeight = data.tokensJson.semantic.size.label;
 var label$1 = data.tokensJson.component.badge.label;
-var scaleIn$1 = styled.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 = styled.keyframes(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
   var configs = {
     pending: {
@@ -2004,31 +2117,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__default.default.span.withConfig({
+var StyledStatusLabel = styled__default.default.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;
@@ -2036,56 +2149,29 @@ var StyledStatusBadge = styled__default.default.span.withConfig({
   return "\n      background-color: ".concat(config.bgColor, ";\n      color: ").concat(config.color, ";\n    ");
 });
 var ScreenReaderOnly = styled__default.default.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__default.default.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,
@@ -2097,36 +2183,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 jsxRuntime.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 jsxRuntime.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 && jsxRuntime.jsx(Icon, {
-      name: statusConfig.icon,
-      size: sizeStyles.iconSize,
-      iconColor: "inherit",
-      "aria-hidden": "true"
-    }), displayLabel, jsxRuntime.jsxs(ScreenReaderOnly, {
-      children: [status, " status"]
+    children: [jsxRuntime.jsxs(VisibleContent, {
+      "aria-hidden": accessibleLabel ? 'true' : undefined,
+      children: [showIcon && jsxRuntime.jsx(Icon, {
+        name: statusConfig.icon,
+        size: sizeStyles.iconSize,
+        iconColor: "inherit",
+        "aria-hidden": "true"
+      }), displayLabel, jsxRuntime.jsxs(ScreenReaderOnly, {
+        children: [status, " status"]
+      })]
+    }), accessibleLabel && jsxRuntime.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 jsxRuntime.jsx(StatusLabelBase, __assign({}, props));
+};
 StatusBadge.displayName = 'StatusBadge';
-var templateObject_1$u, templateObject_2$o, templateObject_3$m;
 
-var semantic$b = data.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 jsxRuntime.jsx(StatusLabelBase, __assign({}, props, {
+    showIcon: true
+  }));
+};
+StatusLabel.displayName = 'StatusLabel';
+
+var semantic$d = data.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 = data.tokensJson.component.badge.label;
-var layout$3 = spacing$4.layout;
+var layout$3 = spacing$5.layout;
 var radius = border$6.radius;
 var StyledTag = styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2134,43 +2258,49 @@ var StyledTag = styled__default.default.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,
@@ -2178,17 +2308,17 @@ var StyledTag = styled__default.default.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"]);
   }
 });
 /**
@@ -2203,11 +2333,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 jsxRuntime.jsx(StyledTag, __assign({
     "$variant": variant,
     "$border": border,
+    "$size": tagSize,
     "data-testid": dataTestId,
     "data-variant": variant,
     "data-border": border,
@@ -2217,24 +2350,24 @@ var Tag = function Tag(_a) {
     children: children
   }));
 };
-var templateObject_1$t;
+var templateObject_1$u;
 
 // Destructure tokens for cleaner access
-var semantic$a = data.tokensJson.semantic;
-var spacing$3 = semantic$a.spacing;
-var layout$2 = spacing$3.layout;
+var semantic$c = data.tokensJson.semantic;
+var spacing$4 = semantic$c.spacing;
+var layout$2 = spacing$4.layout;
 var StyledBalanceSection = styled__default.default.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__default.default.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__default.default.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__default.default.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
   componentId: "sc-1erp7zn-3"
@@ -2242,7 +2375,7 @@ var StyledStackWrapper = styled__default.default.div.withConfig({
 var StyledHeaderWrapper = styled__default.default.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
 ])), data.tokensJson.component.accountCard.header.minHeight, layout$2.none, layout$2.xs);
 // Map trend direction to icon and color
@@ -2298,7 +2431,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,
@@ -2352,8 +2485,8 @@ var AccountCard = function AccountCard(_a) {
                 }), trend && trendValue && jsxRuntime.jsx(StyledTrendSection, {
                   "aria-label": "Trend ".concat(trend),
                   role: "img",
-                  children: jsxRuntime.jsx(CategoryBadge, {
-                    size: "small",
+                  children: jsxRuntime.jsx(CategoryLabel, {
+                    size: "medium",
                     icon: trendIcon,
                     color: trendColor,
                     variant: "minimal",
@@ -2393,28 +2526,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 = data.tokensJson.semantic;
-var _a$6 = semantic$9.motion,
-  duration$2 = _a$6.duration,
-  easing$2 = _a$6.easing;
+var semantic$b = data.tokensJson.semantic;
+var _a$5 = semantic$b.motion,
+  duration$2 = _a$5.duration,
+  easing$2 = _a$5.easing;
 var StyledListItem = styled__default.default.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__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2422,12 +2555,12 @@ var StyledItemContent = styled__default.default.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;
@@ -2439,26 +2572,26 @@ var StyledItemContent = styled__default.default.div.withConfig({
     $disabled = _a.$disabled,
     $selected = _a.$selected;
   return !$disabled && $interactive && "\n    &:hover {\n      background-color: ".concat($selected ? data.tokensJson.component.button.variants.secondary.backgroundColor : data.tokensJson.component.button.variants.secondary.backgroundColor, ";\n    }\n    \n    &:active {\n      background-color: ").concat(data.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__default.default.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__default.default.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__default.default.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__default.default.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);
@@ -2480,7 +2613,7 @@ var StyledExpandedContent = styled__default.default.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(data.tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.lg, " ").concat(semantic$9.spacing.layout.md, " ").concat(data.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(data.tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.lg, " ").concat(semantic$b.spacing.layout.md, " ").concat(data.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,
@@ -2593,7 +2726,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(data.tokensJson.semantic.motion.duration.fast, 10);
@@ -2638,25 +2771,25 @@ function useInert(ref, isInert) {
   }, [ref, isInert]);
 }
 
-var _a$5 = data.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 = styled.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 = styled.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 = data.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 = styled.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 = styled.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__default.default.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, data.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, data.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__default.default.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, data.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, data.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) {
@@ -2666,7 +2799,7 @@ var StyledActionSheet = styled__default.default.div.withConfig({
 var StyledHeader$2 = styled__default.default.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__default.default.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
@@ -2674,7 +2807,7 @@ var StyledHeaderContent = styled__default.default.div.withConfig({
 var StyledCloseButton = styled__default.default.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__default.default.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
@@ -2901,7 +3034,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;
@@ -3001,36 +3134,36 @@ function agentInputStateTransition(currentState, event) {
   }
 }
 
-var semantic$8 = data.tokensJson.semantic,
+var semantic$a = data.tokensJson.semantic,
   component$1 = data.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 = styled.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 = styled.keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 var Container = styled__default.default.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__default.default.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__default.default.div.withConfig({
   displayName: "AgentInput__InputShell",
   componentId: "sc-fhl996-2"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), semantic$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__default.default.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__default.default.div.withConfig({
   displayName: "AgentInput__InputActions",
   componentId: "sc-fhl996-4"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$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__default.default(IconButton).withConfig({
   displayName: "AgentInput__CircularActionIconButton",
   componentId: "sc-fhl996-5"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$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__default.default.div.withConfig({
   displayName: "AgentInput__InputWrapper",
   componentId: "sc-fhl996-6"
@@ -3041,50 +3174,56 @@ var MicButtonWrapper = styled__default.default.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 = styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"], ["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"])));
 var MicListeningRing = styled__default.default.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 && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+  return !$reducedMotion && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
 });
 var StatusRow = styled__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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';
 }
@@ -3713,21 +3852,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 = data.tokensJson.semantic;
+var semantic$9 = data.tokensJson.semantic;
 var alert = data.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 = styled.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 = styled.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 = styled.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 = styled.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.
@@ -3739,7 +3878,7 @@ var fadeOut = styled.keyframes(templateObject_2$j || (templateObject_2$j = __mak
 // 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',
@@ -3765,35 +3904,32 @@ var StyledAlert = styled__default.default.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 && styled.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 ? styled.css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : styled.css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
+  return $isExiting && styled.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 ? styled.css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : styled.css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
 });
 var StyledIconContainer = styled__default.default.div.withConfig({
   displayName: "Alert__StyledIconContainer",
@@ -3802,47 +3938,81 @@ var StyledIconContainer = styled__default.default.div.withConfig({
 var StyledContent$1 = styled__default.default.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__default.default.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__default.default.span.withConfig({
+var StyledMessage$1 = styled__default.default.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__default.default.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__default.default.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__default.default(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(data.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__default.default.useState('visible'),
-    phase = _f[0],
-    setPhase = _f[1];
-  var _g = React__default.default.useState(false),
-    reducedExit = _g[0],
-    setReducedExit = _g[1];
-  var _h = React__default.default.useState(),
-    exitStyle = _h[0],
-    setExitStyle = _h[1];
+    props = __rest(_a, ["variant", "appearance", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
+  var _g = React__default.default.useState('visible'),
+    phase = _g[0],
+    setPhase = _g[1];
+  var _h = React__default.default.useState(false),
+    reducedExit = _h[0],
+    setReducedExit = _h[1];
+  var _j = React__default.default.useState(),
+    exitStyle = _j[0],
+    setExitStyle = _j[1];
   var alertRef = React__default.default.useRef(null);
   // While it exits, its controls leave the tab order and can't be activated
   useInert(alertRef, phase === 'exiting');
@@ -3899,7 +4069,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
@@ -3908,6 +4078,7 @@ var Alert = function Alert(_a) {
     role: role,
     "aria-live": ariaLive,
     "$variant": variant,
+    "$appearance": appearance,
     "$inline": inline,
     "$isExiting": isExiting,
     "$reducedExit": reducedExit,
@@ -3930,29 +4101,163 @@ var Alert = function Alert(_a) {
         "aria-level": 6,
         color: alertTitleColor,
         children: title
-      }), jsxRuntime.jsx(StyledMessage, {
+      }), jsxRuntime.jsx(StyledMessage$1, {
         children: children
+      }), action && jsxRuntime.jsx(StyledActions, {
+        children: action
       })]
-    }), (action || dismissible) && jsxRuntime.jsxs(StyledActions, {
-      children: [action, dismissible && jsxRuntime.jsx(StyledDismissButton, {
+    }), dismissible && jsxRuntime.jsx(StyledDismissSlot, {
+      "$lineHeight": title ? alert.title.lineHeight : alert.message.lineHeight,
+      children: jsxRuntime.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 = data.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__default.default.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__default.default.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__default.default.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 jsxRuntime.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 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(StyledIconLine, {
+        "aria-hidden": "true",
+        children: jsxRuntime.jsx(Icon, {
+          name: variantIcons[variant],
+          size: sizeConfig[alertSize].icon,
+          iconColor: "inherit"
+        })
+      }), jsxRuntime.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__default.default.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 = data.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"])), data.tokensJson.semantic.border["default"]);
 var BreadcrumbStyled = styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
@@ -4020,7 +4325,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;
   }
@@ -4054,6 +4360,7 @@ var CardSmall = function CardSmall(_a) {
     })]
   });
   return jsxRuntime.jsx(CardSmallStyled, {
+    "data-testid": dataTestId,
     children: LinkComponent && href ? jsxRuntime.jsx(LinkComponent, {
       href: href,
       "aria-label": title,
@@ -4080,8 +4387,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 jsxRuntime.jsx(CardLargeStyled, {
+    "data-testid": dataTestId,
     children: jsxRuntime.jsxs(Stack, {
       direction: "column",
       gap: "md",
@@ -4167,7 +4476,7 @@ var StyledCheckbox = styled__default.default.span.withConfig({
   return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
 }, data.tokensJson.semantic.motion.duration.fast, data.tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
   return props.$state === 'error' ? data.tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? data.tokensJson.semantic.border.strong : data.tokensJson.component.input.hover.borderColor;
-}, HiddenCheckboxInput, data.tokensJson.component.input.focus.outline, data.tokensJson.component.input.focus.outlineOffset, function (props) {
+}, HiddenCheckboxInput, data.tokensJson.component.input.focus.outline, data.tokensJson.semantic.border.focusOffset, function (props) {
   return props.$state === 'error' ? data.tokensJson.component.input.error.focus.borderColor : data.tokensJson.component.input.focus.borderColor;
 }, function (props) {
   return props.$state === 'disabled' && "\n    background-color: ".concat(data.tokensJson.component.input.disabled.backgroundColor, ";\n    border-color: ").concat(data.tokensJson.component.input.disabled.borderColor, ";\n  ");
@@ -4455,6 +4764,37 @@ var CopyButton = function CopyButton(_a) {
     })
   });
 };
+var LiveRegion = styled__default.default.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.
@@ -4497,6 +4837,9 @@ var CodeBlock = function CodeBlock(_a) {
   var _e = React.useState(false),
     needsExpansion = _e[0],
     setNeedsExpansion = _e[1];
+  var _f = React.useState(''),
+    announcement = _f[0],
+    setAnnouncement = _f[1];
   var contentRef = React.useRef(null);
   // Check if content exceeds maxHeight
   React.useEffect(function () {
@@ -4510,17 +4853,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 jsxRuntime.jsxs(CodeBlockWrapper, {
@@ -4545,13 +4878,17 @@ var CodeBlock = function CodeBlock(_a) {
         "data-testid": "expand-button",
         children: isExpanded ? 'Show less' : 'Show more'
       })
+    }), showExpandButton && jsxRuntime.jsx(LiveRegion, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: announcement
     }), showCopyButton && jsxRuntime.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__default.default.div.withConfig({
   displayName: "DateGroup__StyledHeader",
@@ -4645,7 +4982,7 @@ var DateGroup = function DateGroup(_a) {
 };
 var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
 
-var semantic$6 = data.tokensJson.semantic;
+var semantic$7 = data.tokensJson.semantic;
 var StyledContainer$1 = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -4654,7 +4991,7 @@ var StyledContainer$1 = styled__default.default.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"])), data.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__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -4668,16 +5005,16 @@ var StyledIllustration = styled__default.default.div.withConfig({
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? data.tokensJson.component.emptyState.illustration.small : $size === 'large' ? data.tokensJson.component.emptyState.illustration.large : data.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__default.default.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
-])), data.tokensJson.component.emptyState.text.maxWidth, semantic$6.spacing.layout['2xl']);
+])), data.tokensJson.component.emptyState.text.maxWidth, semantic$7.spacing.layout['2xl']);
 // Map illustration type to icon name
 var illustrationToIcon = {
   search: 'search',
@@ -4732,7 +5069,7 @@ var EmptyState = function EmptyState(_a) {
         children: title
       }), jsxRuntime.jsx("div", {
         style: {
-          marginTop: semantic$6.spacing.layout.md
+          marginTop: semantic$7.spacing.layout.md
         },
         children: jsxRuntime.jsx(Typography, {
           variant: "body",
@@ -4797,9 +5134,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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(FeatureBlockStyled, {
+      "data-testid": dataTestId,
       children: [jsxRuntime.jsx(ImageWrapper, {
         children: jsxRuntime.jsx(Picture, {
           title: title,
@@ -4855,6 +5194,9 @@ var _a = data.tokensJson.semantic,
   _b = data.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 = data.tokensJson.semantic.spacing.component.lg;
 var duration = motion$1.duration,
   easing = motion$1.easing;
 var DropdownContainer = styled__default.default.div.withConfig({
@@ -4867,7 +5209,7 @@ var DropdownTrigger = styled__default.default.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) {
@@ -4876,7 +5218,7 @@ var DropdownTrigger = styled__default.default.button.withConfig({
 }, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor;
-}, input$1.focus.outline, 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  ");
@@ -4897,7 +5239,7 @@ var DropdownMenu = styled__default.default.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  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) {
@@ -4913,7 +5255,7 @@ var DropdownOption = styled__default.default.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;
@@ -4926,7 +5268,7 @@ var StyledHelperText$3 = styled__default.default.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,
@@ -4938,7 +5280,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 = React.useState(false),
     isOpen = _d[0],
     setIsOpen = _d[1];
@@ -5043,11 +5386,12 @@ var Dropdown = function Dropdown(_a) {
   return jsxRuntime.jsxs(DropdownContainer, {
     ref: dropdownRef,
     className: className,
+    "data-testid": dataTestId,
     children: [label && jsxRuntime.jsx("label", {
       htmlFor: dropdownId,
       style: {
         display: 'block',
-        marginBottom: field$3.gap
+        marginBottom: spacing.sm
       },
       children: jsxRuntime.jsx(Typography, {
         variant: "label",
@@ -5102,7 +5446,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 = data.tokensJson.semantic;
+var semantic$6 = data.tokensJson.semantic;
 var StyledList = styled__default.default.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -5111,7 +5455,7 @@ var StyledList = styled__default.default.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,
@@ -5135,12 +5479,12 @@ var List = function List(_a) {
 List.displayName = 'List';
 var templateObject_1$c;
 
-var semantic$4 = data.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 = data.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
 // ---------------------------------------------------------------------------
@@ -5164,7 +5508,7 @@ var scaleIn = styled.keyframes(templateObject_2$a || (templateObject_2$a = __mak
 var StyledOverlay$1 = styled__default.default.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, styled.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, styled.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;
 }));
@@ -5174,7 +5518,7 @@ var StyledDialog = styled__default.default.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, styled.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.normal, motion.easing.easeOut, function (_a) {
@@ -5183,7 +5527,7 @@ var StyledDialog = styled__default.default.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;
 });
@@ -5194,7 +5538,7 @@ var StyledHeader = styled__default.default.div.withConfig({
 var StyledBody = styled__default.default.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__default.default.div.withConfig({
   displayName: "Modal__StyledFooter",
   componentId: "sc-1d3g5gh-4"
@@ -5378,20 +5722,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 = data.tokensJson.component.input;
+var input = data.tokensJson.component.input,
+  semantic$4 = data.tokensJson.semantic;
 var StyledInputBase = styled__default.default.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) {
@@ -5403,10 +5748,10 @@ var StyledInputBase = styled__default.default.input.withConfig({
 }, input["default"].borderRadius, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut, data.tokensJson.semantic.motion.duration.normal, data.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
  */
@@ -5420,14 +5765,16 @@ var StyledTextAreaBase = styled__default.default.textarea.withConfig({
 var templateObject_1$a, templateObject_2$9;
 
 var field$2 = data.tokensJson.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var gap$2 = data.tokensJson.semantic.spacing.layout;
 var StyledFieldContainer$2 = styled__default.default.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__default.default.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__default.default.span.withConfig({
   displayName: "NumberInput__StyledRequiredIndicator",
   componentId: "sc-qotc3w-2"
@@ -5679,10 +6026,36 @@ var PageTitleStyled = styled__default.default.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"])), data.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`.
+ */])), data.tokensJson.semantic.spacing.layout['2xl'], function (_a) {
   var $hasBackButton = _a.$hasBackButton;
   return $hasBackButton ? data.tokensJson.semantic.spacing.layout.none : data.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,
@@ -5713,14 +6086,16 @@ var PageTitle = function PageTitle(_a) {
 var templateObject_1$8;
 
 var field$1 = data.tokensJson.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var gap$1 = data.tokensJson.semantic.spacing.layout;
 var StyledFieldContainer$1 = styled__default.default.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__default.default.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__default.default.span.withConfig({
   displayName: "PasswordField__StyledRequiredIndicator",
   componentId: "sc-1p15zk0-2"
@@ -5854,14 +6229,14 @@ var StyledInputWrapper = styled__default.default.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__default.default.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__default.default.ul.withConfig({
   displayName: "SearchField__StyledSuggestionsList",
   componentId: "sc-qhz9i8-3"
@@ -6424,7 +6799,7 @@ var StyledTrack = styled__default.default.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';
@@ -6434,7 +6809,7 @@ var StyledTrackFill = styled__default.default.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__default.default.div.withConfig({
   displayName: "Slider__StyledThumb",
@@ -6444,7 +6819,7 @@ var StyledThumb = styled__default.default.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';
@@ -6810,47 +7185,42 @@ var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4
 
 var semantic = data.tokensJson.semantic;
 var StyledTabList = styled__default.default.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';
-}, data.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, data.tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
 var StyledTab = styled__default.default.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__default.default.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
@@ -6865,21 +7235,13 @@ var StyledBadge = styled__default.default.span.withConfig({
  *   ]}
  *   activeTab={activeTab}
  *   onTabChange={setActiveTab}
- *   variant="pills"
  * />
  * ```
- */])), data.tokensJson.component.tabBar.badge.size, data.tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, data.tokensJson.component.tabBar.badge.typography, data.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;
-});
+ */])), data.tokensJson.component.tabBar.badge.size, data.tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, data.tokensJson.component.tabBar.badge.typography, data.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
@@ -6894,27 +7256,26 @@ var StyledBadge = styled__default.default.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 = React.useRef([]);
-  var _d = React.useState(function () {
+  var _c = React.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
   React.useEffect(function () {
     var newIndex = tabs.findIndex(function (tab) {
@@ -6989,7 +7350,6 @@ var TabBar = function TabBar(_a) {
     }
   };
   return jsxRuntime.jsx(StyledTabList, {
-    "$variant": variant,
     role: "tablist",
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -6998,7 +7358,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",
@@ -7014,8 +7373,6 @@ var TabBar = function TabBar(_a) {
         },
         "data-testid": "".concat(dataTestId, "-tab-").concat(tab.id),
         children: [tab.label, typeof tab.badge === 'number' && tab.badge > 0 && jsxRuntime.jsx(StyledBadge, {
-          "$variant": variant,
-          "$isActive": tab.id === activeTab,
           "aria-label": "".concat(tab.badge, " items"),
           children: tab.badge > 99 ? '99+' : tab.badge
         })]
@@ -7027,14 +7384,16 @@ TabBar.displayName = 'TabBar';
 var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 
 var field = data.tokensJson.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var gap = data.tokensJson.semantic.spacing.layout;
 var StyledFieldContainer = styled__default.default.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__default.default.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__default.default.span.withConfig({
   displayName: "TextField__StyledRequiredIndicator",
   componentId: "sc-1ys3b0-2"
@@ -7167,9 +7526,9 @@ var StyledTruncatedText = styled__default.default.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',
@@ -7283,10 +7642,10 @@ var TransactionListItem = function TransactionListItem(_a) {
               variant: "body",
               children: merchant
             })
-          }), categoryData && jsxRuntime.jsx(CategoryBadge, {
+          }), categoryData && jsxRuntime.jsx(CategoryLabel, {
             color: categoryData.color,
             icon: categoryData.icon,
-            size: "small",
+            size: "medium",
             variant: "minimal",
             "aria-label": "Category: ".concat(categoryData.label),
             children: categoryData.label
@@ -7385,6 +7744,7 @@ var Grid = function Grid(_a) {
     gapX = _a.gapX,
     gapY = _a.gapY,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsxRuntime.jsx(GridContainer, {
     "$cols": cols,
@@ -7392,6 +7752,7 @@ var Grid = function Grid(_a) {
     "$gapX": gapX ? gapSpacing[gapX] : undefined,
     "$gapY": gapY ? gapSpacing[gapY] : undefined,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7404,7 +7765,7 @@ var GridColContainer = styled__default.default.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 && styled.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["grid-column: span ", " / span ", ";"], ["grid-column: span ", " / span ", ";"])), props.$span, props.$span);
 }, function (props) {
-  return props.$order && styled.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
+  return props.$order !== undefined && styled.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
 }, function (props) {
   return props.$spanSm && styled.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) {
@@ -7414,13 +7775,13 @@ var GridColContainer = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$spanXl && styled.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 && styled.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
+  return props.$orderSm !== undefined && styled.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 && styled.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
+  return props.$orderMd !== undefined && styled.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 && styled.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
+  return props.$orderLg !== undefined && styled.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 && styled.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
+  return props.$orderXl !== undefined && styled.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,
@@ -7434,6 +7795,7 @@ var GridCol = function GridCol(_a) {
     orderLg = _a.orderLg,
     orderXl = _a.orderXl,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsxRuntime.jsx(GridColContainer, {
     "$span": span,
@@ -7447,6 +7809,7 @@ var GridCol = function GridCol(_a) {
     "$orderLg": orderLg,
     "$orderXl": orderXl,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7519,6 +7882,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     gapYLg = _a.gapYLg,
     gapYXl = _a.gapYXl,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsxRuntime.jsx(ResponsiveGridContainer, {
     "$cols": cols,
@@ -7542,6 +7906,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     "$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
     "$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7560,6 +7925,7 @@ exports.Button = Button;
 exports.CardLarge = CardLarge;
 exports.CardSmall = CardSmall;
 exports.CategoryBadge = CategoryBadge;
+exports.CategoryLabel = CategoryLabel;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.ChipGroup = ChipGroup;
@@ -7576,6 +7942,8 @@ exports.Grid = Grid;
 exports.GridCol = GridCol;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.InlineAlert = InlineAlert;
+exports.InputChip = InputChip;
 exports.LegacyChip = LegacyChip;
 exports.List = List;
 exports.ListItem = ListItem;
@@ -7592,6 +7960,7 @@ exports.Sheet = Sheet;
 exports.Slider = Slider;
 exports.Stack = Stack;
 exports.StatusBadge = StatusBadge;
+exports.StatusLabel = StatusLabel;
 exports.StyledInputBase = StyledInputBase;
 exports.StyledTextAreaBase = StyledTextAreaBase;
 exports.TabBar = TabBar;