@common-origin/design-system 2.8.2 → 2.10.0

package/dist/index.js

@@ -103,7 +103,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var base$c = {
+var base$d = {
 	border: {
 		radius: {
 			"1": "0.125rem",
@@ -755,7 +755,7 @@ var component$3 = {
 	},
 	$ref: "./component/index.json"
 };
-var semantic$j = {
+var semantic$k = {
 	elevation: {
 		none: "none",
 		inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
@@ -959,44 +959,44 @@ var semantic$j = {
 	$ref: "./semantic/index.json"
 };
 var tokensData = {
-	base: base$c,
+	base: base$d,
 	component: component$3,
-	semantic: semantic$j
+	semantic: semantic$k
 };
 
 // Destructure tokens
-var semantic$i = tokensData.semantic;
-var color$a = semantic$i.color,
-  size$1 = semantic$i.size,
-  border$a = semantic$i.border;
-var radius$6 = border$a.radius;
+var semantic$j = tokensData.semantic;
+var color$a = semantic$j.color,
+  size$1 = semantic$j.size,
+  border$a = semantic$j.border;
+var radius$5 = border$a.radius;
 var AvatarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
+})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
   var $size = _a.$size;
   return size$1.avatar[$size];
 }, function (_a) {
   var $size = _a.$size;
   return size$1.avatar[$size];
-}, radius$6.circle, color$a.background.surface);
+}, radius$5.circle, color$a.background.surface);
 var AvatarImage = styled.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$u || (templateObject_2$u = __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.circle);
+})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), radius$5.circle);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
+})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
 ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -1062,7 +1062,7 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$J, templateObject_2$u, templateObject_3$r;
+var templateObject_1$K, templateObject_2$v, templateObject_3$s;
 
 var _a$8 = tokensData.semantic,
   typography$5 = _a$8.typography,
@@ -1129,7 +1129,7 @@ var StyledTypography = styled.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"
+})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"
 /**
  * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
  *
@@ -1197,24 +1197,24 @@ var Typography = function Typography(_a) {
     children: children
   });
 };
-var templateObject_1$I;
+var templateObject_1$J;
 
-var semantic$h = tokensData.semantic;
-var color$8 = semantic$h.color,
-  border$9 = semantic$h.border;
-var radius$5 = border$9.radius;
-var scaleIn$1 = styled.keyframes(templateObject_1$H || (templateObject_1$H = __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 semantic$i = tokensData.semantic;
+var color$8 = semantic$i.color,
+  border$9 = semantic$i.border;
+var radius$4 = border$9.radius;
+var scaleIn$2 = styled.keyframes(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = styled.span.withConfig({
   displayName: "Badge__BadgeWrapper",
   componentId: "sc-tjz4pp-0"
-})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
+})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
 var BadgeIndicator = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
+})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? '8px' : '16px';
@@ -1222,7 +1222,7 @@ var BadgeIndicator = styled.span.withConfig({
   return props.$isDot ? '8px' : '16px';
 }, function (props) {
   return props.$isDot ? '0' : '0 4px';
-}, radius$5.circle, color$8.background["default"], scaleIn$1, function (props) {
+}, radius$4.circle, color$8.background["default"], scaleIn$2, function (props) {
   switch (props.$variant) {
     case 'primary':
       return "\n          background-color: ".concat(color$8.background.interactive, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
@@ -1239,7 +1239,7 @@ var BadgeIndicator = styled.span.withConfig({
 var ScreenReaderOnly$1 = styled.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
   componentId: "sc-tjz4pp-2"
-})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"])));
+})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"])));
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -1275,7 +1275,7 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l;
+var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$m;
 
 var StyledBox = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1286,23 +1286,23 @@ var StyledBox = styled.div.withConfig({
 })(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"
 // Transform component that maps clean props to $-prefixed props for styled-components
 ])), function (props) {
-  return props.$display && styled.css(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && styled.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && styled.css(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && styled.css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && styled.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && styled.css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
-  return props.$alignItems && styled.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+  return props.$alignItems && styled.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && styled.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && styled.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
   return props.$gap && styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
 }, function (props) {
-  return props.$m && styled.css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
+  return props.$m && styled.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
 }, function (props) {
-  return props.$mt && styled.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
+  return props.$mt && styled.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
 }, function (props) {
-  return props.$mr && styled.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
+  return props.$mr && styled.css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
 }, function (props) {
   return props.$mb && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
 }, function (props) {
@@ -1510,7 +1510,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$a, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
+var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$7, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
 
 var add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -2230,7 +2230,7 @@ var IconStyled = styled.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+})(templateObject_1$G || (templateObject_1$G = __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 tokensData.semantic.size.icon[$size];
 }, function (_a) {
@@ -2296,12 +2296,12 @@ var Icon = function Icon(_a) {
     })
   });
 };
-var templateObject_1$F;
+var templateObject_1$G;
 
 var button$1 = tokensData.component.button,
-  semantic$g = tokensData.semantic;
+  semantic$h = tokensData.semantic;
 // Base styles shared between button and link
-var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$g.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(button$1.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$h.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(button$1.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
@@ -2370,14 +2370,14 @@ var StyledButton = styled.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$E || (templateObject_1$E = __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$F || (templateObject_1$F = __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);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
-})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+})(templateObject_2$s || (templateObject_2$s = __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);
 // Helper function to get icon size based on button size
@@ -2478,24 +2478,24 @@ var Button = function Button(_a) {
     children: renderButtonContent(children, iconName, size)
   }));
 };
-var templateObject_1$E, templateObject_2$r;
+var templateObject_1$F, templateObject_2$s;
 
-var semantic$f = tokensData.semantic,
-  base$b = tokensData.base;
-var color$7 = semantic$f.color,
-  typography$4 = semantic$f.typography,
-  border$8 = semantic$f.border,
-  spacing$7 = semantic$f.spacing;
+var semantic$g = tokensData.semantic,
+  base$c = tokensData.base;
+var color$7 = semantic$g.color,
+  typography$4 = semantic$g.typography,
+  border$8 = semantic$g.border,
+  spacing$7 = semantic$g.spacing;
 var category = color$7.category;
-var radius$4 = border$8.radius;
-var layout$3 = spacing$7.layout;
+var radius$3 = border$8.radius;
+var layout$4 = spacing$7.layout;
 var StyledCategoryBadge = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "CategoryBadge__StyledCategoryBadge",
   componentId: "sc-17aslpn-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border-color: ", ";\n"
+})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border-color: ", ";\n"
 /**
  * CategoryBadge component for displaying transaction categories
  *
@@ -2513,16 +2513,16 @@ var StyledCategoryBadge = styled.span.withConfig({
  *   Travel
  * </CategoryBadge>
  * ```
- */])), radius$4.circle, base$b.fontWeight[3], base$b.border.width[1], function (_a) {
+ */])), radius$3.circle, base$c.fontWeight[3], base$c.border.width[1], function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? '24px' : '32px';
 }, function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? "".concat(layout$3.xs, " ").concat(layout$3.sm) : "".concat(layout$3.sm, " ").concat(layout$3.md);
+  return $size === 'small' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? typography$4.caption : typography$4.small;
-}, layout$3.xs, function (_a) {
+}, layout$4.xs, function (_a) {
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
@@ -2593,7 +2593,7 @@ var CategoryBadge = function CategoryBadge(_a) {
   });
 };
 CategoryBadge.displayName = 'CategoryBadge';
-var templateObject_1$D;
+var templateObject_1$E;
 
 var chip = tokensData.component.chip;
 // Helper function to get variant styles matching Button's approach
@@ -2637,7 +2637,7 @@ var StyledChip = styled.span.withConfig({
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$C || (templateObject_1$C = __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$D || (templateObject_1$D = __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"
 // Icon container for selected indicator or leading icons
 ])), chip["default"].borderRadius, tokensData.semantic.motion.hover, function (props) {
   return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
@@ -2646,7 +2646,7 @@ var StyledChip = styled.span.withConfig({
 var IconContainer = styled.span.withConfig({
   displayName: "ChipBase__IconContainer",
   componentId: "sc-moa6zc-1"
-})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
+})(templateObject_2$r || (templateObject_2$r = __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
 ])), tokensData.semantic.spacing.layout.xs);
 // Close button for dismissible chips
