@common-origin/design-system 2.18.0 → 2.19.0

package/dist/client.esm.js

@@ -103,13 +103,57 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+// Components read tokens as CSS variables, with the resolved value as the fallback (decision 0041).
+// A product that loads tokens.css can change a token for a region (a density or motion mode, a
+// theme); one that doesn't renders exactly the resolved values.
+/**
+ * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the
+ * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and
+ * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.
+ */
+function cssVariableName(path) {
+  return "--".concat(__spreadArray(['co'], path, true).join('-').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
+}
+/** Breakpoints stay values: a CSS variable can't be used in a media query */
+var keepsValue = function keepsValue(path) {
+  return path[1] === 'breakpoint';
+};
+/**
+ * A copy of a token tree with the same shape, where every value reads its CSS variable and falls
+ * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.
+ */
+function withCssVariables(tree, path) {
+  if (path === void 0) {
+    path = [];
+  }
+  return Object.fromEntries(Object.entries(tree).map(function (_a) {
+    var key = _a[0],
+      value = _a[1];
+    var at = __spreadArray(__spreadArray([], path, true), [key], false);
+    if (typeof value !== 'string') return [key, withCssVariables(value, at)];
+    return [key, keepsValue(at) ? value : "var(".concat(cssVariableName(at), ", ").concat(value, ")")];
+  }));
+}
+
+/**
+ * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,
+ * with every value a CSS variable that falls back to the resolved value, so a region can change a
+ * token through tokens.css. Breakpoints stay values.
+ *
+ * Use the resolved values from `tokens.json` instead where a value is read as data rather than
+ * CSS, such as a duration parsed for a timer.
+ *
+ * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;
+ * the browser specs check the variables.
+ */
+var tokens = withCssVariables(tokensJson);
+
 // Destructure tokens
-var semantic$j = tokensJson.semantic;
-var initials = tokensJson.component.avatar.initials;
-var color$b = semantic$j.color,
-  size$2 = semantic$j.size,
-  border$b = semantic$j.border;
-var radius$5 = border$b.radius;
+var semantic$l = tokens.semantic;
+var initials = tokens.component.avatar.initials;
+var color$b = semantic$l.color,
+  size$3 = semantic$l.size;
+var radius$6 = semantic$l.radius;
 var AvatarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -118,25 +162,25 @@ var AvatarContainer = styled.div.withConfig({
   componentId: "sc-ezn4ax-0"
 })(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
   var $size = _a.$size;
-  return size$2.avatar[$size];
+  return size$3.avatar[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return size$2.avatar[$size];
-}, radius$5.circle, color$b.background.surface);
+  return size$3.avatar[$size];
+}, radius$6.full, color$b.fill.muted);
 var AvatarImage = styled.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$5.circle);
+})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$6.full);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"
+})(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
 ])), initials.fontFamily, initials.fontWeight, function (_a) {
   var $size = _a.$size;
@@ -195,16 +239,16 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$M, templateObject_2$y, templateObject_3$v;
+var templateObject_1$M, templateObject_2$y, templateObject_3$w;
 
 // Breakpoints from the semantic tokens (decision 0014)
 var breakpoints$1 = {
-  xs: tokensJson.semantic.breakpoint.xs,
-  sm: tokensJson.semantic.breakpoint.sm,
-  md: tokensJson.semantic.breakpoint.md,
-  lg: tokensJson.semantic.breakpoint.lg,
-  xl: tokensJson.semantic.breakpoint.xl,
-  '2xl': tokensJson.semantic.breakpoint['2xl']
+  xs: tokens.semantic.breakpoint.xs,
+  sm: tokens.semantic.breakpoint.sm,
+  md: tokens.semantic.breakpoint.md,
+  lg: tokens.semantic.breakpoint.lg,
+  xl: tokens.semantic.breakpoint.xl,
+  '2xl': tokens.semantic.breakpoint['2xl']
 };
 // Media query helpers
 var media$1 = {
@@ -215,6 +259,16 @@ var media$1 = {
   xl: "@media (min-width: ".concat(breakpoints$1.xl, ")"),
   '2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
 };
+// Windows Contrast Themes and other forced-colours modes (decision 0038). The browser swaps in
+// the user's system colours, drops background colours and box-shadows, and keeps borders and
+// outlines. Inside this query, give a control that shows its edge with a fill alone a border,
+// and draw selected and checked states with system colours: ButtonText for control edges,
+// Highlight and HighlightText for selected and checked, GrayText for disabled, CanvasText for
+// content. Use forced-color-adjust: none only on a fill that carries state.
+var forcedColors = '@media (forced-colors: active)';
+/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The
+ * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */
+var forcedColorsEdge = "".concat(forcedColors, " {\n  border: ").concat(tokens.semantic.border.width.thin, " solid currentColor;\n}");
 // 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)';
@@ -226,25 +280,124 @@ var fadeOut$1 = keyframes(templateObject_1$L || (templateObject_1$L = __makeTemp
 // so it isn't restarted, and the fade runs on top of it. A fade is already the
 // reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
 // still catches clicks (so they can't reach the page behind it) and the panel is inert.
+// Exits accelerate: things leaving speed up as they go (decision 0037).
 ])));
 // 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.
+// Exits accelerate: things leaving speed up as they go (decision 0037).
 var exitAnimation = css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
 // Content for screen readers only. The 1px size and -1px margin are part of the standard
 // visually-hidden technique, not design values, so they aren't tokens.
-])), fadeOut$1, tokensJson.semantic.motion.duration.fast, tokensJson.semantic.motion.easing.easeOut);
+])), fadeOut$1, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.accelerate);
 // Content for screen readers only. The 1px size and -1px margin are part of the standard
 // visually-hidden technique, not design values, so they aren't tokens.
-var visuallyHidden = css(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"])));
-var templateObject_1$L, templateObject_2$x, templateObject_3$u;
+var visuallyHidden = css(templateObject_3$v || (templateObject_3$v = __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"
+// One interaction pattern for rows and items: list items, menu and listbox options, sidebars
+// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the
+// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected
+// rows leave their text colour to the component, so a destructive row can stay red.
+])));
+// One interaction pattern for rows and items: list items, menu and listbox options, sidebars
+// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the
+// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected
+// rows leave their text colour to the component, so a destructive row can stay red.
+var _a$b = tokens.semantic.color,
+  rowFill = _a$b.fill,
+  rowText = _a$b.text;
+var rowStates = {
+  unselected: {
+    rest: {
+      background: 'transparent'
+    },
+    hover: {
+      background: rowFill.muted
+    },
+    pressed: {
+      background: rowFill["default"]
+    }
+  },
+  selected: {
+    rest: {
+      background: rowFill['accent-muted'],
+      text: rowText.accent
+    },
+    hover: {
+      background: rowFill['accent-muted-hover'],
+      text: rowText['accent-hover']
+    },
+    pressed: {
+      background: rowFill['accent-muted-pressed'],
+      text: rowText['accent-pressed']
+    }
+  }
+};
+var rowDeclarations = function rowDeclarations(_a, textSelector) {
+  var background = _a.background,
+    text = _a.text;
+  if (!text) return "background-color: ".concat(background, ";");
+  return textSelector ? "background-color: ".concat(background, ";\n  ").concat(textSelector, " { color: ").concat(text, "; }") : "background-color: ".concat(background, ";\n  color: ").concat(text, ";");
+};
+/**
+ * The background (and, when selected, text) of an interactive row in every state.
+ * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under
+ *   aria-activedescendant. It shows the hover state.
+ * - `disabled`: shows the resting state, with no hover or press.
+ * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example
+ *   text set by Typography. Pass it without `&`.
+ */
+var interactiveRow = function interactiveRow(_a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.selected,
+    selected = _c === void 0 ? false : _c,
+    _d = _b.focused,
+    focused = _d === void 0 ? false : _d,
+    _e = _b.disabled,
+    disabled = _e === void 0 ? false : _e,
+    textSelector = _b.textSelector;
+  var states = selected ? rowStates.selected : rowStates.unselected;
+  if (disabled) return "".concat(rowDeclarations(states.rest, textSelector), "\n").concat(rowForcedColors({
+    selected: selected,
+    focused: focused,
+    disabled: disabled,
+    textSelector: textSelector
+  }));
+  return "\n  ".concat(rowDeclarations(focused ? states.hover : states.rest, textSelector), "\n\n  &:hover {\n    ").concat(rowDeclarations(states.hover, textSelector), "\n  }\n\n  &:active {\n    ").concat(rowDeclarations(states.pressed, textSelector), "\n  }\n\n  ").concat(rowForcedColors({
+    selected: selected,
+    focused: focused,
+    disabled: disabled,
+    textSelector: textSelector
+  }), "\n");
+};
+// Rows in forced colours (decision 0038): fills are dropped, so a selected row takes the system
+// selection colours, and a hovered or keyboard-active row is outlined in Highlight.
+var rowForcedColors = function rowForcedColors(_a) {
+  var selected = _a.selected,
+    focused = _a.focused,
+    disabled = _a.disabled,
+    textSelector = _a.textSelector;
+  var text = function text(color) {
+    return textSelector ? "color: ".concat(color, ";\n    ").concat(textSelector, " { color: ").concat(color, "; }") : "color: ".concat(color, ";");
+  };
+  var hover = "outline: ".concat(tokens.semantic.border.width.thin, " solid Highlight;\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.width.thin, ");");
+  // A row that doesn't respond (disabled, or not interactive at all) keeps its selection but has
+  // no hover outline. Disabled text is the component's to colour: callers also pass this for
+  // static rows, which must stay CanvasText.
+  // A selected row keeps forced-color-adjust: auto: the browser keeps system colours an author
+  // sets, so the row stays Highlight with HighlightText. Its descendants' own colours would be
+  // forced to CanvasText, so they inherit HighlightText, and anything drawn with a fill inside
+  // (a chip or tag as the row's badge) drops it and keeps its edge. The doubled class outranks
+  // the descendants' own rules.
+  return "".concat(forcedColors, " {\n    ").concat(selected ? "background-color: Highlight;\n    ".concat(text('HighlightText'), "\n    && * {\n      color: inherit;\n      background-color: transparent;\n    }") : '', "\n    ").concat(!disabled && focused ? hover : '', "\n    ").concat(disabled ? '' : "&:hover {\n      ".concat(hover, "\n    }"), "\n  }");
+};
+var templateObject_1$L, templateObject_2$x, templateObject_3$v;
 
-var _a$b = tokensJson.semantic,
-  typography$2 = _a$b.typography,
-  color$a = _a$b.color,
-  letterSpacing = _a$b.letterSpacing;
+var _a$a = tokens.semantic,
+  typography$2 = _a$a.typography,
+  color$a = _a$a.color,
+  letterSpacing = _a$a.letterSpacing;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
     display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
@@ -259,9 +412,9 @@ var getTypographyStyles = function getTypographyStyles(variant) {
     small: "font: ".concat(typography$2.small, ";"),
     overline: "font: ".concat(typography$2.overline, ";"),
     caption: "font: ".concat(typography$2.caption, "; text-transform: uppercase;"),
-    button1: "font: ".concat(typography$2.button1, ";"),
-    button2: "font: ".concat(typography$2.button2, ";"),
-    button3: "font: ".concat(typography$2.button3, ";"),
+    button1: "font: ".concat(tokens.component.button.sizes.large.font, ";"),
+    button2: "font: ".concat(tokens.component.button.sizes.medium.font, ";"),
+    button3: "font: ".concat(tokens.component.button.sizes.small.font, ";"),
     label: "font: ".concat(typography$2.label, ";")
   };
   return styles[variant] || styles.body;
@@ -270,11 +423,11 @@ var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
     "default": color$a.text["default"],
     emphasis: color$a.text.emphasis,
-    subdued: color$a.text.subdued,
+    subdued: color$a.text.muted,
     inverse: color$a.text.inverse,
     disabled: color$a.text.disabled,
-    interactive: color$a.text.interactive,
-    error: color$a.text.error,
+    interactive: color$a.text.accent,
+    error: color$a.text.danger,
     success: color$a.text.success,
     warning: color$a.text.warning
   };
@@ -371,14 +524,13 @@ var Typography = function Typography(_a) {
 };
 var templateObject_1$K;
 
