@common-origin/design-system 2.8.2 → 2.9.0

package/dist/index.js

@@ -966,10 +966,10 @@ var tokensData = {
 
 // Destructure tokens
 var semantic$i = tokensData.semantic;
-var color$a = semantic$i.color,
+var color$9 = semantic$i.color,
   size$1 = semantic$i.size,
-  border$a = semantic$i.border;
-var radius$6 = border$a.radius;
+  border$9 = semantic$i.border;
+var radius$5 = border$9.radius;
 var AvatarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -982,14 +982,14 @@ var AvatarContainer = styled.div.withConfig({
 }, function (_a) {
   var $size = _a.$size;
   return size$1.avatar[$size];
-}, radius$6.circle, color$a.background.surface);
+}, radius$5.circle, color$9.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$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$5.circle);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1008,7 +1008,7 @@ var AvatarInitials = styled.span.withConfig({
     xl: tokensData.base.fontSize[5]
   };
   return sizeMap[$size];
-}, color$a.text["default"]);
+}, color$9.text["default"]);
 // Helper function to get initials from name
 var getInitials = function getInitials(name) {
   return name.split(' ').map(function (word) {
@@ -1066,7 +1066,7 @@ var templateObject_1$J, templateObject_2$u, templateObject_3$r;
 
 var _a$8 = tokensData.semantic,
   typography$5 = _a$8.typography,
-  color$9 = _a$8.color;
+  color$8 = _a$8.color;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
     display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
@@ -1090,15 +1090,15 @@ var getTypographyStyles = function getTypographyStyles(variant) {
 };
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
-    "default": color$9.text["default"],
-    emphasis: color$9.text.emphasis,
-    subdued: color$9.text.subdued,
-    inverse: color$9.text.inverse,
-    disabled: color$9.text.disabled,
-    interactive: color$9.text.interactive,
-    error: color$9.text.error,
-    success: color$9.text.success,
-    warning: color$9.text.warning
+    "default": color$8.text["default"],
+    emphasis: color$8.text.emphasis,
+    subdued: color$8.text.subdued,
+    inverse: color$8.text.inverse,
+    disabled: color$8.text.disabled,
+    interactive: color$8.text.interactive,
+    error: color$8.text.error,
+    success: color$8.text.success,
+    warning: color$8.text.warning
   };
   return colorMap[colorVariant] || colorMap["default"];
 };
@@ -1200,9 +1200,9 @@ var Typography = function Typography(_a) {
 var templateObject_1$I;
 
 var semantic$h = tokensData.semantic;
-var color$8 = semantic$h.color,
-  border$9 = semantic$h.border;
-var radius$5 = border$9.radius;
+var color$7 = semantic$h.color,
+  border$8 = semantic$h.border;
+var radius$4 = border$8.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 BadgeWrapper = styled.span.withConfig({
   displayName: "Badge__BadgeWrapper",
@@ -1222,18 +1222,18 @@ 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$7.background["default"], scaleIn$1, function (props) {
   switch (props.$variant) {
     case 'primary':
-      return "\n          background-color: ".concat(color$8.background.interactive, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$7.background.interactive, ";\n          color: ").concat(color$7.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color$8.background.error, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$7.background.error, ";\n          color: ").concat(color$7.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color$8.background.warning, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$7.background.warning, ";\n          color: ").concat(color$7.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color$8.background.success, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$7.background.success, ";\n          color: ").concat(color$7.text.inverse, ";\n        ");
     default:
-      return "\n          background-color: ".concat(color$8.background.emphasis, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$7.background.emphasis, ";\n          color: ").concat(color$7.text.inverse, ";\n        ");
   }
 });
 var ScreenReaderOnly$1 = styled.span.withConfig({
@@ -1296,7 +1296,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$flexWrap && styled.css(templateObject_5$f || (templateObject_5$f = __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]);
+  return props.$gap && styled.css(templateObject_6$c || (templateObject_6$c = __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]);
 }, 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$G, templateObject_2$s, templateObject_3$p, templateObject_4$k, templateObject_5$f, templateObject_6$c, 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 add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -2482,12 +2482,12 @@ var templateObject_1$E, templateObject_2$r;
 
 var semantic$f = tokensData.semantic,
   base$b = tokensData.base;
-var color$7 = semantic$f.color,
+var color$6 = semantic$f.color,
   typography$4 = semantic$f.typography,
-  border$8 = semantic$f.border,
+  border$7 = semantic$f.border,
   spacing$7 = semantic$f.spacing;
-var category = color$7.category;
-var radius$4 = border$8.radius;
+var category = color$6.category;
+var radius$3 = border$7.radius;
 var layout$3 = spacing$7.layout;
 var StyledCategoryBadge = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2513,7 +2513,7 @@ 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$b.fontWeight[3], base$b.border.width[1], function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? '24px' : '32px';
 }, function (_a) {
@@ -2537,7 +2537,7 @@ var StyledCategoryBadge = styled.span.withConfig({
   var $color = _a.$color,
     $variant = _a.$variant;
   if ($variant === 'filled') {
-    return color$7.text.inverse;
+    return color$6.text.inverse;
   }
   return category[$color];
 }, function (_a) {
@@ -2969,14 +2969,14 @@ var templateObject_1$A, templateObject_2$p, templateObject_3$n, templateObject_4
 
 var _a$7 = tokensData.semantic,
   typography$3 = _a$7.typography,
-  color$6 = _a$7.color;
+  color$5 = _a$7.color;
 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"
 /**
  * Formats a date with smart relative/absolute logic
- */])), typography$3.label, color$6.text.subdued);
+ */])), typography$3.label, color$5.text.subdued);
 /**
  * Formats a date with smart relative/absolute logic
  */
