@common-origin/design-system 2.19.0 → 2.21.0

package/dist/client.js

@@ -156,32 +156,32 @@ function withCssVariables(tree, path) {
 var tokens = withCssVariables(data.tokensJson);
 
 // Destructure tokens
-var semantic$l = tokens.semantic;
+var semantic$n = tokens.semantic;
 var initials = tokens.component.avatar.initials;
-var color$b = semantic$l.color,
-  size$3 = semantic$l.size;
-var radius$6 = semantic$l.radius;
-var AvatarContainer = styled__default.default.div.withConfig({
+var color$d = semantic$n.color,
+  size$4 = semantic$n.size;
+var radius$6 = semantic$n.radius;
+var AvatarContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
+})(templateObject_1$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$3.avatar[$size];
+  return size$4.avatar[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return size$3.avatar[$size];
-}, radius$6.full, color$b.fill.muted);
-var AvatarImage = styled__default.default.img.withConfig({
+  return size$4.avatar[$size];
+}, radius$6.full, color$d.fill.muted);
+var AvatarImage = /*#__PURE__*/styled__default.default.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$6.full);
-var AvatarInitials = styled__default.default.span.withConfig({
+})(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$6.full);
+var AvatarInitials = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -192,7 +192,7 @@ var AvatarInitials = styled__default.default.span.withConfig({
 ])), initials.fontFamily, initials.fontWeight, function (_a) {
   var $size = _a.$size;
   return initials.fontSize[$size];
-}, color$b.text["default"], initials.lineHeight);
+}, color$d.text["default"], initials.lineHeight);
 // Helper function to get initials from name
 var getInitials = function getInitials(name) {
   return name.split(' ').map(function (word) {
@@ -246,7 +246,7 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$M, templateObject_2$y, templateObject_3$w;
+var templateObject_1$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$L || (templateObject_1$L = __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
@@ -295,7 +295,7 @@ var fadeOut$1 = styled.keyframes(templateObject_1$L || (templateObject_1$L = __m
 // reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
 // still catches clicks (so they can't reach the page behind it) and the panel is inert.
 // Exits accelerate: things leaving speed up as they go (decision 0037).
-var exitAnimation = styled.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
+var exitAnimation = styled.css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
 // Content for screen readers only. The 1px size and -1px margin are part of the standard
 // visually-hidden technique, not design values, so they aren't tokens.
 ])), fadeOut$1, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.accelerate);
@@ -399,44 +399,44 @@ var rowForcedColors = function rowForcedColors(_a) {
   // the descendants' own rules.
   return "".concat(forcedColors, " {\n    ").concat(selected ? "background-color: Highlight;\n    ".concat(text('HighlightText'), "\n    && * {\n      color: inherit;\n      background-color: transparent;\n    }") : '', "\n    ").concat(!disabled && focused ? hover : '', "\n    ").concat(disabled ? '' : "&:hover {\n      ".concat(hover, "\n    }"), "\n  }");
 };
-var templateObject_1$L, templateObject_2$x, templateObject_3$v;
+var templateObject_1$N, templateObject_2$y, templateObject_3$v;
 
 var _a$a = tokens.semantic,
-  typography$2 = _a$a.typography,
-  color$a = _a$a.color,
+  typography$3 = _a$a.typography,
+  color$c = _a$a.color,
   letterSpacing = _a$a.letterSpacing;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
-    display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
-    h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
-    h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
-    h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
-    h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
-    subtitle: "font: ".concat(typography$2.subtitle, ";"),
-    body: "font: ".concat(typography$2.body, ";"),
-    small: "font: ".concat(typography$2.small, ";"),
-    overline: "font: ".concat(typography$2.overline, ";"),
-    caption: "font: ".concat(typography$2.caption, "; text-transform: uppercase;"),
+    display: "font: ".concat(typography$3.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h1: "font: ".concat(typography$3.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h2: "font: ".concat(typography$3.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h3: "font: ".concat(typography$3.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h4: "font: ".concat(typography$3.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h5: "font: ".concat(typography$3.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    h6: "font: ".concat(typography$3.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    subtitle: "font: ".concat(typography$3.subtitle, ";"),
+    body: "font: ".concat(typography$3.body, ";"),
+    small: "font: ".concat(typography$3.small, ";"),
+    overline: "font: ".concat(typography$3.overline, ";"),
+    caption: "font: ".concat(typography$3.caption, "; text-transform: uppercase;"),
     button1: "font: ".concat(tokens.component.button.sizes.large.font, ";"),
     button2: "font: ".concat(tokens.component.button.sizes.medium.font, ";"),
     button3: "font: ".concat(tokens.component.button.sizes.small.font, ";"),
-    label: "font: ".concat(typography$2.label, ";")
+    label: "font: ".concat(typography$3.label, ";")
   };
   return styles[variant] || styles.body;
 };
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
-    "default": color$a.text["default"],
-    emphasis: color$a.text.emphasis,
-    subdued: color$a.text.muted,
-    inverse: color$a.text.inverse,
-    disabled: color$a.text.disabled,
-    interactive: color$a.text.accent,
-    error: color$a.text.danger,
-    success: color$a.text.success,
-    warning: color$a.text.warning
+    "default": color$c.text["default"],
+    emphasis: color$c.text.emphasis,
+    subdued: color$c.text.muted,
+    inverse: color$c.text.inverse,
+    disabled: color$c.text.disabled,
+    interactive: color$c.text.accent,
+    error: color$c.text.danger,
+    success: color$c.text.success,
+    warning: color$c.text.warning
   };
   return colorMap[colorVariant] || colorMap["default"];
 };
@@ -461,13 +461,13 @@ var getDefaultElement = function getDefaultElement(variant) {
   };
   return elementMap[variant] || 'span';
 };
-var StyledTypography = styled__default.default.span.withConfig({
+var StyledTypography = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
+})(templateObject_1$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,21 +529,21 @@ var Typography = function Typography(_a) {
     children: children
   });
 };
-var templateObject_1$K;
+var templateObject_1$M;
 
-var semantic$k = tokens.semantic;
-var color$9 = semantic$k.color;
-var radius$5 = semantic$k.radius;
+var semantic$m = tokens.semantic;
+var color$b = semantic$m.color;
+var radius$5 = semantic$m.radius;
 var _a$9 = tokens.component.badge,
   dot = _a$9.dot,
   count = _a$9.count,
   ring = _a$9.ring;
-var scaleIn$2 = styled.keyframes(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
-var BadgeWrapper = styled__default.default.span.withConfig({
+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"
-})(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
-var BadgeIndicator = styled__default.default.span.withConfig({
+})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
+var BadgeIndicator = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -556,26 +556,26 @@ var BadgeIndicator = styled__default.default.span.withConfig({
 }, function (props) {
   return props.$isDot ? dot.size : count.height;
 }, function (props) {
-  return props.$isDot ? '0' : "0 ".concat(semantic$k.space.inset.xs);
-}, radius$5.full, count.lineHeight, ring.width, semantic$k.surface.base, scaleIn$2, semantic$k.motion.duration.moderate, semantic$k.motion.easing.decelerate, reducedMotion, function (props) {
-  return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic$k.border.width.thin, " solid currentColor; }");
+  return props.$isDot ? '0' : "0 ".concat(semantic$m.space.inset.xs);
+}, radius$5.full, count.lineHeight, ring.width, semantic$m.surface.base, scaleIn$2, semantic$m.motion.duration.moderate, semantic$m.motion.easing.decelerate, reducedMotion, function (props) {
+  return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic$m.border.width.thin, " solid currentColor; }");
 }, function (props) {
   switch (props.$variant) {
     case 'accent':
     case 'primary':
       // Deprecated alias for 'accent', removed in 3.0 (#169)
-      return "\n          background-color: ".concat(color$9.fill.accent, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$b.fill.accent, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color$9.fill.danger, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$b.fill.danger, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color$9.fill.warning, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$b.fill.warning, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color$9.fill.success, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$b.fill.success, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
     default:
-      return "\n          background-color: ".concat(color$9.fill.emphasis, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$b.fill.emphasis, ";\n          color: ").concat(color$b.text.inverse, ";\n        ");
   }
 });
-var ScreenReaderOnly$1 = styled__default.default.span.withConfig({
+var ScreenReaderOnly$1 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
   componentId: "sc-tjz4pp-2"
 })(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
@@ -616,16 +616,16 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$J, templateObject_2$w, 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.
-var semantic$j = tokens.semantic;
-var color$8 = semantic$j.color,
-  space$e = semantic$j.space,
-  radius$4 = semantic$j.radius,
-  surface = semantic$j.surface;
+var semantic$l = tokens.semantic;
+var color$a = semantic$l.color,
+  space$e = semantic$l.space,
+  radius$4 = semantic$l.radius,
+  surface = semantic$l.surface;
 /** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
 var spaceByLayoutKey = {
   none: space$e[0],
@@ -645,7 +645,7 @@ var spaceByLayoutKey = {
   '10xl': space$e[2000],
   '11xl': space$e[2400],
   // A keyword, not a step: it stays until the keyword question is settled (0031)
-  auto: semantic$j.spacing.layout.auto
+  auto: semantic$l.spacing.layout.auto
 };
 /** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
 var radiusByKey = {
@@ -665,76 +665,77 @@ var backgroundByKey = {
   page: surface.base,
   subtle: surface.raised,
   overlay: surface.scrim,
-  emphasis: color$8.fill.emphasis,
-  'emphasis-hover': color$8.fill['emphasis-hover'],
-  'emphasis-active': color$8.fill['emphasis-pressed'],
-  surface: color$8.fill.muted,
-  inverse: color$8.fill.inverse,
-  interactive: color$8.fill.accent,
-  'interactive-hover': color$8.fill['accent-hover'],
-  'interactive-active': color$8.fill['accent-pressed'],
-  'interactive-subtle': color$8.fill['accent-muted'],
-  'interactive-subtle-hover': color$8.fill['accent-muted-hover'],
-  'interactive-subtle-active': color$8.fill['accent-muted-pressed'],
-  error: color$8.fill.danger,
-  'error-hover': color$8.fill['danger-hover'],
-  'error-active': color$8.fill['danger-pressed'],
-  'error-subtle': color$8.fill['danger-muted'],
-  success: color$8.fill.success,
-  'success-subtle': color$8.fill['success-muted'],
-  warning: color$8.fill.warning,
-  'warning-subtle': color$8.fill['warning-muted'],
-  disabled: color$8.fill.disabled,
-  neutral: color$8.fill["default"],
-  'neutral-hover': color$8.fill['default-hover'],
-  'neutral-active': color$8.fill['default-pressed'],
-  transparent: color$8.fill.none,
-  'hover-overlay': color$8.fill['none-hover'],
-  'active-overlay': color$8.fill['none-pressed'],
-  'inverse-overlay': color$8.fill['inverse-none-hover'],
+  emphasis: color$a.fill.emphasis,
+  'emphasis-hover': color$a.fill['emphasis-hover'],
+  'emphasis-active': color$a.fill['emphasis-pressed'],
+  surface: color$a.fill.muted,
+  inverse: color$a.fill.inverse,
+  interactive: color$a.fill.accent,
+  'interactive-hover': color$a.fill['accent-hover'],
+  'interactive-active': color$a.fill['accent-pressed'],
+  'interactive-subtle': color$a.fill['accent-muted'],
+  'interactive-subtle-hover': color$a.fill['accent-muted-hover'],
+  'interactive-subtle-active': color$a.fill['accent-muted-pressed'],
+  error: color$a.fill.danger,
+  'error-hover': color$a.fill['danger-hover'],
+  'error-active': color$a.fill['danger-pressed'],
+  'error-subtle': color$a.fill['danger-muted'],
+  success: color$a.fill.success,
+  'success-subtle': color$a.fill['success-muted'],
+  warning: color$a.fill.warning,
+  'warning-subtle': color$a.fill['warning-muted'],
+  disabled: color$a.fill.disabled,
+  neutral: color$a.fill["default"],
+  'neutral-hover': color$a.fill['default-hover'],
+  'neutral-active': color$a.fill['default-pressed'],
+  transparent: color$a.fill.none,
+  'hover-overlay': color$a.fill['none-hover'],
+  'active-overlay': color$a.fill['none-pressed'],
+  'inverse-overlay': color$a.fill['inverse-none-hover'],
   // Moved to the component tier (decision 0031 §6)
   progressTrack: tokens.component.track.background
 };
 /** Box's `color` prop: text colours, old and new keys. */
 var textColorByKey = {
-  "default": color$8.text["default"],
-  emphasis: color$8.text.emphasis,
-  inverse: color$8.text.inverse,
-  disabled: color$8.text.disabled,
-  success: color$8.text.success,
-  warning: color$8.text.warning,
-  muted: color$8.text.muted,
-  accent: color$8.text.accent,
-  'accent-hover': color$8.text['accent-hover'],
-  'accent-pressed': color$8.text['accent-pressed'],
-  danger: color$8.text.danger,
-  subdued: color$8.text.muted,
-  interactive: color$8.text.accent,
-  'interactive-hover': color$8.text['accent-hover'],
-  'interactive-active': color$8.text['accent-pressed'],
-  error: color$8.text.danger
+  "default": color$a.text["default"],
+  emphasis: color$a.text.emphasis,
+  inverse: color$a.text.inverse,
+  disabled: color$a.text.disabled,
+  success: color$a.text.success,
+  warning: color$a.text.warning,
+  muted: color$a.text.muted,
+  accent: color$a.text.accent,
+  'accent-hover': color$a.text['accent-hover'],
+  'accent-pressed': color$a.text['accent-pressed'],
+  danger: color$a.text.danger,
+  ai: color$a.text.ai,
+  subdued: color$a.text.muted,
+  interactive: color$a.text.accent,
+  'interactive-hover': color$a.text['accent-hover'],
+  'interactive-active': color$a.text['accent-pressed'],
+  error: color$a.text.danger
 };
 /** Box's border props: border colours, old and new keys. */
 var borderColorByKey = {
-  "default": color$8.border["default"],
-  success: color$8.border.success,
-  warning: color$8.border.warning,
-  none: color$8.border.none,
-  emphasis: color$8.border.emphasis,
-  input: color$8.border.input,
-  'input-hover': color$8.border['input-hover'],
-  focus: color$8.border.focus,
-  accent: color$8.border.accent,
-  danger: color$8.border.danger,
-  subtle: color$8.border.emphasis,
-  control: color$8.border.input,
+  "default": color$a.border["default"],
+  success: color$a.border.success,
+  warning: color$a.border.warning,
+  none: color$a.border.none,
+  emphasis: color$a.border.emphasis,
+  input: color$a.border.input,
+  'input-hover': color$a.border['input-hover'],
+  focus: color$a.border.focus,
+  accent: color$a.border.accent,
+  danger: color$a.border.danger,
+  subtle: color$a.border.emphasis,
+  control: color$a.border.input,
   // `strong` split by use (0031); as a generic firm outline it is the hovered-input border
-  strong: color$8.border['input-hover'],
-  interactive: color$8.border.accent,
-  error: color$8.border.danger
+  strong: color$a.border['input-hover'],
+  interactive: color$a.border.accent,
+  error: color$a.border.danger
 };
 
-var StyledBox = styled__default.default.div.withConfig({
+var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -743,9 +744,9 @@ var StyledBox = styled__default.default.div.withConfig({
 })(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
 // Transform component that maps clean props to $-prefixed props for styled-components
 ])), function (props) {
-  return props.$display && styled.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && styled.css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && styled.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
   return props.$justifyContent && styled.css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
@@ -779,35 +780,35 @@ var StyledBox = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$pl && styled.css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), spaceByLayoutKey[props.$pl]);
 }, function (props) {
-  return props.$px && styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), spaceByLayoutKey[props.$px], spaceByLayoutKey[props.$px]);
+  return props.$px && styled.css(templateObject_19$2 || (templateObject_19$2 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), spaceByLayoutKey[props.$px], spaceByLayoutKey[props.$px]);
 }, function (props) {
-  return props.$py && styled.css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), spaceByLayoutKey[props.$py], spaceByLayoutKey[props.$py]);
+  return props.$py && styled.css(templateObject_20$2 || (templateObject_20$2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), spaceByLayoutKey[props.$py], spaceByLayoutKey[props.$py]);
 }, function (props) {
-  return props.$width && styled.css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
+  return props.$width && styled.css(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
 }, function (props) {
-  return props.$height && styled.css(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), props.$height);
+  return props.$height && styled.css(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), props.$height);
 }, function (props) {
-  return props.$maxWidth && styled.css(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["max-width: ", ";"], ["max-width: ", ";"])), props.$maxWidth);
+  return props.$maxWidth && styled.css(templateObject_23$2 || (templateObject_23$2 = __makeTemplateObject(["max-width: ", ";"], ["max-width: ", ";"])), props.$maxWidth);
 }, function (props) {
-  return props.$maxHeight && styled.css(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["max-height: ", ";"], ["max-height: ", ";"])), props.$maxHeight);
+  return props.$maxHeight && styled.css(templateObject_24$2 || (templateObject_24$2 = __makeTemplateObject(["max-height: ", ";"], ["max-height: ", ";"])), props.$maxHeight);
 }, function (props) {
-  return props.$minWidth && styled.css(templateObject_25$1 || (templateObject_25$1 = __makeTemplateObject(["min-width: ", ";"], ["min-width: ", ";"])), props.$minWidth);
+  return props.$minWidth && styled.css(templateObject_25$2 || (templateObject_25$2 = __makeTemplateObject(["min-width: ", ";"], ["min-width: ", ";"])), props.$minWidth);
 }, function (props) {
-  return props.$minHeight && styled.css(templateObject_26$1 || (templateObject_26$1 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), props.$minHeight);
+  return props.$minHeight && styled.css(templateObject_26$2 || (templateObject_26$2 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), props.$minHeight);
 }, function (props) {
-  return props.$position && styled.css(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["position: ", ";"], ["position: ", ";"])), props.$position);
+  return props.$position && styled.css(templateObject_27$2 || (templateObject_27$2 = __makeTemplateObject(["position: ", ";"], ["position: ", ";"])), props.$position);
 }, function (props) {
-  return props.$top && styled.css(templateObject_28$1 || (templateObject_28$1 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), props.$top);
+  return props.$top && styled.css(templateObject_28$2 || (templateObject_28$2 = __makeTemplateObject(["top: ", ";"], ["top: ", ";"])), props.$top);
 }, function (props) {
-  return props.$right && styled.css(templateObject_29$1 || (templateObject_29$1 = __makeTemplateObject(["right: ", ";"], ["right: ", ";"])), props.$right);
+  return props.$right && styled.css(templateObject_29$2 || (templateObject_29$2 = __makeTemplateObject(["right: ", ";"], ["right: ", ";"])), props.$right);
 }, function (props) {
-  return props.$bottom && styled.css(templateObject_30$1 || (templateObject_30$1 = __makeTemplateObject(["bottom: ", ";"], ["bottom: ", ";"])), props.$bottom);
+  return props.$bottom && styled.css(templateObject_30$2 || (templateObject_30$2 = __makeTemplateObject(["bottom: ", ";"], ["bottom: ", ";"])), props.$bottom);
 }, function (props) {
-  return props.$left && styled.css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
+  return props.$left && styled.css(templateObject_31$2 || (templateObject_31$2 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
 }, function (props) {
-  return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), radiusByKey[props.$borderRadius]);
+  return props.$borderRadius && styled.css(templateObject_32$2 || (templateObject_32$2 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), radiusByKey[props.$borderRadius]);
 }, function (props) {
-  return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
+  return props.$border && styled.css(templateObject_33$2 || (templateObject_33$2 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
 }, function (props) {
   return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderTop]);
 }, function (props) {
@@ -967,15 +968,15 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$I, templateObject_2$v, templateObject_3$t, templateObject_4$m, templateObject_5$i, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51;
+var templateObject_1$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 = styled__default.default.span.withConfig({
+var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+})(templateObject_1$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) {
@@ -1052,17 +1053,17 @@ var Icon = function Icon(_a) {
     }))
   });
 };
