@common-origin/design-system 2.22.0 → 3.0.0

package/dist/client.js

@@ -167,7 +167,7 @@ var AvatarContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
+})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
   var $size = _a.$size;
   return size$4.avatar[$size];
 }, function (_a) {
@@ -246,7 +246,7 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$P, templateObject_2$z, templateObject_3$w;
+var templateObject_1$O, templateObject_2$z, templateObject_3$w;
 
 // Breakpoints from the semantic tokens (decision 0014)
 var breakpoints$1 = {
@@ -281,7 +281,7 @@ var forcedColorsEdge = "".concat(forcedColors, " {\n  border: ").concat(tokens.s
 var reducedMotion = '@media (prefers-reduced-motion: reduce)';
 // No `from` keyframe: the fade starts from the element's current opacity, including a
 // still-running entrance, so closing mid-entrance doesn't jump back to fully visible.
-var fadeOut$1 = styled.keyframes(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
+var fadeOut$1 = styled.keyframes(templateObject_1$N || (templateObject_1$N = __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
@@ -399,7 +399,7 @@ var rowForcedColors = function rowForcedColors(_a) {
   // the descendants' own rules.
   return "".concat(forcedColors, " {\n    ").concat(selected ? "background-color: Highlight;\n    ".concat(text('HighlightText'), "\n    && * {\n      color: inherit;\n      background-color: transparent;\n    }") : '', "\n    ").concat(!disabled && focused ? hover : '', "\n    ").concat(disabled ? '' : "&:hover {\n      ".concat(hover, "\n    }"), "\n  }");
 };
-var templateObject_1$O, templateObject_2$y, templateObject_3$v;
+var templateObject_1$N, templateObject_2$y, templateObject_3$v;
 
 var _a$a = tokens.semantic,
   typography$3 = _a$a.typography,
@@ -467,7 +467,7 @@ var StyledTypography = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
+})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
 /**
  * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
  *
@@ -529,7 +529,7 @@ var Typography = function Typography(_a) {
     children: children
   });
 };
-var templateObject_1$N;
+var templateObject_1$M;
 
 var semantic$m = tokens.semantic;
 var color$b = semantic$m.color;
@@ -538,7 +538,7 @@ var _a$9 = tokens.component.badge,
   dot = _a$9.dot,
   count = _a$9.count,
   ring = _a$9.ring;
-var scaleIn$2 = styled.keyframes(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
+var scaleIn$2 = styled.keyframes(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Badge__BadgeWrapper",
   componentId: "sc-tjz4pp-0"
@@ -561,14 +561,7 @@ var BadgeIndicator = /*#__PURE__*/styled__default.default.span.withConfig({
   return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic$m.border.width.thin, " solid currentColor; }");
 }, function (props) {
   switch (props.$variant) {
-    // 'primary', 'error', 'warning' and 'success' are deprecated aliases for 'accent', removed in
-    // 3.0: 'primary' (#169), and the status colours, because a badge's colour alone can't carry a
-    // status (decision 0045, #263)
     case 'accent':
-    case 'primary':
-    case 'error':
-    case 'warning':
-    case 'success':
       return "\n          background-color: ".concat(color$b.fill.accent, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     default:
       return "\n          background-color: ".concat(color$b.fill.emphasis, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
@@ -615,18 +608,18 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$M, templateObject_2$x, templateObject_3$u, templateObject_4$n;
+var templateObject_1$L, templateObject_2$x, templateObject_3$u, templateObject_4$n;
 
-// Props whose values are token keys keep their published vocabulary in 2.x (P7), but read the
-// semantic grammar's names (decision 0031, #189). Each map covers every key the prop type allows,
-// so TypeScript fails here if a key is added without a mapping.
+// Box's spacing and radius props keep their own names, which 3.0 decoupled from the removed
+// spacing.layout and border.radius tokens (P7, #99), and read the semantic grammar's tokens
+// (decision 0031). Each map covers every key the prop type allows, so TypeScript fails here if a
+// key is added without a mapping.
 var semantic$l = tokens.semantic;
 var color$a = semantic$l.color,
   space$e = semantic$l.space,
   radius$4 = semantic$l.radius,
-  surface = semantic$l.surface,
-  opacity = semantic$l.opacity;
-/** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
+  surface = semantic$l.surface;
+/** Box's spacing props: each name maps to the space step that replaced its spacing.layout token. */
 var spaceByLayoutKey = {
   none: space$e[0],
   xs: space$e[100],
@@ -644,10 +637,10 @@ var spaceByLayoutKey = {
   '9xl': space$e[1600],
   '10xl': space$e[2000],
   '11xl': space$e[2400],
-  // A keyword, not a step: it stays until the keyword question is settled (0031)
+  // A keyword, not a step (0031)
   auto: semantic$l.spacing.layout.auto
 };
-/** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
+/** Box's `borderRadius` prop, read from `radius`. */
 var radiusByKey = {
   none: radius$4.none,
   xs: radius$4.xs,
@@ -659,85 +652,44 @@ var radiusByKey = {
   '3xl': radius$4['3xl'],
   circle: radius$4.full
 };
-/** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
-var backgroundByKey = {
-  "default": surface.base,
-  page: surface.base,
-  subtle: surface.raised,
-  overlay: surface.scrim,
-  emphasis: color$a.fill.emphasis,
-  // A strong fill's states mix its content colour in at the state-layer opacity (decision 0048)
-  'emphasis-hover': "color-mix(in srgb, ".concat(color$a.fill.emphasis, ", ").concat(color$a.text.inverse, " calc(").concat(opacity.state.hover, " * 100%))"),
-  'emphasis-active': "color-mix(in srgb, ".concat(color$a.fill.emphasis, ", ").concat(color$a.text.inverse, " calc(").concat(opacity.state.pressed, " * 100%))"),
-  surface: color$a.fill.muted,
-  inverse: color$a.fill.inverse,
-  interactive: color$a.fill.accent,
-  'interactive-hover': color$a.fill['accent-hover'],
-  'interactive-active': color$a.fill['accent-pressed'],
-  'interactive-subtle': color$a.fill['accent-muted'],
-  'interactive-subtle-hover': color$a.fill['accent-muted-hover'],
-  'interactive-subtle-active': color$a.fill['accent-muted-pressed'],
-  error: color$a.fill.danger,
-  'error-hover': color$a.fill['danger-hover'],
-  'error-active': color$a.fill['danger-pressed'],
-  'error-subtle': color$a.fill['danger-muted'],
-  success: color$a.fill.success,
-  'success-subtle': color$a.fill['success-muted'],
-  warning: color$a.fill.warning,
-  'warning-subtle': color$a.fill['warning-muted'],
-  disabled: color$a.fill.disabled,
-  neutral: color$a.fill["default"],
-  'neutral-hover': color$a.fill['default-hover'],
-  'neutral-active': color$a.fill['default-pressed'],
-  transparent: color$a.fill.none,
-  'hover-overlay': color$a.fill['none-hover'],
-  'active-overlay': color$a.fill['none-pressed'],
-  'inverse-overlay': color$a.fill['inverse-none-hover'],
-  // Moved to the component tier (decision 0031 §6)
-  progressTrack: tokens.component.track.background
-};
-/** Box's `color` prop: text colours, old and new keys. */
-var textColorByKey = {
-  "default": color$a.text["default"],
-  emphasis: color$a.text["default"],
-  inverse: color$a.text.inverse,
-  disabled: color$a.text.disabled,
-  success: color$a.text.success,
-  warning: color$a.text.warning,
-  muted: color$a.text.muted,
-  accent: color$a.text.accent,
-  'accent-hover': color$a.text.accent,
-  'accent-pressed': color$a.text.accent,
-  danger: color$a.text.danger,
-  serious: color$a.text.serious,
-  ai: color$a.text.ai,
-  subdued: color$a.text.muted,
-  interactive: color$a.text.accent,
-  'interactive-hover': color$a.text.accent,
-  'interactive-active': color$a.text.accent,
-  error: color$a.text.danger
-};
-/** Box's border props: border colours, old and new keys. */
-var borderColorByKey = {
-  "default": color$a.border["default"],
-  success: color$a.border.success,
-  warning: color$a.border.warning,
-  none: color$a.border.none,
-  emphasis: color$a.border["default"],
-  input: color$a.border.input,
-  'input-hover': color$a.border['input-hover'],
-  focus: color$a.border.focus,
-  accent: color$a.border.accent,
-  danger: color$a.border.danger,
-  serious: color$a.border.serious,
-  ai: color$a.border.ai,
-  subtle: color$a.border["default"],
-  control: color$a.border.input,
-  // `strong` split by use (0031); as a generic firm outline it is the hovered-input border
-  strong: color$a.border['input-hover'],
-  interactive: color$a.border.accent,
-  error: color$a.border.danger
+/** Box's `bg` prop: the grammar's token paths, read from the token at that path. */
+var backgroundByPath = {
+  'surface.base': surface.base,
+  'surface.raised': surface.raised,
+  'surface.scrim': surface.scrim,
+  'color.fill.emphasis': color$a.fill.emphasis,
+  'color.fill.muted': color$a.fill.muted,
+  'color.fill.inverse': color$a.fill.inverse,
+  'color.fill.accent': color$a.fill.accent,
+  'color.fill.accent-hover': color$a.fill['accent-hover'],
+  'color.fill.accent-pressed': color$a.fill['accent-pressed'],
+  'color.fill.accent-muted': color$a.fill['accent-muted'],
+  'color.fill.accent-muted-hover': color$a.fill['accent-muted-hover'],
+  'color.fill.accent-muted-pressed': color$a.fill['accent-muted-pressed'],
+  'color.fill.danger': color$a.fill.danger,
+  'color.fill.danger-hover': color$a.fill['danger-hover'],
+  'color.fill.danger-pressed': color$a.fill['danger-pressed'],
+  'color.fill.danger-muted': color$a.fill['danger-muted'],
+  'color.fill.success': color$a.fill.success,
+  'color.fill.success-muted': color$a.fill['success-muted'],
+  'color.fill.warning': color$a.fill.warning,
+  'color.fill.warning-muted': color$a.fill['warning-muted'],
+  'color.fill.serious': color$a.fill.serious,
+  'color.fill.serious-muted': color$a.fill['serious-muted'],
+  'color.fill.ai-muted': color$a.fill['ai-muted'],
+  'color.fill.disabled': color$a.fill.disabled,
+  'color.fill.default': color$a.fill["default"],
+  'color.fill.default-hover': color$a.fill['default-hover'],
+  'color.fill.default-pressed': color$a.fill['default-pressed'],
+  'color.fill.none': color$a.fill.none,
+  'color.fill.none-hover': color$a.fill['none-hover'],
+  'color.fill.none-pressed': color$a.fill['none-pressed'],
+  'color.fill.inverse-none-hover': color$a.fill['inverse-none-hover']
 };
+/** Box's `color` prop: the text colours. */
+var textColorByKey = color$a.text;
+/** Box's border props: the border colours. */
+var borderColorByKey = color$a.border;
 
 var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -748,7 +700,7 @@ var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
 })(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
 // Transform component that maps clean props to $-prefixed props for styled-components
 ])), function (props) {
-  return props.$display && styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && styled.css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
   return props.$flexDirection && styled.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
@@ -812,19 +764,19 @@ var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
 }, function (props) {
   return props.$borderRadius && styled.css(templateObject_32$2 || (templateObject_32$2 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), radiusByKey[props.$borderRadius]);
 }, function (props) {
-  return props.$border && styled.css(templateObject_33$2 || (templateObject_33$2 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
+  return props.$border && borderColorByKey[props.$border] && styled.css(templateObject_33$2 || (templateObject_33$2 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
 }, function (props) {
-  return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderTop]);
+  return props.$borderTop && borderColorByKey[props.$borderTop] && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderTop]);
 }, function (props) {
-  return props.$borderRight && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderRight]);
+  return props.$borderRight && borderColorByKey[props.$borderRight] && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderRight]);
 }, function (props) {
-  return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderBottom]);
+  return props.$borderBottom && borderColorByKey[props.$borderBottom] && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderBottom]);
 }, function (props) {
-  return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderLeft]);
+  return props.$borderLeft && borderColorByKey[props.$borderLeft] && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderLeft]);
 }, function (props) {
-  return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundByKey[props.$bg]);
+  return props.$bg && backgroundByPath[props.$bg] && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundByPath[props.$bg]);
 }, function (props) {
-  return props.$color && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), textColorByKey[props.$color]);
+  return props.$color && textColorByKey[props.$color] && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), textColorByKey[props.$color]);
 }, function (props) {
   return props.$shadow && styled.css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokens.semantic.elevation[props.$shadow]);
 }, function (props) {
@@ -972,7 +924,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$L, templateObject_2$w, templateObject_3$t, templateObject_4$m, templateObject_5$i, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2, templateObject_22$2, templateObject_23$2, templateObject_24$2, templateObject_25$2, templateObject_26$2, templateObject_27$2, templateObject_28$2, templateObject_29$2, templateObject_30$2, templateObject_31$2, templateObject_32$2, templateObject_33$2, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51;
+var templateObject_1$K, templateObject_2$w, templateObject_3$t, templateObject_4$m, templateObject_5$i, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2, templateObject_22$2, templateObject_23$2, templateObject_24$2, templateObject_25$2, templateObject_26$2, templateObject_27$2, templateObject_28$2, templateObject_29$2, templateObject_30$2, templateObject_31$2, templateObject_32$2, templateObject_33$2, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51;
 
 var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -980,7 +932,7 @@ var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.icon[$size];
 }, function (_a) {
@@ -1057,7 +1009,7 @@ var Icon = function Icon(_a) {
     }))
   });
 };