@@ -2656,10 +2656,10 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokensData.semantic.spacing.layout.sm, tokensData.semantic.border.radius.xs, function (props) {
+})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokensData.semantic.spacing.layout.sm, tokensData.semantic.border.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, tokensData.semantic.motion.hover, tokensData.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
-var templateObject_1$C, templateObject_2$q, templateObject_3$o;
+var templateObject_1$D, templateObject_2$r, templateObject_3$p;
 
 /**
  * Chip - Compact element for displaying tags, categories, and labels
@@ -2909,7 +2909,7 @@ var spacing$6 = tokensData.semantic.spacing;
 var StyledContainer$2 = styled.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing$6.layout['2xl'], spacing$6.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing$6.layout['2xl'], spacing$6.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
 var Container$1 = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
@@ -2917,25 +2917,25 @@ var Container$1 = function Container(_a) {
     children: children
   }));
 };
-var templateObject_1$B;
+var templateObject_1$C;
 
-var base$a = tokensData.base;
+var base$b = tokensData.base;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$A || (templateObject_1$A = __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$B || (templateObject_1$B = __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);
 var ImageLink = styled.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$a.duration.normal, base$a.easing.easeInOut);
+})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
 var ImageButton = styled.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$a.duration.normal, base$a.easing.easeInOut);
+})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
-})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), base$a.border.radius[2]);
+})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), base$b.border.radius[2]);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -2965,7 +2965,7 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$A, templateObject_2$p, templateObject_3$n, templateObject_4$j;
+var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
 
 var _a$7 = tokensData.semantic,
   typography$3 = _a$7.typography,
@@ -2973,7 +2973,7 @@ var _a$7 = tokensData.semantic,
 var TimeStyled = styled.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * Formats a date with smart relative/absolute logic
  */])), typography$3.label, color$6.text.subdued);
@@ -3022,7 +3022,7 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$z;
+var templateObject_1$A;
 
 var motion$2 = tokensData.semantic.motion,
   _a$6 = tokensData.component,
@@ -3034,7 +3034,7 @@ var IconButtonStyled = styled.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
+})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'primary':
@@ -3142,7 +3142,7 @@ var IconButton = function IconButton(_a) {
     })
   }));
 };
-var templateObject_1$y;
+var templateObject_1$z;
 
 var StyledWrapper = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3150,7 +3150,7 @@ var StyledWrapper = styled.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"
+})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -3253,28 +3253,28 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     })]
   });
 };
-var templateObject_1$x;
+var templateObject_1$y;
 
 // Destructure tokens
-var semantic$e = tokensData.semantic;
-var _a$5 = __assign(__assign({}, semantic$e), {
+var semantic$f = tokensData.semantic;
+var _a$5 = __assign(__assign({}, semantic$f), {
     component: tokensData.component
   }),
   color$5 = _a$5.color,
   border$7 = _a$5.border,
   motion$1 = _a$5.motion,
   component$2 = _a$5.component;
-var radius$3 = border$7.radius;
+var radius$2 = border$7.radius;
 var ProgressBarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
-})(templateObject_3$m || (templateObject_3$m = __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$5.background.disabled, radius$3.xs, function (props) {
-  return props.$variant === 'horizontal' && styled.css(templateObject_1$w || (templateObject_1$w = __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);
+})(templateObject_3$n || (templateObject_3$n = __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$5.background.disabled, radius$2.xs, function (props) {
+  return props.$variant === 'horizontal' && styled.css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
 }, function (props) {
-  return props.$variant === 'vertical' && styled.css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
+  return props.$variant === 'vertical' && styled.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
 });
 var ProgressBarFill = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3282,7 +3282,7 @@ var ProgressBarFill = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarFill",
   componentId: "sc-1nco33q-1"
-})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), motion$1.transition.normal, function (props) {
+})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), motion$1.transition.normal, function (props) {
   var backgroundColor;
   switch (props.$color) {
     case 'success':
@@ -3296,9 +3296,9 @@ var ProgressBarFill = styled.div.withConfig({
       backgroundColor = color$5.background.interactive;
       break;
   }
-  return styled.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
+  return styled.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
 }, function (props) {
-  return props.$variant === 'horizontal' && styled.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+  return props.$variant === 'horizontal' && styled.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 }, function (props) {
   return props.$variant === 'vertical' && styled.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 });
@@ -3327,7 +3327,7 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$w, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$9;
+var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a;
 
 // Destructure tokens for cleaner access
 var separatorTokens = tokensData.component.separator;
@@ -3338,7 +3338,7 @@ var StyledDivider = styled.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
+})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
 /**
  * Divider is an atomic component that provides visual separation between content sections.
  *
@@ -3451,7 +3451,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$v;
+var templateObject_1$w;
 
 var StyledStack = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3459,7 +3459,7 @@ var StyledStack = styled.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
+})(templateObject_1$v || (templateObject_1$v = __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
 ])));
 // Helper function to convert gap prop to CSS value
@@ -3498,15 +3498,15 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
-var templateObject_1$u;
+var templateObject_1$v;
 
 // Destructure tokens for cleaner access
 var statusColors = tokensData.semantic.color.status;
 var spacing$5 = tokensData.semantic.spacing.layout;
-var radius$2 = tokensData.semantic.border.radius;
+var radius$1 = tokensData.semantic.border.radius;
 var transition = tokensData.semantic.motion.transition;
 var typography$2 = tokensData.semantic.typography;
-var scaleIn = styled.keyframes(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
+var scaleIn$1 = styled.keyframes(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
   var configs = {
     pending: {
@@ -3573,7 +3573,7 @@ var StyledStatusBadge = styled.span.withConfig({
   },
   displayName: "StatusBadge__StyledStatusBadge",
   componentId: "sc-1paksgb-0"
-})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: 500;\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " 0.2s ease-out;\n  transition: ", ";\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: 500;\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " 0.2s ease-out;\n  transition: ", ";\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$2.circle, scaleIn, transition.fast, function (_a) {
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: 500;\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " 0.2s ease-out;\n  transition: ", ";\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  font-weight: 500;\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " 0.2s ease-out;\n  transition: ", ";\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius$1.circle, scaleIn$1, transition.fast, function (_a) {
   var $size = _a.$size;
   var size = sizeConfig[$size];
   return "\n      height: ".concat(size.height, ";\n      padding: ").concat(size.padding, ";\n      font: ").concat(size.font, ";\n      gap: ").concat(size.gap, ";\n    ");
@@ -3585,7 +3585,7 @@ var StyledStatusBadge = styled.span.withConfig({
 var ScreenReaderOnly = styled.span.withConfig({
   displayName: "StatusBadge__ScreenReaderOnly",
   componentId: "sc-1paksgb-1"
-})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"
+})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"
 /**
  * StatusBadge component for displaying transaction or task status
  *
@@ -3665,29 +3665,29 @@ var StatusBadge = function StatusBadge(_a) {
   });
 };
 StatusBadge.displayName = 'StatusBadge';
-var templateObject_1$t, templateObject_2$n, templateObject_3$l;
+var templateObject_1$u, templateObject_2$o, templateObject_3$m;
 
-var semantic$d = tokensData.semantic;
-var color$4 = semantic$d.color,
-  spacing$4 = semantic$d.spacing,
-  border$6 = semantic$d.border,
-  typography$1 = semantic$d.typography,
-  size = semantic$d.size;
-var layout$2 = spacing$4.layout;
-var radius$1 = border$6.radius;
+var semantic$e = tokensData.semantic;
+var color$4 = semantic$e.color,
+  spacing$4 = semantic$e.spacing,
+  border$6 = semantic$e.border,
+  typography$1 = semantic$e.typography,
+  size = semantic$e.size;
+var layout$3 = spacing$4.layout;
+var radius = border$6.radius;
 var StyledTag = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Tag__StyledTag",
   componentId: "sc-lzfmti-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
 /**
  * Tag component for categorizing and labeling content
  *
  * A static, non-interactive label used to categorize elements or objects in the UI.
  * Tags help users quickly identify and understand content classification.
- */])), radius$1.sm, size.icon.lg || '2rem', layout$2.xs, layout$2.sm, typography$1.button3, function (_a) {
+ */])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, typography$1.button3, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
@@ -3764,61 +3764,45 @@ var Tag = function Tag(_a) {
     children: children
   }));
 };
-var templateObject_1$s;
+var templateObject_1$t;
 
 // Destructure tokens for cleaner access