-var semantic$i = tokensJson.semantic;
-var color$9 = semantic$i.color,
-  border$a = semantic$i.border;
-var radius$4 = border$a.radius;
-var _a$a = tokensJson.component.badge,
-  dot = _a$a.dot,
-  count = _a$a.count,
-  ring = _a$a.ring;
+var semantic$k = tokens.semantic;
+var color$9 = semantic$k.color;
+var radius$5 = semantic$k.radius;
+var _a$9 = tokens.component.badge,
+  dot = _a$9.dot,
+  count = _a$9.count,
+  ring = _a$9.ring;
 var scaleIn$2 = keyframes(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = styled.span.withConfig({
   displayName: "Badge__BadgeWrapper",
@@ -390,28 +542,30 @@ var BadgeIndicator = styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n  \n  ", "\n"])), function (props) {
+})(templateObject_3$u || (templateObject_3$u = __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  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\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  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? dot.size : count.minWidth;
 }, function (props) {
   return props.$isDot ? dot.size : count.height;
 }, function (props) {
-  return props.$isDot ? '0' : "0 ".concat(semantic$i.spacing.component.xs);
-}, radius$4.circle, count.lineHeight, ring.width, color$9.background["default"], scaleIn$2, semantic$i.motion.duration.normal, semantic$i.motion.easing.easeOut, reducedMotion, function (props) {
+  return props.$isDot ? '0' : "0 ".concat(semantic$k.space.inset.xs);
+}, radius$5.full, count.lineHeight, ring.width, semantic$k.surface.base, scaleIn$2, semantic$k.motion.duration.moderate, semantic$k.motion.easing.decelerate, reducedMotion, function (props) {
+  return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic$k.border.width.thin, " solid currentColor; }");
+}, function (props) {
   switch (props.$variant) {
     case 'accent':
     case 'primary':
       // Deprecated alias for 'accent', removed in 3.0 (#169)
-      return "\n          background-color: ".concat(color$9.background.interactive, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.fill.accent, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color$9.background.error, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.fill.danger, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color$9.background.warning, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.fill.warning, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color$9.background.success, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.fill.success, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
     default:
-      return "\n          background-color: ".concat(color$9.background.emphasis, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$9.fill.emphasis, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
   }
 });
 var ScreenReaderOnly$1 = styled.span.withConfig({
@@ -455,7 +609,123 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$J, templateObject_2$w, templateObject_3$t, templateObject_4$n;
+var templateObject_1$J, templateObject_2$w, templateObject_3$u, templateObject_4$n;
+
+// Props whose values are token keys keep their published vocabulary in 2.x (P7), but read the
+// semantic grammar's names (decision 0031, #189). Each map covers every key the prop type allows,
+// so TypeScript fails here if a key is added without a mapping.
+var semantic$j = tokens.semantic;
+var color$8 = semantic$j.color,
+  space$e = semantic$j.space,
+  radius$4 = semantic$j.radius,
+  surface = semantic$j.surface;
+/** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
+var spaceByLayoutKey = {
+  none: space$e[0],
+  xs: space$e[100],
+  sm: space$e[200],
+  md: space$e[300],
+  lg: space$e[400],
+  xl: space$e[500],
+  '2xl': space$e[600],
+  '3xl': space$e[700],
+  '4xl': space$e[800],
+  '5xl': space$e[900],
+  '6xl': space$e[1000],
+  '7xl': space$e[1200],
+  '8xl': space$e[1400],
+  '9xl': space$e[1600],
+  '10xl': space$e[2000],
+  '11xl': space$e[2400],
+  // A keyword, not a step: it stays until the keyword question is settled (0031)
+  auto: semantic$j.spacing.layout.auto
+};
+/** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
+var radiusByKey = {
+  none: radius$4.none,
+  xs: radius$4.xs,
+  sm: radius$4.sm,
+  md: radius$4.md,
+  lg: radius$4.lg,
+  xl: radius$4.xl,
+  '2xl': radius$4['2xl'],
+  '3xl': radius$4['3xl'],
+  circle: radius$4.full
+};
+/** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
+var backgroundByKey = {
+  "default": surface.base,
+  page: surface.base,
+  subtle: surface.raised,
+  overlay: surface.scrim,
+  emphasis: color$8.fill.emphasis,
+  'emphasis-hover': color$8.fill['emphasis-hover'],
+  'emphasis-active': color$8.fill['emphasis-pressed'],
+  surface: color$8.fill.muted,
+  inverse: color$8.fill.inverse,
+  interactive: color$8.fill.accent,
+  'interactive-hover': color$8.fill['accent-hover'],
+  'interactive-active': color$8.fill['accent-pressed'],
+  'interactive-subtle': color$8.fill['accent-muted'],
+  'interactive-subtle-hover': color$8.fill['accent-muted-hover'],
+  'interactive-subtle-active': color$8.fill['accent-muted-pressed'],
+  error: color$8.fill.danger,
+  'error-hover': color$8.fill['danger-hover'],
+  'error-active': color$8.fill['danger-pressed'],
+  'error-subtle': color$8.fill['danger-muted'],
+  success: color$8.fill.success,
+  'success-subtle': color$8.fill['success-muted'],
+  warning: color$8.fill.warning,
+  'warning-subtle': color$8.fill['warning-muted'],
+  disabled: color$8.fill.disabled,
+  neutral: color$8.fill["default"],
+  'neutral-hover': color$8.fill['default-hover'],
+  'neutral-active': color$8.fill['default-pressed'],
+  transparent: color$8.fill.none,
+  'hover-overlay': color$8.fill['none-hover'],
+  'active-overlay': color$8.fill['none-pressed'],
+  'inverse-overlay': color$8.fill['inverse-none-hover'],
+  // Moved to the component tier (decision 0031 §6)
+  progressTrack: tokens.component.track.background
+};
+/** Box's `color` prop: text colours, old and new keys. */
+var textColorByKey = {
+  "default": color$8.text["default"],
+  emphasis: color$8.text.emphasis,
+  inverse: color$8.text.inverse,
+  disabled: color$8.text.disabled,
+  success: color$8.text.success,
+  warning: color$8.text.warning,
+  muted: color$8.text.muted,
+  accent: color$8.text.accent,
+  'accent-hover': color$8.text['accent-hover'],
+  'accent-pressed': color$8.text['accent-pressed'],
+  danger: color$8.text.danger,
+  subdued: color$8.text.muted,
+  interactive: color$8.text.accent,
+  'interactive-hover': color$8.text['accent-hover'],
+  'interactive-active': color$8.text['accent-pressed'],
+  error: color$8.text.danger
+};
+/** Box's border props: border colours, old and new keys. */
+var borderColorByKey = {
+  "default": color$8.border["default"],
+  success: color$8.border.success,
+  warning: color$8.border.warning,
+  none: color$8.border.none,
+  emphasis: color$8.border.emphasis,
+  input: color$8.border.input,
+  'input-hover': color$8.border['input-hover'],
+  focus: color$8.border.focus,
+  accent: color$8.border.accent,
+  danger: color$8.border.danger,
+  subtle: color$8.border.emphasis,
+  control: color$8.border.input,
+  // `strong` split by use (0031); as a generic firm outline it is the hovered-input border
+  strong: color$8.border['input-hover'],
+  interactive: color$8.border.accent,
+  error: color$8.border.danger
+};
 
 var StyledBox = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -463,48 +733,48 @@ var StyledBox = styled.div.withConfig({
   },
   displayName: "Box__StyledBox",
   componentId: "sc-aj0jhd-0"
-})(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
+})(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Elevation (shadow)\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
 // Transform component that maps clean props to $-prefixed props for styled-components
 ])), function (props) {
   return props.$display && css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
   return props.$flexDirection && css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
   return props.$alignItems && css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
-  return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensJson.semantic.spacing.layout[props.$gap]);
+  return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), spaceByLayoutKey[props.$gap]);
 }, function (props) {
-  return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensJson.semantic.spacing.layout[props.$m]);
+  return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), spaceByLayoutKey[props.$m]);
 }, function (props) {
-  return props.$mt && css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensJson.semantic.spacing.layout[props.$mt]);
+  return props.$mt && css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), spaceByLayoutKey[props.$mt]);
 }, function (props) {
-  return props.$mr && css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensJson.semantic.spacing.layout[props.$mr]);
+  return props.$mr && css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), spaceByLayoutKey[props.$mr]);
 }, function (props) {
-  return props.$mb && css(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$mb]);
+  return props.$mb && css(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), spaceByLayoutKey[props.$mb]);
 }, function (props) {
-  return props.$ml && css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$ml]);
+  return props.$ml && css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), spaceByLayoutKey[props.$ml]);
 }, function (props) {
-  return props.$mx && css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$mx], tokensJson.semantic.spacing.layout[props.$mx]);
+  return props.$mx && css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), spaceByLayoutKey[props.$mx], spaceByLayoutKey[props.$mx]);
 }, function (props) {
-  return props.$my && css(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$my], tokensJson.semantic.spacing.layout[props.$my]);
+  return props.$my && css(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), spaceByLayoutKey[props.$my], spaceByLayoutKey[props.$my]);
 }, function (props) {
-  return props.$p && css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensJson.semantic.spacing.layout[props.$p]);
+  return props.$p && css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), spaceByLayoutKey[props.$p]);
 }, function (props) {
-  return props.$pt && css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensJson.semantic.spacing.layout[props.$pt]);
+  return props.$pt && css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), spaceByLayoutKey[props.$pt]);
 }, function (props) {
-  return props.$pr && css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensJson.semantic.spacing.layout[props.$pr]);
+  return props.$pr && css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), spaceByLayoutKey[props.$pr]);
 }, function (props) {
-  return props.$pb && css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$pb]);
+  return props.$pb && css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), spaceByLayoutKey[props.$pb]);
 }, function (props) {
-  return props.$pl && css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$pl]);
+  return props.$pl && css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), spaceByLayoutKey[props.$pl]);
 }, function (props) {
-  return props.$px && css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$px], tokensJson.semantic.spacing.layout[props.$px]);
+  return props.$px && css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), spaceByLayoutKey[props.$px], spaceByLayoutKey[props.$px]);
 }, function (props) {
-  return props.$py && css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$py], tokensJson.semantic.spacing.layout[props.$py]);
+  return props.$py && css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), spaceByLayoutKey[props.$py], spaceByLayoutKey[props.$py]);
 }, function (props) {
   return props.$width && css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
 }, function (props) {
@@ -528,35 +798,35 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$left && css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
 }, function (props) {
-  return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensJson.semantic.border.radius[props.$borderRadius]);
+  return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), radiusByKey[props.$borderRadius]);
 }, function (props) {
-  return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$border]);
+  return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$border]);
 }, function (props) {
-  return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$borderTop]);
+  return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderTop]);
 }, function (props) {
-  return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$borderRight]);
+  return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderRight]);
 }, function (props) {
-  return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$borderBottom]);
+  return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderBottom]);
 }, function (props) {
-  return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$borderLeft]);
+  return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderLeft]);
 }, function (props) {
-  return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensJson.semantic.color.background[props.$bg]);
+  return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundByKey[props.$bg]);
 }, function (props) {
-  return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensJson.semantic.color.text[props.$color]);
+  return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), textColorByKey[props.$color]);
 }, function (props) {
-  return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensJson.semantic.elevation[props.$shadow]);
+  return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokens.semantic.elevation[props.$shadow]);
 }, function (props) {
   return props.$cursor && css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["cursor: ", ";"], ["cursor: ", ";"])), props.$cursor);
 }, function (props) {
   return props.$transition && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
 }, function (props) {
-  return (props.$hoverShadow || props.$hoverTransform) && 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: ", ";\n      outline-offset: ", ";\n    }\n  "], ["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: ", ";\n      outline-offset: ", ";\n    }\n  "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensJson.semantic.border.focus, tokensJson.semantic.border.focusOffset);
+  return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    /* Pressed settles back: the shadow drops to raised and any lift returns (issue 185). Pressing a\n       control inside the card (an action button) presses that control, not the card. */\n    &:active {\n      transform: translateY(0);\n    }\n\n    ", "\n    \n    &:focus-visible {\n      outline: ", ";\n      outline-offset: ", ";\n    }\n\n    /* Reduced motion keeps the state change and drops the movement (decision 0015) */\n    ", "\n  "], ["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    /* Pressed settles back: the shadow drops to raised and any lift returns (issue 185). Pressing a\n       control inside the card (an action button) presses that control, not the card. */\n    &:active {\n      transform: translateY(0);\n    }\n\n    ", "\n    \n    &:focus-visible {\n      outline: ", ";\n      outline-offset: ", ";\n    }\n\n    /* Reduced motion keeps the state change and drops the movement (decision 0015) */\n    ", "\n  "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokens.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), props.$hoverShadow && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      &:active:not(:has(:is(button, a, [role=\"button\"]):active)) {\n        box-shadow: ", ";\n      }\n    "], ["\n      &:active:not(:has(:is(button, a, [role=\"button\"]):active)) {\n        box-shadow: ", ";\n      }\n    "])), tokens.semantic.elevation.raised), tokens.semantic.border.focus, tokens.semantic.border.focusOffset, props.$hoverTransform && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      ", " {\n        &:hover {\n          transform: none;\n        }\n      }\n    "], ["\n      ", " {\n        &:hover {\n          transform: none;\n        }\n      }\n    "])), reducedMotion));
 }, function (props) {
-  return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
+  return props.$overflow && css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
 }, function (props) {
-  return props.$overflowX && css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["overflow-x: ", ";"], ["overflow-x: ", ";"])), props.$overflowX);
+  return props.$overflowX && css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["overflow-x: ", ";"], ["overflow-x: ", ";"])), props.$overflowX);
 }, function (props) {
-  return props.$overflowY && css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["overflow-y: ", ";"], ["overflow-y: ", ";"])), props.$overflowY);
+  return props.$overflowY && css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["overflow-y: ", ";"], ["overflow-y: ", ";"])), props.$overflowY);
 });
 // Transform component that maps clean props to $-prefixed props for styled-components
 var BoxTransform = function BoxTransform(props) {
@@ -690,7 +960,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$I, templateObject_2$v, templateObject_3$s, templateObject_4$m, templateObject_5$h, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
+var templateObject_1$I, templateObject_2$v, templateObject_3$t, templateObject_4$m, templateObject_5$i, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51;
 
 var IconStyled = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -700,35 +970,35 @@ var IconStyled = styled.span.withConfig({
   componentId: "sc-1105czq-0"
 })(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
-  return tokensJson.semantic.size.icon[$size];
+  return tokens.semantic.size.icon[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return tokensJson.semantic.size.icon[$size];
+  return tokens.semantic.size.icon[$size];
 }, function (_a) {
   var $iconColor = _a.$iconColor;
   switch ($iconColor) {
     case 'default':
-      return tokensJson.semantic.color.icon["default"];
+      return tokens.semantic.color.icon["default"];
     case 'emphasis':
-      return tokensJson.semantic.color.icon.emphasis;
+      return tokens.semantic.color.icon.emphasis;
     case 'subdued':
-      return tokensJson.semantic.color.icon.subdued;
+      return tokens.semantic.color.icon.muted;
     case 'disabled':
-      return tokensJson.semantic.color.icon.disabled;
+      return tokens.semantic.color.icon.disabled;
     case 'inverse':
-      return tokensJson.semantic.color.icon.inverse;
+      return tokens.semantic.color.icon.inverse;
     case 'interactive':
-      return tokensJson.semantic.color.icon.interactive;
+      return tokens.semantic.color.icon.accent;
     case 'error':
-      return tokensJson.semantic.color.icon.error;
+      return tokens.semantic.color.icon.danger;
     case 'success':
-      return tokensJson.semantic.color.icon.success;
+      return tokens.semantic.color.icon.success;
     case 'warning':
-      return tokensJson.semantic.color.icon.warning;
+      return tokens.semantic.color.icon.warning;
     case 'inherit':
       return 'currentColor';
     default:
-      return tokensJson.semantic.color.icon["default"];
+      return tokens.semantic.color.icon["default"];
   }
 });
 var Icon = function Icon(_a) {
@@ -777,12 +1047,15 @@ var Icon = function Icon(_a) {
 };
 var templateObject_1$H;
 
-var button$1 = tokensJson.component.button,
-  semantic$h = tokensJson.semantic;
-// Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
-var spacing$a = semantic$h.spacing.component;
+var button$1 = tokens.component.button,
+  semantic$i = tokens.semantic;
+// Height comes from size.control as a minimum and the content is centred, so there is no
+// vertical padding (decision 0034). Horizontal padding comes from the semantic spacing scale:
+// no component spacing tokens (decision 0022)
+var inset = semantic$i.space.inset;
+var control$1 = semantic$i.size.control;
 // Base styles shared between button and link
-var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokensJson.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$h.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(semantic$h.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$i.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(semantic$i.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
@@ -840,18 +1113,17 @@ var getVariantStyles$1 = function getVariantStyles(_a) {
   var config = variantConfig[$variant];
   return "\n    background-color: ".concat(config.bg, ";\n    color: ").concat(config.text, ";\n    \n    &:hover:not(:disabled) {\n      background-color: ").concat(config.hoverBg, ";\n    }\n\n    &:active:not(:disabled) {\n      background-color: ").concat(config.activeBg, ";\n    }\n\n    &:disabled {\n      background-color: ").concat(config.disabledBg, ";\n      color: ").concat(config.disabledText, ";\n    }\n  ");
 };
-// Dynamic size styles using component tokens
-var getSizeStyles$1 = function getSizeStyles(_a) {
+// Dynamic size styles: font from component tokens, height from size.control (decision 0034)
+var getSizeStyles = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
-      return "\n        font: ".concat(button$1.sizes.small.font, ";\n        padding: ").concat(spacing$a.sm, " ").concat(spacing$a.md, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.small.font, ";\n        min-height: ").concat(control$1.sm, ";\n        padding: 0 ").concat(inset.md, ";\n      ");
     case 'medium':
-      return "\n        font: ".concat(button$1.sizes.medium.font, ";\n        padding: ").concat(spacing$a.sm, " ").concat(spacing$a.lg, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.medium.font, ";\n        min-height: ").concat(control$1.md, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
     case 'large':
-      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        padding: ").concat(spacing$a.md, " ").concat(spacing$a.lg, ";\n      ");
     default:
-      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        padding: ").concat(spacing$a.md, " ").concat(spacing$a.lg, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        min-height: ").concat(control$1.lg, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
   }
 };
 var StyledButton = styled.button.withConfig({
@@ -860,7 +1132,7 @@ var StyledButton = styled.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
+})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -869,7 +1141,7 @@ var StyledLink = styled.a.withConfig({
   componentId: "sc-1eiuum9-1"
 })(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
 // Helper function to get icon size based on button size
-])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
+])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles);
 // Helper function to get icon size based on button size
 var getIconSize = function getIconSize(buttonSize) {
   switch (buttonSize) {
@@ -972,15 +1244,13 @@ var Button = function Button(_a) {
 };
 var templateObject_1$G, templateObject_2$u;
 
-var semantic$g = tokensJson.semantic;
-var color$8 = semantic$g.color,
-  border$9 = semantic$g.border,
-  spacing$9 = semantic$g.spacing;
-var label$2 = tokensJson.component.badge.label;
-var category = color$8.category;
-var radius$3 = border$9.radius;
-var layout$4 = spacing$9.layout;
-var labelHeight$1 = semantic$g.size.label;
+var semantic$h = tokens.semantic;
+var color$7 = semantic$h.color;
+var label$2 = tokens.component.badge.label;
+var category = color$7.category;
+var radius$3 = semantic$h.radius;
+var space$d = semantic$h.space;
+var labelHeight$1 = semantic$h.size.label;
 // Text on white or the -subtle fill (outlined and minimal), at least 4.5:1 (#115)
 var categoryText = {
   blue: category['blue-text'],
@@ -1001,16 +1271,16 @@ var StyledCategoryLabel = styled.span.withConfig({
 })(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"
 // The visible content, hidden from assistive technology when an aria-label replaces it.
 // display: contents keeps the root's flex layout and gap.
-])), radius$3.circle, semantic$g.border.width.thin, function (_a) {
+])), radius$3.full, semantic$h.border.width.thin, function (_a) {
   var $size = _a.$size;
   return labelHeight$1[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'medium' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
+  return $size === 'medium' ? "".concat(space$d[100], " ").concat(space$d[200]) : "".concat(space$d[200], " ").concat(space$d[300]);
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'medium' ? label$2.typography.small : label$2.typography.medium;
-}, label$2.fontWeight, layout$4.xs, function (_a) {
+}, label$2.fontWeight, space$d[100], function (_a) {
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
@@ -1020,12 +1290,12 @@ var StyledCategoryLabel = styled.span.withConfig({
     return 'transparent';
   }
   // minimal
-  return category["".concat($color, "-subtle")];
+  return category["".concat($color, "-muted")];
 }, function (_a) {
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
-    return color$8.text.inverse;
+    return color$7.text.inverse;
   }
   return categoryText[$color];
 }, function (_a) {
@@ -1045,7 +1315,7 @@ var VisibleContent$1 = styled.span.withConfig({
 var HiddenLabel = styled.span.withConfig({
   displayName: "CategoryLabel__HiddenLabel",
   componentId: "sc-1jx7bjo-2"
-})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
@@ -1112,7 +1382,7 @@ var CategoryLabel = function CategoryLabel(_a) {
   });
 };
 CategoryLabel.displayName = 'CategoryLabel';
-var templateObject_1$F, templateObject_2$t, templateObject_3$r;
+var templateObject_1$F, templateObject_2$t, templateObject_3$s;
 
 // CategoryBadge sizes on the decision 0018 scale
 var toLabelSize = {
@@ -1136,7 +1406,8 @@ var CategoryBadge = function CategoryBadge(_a) {
 };
 CategoryBadge.displayName = 'CategoryBadge';
 
-var chip$1 = tokensJson.component.chip;
+var chip$1 = tokens.component.chip,
+  semantic$g = tokens.semantic;
 // Helper function to get variant styles matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
   var $variant = _a.$variant,
@@ -1152,11 +1423,11 @@ var getVariantStyles = function getVariantStyles(_a) {
       var disabled = chip$1.variants.subtle.disabled;
       return "\n        background-color: ".concat(disabled.backgroundColor, ";\n        color: ").concat(disabled.textColor, ";\n      ");
     }
-    var _b = tokensJson.semantic.color,
-      background = _b.background,
+    var _b = tokens.semantic.color,
+      fill = _b.fill,
       text = _b.text;
     var interactiveStates = $clickable;
-    return "\n      background-color: ".concat(background['interactive-subtle'], ";\n      color: ").concat(text.interactive, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? background['interactive-subtle-hover'] : background['interactive-subtle'], ";\n        color: ").concat(interactiveStates ? text['interactive-hover'] : text.interactive, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? background['interactive-subtle-active'] : background['interactive-subtle'], ";\n        color: ").concat(interactiveStates ? text['interactive-active'] : text.interactive, ";\n      }\n    ");
+    return "\n      background-color: ".concat(fill['accent-muted'], ";\n      color: ").concat(text.accent, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text['accent-hover'] : text.accent, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text['accent-pressed'] : text.accent, ";\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ").concat(forcedColors, " {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    ");
   }
   switch ($variant) {
     case 'emphasis':
@@ -1170,20 +1441,13 @@ var getVariantStyles = function getVariantStyles(_a) {
       return "\n        background-color: ".concat(chip$1["default"].backgroundColor, ";\n        color: ").concat(chip$1["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip$1.disabled.backgroundColor : $clickable ? chip$1.hover.backgroundColor : chip$1["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip$1.disabled.backgroundColor : $clickable ? chip$1.active.backgroundColor : chip$1["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip$1.disabled.backgroundColor, ";\n          color: ").concat(chip$1.disabled.textColor, ";\n        ") : '', "\n      ");
   }
 };
-// Helper function to get size styles matching Button's approach
-var getSizeStyles = function getSizeStyles(_a) {
-  var $size = _a.$size;
-  switch ($size) {
-    case 'small':
-      return "\n        font: ".concat(chip$1.sizes.small.font, ";\n        // Off-grid 2px: keeps the deprecated token until #129 (decision 0022)\n        padding: ").concat(chip$1.sizes.small.padding, ";\n      ");
-    case 'medium':
-    default:
-      return "\n        font: ".concat(chip$1.sizes.medium.font, ";\n        padding: ").concat(chip$1.sizes.medium.padding, ";\n      ");
-  }
-};
+// Chips have one size: 24px from the label scale as a minimum, with the content centred
+// and no vertical padding (decisions 0034 and 0035). Horizontal padding comes from the
+// semantic spacing scale (decision 0022).
+var sizeStyles = "\n  font: ".concat(chip$1.sizes.medium.font, ";\n  min-height: ").concat(semantic$g.size.label.medium, ";\n  padding: 0 ").concat(semantic$g.space.inset.sm, ";\n");
 
-var chip = tokensJson.component.chip,
-  semantic$f = tokensJson.semantic;
+var chip = tokens.component.chip,
+  semantic$f = tokens.semantic;
 // Base styled component using direct prop interpolation like Button
 var StyledChip = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1191,18 +1455,20 @@ var StyledChip = styled.span.withConfig({
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"
+})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"
 // Icon container for selected indicator or leading icons
-])), chip["default"].borderRadius, semantic$f.motion.hover, function (props) {
+])), chip["default"].borderRadius, semantic$f.motion.transition.feedback, function (props) {
   return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
-}, getVariantStyles, getSizeStyles, chip.focus.outline, semantic$f.border.focusOffset);
+}, forcedColorsEdge, function (props) {
+  return props.$disabled ? "".concat(forcedColors, " { color: GrayText; }") : '';
+}, getVariantStyles, sizeStyles, chip.focus.outline, semantic$f.border.focusOffset);
 // Icon container for selected indicator or leading icons
 var IconContainer = styled.span.withConfig({
   displayName: "ChipBase__IconContainer",
   componentId: "sc-moa6zc-1"
 })(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
 // Close button for dismissible chips
-])), tokensJson.semantic.spacing.layout.xs);
+])), tokens.semantic.space[100]);
 // Close button for dismissible chips
 var CloseButton = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1210,10 +1476,10 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokensJson.semantic.spacing.layout.sm, chip.closeButton.size, chip.closeButton.size, tokensJson.semantic.spacing.layout.none, tokensJson.semantic.border.radius.xs, function (props) {
+})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip.closeButton.size, chip.closeButton.size, tokens.semantic.space[0], semantic$f.size.label.medium, semantic$f.size.label.medium, tokens.semantic.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic$f.motion.hover, tokensJson.semantic.color.background['hover-overlay'], tokensJson.semantic.color.background['active-overlay'], tokensJson.semantic.color.text.disabled, chip.focus.outline, semantic$f.border.focusOffset, chip["default"].borderRadius);
-var templateObject_1$E, templateObject_2$s, templateObject_3$q;
+}, semantic$f.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip.focus.outline, semantic$f.border.focusOffset, chip["default"].borderRadius);
+var templateObject_1$E, templateObject_2$s, templateObject_3$r;
 
 /**
  * Chip - a static, non-interactive label for tags, categories and metadata.
@@ -1229,12 +1495,12 @@ var templateObject_1$E, templateObject_2$s, templateObject_3$q;
 var Chip = function Chip(_a) {
   var children = _a.children,
     _b = _a.variant,
-    variant = _b === void 0 ? 'default' : _b,
-    _c = _a.size,
-    size = _c === void 0 ? 'medium' : _c,
-    onClick = _a.onClick,
-    _d = _a.disabled,
-    disabled = _d === void 0 ? false : _d,
+    variant = _b === void 0 ? 'default' : _b;
+    // Deprecated and ignored: chips have one size (decision 0035)
+    _a.size;
+    var onClick = _a.onClick,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"],
     ariaDescribedBy = _a["aria-describedby"],
@@ -1259,7 +1525,6 @@ var Chip = function Chip(_a) {
   };
   return jsx(StyledChip, __assign({
     "$variant": normalizedVariant,
-    "$size": size,
     "$disabled": disabled || undefined,
     "$clickable": isClickable || undefined,
     onClick: isClickable ? handleClick : undefined,
@@ -1305,11 +1570,11 @@ var InputChip = function InputChip(_a) {
   var children = _a.children,
     _b = _a.selected,
     selected = _b === void 0 ? false : _b,
-    onDismiss = _a.onDismiss,
-    _c = _a.size,
-    size = _c === void 0 ? 'medium' : _c,
-    _d = _a.disabled,
-    disabled = _d === void 0 ? false : _d,
+    onDismiss = _a.onDismiss;
+    // Deprecated and ignored: chips have one size (decision 0035)
+    _a.size;
+    var _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"],
     ariaDescribedBy = _a["aria-describedby"],
@@ -1339,7 +1604,6 @@ var InputChip = function InputChip(_a) {
   var closeButtonLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove filter';
   return jsxs(StyledChip, __assign({
     "$variant": "subtle",
-    "$size": size,
     "$disabled": disabled || undefined,
     "$clickable": false,
     "$selected": selected,
@@ -1405,11 +1669,11 @@ var FilterChip = InputChip;
 var BooleanChip = function BooleanChip(_a) {
   var children = _a.children,
     selected = _a.selected,
-    onClick = _a.onClick,
-    _b = _a.size,
-    size = _b === void 0 ? 'medium' : _b,
-    _c = _a.disabled,
-    disabled = _c === void 0 ? false : _c,
+    onClick = _a.onClick;
+    // Deprecated and ignored: chips have one size (decision 0035)
+    _a.size;
+    var _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"],
     ariaDescribedBy = _a["aria-describedby"],
@@ -1428,7 +1692,6 @@ var BooleanChip = function BooleanChip(_a) {
   };
   return jsxs(StyledChip, __assign({
     "$variant": "subtle",
-    "$size": size,
     "$disabled": disabled || undefined,
     "$clickable": !disabled,
     "$selected": selected,
@@ -1453,11 +1716,11 @@ var BooleanChip = function BooleanChip(_a) {
   }));
 };
 
-var spacing$8 = tokensJson.semantic.spacing;
+var space$c = tokens.semantic.space;
 var StyledContainer$2 = styled.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), spacing$8.layout['2xl'], spacing$8.layout['2xl'], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
+})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), space$c[600], space$c[600], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
 var Container$1 = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
@@ -1470,19 +1733,27 @@ var templateObject_1$D;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"])), media$1.sm);
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"
+// A clickable image answers input on the image itself (decision 0029, #185): it fades on hover and
+// one step further while pressed, and draws the system focus ring around the image, following its
+// rounded corners. Fading isn't movement, so it stays under reduced motion.
+])), media$1.sm);
+// A clickable image answers input on the image itself (decision 0029, #185): it fades on hover and
+// one step further while pressed, and draws the system focus ring around the image, following its
+// rounded corners. Fading isn't movement, so it stays under reduced motion.
+var clickableImage = css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
 var ImageLink = styled.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
-})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut);
+})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), clickableImage);
 var ImageButton = styled.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut);
+})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  width: 100%;\n  ", "\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  width: 100%;\n  ", "\n"])), clickableImage);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
-})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), tokensJson.semantic.border.radius.sm);
+})(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), tokens.semantic.radius.sm);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -1512,18 +1783,18 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$C, templateObject_2$r, templateObject_3$p, templateObject_4$l;
+var templateObject_1$C, templateObject_2$r, templateObject_3$q, templateObject_4$l, templateObject_5$h;
 
-var _a$9 = tokensJson.semantic,
-  typography$1 = _a$9.typography,
-  color$7 = _a$9.color;
+var _a$8 = tokens.semantic,
+  typography$1 = _a$8.typography,
+  color$6 = _a$8.color;
 var TimeStyled = styled.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
 })(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * Formats a date with smart relative/absolute logic
- */])), typography$1.label, color$7.text.subdued);
+ */])), typography$1.label, color$6.text.muted);
 /**
  * Formats a date with smart relative/absolute logic
  */
