@common-origin/design-system 2.13.0 → 2.15.0

package/dist/client.js

@@ -111,10 +111,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 // Destructure tokens
-var semantic$j = data.tokensJson.semantic;
-var color$a = semantic$j.color,
-  size$1 = semantic$j.size,
-  border$a = semantic$j.border;
+var semantic$g = data.tokensJson.semantic;
+var initials = data.tokensJson.component.avatar.initials;
+var color$a = semantic$g.color,
+  size$1 = semantic$g.size,
+  border$a = semantic$g.border;
 var radius$5 = border$a.radius;
 var AvatarContainer = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -122,7 +123,7 @@ var AvatarContainer = styled__default.default.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$K || (templateObject_1$K = __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$L || (templateObject_1$L = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
   var $size = _a.$size;
   return size$1.avatar[$size];
 }, function (_a) {
@@ -135,26 +136,19 @@ var AvatarImage = styled__default.default.img.withConfig({
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$5.circle);
+})(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$5.circle);
 var AvatarInitials = styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
+})(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
-])), data.tokensJson.base.fontFamily.body, data.tokensJson.base.fontWeight[3], function (_a) {
+])), initials.fontFamily, initials.fontWeight, function (_a) {
   var $size = _a.$size;
-  var sizeMap = {
-    xs: data.tokensJson.base.fontSize[1],
-    sm: data.tokensJson.base.fontSize[2],
-    md: data.tokensJson.base.fontSize[3],
-    lg: data.tokensJson.base.fontSize[4],
-    xl: data.tokensJson.base.fontSize[5]
-  };
-  return sizeMap[$size];
-}, color$a.text["default"]);
+  return initials.fontSize[$size];
+}, color$a.text["default"], initials.lineHeight);
 // Helper function to get initials from name
 var getInitials = function getInitials(name) {
   return name.split(' ').map(function (word) {
@@ -208,29 +202,74 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
+var templateObject_1$L, templateObject_2$w, templateObject_3$t;
+
+// Breakpoints from the semantic tokens (decision 0014)
+var breakpoints$1 = {
+  xs: data.tokensJson.semantic.breakpoint.xs,
+  sm: data.tokensJson.semantic.breakpoint.sm,
+  md: data.tokensJson.semantic.breakpoint.md,
+  lg: data.tokensJson.semantic.breakpoint.lg,
+  xl: data.tokensJson.semantic.breakpoint.xl,
+  '2xl': data.tokensJson.semantic.breakpoint['2xl']
+};
+// Media query helpers
+var media$1 = {
+  xs: "@media (min-width: ".concat(breakpoints$1.xs, ")"),
+  sm: "@media (min-width: ".concat(breakpoints$1.sm, ")"),
+  md: "@media (min-width: ".concat(breakpoints$1.md, ")"),
+  lg: "@media (min-width: ".concat(breakpoints$1.lg, ")"),
+  xl: "@media (min-width: ".concat(breakpoints$1.xl, ")"),
+  '2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
+};
+// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes
+// an instant change or a simple fade. Colour and opacity transitions need no fallback.
+var reducedMotion = '@media (prefers-reduced-motion: reduce)';
+// No `from` keyframe: the fade starts from the element's current opacity, including a
+// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.
+var fadeOut$1 = styled.keyframes(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  to { opacity: 0; }\n"], ["\n  to { opacity: 0; }\n"
+// 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
+// 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.
+])));
+// 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
+// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
+// still catches clicks (so they can't reach the page behind it) and the panel is inert.
+var exitAnimation = styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
+// Content for screen readers only. The 1px size and -1px margin are part of the standard
+// visually-hidden technique, not design values, so they aren't tokens.
+])), fadeOut$1, data.tokensJson.semantic.motion.duration.fast, data.tokensJson.semantic.motion.easing.easeOut);
+// Content for screen readers only. The 1px size and -1px margin are part of the standard
+// visually-hidden technique, not design values, so they aren't tokens.
+var visuallyHidden = styled.css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"])));
 var templateObject_1$K, templateObject_2$v, templateObject_3$s;
 
-var _a$8 = data.tokensJson.semantic,
-  typography$5 = _a$8.typography,
-  color$9 = _a$8.color;
+var _a$b = data.tokensJson.semantic,
+  typography$1 = _a$b.typography,
+  color$9 = _a$b.color,
+  letterSpacing = _a$b.letterSpacing;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
-    display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(data.tokensJson.base.letterSpacing[0], ";"),
-    h1: "font: ".concat(typography$5.h1, "; letter-spacing: ").concat(data.tokensJson.base.letterSpacing[0], ";"),
-    h2: "font: ".concat(typography$5.h2, "; letter-spacing: ").concat(data.tokensJson.base.letterSpacing[1], ";"),
-    h3: "font: ".concat(typography$5.h3, "; letter-spacing: ").concat(data.tokensJson.base.letterSpacing[1], ";"),
-    h4: "font: ".concat(typography$5.h4, "; letter-spacing: ").concat(data.tokensJson.base.letterSpacing[1], ";"),
-    h5: "font: ".concat(typography$5.h5, "; letter-spacing: ").concat(data.tokensJson.base.letterSpacing[2], ";"),
-    h6: "font: ".concat(typography$5.h6, "; letter-spacing: ").concat(data.tokensJson.base.letterSpacing[2], ";"),
-    subtitle: "font: ".concat(typography$5.subtitle, ";"),
-    body: "font: ".concat(typography$5.body, ";"),
-    small: "font: ".concat(typography$5.small, ";"),
-    overline: "font: ".concat(typography$5.overline, ";"),
-    caption: "font: ".concat(typography$5.caption, "; text-transform: uppercase;"),
-    button1: "font: ".concat(typography$5.button1, ";"),
-    button2: "font: ".concat(typography$5.button2, ";"),
-    button3: "font: ".concat(typography$5.button3, ";"),
-    label: "font: ".concat(typography$5.label, ";")
+    display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    subtitle: "font: ".concat(typography$1.subtitle, ";"),
+    body: "font: ".concat(typography$1.body, ";"),
+    small: "font: ".concat(typography$1.small, ";"),
+    overline: "font: ".concat(typography$1.overline, ";"),
+    caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
+    button1: "font: ".concat(typography$1.button1, ";"),
+    button2: "font: ".concat(typography$1.button2, ";"),
+    button3: "font: ".concat(typography$1.button3, ";"),
+    label: "font: ".concat(typography$1.label, ";")
   };
   return styles[variant] || styles.body;
 };
@@ -275,7 +314,7 @@ var StyledTypography = styled__default.default.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"
+})(templateObject_1$J || (templateObject_1$J = __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.
  *
@@ -299,12 +338,6 @@ var StyledTypography = styled__default.default.span.withConfig({
 }, function (_a) {
   var $color = _a.$color;
   return getTextColor($color);
-}, function (_a) {
-  var $variant = _a.$variant;
-  if (['body', 'subtitle', 'small'].includes($variant)) {
-    return 'line-height: 1.5;';
-  }
-  return '';
 });
 /**
  * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
@@ -345,10 +378,14 @@ var Typography = function Typography(_a) {
 };
 var templateObject_1$J;
 
-var semantic$i = data.tokensJson.semantic;
-var color$8 = semantic$i.color,
-  border$9 = semantic$i.border;
+var semantic$f = data.tokensJson.semantic;
+var color$8 = semantic$f.color,
+  border$9 = semantic$f.border;
 var radius$4 = border$9.radius;
+var _a$a = data.tokensJson.component.badge,
+  dot = _a$a.dot,
+  count = _a$a.count,
+  ring = _a$a.ring;
 var scaleIn$2 = styled.keyframes(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = styled__default.default.span.withConfig({
   displayName: "Badge__BadgeWrapper",
@@ -360,15 +397,15 @@ var BadgeIndicator = styled__default.default.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
+})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n  \n  ", "\n"])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
-  return props.$isDot ? '8px' : '16px';
+  return props.$isDot ? dot.size : count.minWidth;
 }, function (props) {
-  return props.$isDot ? '8px' : '16px';
+  return props.$isDot ? dot.size : count.height;
 }, function (props) {
-  return props.$isDot ? '0' : '0 4px';
-}, radius$4.circle, color$8.background["default"], scaleIn$2, function (props) {
+  return props.$isDot ? '0' : "0 ".concat(count.paddingX);
+}, radius$4.circle, count.lineHeight, ring.width, color$8.background["default"], scaleIn$2, semantic$f.motion.duration.normal, semantic$f.motion.easing.easeOut, reducedMotion, function (props) {
   switch (props.$variant) {
     case 'primary':
       return "\n          background-color: ".concat(color$8.background.interactive, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
@@ -385,7 +422,7 @@ var BadgeIndicator = styled__default.default.span.withConfig({
 var ScreenReaderOnly$1 = styled__default.default.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
   componentId: "sc-tjz4pp-2"
-})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"])));
+})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -397,7 +434,8 @@ var Badge = function Badge(_a) {
     _e = _a.dot,
     dot = _e === void 0 ? false : _e,
     ariaLabel = _a["aria-label"],
-    className = _a.className;
+    className = _a.className,
+    dataTestId = _a["data-testid"];
   var isVisible = dot || count > 0;
   var displayCount = count > max ? "".concat(max, "+") : count.toString();
   // Generate default aria-label if not provided
@@ -405,6 +443,7 @@ var Badge = function Badge(_a) {
   var label = ariaLabel || defaultAriaLabel;
   return jsxRuntime.jsxs(BadgeWrapper, {
     className: className,
+    "data-testid": dataTestId,
     children: [children, jsxRuntime.jsxs(BadgeIndicator, {
       "$variant": variant,
       "$isDot": dot,
@@ -440,21 +479,21 @@ var StyledBox = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$alignItems && styled.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && styled.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && styled.css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
   return props.$gap && styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$gap]);
 }, function (props) {
   return props.$m && styled.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$m]);
 }, function (props) {
-  return props.$mt && styled.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mt]);
+  return props.$mt && styled.css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mt]);
 }, function (props) {
-  return props.$mr && styled.css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mr]);
+  return props.$mr && styled.css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mr]);
 }, function (props) {
-  return props.$mb && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mb]);
+  return props.$mb && styled.css(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mb]);
 }, function (props) {
-  return props.$ml && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$ml]);
+  return props.$ml && styled.css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$ml]);
 }, function (props) {
-  return props.$mx && styled.css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), data.tokensJson.semantic.spacing.layout[props.$mx], data.tokensJson.semantic.spacing.layout[props.$mx]);
+  return props.$mx && styled.css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), data.tokensJson.semantic.spacing.layout[props.$mx], data.tokensJson.semantic.spacing.layout[props.$mx]);
 }, function (props) {
   return props.$my && styled.css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), data.tokensJson.semantic.spacing.layout[props.$my], data.tokensJson.semantic.spacing.layout[props.$my]);
 }, function (props) {
@@ -466,7 +505,7 @@ var StyledBox = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$pb && styled.css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$pb]);
 }, function (props) {
-  return props.$pl && styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$pl]);
+  return props.$pl && styled.css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$pl]);
 }, function (props) {
   return props.$px && styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), data.tokensJson.semantic.spacing.layout[props.$px], data.tokensJson.semantic.spacing.layout[props.$px]);
 }, function (props) {
@@ -496,15 +535,15 @@ var StyledBox = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), data.tokensJson.semantic.border.radius[props.$borderRadius]);
 }, function (props) {
-  return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), data.tokensJson.semantic.color.border[props.$border]);
+  return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$border]);
 }, function (props) {
-  return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: 1px solid ", ";"], ["border-top: 1px solid ", ";"])), data.tokensJson.semantic.color.border[props.$borderTop]);
+  return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$borderTop]);
 }, function (props) {
-  return props.$borderRight && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: 1px solid ", ";"], ["border-right: 1px solid ", ";"])), data.tokensJson.semantic.color.border[props.$borderRight]);
+  return props.$borderRight && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$borderRight]);
 }, function (props) {
-  return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), data.tokensJson.semantic.color.border[props.$borderBottom]);
+  return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$borderBottom]);
 }, function (props) {
-  return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), data.tokensJson.semantic.color.border[props.$borderLeft]);
+  return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$borderLeft]);
 }, function (props) {
   return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), data.tokensJson.semantic.color.background[props.$bg]);
 }, function (props) {
@@ -516,7 +555,7 @@ var StyledBox = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$transition && styled.css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
 }, function (props) {
-  return (props.$hoverShadow || props.$hoverTransform) && styled.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ", ";\n      outline-offset: 2px;\n    }\n  "], ["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ", ";\n      outline-offset: 2px;\n    }\n  "])), props.$hoverShadow && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), data.tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && styled.css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), data.tokensJson.semantic.color.border.interactive);
+  return (props.$hoverShadow || props.$hoverTransform) && styled.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: ", " solid ", ";\n      outline-offset: ", ";\n    }\n  "], ["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: ", " solid ", ";\n      outline-offset: ", ";\n    }\n  "])), props.$hoverShadow && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), data.tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && styled.css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), data.tokensJson.semantic.border.width.thick, data.tokensJson.semantic.color.border.interactive, data.tokensJson.semantic.border.focusOffset);
 }, function (props) {
   return props.$overflow && styled.css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
 }, function (props) {
@@ -656,7 +695,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$7, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
+var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$h, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
 
 var IconStyled = styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -733,9 +772,9 @@ var Icon = function Icon(_a) {
 var templateObject_1$G;
 
 var button$1 = data.tokensJson.component.button,
-  semantic$h = data.tokensJson.semantic;
+  semantic$e = data.tokensJson.semantic;
 // Base styles shared between button and link
-var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(data.tokensJson.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$h.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(button$1.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(data.tokensJson.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$e.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(button$1.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
@@ -855,8 +894,11 @@ var Button = function Button(_a) {
     rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
   // For links with custom link component (e.g., Next.js Link, React Router Link)
   if (purpose === 'link' && url && LinkComponent) {
-    return jsxRuntime.jsx(LinkComponent, {
+    // The link component renders the <a>, so anchor attributes (id, aria-*, rel, handlers) go to it
+    var linkProps = rest;
+    return jsxRuntime.jsx(LinkComponent, __assign({}, linkProps, {
       href: url,
+      target: target,
       children: jsxRuntime.jsx(StyledLink, {
         as: "span",
         "$variant": variant,
@@ -864,18 +906,17 @@ var Button = function Button(_a) {
         "data-testid": dataTestId,
         children: renderButtonContent(children, iconName, size)
       })
-    });
+    }));
   }
   // For standard links (external or without custom component)
   if (purpose === 'link' && url) {
     var linkProps = rest;
-    return jsxRuntime.jsx(StyledLink, __assign({
+    return jsxRuntime.jsx(StyledLink, __assign({}, linkProps, {
       href: url,
       target: target,
       "$variant": variant,
       "$size": size,
-      "data-testid": dataTestId
-    }, linkProps, {
+      "data-testid": dataTestId,
       children: renderButtonContent(children, iconName, size)
     }));
   }
@@ -914,12 +955,11 @@ var Button = function Button(_a) {
 };
 var templateObject_1$F, templateObject_2$s;
 
-var semantic$g = data.tokensJson.semantic,
-  base$c = data.tokensJson.base;
-var color$7 = semantic$g.color,
-  typography$4 = semantic$g.typography,
-  border$8 = semantic$g.border,
-  spacing$7 = semantic$g.spacing;
+var semantic$d = data.tokensJson.semantic;
+var color$7 = semantic$d.color,
+  border$8 = semantic$d.border,
+  spacing$7 = semantic$d.spacing;
+var label$2 = data.tokensJson.component.badge.label;
 var category = color$7.category;
 var radius$3 = border$8.radius;
 var layout$4 = spacing$7.layout;
@@ -929,7 +969,7 @@ var StyledCategoryBadge = styled__default.default.span.withConfig({
   },
   displayName: "CategoryBadge__StyledCategoryBadge",
   componentId: "sc-17aslpn-0"
-})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: ", ";\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  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: ", ";\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  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border-color: ", ";\n"
+})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border-color: ", ";\n"
 /**
  * CategoryBadge component for displaying transaction categories
  *
@@ -947,7 +987,7 @@ var StyledCategoryBadge = styled__default.default.span.withConfig({
  *   Travel
  * </CategoryBadge>
  * ```
- */])), radius$3.circle, base$c.fontWeight[3], base$c.border.width[1], function (_a) {
+ */])), radius$3.circle, semantic$d.border.width.thin, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? '24px' : '32px';
 }, function (_a) {
@@ -955,8 +995,8 @@ var StyledCategoryBadge = styled__default.default.span.withConfig({
   return $size === 'small' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? typography$4.caption : typography$4.small;
-}, layout$4.xs, function (_a) {
+  return $size === 'small' ? label$2.typography.small : label$2.typography.medium;
+}, label$2.fontWeight, layout$4.xs, function (_a) {
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
@@ -1030,6 +1070,11 @@ CategoryBadge.displayName = 'CategoryBadge';
 var templateObject_1$E;
 
 var chip = data.tokensJson.component.chip;
+// Selected-chip hover and active colours have no token yet: they wait on #21 (selected states).
+// eslint-disable-next-line no-restricted-syntax
+var SELECTED_HOVER = '#CAE8FF';
+// eslint-disable-next-line no-restricted-syntax
+var SELECTED_ACTIVE = '#B5DEFF';
 // Helper function to get variant styles matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
   var $variant = _a.$variant,
@@ -1038,7 +1083,7 @@ var getVariantStyles = function getVariantStyles(_a) {
     $disabled = _a.$disabled;
   // Boolean chips with selected state get special background
   if ($selected) {
-    return "\n      background-color: ".concat(data.tokensJson.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? data.tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#CAE8FF' : data.tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? data.tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#B5DEFF' : data.tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n    ");
+    return "\n      background-color: ".concat(data.tokensJson.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? data.tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? SELECTED_HOVER : data.tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? data.tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? SELECTED_ACTIVE : data.tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n    ");
   }
   switch ($variant) {
     case 'emphasis':
@@ -1090,9 +1135,9 @@ var CloseButton = styled__default.default.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.border.radius.xs, function (props) {
+})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), data.tokensJson.semantic.spacing.layout.sm, chip.closeButton.size, chip.closeButton.size, data.tokensJson.semantic.spacing.layout.none, data.tokensJson.semantic.border.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, data.tokensJson.semantic.motion.hover, data.tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
+}, data.tokensJson.semantic.motion.hover, data.tokensJson.semantic.color.background['hover-overlay'], data.tokensJson.semantic.color.background['active-overlay'], data.tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
 var templateObject_1$D, templateObject_2$r, templateObject_3$p;
 
 /**
@@ -1320,30 +1365,11 @@ var BooleanChip = function BooleanChip(_a) {
   }));
 };
 
-// Breakpoints using base tokens
-var breakpoints$1 = {
-  xs: data.tokensJson.base.breakpoint.xs,
-  sm: data.tokensJson.base.breakpoint.sm,
-  md: data.tokensJson.base.breakpoint.md,
-  lg: data.tokensJson.base.breakpoint.lg,
-  xl: data.tokensJson.base.breakpoint.xl,
-  '2xl': data.tokensJson.base.breakpoint['2xl']
-};
-// Media query helpers
-var media$1 = {
-  xs: "@media (min-width: ".concat(breakpoints$1.xs, ")"),
-  sm: "@media (min-width: ".concat(breakpoints$1.sm, ")"),
-  md: "@media (min-width: ".concat(breakpoints$1.md, ")"),
-  lg: "@media (min-width: ".concat(breakpoints$1.lg, ")"),
-  xl: "@media (min-width: ".concat(breakpoints$1.xl, ")"),
-  '2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
-};
-
 var spacing$6 = data.tokensJson.semantic.spacing;
 var StyledContainer$2 = styled__default.default.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing$6.layout['2xl'], spacing$6.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), spacing$6.layout['2xl'], spacing$6.layout['2xl'], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
 var Container$1 = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
@@ -1353,7 +1379,6 @@ var Container$1 = function Container(_a) {
 };
 var templateObject_1$C;
 
-var base$b = data.tokensJson.base;
 var PictureWrapper = styled__default.default.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
@@ -1361,15 +1386,15 @@ var PictureWrapper = styled__default.default.div.withConfig({
 var ImageLink = styled__default.default.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
-})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
+})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut);
 var ImageButton = styled__default.default.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
+})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut);
 var StyledImage = styled__default.default.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
-})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), base$b.border.radius[2]);
+})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), data.tokensJson.semantic.border.radius.sm);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -1401,16 +1426,16 @@ var Picture = function Picture(_a) {
 };
 var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
 
-var _a$7 = data.tokensJson.semantic,
-  typography$3 = _a$7.typography,
-  color$6 = _a$7.color;
+var _a$9 = data.tokensJson.semantic,
+  typography = _a$9.typography,
+  color$6 = _a$9.color;
 var TimeStyled = styled__default.default.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
 })(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * Formats a date with smart relative/absolute logic
- */])), typography$3.label, color$6.text.subdued);
+ */])), typography.label, color$6.text.subdued);
 /**
  * Formats a date with smart relative/absolute logic
  */