-var semantic$c = tokensData.semantic;
-var color$3 = semantic$c.color,
-  spacing$3 = semantic$c.spacing,
-  border$5 = semantic$c.border;
-var layout$1 = spacing$3.layout;
-var background = color$3.background,
-  icon = color$3.icon;
-var radius = border$5.radius;
-var StyledHeader$2 = styled.div.withConfig({
-  displayName: "AccountCard__StyledHeader",
-  componentId: "sc-1erp7zn-0"
-})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  margin-bottom: ", ";\n"])), layout$1.md);
-var StyledIconWrapper = styled.div.withConfig({
-  displayName: "AccountCard__StyledIconWrapper",
-  componentId: "sc-1erp7zn-1"
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border-radius: ", ";\n  color: ", ";\n"], ["\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border-radius: ", ";\n  color: ", ";\n"])), background.inverse, radius.md, icon.interactive);
+var semantic$d = tokensData.semantic;
+var spacing$3 = semantic$d.spacing;
+var layout$2 = spacing$3.layout;
 var StyledBalanceSection = styled.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
-  componentId: "sc-1erp7zn-2"
-})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), layout$1.lg);
+  componentId: "sc-1erp7zn-0"
+})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), layout$2.lg);
 var StyledTrendSection = styled.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
-  componentId: "sc-1erp7zn-3"
-})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  margin-top: ", ";\n"])), layout$1.xs, layout$1.sm);
-var StyledActions$1 = styled.div.withConfig({
+  componentId: "sc-1erp7zn-1"
+})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), layout$2.xs);
+styled.div.withConfig({
   displayName: "AccountCard__StyledActions",
-  componentId: "sc-1erp7zn-4"
-})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n  \n  & > * {\n    flex: 1;\n  }\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n  \n  & > * {\n    flex: 1;\n  }\n"])), layout$1.sm);
+  componentId: "sc-1erp7zn-2"
+})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), layout$2.sm);
 var StyledStackWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
-  componentId: "sc-1erp7zn-5"
-})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  height: 100%;\n  min-height: 168px;\n"], ["\n  height: 100%;\n  min-height: 168px;\n"
-// Map account types to icon names (using placeholders)
-])));
-// Map account types to icon names (using placeholders)
-var accountTypeToIcon = {
-  checking: 'paper',
-  // Will use bank icon
-  savings: 'star',
-  // Will use piggyBank icon
-  credit: 'paper',
-  // Will use creditCard icon
-  investment: 'star',
-  // Will use chartLine icon
-  loan: 'paper' // Will use document icon
-};
+  componentId: "sc-1erp7zn-3"
+})(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var StyledHeaderWrapper = styled.div.withConfig({
+  displayName: "AccountCard__StyledHeaderWrapper",
+  componentId: "sc-1erp7zn-4"
+})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  min-height: 48px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"], ["\n  min-height: 48px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: -", ";\n  }\n"
+// Map trend direction to icon and color
+])), layout$2.none, layout$2.xs);
 // Map trend direction to icon and color
 var trendToIcon = {
   up: 'arrowUp',
   down: 'arrowDown',
   neutral: 'arrowRight'
 };