@@ -1568,18 +1839,25 @@ var DateFormatter = function DateFormatter(_a) {
 };
 var templateObject_1$B;
 
-var _a$8 = tokensJson.semantic,
-  motion$5 = _a$8.motion,
-  border$8 = _a$8.border,
-  spacing$7 = _a$8.spacing,
-  _b$1 = tokensJson.component,
-  iconButton = _b$1.iconButton,
-  button = _b$1.button;
+var _a$7 = tokens.semantic,
+  motion$5 = _a$7.motion,
+  border$3 = _a$7.border,
+  space$b = _a$7.space,
+  size$2 = _a$7.size,
+  _b$2 = tokens.component,
+  iconButton = _b$2.iconButton,
+  button = _b$2.button;
+// Height and width come from size.control as a minimum (decision 0034)
+var control = {
+  small: size$2.control.sm,
+  medium: size$2.control.md,
+  large: size$2.control.lg
+};
 // Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
 var padding = {
-  small: spacing$7.component.xs,
-  medium: spacing$7.component.sm,
-  large: spacing$7.component.md
+  small: space$b.inset.xs,
+  medium: space$b.inset.sm,
+  large: space$b.inset.md
 };
 // Colours and motion come from Button's tokens, so IconButton's variants look and behave exactly like
 // Button's in every state (#130). Only the size and the icon differ
@@ -1620,18 +1898,18 @@ var IconButtonStyled = styled.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), function (_a) {
+})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
   var $variant = _a.$variant;
   return colours($variant).bg;
 }, function (_a) {
   var $variant = _a.$variant;
   return colours($variant).text;
-}, iconButton.primary.borderRadius, motion$5.hover, function (_a) {
+}, iconButton.primary.borderRadius, motion$5.transition.feedback, function (_a) {
   var $size = _a.$size;
-  return iconButton.sizes[$size].minWidth;
+  return control[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return iconButton.sizes[$size].minHeight;
+  return control[$size];
 }, function (_a) {
   var $size = _a.$size;
   return padding[$size];
@@ -1641,13 +1919,13 @@ var IconButtonStyled = styled.button.withConfig({
 }, function (_a) {
   var $variant = _a.$variant;
   return colours($variant).activeBg;
-}, iconButton.focus.outline, border$8.focusOffset, function (_a) {
+}, iconButton.focus.outline, border$3.focusOffset, function (_a) {
   var $variant = _a.$variant;
   return colours($variant).disabledBg;
 }, function (_a) {
   var $variant = _a.$variant;
   return colours($variant).disabledText;
-});
+}, forcedColorsEdge);
 var IconButton = function IconButton(_a) {
   var variant = _a.variant,
     _b = _a.size,
@@ -1713,7 +1991,7 @@ var StyledWrapper = styled.span.withConfig({
   return $align;
 }, function (_a) {
   var $weight = _a.$weight;
-  return tokensJson.semantic.fontWeight[$weight];
+  return tokens.semantic.fontWeight[$weight];
 });
 // Map size to Typography variant
 var sizeToTypographyVariant = {
@@ -1816,22 +2094,21 @@ var MoneyDisplay = function MoneyDisplay(_a) {
 var templateObject_1$z;
 
 // Destructure tokens
-var semantic$e = tokensJson.semantic;
-var _a$7 = __assign(__assign({}, semantic$e), {
-    component: tokensJson.component
+var semantic$e = tokens.semantic;
+var _a$6 = __assign(__assign({}, semantic$e), {
+    component: tokens.component
   }),
-  color$6 = _a$7.color,
-  border$7 = _a$7.border,
-  motion$4 = _a$7.motion,
-  component$2 = _a$7.component;
-var radius$2 = border$7.radius;
+  color$5 = _a$6.color,
+  motion$4 = _a$6.motion,
+  radius$2 = _a$6.radius,
+  component$2 = _a$6.component;
 var ProgressBarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
-})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), color$6.background.progressTrack, radius$2.xs, function (props) {
+})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"])), tokens.component.track.background, radius$2.xs, forcedColorsEdge, function (props) {
   return props.$variant === 'horizontal' && css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
 }, function (props) {
   return props.$variant === 'vertical' && css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
@@ -1842,19 +2119,19 @@ var ProgressBarFill = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarFill",
   componentId: "sc-1nco33q-1"
-})(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) {
+})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  height: 100%;\n  transition: width ", " ", ",\n              height ", " ", ",\n              background-color ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  /* The fill is the value, so it keeps a fill in forced colours, in the system selection colour (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: width ", " ", ",\n              height ", " ", ",\n              background-color ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  /* The fill is the value, so it keeps a fill in forced colours, in the system selection colour (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), motion$4.duration.moderate, motion$4.easing.standard, motion$4.duration.moderate, motion$4.easing.standard, motion$4.duration.moderate, motion$4.easing.standard, reducedMotion, forcedColors, function (props) {
   var backgroundColor;
   switch (props.$color) {
     case 'success':
-      backgroundColor = color$6.background.success;
+      backgroundColor = color$5.fill.success;
       break;
     case 'error':
-      backgroundColor = color$6.background.error;
+      backgroundColor = color$5.fill.danger;
       break;
     case 'default':
     default:
       // Near-black, like Slider's fill (decision 0029)
-      backgroundColor = color$6.background.emphasis;
+      backgroundColor = color$5.fill.emphasis;
       break;
   }
   return css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
@@ -1895,12 +2172,12 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$y, templateObject_2$q, templateObject_3$o, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
+var templateObject_1$y, templateObject_2$q, templateObject_3$p, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
 
 // Destructure tokens for cleaner access
-var separatorTokens = tokensJson.component.separator;
+var separatorTokens = tokens.component.separator;
 // Margins come from the semantic separator spacing: no component spacing tokens (decision 0022)
-var separatorSpacing = tokensJson.semantic.spacing.separator;
+var space$a = tokens.semantic.space;
 var StyledDivider = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1929,9 +2206,9 @@ var StyledDivider = styled.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: ".concat(tokensJson.semantic.border.width.thin, " solid;\n        border-top: none;\n      ");
+    return "\n        display: inline-block;\n        height: auto;\n        align-self: stretch;\n        border-left: ".concat(tokens.semantic.border.width.thin, " solid;\n        border-top: none;\n      ");
   }
-  return "border-top: ".concat(tokensJson.semantic.border.width.thin, " solid;");
+  return "border-top: ".concat(tokens.semantic.border.width.thin, " solid;");
 }, function (_a) {
   var _b = _a.$variant,
     $variant = _b === void 0 ? 'default' : _b,
@@ -1956,33 +2233,33 @@ var StyledDivider = styled.div.withConfig({
     $orientation = _d === void 0 ? 'horizontal' : _d;
   if ($variant === 'minimal' && $orientation === 'horizontal') {
     // Minimal variant always uses its predefined spacing for horizontal
-    return "margin: ".concat(separatorSpacing.md, " 0;");
+    return "margin: ".concat(space$a[600], " 0;");
   }
   if ($orientation === 'vertical') {
     // Vertical orientation uses horizontal margins (left/right)
     switch ($size) {
       case 'small':
-        return "margin: 0 ".concat(separatorSpacing.sm, ";");
+        return "margin: 0 ".concat(space$a[400], ";");
       case 'medium':
-        return "margin: 0 ".concat(separatorSpacing.md, ";");
+        return "margin: 0 ".concat(space$a[600], ";");
       case 'xlarge':
-        return "margin: 0 ".concat(separatorSpacing.xl, ";");
+        return "margin: 0 ".concat(space$a[1200], ";");
       case 'large':
       default:
-        return "margin: 0 ".concat(separatorSpacing.lg, ";");
+        return "margin: 0 ".concat(space$a[800], ";");
     }
   }
   // Horizontal orientation uses vertical margins (top/bottom)
   switch ($size) {
     case 'small':
-      return "margin: ".concat(separatorSpacing.sm, " 0;");
+      return "margin: ".concat(space$a[400], " 0;");
     case 'medium':
-      return "margin: ".concat(separatorSpacing.md, " 0;");
+      return "margin: ".concat(space$a[600], " 0;");
     case 'xlarge':
-      return "margin: ".concat(separatorSpacing.xl, " 0;");
+      return "margin: ".concat(space$a[1200], " 0;");
     case 'large':
     default:
-      return "margin: ".concat(separatorSpacing.lg, " 0;");
+      return "margin: ".concat(space$a[800], " 0;");
   }
 });
 /**
@@ -2029,17 +2306,32 @@ var StyledStack = styled.div.withConfig({
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
 })(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
-// Helper function to convert gap prop to CSS value
+// Each gap name maps to the space step that replaced its old spacing.layout token (decision 0031),
+// so every gap keeps its value
 ])));
+// Each gap name maps to the space step that replaced its old spacing.layout token (decision 0031),
+// so every gap keeps its value
+var GAP_SPACE = {
+  none: '0',
+  xs: '100',
+  sm: '200',
+  md: '300',
+  lg: '400',
+  xl: '500',
+  '2xl': '600',
+  '3xl': '700',
+  '4xl': '800',
+  '5xl': '900',
+  '6xl': '1000'
+};
 // Helper function to convert gap prop to CSS value
 var getGapValue = function getGapValue(gap) {
-  // Get semantic layout spacing token
-  var semanticSpacing = tokensJson.semantic.spacing.layout;
-  if (gap in semanticSpacing) {
-    return semanticSpacing[gap];
+  var step = GAP_SPACE[gap];
+  if (step) {
+    return tokens.semantic.space[step];
   }
-  // Fallback to medium layout spacing if token not found
-  return tokensJson.semantic.spacing.layout.md;
+  // Fallback to medium spacing for an unknown gap (from untyped JavaScript)
+  return tokens.semantic.space[300];
 };
 var Stack = function Stack(_a) {
   var children = _a.children,
@@ -2070,52 +2362,53 @@ var Stack = function Stack(_a) {
 var templateObject_1$w;
 
 // Destructure tokens for cleaner access
-var statusColors = tokensJson.semantic.color.status;
-var spacing$6 = tokensJson.semantic.spacing.layout;
-var radius$1 = tokensJson.semantic.border.radius;
-var _a$6 = tokensJson.semantic.motion,
-  transition = _a$6.transition,
-  duration$3 = _a$6.duration,
-  easing$3 = _a$6.easing;
-var labelHeight = tokensJson.semantic.size.label;
-var label$1 = tokensJson.component.badge.label;
+var statusColors = tokens.component.status;
+var _a$5 = tokens.semantic,
+  space$9 = _a$5.space,
+  radius$1 = _a$5.radius;
+var _b$1 = tokens.semantic.motion,
+  transition = _b$1.transition,
+  duration$3 = _b$1.duration,
+  easing$3 = _b$1.easing;
+var labelHeight = tokens.semantic.size.label;
+var label$1 = tokens.component.badge.label;
 var scaleIn$1 = keyframes(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
   var configs = {
     pending: {
-      color: statusColors.pending,
-      bgColor: statusColors['pending-bg'],
+      color: statusColors.pending.text,
+      bgColor: statusColors.pending.background,
       icon: 'refresh',
       // Fallback until 'clock' icon is added
       label: 'Pending'
     },
     completed: {
-      color: statusColors.completed,
-      bgColor: statusColors['completed-bg'],
+      color: statusColors.completed.text,
+      bgColor: statusColors.completed.background,
       icon: 'check',
       label: 'Completed'
     },
     failed: {
-      color: statusColors.failed,
-      bgColor: statusColors['failed-bg'],
+      color: statusColors.failed.text,
+      bgColor: statusColors.failed.background,
       icon: 'close',
       label: 'Failed'
     },
     cancelled: {
-      color: statusColors.cancelled,
-      bgColor: statusColors['cancelled-bg'],
+      color: statusColors.cancelled.text,
+      bgColor: statusColors.cancelled.background,
       icon: 'cancel',
       label: 'Cancelled'
     },
     processing: {
-      color: statusColors.processing,
-      bgColor: statusColors['processing-bg'],
+      color: statusColors.processing.text,
+      bgColor: statusColors.processing.background,
       icon: 'refresh',
       label: 'Processing'
     },
     scheduled: {
-      color: statusColors.scheduled,
-      bgColor: statusColors['scheduled-bg'],
+      color: statusColors.scheduled.text,
+      bgColor: statusColors.scheduled.background,
       icon: 'bell',
       // Fallback until 'calendar' icon is added
       label: 'Scheduled'
@@ -2127,16 +2420,16 @@ var getStatusConfig = function getStatusConfig(status) {
 var sizeConfig$1 = {
   small: {
     height: labelHeight.small,
-    padding: "".concat(spacing$6.xs, " ").concat(spacing$6.sm),
+    padding: "".concat(space$9[100], " ").concat(space$9[200]),
     font: label$1.typography.small,
-    gap: spacing$6.xs,
+    gap: space$9[100],
     iconSize: 'xs'
   },
   medium: {
     height: labelHeight.medium,
-    padding: "".concat(spacing$6.xs, " ").concat(spacing$6.sm),
+    padding: "".concat(space$9[100], " ").concat(space$9[200]),
     font: label$1.typography.medium,
-    gap: spacing$6.xs,
+    gap: space$9[100],
     iconSize: 'sm'
   }
 };
@@ -2146,7 +2439,7 @@ var StyledStatusLabel = styled.span.withConfig({
   },
   displayName: "StatusLabelBase__StyledStatusLabel",
   componentId: "sc-1ye9xz5-0"
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* transition.fast covers all properties, so a size change would animate the label's dimensions */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* transition.fast covers all properties, so a size change would animate the label's dimensions */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.circle, scaleIn$1, duration$3.normal, easing$3.easeOut, transition.fast, reducedMotion, function (_a) {
+})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.full, scaleIn$1, duration$3.moderate, easing$3.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
   var $size = _a.$size;
   var size = sizeConfig$1[$size];
   return "\n      height: ".concat(size.height, ";\n      padding: ").concat(size.padding, ";\n      font: ").concat(size.font, ";\n      font-weight: ").concat(label$1.fontWeight, ";\n      gap: ").concat(size.gap, ";\n    ");