-var templateObject_1$H;
+var templateObject_1$J;
 
 var button$1 = tokens.component.button,
-  semantic$i = tokens.semantic;
+  semantic$k = tokens.semantic;
 // Height comes from size.control as a minimum and the content is centred, so there is no
 // vertical padding (decision 0034). Horizontal padding comes from the semantic spacing scale:
 // no component spacing tokens (decision 0022)
-var inset = semantic$i.space.inset;
-var control$1 = semantic$i.size.control;
+var inset = semantic$k.space.inset;
+var control$1 = semantic$k.size.control;
 // Base styles shared between button and link
-var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$i.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(semantic$i.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$k.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(semantic$k.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
@@ -1133,20 +1134,20 @@ var getSizeStyles = function getSizeStyles(_a) {
       return "\n        font: ".concat(button$1.sizes.large.font, ";\n        min-height: ").concat(control$1.lg, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
   }
 };
-var StyledButton = styled__default.default.button.withConfig({
+var StyledButton = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
-var StyledLink = styled__default.default.a.withConfig({
+})(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('$');
   },
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
-})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
 // Helper function to get icon size based on button size
 ])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
 // Helper function to get icon size based on button size
@@ -1249,15 +1250,15 @@ var Button = function Button(_a) {
     children: renderButtonContent(children, iconName, size)
   }));
 };
-var templateObject_1$G, templateObject_2$u;
+var templateObject_1$I, templateObject_2$v;
 
-var semantic$h = tokens.semantic;
-var color$7 = semantic$h.color;
+var semantic$j = tokens.semantic;
+var color$9 = semantic$j.color;
 var label$2 = tokens.component.badge.label;
-var category = color$7.category;
-var radius$3 = semantic$h.radius;
-var space$d = semantic$h.space;
-var labelHeight$1 = semantic$h.size.label;
+var category = color$9.category;
+var radius$3 = semantic$j.radius;
+var space$d = semantic$j.space;
+var labelHeight$1 = semantic$j.size.label;
 // Text on white or the -subtle fill (outlined and minimal), at least 4.5:1 (#115)
 var categoryText = {
   blue: category['blue-text'],
@@ -1269,16 +1270,16 @@ var categoryText = {
   orange: category['orange-text'],
   gray: category['gray-text']
 };
-var StyledCategoryLabel = styled__default.default.span.withConfig({
+var StyledCategoryLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "CategoryLabel__StyledCategoryLabel",
   componentId: "sc-1jx7bjo-0"
-})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"
+})(templateObject_1$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$h.border.width.thin, function (_a) {
+])), radius$3.full, semantic$j.border.width.thin, function (_a) {
   var $size = _a.$size;
   return labelHeight$1[$size];
 }, function (_a) {
@@ -1302,7 +1303,7 @@ var StyledCategoryLabel = styled__default.default.span.withConfig({
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
-    return color$7.text.inverse;
+    return color$9.text.inverse;
   }
   return categoryText[$color];
 }, function (_a) {
@@ -1315,11 +1316,11 @@ var StyledCategoryLabel = styled__default.default.span.withConfig({
 });
 // The visible content, hidden from assistive technology when an aria-label replaces it.
 // display: contents keeps the root's flex layout and gap.
-var VisibleContent$1 = styled__default.default.span.withConfig({
+var VisibleContent$1 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "CategoryLabel__VisibleContent",
   componentId: "sc-1jx7bjo-1"
-})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
-var HiddenLabel = styled__default.default.span.withConfig({
+})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var HiddenLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "CategoryLabel__HiddenLabel",
   componentId: "sc-1jx7bjo-2"
 })(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
@@ -1389,7 +1390,7 @@ var CategoryLabel = function CategoryLabel(_a) {
   });
 };
 CategoryLabel.displayName = 'CategoryLabel';
-var templateObject_1$F, templateObject_2$t, templateObject_3$s;
+var templateObject_1$H, templateObject_2$u, templateObject_3$s;
 
 // CategoryBadge sizes on the decision 0018 scale
 var toLabelSize = {
@@ -1413,8 +1414,8 @@ var CategoryBadge = function CategoryBadge(_a) {
 };
 CategoryBadge.displayName = 'CategoryBadge';
 
-var chip$1 = tokens.component.chip,
-  semantic$g = tokens.semantic;
+var chip$2 = tokens.component.chip,
+  semantic$i = tokens.semantic;
 // Helper function to get variant styles matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
   var $variant = _a.$variant,
@@ -1427,7 +1428,7 @@ var getVariantStyles = function getVariantStyles(_a) {
     // A selected disabled chip looks like any disabled chip; the checkmark keeps the
     // selected state visible (#110)
     if ($disabled) {
-      var disabled = chip$1.variants.subtle.disabled;
+      var disabled = chip$2.variants.subtle.disabled;
       return "\n        background-color: ".concat(disabled.backgroundColor, ";\n        color: ").concat(disabled.textColor, ";\n      ");
     }
     var _b = tokens.semantic.color,
@@ -1438,55 +1439,55 @@ var getVariantStyles = function getVariantStyles(_a) {
   }
   switch ($variant) {
     case 'emphasis':
-      return "\n        background-color: ".concat(chip$1.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip$1.variants.emphasis.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.variants.emphasis.disabled.backgroundColor : $clickable ? chip$1.variants.emphasis.hover.backgroundColor : chip$1.variants.emphasis.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.variants.emphasis.disabled.backgroundColor : $clickable ? chip$1.variants.emphasis.active.backgroundColor : chip$1.variants.emphasis.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.variants.emphasis.disabled.backgroundColor, ";\n          color: ").concat(chip$1.variants.emphasis.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip$2.variants.emphasis.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.emphasis.disabled.backgroundColor : $clickable ? chip$2.variants.emphasis.hover.backgroundColor : chip$2.variants.emphasis.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.emphasis.disabled.backgroundColor : $clickable ? chip$2.variants.emphasis.active.backgroundColor : chip$2.variants.emphasis.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.emphasis.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.emphasis.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'subtle':
-      return "\n        background-color: ".concat(chip$1.variants.subtle.backgroundColor, ";\n        color: ").concat(chip$1.variants.subtle.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.variants.subtle.disabled.backgroundColor : $clickable ? chip$1.variants.subtle.hover.backgroundColor : chip$1.variants.subtle.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.variants.subtle.disabled.backgroundColor : $clickable ? chip$1.variants.subtle.active.backgroundColor : chip$1.variants.subtle.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.variants.subtle.disabled.backgroundColor, ";\n          color: ").concat(chip$1.variants.subtle.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2.variants.subtle.backgroundColor, ";\n        color: ").concat(chip$2.variants.subtle.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.subtle.disabled.backgroundColor : $clickable ? chip$2.variants.subtle.hover.backgroundColor : chip$2.variants.subtle.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.subtle.disabled.backgroundColor : $clickable ? chip$2.variants.subtle.active.backgroundColor : chip$2.variants.subtle.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.subtle.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.subtle.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'interactive':
-      return "\n        background-color: ".concat(chip$1.variants.interactive.backgroundColor, ";\n        color: ").concat(chip$1.variants.interactive.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.variants.interactive.disabled.backgroundColor : $clickable ? chip$1.variants.interactive.hover.backgroundColor : chip$1.variants.interactive.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.variants.interactive.disabled.backgroundColor : $clickable ? chip$1.variants.interactive.active.backgroundColor : chip$1.variants.interactive.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.variants.interactive.disabled.backgroundColor, ";\n          color: ").concat(chip$1.variants.interactive.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2.variants.interactive.backgroundColor, ";\n        color: ").concat(chip$2.variants.interactive.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.variants.interactive.disabled.backgroundColor : $clickable ? chip$2.variants.interactive.hover.backgroundColor : chip$2.variants.interactive.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.variants.interactive.disabled.backgroundColor : $clickable ? chip$2.variants.interactive.active.backgroundColor : chip$2.variants.interactive.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.variants.interactive.disabled.backgroundColor, ";\n          color: ").concat(chip$2.variants.interactive.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'default':
     default:
-      return "\n        background-color: ".concat(chip$1["default"].backgroundColor, ";\n        color: ").concat(chip$1["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.disabled.backgroundColor : $clickable ? chip$1.hover.backgroundColor : chip$1["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.disabled.backgroundColor : $clickable ? chip$1.active.backgroundColor : chip$1["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.disabled.backgroundColor, ";\n          color: ").concat(chip$1.disabled.textColor, ";\n        ") : '', "\n      ");
+      return "\n        background-color: ".concat(chip$2["default"].backgroundColor, ";\n        color: ").concat(chip$2["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$2.disabled.backgroundColor : $clickable ? chip$2.hover.backgroundColor : chip$2["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$2.disabled.backgroundColor : $clickable ? chip$2.active.backgroundColor : chip$2["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$2.disabled.backgroundColor, ";\n          color: ").concat(chip$2.disabled.textColor, ";\n        ") : '', "\n      ");
   }
 };
 // Chips have one size: 24px from the label scale as a minimum, with the content centred
 // and no vertical padding (decisions 0034 and 0035). Horizontal padding comes from the
 // semantic spacing scale (decision 0022).
-var sizeStyles = "\n  font: ".concat(chip$1.sizes.medium.font, ";\n  min-height: ").concat(semantic$g.size.label.medium, ";\n  padding: 0 ").concat(semantic$g.space.inset.sm, ";\n");
+var sizeStyles = "\n  font: ".concat(chip$2.sizes.medium.font, ";\n  min-height: ").concat(semantic$i.size.label.medium, ";\n  padding: 0 ").concat(semantic$i.space.inset.sm, ";\n");
 
-var chip = tokens.component.chip,
-  semantic$f = tokens.semantic;
+var chip$1 = tokens.component.chip,
+  semantic$h = tokens.semantic;
 // Base styled component using direct prop interpolation like Button
-var StyledChip = styled__default.default.span.withConfig({
+var StyledChip = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"
+})(templateObject_1$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["default"].borderRadius, semantic$f.motion.transition.feedback, function (props) {
+])), chip$1["default"].borderRadius, semantic$h.motion.transition.feedback, function (props) {
   return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
 }, forcedColorsEdge, function (props) {
   return props.$disabled ? "".concat(forcedColors, " { color: GrayText; }") : '';
-}, getVariantStyles, sizeStyles, chip.focus.outline, semantic$f.border.focusOffset);
+}, getVariantStyles, sizeStyles, chip$1.focus.outline, semantic$h.border.focusOffset);
 // Icon container for selected indicator or leading icons
-var IconContainer = styled__default.default.span.withConfig({
+var IconContainer = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "ChipBase__IconContainer",
   componentId: "sc-moa6zc-1"
-})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
+})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
 // Close button for dismissible chips
 ])), tokens.semantic.space[100]);
 // Close button for dismissible chips
-var CloseButton = styled__default.default.button.withConfig({
+var CloseButton = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip.closeButton.size, chip.closeButton.size, tokens.semantic.space[0], semantic$f.size.label.medium, semantic$f.size.label.medium, tokens.semantic.radius.xs, function (props) {
+})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip$1.closeButton.size, chip$1.closeButton.size, tokens.semantic.space[0], semantic$h.size.label.medium, semantic$h.size.label.medium, tokens.semantic.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic$f.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip.focus.outline, semantic$f.border.focusOffset, chip["default"].borderRadius);
-var templateObject_1$E, templateObject_2$s, templateObject_3$r;
+}, semantic$h.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip$1.focus.outline, semantic$h.border.focusOffset, chip$1["default"].borderRadius);
+var templateObject_1$G, templateObject_2$t, templateObject_3$r;
 
 /**
  * Chip - a static, non-interactive label for tags, categories and metadata.
@@ -1723,11 +1724,61 @@ var BooleanChip = function BooleanChip(_a) {
   }));
 };
 
+var chip = tokens.component.chip,
+  semantic$g = tokens.semantic;
+var color$8 = semantic$g.color;
+// Outlined, with the naked fill ladder on hover and press (decisions 0030, 0046): the edge keeps it
+// visible on white, the page and AgentInput's docked band
+var StyledSuggestionChip = /*#__PURE__*/styled__default.default.button.withConfig({
+  displayName: "SuggestionChip__StyledSuggestionChip",
+  componentId: "sc-1k0njm-0"
+})(templateObject_1$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
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - A native button: Enter and Space pick it, and its text is its accessible name
+ * - Outlined, with the naked hover and pressed fills; no selected state
+ * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
+ */])), semantic$g.border.width.thin, color$8.border.input, chip["default"].borderRadius, color$8.fill.none, color$8.text["default"], semantic$g.motion.transition.feedback, sizeStyles, color$8.fill['none-hover'], color$8.fill['none-pressed'], chip.focus.outline, semantic$g.border.focusOffset, color$8.border.emphasis, color$8.text.disabled, forcedColors);
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - A native button: Enter and Space pick it, and its text is its accessible name
+ * - Outlined, with the naked hover and pressed fills; no selected state
+ * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
+ */
+var SuggestionChip = function SuggestionChip(_a) {
+  var children = _a.children,
+    onClick = _a.onClick,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    dataTestId = _a["data-testid"];
+  return jsxRuntime.jsx(StyledSuggestionChip, {
+    type: "button",
+    onClick: onClick,
+    disabled: disabled,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+SuggestionChip.displayName = 'SuggestionChip';
+var templateObject_1$F;
+
 var space$c = tokens.semantic.space;
-var StyledContainer$2 = styled__default.default.div.withConfig({
+var StyledContainer$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), space$c[600], space$c[600], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
+})(templateObject_1$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"]);
@@ -1735,12 +1786,12 @@ var Container$1 = function Container(_a) {
     children: children
   }));
 };
