@common-origin/design-system 2.16.0 → 2.18.0

package/dist/client.esm.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, useRef, useId, useCallback, useMemo, forwardRef } from 'react';
+import React, { useState, createContext, useContext, useEffect, useRef, useId, useCallback, useMemo, forwardRef } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { t as tokensJson, i as iconsJson } from './data.esm.js';
 import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
@@ -400,7 +400,9 @@ var BadgeIndicator = styled.span.withConfig({
   return props.$isDot ? '0' : "0 ".concat(semantic$i.spacing.component.xs);
 }, radius$4.circle, count.lineHeight, ring.width, color$9.background["default"], scaleIn$2, semantic$i.motion.duration.normal, semantic$i.motion.easing.easeOut, reducedMotion, function (props) {
   switch (props.$variant) {
+    case '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        ");
     case 'error':
       return "\n          background-color: ".concat(color$9.background.error, ";\n          color: ").concat(color$9.text.inverse, ";\n        ");
@@ -548,7 +550,7 @@ var StyledBox = styled.div.withConfig({
 }, 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: ", " solid ", ";\n      outline-offset: ", ";\n    }\n  "], ["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: ", " solid ", ";\n      outline-offset: ", ";\n    }\n  "])), props.$hoverShadow && 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.width.thick, tokensJson.semantic.color.border.interactive, tokensJson.semantic.border.focusOffset);
+  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);
 }, function (props) {
   return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
 }, function (props) {
@@ -735,7 +737,11 @@ var Icon = function Icon(_a) {
     size = _b === void 0 ? 'lg' : _b,
     _c = _a.iconColor,
     iconColor = _c === void 0 ? 'default' : _c,
+    ariaLabel = _a["aria-label"],
+    title = _a.title,
     dataTestId = _a["data-testid"];
+  // Decorative unless it's given a name. A blank name is no name, so the icon stays hidden
+  var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) || (title === null || title === void 0 ? void 0 : title.trim()) || undefined;
   // Get the icon data from the JSON file
   var iconData = iconsJson[name];
   if (!iconData) {
@@ -750,16 +756,23 @@ var Icon = function Icon(_a) {
     "$size": size,
     "$iconColor": iconColor,
     "data-testid": dataTestId,
-    children: jsx("svg", {
+    children: jsxs("svg", __assign({
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      role: "img",
-      "aria-label": iconData.name,
-      children: jsx("path", {
+      xmlns: "http://www.w3.org/2000/svg"
+    }, label ? {
+      role: 'img',
+      'aria-label': label
+    } : {
+      'aria-hidden': true,
+      focusable: false
+    }, {
+      children: [(title === null || title === void 0 ? void 0 : title.trim()) && jsx("title", {
+        children: title
+      }), jsx("path", {
         d: iconData.path
-      })
-    })
+      })]
+    }))
   });
 };
 var templateObject_1$H;