@@ -2158,7 +2451,7 @@ var StyledStatusLabel = styled.span.withConfig({
 var ScreenReaderOnly = styled.span.withConfig({
   displayName: "StatusLabelBase__ScreenReaderOnly",
   componentId: "sc-1ye9xz5-1"
-})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
 // The visible content, hidden from assistive technology when an aria-label replaces it.
 // display: contents keeps the root's flex layout and gap.
 ])), visuallyHidden);
@@ -2216,7 +2509,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     })]
   });
 };
-var templateObject_1$v, templateObject_2$p, templateObject_3$n, templateObject_4$j;
+var templateObject_1$v, templateObject_2$p, templateObject_3$o, templateObject_4$j;
 
 /**
  * StatusBadge displays a transaction or task status.
@@ -2250,14 +2543,12 @@ var StatusLabel = function StatusLabel(props) {
 };
 StatusLabel.displayName = 'StatusLabel';
 
-var semantic$d = tokensJson.semantic;
-var color$5 = semantic$d.color,
-  spacing$5 = semantic$d.spacing,
-  border$6 = semantic$d.border,
+var semantic$d = tokens.semantic;
+var color$4 = semantic$d.color,
   size$1 = semantic$d.size;
-var label = tokensJson.component.badge.label;
-var layout$3 = spacing$5.layout;
-var radius = border$6.radius;
+var label = tokens.component.badge.label;
+var space$8 = semantic$d.space;
+var radius = semantic$d.radius;
 var StyledTag = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2275,38 +2566,38 @@ var StyledTag = styled.span.withConfig({
   return size$1.label[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? "0 ".concat(layout$3.sm) : "".concat(layout$3.xs, " ").concat(layout$3.sm);
+  return $size === 'small' ? "0 ".concat(space$8[200]) : "".concat(space$8[100], " ").concat(space$8[200]);
 }, label.typography.small, label.fontWeight, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$5.background['interactive-subtle'];
+      return color$4.fill['accent-muted'];
     case 'success':
-      return color$5.background['success-subtle'];
+      return color$4.fill['success-muted'];
     case 'warning':
-      return color$5.background['warning-subtle'];
+      return color$4.fill['warning-muted'];
     case 'error':
-      return color$5.background['error-subtle'];
+      return color$4.fill['danger-muted'];
     case 'emphasis':
-      return color$5.background.emphasis;
+      return color$4.fill.emphasis;
     default:
-      return color$5.background.surface;
+      return color$4.fill.muted;
   }
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$5.text.interactive;
+      return color$4.text.accent;
     case 'success':
-      return color$5.text.success;
+      return color$4.text.success;
     case 'warning':
-      return color$5.text.warning;
+      return color$4.text.warning;
     case 'error':
-      return color$5.text.error;
+      return color$4.text.danger;
     case 'emphasis':
-      return color$5.text.inverse;
+      return color$4.text.inverse;
     default:
-      return color$5.text["default"];
+      return color$4.text["default"];
   }
 }, function (_a) {
   var $variant = _a.$variant,
@@ -2314,17 +2605,17 @@ var StyledTag = styled.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'interactive':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.interactive);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.accent);
     case 'success':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.success);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.success);
     case 'warning':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.warning);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.warning);
     case 'error':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.error);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border.danger);
     case 'emphasis':
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.background.emphasis);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.fill.emphasis);
     default:
-      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border["default"]);
+      return "".concat(semantic$d.border.width.thin, " solid ").concat(color$4.border["default"]);
   }
 });
 /**
@@ -2359,21 +2650,20 @@ var Tag = function Tag(_a) {
 var templateObject_1$u;
 
 // Destructure tokens for cleaner access
-var semantic$c = tokensJson.semantic;
-var spacing$4 = semantic$c.spacing;
-var layout$2 = spacing$4.layout;
+var semantic$c = tokens.semantic;
+var space$7 = semantic$c.space;
 var StyledBalanceSection = styled.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
   componentId: "sc-1erp7zn-0"
-})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), layout$2.lg);
+})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), space$7[400]);
 var StyledTrendSection = styled.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
   componentId: "sc-1erp7zn-1"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), layout$2.xs);
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), space$7[100]);
 styled.div.withConfig({
   displayName: "AccountCard__StyledActions",
   componentId: "sc-1erp7zn-2"
-})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), layout$2.sm);
+})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), space$7[200]);
 var StyledStackWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
   componentId: "sc-1erp7zn-3"
@@ -2381,9 +2671,9 @@ var StyledStackWrapper = styled.div.withConfig({
 var StyledHeaderWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledHeaderWrapper",
   componentId: "sc-1erp7zn-4"
-})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"
+})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: calc(-1 * ", ");\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: calc(-1 * ", ");\n  }\n"
 // Map trend direction to icon and color
-])), tokensJson.component.accountCard.header.minHeight, layout$2.none, layout$2.xs);
+])), tokens.component.accountCard.header.minHeight, space$7[0], space$7[100]);
 // Map trend direction to icon and color
 var trendToIcon = {
   up: 'arrowUp',
@@ -2432,12 +2722,12 @@ var AccountCard = function AccountCard(_a) {
     }
   };
   return jsx(Box, {
-    minWidth: tokensJson.component.accountCard.minWidth,
+    minWidth: tokens.component.accountCard.minWidth,
     p: "lg",
     bg: "subtle",
     border: "default",
     borderRadius: "xl",
-    transition: "box-shadow ".concat(semantic$c.motion.duration.normal, " ").concat(semantic$c.motion.easing.easeOut),
+    transition: "box-shadow ".concat(semantic$c.motion.duration.moderate, " ").concat(semantic$c.motion.easing.decelerate),
     cursor: isClickable ? 'pointer' : 'default',
     hoverShadow: isClickable ? 'floating' : undefined,
     onClick: handleClick,
@@ -2532,7 +2822,7 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$t, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$f;
+var templateObject_1$t, templateObject_2$o, templateObject_3$n, templateObject_4$i, templateObject_5$f;
 
 /**
  * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
@@ -2540,10 +2830,10 @@ var templateObject_1$t, templateObject_2$o, templateObject_3$m, templateObject_4
  */
 var ListSpacingContext = /*#__PURE__*/createContext('comfortable');
 
-var semantic$b = tokensJson.semantic;
-var _a$5 = semantic$b.motion,
-  duration$2 = _a$5.duration,
-  easing$2 = _a$5.easing;
+var semantic$b = tokens.semantic;
+var _a$4 = semantic$b.motion,
+  duration$2 = _a$4.duration,
+  easing$2 = _a$4.easing;
 var StyledListItem = styled.li.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2559,7 +2849,7 @@ var StyledListItem = styled.li.withConfig({
 }, function (_a) {
   var $destructive = _a.$destructive,
     $disabled = _a.$disabled;
-  return $destructive && !$disabled && "\n    color: ".concat(semantic$b.color.text.error, ";\n  ");
+  return $destructive && !$disabled && "\n    color: ".concat(semantic$b.color.text.danger, ";\n  ");
 });
 var StyledItemContent = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2567,13 +2857,10 @@ var StyledItemContent = styled.div.withConfig({
   },
   displayName: "ListItem__StyledItemContent",
   componentId: "sc-1wzzt21-1"
-})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color ", " ", ";\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\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: ", ";\n    outline-offset: ", ";\n  }\n"])), semantic$b.spacing.layout.md, function (_a) {
+})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), semantic$b.space[300], function (_a) {
   var $spacing = _a.$spacing;
-  return $spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md) : "".concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.lg);
-}, semantic$b.border.radius.sm, function (_a) {
-  var $selected = _a.$selected;
-  return $selected ? semantic$b.color.background['interactive-subtle'] : 'transparent';
-}, duration$2.fast, easing$2.easeOut, function (_a) {
+  return $spacing === 'compact' ? "".concat(semantic$b.space[200], " ").concat(semantic$b.space[300]) : "".concat(semantic$b.space[300], " ").concat(semantic$b.space[400]);
+}, semantic$b.radius.sm, duration$2.fast, easing$2.decelerate, duration$2.fast, easing$2.decelerate, function (_a) {
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled;
   if ($disabled) return 'not-allowed';
@@ -2583,27 +2870,31 @@ var StyledItemContent = styled.div.withConfig({
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled,
     $selected = _a.$selected;
-  return !$disabled && $interactive && "\n    &:hover {\n      background-color: ".concat($selected ? tokensJson.component.button.variants.secondary.backgroundColor : tokensJson.component.button.variants.secondary.backgroundColor, ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensJson.component.button.variants.naked.backgroundColor, ";\n    }\n  ");
+  return interactiveRow({
+    selected: $selected,
+    disabled: $disabled || !$interactive,
+    textSelector: "".concat(StyledTextContent, " > :first-child")
+  });
 }, semantic$b.border.focus, semantic$b.border.focusOffset);
 var StyledIconContainer$1 = styled.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
   componentId: "sc-1wzzt21-2"
-})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg);
+})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg);
 var StyledTextContent = styled.div.withConfig({
   displayName: "ListItem__StyledTextContent",
   componentId: "sc-1wzzt21-3"
-})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$b.spacing.layout.xs);
+})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic$b.space[100]);
 var StyledRightContent = styled.div.withConfig({
   displayName: "ListItem__StyledRightContent",
   componentId: "sc-1wzzt21-4"
-})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$b.spacing.layout.sm);
+})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$b.space[200]);
 var StyledChevronIcon = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledChevronIcon",
   componentId: "sc-1wzzt21-5"
-})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg, semantic$b.color.icon.subdued, duration$2.fast, easing$2.easeOut, function (_a) {
+})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg, semantic$b.color.icon.muted, duration$2.fast, easing$2.decelerate, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '180deg' : '0deg';
 }, reducedMotion);
@@ -2613,7 +2904,7 @@ var StyledExpandedContent = styled.div.withConfig({
   },
   displayName: "ListItem__StyledExpandedContent",
   componentId: "sc-1wzzt21-6"
-})(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) {
+})(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.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '1000px' : '0';
 }, function (_a) {
@@ -2622,10 +2913,10 @@ var StyledExpandedContent = styled.div.withConfig({
 }, 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) {
+}, reducedMotion, duration$2.moderate, easing$2.decelerate, duration$2.moderate, easing$2.decelerate, function (_a) {
   var $expanded = _a.$expanded,
     $spacing = _a.$spacing;
-  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.sm, " ").concat(tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.lg, " ").concat(semantic$b.spacing.layout.md, " ").concat(tokensJson.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic$b.color.background['subtle'], ";\n    border-radius: ").concat(semantic$b.border.radius.sm, ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$b.spacing.layout.md : semantic$b.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$b.spacing.layout.sm : semantic$b.spacing.layout.md, ";\n  ");
+  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$b.space[200], " ").concat(semantic$b.space[300], " ").concat(semantic$b.space[200], " ").concat(tokens.component.listItem.expandedIndent.compact) : "".concat(semantic$b.space[200], " ").concat(semantic$b.space[400], " ").concat(semantic$b.space[300], " ").concat(tokens.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic$b.surface.raised, ";\n    border-radius: ").concat(semantic$b.radius.sm, ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$b.space[300] : semantic$b.space[400], " ").concat($spacing === 'compact' ? semantic$b.space[200] : semantic$b.space[300], ";\n  ");
 });
 var ListItem = function ListItem(_a) {
   var primary = _a.primary,
@@ -2747,9 +3038,10 @@ var ListItem = function ListItem(_a) {
   );
 };
 ListItem.displayName = 'ListItem';
-var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
+var templateObject_1$s, templateObject_2$n, templateObject_3$m, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
 
-// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils.
+// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils. A timer
+// needs the resolved value, not the CSS variable (decision 0041).
 var EXIT_DURATION_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
 /**
  * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
@@ -2792,35 +3084,35 @@ function useInert(ref, isInert) {
   }, [ref, isInert]);
 }
 
-var _a$4 = tokensJson.semantic,
-  color$4 = _a$4.color,
-  border$5 = _a$4.border,
-  layout$1 = _a$4.spacing.layout,
-  motion$3 = _a$4.motion,
-  elevation$2 = _a$4.elevation;
+var _a$3 = tokens.semantic,
+  color$3 = _a$3.color,
+  border$2 = _a$3.border,
+  space$6 = _a$3.space,
+  motion$3 = _a$3.motion,
+  elevation$2 = _a$3.elevation;
 var slideUp = keyframes(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
 var fadeIn$2 = keyframes(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 var StyledOverlay$2 = styled.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
-})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), color$4.background.overlay, tokensJson.semantic.zIndex.modal, fadeIn$2, motion$3.duration.normal, motion$3.easing.easeOut, function (_a) {
+})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), tokens.semantic.surface.scrim, tokens.semantic.layer.modal, fadeIn$2, motion$3.duration.moderate, motion$3.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
 var StyledActionSheet = styled.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
-})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), color$4.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$2.overlay, tokensJson.semantic.zIndex.modal, slideUp, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
+})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.raised, tokens.semantic.radius.lg, tokens.semantic.radius.lg, elevation$2.overlay, tokens.semantic.layer.modal, slideUp, motion$3.duration.slow, motion$3.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
-}, reducedMotion, fadeIn$2, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
+}, reducedMotion, fadeIn$2, motion$3.duration.slow, motion$3.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
 var StyledHeader$2 = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeader",
   componentId: "sc-regbol-2"
-})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), 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"])), space$6[400], space$6[400], space$6[300], border$2["default"]);
 var StyledHeaderContent = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
@@ -2828,7 +3120,7 @@ var StyledHeaderContent = styled.div.withConfig({
 var StyledCloseButton = styled.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), layout$1.sm, color$4.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$4.icon["default"], color$4.background.surface, border$5.focus, border$5.focusOffset);
+})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space$6[200], color$3.icon.muted, tokens.semantic.radius.sm, motion$3.transition.feedback, space$6[200], color$3.icon["default"], color$3.fill.muted, border$2.focus, border$2.focusOffset);
 var StyledActionsList = styled.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
@@ -2865,7 +3157,7 @@ var StyledActionsList = styled.ul.withConfig({
  *   ]}
  * />
  * ```
- */])), layout$1.sm, layout$1.md);
+ */])), space$6[200], space$6[300]);
 /**
  * ActionSheet component for bottom sheet modals
  *
@@ -3055,7 +3347,7 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
+var templateObject_1$r, templateObject_2$m, templateObject_3$l, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
 
 function detectSpeechRecognitionConstructor(targetWindow) {
   if (!targetWindow) return null;
@@ -3155,8 +3447,8 @@ function agentInputStateTransition(currentState, event) {
   }
 }
 
-var semantic$a = tokensJson.semantic,
-  component$1 = tokensJson.component;
+var semantic$a = tokens.semantic,
+  component$1 = tokens.component;
 var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
 var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
 var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
@@ -3164,27 +3456,27 @@ var rotateRing = keyframes(templateObject_1$q || (templateObject_1$q = __makeTem
 var Container = styled.div.withConfig({
   displayName: "AgentInput__Container",
   componentId: "sc-fhl996-0"
-})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), semantic$a.spacing.layout.sm);
+})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), semantic$a.space[200]);
 var ControlsRow = styled.div.withConfig({
   displayName: "AgentInput__ControlsRow",
   componentId: "sc-fhl996-1"
-})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var InputShell = styled.div.withConfig({
   displayName: "AgentInput__InputShell",
   componentId: "sc-fhl996-2"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), semantic$a.spacing.layout.sm, semantic$a.spacing.layout.xs, semantic$a.spacing.layout.sm, semantic$a.spacing.layout.xs, semantic$a.spacing.component.lg, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.border.radius['3xl'], semantic$a.elevation.raised, semantic$a.motion.duration.normal, semantic$a.motion.easing.easeInOut, semantic$a.motion.duration.normal, semantic$a.motion.easing.easeInOut, component$1.input.focus.borderColor, component$1.input.focus.outline, semantic$a.border.focusOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
+})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), semantic$a.space[200], semantic$a.space[100], semantic$a.space[200], semantic$a.space[100], semantic$a.space.inset.lg, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.radius['3xl'], semantic$a.elevation.raised, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, semantic$a.motion.duration.moderate, semantic$a.motion.easing.standard, component$1.input.focus.borderColor, component$1.input.focus.outline, semantic$a.border.focusOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
 var Input = styled.input.withConfig({
   displayName: "AgentInput__Input",
   componentId: "sc-fhl996-3"
-})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$a.spacing.layout['7xl'], semantic$a.typography.body, semantic$a.color.text["default"], component$1.input.placeholder.textColor, semantic$a.color.text.disabled);
+})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$a.size.control.lg, semantic$a.typography.body, semantic$a.color.text["default"], component$1.input.placeholder.textColor, semantic$a.color.text.disabled);
 var InputActions = styled.div.withConfig({
   displayName: "AgentInput__InputActions",
   componentId: "sc-fhl996-4"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$a.spacing.layout.sm);
+})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic$a.space[200]);
 var CircularActionIconButton = styled(IconButton).withConfig({
   displayName: "AgentInput__CircularActionIconButton",
   componentId: "sc-fhl996-5"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$a.border.radius.circle);
+})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic$a.radius.full);
 var InputWrapper = styled.div.withConfig({
   displayName: "AgentInput__InputWrapper",
   componentId: "sc-fhl996-6"
@@ -3198,7 +3490,7 @@ var MicButtonWrapper = styled.div.withConfig({
 })(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"
 // Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
 // eslint-disable-next-line no-restricted-syntax
-])), semantic$a.border.radius.circle);
+])), semantic$a.radius.full);
 // Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
 // eslint-disable-next-line no-restricted-syntax
 var ringMask = 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)))"])));
@@ -3208,21 +3500,21 @@ var MicListeningRing = styled.span.withConfig({
   },
   displayName: "AgentInput__MicListeningRing",
   componentId: "sc-fhl996-8"
-})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), semantic$a.border.width.thick, semantic$a.spacing.layout.xs, semantic$a.border.focusOffset, semantic$a.border.radius.circle, semantic$a.color.background['interactive-subtle'], semantic$a.color.background.interactive, semantic$a.color.background['interactive-hover'], semantic$a.color.background.interactive, semantic$a.color.background['interactive-subtle'], ringMask, ringMask, function (_a) {
+})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), semantic$a.border.width.thick, semantic$a.space[100], semantic$a.border.focusOffset, semantic$a.radius.full, semantic$a.color.fill['accent-muted'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-hover'], semantic$a.color.fill.accent, semantic$a.color.fill['accent-muted'], ringMask, ringMask, function (_a) {
   var $reducedMotion = _a.$reducedMotion;
   return !$reducedMotion && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
 });
 var StatusRow = styled.div.withConfig({
   displayName: "AgentInput__StatusRow",
   componentId: "sc-fhl996-9"
-})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$a.spacing.layout.md, semantic$a.spacing.layout['2xl']);
+})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic$a.space[300], semantic$a.space[600]);
 var StatusText = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__StatusText",
   componentId: "sc-fhl996-10"
-})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$a.spacing.layout.xl);
+})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$a.space[500]);
 var StatusAnnouncement = styled.div.withConfig({
   displayName: "AgentInput__StatusAnnouncement",
   componentId: "sc-fhl996-11"
@@ -3230,17 +3522,17 @@ var StatusAnnouncement = styled.div.withConfig({
 var MeterContainer = styled.div.withConfig({
   displayName: "AgentInput__MeterContainer",
   componentId: "sc-fhl996-12"
-})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic$a.spacing.layout.xs, semantic$a.spacing.layout.lg);
+})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic$a.space[100], semantic$a.space[400]);
 var MeterBar = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MeterBar",
   componentId: "sc-fhl996-13"
-})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$a.spacing.layout.xs, semantic$a.border.radius.xs, semantic$a.color.background.interactive, function (_a) {
+})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic$a.space[100], semantic$a.radius.xs, semantic$a.color.fill.accent, function (_a) {
   var $height = _a.$height;
   return "".concat($height * 100, "%");
-}, semantic$a.motion.duration.fast, semantic$a.motion.easing.easeOut);
+}, semantic$a.motion.duration.fast, semantic$a.motion.easing.decelerate);
 var VisuallyHiddenLabel = styled.label.withConfig({
   displayName: "AgentInput__VisuallyHiddenLabel",
   componentId: "sc-fhl996-14"
@@ -3873,16 +4165,17 @@ var AgentInput = function AgentInput(_a) {
     })]
   });
 };
-var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
+var templateObject_1$q, templateObject_2$l, templateObject_3$k, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
 
-var semantic$9 = tokensJson.semantic;
-var alert = tokensJson.component.alert;
-var _a$3 = semantic$9.motion,
-  duration$1 = _a$3.duration,
-  easing$1 = _a$3.easing;
+var semantic$9 = tokens.semantic;
+var alert = tokens.component.alert;
+var _a$2 = semantic$9.motion,
+  duration$1 = _a$2.duration,
+  easing$1 = _a$2.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);
+// Each half takes duration.fast, so the whole exit stays within the 300ms maximum (P6). The timer
+// needs the resolved value, not the CSS variable (decision 0041).
+var FADE_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
 var EXIT_MS = FADE_MS * 2;
 // The --alert-exit-* properties are the alert's height and vertical padding, measured
 // when it's dismissed, so nothing moves until the fade has finished
@@ -3927,11 +4220,11 @@ var StyledAlert = styled.div.withConfig({
   componentId: "sc-18tq5d-0"
 })(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
+  return $inline ? semantic$9.space[200] : semantic$9.space[300];
 }, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
-}, semantic$9.border.radius.sm, semantic$9.border.width.thin, function (_a) {
+  return $inline ? semantic$9.space[200] : semantic$9.space[300];
+}, semantic$9.radius.sm, semantic$9.border.width.thin, function (_a) {
   var _b = _a.$variant,
     $variant = _b === void 0 ? 'info' : _b;
   return alert.severity[$variant].background;
@@ -3946,11 +4239,11 @@ var StyledAlert = styled.div.withConfig({
   return alert.appearance[$appearance].borderColor[$variant];
 }, semantic$9.breakpoint.md, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.lg;
+  return $inline ? semantic$9.space[200] : semantic$9.space[400];
 }, function (_a) {
   var $isExiting = _a.$isExiting,
     $reducedExit = _a.$reducedExit;
-  return $isExiting && css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
+  return $isExiting && css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.accelerate) : css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.accelerate));
 });
 var StyledIconContainer = styled.div.withConfig({
   displayName: "Alert__StyledIconContainer",
@@ -3959,7 +4252,7 @@ var StyledIconContainer = styled.div.withConfig({
 var StyledContent$1 = styled.div.withConfig({
   displayName: "Alert__StyledContent",
   componentId: "sc-18tq5d-2"
-})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$9.spacing.layout.xs);
+})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$9.space[100]);
 var StyledTitle = styled.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
@@ -3981,7 +4274,7 @@ var StyledActions = styled.div.withConfig({
 // message when there's no title (decision 0019). The slot is as tall as that line and the
 // button is centred in it, overflowing evenly into the padding, so it stays aligned at every
 // padding and line height. Being in the row, it also keeps text and actions from running under it.
-])), semantic$9.spacing.layout.sm, semantic$9.spacing.layout.md, semantic$9.spacing.layout.xs);
+])), semantic$9.space[200], semantic$9.space[300], semantic$9.space[100]);
 // The dismiss button's centre lines up with the first line of content: the title, or the
 // message when there's no title (decision 0019). The slot is as tall as that line and the
 // button is centred in it, overflowing evenly into the padding, so it stays aligned at every
@@ -4006,7 +4299,7 @@ var StyledDismissButton = styled(IconButton).withConfig({
   componentId: "sc-18tq5d-7"
 })(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
   var $inline = _a.$inline;
-  return $inline ? 0 : "calc((".concat(tokensJson.component.iconButton.sizes.small.minWidth, " - ").concat(semantic$9.size.icon.sm, ") / -2)");
+  return $inline ? 0 : "calc((".concat(semantic$9.size.control.sm, " - ").concat(semantic$9.size.icon.sm, ") / -2)");
 });
 var Alert = function Alert(_a) {
   var _b = _a.variant,
@@ -4142,12 +4435,11 @@ var Alert = function Alert(_a) {
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$e, templateObject_5$b, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2;
+var templateObject_1$p, templateObject_2$k, templateObject_3$j, templateObject_4$e, templateObject_5$b, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2;
 
-var semantic$8 = tokensJson.semantic;
-var color$3 = semantic$8.color,
+var semantic$8 = tokens.semantic;
+var color$2 = semantic$8.color,
   typography = semantic$8.typography,
-  spacing$3 = semantic$8.spacing,
   size = semantic$8.size;
 var variantIcons = {
   error: 'crossCircle',
@@ -4156,20 +4448,20 @@ var variantIcons = {
   success: 'checkRing'
 };
 var variantTextColors = {
-  error: color$3.text.error,
-  warning: color$3.text.warning,
-  info: color$3.text.interactive,
-  success: color$3.text.success
+  error: color$2.text.danger,
+  warning: color$2.text.warning,
+  info: color$2.text.accent,
+  success: color$2.text.success
 };
 var sizeConfig = {
   small: {
     font: typography.caption,
-    gap: spacing$3.layout.xs,
+    gap: semantic$8.space[100],
     icon: 'xs'
   },
   medium: {
     font: typography.small,
-    gap: spacing$3.layout.sm,
+    gap: semantic$8.space[200],
     icon: 'sm'
   }
 };
@@ -4205,7 +4497,7 @@ var StyledIconLine = styled.span.withConfig({
 var StyledMessage = styled.span.withConfig({
   displayName: "InlineAlert__StyledMessage",
   componentId: "sc-eervmb-2"
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  min-width: 0;\n"], ["\n  min-width: 0;\n"
+})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  min-width: 0;\n"], ["\n  min-width: 0;\n"
 /**
  * InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
  * below a field or in a table cell (decision 0019). A severity icon and text in the severity
@@ -4273,20 +4565,20 @@ var InlineAlert = function InlineAlert(_a) {
   });
 };
 InlineAlert.displayName = 'InlineAlert';
-var templateObject_1$o, templateObject_2$j, templateObject_3$h;
+var templateObject_1$o, templateObject_2$j, templateObject_3$i;
 
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), tokensJson.semantic.border["default"]);
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), tokens.semantic.border["default"]);
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.color.text.subdued, tokensJson.component.breadcrumbs.item.maxWidth, 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"])), tokens.semantic.space[200], tokens.semantic.space[200], tokens.semantic.color.text.muted, tokens.component.breadcrumbs.item.maxWidth, tokens.semantic.color.text["default"]);
 var BreadcrumbSeparator = styled.span.withConfig({
   displayName: "Breadcrumbs__BreadcrumbSeparator",
   componentId: "sc-7ouzg5-2"
-})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"])));
+})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"])));
 var isInternalUrl = function isInternalUrl(url) {
   return url.startsWith('/') && !url.startsWith('http');
 };
@@ -4334,12 +4626,14 @@ var Breadcrumbs = function Breadcrumbs(_a) {
     })
   });
 };
-var templateObject_1$n, templateObject_2$i, templateObject_3$g;
+var templateObject_1$n, templateObject_2$i, templateObject_3$h;
 
+// The whole card is one link (#185): hovering anywhere fades its image, pressing fades it one step
+// further, and keyboard focus draws the system focus ring around the card (decision 0029)
 var CardSmallStyled = styled.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: 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"])), tokensJson.semantic.border.radius.sm, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut, tokensJson.semantic.border.width.thick, tokensJson.semantic.color.border.strong);
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.radius.sm, tokens.semantic.radius.sm, tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
 var CardSmall = function CardSmall(_a) {
   var title = _a.title,
     picture = _a.picture,
@@ -4395,11 +4689,10 @@ var CardSmall = function CardSmall(_a) {
 };
 var templateObject_1$m;
 
-var border$4 = tokensJson.semantic.border;
 var CardLargeStyled = styled.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
   componentId: "sc-1rfgdzl-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  &: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"])), tokensJson.component.cardLarge.maxWidth, border$4.radius['2xl'], tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut);
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"], ["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"])), tokens.component.cardLarge.maxWidth, tokens.semantic.radius['2xl']);
 var CardLarge = function CardLarge(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -4483,29 +4776,37 @@ var StyledCheckbox = styled.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: ", ";\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"
+})(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: background-color ", " ", ",\n              border-color ", " ", ",\n              ", ";\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  /* Forced colours drop fills (decision 0038): a checked or indeterminate box takes the system\n     selection colour, or GrayText when disabled, and its mark the matching text colour. The\n     indeterminate dash is a fill, so it needs the same treatment. */\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: background-color ", " ", ",\n              border-color ", " ", ",\n              ", ";\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  /* Forced colours drop fills (decision 0038): a checked or indeterminate box takes the system\n     selection colour, or GrayText when disabled, and its mark the matching text colour. The\n     indeterminate dash is a fill, so it needs the same treatment. */\n  ", "\n"
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
- */])), tokensJson.component.checkbox.box.size, tokensJson.component.checkbox.box.size, tokensJson.component.checkbox.box.size, tokensJson.component.checkbox.box.size, tokensJson.component.input["default"].borderRadius, tokensJson.component.input["default"].borderWidth, function (props) {
-  return props.$checked || props.$indeterminate ? tokensJson.semantic.color.background.inverse : tokensJson.component.input["default"].backgroundColor;
+ */])), tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.input["default"].borderRadius, tokens.component.input["default"].borderWidth, function (props) {
+  return props.$checked || props.$indeterminate ? tokens.semantic.color.fill.inverse : tokens.component.input["default"].backgroundColor;
 }, function (props) {
-  if (props.$state === 'error') return tokensJson.component.input.error.borderColor;
-  if (props.$checked || props.$indeterminate) return tokensJson.semantic.color.border.strong;
-  return tokensJson.component.input["default"].borderColor;
+  if (props.$state === 'error') return tokens.component.input.error.borderColor;
+  // A checked box's border matches its fill, so the box reads as solid
+  if (props.$checked || props.$indeterminate) return tokens.semantic.color.fill.inverse;
+  return tokens.component.input["default"].borderColor;
 }, function (props) {
   return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
-}, tokensJson.semantic.motion.duration.fast, tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
-  return props.$state === 'error' ? tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensJson.semantic.color.border.strong : tokensJson.component.input.hover.borderColor;
-}, HiddenCheckboxInput, tokensJson.component.input.focus.outline, tokensJson.semantic.border.focusOffset, function (props) {
-  return props.$state === 'error' ? tokensJson.component.input.error.focus.borderColor : tokensJson.component.input.focus.borderColor;
+}, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.decelerate, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.decelerate, tokens.semantic.motion.transition.focus, HiddenCheckboxInput, function (props) {
+  return props.$state === 'error' ? tokens.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokens.semantic.color.fill.inverse : tokens.component.input.hover.borderColor;
+}, HiddenCheckboxInput, tokens.component.input.focus.outline, tokens.semantic.border.focusOffset, function (props) {
+  return props.$state === 'error' ? tokens.component.input.error.focus.borderColor : tokens.component.input.focus.borderColor;
 }, function (props) {
-  return props.$state === 'disabled' && "\n    background-color: ".concat(tokensJson.component.input.disabled.backgroundColor, ";\n    border-color: ").concat(tokensJson.component.input.disabled.borderColor, ";\n  ");
+  return props.$state === 'disabled' && "\n    background-color: ".concat(tokens.component.input.disabled.backgroundColor, ";\n    border-color: ").concat(tokens.component.input.disabled.borderColor, ";\n  ");
 }, function (props) {
   return props.$checked ? 'block' : 'none';
-}, tokensJson.semantic.color.text.inverse, function (props) {
+}, tokens.semantic.color.text.inverse, function (props) {
   return props.$indeterminate ? 'block' : 'none';
-}, tokensJson.semantic.color.text.inverse);
+}, tokens.semantic.color.text.inverse, function (props) {
+  var on = props.$checked || props.$indeterminate;
+  var disabled = props.$state === 'disabled';
+  if (!on) return disabled ? "".concat(forcedColors, " { border-color: GrayText; }") : '';
+  var fill = disabled ? 'GrayText' : 'Highlight';
+  var mark = disabled ? 'Canvas' : 'HighlightText';
+  return "".concat(forcedColors, " {\n      forced-color-adjust: none;\n      background-color: ").concat(fill, ";\n      border-color: ").concat(fill, ";\n      &::after { border-color: ").concat(mark, "; }\n      &::before { background-color: ").concat(mark, "; }\n    }");
+});
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
@@ -4516,12 +4817,12 @@ var StyledCheckboxContainer = styled.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: ", ";\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"
+})(templateObject_3$g || (templateObject_3$g = __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
- */])), tokensJson.semantic.spacing.layout.md, function (props) {
+ */])), tokens.semantic.space[300], function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, tokensJson.component.checkbox.row.minHeight, function (props) {
+}, tokens.component.checkbox.row.minHeight, function (props) {
   return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
 });
 /**
@@ -4533,15 +4834,15 @@ var StyledCheckboxLabel = styled.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckboxLabel",
   componentId: "sc-1ddpctx-3"
-})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokensJson.component.input["default"].font, function (props) {
-  return props.$disabled ? tokensJson.component.input.disabled.textColor : tokensJson.component.input["default"].textColor;
+})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokens.component.input["default"].font, function (props) {
+  return props.$disabled ? tokens.component.input.disabled.textColor : tokens.component.input["default"].textColor;
 });
-var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$d;
+var templateObject_1$k, templateObject_2$h, templateObject_3$g, templateObject_4$d;
 
 var StyledFieldContainer$3 = styled.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"])), tokensJson.semantic.spacing.layout.xs);
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokens.semantic.space[100]);
 var StyledHelperText$4 = styled.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
@@ -4567,9 +4868,9 @@ var StyledHelperText$4 = styled.span.withConfig({
  *   required
  * />
  * ```
- */])), tokensJson.component.field.helperText.typography, function (props) {
-  return props.$error ? tokensJson.component.field.helperText.colorError : tokensJson.component.field.helperText.color;
-}, tokensJson.semantic.spacing.layout['5xl']);
+ */])), tokens.component.field.helperText.typography, function (props) {
+  return props.$error ? tokens.component.field.helperText.colorError : tokens.component.field.helperText.color;
+}, tokens.semantic.space[900]);
 /**
  * Checkbox component for binary selection with WCAG 2.2 AA compliance
  *
@@ -4691,19 +4992,18 @@ var ChipGroup = function ChipGroup(_a) {
 };
 var templateObject_1$i;
 
-var _a$2 = tokensJson.semantic,
-  color$2 = _a$2.color,
-  border$3 = _a$2.border,
-  spacing$2 = _a$2.spacing,
-  motion$2 = _a$2.motion;
+var _a$1 = tokens.semantic,
+  color$1 = _a$1.color,
+  border$1 = _a$1.border,
+  motion$2 = _a$1.motion;
 var StyledCodeBlock = styled.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), color$2.background.subtle, border$3.subtle, tokensJson.semantic.border.radius.sm, spacing$2.layout.md, tokensJson.component.codeBlock.fontFamily, tokensJson.component.codeBlock.fontSize, tokensJson.component.codeBlock.lineHeight, 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  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border$1.emphasis, tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color$1.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
-}, spacing$2.layout.sm, motion$2.duration.slow, motion$2.easing.easeInOut, reducedMotion, function (_a) {
+}, tokens.semantic.space[200], motion$2.duration.slow, motion$2.easing.standard, reducedMotion, function (_a) {
   var $maxHeight = _a.$maxHeight,
     $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
@@ -4711,7 +5011,7 @@ var StyledCodeBlock = styled.pre.withConfig({
   // Use a large value when expanded to allow smooth transition
   // 10000px is effectively "no limit" for most code blocks
   return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
-}, border$3.focus, border$3.focusOffset);
+}, border$1.focus, border$1.focusOffset);
 var CodeBlockWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CodeBlockWrapper",
   componentId: "sc-1p1t0kp-1"
@@ -4719,13 +5019,13 @@ var CodeBlockWrapper = styled.div.withConfig({
 var CopyButtonWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CopyButtonWrapper",
   componentId: "sc-1p1t0kp-2"
-})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
+})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), tokens.semantic.space[400], tokens.semantic.space[200]);
 var ExpandButtonWrapper = styled.div.withConfig({
   displayName: "CodeBlock__ExpandButtonWrapper",
   componentId: "sc-1p1t0kp-3"
-})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"])), spacing$2.layout.sm, tokensJson.semantic.border.width.thin, tokensJson.semantic.border.width.thin, tokensJson.semantic.border.width.thin, tokensJson.semantic.border.width.thin, spacing$2.layout.sm, tokensJson.semantic.border.radius.sm, motion$2.duration.slow, motion$2.easing.easeInOut, motion$2.duration.slow, motion$2.easing.easeInOut, 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"])), tokens.semantic.space[200], tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.space[200], tokens.semantic.radius.sm, motion$2.duration.slow, motion$2.easing.standard, motion$2.duration.slow, motion$2.easing.standard, function (_a) {
   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  ";
+  return $hasGradient ? "\n    margin-top: calc(-1 * ".concat(tokens.semantic.space[800], ");\n    padding-top: ").concat(tokens.semantic.space[800], ";\n    background: linear-gradient(\n      to bottom,\n      transparent 0%,\n      ").concat(tokens.semantic.surface.raised, " 60%\n    );\n  ") : "\n    background: transparent;\n  ";
 });
 var CopyButton = function CopyButton(_a) {
   var text = _a.text,
@@ -4909,23 +5209,23 @@ var CodeBlock = function CodeBlock(_a) {
     })]
   });
 };
-var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c, templateObject_5$a;
+var templateObject_1$h, templateObject_2$f, templateObject_3$f, templateObject_4$c, templateObject_5$a;
 
 var StyledHeader$1 = styled.div.withConfig({
   displayName: "DateGroup__StyledHeader",
   componentId: "sc-9nfm1f-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"])), tokensJson.semantic.spacing.layout.md, tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.color.background["default"], tokensJson.semantic.border.width.thin, 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"])), tokens.semantic.space[300], tokens.semantic.space[200], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], function (_a) {
   var $sticky = _a.$sticky;
-  return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: ".concat(tokensJson.semantic.zIndex.sticky, ";\n    box-shadow: ").concat(tokensJson.semantic.elevation.sticky, ";\n  ");
+  return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: ".concat(tokens.semantic.layer.sticky, ";\n    box-shadow: ").concat(tokens.semantic.elevation.sticky, ";\n  ");
 });
 var StyledLeftSection = styled.div.withConfig({
   displayName: "DateGroup__StyledLeftSection",
   componentId: "sc-9nfm1f-1"
-})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm);
+})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
 var StyledRightSection = styled.div.withConfig({
   displayName: "DateGroup__StyledRightSection",
   componentId: "sc-9nfm1f-2"
-})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.md);
+})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[300]);
 var StyledContent = styled.div.withConfig({
   displayName: "DateGroup__StyledContent",
   componentId: "sc-9nfm1f-3"
@@ -5001,18 +5301,18 @@ var DateGroup = function DateGroup(_a) {
     })]
   });
 };
-var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
+var templateObject_1$g, templateObject_2$e, templateObject_3$e, templateObject_4$b;
 
-var semantic$7 = tokensJson.semantic;
+var semantic$7 = tokens.semantic;
 var StyledContainer$1 = styled.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: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"])), tokensJson.component.emptyState.maxWidth, function (_a) {
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"])), tokens.component.emptyState.maxWidth, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? semantic$7.spacing.layout['4xl'] : $size === 'large' ? semantic$7.spacing.layout['8xl'] : semantic$7.spacing.layout['6xl'];
+  return $size === 'small' ? semantic$7.space[800] : $size === 'large' ? semantic$7.space[1400] : semantic$7.space[1000];
 });
 var StyledIllustration = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -5022,20 +5322,20 @@ var StyledIllustration = styled.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' ? tokensJson.component.emptyState.illustration.small : $size === 'large' ? tokensJson.component.emptyState.illustration.large : tokensJson.component.emptyState.illustration.medium;
+  return $size === 'small' ? tokens.component.emptyState.illustration.small : $size === 'large' ? tokens.component.emptyState.illustration.large : tokens.component.emptyState.illustration.medium;
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? tokensJson.component.emptyState.illustration.small : $size === 'large' ? tokensJson.component.emptyState.illustration.large : tokensJson.component.emptyState.illustration.medium;
-}, semantic$7.spacing.layout['2xl'], function (_a) {
+  return $size === 'small' ? tokens.component.emptyState.illustration.small : $size === 'large' ? tokens.component.emptyState.illustration.large : tokens.component.emptyState.illustration.medium;
+}, semantic$7.space[600], function (_a) {
   var $variant = _a.$variant;
-  return $variant === 'error' ? semantic$7.color.icon.error : $variant === 'success' ? semantic$7.color.icon.success : semantic$7.color.icon.subdued;
+  return $variant === 'error' ? semantic$7.color.icon.danger : $variant === 'success' ? semantic$7.color.icon.success : semantic$7.color.icon.muted;
 });
 var StyledTextContainer = styled.div.withConfig({
   displayName: "EmptyState__StyledTextContainer",
   componentId: "sc-1u5hxh-2"
-})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  max-width: ", ";\n  margin-bottom: ", ";\n"], ["\n  max-width: ", ";\n  margin-bottom: ", ";\n"
+})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  max-width: ", ";\n  margin-bottom: ", ";\n"], ["\n  max-width: ", ";\n  margin-bottom: ", ";\n"
 // Map illustration type to icon name
-])), tokensJson.component.emptyState.text.maxWidth, semantic$7.spacing.layout['2xl']);
+])), tokens.component.emptyState.text.maxWidth, semantic$7.space[600]);
 // Map illustration type to icon name
 var illustrationToIcon = {
   search: 'search',
@@ -5090,7 +5390,7 @@ var EmptyState = function EmptyState(_a) {
         children: title
       }), jsx("div", {
         style: {
-          marginTop: semantic$7.spacing.layout.md
+          marginTop: semantic$7.space[300]
         },
         children: jsx(Typography, {
           variant: "body",
@@ -5100,7 +5400,7 @@ var EmptyState = function EmptyState(_a) {
       })]
     }), (action || secondaryAction) && jsx(Box, {
       width: "100%",
-      maxWidth: tokensJson.component.emptyState.actions.maxWidth,
+      maxWidth: tokens.component.emptyState.actions.maxWidth,
       children: jsxs(Stack, {
         direction: "column",
         gap: "sm",
@@ -5120,27 +5420,25 @@ var EmptyState = function EmptyState(_a) {
     })]
   });
 };
-var templateObject_1$f, templateObject_2$d, templateObject_3$c;
+var templateObject_1$f, templateObject_2$d, templateObject_3$d;
 
-var _a$1 = tokensJson.semantic,
-  spacing$1 = _a$1.spacing.layout,
-  border$2 = _a$1.border;
+var space$5 = tokens.semantic.space;
 var FeatureBlockStyled = styled.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: 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"])), tokensJson.semantic.breakpoint.md, tokensJson.semantic.breakpoint.lg, spacing$1['7xl'], border$2.radius['2xl'], tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut);
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.semantic.breakpoint.md, tokens.semantic.breakpoint.lg, space$5[1200], tokens.semantic.radius['2xl']);
 var ImageWrapper = styled.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"])), tokensJson.semantic.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"])), tokens.semantic.breakpoint.lg);
 var ContentSection = styled.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['2xl'], tokensJson.semantic.breakpoint.lg, spacing$1['4xl'], tokensJson.semantic.breakpoint.xl, spacing$1['11xl']);
+})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), space$5[600], tokens.semantic.breakpoint.lg, space$5[800], tokens.semantic.breakpoint.xl, space$5[2400]);
 var ButtonWrapper = styled.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.lg);
+})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), space$5[400]);
 var ContentWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ContentWrapper",
   componentId: "sc-1mi4lso-4"
@@ -5203,21 +5501,23 @@ var FeatureBlock = function FeatureBlock(_a) {
     }), jsx(Divider, {})]
   });
 };
-var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
+var templateObject_1$e, templateObject_2$c, templateObject_3$c, templateObject_4$a, templateObject_5$9;
 
-var _a = tokensJson.semantic,
-  color$1 = _a.color,
-  border$1 = _a.border,
-  zIndex = _a.zIndex,
+var _a = tokens.semantic,
+  border = _a.border,
   elevation$1 = _a.elevation,
   motion$1 = _a.motion,
-  spacing = _a.spacing.layout,
-  _b = tokensJson.component,
+  space$4 = _a.space,
+  _b = tokens.component,
   input$1 = _b.input,
   field$3 = _b.field;
 // Spacing comes from the semantic scales: no component spacing tokens (decision 0022).
-// The 11px vertical padding is off-grid and keeps its deprecated token until #129.
-var controlPaddingX = tokensJson.semantic.spacing.component.lg;
+// The trigger and options take their height from size.control.lg as a minimum and centre
+// their content (decision 0034). The small vertical padding only matters when a long
+// label wraps; a single line is shorter than the minimum.
+var controlPaddingX = tokens.semantic.space.inset.lg;
+var controlPaddingY = space$4[200];
+var controlHeight = tokens.semantic.size.control.lg;
 var duration = motion$1.duration,
   easing = motion$1.easing;
 var DropdownContainer = styled.div.withConfig({
@@ -5230,16 +5530,16 @@ var DropdownTrigger = styled.button.withConfig({
   },
   displayName: "Dropdown__DropdownTrigger",
   componentId: "sc-kz07c4-1"
-})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, controlPaddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"])), controlHeight, controlPaddingY, controlPaddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
-}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.normal, easing.easeInOut, duration.normal, easing.easeInOut, function (_a) {
+}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.moderate, easing.standard, duration.moderate, easing.standard, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.hover.borderColor : input$1.hover.borderColor;
 }, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor;
-}, input$1.focus.outline, border$1.focusOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, function (_a) {
+}, input$1.focus.outline, border.focusOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, function (_a) {
   var $isOpen = _a.$isOpen,
     $hasError = _a.$hasError;
   return $isOpen && "\n    border-color: ".concat($hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor, ";\n  ");
@@ -5250,7 +5550,7 @@ var DropdownIcon = styled.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 ", " ", ";\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) {
+})(templateObject_3$b || (templateObject_3$b = __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"])), space$4[200], duration.fast, easing.decelerate, function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen && "\n    transform: rotate(180deg);\n  ";
 }, reducedMotion);
@@ -5260,7 +5560,7 @@ var DropdownMenu = styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), zIndex.dropdown, input$1["default"].backgroundColor, border$1.subtle, input$1["default"].borderRadius, elevation$1.floating, spacing.xs, function (_a) {
+})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, input$1["default"].backgroundColor, border.emphasis, input$1["default"].borderRadius, elevation$1.floating, space$4[100], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -5268,45 +5568,29 @@ var DropdownMenu = styled.div.withConfig({
   return $isOpen ? 'visible' : 'hidden';
 }, function (_a) {
   var $isOpen = _a.$isOpen;
-  return $isOpen ? 'translateY(0)' : "translateY(-".concat(spacing.sm, ")");
-}, duration.fast, easing.easeOut, tokensJson.semantic.size.menu.maxHeight, reducedMotion);
+  return $isOpen ? 'translateY(0)' : "translateY(calc(-1 * ".concat(tokens.semantic.motion.distance.sm, "))");
+}, duration.fast, easing.decelerate, duration.fast, easing.decelerate, duration.fast, easing.decelerate, tokens.semantic.size.menu.maxHeight, reducedMotion);
 var DropdownOption = styled.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: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: ", " ", ";\n  /* Focus is grey; only the selected option is light blue, and the text darkens with its fill on\n     focus, hover and press so it stays at least 4.5:1 (decisions 0016, 0029) */\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: ", " ", ";\n  /* Focus is grey; only the selected option is light blue, and the text darkens with its fill on\n     focus, hover and press so it stays at least 4.5:1 (decisions 0016, 0029) */\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), spacing.sm, input$1["default"].paddingY, controlPaddingX, function (_a) {
+})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n\n  /* The shared row states (decisions 0029, 0030): focus shows the hover state in grey; only the\n     selected option is light blue, with its text darkening with the fill */\n  ", "\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n\n  /* The shared row states (decisions 0029, 0030): focus shows the hover state in grey; only the\n     selected option is light blue, with its text darkening with the fill */\n  ", "\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), space$4[200], controlHeight, controlPaddingY, controlPaddingX, input$1["default"].font, input$1["default"].textColor, duration.fast, easing.decelerate, duration.fast, easing.decelerate, function (_a) {
   var $isSelected = _a.$isSelected,
     $isFocused = _a.$isFocused;
-  if ($isSelected) return $isFocused ? color$1.background['interactive-subtle-hover'] : color$1.background['interactive-subtle'];
-  if ($isFocused) return color$1.background.surface;
-  return 'transparent';
-}, input$1["default"].font, function (_a) {
-  var $isSelected = _a.$isSelected,
-    $isFocused = _a.$isFocused;
-  if ($isSelected) return $isFocused ? color$1.text['interactive-hover'] : color$1.text.interactive;
-  return input$1["default"].textColor;
-}, duration.fast, easing.easeOut, duration.fast, easing.easeOut, function (_a) {
-  var $isSelected = _a.$isSelected;
-  return $isSelected ? color$1.background['interactive-subtle-hover'] : color$1.background.surface;
-}, function (_a) {
-  var $isSelected = _a.$isSelected;
-  return $isSelected ? color$1.text['interactive-hover'] : input$1["default"].textColor;
-}, function (_a) {
-  var $isSelected = _a.$isSelected;
-  return $isSelected ? color$1.background['interactive-subtle-active'] : color$1.background.neutral;
-}, function (_a) {
-  var $isSelected = _a.$isSelected;
-  return $isSelected ? color$1.text['interactive-active'] : input$1["default"].textColor;
-}, border$1.subtle);
+  return interactiveRow({
+    selected: $isSelected,
+    focused: $isFocused
+  });
+}, border.emphasis);
 var StyledHelperText$3 = styled.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"
 })(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), field$3.helperText.typography, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? field$3.helperText.colorError : field$3.helperText.color;