-var templateObject_1$D;
+var templateObject_1$E;
 
-var PictureWrapper = styled__default.default.div.withConfig({
+var PictureWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"
+})(templateObject_1$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.
@@ -1748,16 +1799,16 @@ var PictureWrapper = styled__default.default.div.withConfig({
 // A clickable image answers input on the image itself (decision 0029, #185): it fades on hover and
 // one step further while pressed, and draws the system focus ring around the image, following its
 // rounded corners. Fading isn't movement, so it stays under reduced motion.
-var clickableImage = styled.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
-var ImageLink = styled__default.default.a.withConfig({
+var clickableImage = styled.css(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
+var ImageLink = /*#__PURE__*/styled__default.default.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
 })(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), clickableImage);
-var ImageButton = styled__default.default.button.withConfig({
+var ImageButton = /*#__PURE__*/styled__default.default.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
 })(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  width: 100%;\n  ", "\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  width: 100%;\n  ", "\n"])), clickableImage);
-var StyledImage = styled__default.default.img.withConfig({
+var StyledImage = /*#__PURE__*/styled__default.default.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
 })(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), tokens.semantic.radius.sm);
@@ -1790,18 +1841,18 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$C, templateObject_2$r, templateObject_3$q, templateObject_4$l, templateObject_5$h;
+var templateObject_1$D, templateObject_2$s, templateObject_3$q, templateObject_4$l, templateObject_5$h;
 
 var _a$8 = tokens.semantic,
-  typography$1 = _a$8.typography,
-  color$6 = _a$8.color;
-var TimeStyled = styled__default.default.time.withConfig({
+  typography$2 = _a$8.typography,
+  color$7 = _a$8.color;
+var TimeStyled = /*#__PURE__*/styled__default.default.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * Formats a date with smart relative/absolute logic
- */])), typography$1.label, color$6.text.muted);
+ */])), typography$2.label, color$7.text.muted);
 /**
  * Formats a date with smart relative/absolute logic
  */
@@ -1844,21 +1895,21 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$B;
+var templateObject_1$C;
 
 var _a$7 = tokens.semantic,
   motion$5 = _a$7.motion,
   border$3 = _a$7.border,
   space$b = _a$7.space,
-  size$2 = _a$7.size,
+  size$3 = _a$7.size,
   _b$2 = tokens.component,
   iconButton = _b$2.iconButton,
   button = _b$2.button;
 // Height and width come from size.control as a minimum (decision 0034)
 var control = {
-  small: size$2.control.sm,
-  medium: size$2.control.md,
-  large: size$2.control.lg
+  small: size$3.control.sm,
+  medium: size$3.control.md,
+  large: size$3.control.lg
 };
 // Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
 var padding = {
@@ -1899,13 +1950,13 @@ var colours = function colours(variant) {
   var _a;
   return (_a = variants[variant]) !== null && _a !== void 0 ? _a : variants.primary;
 };
-var IconButtonStyled = styled__default.default.button.withConfig({
+var IconButtonStyled = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
+})(templateObject_1$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) {
@@ -1983,15 +2034,15 @@ var IconButton = function IconButton(_a) {
     })
   }));
 };
-var templateObject_1$A;
+var templateObject_1$B;
 
-var StyledWrapper = styled__default.default.span.withConfig({
+var StyledWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"
+})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -2098,29 +2149,29 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     })]
   });
 };
-var templateObject_1$z;
+var templateObject_1$A;
 
 // Destructure tokens
-var semantic$e = tokens.semantic;
-var _a$6 = __assign(__assign({}, semantic$e), {
+var semantic$f = tokens.semantic;
+var _a$6 = __assign(__assign({}, semantic$f), {
     component: tokens.component
   }),
-  color$5 = _a$6.color,
+  color$6 = _a$6.color,
   motion$4 = _a$6.motion,
   radius$2 = _a$6.radius,
   component$2 = _a$6.component;
-var ProgressBarContainer = styled__default.default.div.withConfig({
+var ProgressBarContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
 })(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"])), tokens.component.track.background, radius$2.xs, forcedColorsEdge, function (props) {
-  return props.$variant === 'horizontal' && styled.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
+  return props.$variant === 'horizontal' && styled.css(templateObject_1$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$q || (templateObject_2$q = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
+  return props.$variant === 'vertical' && styled.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
 });
-var ProgressBarFill = styled__default.default.div.withConfig({
+var ProgressBarFill = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -2130,15 +2181,15 @@ var ProgressBarFill = styled__default.default.div.withConfig({
   var backgroundColor;
   switch (props.$color) {
     case 'success':
-      backgroundColor = color$5.fill.success;
+      backgroundColor = color$6.fill.success;
       break;
     case 'error':
-      backgroundColor = color$5.fill.danger;
+      backgroundColor = color$6.fill.danger;
       break;
     case 'default':
     default:
       // Near-black, like Slider's fill (decision 0029)
-      backgroundColor = color$5.fill.emphasis;
+      backgroundColor = color$6.fill.emphasis;
       break;
   }
   return styled.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
@@ -2179,19 +2230,19 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$y, templateObject_2$q, templateObject_3$p, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
+var templateObject_1$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;
 // Margins come from the semantic separator spacing: no component spacing tokens (decision 0022)
 var space$a = tokens.semantic.space;
-var StyledDivider = styled__default.default.div.withConfig({
+var StyledDivider = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
+})(templateObject_1$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.
  *
@@ -2304,15 +2355,15 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$x;
+var templateObject_1$y;
 
-var StyledStack = styled__default.default.div.withConfig({
+var StyledStack = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
+})(templateObject_1$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
 ])));
@@ -2366,7 +2417,7 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
-var templateObject_1$w;
+var templateObject_1$x;
 
 // Destructure tokens for cleaner access
 var statusColors = tokens.component.status;
@@ -2379,7 +2430,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$v || (templateObject_1$v = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
+var scaleIn$1 = styled.keyframes(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
   var configs = {
     pending: {
@@ -2424,7 +2475,7 @@ var getStatusConfig = function getStatusConfig(status) {
   return configs[status];
 };
 // Size configuration
-var sizeConfig$1 = {
+var sizeConfig$2 = {
   small: {
     height: labelHeight.small,
     padding: "".concat(space$9[100], " ").concat(space$9[200]),
@@ -2440,22 +2491,22 @@ var sizeConfig$1 = {
     iconSize: 'sm'
   }
 };
-var StyledStatusLabel = styled__default.default.span.withConfig({
+var StyledStatusLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "StatusLabelBase__StyledStatusLabel",
   componentId: "sc-1ye9xz5-0"
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.full, scaleIn$1, duration$3.moderate, easing$3.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
+})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.full, scaleIn$1, duration$3.moderate, easing$3.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
   var $size = _a.$size;
-  var size = sizeConfig$1[$size];
+  var size = sizeConfig$2[$size];
   return "\n      height: ".concat(size.height, ";\n      padding: ").concat(size.padding, ";\n      font: ").concat(size.font, ";\n      font-weight: ").concat(label$1.fontWeight, ";\n      gap: ").concat(size.gap, ";\n    ");
 }, function (_a) {
   var $status = _a.$status;
   var config = getStatusConfig($status);
   return "\n      background-color: ".concat(config.bgColor, ";\n      color: ").concat(config.color, ";\n    ");
 });
-var ScreenReaderOnly = styled__default.default.span.withConfig({
+var ScreenReaderOnly = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "StatusLabelBase__ScreenReaderOnly",
   componentId: "sc-1ye9xz5-1"
 })(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
@@ -2464,7 +2515,7 @@ var ScreenReaderOnly = styled__default.default.span.withConfig({
 ])), visuallyHidden);
 // The visible content, hidden from assistive technology when an aria-label replaces it.
 // display: contents keeps the root's flex layout and gap.
-var VisibleContent = styled__default.default.span.withConfig({
+var VisibleContent = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "StatusLabelBase__VisibleContent",
   componentId: "sc-1ye9xz5-2"
 })(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
@@ -2490,7 +2541,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"];
   var statusConfig = getStatusConfig(status);
-  var sizeStyles = sizeConfig$1[size];
+  var sizeStyles = sizeConfig$2[size];
   var displayLabel = label || statusConfig.label;
   // A blank aria-label is no label at all, so it falls back like a missing one
   var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
@@ -2516,7 +2567,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     })]
   });
 };
-var templateObject_1$v, templateObject_2$p, templateObject_3$o, templateObject_4$j;
+var templateObject_1$w, templateObject_2$q, templateObject_3$o, templateObject_4$j;
 
 /**
  * StatusBadge displays a transaction or task status.
@@ -2550,19 +2601,19 @@ var StatusLabel = function StatusLabel(props) {
 };
 StatusLabel.displayName = 'StatusLabel';
 
-var semantic$d = tokens.semantic;
-var color$4 = semantic$d.color,
-  size$1 = semantic$d.size;
+var semantic$e = tokens.semantic;
+var color$5 = semantic$e.color,
+  size$2 = semantic$e.size;
 var label = tokens.component.badge.label;
-var space$8 = semantic$d.space;
-var radius = semantic$d.radius;
-var StyledTag = styled__default.default.span.withConfig({
+var space$8 = semantic$e.space;
+var radius = semantic$e.radius;
+var StyledTag = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Tag__StyledTag",
   componentId: "sc-lzfmti-0"
-})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
 /**
  * Tag component for categorizing and labeling content
  *
@@ -2570,7 +2621,7 @@ var StyledTag = styled__default.default.span.withConfig({
  * Tags help users quickly identify and understand content classification.
  */])), radius.sm, function (_a) {
   var $size = _a.$size;
-  return size$1.label[$size];
+  return size$2.label[$size];
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? "0 ".concat(space$8[200]) : "".concat(space$8[100], " ").concat(space$8[200]);
@@ -2578,33 +2629,33 @@ var StyledTag = styled__default.default.span.withConfig({
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$4.fill['accent-muted'];
+      return color$5.fill['accent-muted'];
     case 'success':
-      return color$4.fill['success-muted'];
+      return color$5.fill['success-muted'];
     case 'warning':
-      return color$4.fill['warning-muted'];
+      return color$5.fill['warning-muted'];
     case 'error':
-      return color$4.fill['danger-muted'];
+      return color$5.fill['danger-muted'];
     case 'emphasis':
-      return color$4.fill.emphasis;
+      return color$5.fill.emphasis;
     default:
-      return color$4.fill.muted;
+      return color$5.fill.muted;
   }
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$4.text.accent;
+      return color$5.text.accent;
     case 'success':
-      return color$4.text.success;
+      return color$5.text.success;
     case 'warning':
-      return color$4.text.warning;
+      return color$5.text.warning;
     case 'error':
-      return color$4.text.danger;
+      return color$5.text.danger;
     case 'emphasis':
-      return color$4.text.inverse;
+      return color$5.text.inverse;
     default:
-      return color$4.text["default"];
+      return color$5.text["default"];
   }
 }, function (_a) {
   var $variant = _a.$variant,
@@ -2612,17 +2663,17 @@ var StyledTag = styled__default.default.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'interactive':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.accent);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.accent);
     case 'success':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.success);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.success);
     case 'warning':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.warning);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.warning);
     case 'error':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.danger);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border.danger);
     case 'emphasis':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.fill.emphasis);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.fill.emphasis);
     default:
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border["default"]);
+      return "".concat(semantic$e.border.width.thin, " solid ").concat(color$5.border["default"]);
   }
 });
 /**
@@ -2654,28 +2705,112 @@ var Tag = function Tag(_a) {
     children: children
   }));
 };
-var templateObject_1$u;
+var templateObject_1$v;
+
+var semantic$d = tokens.semantic;
+var color$4 = semantic$d.color,
+  typography$1 = semantic$d.typography,
+  size$1 = semantic$d.size;
+var labels = {
+  suggested: 'Suggested',
+  removal: 'Will be removed'
+};
+var sizeConfig$1 = {
+  small: {
+    font: typography$1.caption,
+    gap: semantic$d.space[100],
+    icon: 'xs'
+  },
+  medium: {
+    font: typography$1.small,
+    gap: semantic$d.space[200],
+    icon: 'sm'
+  }
+};
+var StyledAILabel = /*#__PURE__*/styled__default.default.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AILabel__StyledAILabel",
+  componentId: "sc-qknkn-0"
+})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+  var $size = _a.$size;
+  return size$1.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig$1[$size].gap;
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig$1[$size].font;
+}, color$4.text.ai);
+var StyledIcon = /*#__PURE__*/styled__default.default.span.withConfig({
+  displayName: "AILabel__StyledIcon",
+  componentId: "sc-qknkn-1"
+})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: inline-flex;\n  color: ", ";\n"], ["\n  display: inline-flex;\n  color: ", ";\n"
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */])), color$4.icon.ai);
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+var AILabel = function AILabel(_a) {
+  var _b = _a.kind,
+    kind = _b === void 0 ? 'suggested' : _b,
+    _c = _a.size,
+    labelSize = _c === void 0 ? 'medium' : _c,
+    dataTestId = _a["data-testid"];
+  return jsxRuntime.jsxs(StyledAILabel, {
+    "$size": labelSize,
+    "data-testid": dataTestId,
+    children: [jsxRuntime.jsx(StyledIcon, {
+      "aria-hidden": "true",
+      children: jsxRuntime.jsx(Icon, {
+        name: "ai",
+        size: sizeConfig$1[labelSize].icon,
+        iconColor: "inherit"
+      })
+    }), labels[kind]]
+  });
+};
+AILabel.displayName = 'AILabel';
+var templateObject_1$u, templateObject_2$p;
 
 // Destructure tokens for cleaner access
 var semantic$c = tokens.semantic;
 var space$7 = semantic$c.space;
-var StyledBalanceSection = styled__default.default.div.withConfig({
+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]);
-var StyledTrendSection = styled__default.default.div.withConfig({
+var StyledTrendSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
   componentId: "sc-1erp7zn-1"
 })(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), space$7[100]);