+var trendToColor = {
+  up: 'green',
+  down: 'red',
+  neutral: 'blue'
+};
 /**
  * AccountCard component
  *
@@ -3826,11 +3810,10 @@ var trendToIcon = {
  * name, balance, optional trend indicator, and action buttons. Minimum
  * 300x200px with elevation and hover effects.
  *
- * Composes: Stack, Box, Icon, Typography, MoneyDisplay, Button
+ * Composes: Stack, Box, Avatar, Typography, MoneyDisplay, Button
  */
 var AccountCard = function AccountCard(_a) {
-  var accountType = _a.accountType,
-    accountName = _a.accountName,
+  var accountName = _a.accountName,
     balance = _a.balance,
     accountNumber = _a.accountNumber,
     trend = _a.trend,
@@ -3842,11 +3825,9 @@ var AccountCard = function AccountCard(_a) {
     onClick = _a.onClick,
     dataTestId = _a["data-testid"];
   var isClickable = !!onClick;
-  // Get account type icon
-  var accountIcon = accountTypeToIcon[accountType];
   // Get trend icon and color
   var trendIcon = trend ? trendToIcon[trend] : undefined;
-  var trendColor = trend === 'up' ? 'success' : trend === 'down' ? 'error' : 'subdued';
+  var trendColor = trend ? trendToColor[trend] : undefined;
   var handleClick = function handleClick() {
     if (isClickable && onClick) {
       onClick();
@@ -3860,9 +3841,8 @@ var AccountCard = function AccountCard(_a) {
   };
   return jsxRuntime.jsx(Box, {
     minWidth: "300px",
-    minHeight: "200px",
     p: "lg",
-    bg: "surface",
+    bg: "subtle",
     border: "default",
     borderRadius: "xl",
     transition: "all 0.2s ease",
@@ -3877,64 +3857,75 @@ var AccountCard = function AccountCard(_a) {
     "data-testid": dataTestId,
     children: jsxRuntime.jsx(StyledStackWrapper, {
       children: jsxRuntime.jsxs(Stack, {
-        direction: "column",
-        gap: "none",
-        children: [jsxRuntime.jsx(StyledHeader$2, {
-          children: jsxRuntime.jsxs(Stack, {
-            direction: "row",
+        direction: "row",
+        justifyContent: "space-between",
+        children: [jsxRuntime.jsxs(Stack, {
+          direction: "row",
+          gap: "md",
+          children: [jsxRuntime.jsx(Avatar, {
+            name: accountName,
+            size: "lg",
+            "data-testid": dataTestId ? "".concat(dataTestId, "-avatar") : undefined
+          }), jsxRuntime.jsxs(Stack, {
+            direction: "column",
+            justifyContent: "space-between",
+            alignItems: "stretch",
             gap: "md",
-            alignItems: "center",
-            children: [jsxRuntime.jsx(StyledIconWrapper, {
-              "aria-label": "".concat(accountType, " account"),
-              role: "img",
-              children: jsxRuntime.jsx(Icon, {
-                name: accountIcon,
-                iconColor: "inverse",
-                size: "md"
+            children: [jsxRuntime.jsx(Stack, {
+              direction: "row",
+              gap: "md",
+              alignItems: "center",
+              children: jsxRuntime.jsxs(StyledHeaderWrapper, {
+                children: [jsxRuntime.jsx(Typography, {
+                  variant: "h4",
+                  children: accountName
+                }), accountNumber && jsxRuntime.jsxs(Typography, {
+                  variant: "small",
+                  color: "subdued",
+                  children: ["\u2022\u2022\u2022\u2022 ", accountNumber]
+                })]
+              })
+            }), jsxRuntime.jsx(StyledBalanceSection, {
+              children: jsxRuntime.jsxs(Stack, {
+                direction: "row",
+                gap: "sm",
+                children: [jsxRuntime.jsx(MoneyDisplay, {
+                  amount: balance,
+                  currency: currency,
+                  size: "medium",
+                  "data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
+                }), jsxRuntime.jsx(Typography, {
+                  color: "subdued",
+                  children: "Available"
+                }), trend && trendValue && jsxRuntime.jsx(StyledTrendSection, {
+                  "aria-label": "Trend ".concat(trend),
+                  role: "img",
+                  children: jsxRuntime.jsx(CategoryBadge, {
+                    size: "small",
+                    icon: trendIcon,
+                    color: trendColor,
+                    variant: "minimal",
+                    children: trendValue
+                  })
+                })]
               })
-            }), jsxRuntime.jsxs(Stack, {
-              direction: "column",
-              gap: "none",
-              children: [jsxRuntime.jsx(Typography, {
-                variant: "h4",
-                children: accountName
-              }), accountNumber && jsxRuntime.jsxs(Typography, {
-                variant: "caption",
-                color: "subdued",
-                children: ["\u2022\u2022\u2022\u2022 ", accountNumber]
-              })]
-            })]
-          })
-        }), jsxRuntime.jsxs(StyledBalanceSection, {
-          children: [jsxRuntime.jsxs(Stack, {
-            direction: "column",
-            gap: "xs",
-            children: [jsxRuntime.jsx(Typography, {
-              variant: "caption",
-              color: "subdued",
-              children: "Balance"
-            }), jsxRuntime.jsx(MoneyDisplay, {
-              amount: balance,
-              currency: currency,
-              size: "xlarge",
-              weight: "bold",
-              "data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
-            })]
-          }), trend && trendValue && jsxRuntime.jsxs(StyledTrendSection, {
-            "aria-label": "Trend ".concat(trend),
-            role: "img",
-            children: [jsxRuntime.jsx(Icon, {
-              name: trendIcon,
-              size: "xs",
-              iconColor: trendColor
-            }), jsxRuntime.jsx(Typography, {
-              variant: "caption",
-              color: trendColor,
-              children: trendValue
             })]
           })]
-        }), (action || secondaryAction) && jsxRuntime.jsxs(StyledActions$1, {
-          children: [action && jsxRuntime.jsx(Button, {
+        }), (action || secondaryAction) && jsxRuntime.jsxs(Stack, {
+          direction: "row",
+          gap: "sm",
+          justifyContent: "flex-end",
+          children: [secondaryAction && jsxRuntime.jsx(Button, {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              secondaryAction.onClick();
+            },
+            variant: secondaryAction.variant || 'secondary',
+            iconName: secondaryAction.icon,
+            "data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
+            size: "small",
+            children: secondaryAction.label
+          }), action && jsxRuntime.jsx(Button, {
             onClick: function onClick(e) {
               e.stopPropagation();
               action.onClick();
@@ -3942,42 +3933,34 @@ var AccountCard = function AccountCard(_a) {
             variant: action.variant || 'primary',
             iconName: action.icon,
             "data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined,
+            size: "small",
             children: action.label
-          }), secondaryAction && jsxRuntime.jsx(Button, {
-            onClick: function onClick(e) {
-              e.stopPropagation();
-              secondaryAction.onClick();
-            },
-            variant: secondaryAction.variant || 'naked',
-            iconName: secondaryAction.icon,
-            "data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
-            children: secondaryAction.label
           })]
         })]
       })
     })
   });
 };
-var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b;
+var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
 
-var semantic$b = tokensData.semantic,
-  base$9 = tokensData.base;
+var semantic$c = tokensData.semantic,
+  base$a = tokensData.base;
 var StyledListItem = styled.li.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledListItem",
   componentId: "sc-1wzzt21-0"
-})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 44px; /* Touch target minimum */\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 44px; /* Touch target minimum */\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), function (_a) {
+})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 44px; /* Touch target minimum */\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 44px; /* Touch target minimum */\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), function (_a) {
   var $interactive = _a.$interactive;
   return $interactive && 'user-select: none;';
 }, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled && "\n    opacity: ".concat(base$9.opacity[50], ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
+  return $disabled && "\n    opacity: ".concat(base$a.opacity[50], ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
 }, function (_a) {
   var $destructive = _a.$destructive,
     $disabled = _a.$disabled;
-  return $destructive && !$disabled && "\n    color: ".concat(semantic$b.color.text.error, ";\n  ");
+  return $destructive && !$disabled && "\n    color: ".concat(semantic$c.color.text.error, ";\n  ");
 });
 var StyledItemContent = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3985,12 +3968,12 @@ var StyledItemContent = styled.div.withConfig({
   },
   displayName: "ListItem__StyledItemContent",
   componentId: "sc-1wzzt21-1"
-})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color 150ms ease;\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color 150ms ease;\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"])), semantic$b.spacing.layout.md, function (_a) {
+})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color 150ms ease;\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  transition: background-color 150ms ease;\n  cursor: ", ";\n  \n  /* Interactive hover states */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"])), semantic$c.spacing.layout.md, function (_a) {
   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);
-}, base$9.border.radius[2], function (_a) {
+  return $spacing === 'compact' ? "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.md) : "".concat(semantic$c.spacing.layout.md, " ").concat(semantic$c.spacing.layout.lg);
+}, base$a.border.radius[2], function (_a) {
   var $selected = _a.$selected;
-  return $selected ? semantic$b.color.background['interactive-subtle'] : 'transparent';
+  return $selected ? semantic$c.color.background['interactive-subtle'] : 'transparent';
 }, function (_a) {
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled;
@@ -4002,26 +3985,26 @@ var StyledItemContent = styled.div.withConfig({
     $disabled = _a.$disabled,
     $selected = _a.$selected;
   return !$disabled && $interactive && "\n    &:hover {\n      background-color: ".concat($selected ? tokensData.component.button.variants.secondary.backgroundColor : tokensData.component.button.variants.secondary.backgroundColor, ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensData.component.button.variants.naked.backgroundColor, ";\n    }\n  ");
-}, semantic$b.color.border.interactive);
+}, semantic$c.color.border.interactive);
 var StyledIconContainer$1 = styled.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
   componentId: "sc-1wzzt21-2"
-})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n"])));
+})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n"])));
 var StyledTextContent = styled.div.withConfig({
   displayName: "ListItem__StyledTextContent",
   componentId: "sc-1wzzt21-3"
-})(templateObject_4$g || (templateObject_4$g = __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$c.spacing.layout.xs);
 var StyledRightContent = styled.div.withConfig({
   displayName: "ListItem__StyledRightContent",
   componentId: "sc-1wzzt21-4"
-})(templateObject_5$c || (templateObject_5$c = __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$d || (templateObject_5$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$c.spacing.layout.sm);
 var StyledChevronIcon = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledChevronIcon",
   componentId: "sc-1wzzt21-5"
-})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: ", ";\n  transition: transform 200ms ease;\n  transform: rotate(", ");\n  pointer-events: none;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: ", ";\n  transition: transform 200ms ease;\n  transform: rotate(", ");\n  pointer-events: none;\n"])), semantic$b.color.icon.subdued, function (_a) {
+})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: ", ";\n  transition: transform 200ms ease;\n  transform: rotate(", ");\n  pointer-events: none;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: ", ";\n  transition: transform 200ms ease;\n  transform: rotate(", ");\n  pointer-events: none;\n"])), semantic$c.color.icon.subdued, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '180deg' : '0deg';
 });
@@ -4031,7 +4014,7 @@ var StyledExpandedContent = styled.div.withConfig({
   },
   displayName: "ListItem__StyledExpandedContent",
   componentId: "sc-1wzzt21-6"
-})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  overflow: hidden;\n  transition: max-height 200ms ease-out, opacity 200ms ease-out;\n  max-height: ", ";\n  opacity: ", ";\n  \n  ", "\n"], ["\n  overflow: hidden;\n  transition: max-height 200ms ease-out, opacity 200ms ease-out;\n  max-height: ", ";\n  opacity: ", ";\n  \n  ", "\n"])), function (_a) {
+})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  overflow: hidden;\n  transition: max-height 200ms ease-out, opacity 200ms ease-out;\n  max-height: ", ";\n  opacity: ", ";\n  \n  ", "\n"], ["\n  overflow: hidden;\n  transition: max-height 200ms ease-out, opacity 200ms ease-out;\n  max-height: ", ";\n  opacity: ", ";\n  \n  ", "\n"])), function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '1000px' : '0';
 }, function (_a) {
@@ -4040,7 +4023,7 @@ var StyledExpandedContent = styled.div.withConfig({
 }, 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, " 48px") : "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.lg, " ").concat(semantic$b.spacing.layout.md, " 60px"), ";\n    background-color: ").concat(semantic$b.color.background['subtle'], ";\n    border-radius: ").concat(base$9.border.radius[2], ";\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$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.md, " ").concat(semantic$c.spacing.layout.sm, " 48px") : "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.lg, " ").concat(semantic$c.spacing.layout.md, " 60px"), ";\n    background-color: ").concat(semantic$c.color.background['subtle'], ";\n    border-radius: ").concat(base$a.border.radius[2], ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$c.spacing.layout.md : semantic$c.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$c.spacing.layout.sm : semantic$c.spacing.layout.md, ";\n  ");
 });
 var ListItem = function ListItem(_a) {
   var primary = _a.primary,
@@ -4153,40 +4136,40 @@ var ListItem = function ListItem(_a) {
   }));
 };
 ListItem.displayName = 'ListItem';
-var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8;
+var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
 
 var _a$4 = tokensData.semantic,
-  color$2 = _a$4.color,
-  border$4 = _a$4.border,
-  layout = _a$4.spacing.layout,
+  color$3 = _a$4.color,
+  border$5 = _a$4.border,
+  layout$1 = _a$4.spacing.layout,
   motion = _a$4.motion,