-var templateObject_1$K;
+var templateObject_1$J;
 
 var button$1 = tokens.component.button,
   semantic$k = tokens.semantic;
@@ -1070,6 +1022,7 @@ var control$1 = semantic$k.size.control;
 var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$k.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(semantic$k.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
+  var _b;
   var $variant = _a.$variant;
   var variantConfig = {
     primary: {
@@ -1104,15 +1057,6 @@ var getVariantStyles$1 = function getVariantStyles(_a) {
       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,
-      hoverBg: button$1.variants.emphasis.hover.backgroundColor,
-      activeBg: button$1.variants.emphasis.active.backgroundColor,
-      disabledBg: button$1.variants.emphasis.disabled.backgroundColor,
-      disabledText: button$1.variants.emphasis.disabled.textColor
-    },
     danger: {
       bg: button$1.variants.danger.backgroundColor,
       text: button$1.variants.danger.textColor,
@@ -1122,7 +1066,8 @@ var getVariantStyles$1 = function getVariantStyles(_a) {
       disabledText: button$1.variants.danger.disabled.textColor
     }
   };
-  var config = variantConfig[$variant];
+  // A removed variant (such as `emphasis`) passed from plain JavaScript renders as primary
+  var config = (_b = variantConfig[$variant]) !== null && _b !== void 0 ? _b : variantConfig.primary;
   return "\n    background-color: ".concat(config.bg, ";\n    color: ").concat(config.text, ";\n    \n    &:hover:not(:disabled) {\n      background-color: ").concat(config.hoverBg, ";\n    }\n\n    &:active:not(:disabled) {\n      background-color: ").concat(config.activeBg, ";\n    }\n\n    &:disabled {\n      background-color: ").concat(config.disabledBg, ";\n      color: ").concat(config.disabledText, ";\n    }\n  ");
 };
 // Dynamic size styles: font from component tokens, height from size.control (decision 0034)
@@ -1144,7 +1089,7 @@ var StyledButton = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
+})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
 var StyledLink = /*#__PURE__*/styled__default.default.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1254,7 +1199,7 @@ var Button = function Button(_a) {
     children: renderButtonContent(children, iconName, size)
   }));
 };