-}, spacing.sm);
+}, space$4[200]);
 var Dropdown = function Dropdown(_a) {
   var options = _a.options,
     value = _a.value,
@@ -5429,7 +5713,7 @@ var Dropdown = function Dropdown(_a) {
       htmlFor: dropdownId,
       style: {
         display: 'block',
-        marginBottom: spacing.sm
+        marginBottom: space$4[200]
       },
       children: jsx(Typography, {
         variant: "label",
@@ -5486,9 +5770,9 @@ 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 templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$9, templateObject_5$8, templateObject_6$7;
 
-var semantic$6 = tokensJson.semantic;
+var semantic$6 = tokens.semantic;
 var StyledList = styled.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -5523,19 +5807,18 @@ var List = function List(_a) {
 List.displayName = 'List';
 var templateObject_1$c;
 
-var semantic$5 = tokensJson.semantic;
-var layout = semantic$5.spacing.layout,
+var semantic$5 = tokens.semantic;
+var space$3 = semantic$5.space,
   color = semantic$5.color,
-  border = semantic$5.border,
   elevation = semantic$5.elevation,
   motion = semantic$5.motion;
 // ---------------------------------------------------------------------------
 // Size map
 // ---------------------------------------------------------------------------
 var sizeToWidth = {
-  small: tokensJson.semantic.size.overlay.sm,
-  medium: tokensJson.semantic.size.overlay.md,
-  large: tokensJson.semantic.size.overlay.lg
+  small: tokens.semantic.size.overlay.sm,
+  medium: tokens.semantic.size.overlay.md,
+  large: tokens.semantic.size.overlay.lg
 };
 // ---------------------------------------------------------------------------
 // Animations
@@ -5552,7 +5835,7 @@ var scaleIn = keyframes(templateObject_2$a || (templateObject_2$a = __makeTempla
 var StyledOverlay$1 = styled.div.withConfig({
   displayName: "Modal__StyledOverlay",
   componentId: "sc-1d3g5gh-0"
-})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), color.background.overlay, semantic$5.zIndex.modal, css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
+})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), semantic$5.surface.scrim, semantic$5.layer.modal, css(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.moderate, motion.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }));
@@ -5562,27 +5845,27 @@ var StyledDialog = styled.div.withConfig({
   },
   displayName: "Modal__StyledDialog",
   componentId: "sc-1d3g5gh-1"
-})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), semantic$5.zIndex.modal, function (_a) {
+})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), semantic$5.layer.modal, function (_a) {
   var $width = _a.$width;
   return $width;
-}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.normal, motion.easing.easeOut, function (_a) {
+}, space$3[400], space$3[400], semantic$5.surface.raised, semantic$5.radius.xl, elevation.overlay, css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
-}), reducedMotion, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
+}), reducedMotion, fadeIn$1, motion.duration.moderate, motion.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
-}, semantic$5.breakpoint.md, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
+}, semantic$5.breakpoint.md, fadeIn$1, motion.duration.moderate, motion.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 });
 var StyledHeader = styled.div.withConfig({
   displayName: "Modal__StyledHeader",
   componentId: "sc-1d3g5gh-2"
-})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", " 0;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", " 0;\n  flex-shrink: 0;\n"])), layout.lg, layout.lg);
+})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", " 0;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", " 0;\n  flex-shrink: 0;\n"])), space$3[400], space$3[400]);
 var StyledBody = styled.div.withConfig({
   displayName: "Modal__StyledBody",
   componentId: "sc-1d3g5gh-3"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), layout.md, layout.lg, semantic$5.spacing.layout.sm, color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
+})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), space$3[300], space$3[400], semantic$5.space[200], color.fill.muted, color.border["default"], semantic$5.radius.full, color.fill.inverse);
 var StyledFooter = styled.div.withConfig({
   displayName: "Modal__StyledFooter",
   componentId: "sc-1d3g5gh-4"
@@ -5602,7 +5885,7 @@ var StyledFooter = styled.div.withConfig({
  * - Locks body scroll while open.
  *
  * Composes: IconButton, Button, Typography, Stack, Divider
- */])), layout.sm, layout.lg, layout.lg);
+ */])), space$3[200], space$3[400], space$3[400]);
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -5764,23 +6047,19 @@ var Modal = function Modal(_a) {
   return /*#__PURE__*/createPortal(modal, document.body);
 };
 Modal.displayName = 'Modal';