-  elevation = _a$4.elevation;
-var slideUp = styled.keyframes(templateObject_1$p || (templateObject_1$p = __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$1 = styled.keyframes(templateObject_2$k || (templateObject_2$k = __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$1 = styled.div.withConfig({
+  elevation$1 = _a$4.elevation;
+var slideUp = styled.keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
+var fadeIn$2 = styled.keyframes(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var StyledOverlay$2 = styled.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
-})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"])), fadeIn$1);
+})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"])), fadeIn$2);
 var StyledActionSheet = styled.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: 10000;\n  animation: ", " 0.3s ease-out;\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: 10000;\n  animation: ", " 0.3s ease-out;\n"])), color$2.background.subtle, border$4.radius.lg, border$4.radius.lg, elevation.overlay, slideUp);
-var StyledHeader$1 = styled.div.withConfig({
+})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: 10000;\n  animation: ", " 0.3s ease-out;\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: 10000;\n  animation: ", " 0.3s ease-out;\n"])), color$3.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$1.overlay, slideUp);
+var StyledHeader$2 = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeader",
   componentId: "sc-regbol-2"
-})(templateObject_5$b || (templateObject_5$b = __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.lg, layout.lg, layout.md, border$4["default"]);
+})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
 var StyledHeaderContent = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
 var StyledCloseButton = styled.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7$7 || (templateObject_7$7 = __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.sm, color$2.icon.subdued, border$4.radius.sm, motion.hover, layout.sm, color$2.icon["default"], color$2.background.surface, border$4.focus, layout.xs);
+})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), layout$1.sm, color$3.icon.subdued, border$5.radius.sm, motion.hover, layout$1.sm, color$3.icon["default"], color$3.background.surface, border$5.focus, layout$1.xs);
 var StyledActionsList = styled.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
-})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"
+})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"
 /**
  * ActionSheet component for bottom sheet modals
  *
@@ -4219,7 +4202,7 @@ var StyledActionsList = styled.ul.withConfig({
  *   ]}
  * />
  * ```
- */])), layout.sm, layout.md);
+ */])), layout$1.sm, layout$1.md);
 /**
  * ActionSheet component for bottom sheet modals
  *
@@ -4333,7 +4316,7 @@ var ActionSheet = function ActionSheet(_a) {
   });
   var hasDestructive = destructiveIndex >= 0;
   return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(StyledOverlay$1, {
+    children: [jsxRuntime.jsx(StyledOverlay$2, {
       onClick: handleOverlayClick
     }), jsxRuntime.jsxs(StyledActionSheet, {
       ref: sheetRef,
@@ -4342,7 +4325,7 @@ var ActionSheet = function ActionSheet(_a) {
       "aria-labelledby": title ? 'action-sheet-title' : undefined,
       "aria-describedby": description ? 'action-sheet-description' : undefined,
       "data-testid": dataTestId,
-      children: [(title || description || showCloseButton) && jsxRuntime.jsxs(StyledHeader$1, {
+      children: [(title || description || showCloseButton) && jsxRuntime.jsxs(StyledHeader$2, {
         children: [jsxRuntime.jsx(StyledHeaderContent, {
           children: jsxRuntime.jsxs(Stack, {
             direction: "column",
@@ -4398,7 +4381,7 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$5;
+var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$6;
 
 function detectSpeechRecognitionConstructor(targetWindow) {
   if (!targetWindow) return null;
@@ -4498,69 +4481,69 @@ function agentInputStateTransition(currentState, event) {
   }
 }
 
-var semantic$a = tokensData.semantic,
-  base$8 = tokensData.base,
+var semantic$b = tokensData.semantic,
+  base$9 = tokensData.base,
   component$1 = tokensData.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…';
-var rotateRing = styled.keyframes(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var rotateRing = styled.keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 var Container = styled.div.withConfig({
   displayName: "AgentInput__Container",
   componentId: "sc-fhl996-0"
-})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$8.spacing[2]);
+})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$9.spacing[2]);
 var ControlsRow = styled.div.withConfig({
   displayName: "AgentInput__ControlsRow",
   componentId: "sc-fhl996-1"
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var InputShell = styled.div.withConfig({
   displayName: "AgentInput__InputShell",
   componentId: "sc-fhl996-2"
-})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), base$8.spacing[2], semantic$a.spacing.layout.xs, semantic$a.spacing.layout.sm, semantic$a.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.border.radius['3xl'], semantic$a.elevation.raised, component$1.input.focus.borderColor, component$1.input.focus.outline, component$1.input.focus.outlineOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
+})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), base$9.spacing[2], semantic$b.spacing.layout.xs, semantic$b.spacing.layout.sm, semantic$b.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$b.border.radius['3xl'], semantic$b.elevation.raised, component$1.input.focus.borderColor, component$1.input.focus.outline, component$1.input.focus.outlineOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
 var Input = styled.input.withConfig({
   displayName: "AgentInput__Input",
   componentId: "sc-fhl996-3"
-})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), base$8.spacing[12], semantic$a.typography.body, semantic$a.color.text["default"], semantic$a.color.text.subdued, semantic$a.color.text.disabled);
+})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), base$9.spacing[12], semantic$b.typography.body, semantic$b.color.text["default"], semantic$b.color.text.subdued, semantic$b.color.text.disabled);
 var InputActions = styled.div.withConfig({
   displayName: "AgentInput__InputActions",
   componentId: "sc-fhl996-4"
-})(templateObject_6$8 || (templateObject_6$8 = __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$b.spacing.layout.sm);
 var CircularActionIconButton = styled(IconButton).withConfig({
   displayName: "AgentInput__CircularActionIconButton",
   componentId: "sc-fhl996-5"
-})(templateObject_7$6 || (templateObject_7$6 = __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$b.border.radius.circle);
 var InputWrapper = styled.div.withConfig({
   displayName: "AgentInput__InputWrapper",
   componentId: "sc-fhl996-6"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
+})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
 var MicButtonWrapper = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicButtonWrapper",
   componentId: "sc-fhl996-7"
-})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"])), semantic$a.border.radius.circle);
+})(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"])), semantic$b.border.radius.circle);
 var MicListeningRing = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MicListeningRing",
   componentId: "sc-fhl996-8"
-})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), base$8.border.width[2], base$8.spacing[1], component$1.iconButton.focus.outlineOffset, 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'], function (_a) {
+})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    transparent calc(100% - var(--ring-thickness)),\n    #000 calc(100% - var(--ring-thickness))\n  );\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), base$9.border.width[2], base$9.spacing[1], component$1.iconButton.focus.outlineOffset, semantic$b.border.radius.circle, semantic$b.color.background['interactive-subtle'], semantic$b.color.background.interactive, semantic$b.color.background['interactive-hover'], semantic$b.color.background.interactive, semantic$b.color.background['interactive-subtle'], function (_a) {
   var $reducedMotion = _a.$reducedMotion;
   return !$reducedMotion && styled.css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
 });
 var StatusRow = styled.div.withConfig({
   displayName: "AgentInput__StatusRow",
   componentId: "sc-fhl996-9"
-})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), base$8.spacing[3], base$8.spacing[6]);
+})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), base$9.spacing[3], base$9.spacing[6]);
 var StatusText = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__StatusText",
   componentId: "sc-fhl996-10"
-})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$a.spacing.layout.xl);
+})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic$b.spacing.layout.xl);
 var StatusAnnouncement = styled.div.withConfig({
   displayName: "AgentInput__StatusAnnouncement",
   componentId: "sc-fhl996-11"
@@ -4568,14 +4551,14 @@ var StatusAnnouncement = styled.div.withConfig({
 var MeterContainer = styled.div.withConfig({
   displayName: "AgentInput__MeterContainer",
   componentId: "sc-fhl996-12"
-})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), base$8.spacing[1], base$8.spacing[4]);
+})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), base$9.spacing[1], base$9.spacing[4]);
 var MeterBar = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "AgentInput__MeterBar",
   componentId: "sc-fhl996-13"
-})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height 120ms linear;\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height 120ms linear;\n"])), base$8.spacing[1], base$8.border.radius[1], semantic$a.color.background.interactive, function (_a) {
+})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height 120ms linear;\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height 120ms linear;\n"])), base$9.spacing[1], base$9.border.radius[1], semantic$b.color.background.interactive, function (_a) {
   var $height = _a.$height;
   return "".concat($height * 100, "%");
 });
@@ -5211,10 +5194,10 @@ var AgentInput = function AgentInput(_a) {
     })]
   });
 };
-var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
+var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
 
-var semantic$9 = tokensData.semantic,
-  base$7 = tokensData.base;
+var semantic$a = tokensData.semantic,
+  base$8 = tokensData.base;
 // Default icons by variant
 var variantIcons = {
   error: 'crossCircle',
@@ -5242,56 +5225,56 @@ var StyledAlert = styled.div.withConfig({
   },
   displayName: "Alert__StyledAlert",
   componentId: "sc-18tq5d-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"])), function (_a) {
+})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"])), function (_a) {
   var $inline = _a.$inline;
   return $inline ? 'center' : 'flex-start';
 }, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
+  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
 }, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
-}, base$7.border.radius[2], function (_a) {
+  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
+}, base$8.border.radius[2], function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'error':
-      return "\n          background-color: ".concat(semantic$9.color.background['error-subtle'], ";\n          border-color: ").concat(semantic$9.color.border.error, ";\n          color: ").concat(semantic$9.color.text.error, ";\n        ");
+      return "\n          background-color: ".concat(semantic$a.color.background['error-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.error, ";\n          color: ").concat(semantic$a.color.text.error, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(semantic$9.color.background['warning-subtle'], ";\n          border-color: ").concat(semantic$9.color.border.warning, ";\n          color: ").concat(semantic$9.color.text.warning, ";\n        ");
+      return "\n          background-color: ".concat(semantic$a.color.background['warning-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.warning, ";\n          color: ").concat(semantic$a.color.text.warning, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(semantic$9.color.background['success-subtle'], ";\n          border-color: ").concat(semantic$9.color.border.success, ";\n          color: ").concat(semantic$9.color.text.success, ";\n        ");
+      return "\n          background-color: ".concat(semantic$a.color.background['success-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.success, ";\n          color: ").concat(semantic$a.color.text.success, ";\n        ");
     case 'info':
     default:
-      return "\n          background-color: ".concat(semantic$9.color.background['interactive-subtle'], ";\n          border-color: ").concat(semantic$9.color.border.interactive, ";\n          color: ").concat(semantic$9.color.text.interactive, ";\n        ");
+      return "\n          background-color: ".concat(semantic$a.color.background['interactive-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.interactive, ";\n          color: ").concat(semantic$a.color.text.interactive, ";\n        ");
   }
-}, base$7.breakpoint.md, function (_a) {
+}, base$8.breakpoint.md, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.lg;
+  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.lg;
 });
 var StyledIconContainer = styled.div.withConfig({
   displayName: "Alert__StyledIconContainer",
   componentId: "sc-18tq5d-1"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
+})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
 var StyledContent$1 = styled.div.withConfig({
   displayName: "Alert__StyledContent",
   componentId: "sc-18tq5d-2"
-})(templateObject_3$g || (templateObject_3$g = __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_3$h || (templateObject_3$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$a.spacing.layout.xs);
 var StyledTitle = styled.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
-})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"], ["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"])), semantic$9.typography.h6);
+})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"], ["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"])), semantic$a.typography.h6);
 var StyledMessage = styled.span.withConfig({
   displayName: "Alert__StyledMessage",
   componentId: "sc-18tq5d-4"
-})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  font: ", ";\n\tline-height: 1.25;\n"], ["\n  font: ", ";\n\tline-height: 1.25;\n"])), semantic$9.typography.body);
+})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  font: ", ";\n\tline-height: 1.25;\n"], ["\n  font: ", ";\n\tline-height: 1.25;\n"])), semantic$a.typography.body);
 var StyledActions = styled.div.withConfig({
   displayName: "Alert__StyledActions",
   componentId: "sc-18tq5d-5"
-})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$9.spacing.layout.sm);
+})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$a.spacing.layout.sm);
 var StyledDismissButton = styled(IconButton).withConfig({
   displayName: "Alert__StyledDismissButton",
   componentId: "sc-18tq5d-6"
-})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$9.spacing.layout.xs);
+})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$a.spacing.layout.xs);
 var Alert = function Alert(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'info' : _b,
@@ -5359,21 +5342,21 @@ var Alert = function Alert(_a) {
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$n, templateObject_2$i, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$7, templateObject_7$5;
+var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6;
 
 var _a$3, _b$1, _c, _d, _e, _f;
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
-})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensData.semantic.color.text.subdued, tokensData.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: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
 var BreadcrumbSeparator = styled.span.withConfig({
   displayName: "Breadcrumbs__BreadcrumbSeparator",
   componentId: "sc-7ouzg5-2"
-})(templateObject_3$f || (templateObject_3$f = __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$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"])));
 var isInternalUrl = function isInternalUrl(url) {
   return url.startsWith('/') && !url.startsWith('http');
 };
@@ -5421,12 +5404,12 @@ var Breadcrumbs = function Breadcrumbs(_a) {
     })
   });
 };
-var templateObject_1$m, templateObject_2$h, templateObject_3$f;
+var templateObject_1$n, templateObject_2$i, templateObject_3$g;
 
 var CardSmallStyled = styled.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
   componentId: "sc-jpcqvd-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
 var CardSmall = function CardSmall(_a) {
   var title = _a.title,
     picture = _a.picture,
@@ -5478,13 +5461,13 @@ var CardSmall = function CardSmall(_a) {
     })
   });
 };
-var templateObject_1$l;
+var templateObject_1$m;
 
-var border$3 = tokensData.base.border;
+var border$4 = tokensData.base.border;
 var CardLargeStyled = styled.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
   componentId: "sc-1rfgdzl-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$3.radius[6]);
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$4.radius[6]);
 var CardLarge = function CardLarge(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -5537,7 +5520,7 @@ var CardLarge = function CardLarge(_a) {
     })
   });
 };
-var templateObject_1$k;
+var templateObject_1$l;
 
 /**
  * Hidden native checkbox input for accessibility
@@ -5549,7 +5532,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
   },
   displayName: "SelectableInputBase__HiddenCheckboxInput",
   componentId: "sc-1ddpctx-0"
-})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
 /**
  * Custom checkbox visual component
  * 24px × 24px for 8px grid alignment
@@ -5566,7 +5549,7 @@ var StyledCheckbox = styled.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckbox",
   componentId: "sc-1ddpctx-1"
-})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"
+})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
@@ -5599,7 +5582,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckboxContainer",
   componentId: "sc-1ddpctx-2"
-})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"
+})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"
 /**
  * Label text with proper typography
  */])), tokensData.base.spacing[3], function (props) {
@@ -5616,19 +5599,19 @@ var StyledCheckboxLabel = styled.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckboxLabel",
   componentId: "sc-1ddpctx-3"
-})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
+})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
   return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
 });