@@ -1458,17 +1483,17 @@ var DateFormatter = function DateFormatter(_a) {
 };
 var templateObject_1$A;
 
-var motion$2 = data.tokensJson.semantic.motion,
-  _a$6 = data.tokensJson.component,
-  iconButton = _a$6.iconButton,
-  button = _a$6.button;
+var motion$5 = data.tokensJson.semantic.motion,
+  _a$8 = data.tokensJson.component,
+  iconButton = _a$8.iconButton,
+  button = _a$8.button;
 var IconButtonStyled = styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
+})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: ", " solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: ", " solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'primary':
@@ -1492,7 +1517,7 @@ var IconButtonStyled = styled__default.default.button.withConfig({
     default:
       return button.primary.textColor;
   }
-}, iconButton.primary.borderRadius, motion$2.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
+}, iconButton.primary.borderRadius, motion$5.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
   var $size = _a.$size;
   return iconButton.sizes[$size].minWidth;
 }, function (_a) {
@@ -1525,7 +1550,7 @@ var IconButtonStyled = styled__default.default.button.withConfig({
     default:
       return button.disabled.textColor;
   }
-});
+}, data.tokensJson.semantic.border.width.thin);
 var IconButton = function IconButton(_a) {
   var variant = _a.variant,
     _b = _a.size,
@@ -1591,7 +1616,7 @@ var StyledWrapper = styled__default.default.span.withConfig({
   return $align;
 }, function (_a) {
   var $weight = _a.$weight;
-  return $weight === 'regular' ? 400 : $weight === 'medium' ? 500 : 700;
+  return data.tokensJson.semantic.fontWeight[$weight];
 });
 // Map size to Typography variant
 var sizeToTypographyVariant = {
@@ -1690,14 +1715,14 @@ var MoneyDisplay = function MoneyDisplay(_a) {
 var templateObject_1$y;
 
 // Destructure tokens
-var semantic$f = data.tokensJson.semantic;
-var _a$5 = __assign(__assign({}, semantic$f), {
+var semantic$c = data.tokensJson.semantic;
+var _a$7 = __assign(__assign({}, semantic$c), {
     component: data.tokensJson.component
   }),
-  color$5 = _a$5.color,
-  border$7 = _a$5.border,
-  motion$1 = _a$5.motion,
-  component$2 = _a$5.component;
+  color$5 = _a$7.color,
+  border$7 = _a$7.border,
+  motion$4 = _a$7.motion,
+  component$2 = _a$7.component;
 var radius$2 = border$7.radius;
 var ProgressBarContainer = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1716,7 +1741,7 @@ var ProgressBarFill = styled__default.default.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarFill",
   componentId: "sc-1nco33q-1"
-})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), motion$1.transition.normal, function (props) {
+})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  height: 100%;\n  transition: ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), motion$4.transition.normal, reducedMotion, function (props) {
   var backgroundColor;
   switch (props.$color) {
     case 'success':
@@ -1732,7 +1757,7 @@ var ProgressBarFill = styled__default.default.div.withConfig({
   }
   return styled.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
 }, function (props) {
-  return props.$variant === 'horizontal' && styled.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+  return props.$variant === 'horizontal' && styled.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 }, function (props) {
   return props.$variant === 'vertical' && styled.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 });
@@ -1744,13 +1769,20 @@ var ProgressBar = function ProgressBar(_a) {
     color = _c === void 0 ? 'default' : _c,
     height = _a.height,
     width = _a.width,
+    ariaLabel = _a["aria-label"],
+    ariaLabelledBy = _a["aria-labelledby"],
     dataTestId = _a["data-testid"];
+  // Blank values are no name at all, so they fall back like missing ones
+  var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
+  var labelledBy = (ariaLabelledBy === null || ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy.trim()) ? ariaLabelledBy : undefined;
   return jsxRuntime.jsx(ProgressBarContainer, {
     "$variant": variant,
     "$height": height,
     "$width": width,
     "data-testid": dataTestId,
     role: "progressbar",
+    "aria-label": label !== null && label !== void 0 ? label : labelledBy ? undefined : 'Progress',
+    "aria-labelledby": labelledBy,
     "aria-valuenow": Math.min(100, Math.max(0, value)),
     "aria-valuemin": 0,
     "aria-valuemax": 100,
@@ -1761,7 +1793,7 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a;
+var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$g, templateObject_6$c, templateObject_7$a;
 
 // Destructure tokens for cleaner access
 var separatorTokens = data.tokensJson.component.separator;
@@ -1794,9 +1826,9 @@ var StyledDivider = styled__default.default.div.withConfig({
   var _b = _a.$orientation,
     $orientation = _b === void 0 ? 'horizontal' : _b;
   if ($orientation === 'vertical') {
-    return "\n        display: inline-block;\n        height: auto;\n        align-self: stretch;\n        border-left: 1px solid;\n        border-top: none;\n      ";
+    return "\n        display: inline-block;\n        height: auto;\n        align-self: stretch;\n        border-left: ".concat(data.tokensJson.semantic.border.width.thin, " solid;\n        border-top: none;\n      ");
   }
-  return "border-top: 1px solid;";
+  return "border-top: ".concat(data.tokensJson.semantic.border.width.thin, " solid;");
 }, function (_a) {
   var _b = _a.$variant,
     $variant = _b === void 0 ? 'default' : _b,
@@ -1938,8 +1970,11 @@ var templateObject_1$v;
 var statusColors = data.tokensJson.semantic.color.status;
 var spacing$5 = data.tokensJson.semantic.spacing.layout;
 var radius$1 = data.tokensJson.semantic.border.radius;
-var transition = data.tokensJson.semantic.motion.transition;
-var typography$2 = data.tokensJson.semantic.typography;
+var _a$6 = data.tokensJson.semantic.motion,
+  transition = _a$6.transition,
+  duration$3 = _a$6.duration,
+  easing$3 = _a$6.easing;
+var label$1 = data.tokensJson.component.badge.label;
 var scaleIn$1 = styled.keyframes(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
   var configs = {
@@ -1989,14 +2024,14 @@ var sizeConfig = {
   small: {
     height: '20px',
     padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
-    font: typography$2.caption,
+    font: label$1.typography.small,
     gap: spacing$5.xs,
     iconSize: 'xs'
   },
   medium: {
     height: '24px',
     padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
-    font: typography$2.small,
+    font: label$1.typography.medium,
     gap: spacing$5.xs,
     iconSize: 'sm'
   }
@@ -2007,10 +2042,10 @@ var StyledStatusBadge = styled__default.default.span.withConfig({
   },
   displayName: "StatusBadge__StyledStatusBadge",
   componentId: "sc-1paksgb-0"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: 500;\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " 0.2s ease-out;\n  transition: ", ";\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: 500;\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " 0.2s ease-out;\n  transition: ", ";\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.circle, scaleIn$1, transition.fast, function (_a) {
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* transition.fast covers all properties, so a size change would animate the badge's dimensions */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* transition.fast covers all properties, so a size change would animate the badge's dimensions */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.circle, scaleIn$1, duration$3.normal, easing$3.easeOut, transition.fast, reducedMotion, function (_a) {
   var $size = _a.$size;
   var size = sizeConfig[$size];
-  return "\n      height: ".concat(size.height, ";\n      padding: ").concat(size.padding, ";\n      font: ").concat(size.font, ";\n      gap: ").concat(size.gap, ";\n    ");
+  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);
@@ -2019,7 +2054,7 @@ var StyledStatusBadge = styled__default.default.span.withConfig({
 var ScreenReaderOnly = styled__default.default.span.withConfig({
   displayName: "StatusBadge__ScreenReaderOnly",
   componentId: "sc-1paksgb-1"
-})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"
+})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
 /**
  * StatusBadge component for displaying transaction or task status
  *
@@ -2042,7 +2077,7 @@ var ScreenReaderOnly = styled__default.default.span.withConfig({
  *   liveRegion={true}
  * />
  * ```
- */])));
+ */])), visuallyHidden);
 /**
  * StatusBadge component for displaying transaction or task status
  *
@@ -2101,12 +2136,12 @@ var StatusBadge = function StatusBadge(_a) {
 StatusBadge.displayName = 'StatusBadge';
 var templateObject_1$u, templateObject_2$o, templateObject_3$m;
 
-var semantic$e = data.tokensJson.semantic;
-var color$4 = semantic$e.color,
-  spacing$4 = semantic$e.spacing,
-  border$6 = semantic$e.border,
-  typography$1 = semantic$e.typography,
-  size = semantic$e.size;
+var semantic$b = data.tokensJson.semantic;
+var color$4 = semantic$b.color,
+  spacing$4 = semantic$b.spacing,
+  border$6 = semantic$b.border,
+  size = semantic$b.size;
+var label = data.tokensJson.component.badge.label;
 var layout$3 = spacing$4.layout;
 var radius = border$6.radius;
 var StyledTag = styled__default.default.span.withConfig({
@@ -2115,13 +2150,13 @@ var StyledTag = styled__default.default.span.withConfig({
   },
   displayName: "Tag__StyledTag",
   componentId: "sc-lzfmti-0"
-})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
 /**
  * Tag component for categorizing and labeling content
  *
  * A static, non-interactive label used to categorize elements or objects in the UI.
  * Tags help users quickly identify and understand content classification.
- */])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, typography$1.button3, function (_a) {
+ */])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, label.typography.small, label.fontWeight, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
@@ -2159,17 +2194,17 @@ var StyledTag = styled__default.default.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'interactive':
-      return "1px solid ".concat(color$4.border.interactive);
+      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.interactive);
     case 'success':
-      return "1px solid ".concat(color$4.border.success);
+      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.success);
     case 'warning':
-      return "1px solid ".concat(color$4.border.warning);
+      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.warning);
     case 'error':
-      return "1px solid ".concat(color$4.border.error);
+      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.error);
     case 'emphasis':
-      return "1px solid ".concat(color$4.background.emphasis);
+      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.background.emphasis);
     default:
-      return "1px solid ".concat(color$4.border["default"]);
+      return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border["default"]);
   }
 });
 /**
@@ -2201,8 +2236,8 @@ var Tag = function Tag(_a) {
 var templateObject_1$t;
 
 // Destructure tokens for cleaner access
-var semantic$d = data.tokensJson.semantic;
-var spacing$3 = semantic$d.spacing;
+var semantic$a = data.tokensJson.semantic;
+var spacing$3 = semantic$a.spacing;
 var layout$2 = spacing$3.layout;
 var StyledBalanceSection = styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
@@ -2223,9 +2258,9 @@ var StyledStackWrapper = styled__default.default.div.withConfig({
 var StyledHeaderWrapper = styled__default.default.div.withConfig({
   displayName: "AccountCard__StyledHeaderWrapper",
   componentId: "sc-1erp7zn-4"
-})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  min-height: 48px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"], ["\n  min-height: 48px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"
+})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"
 // Map trend direction to icon and color
-])), layout$2.none, layout$2.xs);
+])), data.tokensJson.component.accountCard.header.minHeight, layout$2.none, layout$2.xs);
 // Map trend direction to icon and color
 var trendToIcon = {
   up: 'arrowUp',
@@ -2274,15 +2309,14 @@ var AccountCard = function AccountCard(_a) {
     }
   };
   return jsxRuntime.jsx(Box, {
-    minWidth: "300px",
+    minWidth: data.tokensJson.component.accountCard.minWidth,
     p: "lg",
     bg: "subtle",
     border: "default",
     borderRadius: "xl",
-    transition: "all 0.2s ease",
+    transition: "box-shadow ".concat(semantic$a.motion.duration.normal, " ").concat(semantic$a.motion.easing.easeOut),
     cursor: isClickable ? 'pointer' : 'default',
     hoverShadow: isClickable ? 'floating' : undefined,
-    hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     tabIndex: isClickable ? 0 : undefined,
@@ -2375,26 +2409,28 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
+var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$f;
 
-var semantic$c = data.tokensJson.semantic,
-  base$a = data.tokensJson.base;
+var semantic$9 = data.tokensJson.semantic;
+var _a$5 = semantic$9.motion,
+  duration$2 = _a$5.duration,
+  easing$2 = _a$5.easing;
 var StyledListItem = styled__default.default.li.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledListItem",
   componentId: "sc-1wzzt21-0"
-})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 44px; /* Touch target minimum */\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 44px; /* Touch target minimum */\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), function (_a) {
+})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), semantic$9.size.touchTarget, function (_a) {
   var $interactive = _a.$interactive;
   return $interactive && 'user-select: none;';
 }, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled && "\n    opacity: ".concat(base$a.opacity[50], ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
+  return $disabled && "\n    opacity: ".concat(semantic$9.opacity.disabled, ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
 }, function (_a) {
   var $destructive = _a.$destructive,
     $disabled = _a.$disabled;
-  return $destructive && !$disabled && "\n    color: ".concat(semantic$c.color.text.error, ";\n  ");
+  return $destructive && !$disabled && "\n    color: ".concat(semantic$9.color.text.error, ";\n  ");
 });
 var StyledItemContent = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2402,13 +2438,13 @@ var StyledItemContent = styled__default.default.div.withConfig({
   },
   displayName: "ListItem__StyledItemContent",
   componentId: "sc-1wzzt21-1"
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color 150ms ease;\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color 150ms ease;\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"])), semantic$c.spacing.layout.md, function (_a) {
+})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color ", " ", ";\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color ", " ", ";\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"])), semantic$9.spacing.layout.md, function (_a) {
   var $spacing = _a.$spacing;
-  return $spacing === 'compact' ? "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.md) : "".concat(semantic$c.spacing.layout.md, " ").concat(semantic$c.spacing.layout.lg);
-}, base$a.border.radius[2], function (_a) {
+  return $spacing === 'compact' ? "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.md) : "".concat(semantic$9.spacing.layout.md, " ").concat(semantic$9.spacing.layout.lg);
+}, semantic$9.border.radius.sm, function (_a) {
   var $selected = _a.$selected;
-  return $selected ? semantic$c.color.background['interactive-subtle'] : 'transparent';
-}, function (_a) {
+  return $selected ? semantic$9.color.background['interactive-subtle'] : 'transparent';
+}, duration$2.fast, easing$2.easeOut, function (_a) {
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled;
   if ($disabled) return 'not-allowed';
@@ -2419,45 +2455,48 @@ var StyledItemContent = styled__default.default.div.withConfig({
     $disabled = _a.$disabled,
     $selected = _a.$selected;
   return !$disabled && $interactive && "\n    &:hover {\n      background-color: ".concat($selected ? data.tokensJson.component.button.variants.secondary.backgroundColor : data.tokensJson.component.button.variants.secondary.backgroundColor, ";\n    }\n    \n    &:active {\n      background-color: ").concat(data.tokensJson.component.button.variants.naked.backgroundColor, ";\n    }\n  ");
-}, semantic$c.color.border.interactive);
+}, semantic$9.border.width.thick, semantic$9.color.border.interactive, semantic$9.border.focusOffset);
 var StyledIconContainer$1 = styled__default.default.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
   componentId: "sc-1wzzt21-2"
-})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n"])));
+})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic$9.size.icon.lg, semantic$9.size.icon.lg);
 var StyledTextContent = styled__default.default.div.withConfig({
   displayName: "ListItem__StyledTextContent",
   componentId: "sc-1wzzt21-3"
-})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$c.spacing.layout.xs);
+})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$9.spacing.layout.xs);
 var StyledRightContent = styled__default.default.div.withConfig({
   displayName: "ListItem__StyledRightContent",
   componentId: "sc-1wzzt21-4"
-})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$c.spacing.layout.sm);
+})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$9.spacing.layout.sm);
 var StyledChevronIcon = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledChevronIcon",
   componentId: "sc-1wzzt21-5"
-})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: ", ";\n  transition: transform 200ms ease;\n  transform: rotate(", ");\n  pointer-events: none;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: ", ";\n  transition: transform 200ms ease;\n  transform: rotate(", ");\n  pointer-events: none;\n"])), semantic$c.color.icon.subdued, function (_a) {
+})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"])), semantic$9.size.icon.lg, semantic$9.size.icon.lg, semantic$9.color.icon.subdued, duration$2.fast, easing$2.easeOut, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '180deg' : '0deg';
-});
+}, reducedMotion);
 var StyledExpandedContent = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledExpandedContent",
   componentId: "sc-1wzzt21-6"
-})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  overflow: hidden;\n  transition: max-height 200ms ease-out, opacity 200ms ease-out;\n  max-height: ", ";\n  opacity: ", ";\n  \n  ", "\n"], ["\n  overflow: hidden;\n  transition: max-height 200ms ease-out, opacity 200ms ease-out;\n  max-height: ", ";\n  opacity: ", ";\n  \n  ", "\n"])), function (_a) {
+})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"], ["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"])), duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '1000px' : '0';
 }, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '1' : '0';
 }, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? 'visible' : 'hidden';
+}, reducedMotion, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, function (_a) {
   var $expanded = _a.$expanded,
     $spacing = _a.$spacing;
-  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.md, " ").concat(semantic$c.spacing.layout.sm, " 48px") : "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.lg, " ").concat(semantic$c.spacing.layout.md, " 60px"), ";\n    background-color: ").concat(semantic$c.color.background['subtle'], ";\n    border-radius: ").concat(base$a.border.radius[2], ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$c.spacing.layout.md : semantic$c.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$c.spacing.layout.sm : semantic$c.spacing.layout.md, ";\n  ");
+  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.md, " ").concat(semantic$9.spacing.layout.sm, " ").concat(data.tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.lg, " ").concat(semantic$9.spacing.layout.md, " ").concat(data.tokensJson.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic$9.color.background['subtle'], ";\n    border-radius: ").concat(semantic$9.border.radius.sm, ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$9.spacing.layout.md : semantic$9.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md, ";\n  ");
 });
 var ListItem = function ListItem(_a) {
   var primary = _a.primary,
@@ -2570,28 +2609,80 @@ var ListItem = function ListItem(_a) {
   }));
 };
 ListItem.displayName = 'ListItem';
-var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
+var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
+
+// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils.
+var EXIT_DURATION_MS = parseInt(data.tokensJson.semantic.motion.duration.fast, 10);
+/**
+ * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
+ * animation can run before it unmounts (decision 0005).
+ */
+function usePresence(isOpen, exitMs) {
+  if (exitMs === void 0) {
+    exitMs = EXIT_DURATION_MS;
+  }
+  var _a = React.useState(isOpen),
+    isMounted = _a[0],
+    setIsMounted = _a[1];
+  React.useEffect(function () {
+    if (isOpen) {
+      setIsMounted(true);
+      return;
+    }
+    var timer = setTimeout(function () {
+      return setIsMounted(false);
+    }, exitMs);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [isOpen, exitMs]);
+  return {
+    isPresent: isOpen || isMounted,
+    isExiting: !isOpen && isMounted
+  };
+}
+/**
+ * Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
+ * the tab order and can't be activated. Set through the DOM because React 18 has no
+ * `inert` prop.
+ */
+function useInert(ref, isInert) {
+  React.useEffect(function () {
+    var node = ref.current;
+    if (!node) return;
+    if (isInert) node.setAttribute('inert', '');else node.removeAttribute('inert');
+  }, [ref, isInert]);
+}
 
 var _a$4 = data.tokensJson.semantic,
   color$3 = _a$4.color,
   border$5 = _a$4.border,
   layout$1 = _a$4.spacing.layout,
-  motion = _a$4.motion,
-  elevation$1 = _a$4.elevation;
+  motion$3 = _a$4.motion,
+  elevation$2 = _a$4.elevation;
 var slideUp = styled.keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
 var fadeIn$2 = styled.keyframes(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 var StyledOverlay$2 = styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
-})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"])), fadeIn$2);
+})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), color$3.background.overlay, data.tokensJson.semantic.zIndex.modal, fadeIn$2, motion$3.duration.normal, motion$3.easing.easeOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+});
 var StyledActionSheet = styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
-})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: 10000;\n  animation: ", " 0.3s ease-out;\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: 10000;\n  animation: ", " 0.3s ease-out;\n"])), color$3.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$1.overlay, slideUp);
+})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), color$3.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$2.overlay, data.tokensJson.semantic.zIndex.modal, slideUp, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}, reducedMotion, fadeIn$2, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+});
 var StyledHeader$2 = styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledHeader",
   componentId: "sc-regbol-2"
-})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
+})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
 var StyledHeaderContent = styled__default.default.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
@@ -2599,11 +2690,11 @@ var StyledHeaderContent = styled__default.default.div.withConfig({
 var StyledCloseButton = styled__default.default.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), layout$1.sm, color$3.icon.subdued, border$5.radius.sm, motion.hover, layout$1.sm, color$3.icon["default"], color$3.background.surface, border$5.focus, layout$1.xs);
+})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), layout$1.sm, color$3.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$3.icon["default"], color$3.background.surface, border$5.focus, layout$1.xs);
 var StyledActionsList = styled__default.default.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