-var templateObject_1$J, templateObject_2$v;
+var templateObject_1$I, templateObject_2$v;
 
 var semantic$j = tokens.semantic;
 var color$9 = semantic$j.color;
@@ -1263,20 +1208,7 @@ var category = color$9.category;
 var radius$3 = semantic$j.radius;
 var space$d = semantic$j.space;
 var labelHeight$1 = semantic$j.size.label;
-var displayColor = {
-  olive: 'olive',
-  periwinkle: 'periwinkle',
-  rose: 'rose',
-  magenta: 'magenta',
-  gray: 'gray',
-  blue: 'periwinkle',
-  purple: 'magenta',
-  pink: 'rose',
-  yellow: 'olive',
-  green: 'olive',
-  red: 'rose',
-  orange: 'rose'
-};
+var displayColors = ['olive', 'periwinkle', 'rose', 'magenta', 'gray'];
 // Text on white or the -muted fill (outlined and minimal), at least 4.5:1 (#115)
 var categoryText = {
   olive: category['olive-text'],
@@ -1291,7 +1223,7 @@ var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "CategoryLabel__StyledCategoryLabel",
   componentId: "sc-1jx7bjo-0"
-})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"
+})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"
 // The visible content, hidden from assistive technology when an aria-label replaces it.
 // display: contents keeps the root's flex layout and gap.
 ])), radius$3.full, semantic$j.border.width.thin, function (_a) {
@@ -1389,8 +1321,10 @@ var CategoryLabel = function CategoryLabel(_a) {
   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": displayColor[color],
+  return jsxRuntime.jsxs(StyledCategoryLabel
+  // A removed hue name passed from plain JavaScript renders as the default, periwinkle
+  , {
+    "$color": displayColors.includes(color) ? color : 'periwinkle',
     "$variant": variant,
     "$size": size,
     "data-testid": dataTestId,
@@ -1407,35 +1341,13 @@ var CategoryLabel = function CategoryLabel(_a) {
   });
 };
 CategoryLabel.displayName = 'CategoryLabel';
-var templateObject_1$I, templateObject_2$u, templateObject_3$s;
-
-// 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$H, templateObject_2$u, templateObject_3$s;
 
 var chip$2 = tokens.component.chip,
   semantic$i = tokens.semantic;
-// Helper function to get variant styles matching Button's approach
+// The chip's fill and text for its surface and state, matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
-  var $variant = _a.$variant,
+  var $surface = _a.$surface,
     $selected = _a.$selected,
     $clickable = _a.$clickable,
     $disabled = _a.$disabled;
@@ -1454,16 +1366,12 @@ var getVariantStyles = function getVariantStyles(_a) {
     var interactiveStates = $clickable;
     return "\n      background-color: ".concat(fill['accent-muted'], ";\n      color: ").concat(text.accent, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text.accent : text.accent, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text.accent : text.accent, ";\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ").concat(forcedColors, " {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    ");
   }
-  switch ($variant) {
-    case 'emphasis':
-      return "\n        background-color: ".concat(chip$2.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip$2.variants.emphasis.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.emphasis.disabled.backgroundColor : $clickable ? chip$2.variants.emphasis.hover.backgroundColor : chip$2.variants.emphasis.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.emphasis.disabled.backgroundColor : $clickable ? chip$2.variants.emphasis.active.backgroundColor : chip$2.variants.emphasis.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.emphasis.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.emphasis.disabled.textColor, ";\n        ") : '', "\n      ");
+  switch ($surface) {
     case 'subtle':
       return "\n        background-color: ".concat(chip$2.variants.subtle.backgroundColor, ";\n        color: ").concat(chip$2.variants.subtle.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.subtle.disabled.backgroundColor : $clickable ? chip$2.variants.subtle.hover.backgroundColor : chip$2.variants.subtle.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.subtle.disabled.backgroundColor : $clickable ? chip$2.variants.subtle.active.backgroundColor : chip$2.variants.subtle.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.subtle.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.subtle.disabled.textColor, ";\n        ") : '', "\n      ");
-    case 'interactive':
-      return "\n        background-color: ".concat(chip$2.variants.interactive.backgroundColor, ";\n        color: ").concat(chip$2.variants.interactive.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.interactive.disabled.backgroundColor : $clickable ? chip$2.variants.interactive.hover.backgroundColor : chip$2.variants.interactive.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.interactive.disabled.backgroundColor : $clickable ? chip$2.variants.interactive.active.backgroundColor : chip$2.variants.interactive.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.interactive.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.interactive.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'default':
     default:
-      return "\n        background-color: ".concat(chip$2["default"].backgroundColor, ";\n        color: ").concat(chip$2["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.disabled.backgroundColor : $clickable ? chip$2.hover.backgroundColor : chip$2["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.disabled.backgroundColor : $clickable ? chip$2.active.backgroundColor : chip$2["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.disabled.backgroundColor, ";\n          color: ").concat(chip$2.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2["default"].backgroundColor, ";\n        color: ").concat(chip$2["default"].textColor, ";\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.disabled.backgroundColor, ";\n          color: ").concat(chip$2.disabled.textColor, ";\n        ") : '', "\n      ");
   }
 };
 // Chips have one size: 24px from the label scale as a minimum, with the content centred
@@ -1480,7 +1388,7 @@ var StyledChip = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"
+})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"
 // Icon container for selected indicator or leading icons
 ])), chip$1["default"].borderRadius, semantic$h.motion.transition.feedback, function (props) {
   return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
@@ -1504,76 +1412,50 @@ var CloseButton = /*#__PURE__*/styled__default.default.button.withConfig({
 })(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip$1.closeButton.size, chip$1.closeButton.size, tokens.semantic.space[0], semantic$h.size.label.medium, semantic$h.size.label.medium, tokens.semantic.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, semantic$h.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip$1.focus.outline, semantic$h.border.focusOffset, chip$1["default"].borderRadius);
-var templateObject_1$H, templateObject_2$t, templateObject_3$r;
+var templateObject_1$G, templateObject_2$t, templateObject_3$r;
 
 /**
  * Chip - a static, non-interactive label for tags, categories and metadata.
  *
  * 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)
+ * - Chip: a static label
+ * - FilterChip: toggles a filter on and off
+ * - InputChip: a removable value, such as an applied filter
+ * - SuggestionChip: fills the agent input with a suggestion
  *
- * The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are
- * deprecated and will be removed in 3.0.
+ * For a clickable action, use a Button.
  */
 var Chip = function Chip(_a) {
-  var children = _a.children,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'default' : _b;
-    // Deprecated and ignored: chips have one size (decision 0035)
-    _a.size;
-    var onClick = _a.onClick,
-    _c = _a.disabled,
-    disabled = _c === void 0 ? false : _c,
+  var children = _a.children;
+    // One variant: a removed one passed from plain JavaScript renders as default
+    _a.variant;
+    var _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"],
     ariaDescribedBy = _a["aria-describedby"],
     role = _a.role,
     title = _a.title,
-    props = __rest(_a, ["children", "variant", "size", "onClick", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role", "title"]);
-  var isClickable = Boolean(onClick && !disabled);
-  // Map legacy variants to new variants
-  var normalizedVariant = variant === 'light' ? 'default' : variant === 'dark' ? 'emphasis' : variant;
+    props = __rest(_a, ["children", "variant", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role", "title"]);
+  // Removed props passed from plain JavaScript stay off the DOM
+  var _c = props;
+    _c.onClick;
+    _c.size;
+    var domProps = __rest(_c, ["onClick", "size"]);
   // Support legacy title prop
   var content = children !== undefined ? children : title;
-  var handleClick = function handleClick() {
-    if (onClick && !disabled) {
-      onClick();
-    }
-  };
-  var handleKeyDown = function handleKeyDown(event) {
-    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
-      event.preventDefault();
-      handleClick();
-    }
-  };
   return jsxRuntime.jsx(StyledChip, __assign({
-    "$variant": normalizedVariant,
+    "$surface": "default",
     "$disabled": disabled || undefined,
-    "$clickable": isClickable || undefined,
-    onClick: isClickable ? handleClick : undefined,
-    onKeyDown: handleKeyDown,
-    tabIndex: isClickable ? 0 : undefined,
-    role: role || (isClickable ? 'button' : undefined),
+    role: role,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": disabled ? 'true' : undefined,
     "data-testid": dataTestId
-  }, props, {
+  }, domProps, {
     children: content
   }));
 };
-var LegacyChip = function LegacyChip(_a) {
-  var title = _a.title,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'light' : _b;
-  var newVariant = variant === 'dark' ? 'emphasis' : 'default';
-  return jsxRuntime.jsx(Chip, {
-    variant: newVariant,
-    children: title
-  });
-};
 
 /**
  * InputChip - A removable value, such as an applied filter, with an optional selected state
@@ -1595,16 +1477,14 @@ var InputChip = function InputChip(_a) {
   var children = _a.children,
     _b = _a.selected,
     selected = _b === void 0 ? false : _b,
-    onDismiss = _a.onDismiss;
-    // Deprecated and ignored: chips have one size (decision 0035)
-    _a.size;
-    var _c = _a.disabled,
+    onDismiss = _a.onDismiss,
+    _c = _a.disabled,
     disabled = _c === void 0 ? false : _c,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"],
     ariaDescribedBy = _a["aria-describedby"],
     role = _a.role,
-    props = __rest(_a, ["children", "selected", "onDismiss", "size", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role"]);
+    props = __rest(_a, ["children", "selected", "onDismiss", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role"]);
   var isDismissible = Boolean(onDismiss);
   var handleDismiss = function handleDismiss(event) {
     event.stopPropagation(); // Prevent event bubbling
@@ -1628,7 +1508,7 @@ var InputChip = function InputChip(_a) {
   // Generate accessible label for close button
   var closeButtonLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove filter';
   return jsxRuntime.jsxs(StyledChip, __assign({
-    "$variant": "subtle",
+    "$surface": "subtle",
     "$disabled": disabled || undefined,
     "$clickable": false,
     "$selected": selected,
@@ -1665,16 +1545,7 @@ var InputChip = function InputChip(_a) {
 };
 
 /**
- * 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
+ * FilterChip - Toggleable chip for quick filter controls (decision 0016)
  *
  * Use this component for multi-select filter controls where users can
  * see which options are active. Common in table filtering patterns where
@@ -1687,25 +1558,23 @@ var FilterChip = InputChip;
  * - Uses checkbox role with aria-checked
  * - 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).
+ * Called `BooleanChip` before 3.0. For a removable value, use InputChip.
  */
-var BooleanChip = function BooleanChip(_a) {
+var FilterChip = function FilterChip(_a) {
   var children = _a.children,
     selected = _a.selected,
-    onClick = _a.onClick;
-    // Deprecated and ignored: chips have one size (decision 0035)
-    _a.size;
-    var _b = _a.disabled,
+    onClick = _a.onClick,
+    _b = _a.disabled,
     disabled = _b === void 0 ? false : _b,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"],
     ariaDescribedBy = _a["aria-describedby"],
-    props = __rest(_a, ["children", "selected", "onClick", "size", "disabled", 'data-testid', 'aria-label', 'aria-describedby']);
+    props = __rest(_a, ["children", "selected", "onClick", "disabled", 'data-testid', 'aria-label', 'aria-describedby']);
   var handleClick = function handleClick() {
+    // Optional call: a plain JavaScript app that kept the pre-3.0 FilterChip (now InputChip) passes
+    // no onClick, and its chip should stay inert rather than throw
     if (!disabled) {
-      onClick();
+      onClick === null || onClick === void 0 ? void 0 : onClick();
     }
   };
   var handleKeyDown = function handleKeyDown(event) {
@@ -1716,7 +1585,7 @@ var BooleanChip = function BooleanChip(_a) {
     }
   };
   return jsxRuntime.jsxs(StyledChip, __assign({
-    "$variant": "subtle",
+    "$surface": "subtle",
     "$disabled": disabled || undefined,
     "$clickable": !disabled,
     "$selected": selected,
@@ -1749,7 +1618,7 @@ var color$8 = semantic$g.color;
 var StyledSuggestionChip = /*#__PURE__*/styled__default.default.button.withConfig({
   displayName: "SuggestionChip__StyledSuggestionChip",
   componentId: "sc-1k0njm-0"
-})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"
+})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"
 /**
  * SuggestionChip - Offers text to put in the agent input
  *
@@ -1789,13 +1658,13 @@ var SuggestionChip = function SuggestionChip(_a) {
   });
 };
 SuggestionChip.displayName = 'SuggestionChip';
-var templateObject_1$G;
+var templateObject_1$F;
 
 var space$c = tokens.semantic.space;
 var StyledContainer$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), space$c[600], space$c[600], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
+})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), space$c[600], space$c[600], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
 var Container$1 = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
@@ -1803,12 +1672,12 @@ var Container$1 = function Container(_a) {
     children: children
   }));
 };
-var templateObject_1$F;
+var templateObject_1$E;
 
 var PictureWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"
+})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"
 // A clickable image answers input on the image itself (decision 0029, #185): it fades on hover and
 // one step further while pressed, and draws the system focus ring around the image, following its
 // rounded corners. Fading isn't movement, so it stays under reduced motion.
@@ -1858,7 +1727,7 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$E, templateObject_2$s, templateObject_3$q, templateObject_4$l, templateObject_5$h;
+var templateObject_1$D, templateObject_2$s, templateObject_3$q, templateObject_4$l, templateObject_5$h;
 
 var _a$8 = tokens.semantic,
   typography$2 = _a$8.typography,
@@ -1866,7 +1735,7 @@ var _a$8 = tokens.semantic,
 var TimeStyled = /*#__PURE__*/styled__default.default.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * Formats a date with smart relative/absolute logic
  */])), typography$2.label, color$7.text.muted);
@@ -1895,7 +1764,6 @@ var DateFormatter = function DateFormatter(_a) {
   var date = dateFns.parseISO(dateString);
   var displayText;
   switch (mode) {
-    case 'relative': // Deprecated alias for 'smart', removed in 3.0 (#82)
     case 'smart':
       // Today, Yesterday or the day name for recent dates; formatted for older ones
       displayText = formatDateSmart(date, formatString);
@@ -1912,7 +1780,7 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$D;
+var templateObject_1$C;
 
 var _a$7 = tokens.semantic,
   motion$5 = _a$7.motion,
@@ -1973,7 +1841,7 @@ var IconButtonStyled = /*#__PURE__*/styled__default.default.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
+})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
   var $variant = _a.$variant;
   return colours($variant).bg;
 }, function (_a) {
@@ -2051,7 +1919,7 @@ var IconButton = function IconButton(_a) {
     })
   }));
 };