-var templateObject_1$j, templateObject_2$g, templateObject_3$e, templateObject_4$c;
+var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$d;
 
 var StyledFieldContainer$3 = styled.div.withConfig({
   displayName: "Checkbox__StyledFieldContainer",
   componentId: "sc-vquz3v-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensData.base.spacing[1]);
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensData.base.spacing[1]);
 var StyledHelperText$4 = styled.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
-})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
+})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
 /**
  * Checkbox component for binary selection with WCAG 2.2 AA compliance
  *
@@ -5747,12 +5730,12 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
 });
 Checkbox.displayName = 'Checkbox';
-var templateObject_1$i, templateObject_2$f;
+var templateObject_1$j, templateObject_2$g;
 
 var ChipGroupWrapper = styled.div.withConfig({
   displayName: "ChipGroup__ChipGroupWrapper",
   componentId: "sc-ae049w-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
+})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
 var ChipGroup = function ChipGroup(_a) {
   var labels = _a.labels,
     _b = _a.variant,
@@ -5772,17 +5755,17 @@ var ChipGroup = function ChipGroup(_a) {
     })
   });
 };
-var templateObject_1$h;
+var templateObject_1$i;
 
 var _a$2 = tokensData.semantic,
-  color$1 = _a$2.color,
-  border$2 = _a$2.border,
+  color$2 = _a$2.color,
+  border$3 = _a$2.border,
   spacing$2 = _a$2.spacing;
   _a$2.motion;
 var StyledCodeBlock = styled.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.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 300ms ease-in-out;\n  \n  ", "\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"])), color$2.background.subtle, border$3.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$2.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
@@ -5798,17 +5781,17 @@ var StyledCodeBlock = styled.pre.withConfig({
 var CodeBlockWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CodeBlockWrapper",
   componentId: "sc-1p1t0kp-1"
-})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
+})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
 var CopyButtonWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CopyButtonWrapper",
   componentId: "sc-1p1t0kp-2"
-})(templateObject_3$d || (templateObject_3$d = __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$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);
 var ExpandButtonWrapper = styled.div.withConfig({
   displayName: "CodeBlock__ExpandButtonWrapper",
   componentId: "sc-1p1t0kp-3"
-})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, tokensData.base.border.radius[2], function (_a) {
+})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, tokensData.base.border.radius[2], 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$1.background.subtle, " 60%\n    );\n  ") : "\n    background: transparent;\n  ";
+  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  ";
 });
 var CopyButton = function CopyButton(_a) {
   var text = _a.text,
@@ -5964,27 +5947,27 @@ var CodeBlock = function CodeBlock(_a) {
     })]
   });
 };
-var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
+var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c;
 
-var StyledHeader = styled.div.withConfig({
+var StyledHeader$1 = styled.div.withConfig({
   displayName: "DateGroup__StyledHeader",
   componentId: "sc-9nfm1f-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.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: 1px solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], function (_a) {
   var $sticky = _a.$sticky;
   return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    box-shadow: ".concat(tokensData.base.shadow[2], ";\n  ");
 });
 var StyledLeftSection = styled.div.withConfig({
   displayName: "DateGroup__StyledLeftSection",
   componentId: "sc-9nfm1f-1"
-})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.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"])), tokensData.semantic.spacing.layout.sm);
 var StyledRightSection = styled.div.withConfig({
   displayName: "DateGroup__StyledRightSection",
   componentId: "sc-9nfm1f-2"
-})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.md);
+})(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"])), tokensData.semantic.spacing.layout.md);
 var StyledContent = styled.div.withConfig({
   displayName: "DateGroup__StyledContent",
   componentId: "sc-9nfm1f-3"
-})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  /* Content area for children */\n"], ["\n  /* Content area for children */\n"
+})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  /* Content area for children */\n"], ["\n  /* Content area for children */\n"
 /**
  * DateGroup component
  *
@@ -6025,7 +6008,7 @@ var DateGroup = function DateGroup(_a) {
     "data-testid": dataTestId,
     role: "group",
     "aria-label": "Transactions for ".concat(date),
-    children: [jsxRuntime.jsxs(StyledHeader, {
+    children: [jsxRuntime.jsxs(StyledHeader$1, {
       "$sticky": sticky,
       "data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined,
       children: [jsxRuntime.jsxs(StyledLeftSection, {
@@ -6056,18 +6039,18 @@ var DateGroup = function DateGroup(_a) {
     })]
   });
 };
-var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$a;
+var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
 
-var semantic$8 = tokensData.semantic;
+var semantic$9 = tokensData.semantic;
 var StyledContainer$1 = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "EmptyState__StyledContainer",
   componentId: "sc-1u5hxh-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"])), function (_a) {
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"])), function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? semantic$8.spacing.layout['4xl'] : $size === 'large' ? semantic$8.spacing.layout['8xl'] : semantic$8.spacing.layout['6xl'];
+  return $size === 'small' ? semantic$9.spacing.layout['4xl'] : $size === 'large' ? semantic$9.spacing.layout['8xl'] : semantic$9.spacing.layout['6xl'];
 });
 var StyledIllustration = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -6075,22 +6058,22 @@ var StyledIllustration = styled.div.withConfig({
   },
   displayName: "EmptyState__StyledIllustration",
   componentId: "sc-1u5hxh-1"
-})(templateObject_2$c || (templateObject_2$c = __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) {
+})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
-}, semantic$8.spacing.layout['2xl'], function (_a) {
+}, semantic$9.spacing.layout['2xl'], function (_a) {
   var $variant = _a.$variant;
-  return $variant === 'error' ? semantic$8.color.icon.error : $variant === 'success' ? semantic$8.color.icon.success : semantic$8.color.icon.subdued;
+  return $variant === 'error' ? semantic$9.color.icon.error : $variant === 'success' ? semantic$9.color.icon.success : semantic$9.color.icon.subdued;
 });
 var StyledTextContainer = styled.div.withConfig({
   displayName: "EmptyState__StyledTextContainer",
   componentId: "sc-1u5hxh-2"
-})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  max-width: 360px;\n  margin-bottom: ", ";\n"], ["\n  max-width: 360px;\n  margin-bottom: ", ";\n"
+})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  max-width: 360px;\n  margin-bottom: ", ";\n"], ["\n  max-width: 360px;\n  margin-bottom: ", ";\n"
 // Map illustration type to icon name
-])), semantic$8.spacing.layout['2xl']);
+])), semantic$9.spacing.layout['2xl']);
 // Map illustration type to icon name
 var illustrationToIcon = {
   search: 'search',
@@ -6145,7 +6128,7 @@ var EmptyState = function EmptyState(_a) {
         children: title
       }), jsxRuntime.jsx("div", {
         style: {
-          marginTop: semantic$8.spacing.layout.md
+          marginTop: semantic$9.spacing.layout.md
         },
         children: jsxRuntime.jsx(Typography, {
           variant: "body",
@@ -6175,31 +6158,31 @@ var EmptyState = function EmptyState(_a) {
     })]
   });
 };
-var templateObject_1$e, templateObject_2$c, templateObject_3$b;
+var templateObject_1$f, templateObject_2$d, templateObject_3$c;
 
 var _a$1 = tokensData.base,
   spacing$1 = _a$1.spacing,
-  border$1 = _a$1.border;
+  border$2 = _a$1.border;
 var FeatureBlockStyled = styled.div.withConfig({
   displayName: "FeatureBlock__FeatureBlockStyled",
   componentId: "sc-1mi4lso-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$2.radius[6]);
 var ImageWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ImageWrapper",
   componentId: "sc-1mi4lso-1"
-})(templateObject_2$b || (templateObject_2$b = __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"])), tokensData.base.breakpoint.lg);
+})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokensData.base.breakpoint.lg);
 var ContentSection = styled.div.withConfig({
   displayName: "FeatureBlock__ContentSection",
   componentId: "sc-1mi4lso-2"
-})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
+})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
 var ButtonWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ButtonWrapper",
   componentId: "sc-1mi4lso-3"
-})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
+})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
 var ContentWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ContentWrapper",
   componentId: "sc-1mi4lso-4"
-})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
+})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
 var FeatureBlock = function FeatureBlock(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -6256,28 +6239,28 @@ var FeatureBlock = function FeatureBlock(_a) {
     }), jsxRuntime.jsx(Divider, {})]
   });
 };
-var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8;
+var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
 
 var _a = tokensData.base,
   spacing = _a.spacing,
   shadow = _a.shadow,
   zIndex = _a.zIndex,
   _b = tokensData.semantic,
-  color = _b.color,
+  color$1 = _b.color,
   typography = _b.typography,
-  border = _b.border,
+  border$1 = _b.border,
   input$1 = tokensData.component.input;
 var DropdownContainer = styled.div.withConfig({
   displayName: "Dropdown__DropdownContainer",
   componentId: "sc-kz07c4-0"
-})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var DropdownTrigger = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Dropdown__DropdownTrigger",
   componentId: "sc-kz07c4-1"
-})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
 }, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
@@ -6297,7 +6280,7 @@ var DropdownIcon = styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownIcon",
   componentId: "sc-kz07c4-2"
-})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"])), spacing[2], function (_a) {
+})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"])), spacing[2], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen && "\n    transform: rotate(180deg);\n  ";
 });
@@ -6307,7 +6290,7 @@ var DropdownMenu = styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
+})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -6323,19 +6306,19 @@ var DropdownOption = styled.button.withConfig({
   },
   displayName: "Dropdown__DropdownOption",
   componentId: "sc-kz07c4-4"
-})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
+})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
   var $isSelected = _a.$isSelected,
     $isFocused = _a.$isFocused;
-  if ($isFocused) return color.background.surface;
-  if ($isSelected) return color.background.surface;
+  if ($isFocused) return color$1.background.surface;
+  if ($isSelected) return color$1.background.surface;
   return 'transparent';
-}, input$1["default"].font, input$1["default"].textColor, color.background.surface, color.background.surface, border.subtle);
+}, input$1["default"].font, input$1["default"].textColor, color$1.background.surface, color$1.background.surface, border$1.subtle);
 var StyledHelperText$3 = styled.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"
-})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), typography.caption, function (_a) {
+})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), typography.caption, function (_a) {
   var $hasError = _a.$hasError;
-  return $hasError ? color.text.error : color.text.subdued;
+  return $hasError ? color$1.text.error : color$1.text.subdued;
 }, spacing[2]);
 var Dropdown = function Dropdown(_a) {
   var options = _a.options,
@@ -6510,18 +6493,18 @@ var Dropdown = function Dropdown(_a) {
     })]
   });
 };
-var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6;
+var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
 
-var semantic$7 = tokensData.semantic;
+var semantic$8 = tokensData.semantic;
 var StyledList = styled.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "List__StyledList",
   componentId: "sc-1irksg5-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
   var $dividers = _a.$dividers;
-  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: 1px solid ".concat(semantic$7.color.border["default"], ";\n    }\n  ");
+  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: 1px solid ".concat(semantic$8.color.border["default"], ";\n    }\n  ");
 });
 var List = function List(_a) {
   var children = _a.children,
@@ -6543,7 +6526,230 @@ var List = function List(_a) {
   }));
 };
 List.displayName = 'List';
-var templateObject_1$b;
+var templateObject_1$c;
+
+var semantic$7 = tokensData.semantic,
+  base$7 = tokensData.base;
+var layout = semantic$7.spacing.layout,
+  color = semantic$7.color,
+  border = semantic$7.border,
+  elevation = semantic$7.elevation;
+  semantic$7.motion;
+// ---------------------------------------------------------------------------
+// Size map
+// ---------------------------------------------------------------------------
+var sizeToWidth = {
+  small: '400px',
+  medium: '560px',
+  large: '720px'
+};
+// ---------------------------------------------------------------------------
+// Animations
+// ---------------------------------------------------------------------------
+var fadeIn$1 = styled.keyframes(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  from { opacity: 0; }\n  to   { opacity: 1; }\n"], ["\n  from { opacity: 0; }\n  to   { opacity: 1; }\n"])));
+var scaleIn = styled.keyframes(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n"
+// ---------------------------------------------------------------------------
+// Styled components
+// ---------------------------------------------------------------------------
+])));
+// ---------------------------------------------------------------------------
+// Styled components
+// ---------------------------------------------------------------------------
+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: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  ", "\n"])), styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " 200ms ease-out;"], ["animation: ", " 200ms ease-out;"])), fadeIn$1));
+var StyledDialog = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Modal__StyledDialog",
+  componentId: "sc-1d3g5gh-1"
+})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: 10000;\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " 200ms ease-out;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: 10000;\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " 200ms ease-out;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_a) {
+  var $width = _a.$width;
+  return $width;
+}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, styled.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " 200ms ease-out;"], ["animation: ", " 200ms ease-out;"])), scaleIn), base$7.breakpoint.md, fadeIn$1);
+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);
+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, base$7.spacing[2], color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
+var StyledFooter = styled.div.withConfig({
+  displayName: "Modal__StyledFooter",
+  componentId: "sc-1d3g5gh-4"
+})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  gap: ", ";\n  padding: 0 ", " ", ";\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  gap: ", ";\n  padding: 0 ", " ", ";\n  flex-shrink: 0;\n"
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Modal component
+ *
+ * A centred dialog overlay with a title, close button (IconButton), scrollable
+ * body content, and an optional footer with structured action buttons.
+ *
+ * - Renders via `createPortal` to avoid z-index / overflow issues.
+ * - Auto-fullscreen on viewports narrower than 768 px.
+ * - Focus trap, Escape-to-close, overlay-click-to-close.
+ * - Locks body scroll while open.
+ *
+ * Composes: IconButton, Button, Typography, Stack, Divider
+ */])), layout.sm, layout.lg, layout.lg);
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Modal component
+ *
+ * A centred dialog overlay with a title, close button (IconButton), scrollable
+ * body content, and an optional footer with structured action buttons.
+ *
+ * - Renders via `createPortal` to avoid z-index / overflow issues.
+ * - Auto-fullscreen on viewports narrower than 768 px.
+ * - Focus trap, Escape-to-close, overlay-click-to-close.
+ * - Locks body scroll while open.
+ *
+ * Composes: IconButton, Button, Typography, Stack, Divider
+ */
+var Modal = function Modal(_a) {
+  var isOpen = _a.isOpen,
+    onClose = _a.onClose,
+    title = _a.title,
+    children = _a.children,
+    _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    actions = _a.actions,
+    _c = _a.closeOnOverlayClick,
+    closeOnOverlayClick = _c === void 0 ? true : _c,
+    _d = _a.closeOnEscape,
+    closeOnEscape = _d === void 0 ? true : _d,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"];
+  var dialogRef = React.useRef(null);
+  var previousFocusRef = React.useRef(null);
+  // -----------------------------------------------------------------------
+  // Focus & scroll-lock management
+  // -----------------------------------------------------------------------
+  React.useEffect(function () {
+    var _a;
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement;
+      // Short delay so the animation can start before we shift focus
+      var timer_1 = setTimeout(function () {
+        var _a;
+        return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 100);
+      document.body.style.overflow = 'hidden';
+      return function () {
+        clearTimeout(timer_1);
+      };
+    } else {
+      (_a = previousFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+  // -----------------------------------------------------------------------
+  // Keyboard handling (Escape + focus trap)
+  // -----------------------------------------------------------------------
+  var handleKeyDown = function handleKeyDown(event) {
+    var _a;
+    if (closeOnEscape && event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+    }
+    if (event.key === 'Tab') {
+      var focusableElements = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (!focusableElements || focusableElements.length === 0) return;
+      var first = focusableElements[0];
+      var last = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  // -----------------------------------------------------------------------
+  // Overlay click
+  // -----------------------------------------------------------------------
+  var handleOverlayClick = function handleOverlayClick(event) {
+    if (closeOnOverlayClick && event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  // -----------------------------------------------------------------------
+  // Render
+  // -----------------------------------------------------------------------
+  if (!isOpen) return null;
+  var titleId = dataTestId ? "".concat(dataTestId, "-title") : 'modal-title';
+  var width = sizeToWidth[size];
+  var modal = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(StyledOverlay$1, {
+      onClick: handleOverlayClick,
+      "data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'modal-overlay'
+    }), jsxRuntime.jsxs(StyledDialog, {
+      ref: dialogRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel || title,
+      "aria-labelledby": titleId,
+      "aria-describedby": ariaDescribedBy,
+      tabIndex: -1,
+      "$width": width,
+      onKeyDown: handleKeyDown,
+      "data-testid": dataTestId,
+      children: [jsxRuntime.jsxs(StyledHeader, {
+        children: [jsxRuntime.jsx("span", {
+          id: titleId,
+          children: jsxRuntime.jsx(Typography, {
+            variant: "h3",
+            children: title
+          })
+        }), jsxRuntime.jsx(IconButton, {
+          variant: "naked",
+          iconName: "close",
+          "aria-label": "Close modal",
+          onClick: onClose,
+          size: "medium",
+          "data-testid": dataTestId ? "".concat(dataTestId, "-close") : 'modal-close'
+        })]
+      }), jsxRuntime.jsx(Divider, {
+        size: "small"
+      }), jsxRuntime.jsx(StyledBody, {
+        "data-testid": dataTestId ? "".concat(dataTestId, "-body") : 'modal-body',
+        children: children
+      }), actions && actions.length > 0 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Divider, {
+          size: "small"
+        }), jsxRuntime.jsx(StyledFooter, {
+          "data-testid": dataTestId ? "".concat(dataTestId, "-footer") : 'modal-footer',
+          children: actions.map(function (action, index) {
+            return jsxRuntime.jsx(Button, {
+              onClick: action.onClick,
+              variant: action.variant || 'secondary',
+              iconName: action.icon,
+              disabled: action.disabled,
+              size: "medium",
+              "data-testid": dataTestId ? "".concat(dataTestId, "-action-").concat(index) : "modal-action-".concat(index),
+              children: action.label
+            }, "".concat(action.label, "-").concat(index));
+          })
+        })]
+      })]
+    })]
+  });
+  return /*#__PURE__*/reactDom.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 input = tokensData.component.input;
 var StyledInputBase = styled.input.withConfig({
@@ -8725,6 +8931,7 @@ exports.IconButton = IconButton;
 exports.LegacyChip = LegacyChip;
 exports.List = List;
 exports.ListItem = ListItem;
+exports.Modal = Modal;
 exports.MoneyDisplay = MoneyDisplay;
 exports.NumberInput = NumberInput;
 exports.PageTitle = PageTitle;