-var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
+var templateObject_1$b, templateObject_2$a, templateObject_3$a, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
 
-var input = tokensJson.component.input,
-  semantic$4 = tokensJson.semantic;
-var StyledInputBase = styled.input.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "InputBase__StyledInputBase",
-  componentId: "sc-1bpf4e8-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"
+var input = tokens.component.input,
+  semantic$4 = tokens.semantic;
 /**
- * Base styled textarea with shared styling
- */])), input["default"].font, function (_a) {
+ * Styles shared by the single-line input and the textarea. Each element sets its
+ * own min-height and padding. Interpolating a styled component into another's CSS
+ * inserts its class selector, not its styles, so the sharing goes through `css`.
+ */
+var inputBaseStyles = css(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  width: 100%;\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  width: 100%;\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"])), input["default"].font, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? input.disabled.textColor : input["default"].textColor;
-}, input["default"].paddingY, semantic$4.spacing.component.lg, function (_a) {
+}, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? input.disabled.backgroundColor : input["default"].backgroundColor;
 }, input["default"].borderWidth, function (_a) {
@@ -5789,13 +6068,23 @@ var StyledInputBase = styled.input.withConfig({
   if ($disabled) return input.disabled.borderColor;
   if ($hasError) return input.error.borderColor;
   return input["default"].borderColor;
-}, input["default"].borderRadius, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut, input.placeholder.textColor, function (_a) {
+}, input["default"].borderRadius, tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.standard, tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.standard, input.placeholder.textColor, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
 }, input.focus.outline, semantic$4.border.focusOffset, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
 });
+var StyledInputBase = styled.input.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "InputBase__StyledInputBase",
+  componentId: "sc-1bpf4e8-0"
+})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  ", "\n  min-height: ", ";\n  padding: 0 ", ";\n"], ["\n  ", "\n  min-height: ", ";\n  padding: 0 ", ";\n"
+/**
+ * Base styled textarea with shared styling
+ */])), inputBaseStyles, semantic$4.size.control.lg, semantic$4.space.inset.lg);
 /**
  * Base styled textarea with shared styling
  */
@@ -5805,20 +6094,20 @@ var StyledTextAreaBase = styled.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: ", ";\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, tokensJson.component.input.textarea.minHeight, tokensJson.semantic.lineHeight.normal);
-var templateObject_1$a, templateObject_2$9;
+})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  ", "\n  \n  /* TextArea specific: a taller minimum for multi-line entry (decision 0034) */\n  min-height: ", ";\n  padding: ", " ", ";\n  resize: vertical;\n"], ["\n  ", "\n  \n  /* TextArea specific: a taller minimum for multi-line entry (decision 0034) */\n  min-height: ", ";\n  padding: ", " ", ";\n  resize: vertical;\n"])), inputBaseStyles, input.textarea.minHeight, semantic$4.space.inset.md, semantic$4.space.inset.lg);
+var templateObject_1$a, templateObject_2$9, templateObject_3$9;
 
-var field$2 = tokensJson.component.field;
+var field$2 = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
-var gap$2 = tokensJson.semantic.spacing.layout;
+var space$2 = tokens.semantic.space;
 var StyledFieldContainer$2 = styled.div.withConfig({
   displayName: "NumberInput__StyledFieldContainer",
   componentId: "sc-qotc3w-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), gap$2.sm);
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), space$2[200]);
 var StyledLabel$3 = styled.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"])), gap$2.xs, field$2.label.typography, field$2.label.color, field$2.label.colorDisabled);
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space$2[100], field$2.label.typography, field$2.label.color, field$2.label.colorDisabled);
 var StyledRequiredIndicator$2 = styled.span.withConfig({
   displayName: "NumberInput__StyledRequiredIndicator",
   componentId: "sc-qotc3w-2"
@@ -5830,11 +6119,11 @@ var StyledInputWrapper$2 = styled.div.withConfig({
 var StyledNumberInput = styled(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"])), tokensJson.semantic.spacing.layout['6xl']);
+})(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"], ["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"])), tokens.semantic.space[1000]);
 var StyledStepperContainer = styled.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"])), tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.spacing.layout.sm);
+})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), tokens.semantic.space[200], tokens.semantic.space[200]);
 var StyledHelperText$2 = styled.div.withConfig({
   displayName: "NumberInput__StyledHelperText",
   componentId: "sc-qotc3w-6"
@@ -6083,9 +6372,9 @@ var PageTitleStyled = styled.div.withConfig({
  * ```
  *
  * For a back link, add an `IconButton` with your own `url` and `aria-label`.
- */])), tokensJson.semantic.spacing.layout['2xl'], function (_a) {
+ */])), tokens.semantic.space[600], function (_a) {
   var $hasBackButton = _a.$hasBackButton;
-  return $hasBackButton ? tokensJson.semantic.spacing.layout.none : tokensJson.semantic.spacing.layout['7xl'];
+  return $hasBackButton ? tokens.semantic.space[0] : tokens.semantic.space[1200];
 });
 /**
  * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
@@ -6129,17 +6418,17 @@ var PageTitle = function PageTitle(_a) {
 };
 var templateObject_1$8;
 
-var field$1 = tokensJson.component.field;
+var field$1 = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
-var gap$1 = tokensJson.semantic.spacing.layout;
+var space$1 = tokens.semantic.space;
 var StyledFieldContainer$1 = styled.div.withConfig({
   displayName: "PasswordField__StyledFieldContainer",
   componentId: "sc-1p15zk0-0"
-})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), gap$1.sm);
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), space$1[200]);
 var StyledLabel$2 = styled.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"])), gap$1.xs, field$1.label.typography, field$1.label.color, field$1.label.colorDisabled);
+})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space$1[100], field$1.label.typography, field$1.label.color, field$1.label.colorDisabled);
 var StyledRequiredIndicator$1 = styled.span.withConfig({
   displayName: "PasswordField__StyledRequiredIndicator",
   componentId: "sc-1p15zk0-2"
@@ -6170,7 +6459,7 @@ var StyledToggleButton = styled.div.withConfig({
  *   required
  * />
  * ```
- */])), tokensJson.semantic.spacing.layout.sm);
+ */])), tokens.semantic.space[200]);
 /**
  * PasswordField component for secure password input with visibility toggle
  *
@@ -6263,8 +6552,8 @@ var PasswordField = /*#__PURE__*/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$3 = tokensJson.semantic,
-  component = tokensJson.component;
+var semantic$3 = tokens.semantic,
+  component = tokens.component;
 var StyledSearchContainer = styled.div.withConfig({
   displayName: "SearchField__StyledSearchContainer",
   componentId: "sc-qhz9i8-0"
@@ -6272,7 +6561,7 @@ var StyledSearchContainer = styled.div.withConfig({
 var StyledInputWrapper = styled.div.withConfig({
   displayName: "SearchField__StyledInputWrapper",
   componentId: "sc-qhz9i8-1"
-})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic$3.spacing.layout.sm, semantic$3.spacing.layout.sm, semantic$3.spacing.layout.md, component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic$3.motion.duration.normal, semantic$3.motion.easing.easeInOut, semantic$3.motion.duration.normal, semantic$3.motion.easing.easeInOut, function (props) {
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic$3.space[200], semantic$3.size.control.lg, semantic$3.space[200], semantic$3.space[300], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic$3.motion.duration.moderate, semantic$3.motion.easing.standard, semantic$3.motion.duration.moderate, semantic$3.motion.easing.standard, function (props) {
   return props.$isFocused && "\n    border-color: ".concat(component.input.focus.borderColor, ";\n    outline: ").concat(component.input.focus.outline, ";\n    outline-offset: ").concat(semantic$3.border.focusOffset, ";\n  ");
 }, function (props) {
   return props.$disabled && "\n    background-color: ".concat(component.input.disabled.backgroundColor, ";\n    border-color: ").concat(component.input.disabled.borderColor, ";\n    cursor: not-allowed;\n  ");
@@ -6284,11 +6573,11 @@ var StyledInput = styled.input.withConfig({
 var StyledSuggestionsList = styled.ul.withConfig({
   displayName: "SearchField__StyledSuggestionsList",
   componentId: "sc-qhz9i8-3"
-})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child */\n  & > [data-highlighted] > :first-child {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child */\n  & > [data-highlighted] > :first-child {\n    background-color: ", ";\n  }\n"])), semantic$3.spacing.layout.xs, 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, semantic$3.color.background.surface);
+})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic$3.space[100], tokens.semantic.size.menu.maxHeight, semantic$3.surface.raised, semantic$3.border.width.thin, semantic$3.color.border["default"], semantic$3.radius.md, semantic$3.elevation.floating, semantic$3.space[100], semantic$3.layer.dropdown, rowStates.unselected.hover.background);
 var StyledSectionHeader = styled.div.withConfig({
   displayName: "SearchField__StyledSectionHeader",
   componentId: "sc-qhz9i8-4"
-})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"])), semantic$3.spacing.layout.sm, semantic$3.spacing.layout.md, tokensJson.component.searchField.sectionHeader.typography, semantic$3.color.text.subdued, tokensJson.component.searchField.sectionHeader.letterSpacing);
+})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"])), semantic$3.space[200], semantic$3.space[300], tokens.component.searchField.sectionHeader.typography, semantic$3.color.text.muted, tokens.component.searchField.sectionHeader.letterSpacing);
 var debounce = function debounce(func, wait) {
   var timeout = null;
   return function () {
@@ -6589,7 +6878,7 @@ var SearchField = /*#__PURE__*/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$2 = tokensJson.semantic;
+var semantic$2 = tokens.semantic;
 // Fade in animation for overlay
 var fadeIn = 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
@@ -6605,7 +6894,7 @@ var StyledOverlay = styled.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: ", ";\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, css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
+})(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.surface.scrim, semantic$2.layer.overlay, css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn, semantic$2.motion.duration.moderate, semantic$2.motion.easing.standard, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }));
@@ -6615,40 +6904,40 @@ var StyledSheet = styled.div.withConfig({
   },
   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: ", ";\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) {
+})(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.surface.base, semantic$2.elevation.overlay, semantic$2.layer.overlay, function (_a) {
   var $position = _a.$position,
     $variant = _a.$variant,
     $width = _a.$width,
     $height = _a.$height;
   var isDrawer = $variant === 'drawer';
-  var margin = isDrawer ? semantic$2.spacing.layout.lg : '0';
-  var borderRadius = isDrawer ? semantic$2.border.radius.md : '0';
+  var margin = isDrawer ? semantic$2.space[400] : '0';
+  var borderRadius = isDrawer ? semantic$2.radius.md : '0';
   switch ($position) {
     case 'right':
-      return 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) {
+      return 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.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInRight, semantic$2.motion.duration.moderate, semantic$2.motion.easing.standard, function (_a) {
         var $isExiting = _a.$isExiting;
         return $isExiting && exitAnimation;
       });
     case 'left':
-      return 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) {
+      return 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.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInLeft, semantic$2.motion.duration.moderate, semantic$2.motion.easing.standard, function (_a) {
         var $isExiting = _a.$isExiting;
         return $isExiting && exitAnimation;
       });
     case 'top':
-      return 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) {
+      return 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.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInTop, semantic$2.motion.duration.moderate, semantic$2.motion.easing.standard, function (_a) {
         var $isExiting = _a.$isExiting;
         return $isExiting && exitAnimation;
       });
     case 'bottom':
-      return 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) {
+      return 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.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInBottom, semantic$2.motion.duration.moderate, semantic$2.motion.easing.standard, function (_a) {
         var $isExiting = _a.$isExiting;
         return $isExiting && exitAnimation;
       });
   }