-var templateObject_1$C;
+var templateObject_1$B;
 
 var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2059,7 +1927,7 @@ var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"
+})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -2121,7 +1989,7 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     })
   });
 };
-var templateObject_1$B;
+var templateObject_1$A;
 
 // Destructure tokens
 var semantic$f = tokens.semantic;
@@ -2139,7 +2007,7 @@ var ProgressBarContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
 })(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"])), tokens.component.track.background, radius$2.xs, forcedColorsEdge, function (props) {
-  return props.$variant === 'horizontal' && styled.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
+  return props.$variant === 'horizontal' && styled.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
 }, function (props) {
   return props.$variant === 'vertical' && styled.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
 });
@@ -2202,7 +2070,7 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$A, templateObject_2$r, templateObject_3$p, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
+var templateObject_1$z, templateObject_2$r, templateObject_3$p, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
 
 // Destructure tokens for cleaner access
 var separatorTokens = tokens.component.separator;
@@ -2214,7 +2082,7 @@ var StyledDivider = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
+})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
 /**
  * Divider is an atomic component that provides visual separation between content sections.
  *
@@ -2327,7 +2195,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$z;
+var templateObject_1$y;
 
 var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2335,7 +2203,7 @@ var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
+})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
 // Each gap name maps to the space step that replaced its old spacing.layout token (decision 0031),
 // so every gap keeps its value
 ])));
@@ -2389,7 +2257,7 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
-var templateObject_1$y;
+var templateObject_1$x;
 
 // Shape indicators for the six coloured statuses (decision 0045): filled silhouettes on the
 // 24px grid, each the same outline as its status icon. Internal: they aren't public icons, so a
@@ -2410,7 +2278,7 @@ var statusShapes = {
 var Mark = /*#__PURE__*/styled__default.default.svg.withConfig({
   displayName: "StatusShape__Mark",
   componentId: "sc-1yzi9jt-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"], ["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"])), tokens.semantic.size.icon.xs, tokens.semantic.size.icon.xs);