-})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"
+})(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"
 /**
  * ActionSheet component for bottom sheet modals
  *
@@ -2685,6 +2776,10 @@ var ActionSheet = function ActionSheet(_a) {
     dataTestId = _a["data-testid"];
   var sheetRef = React.useRef(null);
   var previousActiveElement = React.useRef(null);
+  var _e = usePresence(isOpen),
+    isPresent = _e.isPresent,
+    isExiting = _e.isExiting;
+  useInert(sheetRef, isExiting);
   // Store the element that had focus when sheet opened
   React.useEffect(function () {
     if (isOpen) {
@@ -2715,7 +2810,7 @@ var ActionSheet = function ActionSheet(_a) {
     };
     document.addEventListener('keydown', handleKeyDown);
     // Focus first focusable element (button or element with role="button")
-    requestAnimationFrame(function () {
+    var frame = requestAnimationFrame(function () {
       var _a;
       var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
       firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
@@ -2724,6 +2819,8 @@ var ActionSheet = function ActionSheet(_a) {
     var originalOverflow = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
     return function () {
+      // A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
+      cancelAnimationFrame(frame);
       document.removeEventListener('keydown', handleKeyDown);
       document.body.style.overflow = originalOverflow;
       // Return focus to previous element
@@ -2733,7 +2830,8 @@ var ActionSheet = function ActionSheet(_a) {
     };
   }, [isOpen, onClose, closeOnEscape]);
   var handleOverlayClick = function handleOverlayClick(e) {
-    if (closeOnOverlayClick && e.target === e.currentTarget) {
+    // While exiting, the backdrop still catches clicks but doesn't close again
+    if (!isExiting && closeOnOverlayClick && e.target === e.currentTarget) {
       onClose();
     }
   };
@@ -2743,7 +2841,8 @@ var ActionSheet = function ActionSheet(_a) {
       onClose();
     }
   };
-  if (!isOpen) return null;
+  // Stays mounted while the exit fade runs, hidden from assistive technology
+  if (!isPresent) return null;
   // Find if there are any destructive actions to add divider
   var destructiveIndex = actions.findIndex(function (a) {
     return a.destructive;
@@ -2751,11 +2850,14 @@ var ActionSheet = function ActionSheet(_a) {
   var hasDestructive = destructiveIndex >= 0;
   return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(StyledOverlay$2, {
-      onClick: handleOverlayClick
+      onClick: handleOverlayClick,
+      "$isExiting": isExiting
     }), jsxRuntime.jsxs(StyledActionSheet, {
       ref: sheetRef,
       role: "dialog",
       "aria-modal": "true",
+      "aria-hidden": isExiting || undefined,
+      "$isExiting": isExiting,
       "aria-labelledby": title ? 'action-sheet-title' : undefined,
       "aria-describedby": description ? 'action-sheet-description' : undefined,
       "data-testid": dataTestId,
@@ -2815,7 +2917,7 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$6;
+var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
 
 function detectSpeechRecognitionConstructor(targetWindow) {
   if (!targetWindow) return null;
@@ -2915,8 +3017,7 @@ function agentInputStateTransition(currentState, event) {
   }
 }
 
-var semantic$b = data.tokensJson.semantic,
-  base$9 = data.tokensJson.base,
+var semantic$8 = data.tokensJson.semantic,
   component$1 = data.tokensJson.component;
 var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
 var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
@@ -2925,7 +3026,7 @@ var rotateRing = styled.keyframes(templateObject_1$p || (templateObject_1$p = __
 var Container = styled__default.default.div.withConfig({
   displayName: "AgentInput__Container",
   componentId: "sc-fhl996-0"
-})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$9.spacing[2]);
+})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), semantic$8.spacing.layout.sm);
 var ControlsRow = styled__default.default.div.withConfig({
   displayName: "AgentInput__ControlsRow",
   componentId: "sc-fhl996-1"
@@ -2933,73 +3034,79 @@ var ControlsRow = styled__default.default.div.withConfig({
 var InputShell = styled__default.default.div.withConfig({
   displayName: "AgentInput__InputShell",
   componentId: "sc-fhl996-2"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\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 200ms ease-in-out, outline 200ms ease-in-out;\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"])), base$9.spacing[2], semantic$b.spacing.layout.xs, semantic$b.spacing.layout.sm, semantic$b.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$b.border.radius['3xl'], semantic$b.elevation.raised, component$1.input.focus.borderColor, component$1.input.focus.outline, component$1.input.focus.outlineOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
+})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), semantic$8.spacing.layout.sm, semantic$8.spacing.layout.xs, semantic$8.spacing.layout.sm, semantic$8.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$8.border.radius['3xl'], semantic$8.elevation.raised, semantic$8.motion.duration.normal, semantic$8.motion.easing.easeInOut, semantic$8.motion.duration.normal, semantic$8.motion.easing.easeInOut, component$1.input.focus.borderColor, component$1.input.focus.outline, component$1.input.focus.outlineOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
 var Input = styled__default.default.input.withConfig({
   displayName: "AgentInput__Input",
   componentId: "sc-fhl996-3"
-})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), base$9.spacing[12], semantic$b.typography.body, semantic$b.color.text["default"], semantic$b.color.text.subdued, semantic$b.color.text.disabled);
+})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$8.spacing.layout['7xl'], semantic$8.typography.body, semantic$8.color.text["default"], semantic$8.color.text.subdued, semantic$8.color.text.disabled);
 var InputActions = styled__default.default.div.withConfig({
   displayName: "AgentInput__InputActions",
   componentId: "sc-fhl996-4"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$b.spacing.layout.sm);
+})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$8.spacing.layout.sm);
 var CircularActionIconButton = styled__default.default(IconButton).withConfig({
   displayName: "AgentInput__CircularActionIconButton",
   componentId: "sc-fhl996-5"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$b.border.radius.circle);
+})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$8.border.radius.circle);
 var InputWrapper = styled__default.default.div.withConfig({
   displayName: "AgentInput__InputWrapper",
   componentId: "sc-fhl996-6"
-})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
+})(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({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicButtonWrapper",
   componentId: "sc-fhl996-7"
-})(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"])), semantic$b.border.radius.circle);
+})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"
+// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
+// eslint-disable-next-line no-restricted-syntax
+])), semantic$8.border.radius.circle);
+// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
+// eslint-disable-next-line no-restricted-syntax
+var ringMask = styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"], ["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"])));
 var MicListeningRing = styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicListeningRing",
   componentId: "sc-fhl996-8"
-})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), base$9.border.width[2], base$9.spacing[1], component$1.iconButton.focus.outlineOffset, semantic$b.border.radius.circle, semantic$b.color.background['interactive-subtle'], semantic$b.color.background.interactive, semantic$b.color.background['interactive-hover'], semantic$b.color.background.interactive, semantic$b.color.background['interactive-subtle'], function (_a) {
+})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), semantic$8.border.width.thick, semantic$8.spacing.layout.xs, component$1.iconButton.focus.outlineOffset, semantic$8.border.radius.circle, semantic$8.color.background['interactive-subtle'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-hover'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-subtle'], ringMask, ringMask, function (_a) {
   var $reducedMotion = _a.$reducedMotion;
-  return !$reducedMotion && styled.css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+  return !$reducedMotion && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
 });
 var StatusRow = styled__default.default.div.withConfig({
   displayName: "AgentInput__StatusRow",
   componentId: "sc-fhl996-9"
-})(templateObject_12$2 || (templateObject_12$2 = __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"])), base$9.spacing[3], base$9.spacing[6]);
+})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$8.spacing.layout.md, semantic$8.spacing.layout['2xl']);
 var StatusText = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__StatusText",
   componentId: "sc-fhl996-10"
-})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$b.spacing.layout.xl);
+})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$8.spacing.layout.xl);
 var StatusAnnouncement = styled__default.default.div.withConfig({
   displayName: "AgentInput__StatusAnnouncement",
   componentId: "sc-fhl996-11"
-})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject([""], [""])));
+})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject([""], [""])));
 var MeterContainer = styled__default.default.div.withConfig({
   displayName: "AgentInput__MeterContainer",
   componentId: "sc-fhl996-12"
-})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), base$9.spacing[1], base$9.spacing[4]);
+})(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$8.spacing.layout.xs, semantic$8.spacing.layout.lg);
 var MeterBar = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MeterBar",
   componentId: "sc-fhl996-13"
-})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height 120ms linear;\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height 120ms linear;\n"])), base$9.spacing[1], base$9.border.radius[1], semantic$b.color.background.interactive, function (_a) {
+})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$8.spacing.layout.xs, semantic$8.border.radius.xs, semantic$8.color.background.interactive, function (_a) {
   var $height = _a.$height;
   return "".concat($height * 100, "%");
-});
+}, semantic$8.motion.duration.fast, semantic$8.motion.easing.easeOut);
 var VisuallyHiddenLabel = styled__default.default.label.withConfig({
   displayName: "AgentInput__VisuallyHiddenLabel",
   componentId: "sc-fhl996-14"
-})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"])));
+})(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 function getInitialState(hasText) {
   return hasText ? 'typing' : 'idle';
 }
@@ -3628,10 +3735,31 @@ var AgentInput = function AgentInput(_a) {
     })]
   });
 };
-var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
+var templateObject_1$p, templateObject_2$k, templateObject_3$i, 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$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
 
-var semantic$a = data.tokensJson.semantic,
-  base$8 = data.tokensJson.base;
+var semantic$7 = data.tokensJson.semantic;
+var alert = data.tokensJson.component.alert;
+var _a$3 = semantic$7.motion,
+  duration$1 = _a$3.duration,
+  easing$1 = _a$3.easing;
+// Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
+// Each half takes duration.fast, so the whole exit stays within the 300ms maximum (P6).
+var FADE_MS = parseInt(duration$1.fast, 10);
+var EXIT_MS = FADE_MS * 2;
+// The --alert-exit-* properties are the alert's height and vertical padding, measured
+// when it's dismissed, so nothing moves until the fade has finished
+var fadeThenCollapse = styled.keyframes(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"], ["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"])), semantic$7.border.width.thin);
+var fadeOut = styled.keyframes(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"], ["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"
+// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
+// (chosen when dismissed). A timer of the same length removes it if no animation event
+// arrives, for example where animations are disabled or the tab is hidden.
+// The generated names of the two exits (full, and reduced motion)
+])));
+// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
+// (chosen when dismissed). A timer of the same length removes it if no animation event
+// arrives, for example where animations are disabled or the tab is hidden.
+// The generated names of the two exits (full, and reduced motion)
+var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
 // Default icons by variant
 var variantIcons = {
   error: 'crossCircle',
@@ -3659,56 +3787,60 @@ var StyledAlert = styled__default.default.div.withConfig({
   },
   displayName: "Alert__StyledAlert",
   componentId: "sc-18tq5d-0"
-})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"])), function (_a) {
+})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), function (_a) {
   var $inline = _a.$inline;
   return $inline ? 'center' : 'flex-start';
 }, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
+  return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
 }, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
-}, base$8.border.radius[2], function (_a) {
+  return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
+}, semantic$7.border.radius.sm, semantic$7.border.width.thin, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'error':
-      return "\n          background-color: ".concat(semantic$a.color.background['error-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.error, ";\n          color: ").concat(semantic$a.color.text.error, ";\n        ");
+      return "\n          background-color: ".concat(semantic$7.color.background['error-subtle'], ";\n          border-color: ").concat(semantic$7.color.border.error, ";\n          color: ").concat(semantic$7.color.text.error, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(semantic$a.color.background['warning-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.warning, ";\n          color: ").concat(semantic$a.color.text.warning, ";\n        ");
+      return "\n          background-color: ".concat(semantic$7.color.background['warning-subtle'], ";\n          border-color: ").concat(semantic$7.color.border.warning, ";\n          color: ").concat(semantic$7.color.text.warning, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(semantic$a.color.background['success-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.success, ";\n          color: ").concat(semantic$a.color.text.success, ";\n        ");
+      return "\n          background-color: ".concat(semantic$7.color.background['success-subtle'], ";\n          border-color: ").concat(semantic$7.color.border.success, ";\n          color: ").concat(semantic$7.color.text.success, ";\n        ");
     case 'info':
     default:
-      return "\n          background-color: ".concat(semantic$a.color.background['interactive-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.interactive, ";\n          color: ").concat(semantic$a.color.text.interactive, ";\n        ");
+      return "\n          background-color: ".concat(semantic$7.color.background['interactive-subtle'], ";\n          border-color: ").concat(semantic$7.color.border.interactive, ";\n          color: ").concat(semantic$7.color.text.interactive, ";\n        ");
   }
-}, base$8.breakpoint.md, function (_a) {
+}, semantic$7.breakpoint.md, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.lg;
+  return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
+}, function (_a) {
+  var $isExiting = _a.$isExiting,
+    $reducedExit = _a.$reducedExit;
+  return $isExiting && styled.css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? styled.css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : styled.css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
 });
 var StyledIconContainer = styled__default.default.div.withConfig({
   displayName: "Alert__StyledIconContainer",
   componentId: "sc-18tq5d-1"
-})(templateObject_2$j || (templateObject_2$j = __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"])));
+})(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({
   displayName: "Alert__StyledContent",
   componentId: "sc-18tq5d-2"
-})(templateObject_3$h || (templateObject_3$h = __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$a.spacing.layout.xs);
+})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$7.spacing.layout.xs);
 var StyledTitle = styled__default.default.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
-})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"], ["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"])), semantic$a.typography.h6);
+})(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"], ["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"])), alert.title.typography, alert.title.fontWeight, alert.title.lineHeight);
 var StyledMessage = styled__default.default.span.withConfig({
   displayName: "Alert__StyledMessage",
   componentId: "sc-18tq5d-4"
-})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  font: ", ";\n\tline-height: 1.25;\n"], ["\n  font: ", ";\n\tline-height: 1.25;\n"])), semantic$a.typography.body);
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  font: ", ";\n  line-height: ", ";\n"], ["\n  font: ", ";\n  line-height: ", ";\n"])), alert.message.typography, alert.message.lineHeight);
 var StyledActions = styled__default.default.div.withConfig({
   displayName: "Alert__StyledActions",
   componentId: "sc-18tq5d-5"
-})(templateObject_6$8 || (templateObject_6$8 = __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$a.spacing.layout.sm);
+})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$7.spacing.layout.sm);
 var StyledDismissButton = styled__default.default(IconButton).withConfig({
   displayName: "Alert__StyledDismissButton",
   componentId: "sc-18tq5d-6"
-})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$a.spacing.layout.xs);
+})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: ", ";\n\ttop: ", ";\n"], ["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: ", ";\n\ttop: ", ";\n"])), semantic$7.spacing.layout.xs, semantic$7.spacing.layout.sm, semantic$7.spacing.layout.sm);
 var Alert = function Alert(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'info' : _b,
@@ -3724,16 +3856,70 @@ var Alert = function Alert(_a) {
     ariaLive = _e === void 0 ? 'polite' : _e,
     dataTestId = _a["data-testid"],
     props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
-  var _f = React__default.default.useState(true),
-    isVisible = _f[0],
-    setIsVisible = _f[1];
+  var _f = React__default.default.useState('visible'),
+    phase = _f[0],
+    setPhase = _f[1];
+  var _g = React__default.default.useState(false),
+    reducedExit = _g[0],
+    setReducedExit = _g[1];
+  var _h = React__default.default.useState(),
+    exitStyle = _h[0],
+    setExitStyle = _h[1];
+  var alertRef = React__default.default.useRef(null);
+  // While it exits, its controls leave the tab order and can't be activated
+  useInert(alertRef, phase === 'exiting');
+  var onDismissRef = React__default.default.useRef(onDismiss);
+  React__default.default.useEffect(function () {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
   var handleDismiss = function handleDismiss() {
-    setIsVisible(false);
-    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    var node = alertRef.current;
+    if (node) {
+      var style = window.getComputedStyle(node);
+      var paddingTop = style.paddingTop,
+        paddingBottom = style.paddingBottom;
+      // max-height applies to the content box unless the alert is border-box (it depends on
+      // the consumer's reset), so measure whichever box it uses; nothing moves at the click
+      var height = Math.max(0, style.boxSizing === 'border-box' ? node.offsetHeight : node.offsetHeight - parseFloat(paddingTop) - parseFloat(paddingBottom) - parseFloat(style.borderTopWidth) - parseFloat(style.borderBottomWidth));
+      setExitStyle({
+        '--alert-exit-height': "".concat(height, "px"),
+        '--alert-exit-padding-top': paddingTop,
+        '--alert-exit-padding-bottom': paddingBottom
+      });
+    }
+    setReducedExit(typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    setPhase('exiting');
   };
-  if (!isVisible) {
+  React__default.default.useEffect(function () {
+    if (phase !== 'exiting') return;
+    var timer = setTimeout(function () {
+      return setPhase('dismissed');
+    }, reducedExit ? FADE_MS : EXIT_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [phase, reducedExit]);
+  // onDismiss fires once the alert has been removed from the DOM, so a consumer that
+  // unmounts it in onDismiss still gets the animation, and can't observe it
+  React__default.default.useEffect(function () {
+    var _a;
+    if (phase === 'dismissed') (_a = onDismissRef.current) === null || _a === void 0 ? void 0 : _a.call(onDismissRef);
+  }, [phase]);
+  if (phase === 'dismissed') {
     return null;
   }
+  var isExiting = phase === 'exiting';
+  // Consumers can pass extra HTML attributes, including style, aria-hidden and onAnimationEnd
+  var forwarded = props;
+  var handleAnimationEnd = function handleAnimationEnd(event) {
+    var _a;
+    (_a = forwarded.onAnimationEnd) === null || _a === void 0 ? void 0 : _a.call(forwarded, event);
+    // Only the exit itself ends the dismissal: not animations bubbling up from children,
+    // on pseudo-elements, or other animations a consumer puts on the alert
+    if (isExiting && event.target === event.currentTarget && !event.pseudoElement && EXIT_ANIMATION_NAMES.includes(event.animationName)) {
+      setPhase('dismissed');
+    }
+  };
   // Get the icon for the current variant
   var iconName = variantIcons[variant];
   var alertIconColor = variantIconColors[variant];
@@ -3745,8 +3931,14 @@ var Alert = function Alert(_a) {
     "aria-live": ariaLive,
     "$variant": variant,
     "$inline": inline,
+    "$isExiting": isExiting,
+    "$reducedExit": reducedExit,
     "data-testid": dataTestId
   }, props, {
+    ref: alertRef,
+    "aria-hidden": isExiting ? true : forwarded['aria-hidden'],
+    style: isExiting ? __assign(__assign({}, forwarded.style), exitStyle) : forwarded.style,
+    onAnimationEnd: handleAnimationEnd,
     children: [jsxRuntime.jsx(StyledIconContainer, {
       "aria-hidden": "true",
       children: jsxRuntime.jsx(Icon, {
@@ -3776,17 +3968,16 @@ var Alert = function Alert(_a) {
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6;
+var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2;
 
-var _a$3, _b$1, _c, _d, _e, _f;
 var BreadcrumbNavStyled = styled__default.default.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = data.tokensJson.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), data.tokensJson.semantic.border["default"]);
 var BreadcrumbStyled = styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
-})(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: 180px;\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: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = data.tokensJson.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = data.tokensJson.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', data.tokensJson.semantic.color.text.subdued, data.tokensJson.semantic.color.text["default"]);
+})(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"])), data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.color.text.subdued, data.tokensJson.component.breadcrumbs.item.maxWidth, data.tokensJson.semantic.color.text["default"]);
 var BreadcrumbSeparator = styled__default.default.span.withConfig({
   displayName: "Breadcrumbs__BreadcrumbSeparator",
   componentId: "sc-7ouzg5-2"
@@ -3843,14 +4034,15 @@ var templateObject_1$n, templateObject_2$i, templateObject_3$g;
 var CardSmallStyled = styled__default.default.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
   componentId: "sc-jpcqvd-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), data.tokensJson.base.border.radius[2], data.tokensJson.semantic.color.border.strong);
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: opacity ", " ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 ", " ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: opacity ", " ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 ", " ", ";\n  }\n"])), data.tokensJson.semantic.border.radius.sm, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut, data.tokensJson.semantic.border.width.thick, data.tokensJson.semantic.color.border.strong);
 var CardSmall = function CardSmall(_a) {
   var title = _a.title,
     picture = _a.picture,
     subtitle = _a.subtitle,
     meta = _a.meta,
     href = _a.href,
-    LinkComponent = _a.linkComponent;
+    LinkComponent = _a.linkComponent,
+    dataTestId = _a["data-testid"];
   if (!picture || !meta) {
     return null;
   }
@@ -3884,6 +4076,7 @@ var CardSmall = function CardSmall(_a) {
     })]
   });
   return jsxRuntime.jsx(CardSmallStyled, {
+    "data-testid": dataTestId,
     children: LinkComponent && href ? jsxRuntime.jsx(LinkComponent, {
       href: href,
       "aria-label": title,
@@ -3897,11 +4090,11 @@ var CardSmall = function CardSmall(_a) {
 };
 var templateObject_1$m;
 
-var border$4 = data.tokensJson.base.border;
+var border$4 = data.tokensJson.semantic.border;
 var CardLargeStyled = styled__default.default.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
   componentId: "sc-1rfgdzl-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$4.radius[6]);
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: opacity ", " ", ";\n    width: 100%;\n  }\n"], ["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: opacity ", " ", ";\n    width: 100%;\n  }\n"])), data.tokensJson.component.cardLarge.maxWidth, border$4.radius['2xl'], data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut);
 var CardLarge = function CardLarge(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -3910,8 +4103,10 @@ var CardLarge = function CardLarge(_a) {
     labels = _b === void 0 ? [] : _b,
     picture = _a.picture,
     onImageClick = _a.onImageClick,
-    imageHref = _a.imageHref;
+    imageHref = _a.imageHref,
+    dataTestId = _a["data-testid"];
   return jsxRuntime.jsx(CardLargeStyled, {
+    "data-testid": dataTestId,
     children: jsxRuntime.jsxs(Stack, {
       direction: "column",
       gap: "md",
@@ -3983,11 +4178,11 @@ var StyledCheckbox = styled__default.default.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckbox",
   componentId: "sc-1ddpctx-1"
-})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"
+})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all ", " ", ";\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all ", " ", ";\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
- */])), data.tokensJson.component.input["default"].borderRadius, data.tokensJson.component.input["default"].borderWidth, function (props) {
+ */])), data.tokensJson.component.checkbox.box.size, data.tokensJson.component.checkbox.box.size, data.tokensJson.component.checkbox.box.size, data.tokensJson.component.checkbox.box.size, data.tokensJson.component.input["default"].borderRadius, data.tokensJson.component.input["default"].borderWidth, function (props) {
   return props.$checked || props.$indeterminate ? data.tokensJson.semantic.color.background.inverse : data.tokensJson.component.input["default"].backgroundColor;
 }, function (props) {
   if (props.$state === 'error') return data.tokensJson.component.input.error.borderColor;
@@ -3995,7 +4190,7 @@ var StyledCheckbox = styled__default.default.span.withConfig({
   return data.tokensJson.component.input["default"].borderColor;
 }, function (props) {
   return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
-}, HiddenCheckboxInput, function (props) {
+}, data.tokensJson.semantic.motion.duration.fast, data.tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
   return props.$state === 'error' ? data.tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? data.tokensJson.semantic.border.strong : data.tokensJson.component.input.hover.borderColor;
 }, HiddenCheckboxInput, data.tokensJson.component.input.focus.outline, data.tokensJson.component.input.focus.outlineOffset, function (props) {
   return props.$state === 'error' ? data.tokensJson.component.input.error.focus.borderColor : data.tokensJson.component.input.focus.borderColor;
@@ -4016,12 +4211,12 @@ var StyledCheckboxContainer = styled__default.default.label.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckboxContainer",
   componentId: "sc-1ddpctx-2"
-})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"
+})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: ", ";\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: ", ";\n  flex-direction: ", ";\n  user-select: none;\n"
 /**
  * Label text with proper typography
- */])), data.tokensJson.base.spacing[3], function (props) {
+ */])), data.tokensJson.semantic.spacing.layout.md, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, function (props) {
+}, data.tokensJson.component.checkbox.row.minHeight, function (props) {
   return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
 });
 /**
@@ -4041,7 +4236,7 @@ var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4
 var StyledFieldContainer$3 = 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"])), data.tokensJson.base.spacing[1]);
+})(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"])), data.tokensJson.semantic.spacing.layout.xs);
 var StyledHelperText$4 = styled__default.default.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
@@ -4067,9 +4262,9 @@ var StyledHelperText$4 = styled__default.default.span.withConfig({
  *   required
  * />
  * ```
- */])), data.tokensJson.semantic.typography.small, function (props) {
-  return props.$error ? data.tokensJson.semantic.color.text.error : data.tokensJson.semantic.color.text.subdued;
-}, data.tokensJson.base.spacing[9]);
+ */])), data.tokensJson.component.field.helperText.typography, function (props) {
+  return props.$error ? data.tokensJson.component.field.helperText.colorError : data.tokensJson.component.field.helperText.color;
+}, data.tokensJson.semantic.spacing.layout['5xl']);
 /**
  * Checkbox component for binary selection with WCAG 2.2 AA compliance
  *
@@ -4194,16 +4389,16 @@ var templateObject_1$i;
 var _a$2 = data.tokensJson.semantic,
   color$2 = _a$2.color,
   border$3 = _a$2.border,
-  spacing$2 = _a$2.spacing;
-  _a$2.motion;
+  spacing$2 = _a$2.spacing,
+  motion$2 = _a$2.motion;
 var StyledCodeBlock = 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 300ms ease-in-out;\n  \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 300ms ease-in-out;\n  \n  ", "\n"])), color$2.background.subtle, border$3.subtle, data.tokensJson.base.border.radius[2], spacing$2.layout.md, data.tokensJson.base.fontFamily.monospace, data.tokensJson.base.fontSize[1], data.tokensJson.base.lineHeight[3], color$2.text["default"], function (_a) {
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n"], ["\n  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"])), color$2.background.subtle, border$3.subtle, data.tokensJson.semantic.border.radius.sm, spacing$2.layout.md, data.tokensJson.component.codeBlock.fontFamily, data.tokensJson.component.codeBlock.fontSize, data.tokensJson.component.codeBlock.lineHeight, color$2.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
-}, spacing$2.layout.sm, function (_a) {
+}, spacing$2.layout.sm, motion$2.duration.slow, motion$2.easing.easeInOut, reducedMotion, function (_a) {
   var $maxHeight = _a.$maxHeight,
     $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
@@ -4223,7 +4418,7 @@ var CopyButtonWrapper = styled__default.default.div.withConfig({
 var ExpandButtonWrapper = 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: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, data.tokensJson.base.border.radius[2], function (_a) {
+})(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"])), spacing$2.layout.sm, data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.border.width.thin, spacing$2.layout.sm, data.tokensJson.semantic.border.radius.sm, motion$2.duration.slow, motion$2.easing.easeInOut, motion$2.duration.slow, motion$2.easing.easeInOut, function (_a) {
   var $hasGradient = _a.$hasGradient;
   return $hasGradient ? "\n    margin-top: -".concat(spacing$2.layout['4xl'], ";\n    padding-top: ").concat(spacing$2.layout['4xl'], ";\n    background: linear-gradient(\n      to bottom,\n      transparent 0%,\n      ").concat(color$2.background.subtle, " 60%\n    );\n  ") : "\n    background: transparent;\n  ";
 });
@@ -4285,6 +4480,37 @@ var CopyButton = function CopyButton(_a) {
     })
   });
 };
+var LiveRegion = styled__default.default.span.withConfig({
+  displayName: "CodeBlock__LiveRegion",
+  componentId: "sc-1p1t0kp-4"
+})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+/**
+ * CodeBlock component for displaying formatted code with optional copy functionality
+ * and expandable content for long code blocks.
+ *
+ * @param children - The code content to display
+ * @param showCopyButton - Whether to show the copy button (default: true)
+ * @param onCopy - Optional callback when code is copied
+ * @param maxHeight - Maximum height in pixels before enabling expand/collapse
+ * @param defaultExpanded - Initial expanded state when maxHeight is set
+ * @param data-testid - Test identifier for the code block
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeBlock>const x = 1;</CodeBlock>
+ *
+ * // With max height and expand/collapse
+ * <CodeBlock maxHeight={200}>
+ *   {longCodeString}
+ * </CodeBlock>
+ *
+ * // Start expanded
+ * <CodeBlock maxHeight={200} defaultExpanded>
+ *   {longCodeString}
+ * </CodeBlock>
+ * ```
+ */])), visuallyHidden);
 /**
  * CodeBlock component for displaying formatted code with optional copy functionality
  * and expandable content for long code blocks.
@@ -4327,6 +4553,9 @@ var CodeBlock = function CodeBlock(_a) {
   var _e = React.useState(false),
     needsExpansion = _e[0],
     setNeedsExpansion = _e[1];
+  var _f = React.useState(''),
+    announcement = _f[0],
+    setAnnouncement = _f[1];
   var contentRef = React.useRef(null);
   // Check if content exceeds maxHeight
   React.useEffect(function () {
@@ -4340,17 +4569,7 @@ var CodeBlock = function CodeBlock(_a) {
       return !prev;
     });
     // Announce state change to screen readers
-    var announcement = isExpanded ? 'Code block collapsed' : 'Code block expanded';
-    var announcer = document.createElement('div');
-    announcer.setAttribute('aria-live', 'polite');
-    announcer.setAttribute('aria-atomic', 'true');
-    announcer.setAttribute('class', 'sr-only');
-    announcer.style.cssText = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;';
-    announcer.textContent = announcement;
-    document.body.appendChild(announcer);
-    setTimeout(function () {
-      document.body.removeChild(announcer);
-    }, 1000);
+    setAnnouncement(isExpanded ? 'Code block collapsed' : 'Code block expanded');
   };
   var showExpandButton = maxHeight && needsExpansion;
   return jsxRuntime.jsxs(CodeBlockWrapper, {
@@ -4375,20 +4594,24 @@ var CodeBlock = function CodeBlock(_a) {
         "data-testid": "expand-button",
         children: isExpanded ? 'Show less' : 'Show more'
       })
+    }), showExpandButton && jsxRuntime.jsx(LiveRegion, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: announcement
     }), showCopyButton && jsxRuntime.jsx(CopyButton, {
       text: children,
       onCopy: onCopy
     })]
   });
 };
-var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c;
+var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c, templateObject_5$a;
 
 var StyledHeader$1 = styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledHeader",
   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: 1px solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"])), data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.color.background["default"], data.tokensJson.semantic.color.border["default"], function (_a) {
+})(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"])), data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.color.background["default"], data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border["default"], function (_a) {
   var $sticky = _a.$sticky;
-  return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    box-shadow: ".concat(data.tokensJson.base.shadow[2], ";\n  ");
+  return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: ".concat(data.tokensJson.semantic.zIndex.sticky, ";\n    box-shadow: ").concat(data.tokensJson.semantic.elevation.sticky, ";\n  ");
 });
 var StyledLeftSection = styled__default.default.div.withConfig({
   displayName: "DateGroup__StyledLeftSection",
@@ -4475,16 +4698,16 @@ var DateGroup = function DateGroup(_a) {
 };
 var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
 
-var semantic$9 = data.tokensJson.semantic;
+var semantic$6 = data.tokensJson.semantic;
 var StyledContainer$1 = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "EmptyState__StyledContainer",
   componentId: "sc-1u5hxh-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"])), function (_a) {
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"])), data.tokensJson.component.emptyState.maxWidth, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? semantic$9.spacing.layout['4xl'] : $size === 'large' ? semantic$9.spacing.layout['8xl'] : semantic$9.spacing.layout['6xl'];
+  return $size === 'small' ? semantic$6.spacing.layout['4xl'] : $size === 'large' ? semantic$6.spacing.layout['8xl'] : semantic$6.spacing.layout['6xl'];
 });
 var StyledIllustration = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -4494,20 +4717,20 @@ var StyledIllustration = styled__default.default.div.withConfig({
   componentId: "sc-1u5hxh-1"
 })(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
+  return $size === 'small' ? data.tokensJson.component.emptyState.illustration.small : $size === 'large' ? data.tokensJson.component.emptyState.illustration.large : data.tokensJson.component.emptyState.illustration.medium;
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
-}, semantic$9.spacing.layout['2xl'], function (_a) {
+  return $size === 'small' ? data.tokensJson.component.emptyState.illustration.small : $size === 'large' ? data.tokensJson.component.emptyState.illustration.large : data.tokensJson.component.emptyState.illustration.medium;
+}, semantic$6.spacing.layout['2xl'], function (_a) {
   var $variant = _a.$variant;
-  return $variant === 'error' ? semantic$9.color.icon.error : $variant === 'success' ? semantic$9.color.icon.success : semantic$9.color.icon.subdued;
+  return $variant === 'error' ? semantic$6.color.icon.error : $variant === 'success' ? semantic$6.color.icon.success : semantic$6.color.icon.subdued;
 });
 var StyledTextContainer = styled__default.default.div.withConfig({
   displayName: "EmptyState__StyledTextContainer",
   componentId: "sc-1u5hxh-2"
-})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  max-width: 360px;\n  margin-bottom: ", ";\n"], ["\n  max-width: 360px;\n  margin-bottom: ", ";\n"
+})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  max-width: ", ";\n  margin-bottom: ", ";\n"], ["\n  max-width: ", ";\n  margin-bottom: ", ";\n"
 // Map illustration type to icon name
-])), semantic$9.spacing.layout['2xl']);
+])), data.tokensJson.component.emptyState.text.maxWidth, semantic$6.spacing.layout['2xl']);
 // Map illustration type to icon name
 var illustrationToIcon = {
   search: 'search',
@@ -4562,7 +4785,7 @@ var EmptyState = function EmptyState(_a) {
         children: title
       }), jsxRuntime.jsx("div", {
         style: {
-          marginTop: semantic$9.spacing.layout.md
+          marginTop: semantic$6.spacing.layout.md
         },
         children: jsxRuntime.jsx(Typography, {
           variant: "body",
@@ -4572,7 +4795,7 @@ var EmptyState = function EmptyState(_a) {
       })]
     }), (action || secondaryAction) && jsxRuntime.jsx(Box, {
       width: "100%",
-      maxWidth: "300px",
+      maxWidth: data.tokensJson.component.emptyState.actions.maxWidth,
       children: jsxRuntime.jsxs(Stack, {
         direction: "column",
         gap: "sm",
@@ -4594,25 +4817,25 @@ var EmptyState = function EmptyState(_a) {
 };
 var templateObject_1$f, templateObject_2$d, templateObject_3$c;
 
-var _a$1 = data.tokensJson.base,
-  spacing$1 = _a$1.spacing,
+var _a$1 = data.tokensJson.semantic,
+  spacing$1 = _a$1.spacing.layout,
   border$2 = _a$1.border;
 var FeatureBlockStyled = 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  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\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  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), data.tokensJson.base.breakpoint.md, data.tokensJson.base.breakpoint.lg, spacing$1[12], border$2.radius[6]);
+})(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  img {\n    border-radius: ", ";\n    transition: opacity ", " ", ";\n\n    &:hover {\n      opacity: 0.8;\n    }\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  img {\n    border-radius: ", ";\n    transition: opacity ", " ", ";\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), data.tokensJson.semantic.breakpoint.md, data.tokensJson.semantic.breakpoint.lg, spacing$1['7xl'], border$2.radius['2xl'], data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut);
 var ImageWrapper = 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"])), data.tokensJson.base.breakpoint.lg);
+})(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"])), data.tokensJson.semantic.breakpoint.lg);
 var ContentSection = styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ContentSection",
   componentId: "sc-1mi4lso-2"
-})(templateObject_3$b || (templateObject_3$b = __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"])), spacing$1[6], data.tokensJson.base.breakpoint.lg, spacing$1[8], data.tokensJson.base.breakpoint.xl, spacing$1[24]);
+})(templateObject_3$b || (templateObject_3$b = __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"])), spacing$1['2xl'], data.tokensJson.semantic.breakpoint.lg, spacing$1['4xl'], data.tokensJson.semantic.breakpoint.xl, spacing$1['11xl']);
 var ButtonWrapper = 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"])), spacing$1[4]);
+})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1.lg);
 var ContentWrapper = styled__default.default.div.withConfig({
   displayName: "FeatureBlock__ContentWrapper",
   componentId: "sc-1mi4lso-4"
@@ -4627,9 +4850,11 @@ var FeatureBlock = function FeatureBlock(_a) {
     onReadMore = _a.onReadMore,
     readMoreHref = _a.readMoreHref,
     _c = _a.readMoreText,
-    readMoreText = _c === void 0 ? "Read more" : _c;
+    readMoreText = _c === void 0 ? "Read more" : _c,
+    dataTestId = _a["data-testid"];
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(FeatureBlockStyled, {
+      "data-testid": dataTestId,
       children: [jsxRuntime.jsx(ImageWrapper, {
         children: jsxRuntime.jsx(Picture, {
           title: title,
@@ -4675,15 +4900,18 @@ var FeatureBlock = function FeatureBlock(_a) {
 };
 var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
 
-var _a = data.tokensJson.base,
-  spacing = _a.spacing,
-  shadow = _a.shadow,
+var _a = data.tokensJson.semantic,
+  color$1 = _a.color,
+  border$1 = _a.border,
   zIndex = _a.zIndex,
-  _b = data.tokensJson.semantic,
-  color$1 = _b.color,
-  typography = _b.typography,
-  border$1 = _b.border,
-  input$1 = data.tokensJson.component.input;
+  elevation$1 = _a.elevation,
+  motion$1 = _a.motion,
+  spacing = _a.spacing.layout,
+  _b = data.tokensJson.component,
+  input$1 = _b.input,
+  field$3 = _b.field;
+var duration = motion$1.duration,
+  easing = motion$1.easing;
 var DropdownContainer = styled__default.default.div.withConfig({
   displayName: "Dropdown__DropdownContainer",
   componentId: "sc-kz07c4-0"
@@ -4694,10 +4922,10 @@ var DropdownTrigger = styled__default.default.button.withConfig({
   },
   displayName: "Dropdown__DropdownTrigger",
   componentId: "sc-kz07c4-1"
-})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
-}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
+}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.normal, easing.easeInOut, duration.normal, easing.easeInOut, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.hover.borderColor : input$1.hover.borderColor;
 }, function (_a) {
@@ -4714,17 +4942,17 @@ var DropdownIcon = styled__default.default.div.withConfig({
   },
   displayName: "Dropdown__DropdownIcon",
   componentId: "sc-kz07c4-2"
-})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"])), spacing[2], function (_a) {
+})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform ", " ", ";\n  \n  ", "\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform ", " ", ";\n  \n  ", "\n\n  ", " {\n    transition: none;\n  }\n"])), spacing.sm, duration.fast, easing.easeOut, function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen && "\n    transform: rotate(180deg);\n  ";
-});
+}, reducedMotion);
 var DropdownMenu = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
+})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), zIndex.dropdown, input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, elevation$1.floating, spacing.xs, function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -4732,28 +4960,28 @@ var DropdownMenu = styled__default.default.div.withConfig({
   return $isOpen ? 'visible' : 'hidden';
 }, function (_a) {
   var $isOpen = _a.$isOpen;
-  return $isOpen ? 'translateY(0)' : 'translateY(-8px)';
-});
+  return $isOpen ? 'translateY(0)' : "translateY(-".concat(spacing.sm, ")");
+}, duration.fast, easing.easeOut, data.tokensJson.semantic.size.menu.maxHeight, reducedMotion);
 var DropdownOption = styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Dropdown__DropdownOption",
   componentId: "sc-kz07c4-4"
-})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
+})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
   var $isSelected = _a.$isSelected,
     $isFocused = _a.$isFocused;
   if ($isFocused) return color$1.background.surface;
   if ($isSelected) return color$1.background.surface;
   return 'transparent';
-}, input$1["default"].font, input$1["default"].textColor, color$1.background.surface, color$1.background.surface, border$1.subtle);
+}, input$1["default"].font, input$1["default"].textColor, duration.fast, easing.easeOut, color$1.background.surface, color$1.background.surface, border$1.subtle);
 var StyledHelperText$3 = 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"])), typography.caption, function (_a) {
+})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), field$3.helperText.typography, function (_a) {
   var $hasError = _a.$hasError;
-  return $hasError ? color$1.text.error : color$1.text.subdued;
-}, spacing[2]);
+  return $hasError ? field$3.helperText.colorError : field$3.helperText.color;
+}, field$3.gap);
 var Dropdown = function Dropdown(_a) {
   var options = _a.options,
     value = _a.value,
@@ -4765,7 +4993,8 @@ var Dropdown = function Dropdown(_a) {
     className = _a.className,
     label = _a.label,
     helperText = _a.helperText,
-    error = _a.error;
+    error = _a.error,
+    dataTestId = _a["data-testid"];
   var _d = React.useState(false),
     isOpen = _d[0],
     setIsOpen = _d[1];
@@ -4870,11 +5099,12 @@ var Dropdown = function Dropdown(_a) {
   return jsxRuntime.jsxs(DropdownContainer, {
     ref: dropdownRef,
     className: className,
+    "data-testid": dataTestId,
     children: [label && jsxRuntime.jsx("label", {
       htmlFor: dropdownId,
       style: {
         display: 'block',
-        marginBottom: spacing[2]
+        marginBottom: field$3.gap
       },
       children: jsxRuntime.jsx(Typography, {
         variant: "label",
@@ -4929,7 +5159,7 @@ var Dropdown = function Dropdown(_a) {
 };
 var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
 
-var semantic$8 = data.tokensJson.semantic;
+var semantic$5 = data.tokensJson.semantic;
 var StyledList = styled__default.default.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -4938,7 +5168,7 @@ var StyledList = styled__default.default.ul.withConfig({
   componentId: "sc-1irksg5-0"
 })(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
   var $dividers = _a.$dividers;
-  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: 1px solid ".concat(semantic$8.color.border["default"], ";\n    }\n  ");
+  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: ".concat(semantic$5.border.width.thin, " solid ").concat(semantic$5.color.border["default"], ";\n    }\n  ");
 });
 var List = function List(_a) {
   var children = _a.children,
@@ -4962,20 +5192,19 @@ var List = function List(_a) {
 List.displayName = 'List';
 var templateObject_1$c;
 
-var semantic$7 = data.tokensJson.semantic,
-  base$7 = data.tokensJson.base;
-var layout = semantic$7.spacing.layout,
-  color = semantic$7.color,
-  border = semantic$7.border,
-  elevation = semantic$7.elevation;
-  semantic$7.motion;
+var semantic$4 = data.tokensJson.semantic;
+var layout = semantic$4.spacing.layout,
+  color = semantic$4.color,
+  border = semantic$4.border,
+  elevation = semantic$4.elevation,
+  motion = semantic$4.motion;
 // ---------------------------------------------------------------------------
 // Size map
 // ---------------------------------------------------------------------------
 var sizeToWidth = {
-  small: '400px',
-  medium: '560px',
-  large: '720px'
+  small: data.tokensJson.semantic.size.overlay.sm,
+  medium: data.tokensJson.semantic.size.overlay.md,
+  large: data.tokensJson.semantic.size.overlay.lg
 };
 // ---------------------------------------------------------------------------
 // Animations
@@ -4992,17 +5221,29 @@ var scaleIn = styled.keyframes(templateObject_2$a || (templateObject_2$a = __mak
 var StyledOverlay$1 = styled__default.default.div.withConfig({
   displayName: "Modal__StyledOverlay",
   componentId: "sc-1d3g5gh-0"
-})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  ", "\n"])), styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " 200ms ease-out;"], ["animation: ", " 200ms ease-out;"])), fadeIn$1));
+})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), color.background.overlay, semantic$4.zIndex.modal, styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}));
 var StyledDialog = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Modal__StyledDialog",
   componentId: "sc-1d3g5gh-1"
-})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: 10000;\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " 200ms ease-out;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: 10000;\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " 200ms ease-out;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_a) {
+})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), semantic$4.zIndex.modal, function (_a) {
   var $width = _a.$width;
   return $width;
-}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, styled.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " 200ms ease-out;"], ["animation: ", " 200ms ease-out;"])), scaleIn), base$7.breakpoint.md, fadeIn$1);
+}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, styled.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.normal, motion.easing.easeOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}), reducedMotion, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}, semantic$4.breakpoint.md, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+});
 var StyledHeader = styled__default.default.div.withConfig({
   displayName: "Modal__StyledHeader",
   componentId: "sc-1d3g5gh-2"
@@ -5010,7 +5251,7 @@ var StyledHeader = styled__default.default.div.withConfig({
 var StyledBody = styled__default.default.div.withConfig({
   displayName: "Modal__StyledBody",
   componentId: "sc-1d3g5gh-3"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), layout.md, layout.lg, base$7.spacing[2], color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
+})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), layout.md, layout.lg, semantic$4.spacing.layout.sm, color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
 var StyledFooter = styled__default.default.div.withConfig({
   displayName: "Modal__StyledFooter",
   componentId: "sc-1d3g5gh-4"
@@ -5064,6 +5305,10 @@ var Modal = function Modal(_a) {
     ariaDescribedBy = _a["aria-describedby"];
   var dialogRef = React.useRef(null);
   var previousFocusRef = React.useRef(null);
+  var _e = usePresence(isOpen),
+    isPresent = _e.isPresent,
+    isExiting = _e.isExiting;
+  useInert(dialogRef, isExiting);
   // -----------------------------------------------------------------------
   // Focus & scroll-lock management
   // -----------------------------------------------------------------------
@@ -5115,19 +5360,22 @@ var Modal = function Modal(_a) {
   // Overlay click
   // -----------------------------------------------------------------------
   var handleOverlayClick = function handleOverlayClick(event) {
-    if (closeOnOverlayClick && event.target === event.currentTarget) {
+    // While exiting, the backdrop still catches clicks but doesn't close again
+    if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
       onClose();
     }
   };
   // -----------------------------------------------------------------------
   // Render
   // -----------------------------------------------------------------------
-  if (!isOpen) return null;
+  // Stays mounted while the exit fade runs, hidden from assistive technology
+  if (!isPresent) return null;
   var titleId = dataTestId ? "".concat(dataTestId, "-title") : 'modal-title';
   var width = sizeToWidth[size];
   var modal = jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(StyledOverlay$1, {
       onClick: handleOverlayClick,
+      "$isExiting": isExiting,
       "data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'modal-overlay'
     }), jsxRuntime.jsxs(StyledDialog, {
       ref: dialogRef,
@@ -5136,8 +5384,10 @@ var Modal = function Modal(_a) {
       "aria-label": ariaLabel || title,
       "aria-labelledby": titleId,
       "aria-describedby": ariaDescribedBy,
+      "aria-hidden": isExiting || undefined,
       tabIndex: -1,
       "$width": width,
+      "$isExiting": isExiting,
       onKeyDown: handleKeyDown,
       "data-testid": dataTestId,
       children: [jsxRuntime.jsxs(StyledHeader, {
@@ -5192,7 +5442,7 @@ var StyledInputBase = styled__default.default.input.withConfig({
   },
   displayName: "InputBase__StyledInputBase",
   componentId: "sc-1bpf4e8-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"
+})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"
 /**
  * Base styled textarea with shared styling
  */])), input["default"].font, function (_a) {
@@ -5207,7 +5457,7 @@ var StyledInputBase = styled__default.default.input.withConfig({
   if ($disabled) return input.disabled.borderColor;
   if ($hasError) return input.error.borderColor;
   return input["default"].borderColor;
-}, input["default"].borderRadius, input.placeholder.textColor, function (_a) {
+}, input["default"].borderRadius, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut, input.placeholder.textColor, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
 }, input.focus.outline, input.focus.outlineOffset, function (_a) {
@@ -5223,23 +5473,22 @@ var StyledTextAreaBase = styled__default.default.textarea.withConfig({
   },
   displayName: "InputBase__StyledTextAreaBase",
   componentId: "sc-1bpf4e8-1"
-})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: 120px;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5;\n"], ["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: 120px;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5;\n"])), StyledInputBase);
+})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: ", ";\n  resize: vertical;\n  font-family: inherit;\n  line-height: ", ";\n"], ["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: ", ";\n  resize: vertical;\n  font-family: inherit;\n  line-height: ", ";\n"])), StyledInputBase, data.tokensJson.component.input.textarea.minHeight, data.tokensJson.semantic.lineHeight.normal);
 var templateObject_1$a, templateObject_2$9;
 
