@common-origin/design-system 2.6.1 → 2.7.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, forwardRef, useId, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useId, useCallback, useMemo, forwardRef } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
 import { createPortal } from 'react-dom';
@@ -82,6 +82,16 @@ function __generator(thisArg, body) {
     }
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 function __makeTemplateObject(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -91,7 +101,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var base$b = {
+var base$c = {
 	border: {
 		radius: {
 			"1": "0.125rem",
@@ -407,7 +417,7 @@ var base$b = {
 	},
 	$ref: "./base/index.json"
 };
-var component$2 = {
+var component$3 = {
 	button: {
 		primary: {
 			backgroundColor: "#212529",
@@ -743,7 +753,7 @@ var component$2 = {
 	},
 	$ref: "./component/index.json"
 };
-var semantic$i = {
+var semantic$j = {
 	elevation: {
 		none: "none",
 		inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
@@ -947,16 +957,16 @@ var semantic$i = {
 	$ref: "./semantic/index.json"
 };
 var tokensData = {
-	base: base$b,
-	component: component$2,
-	semantic: semantic$i
+	base: base$c,
+	component: component$3,
+	semantic: semantic$j
 };
 
 // Destructure tokens
-var semantic$h = tokensData.semantic;
-var color$a = semantic$h.color,
-  size$1 = semantic$h.size,
-  border$a = semantic$h.border;
+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 AvatarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -964,7 +974,7 @@ var AvatarContainer = styled.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$I || (templateObject_1$I = __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$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) {
   var $size = _a.$size;
   return size$1.avatar[$size];
 }, function (_a) {
@@ -977,14 +987,14 @@ var AvatarImage = styled.img.withConfig({
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$t || (templateObject_2$t = __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$6.circle);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$q || (templateObject_3$q = __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$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"
 // Helper function to get initials from name
 ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -1050,11 +1060,11 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$I, templateObject_2$t, templateObject_3$q;
+var templateObject_1$J, templateObject_2$u, templateObject_3$r;
 
-var _a$7 = tokensData.semantic,
-  typography$5 = _a$7.typography,
-  color$9 = _a$7.color;
+var _a$8 = tokensData.semantic,
+  typography$5 = _a$8.typography,
+  color$9 = _a$8.color;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
     display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
@@ -1117,7 +1127,7 @@ var StyledTypography = styled.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$H || (templateObject_1$H = __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$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"
 /**
  * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
  *
@@ -1185,24 +1195,24 @@ var Typography = function Typography(_a) {
     children: children
   });
 };
-var templateObject_1$H;
+var templateObject_1$I;
 
-var semantic$g = tokensData.semantic;
-var color$8 = semantic$g.color,
-  border$9 = semantic$g.border;
+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 = keyframes(templateObject_1$G || (templateObject_1$G = __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 scaleIn$1 = 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",
   componentId: "sc-tjz4pp-0"
-})(templateObject_2$s || (templateObject_2$s = __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$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"])));
 var BadgeIndicator = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$p || (templateObject_3$p = __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$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) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? '8px' : '16px';
@@ -1227,7 +1237,7 @@ var BadgeIndicator = styled.span.withConfig({
 var ScreenReaderOnly$1 = styled.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
   componentId: "sc-tjz4pp-2"
-})(templateObject_4$k || (templateObject_4$k = __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$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"])));
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -1263,7 +1273,7 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$k;
+var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l;
 
 var StyledBox = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1274,37 +1284,37 @@ 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 && css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && css(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && css(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
-  return props.$alignItems && css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+  return props.$alignItems && css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
-  return props.$gap && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
+  return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
 }, function (props) {
-  return props.$m && css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
+  return props.$m && css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
 }, function (props) {
-  return props.$mt && css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
+  return props.$mt && css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
 }, function (props) {
-  return props.$mr && css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
+  return props.$mr && css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
 }, function (props) {
-  return props.$mb && css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
+  return props.$mb && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
 }, function (props) {
-  return props.$ml && css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
+  return props.$ml && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
 }, function (props) {
-  return props.$mx && css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), tokensData.semantic.spacing.layout[props.$mx], tokensData.semantic.spacing.layout[props.$mx]);
+  return props.$mx && css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), tokensData.semantic.spacing.layout[props.$mx], tokensData.semantic.spacing.layout[props.$mx]);
 }, function (props) {
-  return props.$my && css(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), tokensData.semantic.spacing.layout[props.$my], tokensData.semantic.spacing.layout[props.$my]);
+  return props.$my && css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), tokensData.semantic.spacing.layout[props.$my], tokensData.semantic.spacing.layout[props.$my]);
 }, function (props) {
-  return props.$p && css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
+  return props.$p && css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
 }, function (props) {
-  return props.$pt && css(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensData.semantic.spacing.layout[props.$pt]);
+  return props.$pt && css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensData.semantic.spacing.layout[props.$pt]);
 }, function (props) {
-  return props.$pr && css(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
+  return props.$pr && css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
 }, function (props) {
   return props.$pb && css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
 }, function (props) {
@@ -1498,7 +1508,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$5, 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, 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$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$1, 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",
@@ -1568,6 +1578,10 @@ var directionRight = {
 	path: "M20 12L20.7071 11.2929L21.4142 12L20.7071 12.7071L20 12ZM5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11V13ZM14 6L14.7071 5.29289L20.7071 11.2929L20 12L19.2929 12.7071L13.2929 6.70711L14 6ZM20 12L20.7071 12.7071L14.7071 18.7071L14 18L13.2929 17.2929L19.2929 11.2929L20 12ZM20 12V13H5V12V11H20V12Z",
 	name: "directionRight"
 };
+var directionUp = {
+	path: "M6.70703 10.707L11 6.41406L11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19L13 6.41406L17.293 10.707L18.707 9.29297L12 2.58594L5.29297 9.29297L6.70703 10.707Z",
+	name: "directionUp"
+};
 var edit = {
 	path: "M17.5859 9C17.5859 8.6893 17.3985 8.42381 17.0234 8.0293L16.5859 7.58594L16.414 7.41406C15.7475 6.7475 15.4141 6.41406 15 6.41406C14.5858 6.41406 14.2525 6.7475 13.5859 7.41406L6.39156 14.6084L6.16402 14.8418C6.10705 14.9052 6.06663 14.9595 6.03316 15.0186C5.9662 15.1368 5.93192 15.2702 5.86519 15.5371L5.20211 18.1914L5.14449 18.4297C5.09834 18.6377 5.09184 18.7579 5.16695 18.833C5.24206 18.9081 5.36228 18.9016 5.57027 18.8555L5.80855 18.7979L8.46285 18.1348C8.72977 18.068 8.86314 18.0338 8.9814 17.9668C9.04047 17.9333 9.09478 17.8929 9.15816 17.8359L9.39156 17.6084L16.5859 10.4141C17.2106 9.78933 17.5428 9.45735 17.582 9.07715L17.5859 9ZM19.5859 9C19.5859 9.82006 19.2281 10.4288 18.9257 10.8252C18.6586 11.1753 18.2933 11.5348 18 11.8281L10.8056 19.0225C10.686 19.1421 10.3758 19.4764 9.96675 19.708C9.55767 19.9396 9.11125 20.0332 8.94722 20.0742L6.38277 20.7158L6.38082 20.7168L6.2939 20.7383C6.17868 20.7671 5.87067 20.8489 5.58492 20.877C5.2743 20.9073 4.44039 20.9346 3.75289 20.2471C3.06538 19.5596 3.09262 18.7257 3.123 18.415C3.15102 18.1293 3.23287 17.8213 3.26168 17.7061L3.92574 15.0527L4.03707 14.6348C4.09472 14.4516 4.17615 14.2378 4.29195 14.0332L4.38375 13.8848C4.6044 13.5498 4.87279 13.299 4.9775 13.1943L12.1718 6C12.4652 5.70667 12.8246 5.34136 13.1748 5.07422C13.5711 4.77185 14.1799 4.41406 15 4.41406L15.1513 4.41797C15.8954 4.45836 16.4536 4.79076 16.8252 5.07422C17.1753 5.34136 17.5348 5.70667 17.8281 6L18 6.17188L18.4726 6.65137C18.6341 6.82169 18.7921 6.99964 18.9257 7.1748C19.2281 7.57116 19.5859 8.17994 19.5859 9Z M12.5 7.5L15.5 5.5L18.5 8.5L16.5 11.5L12.5 7.5Z",
 	name: "edit"
@@ -1616,6 +1630,10 @@ var message = {
 	path: "M16 5.00001C16.9145 5.00001 17.7014 4.99777 18.3281 5.08204C18.9835 5.17019 19.6115 5.36934 20.1211 5.87891C20.6307 6.38849 20.8298 7.01648 20.918 7.67188C21.0022 8.29863 21 9.08547 21 10V14C21 14.9145 21.0022 15.7014 20.918 16.3281C20.8298 16.9835 20.6307 17.6115 20.1211 18.1211C19.6115 18.6307 18.9835 18.8298 18.3281 18.918C17.7014 19.0022 16.9145 19 16 19H8.00001C7.08547 19 6.29863 19.0022 5.67188 18.918C5.01648 18.8298 4.38849 18.6307 3.87891 18.1211C3.36934 17.6115 3.17019 16.9835 3.08204 16.3281C2.99777 15.7014 3.00001 14.9145 3.00001 14V10C3.00001 9.08547 2.99777 8.29863 3.08204 7.67188C3.17019 7.01648 3.36933 6.38849 3.87891 5.87891C4.38849 5.36933 5.01648 5.17019 5.67188 5.08204C6.29863 4.99777 7.08547 5.00001 8.00001 5.00001H16ZM13.3418 13.4473C12.4972 13.8696 11.5028 13.8696 10.6582 13.4473L5.00001 10.6182V14C5.00001 14.9711 5.00228 15.599 5.06446 16.0615C5.12277 16.4951 5.21687 16.6309 5.29297 16.707C5.36908 16.7831 5.50495 16.8772 5.93848 16.9356C6.40099 16.9977 7.02893 17 8.00001 17H16C16.9711 17 17.599 16.9977 18.0615 16.9356C18.4951 16.8772 18.6309 16.7831 18.707 16.707C18.7831 16.6309 18.8772 16.4951 18.9356 16.0615C18.9977 15.599 19 14.9711 19 14V10.6182L13.3418 13.4473ZM8.00001 7.00001C7.02893 7.00001 6.40099 7.00228 5.93848 7.06446C5.50494 7.12278 5.36908 7.21687 5.29297 7.29297C5.21686 7.36908 5.12278 7.50494 5.06446 7.93848C5.04619 8.07437 5.03381 8.2246 5.02442 8.39356L11.5527 11.6582C11.8343 11.799 12.1657 11.799 12.4473 11.6582L18.9746 8.39356C18.9652 8.22462 18.9538 8.07436 18.9356 7.93848C18.8772 7.50495 18.7831 7.36908 18.707 7.29297C18.6309 7.21687 18.4951 7.12277 18.0615 7.06446C17.599 7.00228 16.9711 7.00001 16 7.00001H8.00001Z",
 	name: "message"
 };
+var mic = {
+	path: "M12 2C14.2091 2 16 3.79086 16 6V11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11V6C8 3.79086 9.79086 2 12 2ZM12 4C10.8954 4 10 4.89543 10 6V11C10 12.1046 10.8954 13 12 13C13.1046 13 14 12.1046 14 11V6C14 4.89543 13.1046 4 12 4Z M19 10C19.5523 10 20 10.4477 20 11C20 13.1217 19.1575 15.1569 17.6572 16.6572C16.3938 17.9207 14.7505 18.7145 12.9961 18.9346C12.9975 18.9562 13 18.978 13 19V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19C11 18.978 11.0015 18.9562 11.0029 18.9346C9.24888 18.7143 7.60602 17.9205 6.34277 16.6572C4.84248 15.1569 4 13.1217 4 11C4 10.4477 4.44772 10 5 10C5.55228 10 6 10.4477 6 11C6 12.5913 6.63259 14.117 7.75781 15.2422C8.88303 16.3674 10.4087 17 12 17C13.5913 17 15.117 16.3674 16.2422 15.2422C17.3674 14.117 18 12.5913 18 11C18 10.4477 18.4477 10 19 10Z",
+	name: "mic"
+};
 var copy = {
 	path: "M16 9.00001C16.9145 9.00001 17.7014 8.99777 18.3281 9.08204C18.9835 9.17019 19.6115 9.36934 20.1211 9.87891C20.6307 10.3885 20.8298 11.0165 20.918 11.6719C21.0022 12.2986 21 13.0855 21 14V16C21 16.9145 21.0022 17.7014 20.918 18.3281C20.8298 18.9835 20.6307 19.6115 20.1211 20.1211C19.6115 20.6307 18.9835 20.8298 18.3281 20.918C17.7014 21.0022 16.9145 21 16 21H14C13.0855 21 12.2986 21.0022 11.6719 20.918C11.0165 20.8298 10.3885 20.6307 9.87891 20.1211C9.36934 19.6115 9.17019 18.9835 9.08204 18.3281C8.99777 17.7014 9.00001 16.9145 9.00001 16V14C9.00001 13.0855 8.99777 12.2986 9.08204 11.6719C9.17019 11.0165 9.36933 10.3885 9.87891 9.87891C10.3885 9.36933 11.0165 9.17019 11.6719 9.08204C12.2986 8.99777 13.0855 9.00001 14 9.00001H16ZM14 11C13.0289 11 12.401 11.0023 11.9385 11.0645C11.5049 11.1228 11.3691 11.2169 11.293 11.293C11.2169 11.3691 11.1228 11.5049 11.0645 11.9385C11.0023 12.401 11 13.0289 11 14V16C11 16.9711 11.0023 17.599 11.0645 18.0615C11.1228 18.4951 11.2169 18.6309 11.293 18.707C11.3691 18.7831 11.5049 18.8772 11.9385 18.9356C12.401 18.9977 13.0289 19 14 19H16C16.9711 19 17.599 18.9977 18.0615 18.9356C18.4951 18.8772 18.6309 18.7831 18.707 18.707C18.7831 18.6309 18.8772 18.4951 18.9356 18.0615C18.9977 17.599 19 16.9711 19 16V14C19 13.0289 18.9977 12.401 18.9356 11.9385C18.8772 11.5049 18.7831 11.3691 18.707 11.293C18.6309 11.2169 18.4951 11.1228 18.0615 11.0645C17.599 11.0023 16.9711 11 16 11H14Z M11 3.00001C11.4521 3.00001 11.8413 2.99962 12.1621 3.02149C12.4919 3.04399 12.8225 3.09352 13.1484 3.22852C13.8832 3.53299 14.467 4.1168 14.7715 4.85157C14.9065 5.17749 14.956 5.50807 14.9785 5.8379C15.0004 6.15869 15 6.54787 15 7.00001H13C13 6.52039 12.9996 6.21062 12.9834 5.97364C12.9678 5.74574 12.9411 5.6588 12.9238 5.61719C12.8223 5.37227 12.6277 5.17767 12.3828 5.07618C12.3412 5.05894 12.2543 5.03216 12.0264 5.01661C11.7894 5.00044 11.4796 5.00001 11 5.00001H8.00001C7.02893 5.00001 6.40099 5.00228 5.93848 5.06446C5.50494 5.12278 5.36908 5.21687 5.29297 5.29297C5.21686 5.36908 5.12278 5.50494 5.06446 5.93848C5.00228 6.40099 5.00001 7.02893 5.00001 8.00001V11C5.00001 11.4796 5.00044 11.7894 5.01661 12.0264C5.03216 12.2543 5.05894 12.3412 5.07618 12.3828C5.17767 12.6277 5.37227 12.8223 5.61719 12.9238C5.6588 12.9411 5.74574 12.9678 5.97364 12.9834C6.21062 12.9996 6.52039 13 7.00001 13V15C6.54787 15 6.15869 15.0004 5.8379 14.9785C5.50807 14.956 5.17749 14.9065 4.85157 14.7715C4.1168 14.467 3.53299 13.8832 3.22852 13.1484C3.09352 12.8225 3.04399 12.4919 3.02149 12.1621C2.99962 11.8413 3.00001 11.4521 3.00001 11V8.00001C3.00001 7.08547 2.99777 6.29863 3.08204 5.67188C3.17019 5.01648 3.36933 4.38849 3.87891 3.87891C4.38849 3.36933 5.01648 3.17019 5.67188 3.08204C6.29863 2.99777 7.08547 3.00001 8.00001 3.00001H11Z",
 	name: "copy"
@@ -1686,6 +1704,7 @@ var iconsData = {
 	close: close,
 	crossCircle: crossCircle,
 	directionRight: directionRight,
+	directionUp: directionUp,
 	edit: edit,
 	"export": {
 	path: "M7.70703 10.707L11 7.41406L11 14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V7.41406L16.293 10.707L17.707 9.29297L12 3.58594L6.29297 9.29297L7.70703 10.707Z M4 17V16H6V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V16H20V17C20 18.6051 18.7394 19.9158 17.1543 19.9961L17 20H7C5.34315 20 4 18.6569 4 17Z",
@@ -1702,6 +1721,7 @@ var iconsData = {
 	playBack: playBack,
 	lineOut: lineOut,
 	message: message,
+	mic: mic,
 	copy: copy,
 	link: link,
 	order: order,
@@ -1723,7 +1743,7 @@ var IconStyled = styled.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$E || (templateObject_1$E = __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$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) {
   var $size = _a.$size;
   return tokensData.semantic.size.icon[$size];
 }, function (_a) {
@@ -1789,55 +1809,55 @@ var Icon = function Icon(_a) {
     })
   });
 };
-var templateObject_1$E;
+var templateObject_1$F;
 
-var button = tokensData.component.button,
-  semantic$f = tokensData.semantic;
+var button$1 = tokensData.component.button,
+  semantic$g = 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$f.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(button.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$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");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
   var variantConfig = {
     primary: {
-      bg: button.primary.backgroundColor,
-      text: button.primary.textColor,
-      hoverBg: button.hover.backgroundColor,
-      activeBg: button.active.backgroundColor,
-      disabledBg: button.disabled.backgroundColor,
-      disabledText: button.disabled.textColor
+      bg: button$1.primary.backgroundColor,
+      text: button$1.primary.textColor,
+      hoverBg: button$1.hover.backgroundColor,
+      activeBg: button$1.active.backgroundColor,
+      disabledBg: button$1.disabled.backgroundColor,
+      disabledText: button$1.disabled.textColor
     },
     secondary: {
-      bg: button.variants.secondary.backgroundColor,
-      text: button.variants.secondary.textColor,
-      hoverBg: button.variants.secondary.hover.backgroundColor,
-      activeBg: button.variants.secondary.active.backgroundColor,
-      disabledBg: button.variants.secondary.disabled.backgroundColor,
-      disabledText: button.variants.secondary.disabled.textColor
+      bg: button$1.variants.secondary.backgroundColor,
+      text: button$1.variants.secondary.textColor,
+      hoverBg: button$1.variants.secondary.hover.backgroundColor,
+      activeBg: button$1.variants.secondary.active.backgroundColor,
+      disabledBg: button$1.variants.secondary.disabled.backgroundColor,
+      disabledText: button$1.variants.secondary.disabled.textColor
     },
     naked: {
-      bg: button.variants.naked.backgroundColor,
-      text: button.variants.naked.textColor,
-      hoverBg: button.variants.naked.hover.backgroundColor,
-      activeBg: button.variants.naked.active.backgroundColor,
-      disabledBg: button.variants.naked.disabled.backgroundColor,
-      disabledText: button.variants.naked.disabled.textColor
+      bg: button$1.variants.naked.backgroundColor,
+      text: button$1.variants.naked.textColor,
+      hoverBg: button$1.variants.naked.hover.backgroundColor,
+      activeBg: button$1.variants.naked.active.backgroundColor,
+      disabledBg: button$1.variants.naked.disabled.backgroundColor,
+      disabledText: button$1.variants.naked.disabled.textColor
     },
     emphasis: {
-      bg: button.variants.emphasis.backgroundColor,
-      text: button.variants.emphasis.textColor,
-      hoverBg: button.variants.emphasis.hover.backgroundColor,
-      activeBg: button.variants.emphasis.active.backgroundColor,
-      disabledBg: button.variants.emphasis.disabled.backgroundColor,
-      disabledText: button.variants.emphasis.disabled.textColor
+      bg: button$1.variants.emphasis.backgroundColor,
+      text: button$1.variants.emphasis.textColor,
+      hoverBg: button$1.variants.emphasis.hover.backgroundColor,
+      activeBg: button$1.variants.emphasis.active.backgroundColor,
+      disabledBg: button$1.variants.emphasis.disabled.backgroundColor,
+      disabledText: button$1.variants.emphasis.disabled.textColor
     },
     danger: {
-      bg: button.variants.danger.backgroundColor,
-      text: button.variants.danger.textColor,
-      hoverBg: button.variants.danger.hover.backgroundColor,
-      activeBg: button.variants.danger.active.backgroundColor,
-      disabledBg: button.variants.danger.disabled.backgroundColor,
-      disabledText: button.variants.danger.disabled.textColor
+      bg: button$1.variants.danger.backgroundColor,
+      text: button$1.variants.danger.textColor,
+      hoverBg: button$1.variants.danger.hover.backgroundColor,
+      activeBg: button$1.variants.danger.active.backgroundColor,
+      disabledBg: button$1.variants.danger.disabled.backgroundColor,
+      disabledText: button$1.variants.danger.disabled.textColor
     }
   };
   var config = variantConfig[$variant];
@@ -1848,13 +1868,13 @@ var getSizeStyles$1 = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
-      return "\n        font: ".concat(button.sizes.small.font, ";\n        padding: ").concat(button.sizes.small.padding, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.small.font, ";\n        padding: ").concat(button$1.sizes.small.padding, ";\n      ");
     case 'medium':
-      return "\n        font: ".concat(button.sizes.medium.font, ";\n        padding: ").concat(button.sizes.medium.padding, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.medium.font, ";\n        padding: ").concat(button$1.sizes.medium.padding, ";\n      ");
     case 'large':
-      return "\n        font: ".concat(button.sizes.large.font, ";\n        padding: ").concat(button.sizes.large.padding, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        padding: ").concat(button$1.sizes.large.padding, ";\n      ");
     default:
-      return "\n        font: ".concat(button.sizes.large.font, ";\n        padding: ").concat(button.sizes.large.padding, ";\n      ");
+      return "\n        font: ".concat(button$1.sizes.large.font, ";\n        padding: ").concat(button$1.sizes.large.padding, ";\n      ");
   }
 };
 var StyledButton = styled.button.withConfig({
@@ -1863,16 +1883,16 @@ var StyledButton = styled.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
+})(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);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
-})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+})(templateObject_2$r || (templateObject_2$r = __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.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
+])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
 // Helper function to get icon size based on button size
 var getIconSize = function getIconSize(buttonSize) {
   switch (buttonSize) {
@@ -1971,14 +1991,14 @@ var Button = function Button(_a) {
     children: renderButtonContent(children, iconName, size)
   }));
 };
-var templateObject_1$D, templateObject_2$q;
+var templateObject_1$E, templateObject_2$r;
 
-var semantic$e = tokensData.semantic,
-  base$a = tokensData.base;
-var color$7 = semantic$e.color,
-  typography$4 = semantic$e.typography,
-  border$8 = semantic$e.border,
-  spacing$7 = semantic$e.spacing;
+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 category = color$7.category;
 var radius$4 = border$8.radius;
 var layout$3 = spacing$7.layout;
@@ -1988,7 +2008,7 @@ var StyledCategoryBadge = styled.span.withConfig({
   },
   displayName: "CategoryBadge__StyledCategoryBadge",
   componentId: "sc-17aslpn-0"
-})(templateObject_1$C || (templateObject_1$C = __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$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"
 /**
  * CategoryBadge component for displaying transaction categories
  *
@@ -2006,7 +2026,7 @@ var StyledCategoryBadge = styled.span.withConfig({
  *   Travel
  * </CategoryBadge>
  * ```
- */])), radius$4.circle, base$a.fontWeight[3], base$a.border.width[1], function (_a) {
+ */])), radius$4.circle, base$b.fontWeight[3], base$b.border.width[1], function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? '24px' : '32px';
 }, function (_a) {
@@ -2086,7 +2106,7 @@ var CategoryBadge = function CategoryBadge(_a) {
   });
 };
 CategoryBadge.displayName = 'CategoryBadge';
-var templateObject_1$C;
+var templateObject_1$D;
 
 var chip = tokensData.component.chip;
 // Helper function to get variant styles matching Button's approach
@@ -2130,7 +2150,7 @@ var StyledChip = styled.span.withConfig({
   },
   displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$B || (templateObject_1$B = __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$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"
 // 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';
@@ -2139,7 +2159,7 @@ var StyledChip = styled.span.withConfig({
 var IconContainer = styled.span.withConfig({
   displayName: "ChipBase__IconContainer",
   componentId: "sc-moa6zc-1"
-})(templateObject_2$p || (templateObject_2$p = __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$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"
 // Close button for dismissible chips
 ])), tokensData.semantic.spacing.layout.xs);
 // Close button for dismissible chips
@@ -2149,10 +2169,10 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$n || (templateObject_3$n = __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$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) {
   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$B, templateObject_2$p, templateObject_3$n;
+var templateObject_1$C, templateObject_2$q, templateObject_3$o;
 
 /**
  * Chip - Compact element for displaying tags, categories, and labels
@@ -2402,33 +2422,33 @@ var spacing$6 = tokensData.semantic.spacing;
 var StyledContainer$2 = styled.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$A || (templateObject_1$A = __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 = function Container(_a) {
+})(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']);
+var Container$1 = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
   return jsx(StyledContainer$2, __assign({}, props, {
     children: children
   }));
 };
-var templateObject_1$A;
+var templateObject_1$B;
 
-var base$9 = tokensData.base;
+var base$a = tokensData.base;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$z || (templateObject_1$z = __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$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);
 var ImageLink = styled.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
-})(templateObject_2$o || (templateObject_2$o = __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$9.duration.normal, base$9.easing.easeInOut);
+})(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);
 var ImageButton = styled.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$m || (templateObject_3$m = __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$9.duration.normal, base$9.easing.easeInOut);
+})(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);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
-})(templateObject_4$i || (templateObject_4$i = __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$9.border.radius[2]);
+})(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]);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -2458,15 +2478,15 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$z, templateObject_2$o, templateObject_3$m, templateObject_4$i;
+var templateObject_1$A, templateObject_2$p, templateObject_3$n, templateObject_4$j;
 
-var _a$6 = tokensData.semantic,
-  typography$3 = _a$6.typography,
-  color$6 = _a$6.color;
+var _a$7 = tokensData.semantic,
+  typography$3 = _a$7.typography,
+  color$6 = _a$7.color;
 var TimeStyled = styled.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(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);
@@ -2515,17 +2535,19 @@ var DateFormatter = function DateFormatter(_a) {
     children: displayText
   });
 };
-var templateObject_1$y;
+var templateObject_1$z;
 
 var motion$2 = tokensData.semantic.motion,
-  iconButton = tokensData.component.iconButton;
+  _a$6 = tokensData.component,
+  iconButton = _a$6.iconButton,
+  button = _a$6.button;
 var IconButtonStyled = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  background-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 {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-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  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 {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-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$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) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'primary':
@@ -2537,6 +2559,18 @@ var IconButtonStyled = styled.button.withConfig({
     default:
       return iconButton.primary.backgroundColor;
   }
+}, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'primary':
+      return button.primary.textColor;
+    case 'secondary':
+      return button.variants.secondary.textColor;
+    case 'naked':
+      return button.variants.naked.textColor;
+    default:
+      return button.primary.textColor;
+  }
 }, iconButton.primary.borderRadius, motion$2.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
   var $size = _a.$size;
   return iconButton.sizes[$size].minWidth;
@@ -2558,7 +2592,19 @@ var IconButtonStyled = styled.button.withConfig({
     default:
       return iconButton.hover.backgroundColor;
   }
-}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor);
+}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'primary':
+      return button.disabled.textColor;
+    case 'secondary':
+      return button.variants.secondary.disabled.textColor;
+    case 'naked':
+      return button.variants.naked.disabled.textColor;
+    default:
+      return button.disabled.textColor;
+  }
+});
 var IconButton = function IconButton(_a) {
   var variant = _a.variant,
     _b = _a.size,
@@ -2577,13 +2623,8 @@ var IconButton = function IconButton(_a) {
     type = _d === void 0 ? 'button' : _d,
     htmlProps = __rest(_a, ["variant", "size", "url", "iconName", "onClick", 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-pressed', 'data-testid', "disabled", "type"]);
   var handleClick = function handleClick(event) {
-    // Prevent default if disabled
-    if (disabled) {
-      event.preventDefault();
-      return;
-    }
     if (onClick) {
-      onClick();
+      onClick(event);
     } else if (url && url.trim() !== '') {
       // Use proper navigation instead of direct href assignment
       if (url.startsWith('http') || url.startsWith('//')) {
@@ -2593,52 +2634,28 @@ var IconButton = function IconButton(_a) {
       }
     }
   };
-  var handleKeyDown = function handleKeyDown(event) {
-    // Handle keyboard activation (Enter and Space)
-    if (disabled) return;
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleClick(event);
-    }
-  };
   var iconSize = size === 'large' ? 'lg' : size === 'small' ? 'sm' : 'md';
-  var getIconColor = function getIconColor(variant) {
-    switch (variant) {
-      case 'primary':
-        return 'inverse';
-      case 'secondary':
-        return 'default';
-      case 'naked':
-        return 'default';
-      default:
-        return 'default';
-    }
-  };
   return jsx(IconButtonStyled, __assign({
     "$variant": variant,
     "$size": size,
     onClick: handleClick,
-    onKeyDown: handleKeyDown,
     disabled: disabled,
     type: type,
-    role: "button",
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-expanded": ariaExpanded,
     "aria-pressed": ariaPressed,
-    "aria-disabled": disabled,
-    tabIndex: disabled ? -1 : 0,
     "data-testid": dataTestId
   }, htmlProps, {
     children: jsx(Icon, {
       name: iconName,
       size: iconSize,
-      iconColor: getIconColor(variant),
+      iconColor: "inherit",
       "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
     })
   }));
 };
-var templateObject_1$x;
+var templateObject_1$y;
 
 var StyledWrapper = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2646,7 +2663,7 @@ var StyledWrapper = styled.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$w || (templateObject_1$w = __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$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"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -2749,17 +2766,17 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     })]
   });
 };
-var templateObject_1$w;
+var templateObject_1$x;
 
 // Destructure tokens
-var semantic$d = tokensData.semantic;
-var _a$5 = __assign(__assign({}, semantic$d), {
+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,
   motion$1 = _a$5.motion,
-  component$1 = _a$5.component;
+  component$2 = _a$5.component;
 var radius$3 = border$7.radius;
 var ProgressBarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2767,10 +2784,10 @@ var ProgressBarContainer = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
-})(templateObject_3$l || (templateObject_3$l = __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' && css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component$1.progressBar.sizes[props.$height].height : component$1.progressBar.sizes.md.height);
+})(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' && 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' && css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component$1.progressBar.sizes[props.$width].height : component$1.progressBar.sizes.md.height);
+  return props.$variant === 'vertical' && 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);
 });
 var ProgressBarFill = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2778,7 +2795,7 @@ var ProgressBarFill = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarFill",
   componentId: "sc-1nco33q-1"
-})(templateObject_7$8 || (templateObject_7$8 = __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$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) {
   var backgroundColor;
   switch (props.$color) {
     case 'success':
@@ -2792,11 +2809,11 @@ var ProgressBarFill = styled.div.withConfig({
       backgroundColor = color$5.background.interactive;
       break;
   }
-  return css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
+  return css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
 }, function (props) {
-  return props.$variant === 'horizontal' && css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+  return props.$variant === 'horizontal' && 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' && 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)));
+  return props.$variant === 'vertical' && 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)));
 });
 var ProgressBar = function ProgressBar(_a) {
   var value = _a.value,
@@ -2823,7 +2840,7 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$8;
+var templateObject_1$w, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$9;
 
 // Destructure tokens for cleaner access
 var separatorTokens = tokensData.component.separator;
@@ -2834,7 +2851,7 @@ var StyledDivider = styled.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$u || (templateObject_1$u = __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$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"
 /**
  * Divider is an atomic component that provides visual separation between content sections.
  *
@@ -2947,7 +2964,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$u;
+var templateObject_1$v;
 
 var StyledStack = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2955,7 +2972,7 @@ var StyledStack = styled.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$t || (templateObject_1$t = __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$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"
 // Helper function to convert gap prop to CSS value
 ])));
 // Helper function to convert gap prop to CSS value
@@ -2994,7 +3011,7 @@ var Stack = function Stack(_a) {
     children: children
   });
 };
-var templateObject_1$t;
+var templateObject_1$u;
 
 // Destructure tokens for cleaner access
 var statusColors = tokensData.semantic.color.status;
@@ -3002,7 +3019,7 @@ var spacing$5 = tokensData.semantic.spacing.layout;
 var radius$2 = tokensData.semantic.border.radius;
 var transition = tokensData.semantic.motion.transition;
 var typography$2 = tokensData.semantic.typography;
-var scaleIn = keyframes(templateObject_1$s || (templateObject_1$s = __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 = 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 getStatusConfig = function getStatusConfig(status) {
   var configs = {
     pending: {
@@ -3069,7 +3086,7 @@ var StyledStatusBadge = styled.span.withConfig({
   },
   displayName: "StatusBadge__StyledStatusBadge",
   componentId: "sc-1paksgb-0"
-})(templateObject_2$m || (templateObject_2$m = __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$2.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    ");
@@ -3081,7 +3098,7 @@ var StyledStatusBadge = styled.span.withConfig({
 var ScreenReaderOnly = styled.span.withConfig({
   displayName: "StatusBadge__ScreenReaderOnly",
   componentId: "sc-1paksgb-1"
-})(templateObject_3$k || (templateObject_3$k = __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$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"
 /**
  * StatusBadge component for displaying transaction or task status
  *
@@ -3161,14 +3178,14 @@ var StatusBadge = function StatusBadge(_a) {
   });
 };
 StatusBadge.displayName = 'StatusBadge';
-var templateObject_1$s, templateObject_2$m, templateObject_3$k;
+var templateObject_1$t, templateObject_2$n, templateObject_3$l;
 
-var semantic$c = tokensData.semantic;
-var color$4 = semantic$c.color,
-  spacing$4 = semantic$c.spacing,
-  border$6 = semantic$c.border,
-  typography$1 = semantic$c.typography,
-  size = semantic$c.size;
+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 StyledTag = styled.span.withConfig({
@@ -3177,7 +3194,7 @@ var StyledTag = styled.span.withConfig({
   },
   displayName: "Tag__StyledTag",
   componentId: "sc-lzfmti-0"
-})(templateObject_1$r || (templateObject_1$r = __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$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"
 /**
  * Tag component for categorizing and labeling content
  *
@@ -3260,13 +3277,13 @@ var Tag = function Tag(_a) {
     children: children
   }));
 };
-var templateObject_1$r;
+var templateObject_1$s;
 
 // Destructure tokens for cleaner access
-var semantic$b = tokensData.semantic;
-var color$3 = semantic$b.color,
-  spacing$3 = semantic$b.spacing,
-  border$5 = semantic$b.border;
+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;
@@ -3274,27 +3291,27 @@ var radius = border$5.radius;
 var StyledHeader$2 = styled.div.withConfig({
   displayName: "AccountCard__StyledHeader",
   componentId: "sc-1erp7zn-0"
-})(templateObject_1$q || (templateObject_1$q = __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);
+})(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$l || (templateObject_2$l = __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);
+})(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$j || (templateObject_3$j = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), layout$1.lg);
+})(templateObject_3$k || (templateObject_3$k = __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$g || (templateObject_4$g = __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);
+})(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({
   displayName: "AccountCard__StyledActions",
   componentId: "sc-1erp7zn-4"
-})(templateObject_5$c || (templateObject_5$c = __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);
+})(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);
 var StyledStackWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
   componentId: "sc-1erp7zn-5"
-})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  height: 100%;\n  min-height: 168px;\n"], ["\n  height: 100%;\n  min-height: 168px;\n"
+})(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)
@@ -3454,26 +3471,26 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a;
+var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b;
 
-var semantic$a = tokensData.semantic,
-  base$8 = tokensData.base;
+var semantic$b = tokensData.semantic,
+  base$9 = tokensData.base;
 var StyledListItem = styled.li.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledListItem",
   componentId: "sc-1wzzt21-0"
-})(templateObject_1$p || (templateObject_1$p = __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$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) {
   var $interactive = _a.$interactive;
   return $interactive && 'user-select: none;';
 }, function (_a) {
   var $disabled = _a.$disabled;
-  return $disabled && "\n    opacity: ".concat(base$8.opacity[50], ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
+  return $disabled && "\n    opacity: ".concat(base$9.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$a.color.text.error, ";\n  ");
+  return $destructive && !$disabled && "\n    color: ".concat(semantic$b.color.text.error, ";\n  ");
 });
 var StyledItemContent = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3481,12 +3498,12 @@ var StyledItemContent = styled.div.withConfig({
   },
   displayName: "ListItem__StyledItemContent",
   componentId: "sc-1wzzt21-1"
-})(templateObject_2$k || (templateObject_2$k = __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$a.spacing.layout.md, function (_a) {
+})(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) {
   var $spacing = _a.$spacing;
-  return $spacing === 'compact' ? "".concat(semantic$a.spacing.layout.sm, " ").concat(semantic$a.spacing.layout.md) : "".concat(semantic$a.spacing.layout.md, " ").concat(semantic$a.spacing.layout.lg);
-}, base$8.border.radius[2], function (_a) {
+  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) {
   var $selected = _a.$selected;
-  return $selected ? semantic$a.color.background['interactive-subtle'] : 'transparent';
+  return $selected ? semantic$b.color.background['interactive-subtle'] : 'transparent';
 }, function (_a) {
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled;
@@ -3498,26 +3515,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$a.color.border.interactive);
+}, semantic$b.color.border.interactive);
 var StyledIconContainer$1 = styled.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
   componentId: "sc-1wzzt21-2"
-})(templateObject_3$i || (templateObject_3$i = __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$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"])));
 var StyledTextContent = styled.div.withConfig({
   displayName: "ListItem__StyledTextContent",
   componentId: "sc-1wzzt21-3"
-})(templateObject_4$f || (templateObject_4$f = __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$a.spacing.layout.xs);
+})(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);
 var StyledRightContent = styled.div.withConfig({
   displayName: "ListItem__StyledRightContent",
   componentId: "sc-1wzzt21-4"
-})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$a.spacing.layout.sm);
+})(templateObject_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);
 var StyledChevronIcon = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ListItem__StyledChevronIcon",
   componentId: "sc-1wzzt21-5"
-})(templateObject_6$9 || (templateObject_6$9 = __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$a.color.icon.subdued, function (_a) {
+})(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) {
   var $expanded = _a.$expanded;
   return $expanded ? '180deg' : '0deg';
 });
@@ -3527,7 +3544,7 @@ var StyledExpandedContent = styled.div.withConfig({
   },
   displayName: "ListItem__StyledExpandedContent",
   componentId: "sc-1wzzt21-6"
-})(templateObject_7$7 || (templateObject_7$7 = __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$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) {
   var $expanded = _a.$expanded;
   return $expanded ? '1000px' : '0';
 }, function (_a) {
@@ -3536,7 +3553,7 @@ var StyledExpandedContent = styled.div.withConfig({
 }, function (_a) {
   var $expanded = _a.$expanded,
     $spacing = _a.$spacing;
-  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$a.spacing.layout.sm, " ").concat(semantic$a.spacing.layout.md, " ").concat(semantic$a.spacing.layout.sm, " 48px") : "".concat(semantic$a.spacing.layout.sm, " ").concat(semantic$a.spacing.layout.lg, " ").concat(semantic$a.spacing.layout.md, " 60px"), ";\n    background-color: ").concat(semantic$a.color.background['subtle'], ";\n    border-radius: ").concat(base$8.border.radius[2], ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$a.spacing.layout.md : semantic$a.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md, ";\n  ");
+  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  ");
 });
 var ListItem = function ListItem(_a) {
   var primary = _a.primary,
@@ -3649,7 +3666,7 @@ var ListItem = function ListItem(_a) {
   }));
 };
 ListItem.displayName = 'ListItem';
-var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7;
+var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8;
 
 var _a$4 = tokensData.semantic,
   color$2 = _a$4.color,
@@ -3657,32 +3674,32 @@ var _a$4 = tokensData.semantic,
   layout = _a$4.spacing.layout,
   motion = _a$4.motion,
   elevation = _a$4.elevation;
-var slideUp = keyframes(templateObject_1$o || (templateObject_1$o = __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 = keyframes(templateObject_2$j || (templateObject_2$j = __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 slideUp = 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 = 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({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
-})(templateObject_3$h || (templateObject_3$h = __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$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);
 var StyledActionSheet = styled.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
-})(templateObject_4$e || (templateObject_4$e = __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);
+})(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({
   displayName: "ActionSheet__StyledHeader",
   componentId: "sc-regbol-2"
-})(templateObject_5$a || (templateObject_5$a = __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$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"]);
 var StyledHeaderContent = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
-})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
 var StyledCloseButton = styled.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7$6 || (templateObject_7$6 = __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$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);
 var StyledActionsList = styled.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"
+})(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"
 /**
  * ActionSheet component for bottom sheet modals
  *
@@ -3894,7 +3911,807 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-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;
+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;
+
+function detectSpeechRecognitionConstructor(targetWindow) {
+  if (!targetWindow) return null;
+  var candidateWindow = targetWindow;
+  if (candidateWindow.SpeechRecognition) {
+    return candidateWindow.SpeechRecognition;
+  }
+  if (candidateWindow.webkitSpeechRecognition) {
+    return candidateWindow.webkitSpeechRecognition;
+  }
+  return null;
+}
+function normalizeTranscript(input) {
+  return input.replace(/\s+/g, ' ').trim();
+}
+function mapSpeechErrorCode(error) {
+  switch (error) {
+    case 'not-allowed':
+    case 'service-not-allowed':
+      return 'not-allowed';
+    case 'no-speech':
+      return 'no-speech';
+    case 'audio-capture':
+      return 'audio-capture';
+    case 'aborted':
+      return 'aborted';
+    default:
+      return 'unknown';
+  }
+}
+function defaultVoiceErrorMessage(code) {
+  switch (code) {
+    case 'not-supported':
+      return 'Voice input is not supported in this browser. Use Chrome or Edge.';
+    case 'not-allowed':
+      return 'Microphone permission denied. Allow access and try again.';
+    case 'no-speech':
+      return 'No speech detected. Try again.';
+    case 'audio-capture':
+      return 'No microphone device detected. Check your microphone and try again.';
+    case 'aborted':
+      return 'Voice input was stopped.';
+    default:
+      return 'Voice input failed. Try again.';
+  }
+}
+
+var textDrivenState = function textDrivenState(hasText) {
+  return hasText ? 'typing' : 'idle';
+};
+function agentInputStateTransition(currentState, event) {
+  if (currentState === 'disabled') {
+    return 'disabled';
+  }
+  switch (event.type) {
+    case 'INPUT_CHANGE':
+      if (currentState === 'listening' || currentState === 'processingFinalTranscript' || currentState === 'submitting') {
+        return currentState;
+      }
+      return textDrivenState(event.hasText);
+    case 'MIC_START':
+      if (currentState === 'idle' || currentState === 'typing') {
+        return 'listening';
+      }
+      return currentState;
+    case 'VOICE_INTERIM':
+      if (currentState === 'listening') {
+        return 'listening';
+      }
+      return currentState;
+    case 'VOICE_FINAL':
+      if (currentState === 'listening') {
+        return 'processingFinalTranscript';
+      }
+      return currentState;
+    case 'MIC_STOP':
+      if (currentState === 'listening') {
+        return textDrivenState(event.hasText);
+      }
+      return currentState;
+    case 'SUBMIT':
+      return 'submitting';
+    case 'SUBMIT_SUCCESS':
+      return 'idle';
+    case 'SUBMIT_ERROR':
+      return 'error';
+    case 'VOICE_ERROR':
+    case 'TIMEOUT_NO_SPEECH':
+      return 'error';
+    case 'RESET_ERROR':
+      if (currentState === 'error') {
+        return textDrivenState(event.hasText);
+      }
+      return currentState;
+    default:
+      return currentState;
+  }
+}
+
+var semantic$a = tokensData.semantic,
+  base$8 = 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 pulseRing = keyframes(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  0% {\n    transform: scale(1);\n    opacity: 0.4;\n  }\n  70% {\n    transform: scale(1.08);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1.08);\n    opacity: 0;\n  }\n"], ["\n  0% {\n    transform: scale(1);\n    opacity: 0.4;\n  }\n  70% {\n    transform: scale(1.08);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1.08);\n    opacity: 0;\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]);
+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"])));
+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);
+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);
+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.xs);
+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);
+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"])));
+var MicButtonWrapper = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__MicButtonWrapper",
+  componentId: "sc-fhl996-7"
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    &::before {\n      animation: none;\n    }\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    &::before {\n      animation: none;\n    }\n  }\n"])), function (_a) {
+  var $isListening = _a.$isListening,
+    $reducedMotion = _a.$reducedMotion;
+  return $isListening && !$reducedMotion && css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n      &::before {\n        content: '';\n        position: absolute;\n        inset: -", ";\n        border: ", " solid ", ";\n        border-radius: ", ";\n        animation: ", " 1400ms ease-out infinite;\n        pointer-events: none;\n      }\n    "], ["\n      &::before {\n        content: '';\n        position: absolute;\n        inset: -", ";\n        border: ", " solid ", ";\n        border-radius: ", ";\n        animation: ", " 1400ms ease-out infinite;\n        pointer-events: none;\n      }\n    "])), base$8.spacing[1], base$8.border.width[1], semantic$a.color.border.interactive, base$8.border.radius[4], pulseRing);
+});
+var StatusRow = styled.div.withConfig({
+  displayName: "AgentInput__StatusRow",
+  componentId: "sc-fhl996-8"
+})(templateObject_11$2 || (templateObject_11$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]);
+var StatusText = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__StatusText",
+  componentId: "sc-fhl996-9"
+})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\npadding-left: ", ";\n  color: ", ";\n"], ["\npadding-left: ", ";\n  color: ", ";\n"])), semantic$a.spacing.layout.xl, function (_a) {
+  var $isError = _a.$isError;
+  return $isError ? semantic$a.color.text.error : semantic$a.color.text.subdued;
+});
+var StatusAnnouncement = styled.div.withConfig({
+  displayName: "AgentInput__StatusAnnouncement",
+  componentId: "sc-fhl996-10"
+})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
+var MeterContainer = styled.div.withConfig({
+  displayName: "AgentInput__MeterContainer",
+  componentId: "sc-fhl996-11"
+})(templateObject_14$1 || (templateObject_14$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]);
+var MeterBar = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__MeterBar",
+  componentId: "sc-fhl996-12"
+})(templateObject_15$1 || (templateObject_15$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) {
+  var $height = _a.$height;
+  return "".concat($height * 100, "%");
+});
+var VisuallyHiddenLabel = styled.label.withConfig({
+  displayName: "AgentInput__VisuallyHiddenLabel",
+  componentId: "sc-fhl996-13"
+})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n"])));
+function getInitialState(hasText) {
+  return hasText ? 'typing' : 'idle';
+}
+function createMeterBars(level) {
+  var clampedLevel = Math.max(0, Math.min(level, 1));
+  return [0.25 + clampedLevel * 0.75, 0.2 + clampedLevel * 0.6, 0.3 + clampedLevel * 0.7, 0.2 + clampedLevel * 0.5];
+}
+var AgentInput = function AgentInput(_a) {
+  var value = _a.value,
+    _b = _a.defaultValue,
+    defaultValue = _b === void 0 ? '' : _b,
+    onChange = _a.onChange,
+    onSubmit = _a.onSubmit,
+    _c = _a.placeholder,
+    placeholder = _c === void 0 ? 'Ask a question' : _c,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
+    isSubmitting = _a.isSubmitting,
+    _e = _a.enableVoice,
+    enableVoice = _e === void 0 ? true : _e,
+    _f = _a.autoSubmitOnVoiceFinal,
+    autoSubmitOnVoiceFinal = _f === void 0 ? true : _f,
+    _g = _a.voiceLanguage,
+    voiceLanguage = _g === void 0 ? 'en-AU' : _g,
+    _h = _a.noSpeechTimeoutMs,
+    noSpeechTimeoutMs = _h === void 0 ? 8000 : _h,
+    onVoiceStart = _a.onVoiceStart,
+    onVoiceStop = _a.onVoiceStop,
+    onVoiceInterim = _a.onVoiceInterim,
+    onVoiceFinal = _a.onVoiceFinal,
+    onVoiceError = _a.onVoiceError,
+    statusMessage = _a.statusMessage,
+    errorMessage = _a.errorMessage,
+    _j = _a.label,
+    label = _j === void 0 ? 'Agent input' : _j,
+    dataTestId = _a["data-testid"];
+  var isControlled = value !== undefined;
+  var _k = useState(defaultValue),
+    internalValue = _k[0],
+    setInternalValue = _k[1];
+  var _l = useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
+    machineState = _l[0],
+    setMachineState = _l[1];
+  var _m = useState(''),
+    interimTranscript = _m[0],
+    setInterimTranscript = _m[1];
+  var _o = useState(false),
+    internalSubmitting = _o[0],
+    setInternalSubmitting = _o[1];
+  var _p = useState(undefined),
+    internalErrorMessage = _p[0],
+    setInternalErrorMessage = _p[1];
+  var _q = useState(false),
+    voiceSupported = _q[0],
+    setVoiceSupported = _q[1];
+  var _r = useState(false),
+    prefersReducedMotion = _r[0],
+    setPrefersReducedMotion = _r[1];
+  var _s = useState(0),
+    meterLevel = _s[0],
+    setMeterLevel = _s[1];
+  var recognitionRef = useRef(null);
+  var noSpeechTimeoutRef = useRef(null);
+  var isStoppingRef = useRef(false);
+  var hasSubmittedVoiceFinalRef = useRef(false);
+  var audioStreamRef = useRef(null);
+  var audioContextRef = useRef(null);
+  var meterRafRef = useRef(null);
+  var inputId = useId();
+  var statusId = "".concat(inputId, "-status");
+  var currentValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
+  var hasText = normalizeTranscript(currentValue).length > 0;
+  var effectiveSubmitting = isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : internalSubmitting;
+  var effectiveState = disabled ? 'disabled' : machineState;
+  var isListening = effectiveState === 'listening';
+  var hasVoice = enableVoice && voiceSupported;
+  var updateMachineState = useCallback(function (event) {
+    setMachineState(function (previousState) {
+      return agentInputStateTransition(previousState, event);
+    });
+  }, []);
+  var updateValue = useCallback(function (nextValue) {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  }, [isControlled, onChange]);
+  var clearNoSpeechTimeout = useCallback(function () {
+    if (noSpeechTimeoutRef.current) {
+      window.clearTimeout(noSpeechTimeoutRef.current);
+      noSpeechTimeoutRef.current = null;
+    }
+  }, []);
+  var stopMeter = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (meterRafRef.current) {
+              window.cancelAnimationFrame(meterRafRef.current);
+              meterRafRef.current = null;
+            }
+            if (audioStreamRef.current) {
+              audioStreamRef.current.getTracks().forEach(function (track) {
+                return track.stop();
+              });
+              audioStreamRef.current = null;
+            }
+            if (!audioContextRef.current) return [3 /*break*/, 2];
+            return [4 /*yield*/, audioContextRef.current.close()];
+          case 1:
+            _a.sent();
+            audioContextRef.current = null;
+            _a.label = 2;
+          case 2:
+            setMeterLevel(0);
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, []);
+  var startMeter = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var stream, audioContext, analyser_1, source, data_1, _loop_;
+      var _b;
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            if (prefersReducedMotion || !((_b = navigator === null || navigator === void 0 ? void 0 : navigator.mediaDevices) === null || _b === void 0 ? void 0 : _b.getUserMedia)) {
+              return [2 /*return*/];
+            }
+            _c.label = 1;
+          case 1:
+            _c.trys.push([1, 3,, 4]);
+            return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+              audio: true
+            })];
+          case 2:
+            stream = _c.sent();
+            audioContext = new AudioContext();
+            analyser_1 = audioContext.createAnalyser();
+            analyser_1.fftSize = 256;
+            source = audioContext.createMediaStreamSource(stream);
+            source.connect(analyser_1);
+            data_1 = new Uint8Array(analyser_1.frequencyBinCount);
+            audioStreamRef.current = stream;
+            audioContextRef.current = audioContext;
+            _loop_ = function loop_1() {
+              analyser_1.getByteTimeDomainData(data_1);
+              var sum = 0;
+              for (var index = 0; index < data_1.length; index += 1) {
+                var centered = data_1[index] / 128 - 1;
+                sum += centered * centered;
+              }
+              var rms = Math.sqrt(sum / data_1.length);
+              var nextLevel = Math.max(0.05, Math.min(rms * 3, 1));
+              setMeterLevel(nextLevel);
+              meterRafRef.current = window.requestAnimationFrame(_loop_);
+            };
+            meterRafRef.current = window.requestAnimationFrame(_loop_);
+            return [3 /*break*/, 4];
+          case 3:
+            _c.sent();
+            setMeterLevel(0);
+            return [3 /*break*/, 4];
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [prefersReducedMotion]);
+  var emitVoiceError = useCallback(function (code, fallback) {
+    var message = fallback !== null && fallback !== void 0 ? fallback : defaultVoiceErrorMessage(code);
+    setInternalErrorMessage(message);
+    updateMachineState({
+      type: 'VOICE_ERROR'
+    });
+    onVoiceError === null || onVoiceError === void 0 ? void 0 : onVoiceError({
+      code: code,
+      message: message
+    });
+  }, [onVoiceError, updateMachineState]);
+  var submitPayload = useCallback(function (rawText, source) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var text;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            text = normalizeTranscript(rawText);
+            if (!text || disabled || effectiveSubmitting) {
+              return [2 /*return*/];
+            }
+            updateMachineState({
+              type: 'SUBMIT'
+            });
+            setInternalErrorMessage(undefined);
+            if (isSubmitting === undefined) {
+              setInternalSubmitting(true);
+            }
+            _b.label = 1;
+          case 1:
+            _b.trys.push([1, 3, 4, 5]);
+            return [4 /*yield*/, onSubmit({
+              text: text,
+              source: source,
+              timestamp: new Date().toISOString()
+            })];
+          case 2:
+            _b.sent();
+            updateMachineState({
+              type: 'SUBMIT_SUCCESS'
+            });
+            setInterimTranscript('');
+            updateValue('');
+            return [3 /*break*/, 5];
+          case 3:
+            _b.sent();
+            updateMachineState({
+              type: 'SUBMIT_ERROR'
+            });
+            if (source === 'voice-final') {
+              updateValue(text);
+            }
+            setInternalErrorMessage('Submission failed. Please try again.');
+            return [3 /*break*/, 5];
+          case 4:
+            if (isSubmitting === undefined) {
+              setInternalSubmitting(false);
+            }
+            return [7 /*endfinally*/];
+          case 5:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [disabled, effectiveSubmitting, isSubmitting, onSubmit, updateMachineState, updateValue]);
+  var stopListening = useCallback(function (emitStopEvent_1) {
+    var args_1 = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      args_1[_i - 1] = arguments[_i];
+    }
+    return __awaiter(void 0, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
+      if (preserveState === void 0) {
+        preserveState = false;
+      }
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            isStoppingRef.current = true;
+            clearNoSpeechTimeout();
+            setInterimTranscript('');
+            if (recognitionRef.current) {
+              try {
+                recognitionRef.current.stop();
+              } catch (_b) {
+                // no-op
+              }
+            }
+            return [4 /*yield*/, stopMeter()];
+          case 1:
+            _a.sent();
+            if (emitStopEvent) {
+              onVoiceStop === null || onVoiceStop === void 0 ? void 0 : onVoiceStop();
+            }
+            if (!preserveState) {
+              updateMachineState({
+                type: 'MIC_STOP',
+                hasText: hasText
+              });
+            }
+            isStoppingRef.current = false;
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [clearNoSpeechTimeout, hasText, onVoiceStop, stopMeter, updateMachineState]);
+  var onNoSpeechTimeout = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var message;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            clearNoSpeechTimeout();
+            updateMachineState({
+              type: 'TIMEOUT_NO_SPEECH'
+            });
+            message = defaultVoiceErrorMessage('no-speech');
+            setInternalErrorMessage(message);
+            onVoiceError === null || onVoiceError === void 0 ? void 0 : onVoiceError({
+              code: 'no-speech',
+              message: message
+            });
+            return [4 /*yield*/, stopListening(true, true)];
+          case 1:
+            _a.sent();
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [clearNoSpeechTimeout, onVoiceError, stopListening, updateMachineState]);
+  var beginListening = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            if (!recognitionRef.current || disabled || effectiveSubmitting) {
+              return [2 /*return*/];
+            }
+            setInternalErrorMessage(undefined);
+            hasSubmittedVoiceFinalRef.current = false;
+            _b.label = 1;
+          case 1:
+            _b.trys.push([1, 3,, 4]);
+            recognitionRef.current.start();
+            updateMachineState({
+              type: 'MIC_START'
+            });
+            onVoiceStart === null || onVoiceStart === void 0 ? void 0 : onVoiceStart();
+            clearNoSpeechTimeout();
+            noSpeechTimeoutRef.current = window.setTimeout(onNoSpeechTimeout, noSpeechTimeoutMs);
+            return [4 /*yield*/, startMeter()];
+          case 2:
+            _b.sent();
+            return [3 /*break*/, 4];
+          case 3:
+            _b.sent();
+            emitVoiceError('unknown');
+            return [3 /*break*/, 4];
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [clearNoSpeechTimeout, disabled, effectiveSubmitting, emitVoiceError, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceStart, startMeter, updateMachineState]);
+  useEffect(function () {
+    var constructor = detectSpeechRecognitionConstructor(window);
+    setVoiceSupported(Boolean(constructor));
+    if (!enableVoice || !constructor) {
+      return;
+    }
+    var recognition = new constructor();
+    recognition.lang = voiceLanguage;
+    recognition.interimResults = true;
+    recognition.continuous = false;
+    recognition.onresult = function (event) {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var interim, finalText, index, result, normalizedInterim, normalizedFinal;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              clearNoSpeechTimeout();
+              noSpeechTimeoutRef.current = window.setTimeout(onNoSpeechTimeout, noSpeechTimeoutMs);
+              interim = '';
+              finalText = '';
+              for (index = event.resultIndex; index < event.results.length; index += 1) {
+                result = event.results[index];
+                if (!result || !result[0]) continue;
+                if (result.isFinal) {
+                  finalText += " ".concat(result[0].transcript);
+                } else {
+                  interim += " ".concat(result[0].transcript);
+                }
+              }
+              normalizedInterim = normalizeTranscript(interim);
+              setInterimTranscript(normalizedInterim);
+              updateMachineState({
+                type: 'VOICE_INTERIM'
+              });
+              if (normalizedInterim) {
+                onVoiceInterim === null || onVoiceInterim === void 0 ? void 0 : onVoiceInterim(normalizedInterim);
+              }
+              normalizedFinal = normalizeTranscript(finalText);
+              if (!normalizedFinal || hasSubmittedVoiceFinalRef.current) {
+                return [2 /*return*/];
+              }
+              hasSubmittedVoiceFinalRef.current = true;
+              updateMachineState({
+                type: 'VOICE_FINAL'
+              });
+              setInterimTranscript('');
+              onVoiceFinal === null || onVoiceFinal === void 0 ? void 0 : onVoiceFinal(normalizedFinal);
+              return [4 /*yield*/, stopMeter()];
+            case 1:
+              _a.sent();
+              if (!autoSubmitOnVoiceFinal) return [3 /*break*/, 3];
+              return [4 /*yield*/, submitPayload(normalizedFinal, 'voice-final')];
+            case 2:
+              _a.sent();
+              return [3 /*break*/, 4];
+            case 3:
+              updateValue(normalizedFinal);
+              _a.label = 4;
+            case 4:
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    recognition.onerror = function (event) {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var mappedCode;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              mappedCode = mapSpeechErrorCode(event.error);
+              emitVoiceError(mappedCode);
+              return [4 /*yield*/, stopListening(true, true)];
+            case 1:
+              _a.sent();
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    recognition.onend = function () {
+      return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (isStoppingRef.current) return [2 /*return*/];
+              clearNoSpeechTimeout();
+              return [4 /*yield*/, stopMeter()];
+            case 1:
+              _a.sent();
+              if (!hasSubmittedVoiceFinalRef.current) {
+                updateMachineState({
+                  type: 'MIC_STOP',
+                  hasText: hasText
+                });
+              }
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    recognitionRef.current = recognition;
+    return function () {
+      var _a;
+      clearNoSpeechTimeout();
+      (_a = recognitionRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+      recognitionRef.current = null;
+      stopMeter();
+    };
+  }, [autoSubmitOnVoiceFinal, clearNoSpeechTimeout, emitVoiceError, enableVoice, hasText, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceFinal, onVoiceInterim, stopListening, stopMeter, submitPayload, updateMachineState, updateValue, voiceLanguage]);
+  useEffect(function () {
+    var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    var sync = function sync() {
+      return setPrefersReducedMotion(mediaQuery.matches);
+    };
+    sync();
+    mediaQuery.addEventListener('change', sync);
+    return function () {
+      return mediaQuery.removeEventListener('change', sync);
+    };
+  }, []);
+  useEffect(function () {
+    if (effectiveState === 'error' && !internalErrorMessage && !errorMessage) {
+      updateMachineState({
+        type: 'RESET_ERROR',
+        hasText: hasText
+      });
+    }
+  }, [effectiveState, errorMessage, hasText, internalErrorMessage, updateMachineState]);
+  useEffect(function () {
+    if (!disabled && (machineState === 'idle' || machineState === 'typing')) {
+      updateMachineState({
+        type: 'INPUT_CHANGE',
+        hasText: hasText
+      });
+    }
+  }, [disabled, hasText, machineState, updateMachineState]);
+  var displayedValue = useMemo(function () {
+    if (!interimTranscript) {
+      return currentValue;
+    }
+    return normalizeTranscript([currentValue, interimTranscript].filter(Boolean).join(' '));
+  }, [currentValue, interimTranscript]);
+  var onTextChange = function onTextChange(event) {
+    updateValue(event.target.value);
+    if (effectiveState === 'error') {
+      setInternalErrorMessage(undefined);
+      updateMachineState({
+        type: 'RESET_ERROR',
+        hasText: normalizeTranscript(event.target.value).length > 0
+      });
+    }
+  };
+  var onInputKeyDown = function onInputKeyDown(event) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!(event.key === 'Escape' && isListening)) return [3 /*break*/, 2];
+            event.preventDefault();
+            return [4 /*yield*/, stopListening(true)];
+          case 1:
+            _a.sent();
+            return [2 /*return*/];
+          case 2:
+            if (!(event.key === 'Enter')) return [3 /*break*/, 4];
+            event.preventDefault();
+            return [4 /*yield*/, submitPayload(currentValue, 'text')];
+          case 3:
+            _a.sent();
+            _a.label = 4;
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var onMicToggle = function onMicToggle() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!hasVoice) return [2 /*return*/];
+            if (!isListening) return [3 /*break*/, 2];
+            return [4 /*yield*/, stopListening(true)];
+          case 1:
+            _a.sent();
+            return [2 /*return*/];
+          case 2:
+            return [4 /*yield*/, beginListening()];
+          case 3:
+            _a.sent();
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var statusByState = {
+    idle: statusMessage || DEFAULT_IDLE_HELPER,
+    typing: statusMessage || DEFAULT_IDLE_HELPER,
+    listening: statusMessage || DEFAULT_LISTENING_MESSAGE,
+    processingFinalTranscript: statusMessage || DEFAULT_PROCESSING_MESSAGE,
+    submitting: statusMessage || 'Submitting…',
+    error: errorMessage || internalErrorMessage || 'Voice input failed. Try again.',
+    disabled: statusMessage || DEFAULT_IDLE_HELPER
+  };
+  var unsupportedMessage = defaultVoiceErrorMessage('not-supported');
+  var shouldShowUnsupported = enableVoice && !hasVoice;
+  var resolvedStatus = shouldShowUnsupported ? unsupportedMessage : statusByState[effectiveState];
+  var isStatusError = effectiveState === 'error' || shouldShowUnsupported;
+  var meterBars = createMeterBars(meterLevel);
+  var sendDisabled = disabled || effectiveSubmitting || normalizeTranscript(currentValue).length === 0;
+  return jsxs(Container, {
+    "data-testid": dataTestId,
+    children: [jsx(VisuallyHiddenLabel, {
+      htmlFor: inputId,
+      children: label
+    }), jsx(ControlsRow, {
+      children: jsx(InputWrapper, {
+        children: jsxs(InputShell, {
+          "data-disabled": disabled || effectiveSubmitting,
+          children: [jsx(Input, {
+            id: inputId,
+            type: "text",
+            "aria-label": label,
+            value: displayedValue,
+            onChange: onTextChange,
+            onKeyDown: onInputKeyDown,
+            placeholder: placeholder,
+            disabled: disabled || effectiveSubmitting,
+            readOnly: isListening,
+            "aria-describedby": statusId
+          }), jsxs(InputActions, {
+            children: [hasVoice && jsx(MicButtonWrapper, {
+              "$isListening": isListening,
+              "$reducedMotion": prefersReducedMotion,
+              children: jsx(CircularActionIconButton, {
+                variant: "naked",
+                size: "medium",
+                iconName: 'mic',
+                onClick: onMicToggle,
+                "aria-pressed": isListening,
+                "aria-label": isListening ? 'Stop voice input' : 'Start voice input',
+                disabled: disabled || effectiveSubmitting,
+                type: "button"
+              })
+            }), jsx(CircularActionIconButton, {
+              variant: "secondary",
+              size: "medium",
+              iconName: "directionUp",
+              onClick: function onClick() {
+                return submitPayload(currentValue, 'text');
+              },
+              disabled: sendDisabled,
+              "aria-label": "Send message",
+              type: "button"
+            })]
+          })]
+        })
+      })
+    }), jsxs(StatusRow, {
+      children: [jsx(StatusText, {
+        "$isError": isStatusError,
+        children: jsx(StatusAnnouncement, {
+          id: statusId,
+          role: "status",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: jsx(Typography, {
+            variant: "small",
+            children: resolvedStatus
+          })
+        })
+      }), isListening && !prefersReducedMotion && jsx(MeterContainer, {
+        "aria-hidden": "true",
+        children: meterBars.map(function (barHeight, index) {
+          return jsx(MeterBar, {
+            "$height": barHeight
+          }, "meter-".concat(index));
+        })
+      })]
+    })]
+  });
+};
+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;
 
 var semantic$9 = tokensData.semantic,
   base$7 = tokensData.base;
@@ -4063,7 +4880,7 @@ var isInternalUrl = function isInternalUrl(url) {
 var Breadcrumbs = function Breadcrumbs(_a) {
   var breadcrumbs = _a.breadcrumbs,
     LinkComponent = _a.linkComponent;
-  return jsx(Container, {
+  return jsx(Container$1, {
     children: jsx(BreadcrumbNavStyled, {
       "aria-label": "breadcrumb",
       children: jsx("ol", {
@@ -7376,5 +8193,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
 // Main design system exports
 var tokens = tokensData;
 
-export { AccountCard, ActionSheet, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
+export { AccountCard, ActionSheet, AgentInput, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container$1 as Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map