+})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"], ["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"])), tokens.semantic.size.icon.xs, tokens.semantic.size.icon.xs);
 var StatusShape = function StatusShape(_a) {
   var shape = _a.shape;
   return jsxRuntime.jsx(Mark, {
@@ -2423,7 +2291,7 @@ var StatusShape = function StatusShape(_a) {
     })
   });
 };
-var templateObject_1$x;
+var templateObject_1$w;
 
 // Destructure tokens for cleaner access
 var statusColors = tokens.component.status;
@@ -2436,7 +2304,7 @@ var _b$1 = tokens.semantic.motion,
   easing$3 = _b$1.easing;
 var labelHeight = tokens.semantic.size.label;
 var label$1 = tokens.component.badge.label;
-var scaleIn$1 = styled.keyframes(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
+var 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) {
   // Each status's icon and, for the coloured statuses, its shape indicator (decision 0045). The
   // neutral statuses have no shape: at the small size they're plain text.
@@ -2529,24 +2397,22 @@ var VisibleContent = /*#__PURE__*/styled__default.default.span.withConfig({
   componentId: "sc-1ye9xz5-2"
 })(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
 /**
- * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
- * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
+ * StatusLabel's implementation. Internal: not exported from the package. It always shows the status
+ * icon at the medium size, and at the small size the shape for coloured statuses (decisions 0018,
+ * 0045).
  */])));
 /**
- * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
- * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
+ * StatusLabel's implementation. Internal: not exported from the package. It always shows the status
+ * icon at the medium size, and at the small size the shape for coloured statuses (decisions 0018,
+ * 0045).
  */
 var StatusLabelBase = function StatusLabelBase(_a) {
   var status = _a.status,
     label = _a.label,
     _b = _a.size,
     size = _b === void 0 ? 'medium' : _b,
-    _c = _a.showIcon,
-    showIcon = _c === void 0 ? true : _c,
-    _d = _a.liveRegion,
-    liveRegion = _d === void 0 ? true : _d,
+    _c = _a.liveRegion,
+    liveRegion = _c === void 0 ? true : _c,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"];
   var statusConfig = getStatusConfig(status);
@@ -2564,11 +2430,11 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     "data-testid": dataTestId,
     children: [jsxRuntime.jsxs(VisibleContent, {
       "aria-hidden": accessibleLabel ? 'true' : undefined,
-      children: [showIcon && size === 'medium' && jsxRuntime.jsx(Icon, {
+      children: [size === 'medium' && jsxRuntime.jsx(Icon, {
         name: statusConfig.icon,
         size: sizeStyles.iconSize,
         iconColor: "inherit"
-      }), showIcon && size === 'small' && statusConfig.shape && jsxRuntime.jsx(StatusShape, {
+      }), size === 'small' && statusConfig.shape && jsxRuntime.jsx(StatusShape, {
         shape: statusConfig.shape
       }), displayLabel, jsxRuntime.jsxs(ScreenReaderOnly, {
         children: [status, " status"]
@@ -2578,18 +2444,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     })]
   });
 };
-var templateObject_1$w, templateObject_2$q, templateObject_3$o, templateObject_4$j;
-
-/**
- * StatusBadge displays a transaction or task status.
- *
- * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
- * shows its status icon or shape. 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$v, templateObject_2$q, templateObject_3$o, templateObject_4$j;
 
 /**
  * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
@@ -2607,11 +2462,8 @@ StatusBadge.displayName = 'StatusBadge';
  * <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
-  }));
+  return jsxRuntime.jsx(StatusLabelBase, __assign({}, props));
 };
 StatusLabel.displayName = 'StatusLabel';
 
@@ -2627,7 +2479,7 @@ var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Tag__StyledTag",
   componentId: "sc-lzfmti-0"
-})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+})(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
  *
@@ -2642,14 +2494,6 @@ var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
 }, label.typography.small, label.fontWeight, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
-    case 'interactive':
-      return color$5.fill['accent-muted'];
-    case 'success':
-      return color$5.fill['success-muted'];
-    case 'warning':
-      return color$5.fill['warning-muted'];
-    case 'error':
-      return color$5.fill['danger-muted'];
     case 'emphasis':
       return color$5.fill.emphasis;
     default:
@@ -2658,14 +2502,6 @@ var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
-    case 'interactive':
-      return color$5.text.accent;
-    case 'success':
-      return color$5.text.success;
-    case 'warning':
-      return color$5.text.warning;
-    case 'error':
-      return color$5.text.danger;
     case 'emphasis':
       return color$5.text.inverse;
     default:
@@ -2676,14 +2512,6 @@ var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
     $border = _a.$border;
   if (!$border) return 'none';
   switch ($variant) {
-    case 'interactive':
-      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.accent);
-    case 'success':
-      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.success);
-    case 'warning':
-      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.warning);
-    case 'error':
-      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.danger);
     case 'emphasis':
       return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.fill.emphasis);
     default:
@@ -2719,7 +2547,7 @@ var Tag = function Tag(_a) {
     children: children
   }));
 };
-var templateObject_1$v;
+var templateObject_1$u;
 
 var semantic$d = tokens.semantic;
 var color$4 = semantic$d.color,
@@ -2747,7 +2575,7 @@ var StyledAILabel = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "AILabel__StyledAILabel",
   componentId: "sc-qknkn-0"
-})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
   var $size = _a.$size;
   return size$1.label[$size];
 }, function (_a) {
@@ -2803,7 +2631,7 @@ var AILabel = function AILabel(_a) {
   });
 };
 AILabel.displayName = 'AILabel';
-var templateObject_1$u, templateObject_2$p;
+var templateObject_1$t, templateObject_2$p;
 
 // Destructure tokens for cleaner access
 var semantic$c = tokens.semantic;
@@ -2811,7 +2639,7 @@ var space$7 = semantic$c.space;
 var StyledBalanceSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
   componentId: "sc-1erp7zn-0"
-})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), space$7[400]);
+})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), space$7[400]);
 var StyledTrendSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
   componentId: "sc-1erp7zn-1"
@@ -2885,7 +2713,7 @@ var AccountCard = function AccountCard(_a) {
   return jsxRuntime.jsx(Box, {
     minWidth: tokens.component.accountCard.minWidth,
     p: "lg",
-    bg: "subtle",
+    bg: "surface.raised",
     border: "default",
     borderRadius: "xl",
     transition: "box-shadow ".concat(semantic$c.motion.duration.moderate, " ").concat(semantic$c.motion.easing.decelerate),
@@ -2986,7 +2814,7 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$t, templateObject_2$o, templateObject_3$n, templateObject_4$i, templateObject_5$f;
+var templateObject_1$s, templateObject_2$o, templateObject_3$n, templateObject_4$i, templateObject_5$f;
 
 /**
  * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
@@ -3004,7 +2832,7 @@ var StyledListItem = /*#__PURE__*/styled__default.default.li.withConfig({
   },
   displayName: "ListItem__StyledListItem",
   componentId: "sc-1wzzt21-0"
-})(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) {
+})(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$b.size.touchTarget, function (_a) {
   var $interactive = _a.$interactive;
   return $interactive && 'user-select: none;';
 }, function (_a) {
@@ -3202,7 +3030,7 @@ var ListItem = function ListItem(_a) {
   );
 };
 ListItem.displayName = 'ListItem';
-var templateObject_1$s, templateObject_2$n, templateObject_3$m, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
+var templateObject_1$r, templateObject_2$n, templateObject_3$m, 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. A timer
 // needs the resolved value, not the CSS variable (decision 0041).
@@ -3254,7 +3082,7 @@ var _a$3 = tokens.semantic,
   space$6 = _a$3.space,
   motion$3 = _a$3.motion,
   elevation$2 = _a$3.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 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$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 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
@@ -3511,7 +3339,7 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$r, templateObject_2$m, templateObject_3$l, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
+var templateObject_1$q, templateObject_2$m, templateObject_3$l, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
 
 function detectSpeechRecognitionConstructor(targetWindow) {
   if (!targetWindow) return null;
@@ -3623,7 +3451,7 @@ var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
 var COUNTER_THRESHOLD = 0.8;
 // Layout effects warn during server rendering in React 18
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-var rotateRing = styled.keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var 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 Container = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -3835,7 +3663,7 @@ function AgentInputWithRef(_a, ref) {
     disabled = _e === void 0 ? false : _e,
     isSubmitting = _a.isSubmitting,
     _f = _a.enableVoice,
-    enableVoice = _f === void 0 ? true : _f,
+    enableVoice = _f === void 0 ? false : _f,
     _g = _a.autoSubmitOnVoiceFinal,
     autoSubmitOnVoiceFinal = _g === void 0 ? true : _g,
     _h = _a.voiceLanguage,
@@ -4692,7 +4520,7 @@ function AgentInputWithRef(_a, ref) {
 }
 var AgentInput = /*#__PURE__*/React.forwardRef(AgentInputWithRef);
 AgentInput.displayName = 'AgentInput';
-var templateObject_1$q, templateObject_2$l, templateObject_3$k, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1;
+var templateObject_1$p, templateObject_2$l, templateObject_3$k, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1;
 
 var semantic$9 = tokens.semantic;
 var alert = tokens.component.alert;
@@ -4706,7 +4534,7 @@ var FADE_MS = parseInt(data.tokensJson.semantic.motion.duration.fast, 10);
 var EXIT_MS = FADE_MS * 2;
 // The --alert-exit-* properties are the alert's height and vertical padding, measured
 // when it's dismissed, so nothing moves until the fade has finished
-var fadeThenCollapse = styled.keyframes(templateObject_1$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 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$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
@@ -4746,13 +4574,7 @@ var StyledAlert = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "Alert__StyledAlert",
   componentId: "sc-18tq5d-0"
-})(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 ? semantic$9.space[200] : semantic$9.space[300];
-}, function (_a) {
-  var $inline = _a.$inline;
-  return $inline ? semantic$9.space[200] : semantic$9.space[300];
-}, semantic$9.radius.sm, semantic$9.border.width.thin, 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"])), semantic$9.space[300], semantic$9.space[300], semantic$9.radius.sm, semantic$9.border.width.thin, function (_a) {
   var _b = _a.$variant,
     $variant = _b === void 0 ? 'info' : _b;
   return alert.severity[$variant].background;
@@ -4765,10 +4587,7 @@ var StyledAlert = /*#__PURE__*/styled__default.default.div.withConfig({
     $variant = _b === void 0 ? 'info' : _b,
     $appearance = _a.$appearance;
   return alert.appearance[$appearance].borderColor[$variant];
-}, semantic$9.breakpoint.md, function (_a) {
-  var $inline = _a.$inline;
-  return $inline ? semantic$9.space[200] : semantic$9.space[400];
-}, function (_a) {
+}, semantic$9.breakpoint.md, semantic$9.space[400], function (_a) {
   var $isExiting = _a.$isExiting,
     $reducedExit = _a.$reducedExit;
   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$j || (templateObject_3$j = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.accelerate) : styled.css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.accelerate));
@@ -4814,21 +4633,16 @@ var StyledDismissSlot = /*#__PURE__*/styled__default.default.div.withConfig({
   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.
+// The glyph sits on the padding edge, mirroring the severity icon on the left
 ])), 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.
+// The glyph sits on the padding edge, mirroring the severity icon on the left
 var StyledDismissButton = /*#__PURE__*/styled__default.default(IconButton).withConfig({
   displayName: "Alert__StyledDismissButton",
   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(semantic$9.size.control.sm, " - ").concat(semantic$9.size.icon.sm, ") / -2)");
-});
+})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  margin-right: calc((", " - ", ") / -2);\n"], ["\n  margin-right: calc((", " - ", ") / -2);\n"])), semantic$9.size.control.sm, semantic$9.size.icon.sm);
 var Alert = function Alert(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'info' : _b,
@@ -4840,12 +4654,15 @@ var Alert = function Alert(_a) {
     dismissible = _d === void 0 ? false : _d,
     onDismiss = _a.onDismiss,
     action = _a.action,
-    _e = _a.inline,
-    inline = _e === void 0 ? false : _e,
-    _f = _a.ariaLive,
-    ariaLive = _f === void 0 ? 'polite' : _f,
+    _e = _a.ariaLive,
+    ariaLive = _e === void 0 ? 'polite' : _e,
     dataTestId = _a["data-testid"],
-    props = __rest(_a, ["variant", "appearance", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
+    restProps = __rest(_a, ["variant", "appearance", "children", "title", "dismissible", "onDismiss", "action", "ariaLive", 'data-testid']);
+  // `inline` was removed in 3.0 (use InlineAlert, decision 0019); plain JavaScript that still
+  // passes it gets a block alert, with the prop kept off the DOM
+  var _f = restProps;
+    _f.inline;
+    var props = __rest(_f, ["inline"]);
   var _g = React__default.default.useState('visible'),
     phase = _g[0],
     setPhase = _g[1];
@@ -4921,7 +4738,6 @@ var Alert = function Alert(_a) {
     "aria-live": ariaLive,
     "$variant": variant,
     "$appearance": appearance,
-    "$inline": inline,
     "$isExiting": isExiting,
     "$reducedExit": reducedExit,
     "data-testid": dataTestId
@@ -4954,7 +4770,6 @@ var Alert = function Alert(_a) {
         iconName: "close",
         size: "small",
         variant: "naked",
-        "$inline": inline,
         onClick: handleDismiss,
         "aria-label": "Dismiss alert",
         "data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined
@@ -4963,7 +4778,7 @@ var Alert = function Alert(_a) {
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$p, templateObject_2$k, templateObject_3$j, 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 templateObject_1$o, templateObject_2$k, templateObject_3$j, 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 = tokens.semantic;
 var color$2 = semantic$8.color,
@@ -5006,7 +4821,7 @@ var StyledInlineAlert = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   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"
+})(templateObject_1$n || (templateObject_1$n = __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) {
@@ -5102,12 +4917,12 @@ var InlineAlert = function InlineAlert(_a) {
   });
 };
 InlineAlert.displayName = 'InlineAlert';
-var templateObject_1$o, templateObject_2$j, templateObject_3$i;
+var templateObject_1$n, templateObject_2$j, templateObject_3$i;
 
 var BreadcrumbNavStyled = /*#__PURE__*/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"])), tokens.semantic.border["default"]);
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), tokens.semantic.border["default"]);
 var BreadcrumbStyled = /*#__PURE__*/styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
@@ -5163,14 +4978,14 @@ var Breadcrumbs = function Breadcrumbs(_a) {
     })
   });
 };