-styled__default.default.div.withConfig({
+/*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledActions",
   componentId: "sc-1erp7zn-2"
 })(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), space$7[200]);
-var StyledStackWrapper = styled__default.default.div.withConfig({
+var StyledStackWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
   componentId: "sc-1erp7zn-3"
 })(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
-var StyledHeaderWrapper = styled__default.default.div.withConfig({
+var StyledHeaderWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledHeaderWrapper",
   componentId: "sc-1erp7zn-4"
 })(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: calc(-1 * ", ");\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: calc(-1 * ", ");\n  }\n"
@@ -2841,7 +2976,7 @@ var semantic$b = tokens.semantic;
 var _a$4 = semantic$b.motion,
   duration$2 = _a$4.duration,
   easing$2 = _a$4.easing;
-var StyledListItem = styled__default.default.li.withConfig({
+var StyledListItem = /*#__PURE__*/styled__default.default.li.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -2858,7 +2993,7 @@ var StyledListItem = styled__default.default.li.withConfig({
     $disabled = _a.$disabled;
   return $destructive && !$disabled && "\n    color: ".concat(semantic$b.color.text.danger, ";\n  ");
 });
-var StyledItemContent = styled__default.default.div.withConfig({
+var StyledItemContent = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -2883,19 +3018,19 @@ var StyledItemContent = styled__default.default.div.withConfig({
     textSelector: "".concat(StyledTextContent, " > :first-child")
   });
 }, semantic$b.border.focus, semantic$b.border.focusOffset);
-var StyledIconContainer$1 = styled__default.default.div.withConfig({
+var StyledIconContainer$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
   componentId: "sc-1wzzt21-2"
 })(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg);
-var StyledTextContent = styled__default.default.div.withConfig({
+var StyledTextContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ListItem__StyledTextContent",
   componentId: "sc-1wzzt21-3"
 })(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$b.space[100]);
-var StyledRightContent = styled__default.default.div.withConfig({
+var StyledRightContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ListItem__StyledRightContent",
   componentId: "sc-1wzzt21-4"
 })(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$b.space[200]);
-var StyledChevronIcon = styled__default.default.div.withConfig({
+var StyledChevronIcon = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -2905,7 +3040,7 @@ var StyledChevronIcon = styled__default.default.div.withConfig({
   var $expanded = _a.$expanded;
   return $expanded ? '180deg' : '0deg';
 }, reducedMotion);
-var StyledExpandedContent = styled__default.default.div.withConfig({
+var StyledExpandedContent = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -3099,14 +3234,14 @@ var _a$3 = tokens.semantic,
   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 fadeIn$2 = styled.keyframes(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var StyledOverlay$2 = styled__default.default.div.withConfig({
+var StyledOverlay$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
 })(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), tokens.semantic.surface.scrim, tokens.semantic.layer.modal, fadeIn$2, motion$3.duration.moderate, motion$3.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
-var StyledActionSheet = styled__default.default.div.withConfig({
+var StyledActionSheet = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
 })(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.raised, tokens.semantic.radius.lg, tokens.semantic.radius.lg, elevation$2.overlay, tokens.semantic.layer.modal, slideUp, motion$3.duration.slow, motion$3.easing.decelerate, function (_a) {
@@ -3116,19 +3251,19 @@ var StyledActionSheet = styled__default.default.div.withConfig({
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
-var StyledHeader$2 = styled__default.default.div.withConfig({
+var StyledHeader$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledHeader",
   componentId: "sc-regbol-2"
 })(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), space$6[400], space$6[400], space$6[300], border$2["default"]);
-var StyledHeaderContent = styled__default.default.div.withConfig({
+var StyledHeaderContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
 })(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var StyledCloseButton = styled__default.default.button.withConfig({
+var StyledCloseButton = /*#__PURE__*/styled__default.default.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
 })(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space$6[200], color$3.icon.muted, tokens.semantic.radius.sm, motion$3.transition.feedback, space$6[200], color$3.icon["default"], color$3.fill.muted, border$2.focus, border$2.focusOffset);
-var StyledActionsList = styled__default.default.ul.withConfig({
+var StyledActionsList = /*#__PURE__*/styled__default.default.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
 })(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"
@@ -3370,6 +3505,10 @@ function detectSpeechRecognitionConstructor(targetWindow) {
 function normalizeTranscript(input) {
   return input.replace(/\s+/g, ' ').trim();
 }
+/** Typed text: like a transcript, but line breaks are kept (spaces around them are dropped). */
+function normalizeMessage(input) {
+  return input.replace(/[^\S\n]+/g, ' ').replace(/ ?\n ?/g, '\n').trim();
+}
 function mapSpeechErrorCode(error) {
   switch (error) {
     case 'not-allowed':
@@ -3456,94 +3595,165 @@ function agentInputStateTransition(currentState, event) {
 
 var semantic$a = tokens.semantic,
   component$1 = tokens.component;
-var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
 var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
 var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
+// The counter appears from this share of maxLength
+var COUNTER_THRESHOLD = 0.8;
+// Layout effects warn during server rendering in React 18
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var rotateRing = styled.keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Container = styled__default.default.div.withConfig({
+var Container = /*#__PURE__*/styled__default.default.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "AgentInput__Container",
   componentId: "sc-fhl996-0"
-})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), semantic$a.space[200]);
-var ControlsRow = styled__default.default.div.withConfig({
+})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n\n  ", "\n"])), semantic$a.space[200], function (_a) {
+  var $docked = _a.$docked;
+  return $docked && styled.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n      position: sticky;\n      bottom: 0;\n      z-index: ", ";\n      /* The band hides content scrolling past the field and status line (decisions 0006, 0031) */\n      background-color: ", ";\n      padding-top: ", ";\n      /* Clears the home indicator; zero unless the page sets viewport-fit=cover */\n      padding-bottom: env(safe-area-inset-bottom, 0px);\n    "], ["\n      position: sticky;\n      bottom: 0;\n      z-index: ", ";\n      /* The band hides content scrolling past the field and status line (decisions 0006, 0031) */\n      background-color: ", ";\n      padding-top: ", ";\n      /* Clears the home indicator; zero unless the page sets viewport-fit=cover */\n      padding-bottom: env(safe-area-inset-bottom, 0px);\n    "])), semantic$a.layer.sticky, semantic$a.surface.base, semantic$a.space[300]);
+});
+var ControlsRow = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__ControlsRow",
   componentId: "sc-fhl996-1"
-})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var InputShell = styled__default.default.div.withConfig({
+})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var InputShell = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__InputShell",
   componentId: "sc-fhl996-2"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), semantic$a.space[200], semantic$a.space[100], semantic$a.space[200], semantic$a.space[100], semantic$a.space.inset.lg, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.radius['3xl'], semantic$a.elevation.raised, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, component$1.input.focus.borderColor, component$1.input.focus.outline, semantic$a.border.focusOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
-var Input = styled__default.default.input.withConfig({
+})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  display: flex;\n  /* Actions sit beside the last line as the field grows */\n  align-items: flex-end;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  /* Actions sit beside the last line as the field grows */\n  align-items: flex-end;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"
+// One row is a control-height field; it grows with its content to six rows, then scrolls.
+// The height is set from scrollHeight in resizeField; 1lh is the body line height.
+])), semantic$a.space[200], semantic$a.space[100], semantic$a.space[200], semantic$a.space[100], semantic$a.space.inset.lg, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.radius['3xl'], semantic$a.elevation.raised, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, component$1.input.focus.borderColor, component$1.input.focus.outline, semantic$a.border.focusOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
+// One row is a control-height field; it grows with its content to six rows, then scrolls.
+// The height is set from scrollHeight in resizeField; 1lh is the body line height.
+var Input = /*#__PURE__*/styled__default.default.textarea.withConfig({
   displayName: "AgentInput__Input",
   componentId: "sc-fhl996-3"
-})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$a.size.control.lg, semantic$a.typography.body, semantic$a.color.text["default"], component$1.input.placeholder.textColor, semantic$a.color.text.disabled);
-var InputActions = styled__default.default.div.withConfig({
+})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: block;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  height: ", ";\n  min-height: ", ";\n  max-height: calc(5lh + ", ");\n  margin: 0;\n  padding: calc((", " - 1lh) / 2) 0;\n  resize: none;\n  overflow-y: hidden;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  display: block;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  height: ", ";\n  min-height: ", ";\n  max-height: calc(5lh + ", ");\n  margin: 0;\n  padding: calc((", " - 1lh) / 2) 0;\n  resize: none;\n  overflow-y: hidden;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$a.size.control.lg, semantic$a.size.control.lg, semantic$a.size.control.lg, semantic$a.size.control.lg, semantic$a.typography.body, semantic$a.color.text["default"], component$1.input.placeholder.textColor, semantic$a.color.text.disabled);
+var InputActions = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__InputActions",
   componentId: "sc-fhl996-4"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$a.space[200]);
-var CircularActionIconButton = styled__default.default(IconButton).withConfig({
+})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  /* Centres the buttons on a one-row field, and keeps them level with the last line as it grows */\n  padding-bottom: calc((", " - ", ") / 2);\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  /* Centres the buttons on a one-row field, and keeps them level with the last line as it grows */\n  padding-bottom: calc((", " - ", ") / 2);\n"])), semantic$a.space[200], semantic$a.size.control.lg, semantic$a.size.control.md);
+var CircularActionIconButton = /*#__PURE__*/styled__default.default(IconButton).withConfig({
   displayName: "AgentInput__CircularActionIconButton",
   componentId: "sc-fhl996-5"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$a.radius.full);
-var InputWrapper = styled__default.default.div.withConfig({
+})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$a.radius.full);
+var InputWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__InputWrapper",
   componentId: "sc-fhl996-6"
-})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
-var MicButtonWrapper = styled__default.default.div.withConfig({
+})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
+var MicButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicButtonWrapper",
   componentId: "sc-fhl996-7"
-})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"
+})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"
 // Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
 // eslint-disable-next-line no-restricted-syntax
 ])), semantic$a.radius.full);
 // Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
 // eslint-disable-next-line no-restricted-syntax
-var ringMask = styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"], ["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"])));
-var MicListeningRing = styled__default.default.span.withConfig({
+var ringMask = styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"], ["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"])));
+var MicListeningRing = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicListeningRing",
   componentId: "sc-fhl996-8"
-})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), semantic$a.border.width.thick, semantic$a.space[100], semantic$a.border.focusOffset, semantic$a.radius.full, semantic$a.color.fill['accent-muted'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-hover'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-muted'], ringMask, ringMask, function (_a) {
+})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"
+// Maximum suggestions shown (decision 0046, #280)
+])), semantic$a.border.width.thick, semantic$a.space[100], semantic$a.border.focusOffset, semantic$a.radius.full, semantic$a.color.fill['accent-muted'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-hover'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-muted'], ringMask, ringMask, function (_a) {
   var $reducedMotion = _a.$reducedMotion;
-  return !$reducedMotion && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+  return !$reducedMotion && styled.css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
 });
-var StatusRow = styled__default.default.div.withConfig({
-  displayName: "AgentInput__StatusRow",
+// Maximum suggestions shown (decision 0046, #280)
+var MAX_SUGGESTIONS = 3;
+var regionEnter = styled.keyframes(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"])), semantic$a.motion.distance.sm);
+var regionFadeIn = styled.keyframes(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n"
+// Leaving content fades, then its space closes, as with Alert's dismiss (decision 0015). A grid
+// row from 1fr to 0fr collapses to the content's own height without measuring it.
+])));
+// Leaving content fades, then its space closes, as with Alert's dismiss (decision 0015). A grid
+// row from 1fr to 0fr collapses to the content's own height without measuring it.
+var regionFadeThenCollapse = styled.keyframes(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  0%, 50% {\n    grid-template-rows: 1fr;\n  }\n  0% {\n    opacity: 1;\n  }\n  50%, 100% {\n    opacity: 0;\n  }\n  100% {\n    grid-template-rows: 0fr;\n  }\n"], ["\n  0%, 50% {\n    grid-template-rows: 1fr;\n  }\n  0% {\n    opacity: 1;\n  }\n  50%, 100% {\n    opacity: 0;\n  }\n  100% {\n    grid-template-rows: 0fr;\n  }\n"])));
+var regionFadeOut = styled.keyframes(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  to {\n    opacity: 0;\n  }\n"], ["\n  to {\n    opacity: 0;\n  }\n"
+// One part of the region above the field: the review bar or the suggestions
+])));
+// One part of the region above the field: the review bar or the suggestions
+var RegionItem = /*#__PURE__*/styled__default.default.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__RegionItem",
   componentId: "sc-fhl996-9"
-})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$a.space[300], semantic$a.space[600]);
-var StatusText = styled__default.default.div.withConfig({
+})(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: 1fr;\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation-name: ", ";\n  }\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: 1fr;\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation-name: ", ";\n  }\n\n  ", "\n"
+// Clips while the row collapses. Its bottom padding is the space to the next part, so it closes too.
+])), regionEnter, semantic$a.motion.duration.moderate, semantic$a.motion.easing.decelerate, reducedMotion, regionFadeIn, function (_a) {
+  var $exiting = _a.$exiting,
+    $reducedExit = _a.$reducedExit;
+  return $exiting && styled.css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n      pointer-events: none;\n      animation: ", ";\n    "], ["\n      pointer-events: none;\n      animation: ", ";\n    "])), $reducedExit ? styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), regionFadeOut, semantic$a.motion.duration.fast, semantic$a.motion.easing.accelerate) : styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["", " calc(2 * ", ") ", " forwards"], ["", " calc(2 * ", ") ", " forwards"])), regionFadeThenCollapse, semantic$a.motion.duration.fast, semantic$a.motion.easing.accelerate));
+});
+// Clips while the row collapses. Its bottom padding is the space to the next part, so it closes too.
+var RegionItemContent = /*#__PURE__*/styled__default.default.div.withConfig({
+  displayName: "AgentInput__RegionItemContent",
+  componentId: "sc-fhl996-10"
+})(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n  min-height: 0;\n  overflow: hidden;\n  padding-bottom: ", ";\n  padding-left: ", ";\n"], ["\n  min-height: 0;\n  overflow: hidden;\n  padding-bottom: ", ";\n  padding-left: ", ";\n"
+// The summary first, then the actions, left-aligned after it; they wrap below on narrow screens (0021)
+])), semantic$a.space[200], semantic$a.space[500]);
+// The summary first, then the actions, left-aligned after it; they wrap below on narrow screens (0021)
+var ReviewBar = /*#__PURE__*/styled__default.default.div.withConfig({
+  displayName: "AgentInput__ReviewBar",
+  componentId: "sc-fhl996-11"
+})(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: ", ";\n  row-gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: ", ";\n  row-gap: ", ";\n"])), semantic$a.space[300], semantic$a.space[200]);
+var ReviewActions = /*#__PURE__*/styled__default.default.div.withConfig({
+  displayName: "AgentInput__ReviewActions",
+  componentId: "sc-fhl996-12"
+})(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"])), semantic$a.space[200]);
+var SuggestionList = /*#__PURE__*/styled__default.default.ul.withConfig({
+  displayName: "AgentInput__SuggestionList",
+  componentId: "sc-fhl996-13"
+})(templateObject_25$1 || (templateObject_25$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  & > li {\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  & > li {\n    max-width: 100%;\n  }\n"])), semantic$a.space[200]);
+var StatusRow = /*#__PURE__*/styled__default.default.div.withConfig({
+  displayName: "AgentInput__StatusRow",
+  componentId: "sc-fhl996-14"
+})(templateObject_26$1 || (templateObject_26$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$a.space[300], semantic$a.space[600]);
+var StatusText = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__StatusText",
-  componentId: "sc-fhl996-10"
-})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$a.space[500]);
-var StatusAnnouncement = styled__default.default.div.withConfig({
+  componentId: "sc-fhl996-15"
+})(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$a.space[500]);
+var StatusAnnouncement = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__StatusAnnouncement",
-  componentId: "sc-fhl996-11"
-})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject([""], [""])));
-var MeterContainer = styled__default.default.div.withConfig({
+  componentId: "sc-fhl996-16"
+})(templateObject_28$1 || (templateObject_28$1 = __makeTemplateObject([""], [""])));
+var StatusEnd = /*#__PURE__*/styled__default.default.div.withConfig({
+  displayName: "AgentInput__StatusEnd",
+  componentId: "sc-fhl996-17"
+})(templateObject_29$1 || (templateObject_29$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$a.space[300]);
+var VisuallyHidden = /*#__PURE__*/styled__default.default.span.withConfig({
+  displayName: "AgentInput__VisuallyHidden",
+  componentId: "sc-fhl996-18"
+})(templateObject_30$1 || (templateObject_30$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+var MeterContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "AgentInput__MeterContainer",
-  componentId: "sc-fhl996-12"
-})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic$a.space[100], semantic$a.space[400]);
-var MeterBar = styled__default.default.div.withConfig({
+  componentId: "sc-fhl996-19"
+})(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic$a.space[100], semantic$a.space[400]);
+var MeterBar = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MeterBar",
-  componentId: "sc-fhl996-13"
-})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$a.space[100], semantic$a.radius.xs, semantic$a.color.fill.accent, function (_a) {
+  componentId: "sc-fhl996-20"
+})(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$a.space[100], semantic$a.radius.xs, semantic$a.color.fill.accent, function (_a) {
   var $height = _a.$height;
   return "".concat($height * 100, "%");
 }, semantic$a.motion.duration.fast, semantic$a.motion.easing.decelerate);