-}, reducedMotion, fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
+}, reducedMotion, fadeIn, semantic$2.motion.duration.moderate, semantic$2.motion.easing.standard, 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);
+}, semantic$2.space[200], semantic$2.surface.raised, semantic$2.color.border["default"], semantic$2.radius.full, semantic$2.color.fill.inverse);
 var StyledSheetContent = styled.div.withConfig({
   displayName: "Sheet__StyledSheetContent",
   componentId: "sc-8abisx-2"
@@ -6678,7 +6967,7 @@ var StyledSheetContent = styled.div.withConfig({
  *   <h2>Mobile Menu</h2>
  * </Sheet>
  * ```
- */])), semantic$2.spacing.layout['2xl']);
+ */])), semantic$2.space[600]);
 /**
  * Sheet component for side panels and drawers
  *
@@ -6713,9 +7002,9 @@ var Sheet = function Sheet(_a) {
     _c = _a.variant,
     variant = _c === void 0 ? 'sheet' : _c,
     _d = _a.width,
-    width = _d === void 0 ? tokensJson.semantic.size.overlay.sm : _d,
+    width = _d === void 0 ? tokens.semantic.size.overlay.sm : _d,
     _e = _a.height,
-    height = _e === void 0 ? tokensJson.semantic.size.overlay.sm : _e,
+    height = _e === void 0 ? tokens.semantic.size.overlay.sm : _e,
     children = _a.children,
     _f = _a.closeOnOverlayClick,
     closeOnOverlayClick = _f === void 0 ? true : _f,
@@ -6820,7 +7109,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$1 = tokensJson.semantic;
+var semantic$1 = tokens.semantic;
 var StyledSliderContainer = styled.div.withConfig({
   displayName: "Slider__StyledSliderContainer",
   componentId: "sc-6mh2d4-0"
@@ -6831,51 +7120,63 @@ var StyledLabel$1 = styled.label.withConfig({
 })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-bottom: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-bottom: ", ";\n"])), semantic$1.typography.label, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
-}, semantic$1.spacing.layout.lg);
+}, semantic$1.space[400]);
 var StyledSliderTrackContainer = styled.div.withConfig({
   displayName: "Slider__StyledSliderTrackContainer",
   componentId: "sc-6mh2d4-2"
-})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"])), semantic$1.spacing.layout['6xl']);
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"])), semantic$1.space[1000]);
 var StyledTrack = styled.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"])), semantic$1.spacing.layout.xs, 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  /* A vertical swipe over the track still scrolls the page */\n  touch-action: pan-y;\n  /* The thumbs measure their distance apart in cqw (1% of the track's width) */\n  container-type: inline-size;\n\n  /* Forced colours drop the track's fill, so it gets an edge; the thumb stays centred on it (decision 0038).\n     A div gets no system disabled colour, so a disabled track sets GrayText itself. */\n  ", " {\n    border: ", " solid ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* A vertical swipe over the track still scrolls the page */\n  touch-action: pan-y;\n  /* The thumbs measure their distance apart in cqw (1% of the track's width) */\n  container-type: inline-size;\n\n  /* Forced colours drop the track's fill, so it gets an edge; the thumb stays centred on it (decision 0038).\n     A div gets no system disabled colour, so a disabled track sets GrayText itself. */\n  ", " {\n    border: ", " solid ", ";\n  }\n"])), semantic$1.space[100], function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.progressTrack;
-}, semantic$1.border.radius.circle, function (_a) {
+  return $disabled ? semantic$1.color.fill.disabled : tokens.component.track.background;
+}, semantic$1.radius.full, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
+}, forcedColors, semantic$1.border.width.thin, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'GrayText' : 'CanvasText';
 });
 var StyledTrackFill = styled.div.withConfig({
   displayName: "Slider__StyledTrackFill",
   componentId: "sc-6mh2d4-4"
-})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n"], ["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n"])), function (_a) {
+})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n\n  /* The fill is the value, so it keeps a fill in forced colours (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n\n  /* The fill is the value, so it keeps a fill in forced colours (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: ", ";\n  }\n"])), function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$1.color.icon.disabled : semantic$1.color.background.emphasis;
-}, semantic$1.border.radius.circle);
+  return $disabled ? semantic$1.color.icon.disabled : semantic$1.color.fill.emphasis;
+}, semantic$1.radius.full, forcedColors, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'GrayText' : 'Highlight';
+});
 var StyledThumb = styled.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  ", " {\n    transition: none;\n  }\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: -", ";\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: ", ";\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) {
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: calc(-1 * ", ");\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* The thumb takes every touch gesture, so a drag moves the value instead of scrolling */\n  touch-action: none;\n  transform: translateX(-50%);\n  /* left is the thumb's position, set from the value: it glides there, as it always has (decision 0037) */\n  transition: left ", " ", ",\n              transform ", " ", ",\n              box-shadow ", " ", ",\n              background-color ", " ", ",\n              border-color ", " ", ";\n  box-shadow: ", ";\n\n  /* The pointer target (WCAG 2.5.8, decision 0039): the thumb keeps its 20px look, and an\n     invisible hit area centred on it takes pointer input instead, 24px for a mouse or pen and\n     44px on a touch screen. A range slider's two hit areas stop at the midpoint between the\n     thumbs (--slider-reach, set from their positions), so they never overlap and a drag always\n     takes the nearer thumb. The thumb itself takes no input, as its body can overlap the other\n     thumb's half. */\n  pointer-events: none;\n  --slider-hit: ", ";\n  @media (pointer: coarse) {\n    --slider-hit: ", ";\n  }\n  --slider-hit-half: calc(var(--slider-hit) / 2);\n  --slider-hit-start: ", ";\n  --slider-hit-end: ", ";\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: calc(50% - var(--slider-hit-start));\n    width: calc(var(--slider-hit-start) + var(--slider-hit-end));\n    height: var(--slider-hit);\n    transform: translateY(-50%);\n    pointer-events: auto;\n  }\n\n  /* Without container query units the midpoint can't be measured, so the hit areas stay whole\n     (where they overlap, the thumb drawn later wins) */\n  @supports not (width: 1cqw) {\n    &::before {\n      left: calc(50% - var(--slider-hit-half));\n      width: var(--slider-hit);\n    }\n  }\n\n  ", " {\n    transition: none;\n  }\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: calc(-1 * ", ");\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* The thumb takes every touch gesture, so a drag moves the value instead of scrolling */\n  touch-action: none;\n  transform: translateX(-50%);\n  /* left is the thumb's position, set from the value: it glides there, as it always has (decision 0037) */\n  transition: left ", " ", ",\n              transform ", " ", ",\n              box-shadow ", " ", ",\n              background-color ", " ", ",\n              border-color ", " ", ";\n  box-shadow: ", ";\n\n  /* The pointer target (WCAG 2.5.8, decision 0039): the thumb keeps its 20px look, and an\n     invisible hit area centred on it takes pointer input instead, 24px for a mouse or pen and\n     44px on a touch screen. A range slider's two hit areas stop at the midpoint between the\n     thumbs (--slider-reach, set from their positions), so they never overlap and a drag always\n     takes the nearer thumb. The thumb itself takes no input, as its body can overlap the other\n     thumb's half. */\n  pointer-events: none;\n  --slider-hit: ", ";\n  @media (pointer: coarse) {\n    --slider-hit: ", ";\n  }\n  --slider-hit-half: calc(var(--slider-hit) / 2);\n  --slider-hit-start: ", ";\n  --slider-hit-end: ", ";\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: calc(50% - var(--slider-hit-start));\n    width: calc(var(--slider-hit-start) + var(--slider-hit-end));\n    height: var(--slider-hit);\n    transform: translateY(-50%);\n    pointer-events: auto;\n  }\n\n  /* Without container query units the midpoint can't be measured, so the hit areas stay whole\n     (where they overlap, the thumb drawn later wins) */\n  @supports not (width: 1cqw) {\n    &::before {\n      left: calc(50% - var(--slider-hit-half));\n      width: var(--slider-hit);\n    }\n  }\n\n  ", " {\n    transition: none;\n  }\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"])), semantic$1.space[500], semantic$1.space[500], semantic$1.space[200], function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
+  return $disabled ? semantic$1.color.fill.disabled : tokens.component.slider.thumb.background;
 }, semantic$1.border.width.thick, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled ? semantic$1.color.icon.disabled : semantic$1.color.background.emphasis;
-}, semantic$1.border.radius.circle, function (_a) {
+  return $disabled ? semantic$1.color.icon.disabled : semantic$1.color.fill.emphasis;
+}, semantic$1.radius.full, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? 'not-allowed' : 'grab';
-}, semantic$1.motion.transition.fast, tokensJson.component.slider.thumb.shadow["default"], reducedMotion, tokensJson.component.slider.thumb.shadow.hover, semantic$1.border.focus, semantic$1.border.focusOffset, function (_a) {
+}, semantic$1.motion.duration.fast, semantic$1.motion.easing.decelerate, semantic$1.motion.duration.fast, semantic$1.motion.easing.decelerate, semantic$1.motion.duration.fast, semantic$1.motion.easing.decelerate, semantic$1.motion.duration.fast, semantic$1.motion.easing.decelerate, semantic$1.motion.duration.fast, semantic$1.motion.easing.decelerate, tokens.component.slider.thumb.shadow["default"], semantic$1.size.pointerTarget, semantic$1.size.touchTarget, function (_a) {
+  var $range = _a.$range;
+  return $range === 'max' ? 'min(var(--slider-hit-half), var(--slider-reach))' : 'var(--slider-hit-half)';
+}, function (_a) {
+  var $range = _a.$range;
+  return $range === 'min' ? 'min(var(--slider-hit-half), var(--slider-reach))' : 'var(--slider-hit-half)';
+}, reducedMotion, tokens.component.slider.thumb.shadow.hover, semantic$1.border.focus, semantic$1.border.focusOffset, function (_a) {
   var $active = _a.$active;
-  return $active && "\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ".concat(tokensJson.component.slider.thumb.shadow.active, ";\n  ");
+  return $active && "\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ".concat(tokens.component.slider.thumb.shadow.active, ";\n  ");
 });
 var StyledValueLabel = styled.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"])), 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) {
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(-1 * ", ");\n  left: ", ";\n  transform: translateX(-50%);\n  padding: ", " ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  border-radius: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: ", ";\n  \n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(-1 * ", ");\n  left: ", ";\n  transform: translateX(-50%);\n  padding: ", " ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  border-radius: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: ", ";\n  \n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid ", ";\n  }\n"])), semantic$1.space[800], semantic$1.space[200], semantic$1.space[100], semantic$1.space[200], semantic$1.color.fill.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, semantic$1.radius.sm, function (_a) {
   var $disabled = _a.$disabled;
   return $disabled ? semantic$1.opacity.disabled : semantic$1.opacity.full;
-}, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.color.background.emphasis);
+}, semantic$1.space[100], semantic$1.space[100], semantic$1.space[100], semantic$1.color.fill.emphasis);
 var StyledMinMaxLabels = styled.div.withConfig({
   displayName: "Slider__StyledMinMaxLabels",
   componentId: "sc-6mh2d4-7"
@@ -6903,7 +7204,7 @@ var StyledMinMaxLabels = styled.div.withConfig({
  *   onRangeChange={(values) => console.log(values)}
  * />
  * ```
- */])), semantic$1.typography.body, semantic$1.color.text.subdued, semantic$1.spacing.layout.xs);
+ */])), semantic$1.typography.body, semantic$1.color.text.muted, semantic$1.space[100]);
 /**
  * Slider component for single value or range selection
  *
@@ -6958,6 +7259,14 @@ var Slider = function Slider(_a) {
   var _h = useState(null),
     activeThumb = _h[0],
     setActiveThumb = _h[1];
+  // Removes the document listeners of a drag in progress
+  var endDragRef = useRef(null);
+  useEffect(function () {
+    return function () {
+      var _a;
+      return (_a = endDragRef.current) === null || _a === void 0 ? void 0 : _a.call(endDragRef);
+    };
+  }, []);
   // Determine if this is a range slider
   var isRange = controlledRangeValue !== undefined || defaultRangeValue !== undefined || onRangeChange !== undefined;
   // State for single slider
@@ -7004,9 +7313,11 @@ var Slider = function Slider(_a) {
     setInternalRangeValue([orderedMin, orderedMax]);
     onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange([orderedMin, orderedMax]);
   };
-  // Mouse/touch handlers
+  // Pointer handlers: mouse, touch and pen
   var handleTrackClick = function handleTrackClick(event) {
     if (disabled) return;
+    // A click on a thumb (or the end of a drag) leaves the value where the thumb put it
+    if (event.target.closest('[role="slider"]')) return;
     var newValue = positionToValue(event.clientX);
     if (isRange) {
       var minVal = currentRangeValue[0],
@@ -7022,33 +7333,47 @@ var Slider = function Slider(_a) {
       handleSingleChange(newValue);
     }
   };
-  var handleThumbMouseDown = function handleThumbMouseDown(thumb) {
-    return function (event) {
-      if (disabled) return;
-      event.preventDefault();
-      setActiveThumb(thumb);
-      var handleMouseMove = function handleMouseMove(e) {
-        var newValue = positionToValue(e.clientX);
-        if (isRange) {
-          var minVal = currentRangeValue[0],
-            maxVal = currentRangeValue[1];
-          if (thumb === 'min') {
-            handleRangeChange(newValue, maxVal);
-          } else {
-            handleRangeChange(minVal, newValue);
-          }
+  var handleThumbPointerDown = function handleThumbPointerDown(thumb, event) {
+    var _a, _b, _c;
+    if (disabled) return;
+    // Only the primary button drags; a touch or pen contact always counts
+    if (event.pointerType === 'mouse' && event.button !== 0) return;
+    event.preventDefault();
+    (_a = endDragRef.current) === null || _a === void 0 ? void 0 : _a.call(endDragRef);
+    setActiveThumb(thumb);
+    var pointerId = event.pointerId;
+    // Capture keeps the drag on this thumb when the pointer leaves it, or the window
+    (_c = (_b = event.currentTarget).setPointerCapture) === null || _c === void 0 ? void 0 : _c.call(_b, pointerId);
+    var handlePointerMove = function handlePointerMove(e) {
+      if (e.pointerId !== pointerId) return;
+      var newValue = positionToValue(e.clientX);
+      if (isRange) {
+        var minVal = currentRangeValue[0],
+          maxVal = currentRangeValue[1];
+        if (thumb === 'min') {
+          handleRangeChange(newValue, maxVal);
         } else {
-          handleSingleChange(newValue);
+          handleRangeChange(minVal, newValue);
         }
-      };
-      var _handleMouseUp = function handleMouseUp() {
-        setActiveThumb(null);
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', _handleMouseUp);
-      };
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', _handleMouseUp);
+      } else {
+        handleSingleChange(newValue);
+      }
+    };
+    var endDrag = function endDrag() {
+      setActiveThumb(null);
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerEnd);
+      document.removeEventListener('pointercancel', handlePointerEnd);
+      endDragRef.current = null;
+    };
+    // pointercancel fires when the browser takes the gesture over, so it ends the drag too
+    var handlePointerEnd = function handlePointerEnd(e) {
+      if (e.pointerId === pointerId) endDrag();
     };
+    document.addEventListener('pointermove', handlePointerMove);
+    document.addEventListener('pointerup', handlePointerEnd);
+    document.addEventListener('pointercancel', handlePointerEnd);
+    endDragRef.current = endDrag;
   };
   // Keyboard navigation
   var handleKeyDown = function handleKeyDown(thumb) {
@@ -7159,10 +7484,14 @@ var Slider = function Slider(_a) {
             "aria-describedby": ariaDescribedBy,
             "$disabled": disabled,
             "$active": activeThumb === 'min',
+            "$range": "min",
             style: {
-              left: "".concat(minPercent, "%")
+              left: "".concat(minPercent, "%"),
+              '--slider-reach': "".concat((maxPercent - minPercent) / 2, "cqw")
+            },
+            onPointerDown: function onPointerDown(event) {
+              return handleThumbPointerDown('min', event);
             },
-            onMouseDown: handleThumbMouseDown('min'),
             onKeyDown: handleKeyDown('min'),
             children: showValueLabel && jsx(StyledValueLabel, {
               "$disabled": disabled,
@@ -7180,10 +7509,14 @@ var Slider = function Slider(_a) {
             "aria-describedby": ariaDescribedBy,
             "$disabled": disabled,
             "$active": activeThumb === 'max',
+            "$range": "max",
             style: {
-              left: "".concat(maxPercent, "%")
+              left: "".concat(maxPercent, "%"),
+              '--slider-reach': "".concat((maxPercent - minPercent) / 2, "cqw")
+            },
+            onPointerDown: function onPointerDown(event) {
+              return handleThumbPointerDown('max', event);
             },
-            onMouseDown: handleThumbMouseDown('max'),
             onKeyDown: handleKeyDown('max'),
             children: showValueLabel && jsx(StyledValueLabel, {
               "$disabled": disabled,
@@ -7205,7 +7538,9 @@ var Slider = function Slider(_a) {
           style: {
             left: "".concat(singlePercent, "%")
           },
-          onMouseDown: handleThumbMouseDown('single'),
+          onPointerDown: function onPointerDown(event) {
+            return handleThumbPointerDown('single', event);
+          },
           onKeyDown: handleKeyDown('single'),
           children: showValueLabel && jsx(StyledValueLabel, {
             "$disabled": disabled,
@@ -7225,33 +7560,35 @@ 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 = tokensJson.semantic;
+var semantic = tokens.semantic;
 var StyledTabList = styled.div.withConfig({
   displayName: "TabBar__StyledTabList",
   componentId: "sc-1g9ib0y-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border.subtle, tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border.emphasis, tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
 var StyledTab = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "TabBar__StyledTab",
   componentId: "sc-1g9ib0y-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"])), semantic.space[200], semantic.space[300], semantic.space[400], tokens.component.button.sizes.medium.font, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic.motion.hover, semantic.border.radius.sm, semantic.border.radius.sm, function (props) {
-  return props.$isActive ? semantic.color.background['interactive-subtle'] : 'transparent';
+}, semantic.motion.transition.feedback, semantic.radius.sm, semantic.radius.sm, function (props) {
+  return props.$isActive ? semantic.color.fill['accent-muted'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text.interactive : semantic.color.text.subdued;
+  return props.$isActive ? semantic.color.text.accent : semantic.color.text.muted;
 }, semantic.border.width.thick, function (props) {
-  return props.$isActive ? semantic.color.background.interactive : 'transparent';
-}, semantic.motion.hover, function (props) {
-  return props.$isActive ? semantic.color.background['interactive-subtle-hover'] : 'transparent';
+  return props.$isActive ? semantic.color.fill.accent : 'transparent';
+}, semantic.motion.transition.feedback, forcedColors, function (props) {
+  return props.$isActive ? 'Highlight' : 'transparent';
+}, function (props) {
+  return props.$isActive ? semantic.color.fill['accent-muted-hover'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text['interactive-hover'] : semantic.color.text["default"];
+  return props.$isActive ? semantic.color.text['accent-hover'] : semantic.color.text["default"];
 }, function (props) {
-  return props.$isActive ? semantic.color.background['interactive-subtle-active'] : 'transparent';
+  return props.$isActive ? semantic.color.fill['accent-muted-pressed'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text['interactive-active'] : semantic.color.text["default"];
+  return props.$isActive ? semantic.color.text['accent-pressed'] : semantic.color.text["default"];
 }, function (props) {
   return props.$disabled ? '0.5' : '1';
 }, semantic.border.focus, semantic.border.focusOffset);
@@ -7279,7 +7616,7 @@ var StyledBadge = styled.span.withConfig({
  *   onTabChange={setActiveTab}
  * />
  * ```
- */])), tokensJson.component.tabBar.badge.size, tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, tokensJson.component.tabBar.badge.typography, tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle, semantic.color.background.interactive, semantic.color.text.inverse);
+ */])), tokens.component.tabBar.badge.size, tokens.component.tabBar.badge.size, semantic.space[100], tokens.component.tabBar.badge.typography, tokens.component.tabBar.badge.fontWeight, semantic.radius.full, semantic.color.fill.accent, semantic.color.text.inverse);
 /**
  * TabBar component for tabbed navigation
  *
@@ -7425,17 +7762,17 @@ var TabBar = function TabBar(_a) {
 TabBar.displayName = 'TabBar';
 var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 
-var field = tokensJson.component.field;
+var field = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
-var gap = tokensJson.semantic.spacing.layout;
+var space = tokens.semantic.space;
 var StyledFieldContainer = styled.div.withConfig({
   displayName: "TextField__StyledFieldContainer",
   componentId: "sc-1ys3b0-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), gap.sm);
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), space[200]);
 var StyledLabel = styled.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"])), gap.xs, field.label.typography, field.label.color, field.label.colorDisabled);
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space[100], field.label.typography, field.label.color, field.label.colorDisabled);
 var StyledRequiredIndicator = styled.span.withConfig({
   displayName: "TextField__StyledRequiredIndicator",
   componentId: "sc-1ys3b0-2"
@@ -7532,9 +7869,9 @@ var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4
 var StyledContainer = styled.div.withConfig({
   displayName: "TransactionListItem__StyledContainer",
   componentId: "sc-7yunm0-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  ", "\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"])), tokensJson.component.transactionListItem.minHeight, tokensJson.semantic.spacing.layout.md, tokensJson.semantic.spacing.layout.md, tokensJson.semantic.color.background["default"], tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border["default"], tokensJson.semantic.spacing.layout.md, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut, 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  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"])), tokens.component.transactionListItem.minHeight, tokens.semantic.space[300], tokens.semantic.space[300], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], tokens.semantic.space[300], tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.decelerate, function (_a) {
   var $clickable = _a.$clickable;
-  return $clickable && "\n    cursor: pointer;\n    \n    &:hover {\n      background-color: ".concat(tokensJson.semantic.color.background.subtle, ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensJson.semantic.color.background['interactive-active'], ";\n    }\n    \n    &:focus-visible {\n      outline: ").concat(tokensJson.semantic.border.focus, ";\n      outline-offset: calc(-1 * ").concat(tokensJson.semantic.border.focusOffset, ");\n    }\n  ");
+  return $clickable && "\n    cursor: pointer;\n    ".concat(interactiveRow(), "\n    \n    &:focus-visible {\n      outline: ").concat(tokens.semantic.border.focus, ";\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.focusOffset, ");\n    }\n  ");
 });
 var StyledAvatarSection = styled.div.withConfig({
   displayName: "TransactionListItem__StyledAvatarSection",
@@ -7547,23 +7884,23 @@ var StyledMainContent = styled.div.withConfig({
 var StyledTopRow = styled.div.withConfig({
   displayName: "TransactionListItem__StyledTopRow",
   componentId: "sc-7yunm0-3"
-})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm);
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
 var StyledMerchantSection = styled.div.withConfig({
   displayName: "TransactionListItem__StyledMerchantSection",
   componentId: "sc-7yunm0-4"
-})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"])), tokensJson.semantic.spacing.layout.sm);
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"])), tokens.semantic.space[200]);
 var StyledBottomRow = styled.div.withConfig({
   displayName: "TransactionListItem__StyledBottomRow",
   componentId: "sc-7yunm0-5"
-})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm);
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
 var StyledMetadata = styled.div.withConfig({
   displayName: "TransactionListItem__StyledMetadata",
   componentId: "sc-7yunm0-6"
-})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm);
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
 var StyledIconIndicator = styled.div.withConfig({
   displayName: "TransactionListItem__StyledIconIndicator",
   componentId: "sc-7yunm0-7"
-})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"])), tokensJson.semantic.spacing.layout.xs, tokensJson.semantic.color.icon.subdued);
+})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"])), tokens.semantic.space[100], tokens.semantic.color.icon.muted);
 var StyledTruncatedText = styled.span.withConfig({
   displayName: "TransactionListItem__StyledTruncatedText",
   componentId: "sc-7yunm0-8"
@@ -7739,15 +8076,15 @@ var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4
 // 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 = tokensJson.base.spacing;
+var gapSpacing = tokens.base.spacing;
 // Breakpoints using base tokens
 var breakpoints = {
-  xs: tokensJson.semantic.breakpoint.xs,
-  sm: tokensJson.semantic.breakpoint.sm,
-  md: tokensJson.semantic.breakpoint.md,
-  lg: tokensJson.semantic.breakpoint.lg,
-  xl: tokensJson.semantic.breakpoint.xl,
-  '2xl': tokensJson.semantic.breakpoint['2xl']
+  xs: tokens.semantic.breakpoint.xs,
+  sm: tokens.semantic.breakpoint.sm,
+  md: tokens.semantic.breakpoint.md,
+  lg: tokens.semantic.breakpoint.lg,
+  xl: tokens.semantic.breakpoint.xl,
+  '2xl': tokens.semantic.breakpoint['2xl']
 };
 // Media query helpers
 var media = {