-var templateObject_1$n, templateObject_2$i, templateObject_3$h;
+var templateObject_1$m, templateObject_2$i, templateObject_3$h;
 
 // The whole card is one link (#185): hovering anywhere fades its image, pressing fades it one step
 // further, and keyboard focus draws the system focus ring around the card (decision 0029)
 var CardSmallStyled = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
   componentId: "sc-jpcqvd-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.radius.sm, tokens.semantic.radius.sm, tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.radius.sm, tokens.semantic.radius.sm, tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
 var CardSmall = function CardSmall(_a) {
   var title = _a.title,
     picture = _a.picture,
@@ -5224,12 +5039,12 @@ var CardSmall = function CardSmall(_a) {
     })
   });
 };
-var templateObject_1$m;
+var templateObject_1$l;
 
 var CardLargeStyled = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
   componentId: "sc-1rfgdzl-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"], ["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"])), tokens.component.cardLarge.maxWidth, tokens.semantic.radius['2xl']);
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"], ["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"])), tokens.component.cardLarge.maxWidth, tokens.semantic.radius['2xl']);
 var CardLarge = function CardLarge(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -5284,7 +5099,7 @@ var CardLarge = function CardLarge(_a) {
     })
   });
 };
-var templateObject_1$l;
+var templateObject_1$k;
 
 /**
  * Hidden native checkbox input for accessibility
@@ -5296,7 +5111,7 @@ var HiddenCheckboxInput = /*#__PURE__*/styled__default.default.input.withConfig(
   },
   displayName: "SelectableInputBase__HiddenCheckboxInput",
   componentId: "sc-1ddpctx-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
 /**
  * Custom checkbox visual component
  * 24px × 24px for 8px grid alignment
@@ -5374,12 +5189,12 @@ var StyledCheckboxLabel = /*#__PURE__*/styled__default.default.span.withConfig({
 })(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokens.component.input["default"].font, function (props) {
   return props.$disabled ? tokens.component.input.disabled.textColor : tokens.component.input["default"].textColor;
 });