-var VisuallyHiddenLabel = styled__default.default.label.withConfig({
+var VisuallyHiddenLabel = /*#__PURE__*/styled__default.default.label.withConfig({
   displayName: "AgentInput__VisuallyHiddenLabel",
-  componentId: "sc-fhl996-14"
-})(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+  componentId: "sc-fhl996-21"
+})(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 function getInitialState(hasText) {
   return hasText ? 'typing' : 'idle';
 }
@@ -3551,60 +3761,104 @@ function createMeterBars(level) {
   var clampedLevel = Math.max(0, Math.min(level, 1));
   return [0.25 + clampedLevel * 0.75, 0.2 + clampedLevel * 0.6, 0.3 + clampedLevel * 0.7, 0.2 + clampedLevel * 0.5];
 }
-var AgentInput = function AgentInput(_a) {
+// Declared separately so the react-hooks lint rules analyse it (they skip functions inline in forwardRef)
+// Development builds warn about props that break the pattern. Bundlers replace process.env.NODE_ENV
+// with a literal; without a bundler, a browser has no process, so reading it throws.
+function readIsProduction() {
+  try {
+    return process.env.NODE_ENV === 'production';
+  } catch (_a) {
+    return false;
+  }
+}
+var isProduction = readIsProduction();
+// A part of the region above the field. It stays mounted while it fades out and its space closes.
+function RegionPart(_a) {
+  var show = _a.show,
+    reducedExit = _a.reducedExit,
+    children = _a.children;
+  var _b = usePresence(show, reducedExit ? EXIT_DURATION_MS : EXIT_DURATION_MS * 2),
+    isPresent = _b.isPresent,
+    isExiting = _b.isExiting;
+  var ref = React.useRef(null);
+  // Leaving controls drop out of the tab order and can't be activated
+  useInert(ref, isExiting);
+  if (!isPresent) return null;
+  return jsxRuntime.jsx(RegionItem, {
+    ref: ref,
+    "$exiting": isExiting,
+    "$reducedExit": reducedExit,
+    "aria-hidden": isExiting || undefined,
+    children: jsxRuntime.jsx(RegionItemContent, {
+      children: children
+    })
+  });
+}
+function AgentInputWithRef(_a, ref) {
+  var _this = this;
+  var _b;
   var value = _a.value,
-    _b = _a.defaultValue,
-    defaultValue = _b === void 0 ? '' : _b,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? '' : _c,
     onChange = _a.onChange,
     onSubmit = _a.onSubmit,
-    _c = _a.placeholder,
-    placeholder = _c === void 0 ? 'Ask a question' : _c,
-    _d = _a.disabled,
-    disabled = _d === void 0 ? false : _d,
+    onStop = _a.onStop,
+    review = _a.review,
+    suggestions = _a.suggestions,
+    onSuggestionSelect = _a.onSuggestionSelect,
+    _d = _a.placeholder,
+    placeholder = _d === void 0 ? 'Ask a question' : _d,
+    maxLength = _a.maxLength,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
     isSubmitting = _a.isSubmitting,
-    _e = _a.enableVoice,
-    enableVoice = _e === void 0 ? true : _e,
-    _f = _a.autoSubmitOnVoiceFinal,
-    autoSubmitOnVoiceFinal = _f === void 0 ? true : _f,
-    _g = _a.voiceLanguage,
-    voiceLanguage = _g === void 0 ? 'en-AU' : _g,
-    _h = _a.noSpeechTimeoutMs,
-    noSpeechTimeoutMs = _h === void 0 ? 8000 : _h,
+    _f = _a.enableVoice,
+    enableVoice = _f === void 0 ? true : _f,
+    _g = _a.autoSubmitOnVoiceFinal,
+    autoSubmitOnVoiceFinal = _g === void 0 ? true : _g,
+    _h = _a.voiceLanguage,
+    voiceLanguage = _h === void 0 ? 'en-AU' : _h,
+    _j = _a.noSpeechTimeoutMs,
+    noSpeechTimeoutMs = _j === void 0 ? 8000 : _j,
     onVoiceStart = _a.onVoiceStart,
     onVoiceStop = _a.onVoiceStop,
     onVoiceInterim = _a.onVoiceInterim,
     onVoiceFinal = _a.onVoiceFinal,
     onVoiceError = _a.onVoiceError,
+    _k = _a.helperText,
+    helperText = _k === void 0 ? '' : _k,
     statusMessage = _a.statusMessage,
     errorMessage = _a.errorMessage,
-    _j = _a.label,
-    label = _j === void 0 ? 'Agent input' : _j,
+    _l = _a.label,
+    label = _l === void 0 ? 'Agent input' : _l,
+    _m = _a.docked,
+    docked = _m === void 0 ? false : _m,
     dataTestId = _a["data-testid"];
   var isControlled = value !== undefined;
-  var _k = React.useState(defaultValue),
-    internalValue = _k[0],
-    setInternalValue = _k[1];
-  var _l = React.useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
-    machineState = _l[0],
-    setMachineState = _l[1];
-  var _m = React.useState(''),
-    interimTranscript = _m[0],
-    setInterimTranscript = _m[1];
-  var _o = React.useState(false),
-    internalSubmitting = _o[0],
-    setInternalSubmitting = _o[1];
-  var _p = React.useState(undefined),
-    internalErrorMessage = _p[0],
-    setInternalErrorMessage = _p[1];
-  var _q = React.useState(false),
-    voiceSupported = _q[0],
-    setVoiceSupported = _q[1];
+  var _o = React.useState(defaultValue),
+    internalValue = _o[0],
+    setInternalValue = _o[1];
+  var _p = React.useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
+    machineState = _p[0],
+    setMachineState = _p[1];
+  var _q = React.useState(''),
+    interimTranscript = _q[0],
+    setInterimTranscript = _q[1];
   var _r = React.useState(false),
-    prefersReducedMotion = _r[0],
-    setPrefersReducedMotion = _r[1];
-  var _s = React.useState(0),
-    meterLevel = _s[0],
-    setMeterLevel = _s[1];
+    internalSubmitting = _r[0],
+    setInternalSubmitting = _r[1];
+  var _s = React.useState(undefined),
+    internalErrorMessage = _s[0],
+    setInternalErrorMessage = _s[1];
+  var _t = React.useState(false),
+    voiceSupported = _t[0],
+    setVoiceSupported = _t[1];
+  var _u = React.useState(false),
+    prefersReducedMotion = _u[0],
+    setPrefersReducedMotion = _u[1];
+  var _v = React.useState(0),
+    meterLevel = _v[0],
+    setMeterLevel = _v[1];
   var recognitionRef = React.useRef(null);
   var noSpeechTimeoutRef = React.useRef(null);
   var isStoppingRef = React.useRef(false);
@@ -3612,10 +3866,19 @@ var AgentInput = function AgentInput(_a) {
   var audioStreamRef = React.useRef(null);
   var audioContextRef = React.useRef(null);
   var meterRafRef = React.useRef(null);
+  var inputRef = React.useRef(null);
   var inputId = React.useId();
   var statusId = "".concat(inputId, "-status");
+  var counterId = "".concat(inputId, "-counter");
   var currentValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
+  // Read after onSubmit settles, when the closure's value may be stale
+  var currentValueRef = React.useRef(currentValue);
+  React.useEffect(function () {
+    currentValueRef.current = currentValue;
+  }, [currentValue]);
   var hasText = normalizeTranscript(currentValue).length > 0;
+  var messageLength = normalizeMessage(currentValue).length;
+  var isOverLimit = maxLength !== undefined && messageLength > maxLength;
   var effectiveSubmitting = isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : internalSubmitting;
   var effectiveState = disabled ? 'disabled' : machineState;
   var isListening = effectiveState === 'listening';
@@ -3638,7 +3901,7 @@ var AgentInput = function AgentInput(_a) {
     }
   }, []);
   var stopMeter = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -3666,7 +3929,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, []);
   var startMeter = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       var stream, audioContext, analyser_1, source, data_1, _loop_;
       var _b;
       return __generator(this, function (_c) {
@@ -3727,15 +3990,22 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [onVoiceError, updateMachineState]);
   var submitPayload = React.useCallback(function (rawText, source) {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       var text;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            text = normalizeTranscript(rawText);
+            text = source === 'text' ? normalizeMessage(rawText) : normalizeTranscript(rawText);
             if (!text || disabled || effectiveSubmitting) {
               return [2 /*return*/];
             }
+            if (maxLength !== undefined && text.length > maxLength) {
+              // A long transcript goes into the field to be shortened, unless the user has typed since
+              if (source === 'voice-final' && !normalizeMessage(currentValueRef.current)) {
+                updateValue(text);
+              }
+              return [2 /*return*/];
+            }
             updateMachineState({
               type: 'SUBMIT'
             });
@@ -3757,14 +4027,18 @@ var AgentInput = function AgentInput(_a) {
               type: 'SUBMIT_SUCCESS'
             });
             setInterimTranscript('');
-            updateValue('');
+            // Keep a follow-up typed while submitting
+            if (normalizeMessage(currentValueRef.current) === text) {
+              updateValue('');
+            }
             return [3 /*break*/, 5];
           case 3:
             _b.sent();
             updateMachineState({
               type: 'SUBMIT_ERROR'
             });
-            if (source === 'voice-final') {
+            // Restore the transcript unless the user has typed something since
+            if (source === 'voice-final' && !normalizeMessage(currentValueRef.current)) {
               updateValue(text);
             }
             setInternalErrorMessage('Submission failed. Please try again.');
@@ -3779,13 +4053,13 @@ var AgentInput = function AgentInput(_a) {
         }
       });
     });
-  }, [disabled, effectiveSubmitting, isSubmitting, onSubmit, updateMachineState, updateValue]);
+  }, [disabled, effectiveSubmitting, isSubmitting, maxLength, onSubmit, updateMachineState, updateValue]);
   var stopListening = React.useCallback(function (emitStopEvent_1) {
     var args_1 = [];
     for (var _i = 1; _i < arguments.length; _i++) {
       args_1[_i - 1] = arguments[_i];
     }
-    return __awaiter(void 0, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
+    return __awaiter(_this, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
       if (preserveState === void 0) {
         preserveState = false;
       }
@@ -3821,7 +4095,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [clearNoSpeechTimeout, hasText, onVoiceStop, stopMeter, updateMachineState]);
   var onNoSpeechTimeout = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       var message;
       return __generator(this, function (_a) {
         switch (_a.label) {
@@ -3845,7 +4119,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [clearNoSpeechTimeout, onVoiceError, stopListening, updateMachineState]);
   var beginListening = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
@@ -3889,7 +4163,7 @@ var AgentInput = function AgentInput(_a) {
     recognition.interimResults = true;
     recognition.continuous = false;
     recognition.onresult = function (event) {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         var interim, finalText, index, result, normalizedInterim, normalizedFinal;
         return __generator(this, function (_a) {
           switch (_a.label) {
@@ -3947,7 +4221,7 @@ var AgentInput = function AgentInput(_a) {
       });
     };
     recognition.onerror = function (event) {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         var mappedCode;
         return __generator(this, function (_a) {
           switch (_a.label) {
@@ -3963,7 +4237,7 @@ var AgentInput = function AgentInput(_a) {
       });
     };
     recognition.onend = function () {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
@@ -3992,6 +4266,95 @@ var AgentInput = function AgentInput(_a) {
       stopMeter();
     };
   }, [autoSubmitOnVoiceFinal, clearNoSpeechTimeout, emitVoiceError, enableVoice, hasText, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceFinal, onVoiceInterim, stopListening, stopMeter, submitPayload, updateMachineState, updateValue, voiceLanguage]);
+  var focusField = React.useCallback(function (cursor) {
+    var input = inputRef.current;
+    if (!input) return;
+    input.focus();
+    if (!cursor) return;
+    var placeCursor = function placeCursor() {
+      if (cursor === 'all') {
+        input.select();
+        return;
+      }
+      var position = cursor === 'start' ? 0 : input.value.length;
+      input.setSelectionRange(position, position);
+    };
+    placeCursor();
+    // Again after the render a prefill in the same handler triggers, so 'end' lands after the new text
+    window.setTimeout(placeCursor, 0);
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus(options) {
+        return focusField(options === null || options === void 0 ? void 0 : options.cursor);
+      },
+      clear: function clear() {
+        setInterimTranscript('');
+        updateValue('');
+      }
+    };
+  }, [focusField, updateValue]);
+  // The region above the field (decision 0046). The last review and suggestions shown are kept, so
+  // they can fade out after the product removes them.
+  var _w = React.useState(review),
+    shownReview = _w[0],
+    setShownReview = _w[1];
+  var _x = React.useState(null),
+    lastReviewAction = _x[0],
+    setLastReviewAction = _x[1];
+  if (review && review !== shownReview) {
+    setShownReview(review);
+    // A new proposal or change replaces what the last Discard or Undo announced
+    if (lastReviewAction) setLastReviewAction(null);
+  }
+  // A proposal replacing an open one is announced as an update (decision 0047). Consecutive
+  // replacements alternate a trailing no-break space, so the live region's text changes each time
+  // even when the summary doesn't; screen readers don't speak it.
+  var openProposalId = (review === null || review === void 0 ? void 0 : review.state) === 'proposal' ? review.id : null;
+  var _y = React.useState(openProposalId),
+    announcedProposalId = _y[0],
+    setAnnouncedProposalId = _y[1];
+  var _z = React.useState(0),
+    replacementCount = _z[0],
+    setReplacementCount = _z[1];
+  if (openProposalId !== announcedProposalId) {
+    setAnnouncedProposalId(openProposalId);
+    setReplacementCount(openProposalId !== null && announcedProposalId !== null ? replacementCount + 1 : 0);
+  }
+  var cappedSuggestions = React.useMemo(function () {
+    return (suggestions !== null && suggestions !== void 0 ? suggestions : []).slice(0, MAX_SUGGESTIONS);
+  }, [suggestions]);
+  var showSuggestions = cappedSuggestions.length > 0 && !hasText && (review === null || review === void 0 ? void 0 : review.state) !== 'proposal';
+  var _0 = React.useState(cappedSuggestions),
+    shownSuggestions = _0[0],
+    setShownSuggestions = _0[1];
+  if (showSuggestions && cappedSuggestions !== shownSuggestions) {
+    setShownSuggestions(cappedSuggestions);
+  }
+  var suggestionCount = (_b = suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) !== null && _b !== void 0 ? _b : 0;
+  React.useEffect(function () {
+    if (!isProduction && suggestionCount > MAX_SUGGESTIONS) {
+      console.warn("AgentInput shows at most ".concat(MAX_SUGGESTIONS, " suggestions (decision 0046); ").concat(suggestionCount, " were passed, so the rest are hidden."));
+    }
+  }, [suggestionCount]);
+  var reviewAnnouncement = review ? review.state === 'proposal' ? "".concat(replacementCount > 0 ? 'Proposal updated. ' : '').concat(review.summary, ". Accept or discard.").concat(replacementCount > 0 && replacementCount % 2 === 0 ? "\xA0" : '') : 'Changes applied. Undo available.' : lastReviewAction === 'discarded' ? 'Suggestion discarded.' : lastReviewAction === 'undone' ? 'Changes undone.' : '';
+  var onReviewDiscard = function onReviewDiscard(onDiscard) {
+    setLastReviewAction('discarded');
+    onDiscard();
+    // The bar is leaving, so focus goes to the field rather than being lost
+    focusField();
+  };
+  var onReviewUndo = function onReviewUndo(onUndo) {
+    setLastReviewAction('undone');
+    onUndo();
+    focusField();
+  };
+  var onPickSuggestion = function onPickSuggestion(text) {
+    updateValue(text);
+    onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(text);
+    // Fills, never sends: the user reviews the text in the field first
+    focusField('end');
+  };
   React.useEffect(function () {
     var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
     var sync = function sync() {
@@ -4023,8 +4386,40 @@ var AgentInput = function AgentInput(_a) {
     if (!interimTranscript) {
       return currentValue;
     }
-    return normalizeTranscript([currentValue, interimTranscript].filter(Boolean).join(' '));
+    return normalizeMessage([currentValue, interimTranscript].filter(Boolean).join(' '));
   }, [currentValue, interimTranscript]);
+  var lastFieldWidthRef = React.useRef(0);
+  var resizeField = React.useCallback(function () {
+    var field = inputRef.current;
+    // Hidden (for example in a closed sheet): measure when it's shown, via the observer below
+    if (!field || field.clientWidth === 0) return;
+    lastFieldWidthRef.current = field.clientWidth;
+    // Collapsing the field to measure it shrinks the page for a moment; some engines clamp a page
+    // scrolled to the bottom when that happens, so restore its scroll position
+    var scrollX = window.scrollX,
+      scrollY = window.scrollY;
+    field.style.height = 'auto';
+    field.style.height = "".concat(field.scrollHeight, "px");
+    if (window.scrollY !== scrollY) window.scrollTo(scrollX, scrollY);
+    // Scroll only once max-height (six rows) clips the content
+    field.style.overflowY = field.scrollHeight > field.clientHeight ? 'auto' : 'hidden';
+  }, []);
+  useIsomorphicLayoutEffect(function () {
+    resizeField();
+  }, [displayedValue, resizeField]);
+  // Text rewraps when the field's width changes (layout, or being shown), not only the window's
+  React.useEffect(function () {
+    var field = inputRef.current;
+    if (!field || typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(function () {
+      // Its own height changes trigger this too; only a width change can rewrap the text
+      if (field.clientWidth !== lastFieldWidthRef.current) resizeField();
+    });
+    observer.observe(field);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [resizeField]);
   var onTextChange = function onTextChange(event) {
     updateValue(event.target.value);
     if (effectiveState === 'error') {
@@ -4036,10 +4431,18 @@ var AgentInput = function AgentInput(_a) {
     }
   };
   var onInputKeyDown = function onInputKeyDown(event) {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
+      var isComposing;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
+            isComposing = event.nativeEvent.isComposing || event.keyCode === 229;
+            // Escape during an IME composition cancels the composition, not the request
+            if (event.key === 'Escape' && onStop && effectiveSubmitting && !isComposing) {
+              event.preventDefault();
+              onStop();
+              return [2 /*return*/];
+            }
             if (!(event.key === 'Escape' && isListening)) return [3 /*break*/, 2];
             event.preventDefault();
             return [4 /*yield*/, stopListening(true)];
@@ -4047,7 +4450,7 @@ var AgentInput = function AgentInput(_a) {
             _a.sent();
             return [2 /*return*/];
           case 2:
-            if (!(event.key === 'Enter')) return [3 /*break*/, 4];
+            if (!(event.key === 'Enter' && !event.shiftKey && !isComposing)) return [3 /*break*/, 4];
             event.preventDefault();
             return [4 /*yield*/, submitPayload(currentValue, 'text')];
           case 3:
@@ -4060,7 +4463,7 @@ var AgentInput = function AgentInput(_a) {
     });
   };
   var onMicToggle = function onMicToggle() {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -4080,40 +4483,105 @@ var AgentInput = function AgentInput(_a) {
     });
   };
   var statusByState = {
-    idle: statusMessage || DEFAULT_IDLE_HELPER,
-    typing: statusMessage || DEFAULT_IDLE_HELPER,
+    idle: statusMessage || helperText,
+    typing: statusMessage || helperText,
     listening: statusMessage || DEFAULT_LISTENING_MESSAGE,
     processingFinalTranscript: statusMessage || DEFAULT_PROCESSING_MESSAGE,
     submitting: statusMessage || 'Submitting…',
     error: errorMessage || internalErrorMessage || 'Voice input failed. Try again.',
-    disabled: statusMessage || DEFAULT_IDLE_HELPER
+    disabled: statusMessage || helperText
   };
-  var unsupportedMessage = defaultVoiceErrorMessage('not-supported');
-  var shouldShowUnsupported = enableVoice && !hasVoice;
-  var resolvedStatus = shouldShowUnsupported ? unsupportedMessage : statusByState[effectiveState];
-  var isStatusError = effectiveState === 'error' || shouldShowUnsupported;
+  var overLimitMessage = isOverLimit && maxLength !== undefined ? "Over the ".concat(maxLength, "-character limit. Shorten your message to send.") : undefined;
+  // A product-set error shows in any state. Unsupported voice hides the mic without a message.
+  var resolvedStatus = errorMessage || overLimitMessage || statusByState[effectiveState];
+  var isStatusError = Boolean(errorMessage) || isOverLimit || effectiveState === 'error';
   var meterBars = createMeterBars(meterLevel);
-  var sendDisabled = disabled || effectiveSubmitting || normalizeTranscript(currentValue).length === 0;
+  var showStop = Boolean(onStop) && effectiveSubmitting;
+  var sendDisabled = disabled || effectiveSubmitting || isOverLimit || messageLength === 0;
+  var showCounter = maxLength !== undefined && messageLength >= maxLength * COUNTER_THRESHOLD;
+  // Announced once when the limit is reached; going over is announced by the status line
+  var limitAnnouncement = maxLength !== undefined && messageLength === maxLength ? "Character limit reached: ".concat(maxLength, " characters") : '';
   return jsxRuntime.jsxs(Container, {
     "data-testid": dataTestId,
+    "$docked": docked,
+    "data-docked": docked || undefined,
     children: [jsxRuntime.jsx(VisuallyHiddenLabel, {
       htmlFor: inputId,
       children: label
-    }), jsxRuntime.jsx(ControlsRow, {
-      children: jsxRuntime.jsx(InputWrapper, {
+    }), jsxRuntime.jsxs(ControlsRow, {
+      children: [jsxRuntime.jsx(RegionPart, {
+        show: Boolean(review),
+        reducedExit: prefersReducedMotion,
+        children: shownReview && jsxRuntime.jsxs(ReviewBar, {
+          "data-testid": "agent-input-review",
+          children: [jsxRuntime.jsx(Typography, {
+            variant: "small",
+            color: "default",
+            children: shownReview.state === 'proposal' ? shownReview.summary : 'Changes applied'
+          }), jsxRuntime.jsx(ReviewActions, {
+            children: shownReview.state === 'proposal' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx(Button, {
+                variant: "primary",
+                size: "small",
+                onClick: shownReview.onAccept,
+                children: "Accept"
+              }), jsxRuntime.jsx(Button, {
+                variant: "secondary",
+                size: "small",
+                onClick: function onClick() {
+                  return onReviewDiscard(shownReview.onDiscard);
+                },
+                children: "Discard"
+              })]
+            }) : jsxRuntime.jsx(Button, {
+              variant: "naked",
+              size: "small",
+              onClick: function onClick() {
+                return onReviewUndo(shownReview.onUndo);
+              },
+              children: "Undo"
+            })
+          })]
+        })
+      }), jsxRuntime.jsx(RegionPart, {
+        show: showSuggestions,
+        reducedExit: prefersReducedMotion,
+        children: jsxRuntime.jsx(SuggestionList, {
+          "aria-label": "Suggestions",
+          "data-testid": "agent-input-suggestions",
+          children: shownSuggestions.map(function (suggestion, index) {
+            return jsxRuntime.jsx("li", {
+              children: jsxRuntime.jsx(SuggestionChip, {
+                onClick: function onClick() {
+                  return onPickSuggestion(suggestion);
+                },
+                children: suggestion
+              })
+            }, "".concat(index, "-").concat(suggestion));
+          })
+        })
+      }), jsxRuntime.jsx(VisuallyHidden, {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "data-testid": "agent-input-review-announcement",
+        children: reviewAnnouncement
+      }), jsxRuntime.jsx(InputWrapper, {
         children: jsxRuntime.jsxs(InputShell, {
-          "data-disabled": disabled || effectiveSubmitting,
+          "data-disabled": disabled,
           children: [jsxRuntime.jsx(Input, {
+            ref: inputRef,
             id: inputId,
-            type: "text",
+            rows: 1,
+            enterKeyHint: "send",
             "aria-label": label,
             value: displayedValue,
             onChange: onTextChange,
             onKeyDown: onInputKeyDown,
             placeholder: placeholder,
-            disabled: disabled || effectiveSubmitting,
+            disabled: disabled,
             readOnly: isListening,
-            "aria-describedby": statusId
+            "aria-describedby": showCounter ? "".concat(statusId, " ").concat(counterId) : statusId,
+            "aria-invalid": isOverLimit || undefined
           }), jsxRuntime.jsxs(InputActions, {
             children: [hasVoice && jsxRuntime.jsxs(MicButtonWrapper, {
               "$isListening": isListening,
@@ -4133,7 +4601,17 @@ var AgentInput = function AgentInput(_a) {
                 disabled: disabled || effectiveSubmitting,
                 type: "button"
               })]
-            }), jsxRuntime.jsx(CircularActionIconButton, {
+            }), showStop ? jsxRuntime.jsx(CircularActionIconButton, {
+              variant: "secondary",
+              size: "medium",
+              iconName: "stop",
+              onClick: function onClick() {
+                return onStop === null || onStop === void 0 ? void 0 : onStop();
+              },
+              disabled: disabled,
+              "aria-label": "Stop",
+              type: "button"
+            }) : jsxRuntime.jsx(CircularActionIconButton, {
               variant: "secondary",
               size: "medium",
               iconName: "directionUp",
@@ -4146,7 +4624,7 @@ var AgentInput = function AgentInput(_a) {
             })]
           })]
         })
-      })
+      })]
     }), jsxRuntime.jsxs(StatusRow, {
       children: [jsxRuntime.jsx(StatusText, {
         "$isError": isStatusError,
@@ -4155,24 +4633,44 @@ var AgentInput = function AgentInput(_a) {
           role: "status",
           "aria-live": "polite",
           "aria-atomic": "true",
-          children: jsxRuntime.jsx(Typography, {
+          children: resolvedStatus && jsxRuntime.jsx(Typography, {
             variant: "small",
             color: isStatusError ? 'error' : 'subdued',
             children: resolvedStatus
           })
         })
-      }), isListening && !prefersReducedMotion && jsxRuntime.jsx(MeterContainer, {
-        "aria-hidden": "true",
-        children: meterBars.map(function (barHeight, index) {
-          return jsxRuntime.jsx(MeterBar, {
-            "$height": barHeight
-          }, "meter-".concat(index));
-        })
+      }), jsxRuntime.jsxs(StatusEnd, {
+        children: [isListening && !prefersReducedMotion && jsxRuntime.jsx(MeterContainer, {
+          "aria-hidden": "true",
+          children: meterBars.map(function (barHeight, index) {
+            return jsxRuntime.jsx(MeterBar, {
+              "$height": barHeight
+            }, "meter-".concat(index));
+          })
+        }), showCounter && jsxRuntime.jsx(Typography, {
+          variant: "small",
+          color: isOverLimit ? 'error' : 'subdued',
+          children: jsxRuntime.jsxs("span", {
+            id: counterId,
+            "data-testid": "agent-input-counter",
+            children: [messageLength, "/", maxLength, jsxRuntime.jsx(VisuallyHidden, {
+              children: " characters"
+            })]
+          })
+        })]
+      }), maxLength !== undefined && jsxRuntime.jsx(VisuallyHidden, {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "data-testid": "agent-input-limit-announcement",
+        children: limitAnnouncement
       })]
     })]
   });
-};
-var templateObject_1$q, templateObject_2$l, templateObject_3$k, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
+}
+var AgentInput = /*#__PURE__*/React.forwardRef(AgentInputWithRef);
+AgentInput.displayName = 'AgentInput';
+var templateObject_1$q, templateObject_2$l, templateObject_3$k, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1;
 
 var semantic$9 = tokens.semantic;
 var alert = tokens.component.alert;
@@ -4219,7 +4717,7 @@ var variantTitleColors = {
   info: 'interactive',
   success: 'success'
 };
-var StyledAlert = styled__default.default.div.withConfig({
+var StyledAlert = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -4252,19 +4750,19 @@ var StyledAlert = styled__default.default.div.withConfig({
     $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));
 });
-var StyledIconContainer = styled__default.default.div.withConfig({
+var StyledIconContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Alert__StyledIconContainer",
   componentId: "sc-18tq5d-1"
 })(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
-var StyledContent$1 = styled__default.default.div.withConfig({
+var StyledContent$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Alert__StyledContent",
   componentId: "sc-18tq5d-2"
 })(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$9.space[100]);
-var StyledTitle = styled__default.default.span.withConfig({
+var StyledTitle = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
 })(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"], ["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"])), alert.title.typography, alert.title.fontWeight, alert.title.lineHeight);
-var StyledMessage$1 = styled__default.default.span.withConfig({
+var StyledMessage$1 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Alert__StyledMessage",
   componentId: "sc-18tq5d-4"
 })(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  font: ", ";\n  line-height: ", ";\n"], ["\n  font: ", ";\n  line-height: ", ";\n"
@@ -4273,7 +4771,7 @@ var StyledMessage$1 = styled__default.default.span.withConfig({
 ])), alert.message.typography, alert.message.lineHeight);
 // The action follows the content, left-aligned with it, so it's read after the message
 // (#122). With the content's xs gap, the space above it is md: a separate step.
-var StyledActions = styled__default.default.div.withConfig({
+var StyledActions = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Alert__StyledActions",
   componentId: "sc-18tq5d-5"
 })(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: ", ";\n  margin-top: calc(", " - ", ");\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: ", ";\n  margin-top: calc(", " - ", ");\n"
@@ -4286,7 +4784,7 @@ var StyledActions = styled__default.default.div.withConfig({
 // message when there's no title (decision 0019). The slot is as tall as that line and the
 // button is centred in it, overflowing evenly into the padding, so it stays aligned at every
 // padding and line height. Being in the row, it also keeps text and actions from running under it.
-var StyledDismissSlot = styled__default.default.div.withConfig({
+var StyledDismissSlot = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -4301,7 +4799,7 @@ var StyledDismissSlot = styled__default.default.div.withConfig({
 });
 // The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
 // alert's padding is too small for that, so its button stays inside the padding.
-var StyledDismissButton = styled__default.default(IconButton).withConfig({
+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) {
@@ -4472,7 +4970,7 @@ var sizeConfig = {
     icon: 'sm'
   }
 };
-var StyledInlineAlert = styled__default.default.div.withConfig({
+var StyledInlineAlert = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -4497,11 +4995,11 @@ var StyledInlineAlert = styled__default.default.div.withConfig({
 });
 // One line of the message's font tall, so the icon centres on the first line at any size:
 // the zero-width space gives the box the font's line height without a fixed value
-var StyledIconLine = styled__default.default.span.withConfig({
+var StyledIconLine = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "InlineAlert__StyledIconLine",
   componentId: "sc-eervmb-1"
 })(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\200B';\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\\\200B';\n  }\n"])));
-var StyledMessage = styled__default.default.span.withConfig({
+var StyledMessage = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "InlineAlert__StyledMessage",
   componentId: "sc-eervmb-2"
 })(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  min-width: 0;\n"], ["\n  min-width: 0;\n"
@@ -4574,15 +5072,15 @@ var InlineAlert = function InlineAlert(_a) {
 InlineAlert.displayName = 'InlineAlert';
 var templateObject_1$o, templateObject_2$j, templateObject_3$i;
 
-var BreadcrumbNavStyled = styled__default.default.nav.withConfig({
+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"]);
-var BreadcrumbStyled = styled__default.default.li.withConfig({
+var BreadcrumbStyled = /*#__PURE__*/styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
 })(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), tokens.semantic.space[200], tokens.semantic.space[200], tokens.semantic.color.text.muted, tokens.component.breadcrumbs.item.maxWidth, tokens.semantic.color.text["default"]);
-var BreadcrumbSeparator = styled__default.default.span.withConfig({
+var BreadcrumbSeparator = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Breadcrumbs__BreadcrumbSeparator",
   componentId: "sc-7ouzg5-2"
 })(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"])));
@@ -4637,7 +5135,7 @@ var templateObject_1$n, 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 = styled__default.default.div.withConfig({
+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);
@@ -4696,7 +5194,7 @@ var CardSmall = function CardSmall(_a) {
 };
 var templateObject_1$m;
 
-var CardLargeStyled = styled__default.default.div.withConfig({
+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']);
@@ -4760,7 +5258,7 @@ var templateObject_1$l;
  * Hidden native checkbox input for accessibility
  * Maintains keyboard navigation and screen reader support
  */
-var HiddenCheckboxInput = styled__default.default.input.withConfig({
+var HiddenCheckboxInput = /*#__PURE__*/styled__default.default.input.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -4777,7 +5275,7 @@ var HiddenCheckboxInput = styled__default.default.input.withConfig({
  * 24px × 24px for 8px grid alignment
  * Uses component.input.* tokens for consistency with TextField
  */
-var StyledCheckbox = styled__default.default.span.withConfig({
+var StyledCheckbox = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -4818,7 +5316,7 @@ var StyledCheckbox = styled__default.default.span.withConfig({
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
  */
-var StyledCheckboxContainer = styled__default.default.label.withConfig({
+var StyledCheckboxContainer = /*#__PURE__*/styled__default.default.label.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -4835,7 +5333,7 @@ var StyledCheckboxContainer = styled__default.default.label.withConfig({
 /**
  * Label text with proper typography
  */
-var StyledCheckboxLabel = styled__default.default.span.withConfig({
+var StyledCheckboxLabel = /*#__PURE__*/styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -4846,11 +5344,11 @@ var StyledCheckboxLabel = styled__default.default.span.withConfig({
 });
 var templateObject_1$k, templateObject_2$h, templateObject_3$g, templateObject_4$d;
 
-var StyledFieldContainer$3 = styled__default.default.div.withConfig({
+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]);
-var StyledHelperText$4 = styled__default.default.span.withConfig({
+var StyledHelperText$4 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
 })(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
@@ -4974,7 +5472,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 Checkbox.displayName = 'Checkbox';
 var templateObject_1$j, templateObject_2$g;
 
-var ChipGroupWrapper = styled__default.default.div.withConfig({
+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"])));
@@ -5003,7 +5501,7 @@ var _a$1 = tokens.semantic,
   color$1 = _a$1.color,
   border$1 = _a$1.border,
   motion$2 = _a$1.motion;
-var StyledCodeBlock = styled__default.default.pre.withConfig({
+var StyledCodeBlock = /*#__PURE__*/styled__default.default.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
 })(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border$1.emphasis, tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color$1.text["default"], function (_a) {
@@ -5019,15 +5517,15 @@ var StyledCodeBlock = styled__default.default.pre.withConfig({
   // 10000px is effectively "no limit" for most code blocks
   return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
 }, border$1.focus, border$1.focusOffset);
-var CodeBlockWrapper = styled__default.default.div.withConfig({
+var CodeBlockWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CodeBlock__CodeBlockWrapper",
   componentId: "sc-1p1t0kp-1"
 })(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
-var CopyButtonWrapper = styled__default.default.div.withConfig({
+var CopyButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CodeBlock__CopyButtonWrapper",
   componentId: "sc-1p1t0kp-2"
 })(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), tokens.semantic.space[400], tokens.semantic.space[200]);
-var ExpandButtonWrapper = styled__default.default.div.withConfig({
+var ExpandButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "CodeBlock__ExpandButtonWrapper",
   componentId: "sc-1p1t0kp-3"
 })(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"])), tokens.semantic.space[200], tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.space[200], tokens.semantic.radius.sm, motion$2.duration.slow, motion$2.easing.standard, motion$2.duration.slow, motion$2.easing.standard, function (_a) {
@@ -5092,7 +5590,7 @@ var CopyButton = function CopyButton(_a) {
     })
   });
 };
-var LiveRegion = styled__default.default.span.withConfig({
+var LiveRegion = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "CodeBlock__LiveRegion",
   componentId: "sc-1p1t0kp-4"
 })(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
@@ -5218,22 +5716,22 @@ var CodeBlock = function CodeBlock(_a) {
 };
 var templateObject_1$h, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$a;
 
-var StyledHeader$1 = styled__default.default.div.withConfig({
+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) {
   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  ");
 });
-var StyledLeftSection = styled__default.default.div.withConfig({
+var StyledLeftSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledLeftSection",
   componentId: "sc-9nfm1f-1"
 })(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
-var StyledRightSection = styled__default.default.div.withConfig({
+var StyledRightSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledRightSection",
   componentId: "sc-9nfm1f-2"
 })(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[300]);
-var StyledContent = styled__default.default.div.withConfig({
+var StyledContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledContent",
   componentId: "sc-9nfm1f-3"
 })(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  /* Content area for children */\n"], ["\n  /* Content area for children */\n"
@@ -5311,7 +5809,7 @@ var DateGroup = function DateGroup(_a) {
 var templateObject_1$g, templateObject_2$e, templateObject_3$e, templateObject_4$b;
 
 var semantic$7 = tokens.semantic;
-var StyledContainer$1 = styled__default.default.div.withConfig({
+var StyledContainer$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -5321,7 +5819,7 @@ var StyledContainer$1 = styled__default.default.div.withConfig({
   var $size = _a.$size;
   return $size === 'small' ? semantic$7.space[800] : $size === 'large' ? semantic$7.space[1400] : semantic$7.space[1000];
 });
-var StyledIllustration = styled__default.default.div.withConfig({
+var StyledIllustration = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -5337,7 +5835,7 @@ var StyledIllustration = styled__default.default.div.withConfig({
   var $variant = _a.$variant;
   return $variant === 'error' ? semantic$7.color.icon.danger : $variant === 'success' ? semantic$7.color.icon.success : semantic$7.color.icon.muted;
 });
-var StyledTextContainer = styled__default.default.div.withConfig({
+var StyledTextContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "EmptyState__StyledTextContainer",
   componentId: "sc-1u5hxh-2"
 })(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  max-width: ", ";\n  margin-bottom: ", ";\n"], ["\n  max-width: ", ";\n  margin-bottom: ", ";\n"
@@ -5430,23 +5928,23 @@ var EmptyState = function EmptyState(_a) {
 var templateObject_1$f, templateObject_2$d, templateObject_3$d;
 
 var space$5 = tokens.semantic.space;
-var FeatureBlockStyled = styled__default.default.div.withConfig({
+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']);
-var ImageWrapper = styled__default.default.div.withConfig({
+var ImageWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ImageWrapper",
   componentId: "sc-1mi4lso-1"
 })(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokens.semantic.breakpoint.lg);
-var ContentSection = styled__default.default.div.withConfig({
+var ContentSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ContentSection",
   componentId: "sc-1mi4lso-2"
 })(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), space$5[600], tokens.semantic.breakpoint.lg, space$5[800], tokens.semantic.breakpoint.xl, space$5[2400]);
-var ButtonWrapper = styled__default.default.div.withConfig({
+var ButtonWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ButtonWrapper",
   componentId: "sc-1mi4lso-3"
 })(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), space$5[400]);
-var ContentWrapper = styled__default.default.div.withConfig({
+var ContentWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ContentWrapper",
   componentId: "sc-1mi4lso-4"
 })(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
@@ -5527,11 +6025,11 @@ var controlPaddingY = space$4[200];
 var controlHeight = tokens.semantic.size.control.lg;
 var duration = motion$1.duration,
   easing = motion$1.easing;
-var DropdownContainer = styled__default.default.div.withConfig({
+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"])));
-var DropdownTrigger = styled__default.default.button.withConfig({
+var DropdownTrigger = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -5551,7 +6049,7 @@ var DropdownTrigger = styled__default.default.button.withConfig({
     $hasError = _a.$hasError;
   return $isOpen && "\n    border-color: ".concat($hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor, ";\n  ");
 });
-var DropdownIcon = styled__default.default.div.withConfig({
+var DropdownIcon = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -5561,7 +6059,7 @@ var DropdownIcon = styled__default.default.div.withConfig({
   var $isOpen = _a.$isOpen;
   return $isOpen && "\n    transform: rotate(180deg);\n  ";
 }, reducedMotion);
-var DropdownMenu = styled__default.default.div.withConfig({
+var DropdownMenu = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -5577,7 +6075,7 @@ var DropdownMenu = styled__default.default.div.withConfig({
   var $isOpen = _a.$isOpen;
   return $isOpen ? 'translateY(0)' : "translateY(calc(-1 * ".concat(tokens.semantic.motion.distance.sm, "))");
 }, duration.fast, easing.decelerate, duration.fast, easing.decelerate, duration.fast, easing.decelerate, tokens.semantic.size.menu.maxHeight, reducedMotion);
-var DropdownOption = styled__default.default.button.withConfig({
+var DropdownOption = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -5591,7 +6089,7 @@ var DropdownOption = styled__default.default.button.withConfig({
     focused: $isFocused
   });
 }, border.emphasis);
-var StyledHelperText$3 = styled__default.default.div.withConfig({
+var StyledHelperText$3 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"
 })(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), field$3.helperText.typography, function (_a) {
@@ -5780,7 +6278,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 semantic$6 = tokens.semantic;
-var StyledList = styled__default.default.ul.withConfig({
+var StyledList = /*#__PURE__*/styled__default.default.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -5839,14 +6337,14 @@ var scaleIn = styled.keyframes(templateObject_2$a || (templateObject_2$a = __mak
 // ---------------------------------------------------------------------------
 // Styled components
 // ---------------------------------------------------------------------------
-var StyledOverlay$1 = styled__default.default.div.withConfig({
+var StyledOverlay$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Modal__StyledOverlay",
   componentId: "sc-1d3g5gh-0"
 })(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), semantic$5.surface.scrim, semantic$5.layer.modal, styled.css(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.moderate, motion.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }));
-var StyledDialog = styled__default.default.div.withConfig({
+var StyledDialog = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -5865,15 +6363,15 @@ var StyledDialog = styled__default.default.div.withConfig({
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
-var StyledHeader = styled__default.default.div.withConfig({
+var StyledHeader = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Modal__StyledHeader",
   componentId: "sc-1d3g5gh-2"
 })(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", " 0;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", " 0;\n  flex-shrink: 0;\n"])), space$3[400], space$3[400]);
-var StyledBody = styled__default.default.div.withConfig({
+var StyledBody = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Modal__StyledBody",
   componentId: "sc-1d3g5gh-3"
 })(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), space$3[300], space$3[400], semantic$5.space[200], color.fill.muted, color.border["default"], semantic$5.radius.full, color.fill.inverse);
-var StyledFooter = styled__default.default.div.withConfig({
+var StyledFooter = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Modal__StyledFooter",
   componentId: "sc-1d3g5gh-4"
 })(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  gap: ", ";\n  padding: 0 ", " ", ";\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  gap: ", ";\n  padding: 0 ", " ", ";\n  flex-shrink: 0;\n"
@@ -6082,7 +6580,7 @@ var inputBaseStyles = styled.css(templateObject_1$a || (templateObject_1$a = __m
   var $hasError = _a.$hasError;
   return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
 });
-var StyledInputBase = styled__default.default.input.withConfig({
+var StyledInputBase = /*#__PURE__*/styled__default.default.input.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -6095,7 +6593,7 @@ var StyledInputBase = styled__default.default.input.withConfig({
 /**
  * Base styled textarea with shared styling
  */
-var StyledTextAreaBase = styled__default.default.textarea.withConfig({
+var StyledTextAreaBase = /*#__PURE__*/styled__default.default.textarea.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -6107,31 +6605,31 @@ var templateObject_1$a, 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)
 var space$2 = tokens.semantic.space;
-var StyledFieldContainer$2 = styled__default.default.div.withConfig({
+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]);
-var StyledLabel$3 = styled__default.default.label.withConfig({
+var StyledLabel$3 = /*#__PURE__*/styled__default.default.label.withConfig({
   displayName: "NumberInput__StyledLabel",
   componentId: "sc-qotc3w-1"
 })(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space$2[100], field$2.label.typography, field$2.label.color, field$2.label.colorDisabled);
-var StyledRequiredIndicator$2 = styled__default.default.span.withConfig({
+var StyledRequiredIndicator$2 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "NumberInput__StyledRequiredIndicator",
   componentId: "sc-qotc3w-2"
 })(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), field$2.requiredIndicator.color, field$2.requiredIndicator.fontWeight);
-var StyledInputWrapper$2 = styled__default.default.div.withConfig({
+var StyledInputWrapper$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "NumberInput__StyledInputWrapper",
   componentId: "sc-qotc3w-3"
 })(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
-var StyledNumberInput = styled__default.default(StyledInputBase).withConfig({
+var StyledNumberInput = /*#__PURE__*/styled__default.default(StyledInputBase).withConfig({
   displayName: "NumberInput__StyledNumberInput",
   componentId: "sc-qotc3w-4"
 })(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"], ["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"])), tokens.semantic.space[1000]);
-var StyledStepperContainer = styled__default.default.div.withConfig({
+var StyledStepperContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "NumberInput__StyledStepperContainer",
   componentId: "sc-qotc3w-5"
 })(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), tokens.semantic.space[200], tokens.semantic.space[200]);
-var StyledHelperText$2 = styled__default.default.div.withConfig({
+var StyledHelperText$2 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "NumberInput__StyledHelperText",
   componentId: "sc-qotc3w-6"
 })(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
@@ -6360,7 +6858,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 = styled__default.default.div.withConfig({
+var PageTitleStyled = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -6428,30 +6926,30 @@ var templateObject_1$8;
 var field$1 = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
 var space$1 = tokens.semantic.space;
-var StyledFieldContainer$1 = styled__default.default.div.withConfig({
+var StyledFieldContainer$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "PasswordField__StyledFieldContainer",
   componentId: "sc-1p15zk0-0"
 })(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), space$1[200]);
-var StyledLabel$2 = styled__default.default.label.withConfig({
+var StyledLabel$2 = /*#__PURE__*/styled__default.default.label.withConfig({
   displayName: "PasswordField__StyledLabel",
   componentId: "sc-1p15zk0-1"
 })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space$1[100], field$1.label.typography, field$1.label.color, field$1.label.colorDisabled);
-var StyledRequiredIndicator$1 = styled__default.default.span.withConfig({
+var StyledRequiredIndicator$1 = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "PasswordField__StyledRequiredIndicator",
   componentId: "sc-1p15zk0-2"
 })(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), field$1.requiredIndicator.color, field$1.requiredIndicator.fontWeight);
-var StyledHelperText$1 = styled__default.default.div.withConfig({
+var StyledHelperText$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "PasswordField__StyledHelperText",
   componentId: "sc-1p15zk0-3"
 })(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), field$1.helperText.typography, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? field$1.helperText.colorError : field$1.helperText.color;
 });
-var StyledInputWrapper$1 = styled__default.default.div.withConfig({
+var StyledInputWrapper$1 = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "PasswordField__StyledInputWrapper",
   componentId: "sc-1p15zk0-4"
 })(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
-var StyledToggleButton = styled__default.default.div.withConfig({
+var StyledToggleButton = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "PasswordField__StyledToggleButton",
   componentId: "sc-1p15zk0-5"
 })(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"
@@ -6561,11 +7059,11 @@ var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4
 
 var semantic$3 = tokens.semantic,
   component = tokens.component;
-var StyledSearchContainer = styled__default.default.div.withConfig({
+var StyledSearchContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SearchField__StyledSearchContainer",
   componentId: "sc-qhz9i8-0"
 })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
-var StyledInputWrapper = styled__default.default.div.withConfig({
+var StyledInputWrapper = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SearchField__StyledInputWrapper",
   componentId: "sc-qhz9i8-1"
 })(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic$3.space[200], semantic$3.size.control.lg, semantic$3.space[200], semantic$3.space[300], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic$3.motion.duration.moderate, semantic$3.motion.easing.standard, semantic$3.motion.duration.moderate, semantic$3.motion.easing.standard, function (props) {
@@ -6573,15 +7071,15 @@ var StyledInputWrapper = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$disabled && "\n    background-color: ".concat(component.input.disabled.backgroundColor, ";\n    border-color: ").concat(component.input.disabled.borderColor, ";\n    cursor: not-allowed;\n  ");
 }, component.input.hover.borderColor);
-var StyledInput = styled__default.default.input.withConfig({
+var StyledInput = /*#__PURE__*/styled__default.default.input.withConfig({
   displayName: "SearchField__StyledInput",
   componentId: "sc-qhz9i8-2"
 })(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$3.typography.body, semantic$3.color.text["default"], component.input.placeholder.textColor, semantic$3.color.text.disabled);
-var StyledSuggestionsList = styled__default.default.ul.withConfig({
+var StyledSuggestionsList = /*#__PURE__*/styled__default.default.ul.withConfig({
   displayName: "SearchField__StyledSuggestionsList",
   componentId: "sc-qhz9i8-3"
 })(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic$3.space[100], tokens.semantic.size.menu.maxHeight, semantic$3.surface.raised, semantic$3.border.width.thin, semantic$3.color.border["default"], semantic$3.radius.md, semantic$3.elevation.floating, semantic$3.space[100], semantic$3.layer.dropdown, rowStates.unselected.hover.background);
-var StyledSectionHeader = styled__default.default.div.withConfig({
+var StyledSectionHeader = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "SearchField__StyledSectionHeader",
   componentId: "sc-qhz9i8-4"
 })(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"])), semantic$3.space[200], semantic$3.space[300], tokens.component.searchField.sectionHeader.typography, semantic$3.color.text.muted, tokens.component.searchField.sectionHeader.letterSpacing);
@@ -6895,7 +7393,7 @@ var slideInRight = styled.keyframes(templateObject_2$5 || (templateObject_2$5 =
 var slideInLeft = styled.keyframes(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n"], ["\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n"])));
 var slideInTop = styled.keyframes(templateObject_4$4 || (templateObject_4$4 = __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 slideInBottom = styled.keyframes(templateObject_5$3 || (templateObject_5$3 = __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 StyledOverlay = styled__default.default.div.withConfig({
+var StyledOverlay = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -6905,7 +7403,7 @@ var StyledOverlay = styled__default.default.div.withConfig({
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }));
-var StyledSheet = styled__default.default.div.withConfig({
+var StyledSheet = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -6945,7 +7443,7 @@ var StyledSheet = styled__default.default.div.withConfig({
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }, semantic$2.space[200], semantic$2.surface.raised, semantic$2.color.border["default"], semantic$2.radius.full, semantic$2.color.fill.inverse);
-var StyledSheetContent = styled__default.default.div.withConfig({
+var StyledSheetContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Sheet__StyledSheetContent",
   componentId: "sc-8abisx-2"
 })(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  padding: ", ";\n  min-height: 100%;\n"], ["\n  padding: ", ";\n  min-height: 100%;\n"
@@ -7117,22 +7615,22 @@ Sheet.displayName = 'Sheet';
 var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
 
 var semantic$1 = tokens.semantic;
-var StyledSliderContainer = styled__default.default.div.withConfig({
+var StyledSliderContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Slider__StyledSliderContainer",
   componentId: "sc-6mh2d4-0"
 })(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap:0;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap:0;\n  width: 100%;\n"])));
-var StyledLabel$1 = styled__default.default.label.withConfig({
+var StyledLabel$1 = /*#__PURE__*/styled__default.default.label.withConfig({
   displayName: "Slider__StyledLabel",
   componentId: "sc-6mh2d4-1"
 })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-bottom: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-bottom: ", ";\n"])), semantic$1.typography.label, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
 }, semantic$1.space[400]);
-var StyledSliderTrackContainer = styled__default.default.div.withConfig({
+var StyledSliderTrackContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Slider__StyledSliderTrackContainer",
   componentId: "sc-6mh2d4-2"
 })(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"])), semantic$1.space[1000]);
-var StyledTrack = styled__default.default.div.withConfig({
+var StyledTrack = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Slider__StyledTrack",
   componentId: "sc-6mh2d4-3"
 })(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* A vertical swipe over the track still scrolls the page */\n  touch-action: pan-y;\n  /* The thumbs measure their distance apart in cqw (1% of the track's width) */\n  container-type: inline-size;\n\n  /* Forced colours drop the track's fill, so it gets an edge; the thumb stays centred on it (decision 0038).\n     A div gets no system disabled colour, so a disabled track sets GrayText itself. */\n  ", " {\n    border: ", " solid ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* A vertical swipe over the track still scrolls the page */\n  touch-action: pan-y;\n  /* The thumbs measure their distance apart in cqw (1% of the track's width) */\n  container-type: inline-size;\n\n  /* Forced colours drop the track's fill, so it gets an edge; the thumb stays centred on it (decision 0038).\n     A div gets no system disabled colour, so a disabled track sets GrayText itself. */\n  ", " {\n    border: ", " solid ", ";\n  }\n"])), semantic$1.space[100], function (_a) {
@@ -7145,7 +7643,7 @@ var StyledTrack = styled__default.default.div.withConfig({
   var $disabled = _a.$disabled;
   return $disabled ? 'GrayText' : 'CanvasText';
 });
-var StyledTrackFill = styled__default.default.div.withConfig({
+var StyledTrackFill = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Slider__StyledTrackFill",
   componentId: "sc-6mh2d4-4"
 })(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n\n  /* The fill is the value, so it keeps a fill in forced colours (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n\n  /* The fill is the value, so it keeps a fill in forced colours (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: ", ";\n  }\n"])), function (_a) {
@@ -7155,7 +7653,7 @@ var StyledTrackFill = styled__default.default.div.withConfig({
   var $disabled = _a.$disabled;
   return $disabled ? 'GrayText' : 'Highlight';
 });
-var StyledThumb = styled__default.default.div.withConfig({
+var StyledThumb = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Slider__StyledThumb",
   componentId: "sc-6mh2d4-5"
 })(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: calc(-1 * ", ");\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* The thumb takes every touch gesture, so a drag moves the value instead of scrolling */\n  touch-action: none;\n  transform: translateX(-50%);\n  /* left is the thumb's position, set from the value: it glides there, as it always has (decision 0037) */\n  transition: left ", " ", ",\n              transform ", " ", ",\n              box-shadow ", " ", ",\n              background-color ", " ", ",\n              border-color ", " ", ";\n  box-shadow: ", ";\n\n  /* The pointer target (WCAG 2.5.8, decision 0039): the thumb keeps its 20px look, and an\n     invisible hit area centred on it takes pointer input instead, 24px for a mouse or pen and\n     44px on a touch screen. A range slider's two hit areas stop at the midpoint between the\n     thumbs (--slider-reach, set from their positions), so they never overlap and a drag always\n     takes the nearer thumb. The thumb itself takes no input, as its body can overlap the other\n     thumb's half. */\n  pointer-events: none;\n  --slider-hit: ", ";\n  @media (pointer: coarse) {\n    --slider-hit: ", ";\n  }\n  --slider-hit-half: calc(var(--slider-hit) / 2);\n  --slider-hit-start: ", ";\n  --slider-hit-end: ", ";\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: calc(50% - var(--slider-hit-start));\n    width: calc(var(--slider-hit-start) + var(--slider-hit-end));\n    height: var(--slider-hit);\n    transform: translateY(-50%);\n    pointer-events: auto;\n  }\n\n  /* Without container query units the midpoint can't be measured, so the hit areas stay whole\n     (where they overlap, the thumb drawn later wins) */\n  @supports not (width: 1cqw) {\n    &::before {\n      left: calc(50% - var(--slider-hit-half));\n      width: var(--slider-hit);\n    }\n  }\n\n  ", " {\n    transition: none;\n  }\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: calc(-1 * ", ");\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* The thumb takes every touch gesture, so a drag moves the value instead of scrolling */\n  touch-action: none;\n  transform: translateX(-50%);\n  /* left is the thumb's position, set from the value: it glides there, as it always has (decision 0037) */\n  transition: left ", " ", ",\n              transform ", " ", ",\n              box-shadow ", " ", ",\n              background-color ", " ", ",\n              border-color ", " ", ";\n  box-shadow: ", ";\n\n  /* The pointer target (WCAG 2.5.8, decision 0039): the thumb keeps its 20px look, and an\n     invisible hit area centred on it takes pointer input instead, 24px for a mouse or pen and\n     44px on a touch screen. A range slider's two hit areas stop at the midpoint between the\n     thumbs (--slider-reach, set from their positions), so they never overlap and a drag always\n     takes the nearer thumb. The thumb itself takes no input, as its body can overlap the other\n     thumb's half. */\n  pointer-events: none;\n  --slider-hit: ", ";\n  @media (pointer: coarse) {\n    --slider-hit: ", ";\n  }\n  --slider-hit-half: calc(var(--slider-hit) / 2);\n  --slider-hit-start: ", ";\n  --slider-hit-end: ", ";\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: calc(50% - var(--slider-hit-start));\n    width: calc(var(--slider-hit-start) + var(--slider-hit-end));\n    height: var(--slider-hit);\n    transform: translateY(-50%);\n    pointer-events: auto;\n  }\n\n  /* Without container query units the midpoint can't be measured, so the hit areas stay whole\n     (where they overlap, the thumb drawn later wins) */\n  @supports not (width: 1cqw) {\n    &::before {\n      left: calc(50% - var(--slider-hit-half));\n      width: var(--slider-hit);\n    }\n  }\n\n  ", " {\n    transition: none;\n  }\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"])), semantic$1.space[500], semantic$1.space[500], semantic$1.space[200], function (_a) {
@@ -7177,14 +7675,14 @@ var StyledThumb = styled__default.default.div.withConfig({
   var $active = _a.$active;
   return $active && "\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ".concat(tokens.component.slider.thumb.shadow.active, ";\n  ");
 });
-var StyledValueLabel = styled__default.default.div.withConfig({
+var StyledValueLabel = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Slider__StyledValueLabel",
   componentId: "sc-6mh2d4-6"
 })(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(-1 * ", ");\n  left: ", ";\n  transform: translateX(-50%);\n  padding: ", " ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  border-radius: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: ", ";\n  \n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(-1 * ", ");\n  left: ", ";\n  transform: translateX(-50%);\n  padding: ", " ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  border-radius: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: ", ";\n  \n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid ", ";\n  }\n"])), semantic$1.space[800], semantic$1.space[200], semantic$1.space[100], semantic$1.space[200], semantic$1.color.fill.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, semantic$1.radius.sm, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? semantic$1.opacity.disabled : semantic$1.opacity.full;
 }, semantic$1.space[100], semantic$1.space[100], semantic$1.space[100], semantic$1.color.fill.emphasis);
-var StyledMinMaxLabels = styled__default.default.div.withConfig({
+var StyledMinMaxLabels = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "Slider__StyledMinMaxLabels",
   componentId: "sc-6mh2d4-7"
 })(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"
@@ -7568,11 +8066,11 @@ Slider.displayName = 'Slider';
 var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
 
 var semantic = tokens.semantic;
-var StyledTabList = styled__default.default.div.withConfig({
+var StyledTabList = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TabBar__StyledTabList",
   componentId: "sc-1g9ib0y-0"
 })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border.emphasis, tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
-var StyledTab = styled__default.default.button.withConfig({
+var StyledTab = /*#__PURE__*/styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -7599,7 +8097,7 @@ var StyledTab = styled__default.default.button.withConfig({
 }, function (props) {
   return props.$disabled ? '0.5' : '1';
 }, semantic.border.focus, semantic.border.focusOffset);
-var StyledBadge = styled__default.default.span.withConfig({
+var StyledBadge = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "TabBar__StyledBadge",
   componentId: "sc-1g9ib0y-2"
 })(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"
@@ -7772,19 +8270,19 @@ var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 var field = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
 var space = tokens.semantic.space;
-var StyledFieldContainer = styled__default.default.div.withConfig({
+var StyledFieldContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TextField__StyledFieldContainer",
   componentId: "sc-1ys3b0-0"
 })(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), space[200]);
-var StyledLabel = styled__default.default.label.withConfig({
+var StyledLabel = /*#__PURE__*/styled__default.default.label.withConfig({
   displayName: "TextField__StyledLabel",
   componentId: "sc-1ys3b0-1"
 })(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space[100], field.label.typography, field.label.color, field.label.colorDisabled);
-var StyledRequiredIndicator = styled__default.default.span.withConfig({
+var StyledRequiredIndicator = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "TextField__StyledRequiredIndicator",
   componentId: "sc-1ys3b0-2"
 })(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), field.requiredIndicator.color, field.requiredIndicator.fontWeight);
-var StyledHelperText = styled__default.default.div.withConfig({
+var StyledHelperText = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TextField__StyledHelperText",
   componentId: "sc-1ys3b0-3"
 })(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
@@ -7873,42 +8371,42 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 TextField.displayName = 'TextField';
 var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
 
-var StyledContainer = styled__default.default.div.withConfig({
+var StyledContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledContainer",
   componentId: "sc-7yunm0-0"
 })(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"])), tokens.component.transactionListItem.minHeight, tokens.semantic.space[300], tokens.semantic.space[300], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], tokens.semantic.space[300], tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.decelerate, function (_a) {
   var $clickable = _a.$clickable;
   return $clickable && "\n    cursor: pointer;\n    ".concat(interactiveRow(), "\n    \n    &:focus-visible {\n      outline: ").concat(tokens.semantic.border.focus, ";\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.focusOffset, ");\n    }\n  ");
 });
-var StyledAvatarSection = styled__default.default.div.withConfig({
+var StyledAvatarSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledAvatarSection",
   componentId: "sc-7yunm0-1"
 })(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
-var StyledMainContent = styled__default.default.div.withConfig({
+var StyledMainContent = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledMainContent",
   componentId: "sc-7yunm0-2"
 })(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: none;\n"], ["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: none;\n"])));
-var StyledTopRow = styled__default.default.div.withConfig({
+var StyledTopRow = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledTopRow",
   componentId: "sc-7yunm0-3"
 })(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
-var StyledMerchantSection = styled__default.default.div.withConfig({
+var StyledMerchantSection = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledMerchantSection",
   componentId: "sc-7yunm0-4"
 })(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"])), tokens.semantic.space[200]);
-var StyledBottomRow = styled__default.default.div.withConfig({
+var StyledBottomRow = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledBottomRow",
   componentId: "sc-7yunm0-5"
 })(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
-var StyledMetadata = styled__default.default.div.withConfig({
+var StyledMetadata = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledMetadata",
   componentId: "sc-7yunm0-6"
 })(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
-var StyledIconIndicator = styled__default.default.div.withConfig({
+var StyledIconIndicator = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledIconIndicator",
   componentId: "sc-7yunm0-7"
 })(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"])), tokens.semantic.space[100], tokens.semantic.color.icon.muted);
-var StyledTruncatedText = styled__default.default.span.withConfig({
+var StyledTruncatedText = /*#__PURE__*/styled__default.default.span.withConfig({
   displayName: "TransactionListItem__StyledTruncatedText",
   componentId: "sc-7yunm0-8"
 })(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"
@@ -8102,7 +8600,7 @@ var media = {
   xl: "@media (min-width: ".concat(breakpoints.xl, ")"),
   '2xl': "@media (min-width: ".concat(breakpoints['2xl'], ")")
 };
-var GridContainer = styled__default.default.div.withConfig({
+var GridContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -8136,7 +8634,7 @@ var Grid = function Grid(_a) {
     children: children
   });
 };
-var GridColContainer = styled__default.default.div.withConfig({
+var GridColContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -8193,7 +8691,7 @@ var GridCol = function GridCol(_a) {
     children: children
   });
 };
-var ResponsiveGridContainer = styled__default.default.div.withConfig({
+var ResponsiveGridContainer = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -8292,6 +8790,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
 
+exports.AILabel = AILabel;
 exports.AccountCard = AccountCard;
 exports.ActionSheet = ActionSheet;
 exports.AgentInput = AgentInput;
@@ -8343,6 +8842,7 @@ exports.StatusBadge = StatusBadge;
 exports.StatusLabel = StatusLabel;
 exports.StyledInputBase = StyledInputBase;
 exports.StyledTextAreaBase = StyledTextAreaBase;
+exports.SuggestionChip = SuggestionChip;
 exports.TabBar = TabBar;
 exports.Tag = Tag;
 exports.TextField = TextField;