@@ -1001,7 +1014,7 @@ var StyledCategoryLabel = styled.span.withConfig({
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
-    return category["".concat($color, "-emphasis")];
+    return category["".concat($color, "-strong")];
   }
   if ($variant === 'outlined') {
     return 'transparent';
@@ -1091,8 +1104,7 @@ var CategoryLabel = function CategoryLabel(_a) {
       children: [icon && jsx(Icon, {
         name: icon,
         size: iconSize,
-        iconColor: variant === 'filled' ? 'inverse' : 'inherit',
-        "aria-hidden": "true"
+        iconColor: variant === 'filled' ? 'inverse' : 'inherit'
       }), children]
     }), accessibleLabel && jsx(HiddenLabel, {
       children: accessibleLabel
@@ -1537,12 +1549,9 @@ var DateFormatter = function DateFormatter(_a) {
   var date = parseISO(dateString);
   var displayText;
   switch (mode) {
-    case 'relative':
-      // Always use relative labels (Today/Yesterday) or fall back to day name
-      displayText = formatDateSmart(date, formatString);
-      break;
+    case 'relative': // Deprecated alias for 'smart', removed in 3.0 (#82)
     case 'smart':
-      // Smart mode: relative for recent, absolute for older
+      // Today, Yesterday or the day name for recent dates; formatted for older ones
       displayText = formatDateSmart(date, formatString);
       break;
     case 'absolute':
@@ -1784,14 +1793,18 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     "$weight": weight,
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    children: [showPositiveIcon && !showNegativeIcon && jsx(Icon, {
+    children: [showPositiveIcon && !showNegativeIcon &&
+    // The amount is shown without a sign, so the icon is the sign and needs a name (#85)
+    jsx(Icon, {
       name: "addRing",
       size: iconSize,
-      iconColor: iconColor
+      iconColor: iconColor,
+      "aria-label": "Plus"
     }), showNegativeIcon && jsx(Icon, {
       name: "remove",
       size: iconSize,
-      iconColor: iconColor
+      iconColor: iconColor,
+      "aria-label": "Minus"
     }), jsx(Typography, {
       variant: typographyVariant,
       color: amountColor,
@@ -1818,7 +1831,7 @@ var ProgressBarContainer = styled.div.withConfig({
   },
   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.disabled, radius$2.xs, function (props) {
+})(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) {
   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);
@@ -1840,7 +1853,8 @@ var ProgressBarFill = styled.div.withConfig({
       break;
     case 'default':
     default:
-      backgroundColor = color$6.background.interactive;
+      // Near-black, like Slider's fill (decision 0029)
+      backgroundColor = color$6.background.emphasis;
       break;
   }
   return css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
@@ -2193,8 +2207,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
       children: [showIcon && jsx(Icon, {
         name: statusConfig.icon,
         size: sizeStyles.iconSize,
-        iconColor: "inherit",
-        "aria-hidden": "true"
+        iconColor: "inherit"
       }), displayLabel, jsxs(ScreenReaderOnly, {
         children: [status, " status"]
       })]
@@ -2521,6 +2534,12 @@ var AccountCard = function AccountCard(_a) {
 };
 var templateObject_1$t, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$f;
 
+/**
+ * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
+ * a List it's `comfortable`. Internal: not exported from the package.
+ */
+var ListSpacingContext = /*#__PURE__*/createContext('comfortable');
+
 var semantic$b = tokensJson.semantic;
 var _a$5 = semantic$b.motion,
   duration$2 = _a$5.duration,
@@ -2548,7 +2567,7 @@ 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: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color ", " ", ";\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"])), semantic$b.spacing.layout.md, function (_a) {
+})(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) {
   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) {
@@ -2565,7 +2584,7 @@ var StyledItemContent = styled.div.withConfig({
     $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  ");
-}, semantic$b.border.width.thick, semantic$b.color.border.interactive, semantic$b.border.focusOffset);
+}, semantic$b.border.focus, semantic$b.border.focusOffset);
 var StyledIconContainer$1 = styled.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
   componentId: "sc-1wzzt21-2"
@@ -2627,8 +2646,7 @@ var ListItem = function ListItem(_a) {
     selected = _f === void 0 ? false : _f,
     _g = _a.destructive,
     destructive = _g === void 0 ? false : _g,
-    _h = _a.spacing,
-    spacing = _h === void 0 ? 'comfortable' : _h,
+    spacingProp = _a.spacing,
     children = _a.children,
     className = _a.className,
     dataTestId = _a["data-testid"],
@@ -2638,6 +2656,8 @@ var ListItem = function ListItem(_a) {
     customTabIndex = _a.tabIndex,
     customOnKeyDown = _a.onKeyDown,
     props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "destructive", "spacing", "children", "className", 'data-testid', "role", 'aria-selected', "id", "tabIndex", "onKeyDown"]);
+  var listSpacing = useContext(ListSpacingContext);
+  var spacing = spacingProp !== null && spacingProp !== void 0 ? spacingProp : listSpacing;
   var isInteractive = interactive || expandable || customRole === 'option';
   var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
   var ariaExpanded = expandable ? expanded : undefined;
@@ -2662,61 +2682,69 @@ var ListItem = function ListItem(_a) {
       handleClick();
     }
   };
-  return jsxs(StyledListItem, __assign({
-    "$interactive": isInteractive,
-    "$disabled": disabled,
-    "$selected": selected,
-    "$destructive": destructive,
-    "$spacing": spacing,
-    className: className,
-    "data-testid": dataTestId,
-    role: customRole || 'listitem',
-    id: id,
-    "aria-selected": ariaSelected
-  }, props, {
-    children: [jsxs(StyledItemContent, {
-      "$interactive": isInteractive,
-      "$disabled": disabled,
-      "$selected": selected,
-      "$destructive": destructive,
-      "$spacing": spacing,
-      role: contentRole,
-      "aria-expanded": ariaExpanded,
-      "aria-disabled": ariaDisabled,
-      "aria-current": ariaCurrent,
-      tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      children: [icon && jsx(StyledIconContainer$1, {
-        "aria-hidden": "true",
-        children: icon
-      }), jsxs(StyledTextContent, {
-        children: [jsx(Typography, {
-          variant: "body",
-          color: destructive ? 'error' : 'default',
-          children: primary
-        }), secondary && jsx(Typography, {
-          variant: "small",
-          color: "subdued",
-          children: secondary
-        })]
-      }), jsxs(StyledRightContent, {
-        children: [badge, expandable && jsx(StyledChevronIcon, {
+  return (
+    // The List's spacing is for its own items: reset it for this item's content, so components
+    // built on ListItem (ActionSheet, even through its portal) and expanded content keep their own
+    // density. A nested List provides its own spacing (#77)
+    jsx(ListSpacingContext.Provider, {
+      value: "comfortable",
+      children: jsxs(StyledListItem, __assign({
+        "$interactive": isInteractive,
+        "$disabled": disabled,
+        "$selected": selected,
+        "$destructive": destructive,
+        "$spacing": spacing,
+        className: className,
+        "data-testid": dataTestId,
+        role: customRole || 'listitem',
+        id: id,
+        "aria-selected": ariaSelected
+      }, props, {
+        children: [jsxs(StyledItemContent, {
+          "$interactive": isInteractive,
+          "$disabled": disabled,
+          "$selected": selected,
+          "$destructive": destructive,
+          "$spacing": spacing,
+          role: contentRole,
+          "aria-expanded": ariaExpanded,
+          "aria-disabled": ariaDisabled,
+          "aria-current": ariaCurrent,
+          tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: [icon && jsx(StyledIconContainer$1, {
+            "aria-hidden": "true",
+            children: icon
+          }), jsxs(StyledTextContent, {
+            children: [jsx(Typography, {
+              variant: "body",
+              color: destructive ? 'error' : 'default',
+              children: primary
+            }), secondary && jsx(Typography, {
+              variant: "small",
+              color: "subdued",
+              children: secondary
+            })]
+          }), jsxs(StyledRightContent, {
+            children: [badge, expandable && jsx(StyledChevronIcon, {
+              "$expanded": expanded,
+              "aria-hidden": "true",
+              children: jsx(Icon, {
+                name: "caretDown",
+                size: "sm"
+              })
+            })]
+          })]
+        }), expandable && children && jsx(StyledExpandedContent, {
+          "$spacing": spacing,
           "$expanded": expanded,
-          "aria-hidden": "true",
-          children: jsx(Icon, {
-            name: "caretDown",
-            size: "sm"
-          })
+          "aria-hidden": !expanded,
+          children: children
         })]
-      })]
-    }), expandable && children && jsx(StyledExpandedContent, {
-      "$spacing": spacing,
-      "$expanded": expanded,
-      "aria-hidden": !expanded,
-      children: children
-    })]
-  }));
+      }))
+    })
+  );
 };
 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;
@@ -2800,7 +2828,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, layout$1.xs);
+})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), layout$1.sm, color$4.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$4.icon["default"], color$4.background.surface, border$5.focus, border$5.focusOffset);
 var StyledActionsList = styled.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
@@ -4463,12 +4491,12 @@ var StyledCheckbox = styled.span.withConfig({
   return props.$checked || props.$indeterminate ? tokensJson.semantic.color.background.inverse : tokensJson.component.input["default"].backgroundColor;
 }, function (props) {
   if (props.$state === 'error') return tokensJson.component.input.error.borderColor;
-  if (props.$checked || props.$indeterminate) return tokensJson.semantic.border.strong;
+  if (props.$checked || props.$indeterminate) return tokensJson.semantic.color.border.strong;
   return tokensJson.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.border.strong : tokensJson.component.input.hover.borderColor;
+  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;
 }, function (props) {
@@ -4671,7 +4699,7 @@ var _a$2 = tokensJson.semantic,
 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  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n"])), color$2.background.subtle, border$3.subtle, 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"])), 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) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
@@ -4683,7 +4711,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);
 var CodeBlockWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CodeBlockWrapper",
   componentId: "sc-1p1t0kp-1"
@@ -5248,13 +5276,30 @@ var DropdownOption = styled.button.withConfig({
   },
   displayName: "Dropdown__DropdownOption",
   componentId: "sc-kz07c4-4"
-})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, 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  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) {
   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;
-  if ($isSelected) return color$1.background.surface;
   return 'transparent';
-}, input$1["default"].font, input$1["default"].textColor, duration.fast, easing.easeOut, color$1.background.surface, color$1.background.surface, border$1.subtle);
+}, 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);
 var StyledHelperText$3 = styled.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"