-var templateObject_1$k, templateObject_2$h, templateObject_3$g, templateObject_4$d;
+var templateObject_1$j, templateObject_2$h, templateObject_3$g, templateObject_4$d;
 
 var StyledFieldContainer$3 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Checkbox__StyledFieldContainer",
   componentId: "sc-vquz3v-0"
-})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokens.semantic.space[100]);
+})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokens.semantic.space[100]);
 var StyledHelperText$4 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
@@ -5502,16 +5317,14 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
 });
 Checkbox.displayName = 'Checkbox';
-var templateObject_1$j, templateObject_2$g;
+var templateObject_1$i, templateObject_2$g;
 
 var ChipGroupWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ChipGroup__ChipGroupWrapper",
   componentId: "sc-ae049w-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
 var ChipGroup = function ChipGroup(_a) {
   var labels = _a.labels,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'default' : _b,
     dataTestId = _a["data-testid"];
   return jsxRuntime.jsx(ChipGroupWrapper, {
     "data-testid": dataTestId,
@@ -5520,14 +5333,13 @@ var ChipGroup = function ChipGroup(_a) {
       gap: "sm",
       children: labels && labels.map(function (title, index) {
         return jsxRuntime.jsx(Chip, {
-          title: title,
-          variant: variant
+          title: title
         }, index);
       })
     })
   });
 };
-var templateObject_1$i;
+var templateObject_1$h;
 
 var _a$1 = tokens.semantic,
   color$1 = _a$1.color,
@@ -5536,7 +5348,7 @@ var _a$1 = tokens.semantic,
 var StyledCodeBlock = /*#__PURE__*/styled__default.default.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border$1["default"], tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color$1.text["default"], function (_a) {
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border$1["default"], tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color$1.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
@@ -5746,12 +5558,12 @@ var CodeBlock = function CodeBlock(_a) {
     })]
   });
 };
-var templateObject_1$h, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$a;
+var templateObject_1$g, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$a;
 
 var StyledHeader$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledHeader",
   componentId: "sc-9nfm1f-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"])), tokens.semantic.space[300], tokens.semantic.space[200], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], function (_a) {
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"])), tokens.semantic.space[300], tokens.semantic.space[200], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], function (_a) {
   var $sticky = _a.$sticky;
   return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: ".concat(tokens.semantic.layer.sticky, ";\n    box-shadow: ").concat(tokens.semantic.elevation.sticky, ";\n  ");
 });
@@ -5838,7 +5650,7 @@ var DateGroup = function DateGroup(_a) {
     })]
   });
 };
-var templateObject_1$g, templateObject_2$e, templateObject_3$e, templateObject_4$b;
+var templateObject_1$f, templateObject_2$e, templateObject_3$e, templateObject_4$b;
 
 var semantic$7 = tokens.semantic;
 var StyledContainer$1 = /*#__PURE__*/styled__default.default.div.withConfig({
@@ -5847,7 +5659,7 @@ var StyledContainer$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   },
   displayName: "EmptyState__StyledContainer",
   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"])), tokens.component.emptyState.maxWidth, function (_a) {
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"])), tokens.component.emptyState.maxWidth, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? semantic$7.space[800] : $size === 'large' ? semantic$7.space[1400] : semantic$7.space[1000];
 });
@@ -5957,13 +5769,13 @@ var EmptyState = function EmptyState(_a) {
     })]
   });
 };
-var templateObject_1$f, templateObject_2$d, templateObject_3$d;
+var templateObject_1$e, templateObject_2$d, templateObject_3$d;
 
 var space$5 = tokens.semantic.space;
 var FeatureBlockStyled = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__FeatureBlockStyled",
   componentId: "sc-1mi4lso-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.semantic.breakpoint.md, tokens.semantic.breakpoint.lg, space$5[1200], tokens.semantic.radius['2xl']);
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.semantic.breakpoint.md, tokens.semantic.breakpoint.lg, space$5[1200], tokens.semantic.radius['2xl']);
 var ImageWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ImageWrapper",
   componentId: "sc-1mi4lso-1"
@@ -6038,7 +5850,7 @@ var FeatureBlock = function FeatureBlock(_a) {
     }), jsxRuntime.jsx(Divider, {})]
   });
 };
-var templateObject_1$e, templateObject_2$c, templateObject_3$c, templateObject_4$a, templateObject_5$9;
+var templateObject_1$d, templateObject_2$c, templateObject_3$c, templateObject_4$a, templateObject_5$9;
 
 var _a = tokens.semantic,
   border = _a.border,
@@ -6060,7 +5872,7 @@ var duration = motion$1.duration,
 var DropdownContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Dropdown__DropdownContainer",
   componentId: "sc-kz07c4-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var DropdownTrigger = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -6307,7 +6119,7 @@ var Dropdown = function Dropdown(_a) {
     })]
   });
 };