@@ -3260,18 +3260,18 @@ var semantic$e = tokensData.semantic;
 var _a$5 = __assign(__assign({}, semantic$e), {
     component: tokensData.component
   }),
-  color$5 = _a$5.color,
-  border$7 = _a$5.border,
+  color$4 = _a$5.color,
+  border$6 = _a$5.border,
   motion$1 = _a$5.motion,
   component$2 = _a$5.component;
-var radius$3 = border$7.radius;
+var radius$2 = border$6.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) {
+})(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$4.background.disabled, radius$2.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);
 }, 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);
@@ -3286,21 +3286,21 @@ var ProgressBarFill = styled.div.withConfig({
   var backgroundColor;
   switch (props.$color) {
     case 'success':
-      backgroundColor = color$5.background.success;
+      backgroundColor = color$4.background.success;
       break;
     case 'error':
-      backgroundColor = color$5.background.error;
+      backgroundColor = color$4.background.error;
       break;
     case 'default':
     default:
-      backgroundColor = color$5.background.interactive;
+      backgroundColor = color$4.background.interactive;
       break;
   }
   return styled.css(templateObject_4$i || (templateObject_4$i = __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)));
 }, 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)));
+  return props.$variant === 'vertical' && styled.css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 });
 var ProgressBar = function ProgressBar(_a) {
   var value = _a.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$w, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$e, templateObject_6$b, templateObject_7$9;
 
 // Destructure tokens for cleaner access
 var separatorTokens = tokensData.component.separator;
@@ -3503,7 +3503,7 @@ var templateObject_1$u;
 // 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"])));
@@ -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$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$1.circle, scaleIn, 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    ");
@@ -3668,13 +3668,13 @@ StatusBadge.displayName = 'StatusBadge';
 var templateObject_1$t, templateObject_2$n, templateObject_3$l;
 
 var semantic$d = tokensData.semantic;
-var color$4 = semantic$d.color,
+var color$3 = semantic$d.color,
   spacing$4 = semantic$d.spacing,
-  border$6 = semantic$d.border,
+  border$5 = 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 radius = border$5.radius;
 var StyledTag = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -3687,37 +3687,37 @@ var StyledTag = styled.span.withConfig({
  *
  * 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$2.xs, layout$2.sm, typography$1.button3, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$4.background['interactive-subtle'];
+      return color$3.background['interactive-subtle'];
     case 'success':
-      return color$4.background['success-subtle'];
+      return color$3.background['success-subtle'];
     case 'warning':
-      return color$4.background['warning-subtle'];
+      return color$3.background['warning-subtle'];
     case 'error':
-      return color$4.background['error-subtle'];
+      return color$3.background['error-subtle'];
     case 'emphasis':
-      return color$4.background.emphasis;
+      return color$3.background.emphasis;
     default:
-      return color$4.background.surface;
+      return color$3.background.surface;
   }
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return color$4.text.interactive;
+      return color$3.text.interactive;
     case 'success':
-      return color$4.text.success;
+      return color$3.text.success;
     case 'warning':
-      return color$4.text.warning;
+      return color$3.text.warning;
     case 'error':
-      return color$4.text.error;
+      return color$3.text.error;
     case 'emphasis':
-      return color$4.text.inverse;
+      return color$3.text.inverse;
     default:
-      return color$4.text["default"];
+      return color$3.text["default"];
   }
 }, function (_a) {
   var $variant = _a.$variant,
@@ -3725,17 +3725,17 @@ var StyledTag = styled.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'interactive':
-      return "1px solid ".concat(color$4.border.interactive);
+      return "1px solid ".concat(color$3.border.interactive);
     case 'success':
-      return "1px solid ".concat(color$4.border.success);
+      return "1px solid ".concat(color$3.border.success);
     case 'warning':
-      return "1px solid ".concat(color$4.border.warning);
+      return "1px solid ".concat(color$3.border.warning);
     case 'error':
-      return "1px solid ".concat(color$4.border.error);
+      return "1px solid ".concat(color$3.border.error);
     case 'emphasis':
-      return "1px solid ".concat(color$4.background.emphasis);
+      return "1px solid ".concat(color$3.background.emphasis);
     default:
-      return "1px solid ".concat(color$4.border["default"]);
+      return "1px solid ".concat(color$3.border["default"]);
   }
 });
 /**
@@ -3768,57 +3768,41 @@ var templateObject_1$s;
 
 // 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 spacing$3 = semantic$c.spacing;
 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 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$r || (templateObject_1$r = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), layout$1.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$m || (templateObject_2$m = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), layout$1.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$k || (templateObject_3$k = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), layout$1.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$h || (templateObject_4$h = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var StyledHeaderWrapper = styled.div.withConfig({
+  displayName: "AccountCard__StyledHeaderWrapper",
+  componentId: "sc-1erp7zn-4"
+})(templateObject_5$d || (templateObject_5$d = __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$1.none, layout$1.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,23 +3933,15 @@ 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$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d;
 
 var semantic$b = tokensData.semantic,
   base$9 = tokensData.base;