@@ -5414,7 +5459,7 @@ var Dropdown = function Dropdown(_a) {
       role: "listbox",
       "aria-labelledby": dropdownId,
       children: options.map(function (option, index) {
-        return jsx(DropdownOption, {
+        return jsxs(DropdownOption, {
           "$isSelected": option.id === value,
           "$isFocused": index === focusedIndex,
           onClick: function onClick() {
@@ -5422,7 +5467,11 @@ var Dropdown = function Dropdown(_a) {
           },
           role: "option",
           "aria-selected": option.id === value,
-          children: option.label
+          children: [option.label, option.id === value && jsx(Icon, {
+            name: "check",
+            size: "sm",
+            iconColor: "inherit"
+          })]
         }, option.id);
       })
     }), error && jsx(StyledHelperText$3, {
@@ -5459,15 +5508,17 @@ var List = function List(_a) {
     className = _a.className,
     dataTestId = _a["data-testid"],
     props = __rest(_a, ["children", "dividers", "spacing", "className", 'data-testid']);
-  return jsx(StyledList, __assign({
-    "$dividers": dividers,
-    "$spacing": spacing,
-    className: className,
-    "data-testid": dataTestId,
-    role: "list"
-  }, props, {
-    children: children
-  }));
+  return jsx(ListSpacingContext.Provider, {
+    value: spacing,
+    children: jsx(StyledList, __assign({
+      "$dividers": dividers,
+      className: className,
+      "data-testid": dataTestId,
+      role: "list"
+    }, props, {
+      children: children
+    }))
+  });
 };
 List.displayName = 'List';
 var templateObject_1$c;
@@ -6233,7 +6284,7 @@ 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  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n"])), semantic$3.spacing.layout.xs, 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);
+})(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);
 var StyledSectionHeader = styled.div.withConfig({
   displayName: "SearchField__StyledSectionHeader",
   componentId: "sc-qhz9i8-4"
@@ -6456,8 +6507,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
       children: [jsx(Icon, {
         name: "search",
         size: "sm",
-        iconColor: "subdued",
-        "aria-hidden": "true"
+        iconColor: "subdued"
       }), jsx(StyledInput, __assign({
         ref: inputRef,
         type: "text",
@@ -6523,11 +6573,10 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
           secondary: description,
           icon: item.type === 'recent' ? jsx(Icon, {
             name: "refresh",
-            size: "xs",
-            "aria-hidden": "true"
+            size: "xs"
           }) : undefined,
           interactive: true,
-          selected: index === highlightedIndex,
+          "data-highlighted": index === highlightedIndex || undefined,
           spacing: "compact",
           onClick: function onClick() {
             return handleSuggestionClick(item);
@@ -6807,7 +6856,7 @@ var StyledTrackFill = styled.div.withConfig({
 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: ", " solid ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: -", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  transform: translateX(-50%);\n  transition: ", ";\n  box-shadow: ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"])), semantic$1.spacing.layout.xl, semantic$1.spacing.layout.xl, semantic$1.spacing.layout.sm, function (_a) {
+})(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) {
   var $disabled = _a.$disabled;
   return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
 }, semantic$1.border.width.thick, function (_a) {
@@ -6816,7 +6865,7 @@ var StyledThumb = styled.div.withConfig({
 }, semantic$1.border.radius.circle, 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.width.thick, semantic$1.color.border.interactive, semantic$1.spacing.layout.xs, function (_a) {
+}, 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) {
   var $active = _a.$active;
   return $active && "\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ".concat(tokensJson.component.slider.thumb.shadow.active, ";\n  ");
 });
@@ -7187,7 +7236,7 @@ var StyledTab = styled.button.withConfig({
   },
   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: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Pressed nudge */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Pressed nudge */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
+})(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) {
   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';
@@ -7205,7 +7254,7 @@ var StyledTab = styled.button.withConfig({
   return props.$isActive ? semantic.color.text['interactive-active'] : semantic.color.text["default"];
 }, function (props) {
   return props.$disabled ? '0.5' : '1';
-}, semantic.border.width.thick, semantic.color.border.strong, semantic.spacing.layout.xs);
+}, semantic.border.focus, semantic.border.focusOffset);
 var StyledBadge = styled.span.withConfig({
   displayName: "TabBar__StyledBadge",
   componentId: "sc-1g9ib0y-2"
@@ -7485,7 +7534,7 @@ var StyledContainer = styled.div.withConfig({
   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) {
   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.width.thick, " solid ").concat(tokensJson.semantic.color.border.interactive, ";\n      outline-offset: calc(-1 * ").concat(tokensJson.semantic.border.focusOffset, ");\n    }\n  ");
+  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  ");
 });
 var StyledAvatarSection = styled.div.withConfig({
   displayName: "TransactionListItem__StyledAvatarSection",
@@ -7671,20 +7720,14 @@ var TransactionListItem = function TransactionListItem(_a) {
             })
           })]
         }), (hasReceipt || hasNote) && jsxs(StyledIconIndicator, {
-          children: [hasReceipt && jsx("span", {
-            "aria-label": "Has receipt",
-            role: "img",
-            children: jsx(Icon, {
-              name: "fileDocSearch",
-              size: "xs"
-            })
-          }), hasNote && jsx("span", {
-            "aria-label": "Has note",
-            role: "img",
-            children: jsx(Icon, {
-              name: "paper",
-              size: "xs"
-            })
+          children: [hasReceipt && jsx(Icon, {
+            name: "fileDocSearch",
+            size: "xs",
+            "aria-label": "Has receipt"
+          }), hasNote && jsx(Icon, {
+            name: "paper",
+            size: "xs",
+            "aria-label": "Has note"
           })]
         })]
       })]