-var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$9, templateObject_5$8, templateObject_6$7;
+var templateObject_1$c, templateObject_2$b, templateObject_3$b, templateObject_4$9, templateObject_5$8, templateObject_6$7;
 
 var semantic$6 = tokens.semantic;
 var StyledList = /*#__PURE__*/styled__default.default.ul.withConfig({
@@ -6316,7 +6128,7 @@ var StyledList = /*#__PURE__*/styled__default.default.ul.withConfig({
   },
   displayName: "List__StyledList",
   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) {
+})(templateObject_1$b || (templateObject_1$b = __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$6.border.width.thin, " solid ").concat(semantic$6.color.border["default"], ";\n    }\n  ");
 });
@@ -6342,7 +6154,7 @@ var List = function List(_a) {
   });
 };
 List.displayName = 'List';
-var templateObject_1$c;
+var templateObject_1$b;
 
 var semantic$5 = tokens.semantic;
 var space$3 = semantic$5.space,
@@ -6360,7 +6172,7 @@ var sizeToWidth = {
 // ---------------------------------------------------------------------------
 // Animations
 // ---------------------------------------------------------------------------
-var fadeIn$1 = styled.keyframes(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  from { opacity: 0; }\n  to   { opacity: 1; }\n"], ["\n  from { opacity: 0; }\n  to   { opacity: 1; }\n"])));
+var fadeIn$1 = styled.keyframes(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  from { opacity: 0; }\n  to   { opacity: 1; }\n"], ["\n  from { opacity: 0; }\n  to   { opacity: 1; }\n"])));
 var scaleIn = styled.keyframes(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n"
 // ---------------------------------------------------------------------------
 // Styled components
@@ -6584,7 +6396,7 @@ var Modal = function Modal(_a) {
   return /*#__PURE__*/reactDom.createPortal(modal, document.body);
 };
 Modal.displayName = 'Modal';
-var templateObject_1$b, templateObject_2$a, templateObject_3$a, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
+var templateObject_1$a, templateObject_2$a, templateObject_3$a, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
 
 var input = tokens.component.input,
   semantic$4 = tokens.semantic;
@@ -6593,7 +6405,7 @@ var input = tokens.component.input,
  * own min-height and padding. Interpolating a styled component into another's CSS
  * inserts its class selector, not its styles, so the sharing goes through `css`.
  */
-var inputBaseStyles = styled.css(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  width: 100%;\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  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  width: 100%;\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"])), input["default"].font, function (_a) {
+var inputBaseStyles = styled.css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  width: 100%;\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  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  width: 100%;\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"])), input["default"].font, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? input.disabled.textColor : input["default"].textColor;
 }, function (_a) {
@@ -6632,7 +6444,7 @@ var StyledTextAreaBase = /*#__PURE__*/styled__default.default.textarea.withConfi
   displayName: "InputBase__StyledTextAreaBase",
   componentId: "sc-1bpf4e8-1"
 })(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  ", "\n  \n  /* TextArea specific: a taller minimum for multi-line entry (decision 0034) */\n  min-height: ", ";\n  padding: ", " ", ";\n  resize: vertical;\n"], ["\n  ", "\n  \n  /* TextArea specific: a taller minimum for multi-line entry (decision 0034) */\n  min-height: ", ";\n  padding: ", " ", ";\n  resize: vertical;\n"])), inputBaseStyles, input.textarea.minHeight, semantic$4.space.inset.md, semantic$4.space.inset.lg);
-var templateObject_1$a, templateObject_2$9, templateObject_3$9;
+var templateObject_1$9, templateObject_2$9, templateObject_3$9;
 
 var field$2 = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
@@ -6640,7 +6452,7 @@ var space$2 = tokens.semantic.space;
 var StyledFieldContainer$2 = /*#__PURE__*/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"])), space$2[200]);
+})(templateObject_1$8 || (templateObject_1$8 = __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"])), space$2[200]);
 var StyledLabel$3 = /*#__PURE__*/styled__default.default.label.withConfig({
   displayName: "NumberInput__StyledLabel",
   componentId: "sc-qotc3w-1"
@@ -6888,72 +6700,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
 });
 NumberInput.displayName = 'NumberInput';
-var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$4;
-
-var PageTitleStyled = /*#__PURE__*/styled__default.default.div.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  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"
-/**
- * @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`.
- */])), tokens.semantic.space[600], function (_a) {
-  var $hasBackButton = _a.$hasBackButton;
-  return $hasBackButton ? tokens.semantic.space[0] : tokens.semantic.space[1200];
-});
-/**
- * @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,
-    hasBackButton = _b === void 0 ? false : _b,
-    subtitle = _a.subtitle;
-  return jsxRuntime.jsxs(PageTitleStyled, {
-    "$hasBackButton": hasBackButton,
-    children: [hasBackButton && jsxRuntime.jsx(IconButton, {
-      iconName: 'back',
-      size: 'large',
-      variant: 'naked',
-      url: '/music',
-      "aria-label": 'Go back to music page'
-    }), jsxRuntime.jsxs(Stack, {
-      direction: 'column',
-      gap: "md",
-      children: [jsxRuntime.jsx(Typography, {
-        variant: "h1",
-        children: title
-      }), subtitle && jsxRuntime.jsx(Typography, {
-        variant: 'caption',
-        color: 'subdued',
-        children: subtitle
-      })]
-    })]
-  });
-};
-var templateObject_1$8;
+var templateObject_1$8, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$4;
 
 var field$1 = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
@@ -8178,10 +7925,8 @@ var StyledBadge = /*#__PURE__*/styled__default.default.span.withConfig({
 var TabBar = function TabBar(_a) {
   var tabs = _a.tabs,
     activeTab = _a.activeTab,
-    onTabChange = _a.onTabChange;
-    // Deprecated: every variant renders as underline (decision 0020)
-    _a.variant;
-    var _b = _a["aria-label"],
+    onTabChange = _a.onTabChange,
+    _b = _a["aria-label"],
     ariaLabel = _b === void 0 ? 'Tab navigation' : _b,
     dataTestId = _a["data-testid"];
   var tabRefs = React.useRef([]);
@@ -8594,10 +8339,12 @@ var TransactionListItem = function TransactionListItem(_a) {
 };
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
 
-// Exception to decision 0014: the gap props are typed as base spacing keys (public API),
-// so they are looked up in base.spacing until they accept semantic keys.
-// eslint-disable-next-line no-restricted-syntax
-var gapSpacing = tokens.base.spacing;
+// Exception to decision 0014: the gap props are typed as base dimension keys (public API),
+// so they are looked up in the base tier until they accept semantic keys.
+var gapSpacing = __assign(__assign({}, tokens.base.dimension), {
+  // eslint-disable-next-line no-restricted-syntax
+  auto: tokens.base.spacing.auto
+});
 // Breakpoints using base tokens
 var breakpoints = {
   xs: tokens.semantic.breakpoint.xs,
@@ -8813,13 +8560,11 @@ exports.AgentInput = AgentInput;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
-exports.BooleanChip = BooleanChip;
 exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.CardLarge = CardLarge;
 exports.CardSmall = CardSmall;
-exports.CategoryBadge = CategoryBadge;
 exports.CategoryLabel = CategoryLabel;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
@@ -8839,13 +8584,11 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.InlineAlert = InlineAlert;
 exports.InputChip = InputChip;
-exports.LegacyChip = LegacyChip;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.Modal = Modal;
 exports.MoneyDisplay = MoneyDisplay;
 exports.NumberInput = NumberInput;
-exports.PageTitle = PageTitle;
 exports.PasswordField = PasswordField;
 exports.Picture = Picture;
 exports.ProgressBar = ProgressBar;
@@ -8854,7 +8597,6 @@ exports.SearchField = SearchField;
 exports.Sheet = Sheet;
 exports.Slider = Slider;
 exports.Stack = Stack;
-exports.StatusBadge = StatusBadge;
 exports.StatusLabel = StatusLabel;
 exports.StyledInputBase = StyledInputBase;
 exports.StyledTextAreaBase = StyledTextAreaBase;