-var semantic$6 = data.tokensJson.semantic,
-  base$6 = data.tokensJson.base;
+var field$2 = data.tokensJson.component.field;
 var StyledFieldContainer$2 = styled__default.default.div.withConfig({
   displayName: "NumberInput__StyledFieldContainer",
   componentId: "sc-qotc3w-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$6.spacing[2]);
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), field$2.gap);
 var StyledLabel$3 = styled__default.default.label.withConfig({
   displayName: "NumberInput__StyledLabel",
   componentId: "sc-qotc3w-1"
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), base$6.spacing[1], semantic$6.typography.label, semantic$6.color.text["default"], semantic$6.color.text.disabled);
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), field$2.label.gap, field$2.label.typography, field$2.label.color, field$2.label.colorDisabled);
 var StyledRequiredIndicator$2 = 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"])), semantic$6.color.text.error, base$6.fontWeight[5]);
+})(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({
   displayName: "NumberInput__StyledInputWrapper",
   componentId: "sc-qotc3w-3"
@@ -5247,11 +5496,11 @@ var StyledInputWrapper$2 = styled__default.default.div.withConfig({
 var StyledNumberInput = 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"])), base$6.spacing[10]);
+})(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"])), data.tokensJson.semantic.spacing.layout['6xl']);
 var StyledStepperContainer = 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"])), base$6.spacing[2], base$6.spacing[2]);
+})(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"])), data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.spacing.layout.sm);
 var StyledHelperText$2 = styled__default.default.div.withConfig({
   displayName: "NumberInput__StyledHelperText",
   componentId: "sc-qotc3w-6"
@@ -5278,9 +5527,9 @@ var StyledHelperText$2 = styled__default.default.div.withConfig({
  *   onChange={(newValue) => setValue(newValue)}
  * />
  * ```
- */])), semantic$6.typography.small, function (_a) {
+ */])), field$2.helperText.typography, function (_a) {
   var $isError = _a.$isError;
-  return $isError ? semantic$6.color.text.error : semantic$6.color.text.subdued;
+  return $isError ? field$2.helperText.colorError : field$2.helperText.color;
 });
 /**
  * NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
@@ -5487,10 +5736,36 @@ var PageTitleStyled = styled__default.default.div.withConfig({
   },
   displayName: "PageTitle__PageTitleStyled",
   componentId: "sc-16h256f-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), data.tokensJson.base.spacing[6], function (_a) {
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */])), data.tokensJson.semantic.spacing.layout['2xl'], function (_a) {
   var $hasBackButton = _a.$hasBackButton;
-  return $hasBackButton ? data.tokensJson.base.spacing[0] : data.tokensJson.base.spacing[12];
+  return $hasBackButton ? data.tokensJson.semantic.spacing.layout.none : data.tokensJson.semantic.spacing.layout['7xl'];
 });
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */
 var PageTitle = function PageTitle(_a) {
   var title = _a.title,
     _b = _a.hasBackButton,
@@ -5520,26 +5795,25 @@ var PageTitle = function PageTitle(_a) {
 };
 var templateObject_1$8;
 
-var semantic$5 = data.tokensJson.semantic,
-  base$5 = data.tokensJson.base;
+var field$1 = data.tokensJson.component.field;
 var StyledFieldContainer$1 = styled__default.default.div.withConfig({
   displayName: "PasswordField__StyledFieldContainer",
   componentId: "sc-1p15zk0-0"
-})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$5.spacing[2]);
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), field$1.gap);
 var StyledLabel$2 = styled__default.default.label.withConfig({
   displayName: "PasswordField__StyledLabel",
   componentId: "sc-1p15zk0-1"
-})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), base$5.spacing[1], semantic$5.typography.label, semantic$5.color.text["default"], semantic$5.color.text.disabled);
+})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), field$1.label.gap, field$1.label.typography, field$1.label.color, field$1.label.colorDisabled);
 var StyledRequiredIndicator$1 = 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"])), semantic$5.color.text.error, base$5.fontWeight[5]);
+})(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({
   displayName: "PasswordField__StyledHelperText",
   componentId: "sc-1p15zk0-3"
-})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), semantic$5.typography.caption, function (_a) {
+})(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 ? semantic$5.color.text.error : semantic$5.color.text.subdued;
+  return $hasError ? field$1.helperText.colorError : field$1.helperText.color;
 });
 var StyledInputWrapper$1 = styled__default.default.div.withConfig({
   displayName: "PasswordField__StyledInputWrapper",
@@ -5560,7 +5834,7 @@ var StyledToggleButton = styled__default.default.div.withConfig({
  *   required
  * />
  * ```
- */])), base$5.spacing[2]);
+ */])), data.tokensJson.semantic.spacing.layout.sm);
 /**
  * PasswordField component for secure password input with visibility toggle
  *
@@ -5653,8 +5927,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 PasswordField.displayName = 'PasswordField';
 var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4;
 
-var semantic$4 = data.tokensJson.semantic,
-  base$4 = data.tokensJson.base,
+var semantic$3 = data.tokensJson.semantic,
   component = data.tokensJson.component;
 var StyledSearchContainer = styled__default.default.div.withConfig({
   displayName: "SearchField__StyledSearchContainer",
@@ -5663,7 +5936,7 @@ var StyledSearchContainer = styled__default.default.div.withConfig({
 var StyledInputWrapper = styled__default.default.div.withConfig({
   displayName: "SearchField__StyledInputWrapper",
   componentId: "sc-qhz9i8-1"
-})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, function (props) {
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic$3.spacing.layout.sm, semantic$3.spacing.layout.sm, semantic$3.spacing.layout.md, component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic$3.motion.duration.normal, semantic$3.motion.easing.easeInOut, semantic$3.motion.duration.normal, semantic$3.motion.easing.easeInOut, function (props) {
   return props.$isFocused && "\n    border-color: ".concat(component.input.focus.borderColor, ";\n    outline: ").concat(component.input.focus.outline, ";\n    outline-offset: ").concat(component.input.focus.outlineOffset, ";\n  ");
 }, 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  ");
@@ -5671,15 +5944,15 @@ var StyledInputWrapper = styled__default.default.div.withConfig({
 var StyledInput = styled__default.default.input.withConfig({
   displayName: "SearchField__StyledInput",
   componentId: "sc-qhz9i8-2"
-})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$4.typography.body, semantic$4.color.text["default"], semantic$4.color.text.subdued, semantic$4.color.text.disabled);
+})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$3.typography.body, semantic$3.color.text["default"], semantic$3.color.text.subdued, semantic$3.color.text.disabled);
 var StyledSuggestionsList = 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: 300px;\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: 1000;\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: 300px;\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: 1000;\n"])), base$4.spacing[1], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], base$4.shadow[3], base$4.spacing[1]);
+})(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  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"])), semantic$3.spacing.layout.xs, data.tokensJson.semantic.size.menu.maxHeight, semantic$3.color.background.subtle, semantic$3.border.width.thin, semantic$3.color.border["default"], semantic$3.border.radius.md, semantic$3.elevation.floating, semantic$3.spacing.layout.xs, semantic$3.zIndex.dropdown);
 var StyledSectionHeader = 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"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.caption, semantic$4.color.text.subdued, base$4.letterSpacing[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.spacing.layout.sm, semantic$3.spacing.layout.md, data.tokensJson.component.searchField.sectionHeader.typography, semantic$3.color.text.subdued, data.tokensJson.component.searchField.sectionHeader.letterSpacing);
 var debounce = function debounce(func, wait) {
   var timeout = null;
   return function () {
@@ -5982,8 +6255,7 @@ var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 SearchField.displayName = 'SearchField';
 var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4;
 
-var semantic$3 = data.tokensJson.semantic,
-  base$3 = data.tokensJson.base;
+var semantic$2 = data.tokensJson.semantic;
 // Fade in animation for overlay
 var fadeIn = styled.keyframes(templateObject_1$5 || (templateObject_1$5 = __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"
 // Slide animations for each position
@@ -5999,35 +6271,50 @@ var StyledOverlay = styled__default.default.div.withConfig({
   },
   displayName: "Sheet__StyledOverlay",
   componentId: "sc-8abisx-0"
-})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n  ", "\n  display: ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n  ", "\n  display: ", ";\n"])), styled.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " 200ms ease-in-out;"], ["animation: ", " 200ms ease-in-out;"])), fadeIn), function (_a) {
-  var $isOpen = _a.$isOpen;
-  return $isOpen ? 'block' : 'none';
-});
+})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), semantic$2.color.background.overlay, semantic$2.zIndex.overlay, styled.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}));
 var StyledSheet = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Sheet__StyledSheet",
   componentId: "sc-8abisx-1"
-})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: 1001;\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: 1001;\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic$3.color.background["default"], base$3.shadow[4], function (_a) {
+})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic$2.color.background["default"], semantic$2.elevation.overlay, semantic$2.zIndex.overlay, function (_a) {
   var $position = _a.$position,
     $variant = _a.$variant,
     $width = _a.$width,
     $height = _a.$height;
   var isDrawer = $variant === 'drawer';
-  var margin = isDrawer ? base$3.spacing[4] : '0';
-  var borderRadius = isDrawer ? base$3.border.radius[3] : '0';
+  var margin = isDrawer ? semantic$2.spacing.layout.lg : '0';
+  var borderRadius = isDrawer ? semantic$2.border.radius.md : '0';
   switch ($position) {
     case 'right':
-      return styled.css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " 200ms ease-in-out;\n        "], ["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " 200ms ease-in-out;\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInRight);
+      return styled.css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic$2.spacing.layout.lg, " * 2") : '0px', borderRadius, borderRadius, slideInRight, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
+        var $isExiting = _a.$isExiting;
+        return $isExiting && exitAnimation;
+      });
     case 'left':
-      return styled.css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n          top: ", ";\n          left: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: 0 ", " ", " 0;\n          animation: ", " 200ms ease-in-out;\n        "], ["\n          top: ", ";\n          left: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: 0 ", " ", " 0;\n          animation: ", " 200ms ease-in-out;\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInLeft);
+      return styled.css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n          top: ", ";\n          left: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: 0 ", " ", " 0;\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          left: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: 0 ", " ", " 0;\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic$2.spacing.layout.lg, " * 2") : '0px', borderRadius, borderRadius, slideInLeft, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
+        var $isExiting = _a.$isExiting;
+        return $isExiting && exitAnimation;
+      });
     case 'top':
-      return styled.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " 200ms ease-in-out;\n        "], ["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " 200ms ease-in-out;\n        "])), margin, margin, margin, $height, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInTop);
+      return styled.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $height, isDrawer ? "".concat(semantic$2.spacing.layout.lg, " * 2") : '0px', borderRadius, borderRadius, slideInTop, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
+        var $isExiting = _a.$isExiting;
+        return $isExiting && exitAnimation;
+      });
     case 'bottom':
-      return styled.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n          bottom: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: ", " ", " 0 0;\n          animation: ", " 200ms ease-in-out;\n        "], ["\n          bottom: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: ", " ", " 0 0;\n          animation: ", " 200ms ease-in-out;\n        "])), margin, margin, margin, $height, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInBottom);
+      return styled.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n          bottom: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: ", " ", " 0 0;\n          animation: ", " ", " ", "", ";\n        "], ["\n          bottom: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: ", " ", " 0 0;\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $height, isDrawer ? "".concat(semantic$2.spacing.layout.lg, " * 2") : '0px', borderRadius, borderRadius, slideInBottom, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
+        var $isExiting = _a.$isExiting;
+        return $isExiting && exitAnimation;
+      });
   }
-}, base$3.spacing[2], semantic$3.color.background.subtle, semantic$3.color.border["default"], base$3.border.radius.circle, semantic$3.color.border.strong);
+}, reducedMotion, fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}, semantic$2.spacing.layout.sm, semantic$2.color.background.subtle, semantic$2.color.border["default"], semantic$2.border.radius.circle, semantic$2.color.border.strong);
 var StyledSheetContent = styled__default.default.div.withConfig({
   displayName: "Sheet__StyledSheetContent",
   componentId: "sc-8abisx-2"
@@ -6057,7 +6344,7 @@ var StyledSheetContent = styled__default.default.div.withConfig({
  *   <h2>Mobile Menu</h2>
  * </Sheet>
  * ```
- */])), base$3.spacing[6]);
+ */])), semantic$2.spacing.layout['2xl']);
 /**
  * Sheet component for side panels and drawers
  *
@@ -6092,9 +6379,9 @@ var Sheet = function Sheet(_a) {
     _c = _a.variant,
     variant = _c === void 0 ? 'sheet' : _c,
     _d = _a.width,
-    width = _d === void 0 ? '400px' : _d,
+    width = _d === void 0 ? data.tokensJson.semantic.size.overlay.sm : _d,
     _e = _a.height,
-    height = _e === void 0 ? '400px' : _e,
+    height = _e === void 0 ? data.tokensJson.semantic.size.overlay.sm : _e,
     children = _a.children,
     _f = _a.closeOnOverlayClick,
     closeOnOverlayClick = _f === void 0 ? true : _f,
@@ -6106,18 +6393,27 @@ var Sheet = function Sheet(_a) {
     ariaDescribedBy = _a["aria-describedby"];
   var sheetRef = React.useRef(null);
   var previousFocusRef = React.useRef(null);
+  var _h = usePresence(isOpen),
+    isPresent = _h.isPresent,
+    isExiting = _h.isExiting;
+  useInert(sheetRef, isExiting);
   // Focus management
   React.useEffect(function () {
     if (isOpen) {
       // Store previous focus
       previousFocusRef.current = document.activeElement;
       // Focus sheet
-      setTimeout(function () {
+      var timer_1 = setTimeout(function () {
         var _a;
         (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, 100); // Small delay to allow animation to start
       // Prevent body scroll
       document.body.style.overflow = 'hidden';
+      // A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
+      return function () {
+        clearTimeout(timer_1);
+        document.body.style.overflow = '';
+      };
     } else {
       // Restore previous focus
       if (previousFocusRef.current) {
@@ -6154,14 +6450,16 @@ var Sheet = function Sheet(_a) {
   };
   // Overlay click handling
   var handleOverlayClick = function handleOverlayClick(event) {
-    if (closeOnOverlayClick && event.target === event.currentTarget) {
+    // While exiting, the backdrop still catches clicks but doesn't close again
+    if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
       onClose();
     }
   };
-  if (!isOpen) return null;
+  // Stays mounted while the exit fade runs, hidden from assistive technology
+  if (!isPresent) return null;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(StyledOverlay, {
-      "$isOpen": isOpen,
+      "$isExiting": isExiting,
       onClick: handleOverlayClick,
       "data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
     }), jsxRuntime.jsx(StyledSheet, {
@@ -6170,12 +6468,13 @@ var Sheet = function Sheet(_a) {
       "aria-modal": "true",
       "aria-label": ariaLabel || title || 'Sheet dialog',
       "aria-describedby": ariaDescribedBy,
+      "aria-hidden": isExiting || undefined,
       tabIndex: -1,
       "$position": position,
       "$variant": variant,
       "$width": width,
       "$height": height,
-      "$isOpen": isOpen,
+      "$isExiting": isExiting,
       onKeyDown: handleKeyDown,
       "data-testid": dataTestId,
       children: jsxRuntime.jsx(StyledSheetContent, {
@@ -6187,8 +6486,7 @@ var Sheet = function Sheet(_a) {
 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$2 = data.tokensJson.semantic,
-  base$2 = data.tokensJson.base;
+var semantic$1 = data.tokensJson.semantic;
 var StyledSliderContainer = styled__default.default.div.withConfig({
   displayName: "Slider__StyledSliderContainer",
   componentId: "sc-6mh2d4-0"
@@ -6196,21 +6494,21 @@ var StyledSliderContainer = styled__default.default.div.withConfig({
 var StyledLabel$1 = 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$2.typography.label, function (_a) {
+})(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$2.color.text.disabled : semantic$2.color.text["default"];
-}, semantic$2.spacing.layout.lg);
+  return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
+}, semantic$1.spacing.layout.lg);
 var StyledSliderTrackContainer = 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"])), base$2.spacing[10]);
+})(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.spacing.layout['6xl']);
 var StyledTrack = 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"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n"])), base$2.spacing[1], function (_a) {
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n"])), semantic$1.spacing.layout.xs, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$2.color.background.disabled : semantic$2.color.border["default"];
-}, base$2.border.radius.circle, function (_a) {
+  return $disabled ? semantic$1.color.background.disabled : semantic$1.color.border["default"];
+}, semantic$1.border.radius.circle, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
@@ -6219,31 +6517,31 @@ var StyledTrackFill = styled__default.default.div.withConfig({
   componentId: "sc-6mh2d4-4"
 })(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n"], ["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n"])), function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$2.color.border["default"] : semantic$2.color.background.emphasis;
-}, base$2.border.radius.circle);
+  return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
+}, semantic$1.border.radius.circle);
 var StyledThumb = 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: -", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  transform: translateX(-50%);\n  transition: ", ";\n  box-shadow: ", ";\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\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: -", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  transform: translateX(-50%);\n  transition: ", ";\n  box-shadow: ", ";\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\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"])), base$2.spacing[5], base$2.spacing[5], semantic$2.spacing.layout.sm, function (_a) {
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: -", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  transform: translateX(-50%);\n  transition: ", ";\n  box-shadow: ", ";\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: ", " solid ", ";\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: -", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  transform: translateX(-50%);\n  transition: ", ";\n  box-shadow: ", ";\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: ", " solid ", ";\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.spacing.layout.xl, semantic$1.spacing.layout.xl, semantic$1.spacing.layout.sm, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$2.color.background.disabled : semantic$2.color.background.subtle;
-}, base$2.border.width[2], function (_a) {
+  return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
+}, semantic$1.border.width.thick, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$2.color.border["default"] : semantic$2.color.background.emphasis;
-}, base$2.border.radius.circle, function (_a) {
+  return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
+}, semantic$1.border.radius.circle, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? 'not-allowed' : 'grab';
-}, semantic$2.motion.transition.fast, base$2.shadow[2], base$2.shadow[3], base$2.border.width[2], semantic$2.color.border.interactive, base$2.spacing[1], function (_a) {
+}, semantic$1.motion.transition.fast, data.tokensJson.component.slider.thumb.shadow["default"], reducedMotion, data.tokensJson.component.slider.thumb.shadow.hover, semantic$1.border.width.thick, semantic$1.color.border.interactive, semantic$1.spacing.layout.xs, function (_a) {
   var $active = _a.$active;
-  return $active && "\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ".concat(base$2.shadow[4], ";\n  ");
+  return $active && "\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ".concat(data.tokensJson.component.slider.thumb.shadow.active, ";\n  ");
 });
 var StyledValueLabel = styled__default.default.div.withConfig({
   displayName: "Slider__StyledValueLabel",
   componentId: "sc-6mh2d4-6"
-})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  position: absolute;\n  top: -", ";\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: -", ";\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"])), base$2.spacing[8], semantic$2.spacing.layout.sm, base$2.spacing[1], base$2.spacing[2], semantic$2.color.background.emphasis, semantic$2.color.text.inverse, semantic$2.typography.caption, base$2.border.radius[2], function (_a) {
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  position: absolute;\n  top: -", ";\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: -", ";\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.spacing.layout['4xl'], semantic$1.spacing.layout.sm, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.sm, semantic$1.color.background.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, semantic$1.border.radius.sm, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? base$2.opacity[50] : base$2.opacity[100];
-}, base$2.spacing[1], base$2.spacing[1], base$2.spacing[1], semantic$2.color.background.emphasis);
+  return $disabled ? semantic$1.opacity.disabled : semantic$1.opacity.full;
+}, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.color.background.emphasis);
 var StyledMinMaxLabels = styled__default.default.div.withConfig({
   displayName: "Slider__StyledMinMaxLabels",
   componentId: "sc-6mh2d4-7"
@@ -6271,7 +6569,7 @@ var StyledMinMaxLabels = styled__default.default.div.withConfig({
  *   onRangeChange={(values) => console.log(values)}
  * />
  * ```
- */])), semantic$2.typography.body, semantic$2.color.text.subdued, base$2.spacing[1]);
+ */])), semantic$1.typography.body, semantic$1.color.text.subdued, semantic$1.spacing.layout.xs);
 /**
  * Slider component for single value or range selection
  *
@@ -6593,46 +6891,45 @@ var Slider = function Slider(_a) {
 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$1 = data.tokensJson.semantic,
-  base$1 = data.tokensJson.base;
+var semantic = data.tokensJson.semantic;
 var StyledTabList = styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "TabBar__StyledTabList",
   componentId: "sc-1g9ib0y-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: 4px;\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: 4px;\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), function (props) {
-  return props.$variant === 'pills' ? base$1.spacing[2] : '0';
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), function (props) {
+  return props.$variant === 'pills' ? semantic.spacing.layout.sm : '0';
 }, function (props) {
-  return props.$variant === 'underline' ? "".concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border.subtle) : 'none';
-}, semantic$1.color.background.subtle, semantic$1.color.border["default"], base$1.border.radius[2]);
+  return props.$variant === 'underline' ? "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border.subtle) : 'none';
+}, data.tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
 var StyledTab = styled__default.default.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "TabBar__StyledTab",
   componentId: "sc-1g9ib0y-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Variant-specific styles */\n  ", "\n  \n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Active/pressed state */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Variant-specific styles */\n  ", "\n  \n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Active/pressed state */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"])), base$1.spacing[2], base$1.spacing[3], base$1.spacing[4], semantic$1.typography.button2, function (props) {
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Variant-specific styles */\n  ", "\n  \n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Active/pressed state */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Variant-specific styles */\n  ", "\n  \n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Active/pressed state */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic$1.motion.hover, function (props) {
+}, semantic.motion.hover, function (props) {
   if (props.$variant === 'pills') {
-    return "\n        border-radius: ".concat(base$1.border.radius.circle, ";\n        background-color: ").concat(props.$isActive ? semantic$1.color.background.interactive : semantic$1.color.background.subtle, ";\n        color: ").concat(props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text["default"], ";\n        \n        &:hover:not(:disabled) {\n          background-color: ").concat(props.$isActive ? semantic$1.color.background['interactive-hover'] : semantic$1.color.background.surface, ";\n        }\n      ");
+    return "\n        border-radius: ".concat(semantic.border.radius.circle, ";\n        background-color: ").concat(props.$isActive ? semantic.color.background.interactive : semantic.color.background.subtle, ";\n        color: ").concat(props.$isActive ? semantic.color.text.inverse : semantic.color.text["default"], ";\n        \n        &:hover:not(:disabled) {\n          background-color: ").concat(props.$isActive ? semantic.color.background['interactive-hover'] : semantic.color.background.surface, ";\n        }\n      ");
   }
   if (props.$variant === 'underline') {
-    return "\n        color: ".concat(props.$isActive ? semantic$1.color.text.interactive : semantic$1.color.text.subdued, ";\n        \n        &::after {\n          content: '';\n          position: absolute;\n          bottom: -1px;\n          left: 0;\n          right: 0;\n          height: ").concat(base$1.border.width[2], ";\n          background-color: ").concat(props.$isActive ? semantic$1.color.background.interactive : 'transparent', ";\n          transition: ").concat(semantic$1.motion.hover, ";\n        }\n        \n        &:hover:not(:disabled) {\n          color: ").concat(semantic$1.color.text.interactive, ";\n        }\n      ");
+    return "\n        color: ".concat(props.$isActive ? semantic.color.text.interactive : semantic.color.text.subdued, ";\n        \n        &::after {\n          content: '';\n          position: absolute;\n          bottom: -1px;\n          left: 0;\n          right: 0;\n          height: ").concat(semantic.border.width.thick, ";\n          background-color: ").concat(props.$isActive ? semantic.color.background.interactive : 'transparent', ";\n          transition: ").concat(semantic.motion.hover, ";\n        }\n        \n        &:hover:not(:disabled) {\n          color: ").concat(semantic.color.text.interactive, ";\n        }\n      ");
   }
   // default variant
-  return "\n      border-radius: ".concat(base$1.border.radius[2], " ").concat(base$1.border.radius[2], " 0 0;\n      background-color: ").concat(props.$isActive ? semantic$1.color.background.subtle : semantic$1.color.background["default"], ";\n      color: ").concat(props.$isActive ? semantic$1.color.text["default"] : semantic$1.color.text.subdued, ";\n      border: ").concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border["default"], ";\n      border-bottom: ").concat(props.$isActive ? 'none' : "".concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border["default"]), ";\n      margin-bottom: ").concat(props.$isActive ? '-1px' : '0', ";\n      \n      &:hover:not(:disabled) {\n        background-color: ").concat(semantic$1.color.background.surface, ";\n        color: ").concat(semantic$1.color.text["default"], ";\n      }\n    ");
+  return "\n      border-radius: ".concat(semantic.border.radius.sm, " ").concat(semantic.border.radius.sm, " 0 0;\n      background-color: ").concat(props.$isActive ? semantic.color.background.subtle : semantic.color.background["default"], ";\n      color: ").concat(props.$isActive ? semantic.color.text["default"] : semantic.color.text.subdued, ";\n      border: ").concat(semantic.border.width.thin, " solid ").concat(semantic.color.border["default"], ";\n      border-bottom: ").concat(props.$isActive ? 'none' : "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border["default"]), ";\n      margin-bottom: ").concat(props.$isActive ? '-1px' : '0', ";\n      \n      &:hover:not(:disabled) {\n        background-color: ").concat(semantic.color.background.surface, ";\n        color: ").concat(semantic.color.text["default"], ";\n      }\n    ");
 }, function (props) {
   return props.$disabled ? '0.5' : '1';
-}, base$1.border.width[2], semantic$1.color.border.strong, base$1.spacing[1]);
+}, semantic.border.width.thick, semantic.color.border.strong, semantic.spacing.layout.xs);
 var StyledBadge = styled__default.default.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "TabBar__StyledBadge",
   componentId: "sc-1g9ib0y-2"
-})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\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: 20px;\n  height: 20px;\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: 0 ", ";\n  font: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n"
 /**
  * TabBar component for tabbed navigation
  *
@@ -6654,14 +6951,9 @@ var StyledBadge = styled__default.default.span.withConfig({
  *   variant="pills"
  * />
  * ```
- */])), base$1.spacing[1], semantic$1.typography.caption, base$1.fontWeight[5], base$1.border.radius.circle, function (props) {
-  if (props.$variant === 'pills') {
-    return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic$1.color.background.interactive;
-  }
-  return semantic$1.color.background.interactive;
-}, function (props) {
-  return props.$variant === 'pills' && props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text.inverse;
-});
+ */])), data.tokensJson.component.tabBar.badge.size, data.tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, data.tokensJson.component.tabBar.badge.typography, data.tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle, function (props) {
+  return props.$variant === 'pills' && props.$isActive ? semantic.color.background['inverse-overlay'] : semantic.color.background.interactive;
+}, semantic.color.text.inverse);
 /**
  * TabBar component for tabbed navigation
  *
@@ -6812,20 +7104,19 @@ var TabBar = function TabBar(_a) {
 TabBar.displayName = 'TabBar';
 var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 
-var semantic = data.tokensJson.semantic,
-  base = data.tokensJson.base;
+var field = data.tokensJson.component.field;
 var StyledFieldContainer = styled__default.default.div.withConfig({
   displayName: "TextField__StyledFieldContainer",
   componentId: "sc-1ys3b0-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base.spacing[2]);
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), field.gap);
 var StyledLabel = styled__default.default.label.withConfig({
   displayName: "TextField__StyledLabel",
   componentId: "sc-1ys3b0-1"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), base.spacing[1], semantic.typography.label, semantic.color.text["default"], semantic.color.text.disabled);
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), field.label.gap, field.label.typography, field.label.color, field.label.colorDisabled);
 var StyledRequiredIndicator = 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"])), semantic.color.text.error, base.fontWeight[5]);
+})(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({
   displayName: "TextField__StyledHelperText",
   componentId: "sc-1ys3b0-3"
@@ -6842,9 +7133,9 @@ var StyledHelperText = styled__default.default.div.withConfig({
  *   required
  * />
  * ```
- */])), semantic.typography.caption, function (_a) {
+ */])), field.helperText.typography, function (_a) {
   var $hasError = _a.$hasError;
-  return $hasError ? semantic.color.text.error : semantic.color.text.subdued;
+  return $hasError ? field.helperText.colorError : field.helperText.color;
 });
 /**
  * TextField component for text input with label, helper text, and error states
@@ -6918,9 +7209,9 @@ var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4
 var StyledContainer = 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: 72px;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  gap: ", ";\n  transition: background-color 0.2s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: 72px;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  gap: ", ";\n  transition: background-color 0.2s ease;\n  \n  ", "\n"])), data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.color.background["default"], data.tokensJson.semantic.color.border["default"], data.tokensJson.semantic.spacing.layout.md, function (_a) {
+})(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  ", "\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  ", "\n"])), data.tokensJson.component.transactionListItem.minHeight, data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.color.background["default"], data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border["default"], data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut, function (_a) {
   var $clickable = _a.$clickable;
-  return $clickable && "\n    cursor: pointer;\n    \n    &:hover {\n      background-color: ".concat(data.tokensJson.semantic.color.background.subtle, ";\n    }\n    \n    &:active {\n      background-color: ").concat(data.tokensJson.semantic.color.background['interactive-active'], ";\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ").concat(data.tokensJson.semantic.color.border.interactive, ";\n      outline-offset: -2px;\n    }\n  ");
+  return $clickable && "\n    cursor: pointer;\n    \n    &:hover {\n      background-color: ".concat(data.tokensJson.semantic.color.background.subtle, ";\n    }\n    \n    &:active {\n      background-color: ").concat(data.tokensJson.semantic.color.background['interactive-active'], ";\n    }\n    \n    &:focus-visible {\n      outline: ").concat(data.tokensJson.semantic.border.width.thick, " solid ").concat(data.tokensJson.semantic.color.border.interactive, ";\n      outline-offset: calc(-1 * ").concat(data.tokensJson.semantic.border.focusOffset, ");\n    }\n  ");
 });
 var StyledAvatarSection = styled__default.default.div.withConfig({
   displayName: "TransactionListItem__StyledAvatarSection",
@@ -7128,14 +7419,18 @@ var TransactionListItem = function TransactionListItem(_a) {
 };
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
 
+// Exception to decision 0014: the gap props are typed as base spacing keys (public API),
+// so they are looked up in base.spacing until they accept semantic keys.
+// eslint-disable-next-line no-restricted-syntax
+var gapSpacing = data.tokensJson.base.spacing;
 // Breakpoints using base tokens
 var breakpoints = {
-  xs: data.tokensJson.base.breakpoint.xs,
-  sm: data.tokensJson.base.breakpoint.sm,
-  md: data.tokensJson.base.breakpoint.md,
-  lg: data.tokensJson.base.breakpoint.lg,
-  xl: data.tokensJson.base.breakpoint.xl,
-  '2xl': data.tokensJson.base.breakpoint['2xl']
+  xs: data.tokensJson.semantic.breakpoint.xs,
+  sm: data.tokensJson.semantic.breakpoint.sm,
+  md: data.tokensJson.semantic.breakpoint.md,
+  lg: data.tokensJson.semantic.breakpoint.lg,
+  xl: data.tokensJson.semantic.breakpoint.xl,
+  '2xl': data.tokensJson.semantic.breakpoint['2xl']
 };
 // Media query helpers
 var media = {
@@ -7168,13 +7463,15 @@ var Grid = function Grid(_a) {
     gapX = _a.gapX,
     gapY = _a.gapY,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsxRuntime.jsx(GridContainer, {
     "$cols": cols,
-    "$gap": gap ? data.tokensJson.base.spacing[gap] : undefined,
-    "$gapX": gapX ? data.tokensJson.base.spacing[gapX] : undefined,
-    "$gapY": gapY ? data.tokensJson.base.spacing[gapY] : undefined,
+    "$gap": gap ? gapSpacing[gap] : undefined,
+    "$gapX": gapX ? gapSpacing[gapX] : undefined,
+    "$gapY": gapY ? gapSpacing[gapY] : undefined,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7187,7 +7484,7 @@ var GridColContainer = styled__default.default.div.withConfig({
 })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
   return props.$span && styled.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["grid-column: span ", " / span ", ";"], ["grid-column: span ", " / span ", ";"])), props.$span, props.$span);
 }, function (props) {
-  return props.$order && styled.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
+  return props.$order !== undefined && styled.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
 }, function (props) {
   return props.$spanSm && styled.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.sm, props.$spanSm, props.$spanSm);
 }, function (props) {
@@ -7197,13 +7494,13 @@ var GridColContainer = styled__default.default.div.withConfig({
 }, function (props) {
   return props.$spanXl && styled.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.xl, props.$spanXl, props.$spanXl);
 }, function (props) {
-  return props.$orderSm && styled.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
+  return props.$orderSm !== undefined && styled.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
 }, function (props) {
-  return props.$orderMd && styled.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
+  return props.$orderMd !== undefined && styled.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
 }, function (props) {
-  return props.$orderLg && styled.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
+  return props.$orderLg !== undefined && styled.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
 }, function (props) {
-  return props.$orderXl && styled.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
+  return props.$orderXl !== undefined && styled.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
 });
 var GridCol = function GridCol(_a) {
   var span = _a.span,
@@ -7217,6 +7514,7 @@ var GridCol = function GridCol(_a) {
     orderLg = _a.orderLg,
     orderXl = _a.orderXl,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsxRuntime.jsx(GridColContainer, {
     "$span": span,
@@ -7230,6 +7528,7 @@ var GridCol = function GridCol(_a) {
     "$orderLg": orderLg,
     "$orderXl": orderXl,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };
@@ -7302,6 +7601,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     gapYLg = _a.gapYLg,
     gapYXl = _a.gapYXl,
     className = _a.className,
+    dataTestId = _a["data-testid"],
     children = _a.children;
   return jsxRuntime.jsx(ResponsiveGridContainer, {
     "$cols": cols,
@@ -7309,22 +7609,23 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     "$colsMd": colsMd,
     "$colsLg": colsLg,
     "$colsXl": colsXl,
-    "$gap": gap ? data.tokensJson.base.spacing[gap] : undefined,
-    "$gapSm": gapSm ? data.tokensJson.base.spacing[gapSm] : undefined,
-    "$gapMd": gapMd ? data.tokensJson.base.spacing[gapMd] : undefined,
-    "$gapLg": gapLg ? data.tokensJson.base.spacing[gapLg] : undefined,
-    "$gapXl": gapXl ? data.tokensJson.base.spacing[gapXl] : undefined,
-    "$gapX": gapX ? data.tokensJson.base.spacing[gapX] : undefined,
-    "$gapXSm": gapXSm ? data.tokensJson.base.spacing[gapXSm] : undefined,
-    "$gapXMd": gapXMd ? data.tokensJson.base.spacing[gapXMd] : undefined,
-    "$gapXLg": gapXLg ? data.tokensJson.base.spacing[gapXLg] : undefined,
-    "$gapXXl": gapXXl ? data.tokensJson.base.spacing[gapXXl] : undefined,
-    "$gapY": gapY ? data.tokensJson.base.spacing[gapY] : undefined,
-    "$gapYSm": gapYSm ? data.tokensJson.base.spacing[gapYSm] : undefined,
-    "$gapYMd": gapYMd ? data.tokensJson.base.spacing[gapYMd] : undefined,
-    "$gapYLg": gapYLg ? data.tokensJson.base.spacing[gapYLg] : undefined,
-    "$gapYXl": gapYXl ? data.tokensJson.base.spacing[gapYXl] : undefined,
+    "$gap": gap ? gapSpacing[gap] : undefined,
+    "$gapSm": gapSm ? gapSpacing[gapSm] : undefined,
+    "$gapMd": gapMd ? gapSpacing[gapMd] : undefined,
+    "$gapLg": gapLg ? gapSpacing[gapLg] : undefined,
+    "$gapXl": gapXl ? gapSpacing[gapXl] : undefined,
+    "$gapX": gapX ? gapSpacing[gapX] : undefined,
+    "$gapXSm": gapXSm ? gapSpacing[gapXSm] : undefined,
+    "$gapXMd": gapXMd ? gapSpacing[gapXMd] : undefined,
+    "$gapXLg": gapXLg ? gapSpacing[gapXLg] : undefined,
+    "$gapXXl": gapXXl ? gapSpacing[gapXXl] : undefined,
+    "$gapY": gapY ? gapSpacing[gapY] : undefined,
+    "$gapYSm": gapYSm ? gapSpacing[gapYSm] : undefined,
+    "$gapYMd": gapYMd ? gapSpacing[gapYMd] : undefined,
+    "$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
+    "$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
     className: className,
+    "data-testid": dataTestId,
     children: children
   });
 };