@common-origin/design-system 2.4.0 → 2.6.1

package/dist/index.esm.js

@@ -91,7 +91,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var base$d = {
+var base$b = {
 	border: {
 		radius: {
 			"1": "0.125rem",
@@ -407,7 +407,7 @@ var base$d = {
 	},
 	$ref: "./base/index.json"
 };
-var component$1 = {
+var component$2 = {
 	button: {
 		primary: {
 			backgroundColor: "#212529",
@@ -458,6 +458,34 @@ var component$1 = {
 					backgroundColor: "transparent",
 					textColor: "#adb5bd"
 				}
+			},
+			emphasis: {
+				backgroundColor: "#0265DC",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#0054B6"
+				},
+				active: {
+					backgroundColor: "#004491"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
+			danger: {
+				backgroundColor: "#D31510",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#B40000"
+				},
+				active: {
+					backgroundColor: "#930000"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
 			}
 		},
 		sizes: {
@@ -479,22 +507,66 @@ var component$1 = {
 		"default": {
 			backgroundColor: "#e9ecef",
 			textColor: "#212529",
-			borderRadius: "0.25rem",
+			borderRadius: "0.75rem",
 			padding: "2px 0.5rem",
 			font: "500 0.875rem/1.25rem 'Inter', sans-serif"
 		},
+		hover: {
+			backgroundColor: "#dee2e6"
+		},
+		active: {
+			backgroundColor: "#ced4da"
+		},
+		focus: {
+			outline: "0.125rem solid #343a40",
+			outlineOffset: "2px"
+		},
+		disabled: {
+			backgroundColor: "#e9ecef",
+			textColor: "#adb5bd"
+		},
 		variants: {
 			emphasis: {
 				backgroundColor: "#212529",
-				textColor: "#ffffff"
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#343a40"
+				},
+				active: {
+					backgroundColor: "#16191C"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
 			},
 			subtle: {
 				backgroundColor: "#ffffff",
-				textColor: "#212529"
+				textColor: "#212529",
+				hover: {
+					backgroundColor: "#f8f9fa"
+				},
+				active: {
+					backgroundColor: "#e9ecef"
+				},
+				disabled: {
+					backgroundColor: "#ffffff",
+					textColor: "#adb5bd"
+				}
 			},
 			interactive: {
 				backgroundColor: "#0265DC",
-				textColor: "#ffffff"
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#0054B6"
+				},
+				active: {
+					backgroundColor: "#004491"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
 			}
 		},
 		sizes: {
@@ -671,13 +743,32 @@ var component$1 = {
 	},
 	$ref: "./component/index.json"
 };
-var semantic$g = {
+var semantic$i = {
+	elevation: {
+		none: "none",
+		inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+		raised: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+		floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+		overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+		sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+	},
 	border: {
 		"default": "0.0625rem solid #e9ecef",
 		subtle: "0.0625rem solid #dee2e6",
 		strong: "0.0625rem solid #343a40",
 		focus: "0.125rem solid #343a40",
-		tooltip: "0.125rem dotted #dee2e6"
+		tooltip: "0.125rem dotted #dee2e6",
+		radius: {
+			none: "0",
+			xs: "0.125rem",
+			sm: "0.25rem",
+			md: "0.5rem",
+			lg: "0.75rem",
+			xl: "1rem",
+			"2xl": "1.5rem",
+			"3xl": "2rem",
+			circle: "10rem"
+		}
 	},
 	size: {
 		icon: {
@@ -856,11 +947,17 @@ var semantic$g = {
 	$ref: "./semantic/index.json"
 };
 var tokensData = {
-	base: base$d,
-	component: component$1,
-	semantic: semantic$g
+	base: base$b,
+	component: component$2,
+	semantic: semantic$i
 };
 
+// Destructure tokens
+var semantic$h = tokensData.semantic;
+var color$a = semantic$h.color,
+  size$1 = semantic$h.size,
+  border$a = semantic$h.border;
+var radius$6 = border$a.radius;
 var AvatarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -869,25 +966,25 @@ var AvatarContainer = styled.div.withConfig({
   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) {
   var $size = _a.$size;
-  return tokensData.semantic.size.avatar[$size];
+  return size$1.avatar[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return tokensData.semantic.size.avatar[$size];
-}, tokensData.base.border.radius.circle, tokensData.semantic.color.background.surface);
+  return size$1.avatar[$size];
+}, radius$6.circle, color$a.background.surface);
 var AvatarImage = styled.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$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"])), tokensData.base.border.radius.circle);
+})(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);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$p || (templateObject_3$p = __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$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"
 // Helper function to get initials from name
 ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -899,7 +996,7 @@ var AvatarInitials = styled.span.withConfig({
     xl: tokensData.base.fontSize[5]
   };
   return sizeMap[$size];
-}, tokensData.semantic.color.text["default"]);
+}, color$a.text["default"]);
 // Helper function to get initials from name
 var getInitials = function getInitials(name) {
   return name.split(' ').map(function (word) {
@@ -953,43 +1050,43 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$I, templateObject_2$t, templateObject_3$p;
+var templateObject_1$I, templateObject_2$t, templateObject_3$q;
 
-var _a$5 = tokensData.semantic,
-  typography$2 = _a$5.typography,
-  color$4 = _a$5.color;
+var _a$7 = tokensData.semantic,
+  typography$5 = _a$7.typography,
+  color$9 = _a$7.color;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
-    display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
-    h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
-    h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
-    h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
-    subtitle: "font: ".concat(typography$2.subtitle, ";"),
-    body: "font: ".concat(typography$2.body, ";"),
-    small: "font: ".concat(typography$2.small, ";"),
-    overline: "font: ".concat(typography$2.overline, ";"),
-    caption: "font: ".concat(typography$2.caption, "; text-transform: uppercase;"),
-    button1: "font: ".concat(typography$2.button1, ";"),
-    button2: "font: ".concat(typography$2.button2, ";"),
-    button3: "font: ".concat(typography$2.button3, ";"),
-    label: "font: ".concat(typography$2.label, ";")
+    display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
+    h1: "font: ".concat(typography$5.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
+    h2: "font: ".concat(typography$5.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
+    h3: "font: ".concat(typography$5.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
+    h4: "font: ".concat(typography$5.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
+    h5: "font: ".concat(typography$5.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
+    h6: "font: ".concat(typography$5.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
+    subtitle: "font: ".concat(typography$5.subtitle, ";"),
+    body: "font: ".concat(typography$5.body, ";"),
+    small: "font: ".concat(typography$5.small, ";"),
+    overline: "font: ".concat(typography$5.overline, ";"),
+    caption: "font: ".concat(typography$5.caption, "; text-transform: uppercase;"),
+    button1: "font: ".concat(typography$5.button1, ";"),
+    button2: "font: ".concat(typography$5.button2, ";"),
+    button3: "font: ".concat(typography$5.button3, ";"),
+    label: "font: ".concat(typography$5.label, ";")
   };
   return styles[variant] || styles.body;
 };
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
-    "default": color$4.text["default"],
-    emphasis: color$4.text.emphasis,
-    subdued: color$4.text.subdued,
-    inverse: color$4.text.inverse,
-    disabled: color$4.text.disabled,
-    interactive: color$4.text.interactive,
-    error: color$4.text.error,
-    success: color$4.text.success,
-    warning: color$4.text.warning
+    "default": color$9.text["default"],
+    emphasis: color$9.text.emphasis,
+    subdued: color$9.text.subdued,
+    inverse: color$9.text.inverse,
+    disabled: color$9.text.disabled,
+    interactive: color$9.text.interactive,
+    error: color$9.text.error,
+    success: color$9.text.success,
+    warning: color$9.text.warning
   };
   return colorMap[colorVariant] || colorMap["default"];
 };
@@ -1090,8 +1187,10 @@ var Typography = function Typography(_a) {
 };
 var templateObject_1$H;
 
-var color$3 = tokensData.semantic.color;
-  tokensData.base.shadow;
+var semantic$g = tokensData.semantic;
+var color$8 = semantic$g.color,
+  border$9 = semantic$g.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 BadgeWrapper = styled.span.withConfig({
   displayName: "Badge__BadgeWrapper",
@@ -1103,7 +1202,7 @@ var BadgeIndicator = styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$o || (templateObject_3$o = __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$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) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? '8px' : '16px';
@@ -1111,24 +1210,24 @@ var BadgeIndicator = styled.span.withConfig({
   return props.$isDot ? '8px' : '16px';
 }, function (props) {
   return props.$isDot ? '0' : '0 4px';
-}, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn$1, function (props) {
+}, radius$5.circle, color$8.background["default"], scaleIn$1, function (props) {
   switch (props.$variant) {
     case 'primary':
-      return "\n          background-color: ".concat(color$3.background.interactive, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$8.background.interactive, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color$3.background.error, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$8.background.error, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color$3.background.warning, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$8.background.warning, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color$3.background.success, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$8.background.success, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
     default:
-      return "\n          background-color: ".concat(color$3.background.emphasis, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$8.background.emphasis, ";\n          color: ").concat(color$8.text.inverse, ";\n        ");
   }
 });
 var ScreenReaderOnly$1 = styled.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
   componentId: "sc-tjz4pp-2"
-})(templateObject_4$j || (templateObject_4$j = __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$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"])));
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -1164,7 +1263,7 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$G, templateObject_2$s, templateObject_3$o, templateObject_4$j;
+var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$k;
 
 var StyledBox = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1172,16 +1271,16 @@ var StyledBox = styled.div.withConfig({
   },
   displayName: "Box__StyledBox",
   componentId: "sc-aj0jhd-0"
-})(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // 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  // Shadow\n  ", "\n  \n  // Cursor\n  ", "\n  \n  // Transition\n  ", "\n  \n  // Hover states\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
+})(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);
 }, function (props) {
   return props.$flexDirection && css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
-  return props.$alignItems && css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+  return props.$alignItems && css(templateObject_4$j || (templateObject_4$j = __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);
 }, function (props) {
@@ -1191,9 +1290,9 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$mt && css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
 }, function (props) {
-  return props.$mr && css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
+  return props.$mr && css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
 }, function (props) {
-  return props.$mb && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
+  return props.$mb && css(templateObject_10$2 || (templateObject_10$2 = __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]);
 }, function (props) {
@@ -1237,7 +1336,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$left && css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
 }, function (props) {
-  return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.base.border.radius[props.$borderRadius]);
+  return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.semantic.border.radius[props.$borderRadius]);
 }, function (props) {
   return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensData.semantic.color.border[props.$border]);
 }, function (props) {
@@ -1253,13 +1352,13 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensData.semantic.color.text[props.$color]);
 }, function (props) {
-  return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.base.shadow[props.$shadow]);
+  return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$shadow]);
 }, function (props) {
   return props.$cursor && css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["cursor: ", ";"], ["cursor: ", ";"])), props.$cursor);
 }, function (props) {
   return props.$transition && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
 }, function (props) {
-  return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ", ";\n      outline-offset: 2px;\n    }\n  "], ["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ", ";\n      outline-offset: 2px;\n    }\n  "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.base.shadow[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensData.semantic.color.border.interactive);
+  return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ", ";\n      outline-offset: 2px;\n    }\n  "], ["\n    &:hover {\n      ", "\n      ", "\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ", ";\n      outline-offset: 2px;\n    }\n  "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensData.semantic.color.border.interactive);
 }, function (props) {
   return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
 }, function (props) {
@@ -1399,14 +1498,14 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$5, templateObject_9$4, templateObject_10$3, 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$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 add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
 	name: "add"
 };
 var addRing = {
-	path: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M11 8H13V16H11V8Z M8 11V13H16V11H8Z",
+	path: "M13 11H16V13H13V16H11V13H8V11H11V8H13V11Z M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z",
 	name: "addRing"
 };
 var arrowDown = {
@@ -1426,7 +1525,7 @@ var arrowRight = {
 	name: "arrowRight"
 };
 var bell = {
-	path: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15.707 9.70703L13.4141 12L15.707 14.293L14.293 15.707L12 13.4141L9.70703 15.707L8.29297 14.293L10.5859 12L8.29297 9.70703L9.70703 8.29297L12 10.5859L14.293 8.29297L15.707 9.70703Z",
+	path: "M12.0001 2C15.3561 2 18.1753 4.52384 18.546 7.85938L18.7979 10.125C18.8012 10.1546 18.8024 10.1676 18.8038 10.1797C18.9166 11.1628 19.2372 12.1106 19.7432 12.9609C19.7494 12.9714 19.7553 12.9824 19.7706 13.0078L20.3487 13.9707C20.5997 14.3891 20.829 14.7681 20.9795 15.0879C21.1276 15.4024 21.2852 15.8285 21.209 16.3115C21.1337 16.789 20.8882 17.2229 20.5176 17.5332C20.1426 17.8471 19.6956 17.931 19.3497 17.9658C18.998 18.0012 18.5554 18 18.0674 18H5.93268C5.44476 18 5.00211 18.0012 4.65045 17.9658C4.30456 17.931 3.85755 17.8471 3.48248 17.5332C3.1119 17.2229 2.86641 16.789 2.79107 16.3115C2.7149 15.8285 2.87247 15.4024 3.02057 15.0879C3.17116 14.7681 3.40038 14.3891 3.65143 13.9707L4.22955 13.0078C4.24481 12.9824 4.25068 12.9714 4.25689 12.9609C4.76296 12.1106 5.08348 11.1628 5.19635 10.1797C5.19773 10.1676 5.19892 10.1546 5.20221 10.125L5.45416 7.85938C5.82477 4.52384 8.644 2 12.0001 2ZM12.0001 4C9.6631 4 7.69954 5.75741 7.44146 8.08008L7.18951 10.3457C7.18638 10.3739 7.18457 10.3907 7.18268 10.4072C7.03761 11.6714 6.62638 12.8909 5.97564 13.9844C5.96724 13.9985 5.95885 14.013 5.94439 14.0371L5.36627 15C5.09277 15.4558 4.92766 15.7334 4.83014 15.9404C4.82533 15.9506 4.82155 15.9606 4.81744 15.9697C4.82787 15.971 4.83877 15.9744 4.85064 15.9756C5.07838 15.9985 5.40111 16 5.93268 16H18.0674C18.599 16 18.9217 15.9985 19.1495 15.9756C19.161 15.9744 19.1716 15.9709 19.1817 15.9697C19.1776 15.9607 19.1747 15.9505 19.17 15.9404C19.0725 15.7334 18.9074 15.4558 18.6338 15L18.0557 14.0371C18.0413 14.013 18.0329 13.9985 18.0245 13.9844C17.3737 12.8909 16.9625 11.6714 16.8174 10.4072C16.8155 10.3907 16.8137 10.3739 16.8106 10.3457L16.5587 8.08008C16.3006 5.75741 14.337 4 12.0001 4Z M12.0001 22C10.9897 22 10.0894 21.4972 9.419 20.7256C8.75348 19.9595 8.31404 18.9367 8.11822 17.8408C8.0211 17.2971 8.38314 16.7778 8.92682 16.6807C9.47038 16.5837 9.98987 16.9457 10.087 17.4893C10.233 18.3066 10.5467 18.9742 10.9288 19.4141C11.3063 19.8486 11.6896 20 12.0001 20C12.3106 20 12.6938 19.8486 13.0713 19.4141C13.4535 18.9742 13.7671 18.3066 13.9131 17.4893C14.0102 16.9457 14.5297 16.5837 15.0733 16.6807C15.617 16.7778 15.979 17.2971 15.8819 17.8408C15.6861 18.9367 15.2466 19.9595 14.5811 20.7256C13.9108 21.4972 13.0104 22 12.0001 22Z",
 	name: "bell"
 };
 var back = {
@@ -1462,7 +1561,7 @@ var close = {
 	name: "close"
 };
 var crossCircle = {
-	path: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M14.293 8.2925L15.7073 9.70672L9.7072 15.7068L8.29299 14.2926L14.293 8.2925Z M9.70706 8.29284L8.29284 9.70706L14.2929 15.7071L15.7071 14.2929L9.70706 8.29284Z",
+	path: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15.707 9.70703L13.4141 12L15.707 14.293L14.293 15.707L12 13.4141L9.70703 15.707L8.29297 14.293L10.5859 12L8.29297 9.70703L9.70703 8.29297L12 10.5859L14.293 8.29297L15.707 9.70703Z",
 	name: "crossCircle"
 };
 var directionRight = {
@@ -1697,12 +1796,55 @@ var button = tokensData.component.button,
 // 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");
 // Dynamic variant styles using component tokens
-var getVariantStyles = function getVariantStyles(_a) {
+var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
-  return "\n  background-color: ".concat($variant === 'primary' ? button.primary.backgroundColor : $variant === 'secondary' ? button.variants.secondary.backgroundColor : button.variants.naked.backgroundColor, ";\n  color: ").concat($variant === 'primary' ? button.primary.textColor : $variant === 'secondary' ? button.variants.secondary.textColor : button.variants.naked.textColor, ";\n  \n  &:hover:not(:disabled) {\n    background-color: ").concat($variant === 'primary' ? button.hover.backgroundColor : $variant === 'secondary' ? button.variants.secondary.hover.backgroundColor : button.variants.naked.hover.backgroundColor, ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ").concat($variant === 'primary' ? button.active.backgroundColor : $variant === 'secondary' ? button.variants.secondary.active.backgroundColor : button.variants.naked.active.backgroundColor, ";\n  }\n\n  &:disabled {\n    background-color: ").concat($variant === 'primary' ? button.disabled.backgroundColor : $variant === 'secondary' ? button.variants.secondary.disabled.backgroundColor : button.variants.naked.disabled.backgroundColor, ";\n    color: ").concat($variant === 'primary' ? button.disabled.textColor : $variant === 'secondary' ? button.variants.secondary.disabled.textColor : button.variants.naked.disabled.textColor, ";\n  }\n");
+  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
+    },
+    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
+    },
+    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
+    },
+    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
+    },
+    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
+    }
+  };
+  var config = variantConfig[$variant];
+  return "\n    background-color: ".concat(config.bg, ";\n    color: ").concat(config.text, ";\n    \n    &:hover:not(:disabled) {\n      background-color: ").concat(config.hoverBg, ";\n    }\n\n    &:active:not(:disabled) {\n      background-color: ").concat(config.activeBg, ";\n    }\n\n    &:disabled {\n      background-color: ").concat(config.disabledBg, ";\n      color: ").concat(config.disabledText, ";\n    }\n  ");
 };
 // Dynamic size styles using component tokens
-var getSizeStyles$2 = function getSizeStyles(_a) {
+var getSizeStyles$1 = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
@@ -1721,7 +1863,7 @@ 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, getSizeStyles$2);
+})(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);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1730,7 +1872,7 @@ var StyledLink = styled.a.withConfig({
   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"
 // Helper function to get icon size based on button size
-])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
+])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
 // Helper function to get icon size based on button size
 var getIconSize = function getIconSize(buttonSize) {
   switch (buttonSize) {
@@ -1832,61 +1974,27 @@ var Button = function Button(_a) {
 var templateObject_1$D, templateObject_2$q;
 
 var semantic$e = tokensData.semantic,
-  base$c = tokensData.base;
-var getColorStyles = function getColorStyles(color, variant) {
-  var colorKey = color;
-  if (variant === 'filled') {
-    return {
-      backgroundColor: semantic$e.color.category["".concat(colorKey, "-emphasis")],
-      color: semantic$e.color.text.inverse,
-      borderColor: 'transparent'
-    };
-  }
-  if (variant === 'outlined') {
-    return {
-      backgroundColor: 'transparent',
-      color: semantic$e.color.category[colorKey],
-      borderColor: semantic$e.color.category[colorKey]
-    };
-  }
-  // minimal
-  return {
-    backgroundColor: semantic$e.color.category["".concat(colorKey, "-subtle")],
-    color: semantic$e.color.category[colorKey],
-    borderColor: 'transparent'
-  };
-};
-var getSizeStyles$1 = function getSizeStyles(size) {
-  if (size === 'small') {
-    return {
-      height: '24px',
-      padding: "".concat(base$c.spacing[1], " ").concat(base$c.spacing[2]),
-      font: semantic$e.typography.caption,
-      gap: base$c.spacing[1],
-      iconSize: 'xs'
-    };
-  }
-  // medium
-  return {
-    height: '32px',
-    padding: "".concat(base$c.spacing[2], " ").concat(base$c.spacing[3]),
-    font: semantic$e.typography.small,
-    gap: base$c.spacing[1],
-    iconSize: 'sm'
-  };
-};
+  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 category = color$7.category;
+var radius$4 = border$8.radius;
+var layout$3 = spacing$7.layout;
 var StyledCategoryBadge = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   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  transition: ", ";\n  border-width: ", ";\n  border-style: solid;\n  \n  /* Apply CSS custom properties */\n  background-color: var(--category-badge-bg);\n  color: var(--category-badge-color);\n  border-color: var(--category-badge-border);\n  height: var(--category-badge-height);\n  padding: var(--category-badge-padding);\n  font: var(--category-badge-font);\n  gap: var(--category-badge-gap);\n  opacity: var(--category-badge-opacity);\n  cursor: var(--category-badge-cursor);\n  \n  /* Hover state for clickable badges */\n  ", "\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\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  transition: ", ";\n  border-width: ", ";\n  border-style: solid;\n  \n  /* Apply CSS custom properties */\n  background-color: var(--category-badge-bg);\n  color: var(--category-badge-color);\n  border-color: var(--category-badge-border);\n  height: var(--category-badge-height);\n  padding: var(--category-badge-padding);\n  font: var(--category-badge-font);\n  gap: var(--category-badge-gap);\n  opacity: var(--category-badge-opacity);\n  cursor: var(--category-badge-cursor);\n  \n  /* Hover state for clickable badges */\n  ", "\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\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  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
  *
- * Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
- * Perfect for categorizing financial transactions or content.
+ * A static label for categorizing content with support for 8 color options,
+ * 3 visual variants, and optional icons. Perfect for categorizing
+ * financial transactions or content types.
  *
  * @example
  * ```tsx
@@ -1894,23 +2002,51 @@ var StyledCategoryBadge = styled.span.withConfig({
  *   Food & Dining
  * </CategoryBadge>
  *
- * <CategoryBadge
- *   color="blue"
- *   variant="outlined"
- *   size="small"
- *   onClick={() => filterByCategory('travel')}
- * >
+ * <CategoryBadge color="blue" variant="outlined" size="small">
  *   Travel
  * </CategoryBadge>
  * ```
- */])), base$c.border.radius.circle, base$c.fontWeight[3], semantic$e.motion.hover, base$c.border.width[1], function (props) {
-  return props.$clickable && !props.$disabled && "\n    &:hover {\n      opacity: 0.85;\n      transform: translateY(-1px);\n    }\n    \n    &:active {\n      transform: translateY(0);\n      opacity: 0.95;\n    }\n  ";
-}, base$c.border.width[2], semantic$e.color.border.strong, base$c.spacing[1]);
+ */])), radius$4.circle, base$a.fontWeight[3], base$a.border.width[1], function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? '24px' : '32px';
+}, function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? "".concat(layout$3.xs, " ").concat(layout$3.sm) : "".concat(layout$3.sm, " ").concat(layout$3.md);
+}, function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? typography$4.caption : typography$4.small;
+}, layout$3.xs, function (_a) {
+  var $color = _a.$color,
+    $variant = _a.$variant;
+  if ($variant === 'filled') {
+    return category["".concat($color, "-emphasis")];
+  }
+  if ($variant === 'outlined') {
+    return 'transparent';
+  }
+  // minimal
+  return category["".concat($color, "-subtle")];
+}, function (_a) {
+  var $color = _a.$color,
+    $variant = _a.$variant;
+  if ($variant === 'filled') {
+    return color$7.text.inverse;
+  }
+  return category[$color];
+}, function (_a) {
+  var $color = _a.$color,
+    $variant = _a.$variant;
+  if ($variant === 'outlined') {
+    return category[$color];
+  }
+  return 'transparent';
+});
 /**
  * CategoryBadge component for displaying transaction categories
  *
- * Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
- * Perfect for categorizing financial transactions or content.
+ * A static label for categorizing content with support for 8 color options,
+ * 3 visual variants, and optional icons. Perfect for categorizing
+ * financial transactions or content types.
  *
  * @example
  * ```tsx
@@ -1918,12 +2054,7 @@ var StyledCategoryBadge = styled.span.withConfig({
  *   Food & Dining
  * </CategoryBadge>
  *
- * <CategoryBadge
- *   color="blue"
- *   variant="outlined"
- *   size="small"
- *   onClick={() => filterByCategory('travel')}
- * >
+ * <CategoryBadge color="blue" variant="outlined" size="small">
  *   Travel
  * </CategoryBadge>
  * ```
@@ -1937,54 +2068,18 @@ var CategoryBadge = function CategoryBadge(_a) {
     _d = _a.size,
     size = _d === void 0 ? 'medium' : _d,
     icon = _a.icon,
-    onClick = _a.onClick,
-    _e = _a.disabled,
-    disabled = _e === void 0 ? false : _e,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"];
-  var hasClickHandler = Boolean(onClick);
-  var isClickable = hasClickHandler && !disabled;
-  var colorStyles = getColorStyles(color, variant);
-  var sizeStyles = getSizeStyles$1(size);
-  var cssProps = {
-    '--category-badge-bg': colorStyles.backgroundColor,
-    '--category-badge-color': colorStyles.color,
-    '--category-badge-border': colorStyles.borderColor,
-    '--category-badge-height': sizeStyles.height,
-    '--category-badge-padding': sizeStyles.padding,
-    '--category-badge-font': sizeStyles.font,
-    '--category-badge-gap': sizeStyles.gap,
-    '--category-badge-opacity': disabled ? '0.6' : '1',
-    '--category-badge-cursor': disabled ? 'not-allowed' : isClickable ? 'pointer' : 'default'
-  };
-  var handleClick = function handleClick() {
-    if (isClickable) {
-      onClick === null || onClick === void 0 ? void 0 : onClick();
-    }
-  };
-  var handleKeyDown = function handleKeyDown(event) {
-    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
-      event.preventDefault();
-      onClick === null || onClick === void 0 ? void 0 : onClick();
-    }
-  };
+  var iconSize = size === 'small' ? 'xs' : 'sm';
   return jsxs(StyledCategoryBadge, {
     "$color": color,
     "$variant": variant,
     "$size": size,
-    "$clickable": isClickable,
-    "$disabled": disabled,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    tabIndex: hasClickHandler ? 0 : undefined,
-    role: hasClickHandler ? 'button' : undefined,
     "aria-label": ariaLabel,
-    "aria-disabled": disabled,
     "data-testid": dataTestId,
-    style: cssProps,
     children: [icon && jsx(Icon, {
       name: icon,
-      size: sizeStyles.iconSize,
+      size: iconSize,
       iconColor: variant === 'filled' ? 'inverse' : 'inherit',
       "aria-hidden": "true"
     }), children]
@@ -1994,73 +2089,59 @@ CategoryBadge.displayName = 'CategoryBadge';
 var templateObject_1$C;
 
 var chip = tokensData.component.chip;
-// Helper function to get variant styles as objects for CSS custom properties
-var getVariantStylesAsObject = function getVariantStylesAsObject(variant, selected) {
+// Helper function to get variant styles matching Button's approach
+var getVariantStyles = function getVariantStyles(_a) {
+  var $variant = _a.$variant,
+    $selected = _a.$selected,
+    $clickable = _a.$clickable,
+    $disabled = _a.$disabled;
   // Boolean chips with selected state get special background
-  if (selected) {
-    return {
-      backgroundColor: tokensData.semantic.color.background['interactive-subtle'],
-      color: chip["default"].textColor
-    };
+  if ($selected) {
+    return "\n      background-color: ".concat(tokensData.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? tokensData.semantic.color.background['interactive-subtle'] : $clickable ? '#CAE8FF' : tokensData.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? tokensData.semantic.color.background['interactive-subtle'] : $clickable ? '#B5DEFF' : tokensData.semantic.color.background['interactive-subtle'], ";\n      }\n    ");
   }
-  switch (variant) {
+  switch ($variant) {
     case 'emphasis':
-      return {
-        backgroundColor: chip.variants.emphasis.backgroundColor,
-        color: chip.variants.emphasis.textColor
-      };
+      return "\n        background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip.variants.emphasis.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.emphasis.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.emphasis.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'subtle':
-      return {
-        backgroundColor: chip.variants.subtle.backgroundColor,
-        color: chip.variants.subtle.textColor
-      };
+      return "\n        background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n        color: ").concat(chip.variants.subtle.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.subtle.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.subtle.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'interactive':
-      return {
-        backgroundColor: chip.variants.interactive.backgroundColor,
-        color: chip.variants.interactive.textColor
-      };
+      return "\n        background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n        color: ").concat(chip.variants.interactive.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.interactive.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.interactive.disabled.textColor, ";\n        ") : '', "\n      ");
     case 'default':
     default:
-      return {
-        backgroundColor: chip["default"].backgroundColor,
-        color: chip["default"].textColor
-      };
+      return "\n        background-color: ".concat(chip["default"].backgroundColor, ";\n        color: ").concat(chip["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.hover.backgroundColor : chip["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.active.backgroundColor : chip["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.disabled.backgroundColor, ";\n          color: ").concat(chip.disabled.textColor, ";\n        ") : '', "\n      ");
   }
 };
-// Helper function to get size styles as objects for CSS custom properties
-var getSizeStylesAsObject = function getSizeStylesAsObject(size) {
-  switch (size) {
+// Helper function to get size styles matching Button's approach
+var getSizeStyles = function getSizeStyles(_a) {
+  var $size = _a.$size;
+  switch ($size) {
     case 'small':
-      return {
-        font: chip.sizes.small.font,
-        padding: chip.sizes.small.padding
-      };
+      return "\n        font: ".concat(chip.sizes.small.font, ";\n        padding: ").concat(chip.sizes.small.padding, ";\n      ");
     case 'medium':
     default:
-      return {
-        font: chip.sizes.medium.font,
-        padding: chip.sizes.medium.padding
-      };
+      return "\n        font: ".concat(chip.sizes.medium.font, ";\n        padding: ").concat(chip.sizes.medium.padding, ";\n      ");
   }
 };
 
-// Base styled component using CSS variables to avoid prop leaking
-var BaseChipStyled = styled.span.withConfig({
+// Base styled component using direct prop interpolation like Button
+var StyledChip = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
-  displayName: "ChipBase__BaseChipStyled",
+  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: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\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: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
+})(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"
 // Icon container for selected indicator or leading icons
-])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
+])), chip["default"].borderRadius, tokensData.semantic.motion.hover, function (props) {
+  return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
+}, getVariantStyles, getSizeStyles, chip.focus.outline, chip.focus.outlineOffset);
 // Icon container for selected indicator or leading icons
 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"
 // Close button for dismissible chips
-])), tokensData.semantic.spacing.layout.sm);
+])), tokensData.semantic.spacing.layout.xs);
 // Close button for dismissible chips
 var CloseButton = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2068,44 +2149,10 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 0;\n  cursor: ", ";\n  opacity: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    opacity: 0.7;\n  }\n  \n  &:active:not(:disabled) {\n    opacity: 0.9;\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n    border-radius: 2px;\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: 0;\n  cursor: ", ";\n  opacity: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    opacity: 0.7;\n  }\n  \n  &:active:not(:disabled) {\n    opacity: 0.9;\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n"
-// Wrapper component that applies styles via CSS custom properties
-])), tokensData.semantic.spacing.layout.sm, function (props) {
+})(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) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, function (props) {
-  return props.$disabled ? '0.6' : '1';
-}, tokensData.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
-// Wrapper component that applies styles via CSS custom properties
-var StyledChipWrapper = function StyledChipWrapper(_a) {
-  var $variant = _a.$variant,
-    $size = _a.$size,
-    $disabled = _a.$disabled,
-    $clickable = _a.$clickable,
-    $selected = _a.$selected,
-    children = _a.children,
-    style = _a.style,
-    htmlProps = __rest(_a, ["$variant", "$size", "$disabled", "$clickable", "$selected", "children", "style"]);
-  // Get styles for variant and size
-  var variantStyles = getVariantStylesAsObject($variant, $selected);
-  var sizeStyles = getSizeStylesAsObject($size);
-  // Create CSS custom properties object
-  var cssProps = {
-    '--chip-bg-color': variantStyles.backgroundColor,
-    '--chip-text-color': variantStyles.color,
-    '--chip-font': sizeStyles.font,
-    '--chip-padding': sizeStyles.padding,
-    '--chip-opacity': $disabled ? '0.6' : '1',
-    '--chip-cursor': $disabled ? 'not-allowed' : $clickable ? 'pointer' : 'default',
-    '--chip-hover-opacity': $disabled ? '0.6' : $clickable ? '0.8' : '1',
-    '--chip-active-opacity': $disabled ? '0.6' : $clickable ? '0.9' : '1'
-  };
-  return jsx(BaseChipStyled, __assign({
-    style: __assign(__assign({}, cssProps), style)
-  }, htmlProps, {
-    children: children
-  }));
-};
-var templateObject_1$B, templateObject_2$p, templateObject_3$m;
+}, 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;
 
 /**
  * Chip - Compact element for displaying tags, categories, and labels
@@ -2152,7 +2199,7 @@ var Chip = function Chip(_a) {
       handleClick();
     }
   };
-  return jsx(StyledChipWrapper, __assign({
+  return jsx(StyledChip, __assign({
     "$variant": normalizedVariant,
     "$size": size,
     "$disabled": disabled || undefined,
@@ -2232,7 +2279,7 @@ var FilterChip = function FilterChip(_a) {
   };
   // Generate accessible label for close button
   var closeButtonLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove filter';
-  return jsxs(StyledChipWrapper, __assign({
+  return jsxs(StyledChip, __assign({
     "$variant": "subtle",
     "$size": size,
     "$disabled": disabled || undefined,
@@ -2306,7 +2353,7 @@ var BooleanChip = function BooleanChip(_a) {
       handleClick();
     }
   };
-  return jsxs(StyledChipWrapper, __assign({
+  return jsxs(StyledChip, __assign({
     "$variant": "subtle",
     "$size": size,
     "$disabled": disabled || undefined,
@@ -2351,11 +2398,11 @@ var media$1 = {
   '2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
 };
 
-var spacing$3 = tokensData.semantic.spacing;
+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$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
+})(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) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
@@ -2365,7 +2412,7 @@ var Container = function Container(_a) {
 };
 var templateObject_1$A;
 
-var base$b = tokensData.base;
+var base$9 = tokensData.base;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
@@ -2373,15 +2420,15 @@ var PictureWrapper = styled.div.withConfig({
 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$b.duration.normal, base$b.easing.easeInOut);
+})(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);
 var ImageButton = styled.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
+})(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);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
-})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), base$b.border.radius[2]);
+})(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]);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -2411,18 +2458,18 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$z, templateObject_2$o, templateObject_3$l, templateObject_4$h;
+var templateObject_1$z, templateObject_2$o, templateObject_3$m, templateObject_4$i;
 
-var _a$4 = tokensData.semantic,
-  typography$1 = _a$4.typography,
-  color$2 = _a$4.color;
+var _a$6 = tokensData.semantic,
+  typography$3 = _a$6.typography,
+  color$6 = _a$6.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"
 /**
  * Formats a date with smart relative/absolute logic
- */])), typography$1.label, color$2.text.subdued);
+ */])), typography$3.label, color$6.text.subdued);
 /**
  * Formats a date with smart relative/absolute logic
  */
@@ -2470,7 +2517,7 @@ var DateFormatter = function DateFormatter(_a) {
 };
 var templateObject_1$y;
 
-var motion = tokensData.semantic.motion,
+var motion$2 = tokensData.semantic.motion,
   iconButton = tokensData.component.iconButton;
 var IconButtonStyled = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2490,7 +2537,7 @@ var IconButtonStyled = styled.button.withConfig({
     default:
       return iconButton.primary.backgroundColor;
   }
-}, iconButton.primary.borderRadius, motion.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
+}, 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;
 }, function (_a) {
@@ -2599,7 +2646,7 @@ var StyledWrapper = styled.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: inline-block;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-block;\n  text-align: ", ";\n  font-weight: ", ";\n"
+})(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"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -2615,14 +2662,12 @@ var sizeToTypographyVariant = {
   large: 'h3',
   xlarge: 'h2'
 };
-// Map MoneyDisplay variant to Typography color
-var variantToTypographyColor = {
-  "default": 'default',
-  positive: 'success',
-  // Green color for credits/income
-  negative: 'error',
-  // Red color for debits/expenses
-  neutral: 'subdued' // Gray color for informational
+// Map size to Icon size for consistent visual alignment
+var sizeToIconSize = {
+  small: 'xs',
+  medium: 'sm',
+  large: 'md',
+  xlarge: 'lg'
 };
 /**
  * Generates aria-label with spelled out amount
@@ -2671,45 +2716,61 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     maximumFractionDigits: 2
   });
   var formattedAmount = formatter.format(Math.abs(amount));
-  // Add sign if needed
-  var displayText = formattedAmount;
-  if (showSign && amount !== 0) {
-    var signSymbol = amount > 0 ? '+' : '−'; // Using minus sign character, not hyphen
-    displayText = signSymbol + formattedAmount;
-  } else if (amount < 0 && !showSign) {
-    // Still show negative sign even without showSign
-    displayText = '−' + formattedAmount;
-  }
+  // Determine if we need to show a sign icon
+  var showPositiveIcon = showSign && amount > 0 || variant === 'positive';
+  var showNegativeIcon = amount < 0 || variant === 'negative';
   // Generate accessibility label
   var ariaLabel = generateAriaLabel(amount, currency, locale);
-  // Get typography variant and color
+  // Get typography variant and icon size
   var typographyVariant = sizeToTypographyVariant[size];
-  var typographyColor = variantToTypographyColor[variant];
-  return jsx(StyledWrapper, {
+  var iconSize = sizeToIconSize[size];
+  // Determine icon color based on variant
+  var iconColor = variant === 'positive' || showPositiveIcon ? 'success' : variant === 'negative' || showNegativeIcon ? 'error' : variant === 'neutral' ? 'subdued' : 'default';
+  // Amount always uses default color (except neutral which stays subdued)
+  var amountColor = variant === 'neutral' ? 'subdued' : 'default';
+  return jsxs(StyledWrapper, {
     "$align": align,
     "$weight": weight,
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    children: jsx(Typography, {
+    children: [showPositiveIcon && !showNegativeIcon && jsx(Icon, {
+      name: "addRing",
+      size: iconSize,
+      iconColor: iconColor
+    }), showNegativeIcon && jsx(Icon, {
+      name: "remove",
+      size: iconSize,
+      iconColor: iconColor
+    }), jsx(Typography, {
       variant: typographyVariant,
-      color: typographyColor,
+      color: amountColor,
       as: "span",
-      children: displayText
-    })
+      children: formattedAmount
+    })]
   });
 };
 var templateObject_1$w;
 
+// Destructure tokens
+var semantic$d = tokensData.semantic;
+var _a$5 = __assign(__assign({}, semantic$d), {
+    component: tokensData.component
+  }),
+  color$5 = _a$5.color,
+  border$7 = _a$5.border,
+  motion$1 = _a$5.motion,
+  component$1 = _a$5.component;
+var radius$3 = border$7.radius;
 var ProgressBarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
-})(templateObject_3$k || (templateObject_3$k = __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"])), tokensData.semantic.color.background.disabled, tokensData.base.border.radius[1], 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 ? tokensData.component.progressBar.sizes[props.$height].height : tokensData.component.progressBar.sizes.md.height);
+})(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);
 }, 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 ? tokensData.component.progressBar.sizes[props.$width].height : tokensData.component.progressBar.sizes.md.height);
+  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);
 });
 var ProgressBarFill = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2717,21 +2778,21 @@ 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"])), tokensData.semantic.motion.transition.normal, function (props) {
+})(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) {
   var backgroundColor;
   switch (props.$color) {
     case 'success':
-      backgroundColor = tokensData.semantic.color.background.success;
+      backgroundColor = color$5.background.success;
       break;
     case 'error':
-      backgroundColor = tokensData.semantic.color.background.error;
+      backgroundColor = color$5.background.error;
       break;
     case 'default':
     default:
-      backgroundColor = tokensData.semantic.color.background.interactive;
+      backgroundColor = color$5.background.interactive;
       break;
   }
-  return css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
+  return css(templateObject_4$h || (templateObject_4$h = __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)));
 }, function (props) {
@@ -2762,9 +2823,12 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$b, templateObject_7$8;
+var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$8;
 
-var StyledDivider$1 = styled.div.withConfig({
+// Destructure tokens for cleaner access
+var separatorTokens = tokensData.component.separator;
+var separatorSpacing = tokensData.semantic.spacing.separator;
+var StyledDivider = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
@@ -2803,12 +2867,12 @@ var StyledDivider$1 = styled.div.withConfig({
   var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
   switch ($variant) {
     case 'strong':
-      return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants.strong.border, ";");
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants.strong.border, ";");
     case 'minimal':
-      return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants.minimal.border, ";");
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants.minimal.border, ";");
     case 'default':
     default:
-      return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants["default"].border, ";");
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants["default"].border, ";");
   }
 }, function (_a) {
   var _b = _a.$size,
@@ -2819,33 +2883,33 @@ var StyledDivider$1 = styled.div.withConfig({
     $orientation = _d === void 0 ? 'horizontal' : _d;
   if ($variant === 'minimal' && $orientation === 'horizontal') {
     // Minimal variant always uses its predefined spacing for horizontal
-    return "margin: ".concat(tokensData.component.separator.variants.minimal.margin, ";");
+    return "margin: ".concat(separatorTokens.variants.minimal.margin, ";");
   }
   if ($orientation === 'vertical') {
     // Vertical orientation uses horizontal margins (left/right)
     switch ($size) {
       case 'small':
-        return "margin: 0 ".concat(tokensData.semantic.spacing.separator.sm, ";");
+        return "margin: 0 ".concat(separatorSpacing.sm, ";");
       case 'medium':
-        return "margin: 0 ".concat(tokensData.semantic.spacing.separator.md, ";");
+        return "margin: 0 ".concat(separatorSpacing.md, ";");
       case 'xlarge':
-        return "margin: 0 ".concat(tokensData.semantic.spacing.separator.xl, ";");
+        return "margin: 0 ".concat(separatorSpacing.xl, ";");
       case 'large':
       default:
-        return "margin: 0 ".concat(tokensData.semantic.spacing.separator.lg, ";");
+        return "margin: 0 ".concat(separatorSpacing.lg, ";");
     }
   }
   // Horizontal orientation uses vertical margins (top/bottom)
   switch ($size) {
     case 'small':
-      return "margin: ".concat(tokensData.component.separator.sizes.small.margin, ";");
+      return "margin: ".concat(separatorTokens.sizes.small.margin, ";");
     case 'medium':
-      return "margin: ".concat(tokensData.component.separator.sizes.medium.margin, ";");
+      return "margin: ".concat(separatorTokens.sizes.medium.margin, ";");
     case 'xlarge':
-      return "margin: ".concat(tokensData.component.separator.sizes.xlarge.margin, ";");
+      return "margin: ".concat(separatorTokens.sizes.xlarge.margin, ";");
     case 'large':
     default:
-      return "margin: ".concat(tokensData.component.separator.sizes.large.margin, ";");
+      return "margin: ".concat(separatorTokens.sizes.large.margin, ";");
   }
 });
 /**
@@ -2874,7 +2938,7 @@ var Divider = function Divider(_a) {
     _d = _a.orientation,
     orientation = _d === void 0 ? 'horizontal' : _d,
     dataTestId = _a["data-testid"];
-  return jsx(StyledDivider$1, {
+  return jsx(StyledDivider, {
     "$variant": variant,
     "$size": size,
     "$orientation": orientation,
@@ -2932,45 +2996,49 @@ var Stack = function Stack(_a) {
 };
 var templateObject_1$t;
 
-var semantic$d = tokensData.semantic,
-  base$a = tokensData.base;
+// Destructure tokens for cleaner access
+var statusColors = tokensData.semantic.color.status;
+var spacing$5 = tokensData.semantic.spacing.layout;
+var radius$2 = tokensData.semantic.border.radius;
+var 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 getStatusConfig = function getStatusConfig(status) {
   var configs = {
     pending: {
-      color: semantic$d.color.status.pending,
-      bgColor: semantic$d.color.status['pending-bg'],
+      color: statusColors.pending,
+      bgColor: statusColors['pending-bg'],
       icon: 'refresh',
       // Fallback until 'clock' icon is added
       label: 'Pending'
     },
     completed: {
-      color: semantic$d.color.status.completed,
-      bgColor: semantic$d.color.status['completed-bg'],
+      color: statusColors.completed,
+      bgColor: statusColors['completed-bg'],
       icon: 'check',
       label: 'Completed'
     },
     failed: {
-      color: semantic$d.color.status.failed,
-      bgColor: semantic$d.color.status['failed-bg'],
+      color: statusColors.failed,
+      bgColor: statusColors['failed-bg'],
       icon: 'close',
       label: 'Failed'
     },
     cancelled: {
-      color: semantic$d.color.status.cancelled,
-      bgColor: semantic$d.color.status['cancelled-bg'],
+      color: statusColors.cancelled,
+      bgColor: statusColors['cancelled-bg'],
       icon: 'cancel',
       label: 'Cancelled'
     },
     processing: {
-      color: semantic$d.color.status.processing,
-      bgColor: semantic$d.color.status['processing-bg'],
+      color: statusColors.processing,
+      bgColor: statusColors['processing-bg'],
       icon: 'refresh',
       label: 'Processing'
     },
     scheduled: {
-      color: semantic$d.color.status.scheduled,
-      bgColor: semantic$d.color.status['scheduled-bg'],
+      color: statusColors.scheduled,
+      bgColor: statusColors['scheduled-bg'],
       icon: 'bell',
       // Fallback until 'calendar' icon is added
       label: 'Scheduled'
@@ -2978,24 +3046,22 @@ var getStatusConfig = function getStatusConfig(status) {
   };
   return configs[status];
 };
-var getSizeStyles = function getSizeStyles(size) {
-  if (size === 'small') {
-    return {
-      height: '20px',
-      padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[2]),
-      font: semantic$d.typography.caption,
-      gap: base$a.spacing[1],
-      iconSize: 'xs'
-    };
-  }
-  // medium
-  return {
+// Size configuration
+var sizeConfig = {
+  small: {
+    height: '20px',
+    padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
+    font: typography$2.caption,
+    gap: spacing$5.xs,
+    iconSize: 'xs'
+  },
+  medium: {
     height: '24px',
-    padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[2]),
-    font: semantic$d.typography.small,
-    gap: base$a.spacing[1],
+    padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
+    font: typography$2.small,
+    gap: spacing$5.xs,
     iconSize: 'sm'
-  };
+  }
 };
 var StyledStatusBadge = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3003,11 +3069,19 @@ 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: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " 0.2s ease-out;\n  \n  /* Apply CSS custom properties */\n  background-color: var(--status-badge-bg);\n  color: var(--status-badge-color);\n  height: var(--status-badge-height);\n  padding: var(--status-badge-padding);\n  font: var(--status-badge-font);\n  gap: var(--status-badge-gap);\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  animation: ", " 0.2s ease-out;\n  \n  /* Apply CSS custom properties */\n  background-color: var(--status-badge-bg);\n  color: var(--status-badge-color);\n  height: var(--status-badge-height);\n  padding: var(--status-badge-padding);\n  font: var(--status-badge-font);\n  gap: var(--status-badge-gap);\n"])), base$a.border.radius.circle, base$a.fontWeight[3], scaleIn);
+})(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) {
+  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    ");
+}, function (_a) {
+  var $status = _a.$status;
+  var config = getStatusConfig($status);
+  return "\n      background-color: ".concat(config.bgColor, ";\n      color: ").concat(config.color, ";\n    ");
+});
 var ScreenReaderOnly = styled.span.withConfig({
   displayName: "StatusBadge__ScreenReaderOnly",
   componentId: "sc-1paksgb-1"
-})(templateObject_3$j || (templateObject_3$j = __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$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"
 /**
  * StatusBadge component for displaying transaction or task status
  *
@@ -3066,16 +3140,8 @@ var StatusBadge = function StatusBadge(_a) {
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"];
   var statusConfig = getStatusConfig(status);
-  var sizeStyles = getSizeStyles(size);
+  var sizeStyles = sizeConfig[size];
   var displayLabel = label || statusConfig.label;
-  var cssProps = {
-    '--status-badge-bg': statusConfig.bgColor,
-    '--status-badge-color': statusConfig.color,
-    '--status-badge-height': sizeStyles.height,
-    '--status-badge-padding': sizeStyles.padding,
-    '--status-badge-font': sizeStyles.font,
-    '--status-badge-gap': sizeStyles.gap
-  };
   return jsxs(StyledStatusBadge, {
     "$status": status,
     "$size": size,
@@ -3084,7 +3150,6 @@ var StatusBadge = function StatusBadge(_a) {
     "aria-live": liveRegion ? 'polite' : undefined,
     "aria-atomic": liveRegion ? 'true' : undefined,
     "data-testid": dataTestId,
-    style: cssProps,
     children: [showIcon && jsx(Icon, {
       name: statusConfig.icon,
       size: sizeStyles.iconSize,
@@ -3096,9 +3161,16 @@ var StatusBadge = function StatusBadge(_a) {
   });
 };
 StatusBadge.displayName = 'StatusBadge';
-var templateObject_1$s, templateObject_2$m, templateObject_3$j;
+var templateObject_1$s, templateObject_2$m, templateObject_3$k;
 
 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 layout$2 = spacing$4.layout;
+var radius$1 = border$6.radius;
 var StyledTag = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -3111,37 +3183,37 @@ var StyledTag = styled.span.withConfig({
  *
  * A static, non-interactive label used to categorize elements or objects in the UI.
  * Tags help users quickly identify and understand content classification.
- */])), tokensData.base.border.radius[2], tokensData.semantic.size.icon.lg || '2rem', tokensData.base.spacing[1], tokensData.base.spacing[2], tokensData.semantic.typography.button3, function (_a) {
+ */])), radius$1.sm, size.icon.lg || '2rem', layout$2.xs, layout$2.sm, typography$1.button3, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return semantic$c.color.background['interactive-subtle'];
+      return color$4.background['interactive-subtle'];
     case 'success':
-      return semantic$c.color.background['success-subtle'];
+      return color$4.background['success-subtle'];
     case 'warning':
-      return semantic$c.color.background['warning-subtle'];
+      return color$4.background['warning-subtle'];
     case 'error':
-      return semantic$c.color.background['error-subtle'];
+      return color$4.background['error-subtle'];
     case 'emphasis':
-      return semantic$c.color.background.emphasis;
+      return color$4.background.emphasis;
     default:
-      return semantic$c.color.background.surface;
+      return color$4.background.surface;
   }
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return semantic$c.color.text.interactive;
+      return color$4.text.interactive;
     case 'success':
-      return semantic$c.color.text.success;
+      return color$4.text.success;
     case 'warning':
-      return semantic$c.color.text.warning;
+      return color$4.text.warning;
     case 'error':
-      return semantic$c.color.text.error;
+      return color$4.text.error;
     case 'emphasis':
-      return semantic$c.color.text.inverse;
+      return color$4.text.inverse;
     default:
-      return semantic$c.color.text["default"];
+      return color$4.text["default"];
   }
 }, function (_a) {
   var $variant = _a.$variant,
@@ -3149,17 +3221,17 @@ var StyledTag = styled.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'interactive':
-      return "1px solid ".concat(semantic$c.color.border.interactive);
+      return "1px solid ".concat(color$4.border.interactive);
     case 'success':
-      return "1px solid ".concat(semantic$c.color.border.success);
+      return "1px solid ".concat(color$4.border.success);
     case 'warning':
-      return "1px solid ".concat(semantic$c.color.border.warning);
+      return "1px solid ".concat(color$4.border.warning);
     case 'error':
-      return "1px solid ".concat(semantic$c.color.border.error);
+      return "1px solid ".concat(color$4.border.error);
     case 'emphasis':
-      return "1px solid ".concat(semantic$c.color.background.emphasis);
+      return "1px solid ".concat(color$4.background.emphasis);
     default:
-      return "1px solid ".concat(semantic$c.color.border["default"]);
+      return "1px solid ".concat(color$4.border["default"]);
   }
 });
 /**
@@ -3190,26 +3262,35 @@ var Tag = function Tag(_a) {
 };
 var templateObject_1$r;
 
+// 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 layout$1 = spacing$3.layout;
+var background = color$3.background,
+  icon = color$3.icon;
+var radius = border$5.radius;
 var StyledHeader$2 = styled.div.withConfig({
   displayName: "AccountCard__StyledHeader",
   componentId: "sc-1erp7zn-0"
-})(templateObject_1$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"])), tokensData.semantic.spacing.layout.md);
+})(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);
 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"])), tokensData.semantic.color.background.inverse, tokensData.base.border.radius[3], tokensData.semantic.color.icon.interactive);
+})(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);
 var StyledBalanceSection = styled.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
   componentId: "sc-1erp7zn-2"
-})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
+})(templateObject_3$j || (templateObject_3$j = __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$f || (templateObject_4$f = __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"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.spacing.layout.sm);
+})(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);
 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"])), tokensData.semantic.spacing.layout.sm);
+})(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);
 var StyledStackWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
   componentId: "sc-1erp7zn-5"
@@ -3279,11 +3360,10 @@ var AccountCard = function AccountCard(_a) {
     p: "lg",
     bg: "surface",
     border: "default",
-    borderRadius: "5",
-    shadow: "3",
+    borderRadius: "xl",
     transition: "all 0.2s ease",
     cursor: isClickable ? 'pointer' : 'default',
-    hoverShadow: isClickable ? '4' : undefined,
+    hoverShadow: isClickable ? 'floating' : undefined,
     hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -3310,7 +3390,7 @@ var AccountCard = function AccountCard(_a) {
               })
             }), jsxs(Stack, {
               direction: "column",
-              gap: "xs",
+              gap: "none",
               children: [jsx(Typography, {
                 variant: "h4",
                 children: accountName
@@ -3374,109 +3454,296 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$a;
+var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a;
 
-var semantic$b = tokensData.semantic,
-  base$9 = tokensData.base;
-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);
-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"])), semantic$b.color.background.subtle, base$9.border.radius[4], base$9.border.radius[4], base$9.shadow[4], slideUp);
-var StyledHeader$1 = styled.div.withConfig({
-  displayName: "ActionSheet__StyledHeader",
-  componentId: "sc-regbol-2"
-})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", " solid ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", " solid ", ";\n"])), base$9.spacing[4], base$9.spacing[4], base$9.spacing[3], base$9.border.width[1], semantic$b.color.border["default"]);
-var StyledHeaderContent = styled.div.withConfig({
-  displayName: "ActionSheet__StyledHeaderContent",
-  componentId: "sc-regbol-3"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var StyledCloseButton = styled.button.withConfig({
-  displayName: "ActionSheet__StyledCloseButton",
-  componentId: "sc-regbol-4"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\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: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"])), base$9.spacing[2], semantic$b.color.icon.subdued, base$9.border.radius[2], semantic$b.motion.hover, base$9.spacing[2], semantic$b.color.icon["default"], semantic$b.color.background.surface, base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1]);
-var StyledActionsList = styled.div.withConfig({
-  displayName: "ActionSheet__StyledActionsList",
-  componentId: "sc-regbol-5"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  padding: ", " 0;\n"], ["\n  padding: ", " 0;\n"])), base$9.spacing[2]);
-var StyledActionButton = styled.button.withConfig({
-  displayName: "ActionSheet__StyledActionButton",
-  componentId: "sc-regbol-6"
-})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: -", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: -", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n"])), base$9.spacing[3], base$9.spacing[3], base$9.spacing[4], semantic$b.typography.body, semantic$b.motion.hover, function (props) {
-  return props.$destructive && "\n    color: ".concat(semantic$b.color.text.error, ";\n  ");
-}, function (props) {
-  return props.$disabled && "\n    color: ".concat(semantic$b.color.text.disabled, ";\n    cursor: not-allowed;\n  ");
-}, semantic$b.color.background['interactive-subtle'], base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1], semantic$b.color.background.surface);
-var StyledDivider = styled.div.withConfig({
-  displayName: "ActionSheet__StyledDivider",
-  componentId: "sc-regbol-7"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  height: ", ";\n  background-color: ", ";\n  margin: ", " ", ";\n"], ["\n  height: ", ";\n  background-color: ", ";\n  margin: ", " ", ";\n"
-/**
- * ActionSheet component for bottom sheet modals
- *
- * Displays a modal action sheet that slides up from the bottom,
- * providing a list of actions for the user to choose from.
- * Includes focus trapping, keyboard navigation, and accessibility features.
- *
- * @example
- * ```tsx
- * const [isOpen, setIsOpen] = useState(false)
- *
- * <ActionSheet
- *   isOpen={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   title="Choose an action"
- *   actions={[
- *     {
- *       id: 'edit',
- *       label: 'Edit',
- *       icon: 'edit',
- *       onSelect: () => console.log('Edit')
- *     },
- *     {
- *       id: 'delete',
- *       label: 'Delete',
- *       icon: 'trash',
- *       destructive: true,
- *       onSelect: () => console.log('Delete')
- *     }
- *   ]}
- * />
- * ```
- */])), base$9.border.width[1], semantic$b.color.border["default"], base$9.spacing[2], base$9.spacing[4]);
-/**
- * ActionSheet component for bottom sheet modals
- *
- * Displays a modal action sheet that slides up from the bottom,
- * providing a list of actions for the user to choose from.
- * Includes focus trapping, keyboard navigation, and accessibility features.
- *
- * @example
- * ```tsx
- * const [isOpen, setIsOpen] = useState(false)
- *
- * <ActionSheet
- *   isOpen={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   title="Choose an action"
- *   actions={[
- *     {
- *       id: 'edit',
- *       label: 'Edit',
- *       icon: 'edit',
- *       onSelect: () => console.log('Edit')
- *     },
- *     {
- *       id: 'delete',
- *       label: 'Delete',
- *       icon: 'trash',
- *       destructive: true,
- *       onSelect: () => console.log('Delete')
+var semantic$a = tokensData.semantic,
+  base$8 = 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) {
+  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  ");
+}, function (_a) {
+  var $destructive = _a.$destructive,
+    $disabled = _a.$disabled;
+  return $destructive && !$disabled && "\n    color: ".concat(semantic$a.color.text.error, ";\n  ");
+});
+var StyledItemContent = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  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) {
+  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) {
+  var $selected = _a.$selected;
+  return $selected ? semantic$a.color.background['interactive-subtle'] : 'transparent';
+}, function (_a) {
+  var $interactive = _a.$interactive,
+    $disabled = _a.$disabled;
+  if ($disabled) return 'not-allowed';
+  if ($interactive) return 'pointer';
+  return 'default';
+}, function (_a) {
+  var $interactive = _a.$interactive,
+    $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);
+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"])));
+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);
+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);
+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) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '180deg' : '0deg';
+});
+var StyledExpandedContent = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  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) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '1000px' : '0';
+}, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '1' : '0';
+}, 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  ");
+});
+var ListItem = function ListItem(_a) {
+  var primary = _a.primary,
+    secondary = _a.secondary,
+    badge = _a.badge,
+    icon = _a.icon,
+    _b = _a.expandable,
+    expandable = _b === void 0 ? false : _b,
+    _c = _a.expanded,
+    expanded = _c === void 0 ? false : _c,
+    onToggle = _a.onToggle,
+    _d = _a.interactive,
+    interactive = _d === void 0 ? false : _d,
+    onClick = _a.onClick,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    _f = _a.selected,
+    selected = _f === void 0 ? false : _f,
+    _g = _a.destructive,
+    destructive = _g === void 0 ? false : _g,
+    _h = _a.spacing,
+    spacing = _h === void 0 ? 'comfortable' : _h,
+    children = _a.children,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    customRole = _a.role,
+    ariaSelected = _a["aria-selected"],
+    id = _a.id,
+    customTabIndex = _a.tabIndex,
+    customOnKeyDown = _a.onKeyDown,
+    props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "destructive", "spacing", "children", "className", 'data-testid', "role", 'aria-selected', "id", "tabIndex", "onKeyDown"]);
+  var isInteractive = interactive || expandable || customRole === 'option';
+  var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
+  var ariaExpanded = expandable ? expanded : undefined;
+  var ariaDisabled = disabled ? true : undefined;
+  var ariaCurrent = selected ? 'true' : undefined;
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    if (expandable && onToggle) {
+      onToggle();
+    } else if (onClick) {
+      onClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (customOnKeyDown) {
+      customOnKeyDown(event);
+      return;
+    }
+    if (disabled) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return jsxs(StyledListItem, __assign({
+    "$interactive": isInteractive,
+    "$disabled": disabled,
+    "$selected": selected,
+    "$destructive": destructive,
+    "$spacing": spacing,
+    className: className,
+    "data-testid": dataTestId,
+    role: customRole || 'listitem',
+    id: id,
+    "aria-selected": ariaSelected
+  }, props, {
+    children: [jsxs(StyledItemContent, {
+      "$interactive": isInteractive,
+      "$disabled": disabled,
+      "$selected": selected,
+      "$destructive": destructive,
+      "$spacing": spacing,
+      role: contentRole,
+      "aria-expanded": ariaExpanded,
+      "aria-disabled": ariaDisabled,
+      "aria-current": ariaCurrent,
+      tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [icon && jsx(StyledIconContainer$1, {
+        "aria-hidden": "true",
+        children: icon
+      }), jsxs(StyledTextContent, {
+        children: [jsx(Typography, {
+          variant: "body",
+          color: destructive ? 'error' : 'default',
+          children: primary
+        }), secondary && jsx(Typography, {
+          variant: "small",
+          color: "subdued",
+          children: secondary
+        })]
+      }), jsxs(StyledRightContent, {
+        children: [badge, expandable && jsx(StyledChevronIcon, {
+          "$expanded": expanded,
+          "aria-hidden": "true",
+          children: jsx(Icon, {
+            name: "caretDown",
+            size: "sm"
+          })
+        })]
+      })]
+    }), expandable && children && jsx(StyledExpandedContent, {
+      "$spacing": spacing,
+      "$expanded": expanded,
+      "aria-hidden": !expanded,
+      children: children
+    })]
+  }));
+};
+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 _a$4 = tokensData.semantic,
+  color$2 = _a$4.color,
+  border$4 = _a$4.border,
+  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 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);
+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);
+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"]);
+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"])));
+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);
+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"
+/**
+ * ActionSheet component for bottom sheet modals
+ *
+ * Displays a modal action sheet that slides up from the bottom,
+ * providing a list of actions for the user to choose from.
+ * Includes focus trapping, keyboard navigation, and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <ActionSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Choose an action"
+ *   actions={[
+ *     {
+ *       id: 'edit',
+ *       label: 'Edit',
+ *       icon: 'edit',
+ *       onSelect: () => console.log('Edit')
+ *     },
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: 'trash',
+ *       destructive: true,
+ *       onSelect: () => console.log('Delete')
+ *     }
+ *   ]}
+ * />
+ * ```
+ */])), layout.sm, layout.md);
+/**
+ * ActionSheet component for bottom sheet modals
+ *
+ * Displays a modal action sheet that slides up from the bottom,
+ * providing a list of actions for the user to choose from.
+ * Includes focus trapping, keyboard navigation, and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <ActionSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Choose an action"
+ *   actions={[
+ *     {
+ *       id: 'edit',
+ *       label: 'Edit',
+ *       icon: 'edit',
+ *       onSelect: () => console.log('Edit')
+ *     },
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: 'trash',
+ *       destructive: true,
+ *       onSelect: () => console.log('Delete')
  *     }
  *   ]}
  * />
@@ -3526,11 +3793,11 @@ var ActionSheet = function ActionSheet(_a) {
       }
     };
     document.addEventListener('keydown', handleKeyDown);
-    // Focus first focusable element
+    // Focus first focusable element (button or element with role="button")
     requestAnimationFrame(function () {
       var _a;
-      var firstButton = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled)');
-      firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
+      var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
     });
     // Prevent body scroll
     var originalOverflow = document.body.style.overflow;
@@ -3603,24 +3870,23 @@ var ActionSheet = function ActionSheet(_a) {
         })]
       }), jsx(StyledActionsList, {
         children: actions.map(function (action, index) {
-          return jsxs("div", {
-            children: [hasDestructive && index === destructiveIndex && index > 0 && jsx(StyledDivider, {}), jsxs(StyledActionButton, {
-              type: "button",
+          return jsxs(React.Fragment, {
+            children: [hasDestructive && index === destructiveIndex && index > 0 && jsx(Divider, {
+              size: "small"
+            }), jsx(ListItem, {
+              primary: action.label,
+              icon: action.icon && jsx(Icon, {
+                name: action.icon,
+                size: "md",
+                iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
+              }),
+              interactive: true,
               onClick: function onClick() {
                 return handleActionClick(action);
               },
               disabled: action.disabled,
-              "$destructive": action.destructive || false,
-              "$disabled": action.disabled || false,
-              "aria-label": action.label,
-              children: [action.icon && jsx(Icon, {
-                name: action.icon,
-                size: "md",
-                iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
-              }), jsx(Typography, {
-                variant: "body",
-                children: action.label
-              })]
+              destructive: action.destructive,
+              spacing: "compact"
             })]
           }, action.id);
         })
@@ -3628,10 +3894,10 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$p, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2;
+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 semantic$a = tokensData.semantic,
-  base$8 = tokensData.base;
+var semantic$9 = tokensData.semantic,
+  base$7 = tokensData.base;
 // Default icons by variant
 var variantIcons = {
   error: 'crossCircle',
@@ -3659,56 +3925,56 @@ var StyledAlert = styled.div.withConfig({
   },
   displayName: "Alert__StyledAlert",
   componentId: "sc-18tq5d-0"
-})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"])), function (_a) {
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: 1px solid;\n  position: relative;\n  width: 100%;\n  \n  /* Variant-specific colors */\n  ", "\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n"])), function (_a) {
   var $inline = _a.$inline;
   return $inline ? 'center' : 'flex-start';
 }, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
+  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
 }, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
-}, base$8.border.radius[2], function (_a) {
+  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
+}, base$7.border.radius[2], function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'error':
-      return "\n          background-color: ".concat(semantic$a.color.background['error-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.error, ";\n          color: ").concat(semantic$a.color.text.error, ";\n        ");
+      return "\n          background-color: ".concat(semantic$9.color.background['error-subtle'], ";\n          border-color: ").concat(semantic$9.color.border.error, ";\n          color: ").concat(semantic$9.color.text.error, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(semantic$a.color.background['warning-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.warning, ";\n          color: ").concat(semantic$a.color.text.warning, ";\n        ");
+      return "\n          background-color: ".concat(semantic$9.color.background['warning-subtle'], ";\n          border-color: ").concat(semantic$9.color.border.warning, ";\n          color: ").concat(semantic$9.color.text.warning, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(semantic$a.color.background['success-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.success, ";\n          color: ").concat(semantic$a.color.text.success, ";\n        ");
+      return "\n          background-color: ".concat(semantic$9.color.background['success-subtle'], ";\n          border-color: ").concat(semantic$9.color.border.success, ";\n          color: ").concat(semantic$9.color.text.success, ";\n        ");
     case 'info':
     default:
-      return "\n          background-color: ".concat(semantic$a.color.background['interactive-subtle'], ";\n          border-color: ").concat(semantic$a.color.border.interactive, ";\n          color: ").concat(semantic$a.color.text.interactive, ";\n        ");
+      return "\n          background-color: ".concat(semantic$9.color.background['interactive-subtle'], ";\n          border-color: ").concat(semantic$9.color.border.interactive, ";\n          color: ").concat(semantic$9.color.text.interactive, ";\n        ");
   }
-}, base$8.breakpoint.md, function (_a) {
+}, base$7.breakpoint.md, function (_a) {
   var $inline = _a.$inline;
-  return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.lg;
+  return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.lg;
 });
-var StyledIconContainer$1 = styled.div.withConfig({
+var StyledIconContainer = styled.div.withConfig({
   displayName: "Alert__StyledIconContainer",
   componentId: "sc-18tq5d-1"
-})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
+})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
 var StyledContent$1 = styled.div.withConfig({
   displayName: "Alert__StyledContent",
   componentId: "sc-18tq5d-2"
-})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$a.spacing.layout.xs);
+})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$9.spacing.layout.xs);
 var StyledTitle = styled.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
-})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"], ["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"])), semantic$a.typography.h6);
+})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"], ["\n  font: ", ";\n  font-weight: 600 !important;\n  margin: 0;\n\tline-height: 1.125;\n"])), semantic$9.typography.h6);
 var StyledMessage = styled.span.withConfig({
   displayName: "Alert__StyledMessage",
   componentId: "sc-18tq5d-4"
-})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  font: ", ";\n\tline-height: 1.25;\n"], ["\n  font: ", ";\n\tline-height: 1.25;\n"])), semantic$a.typography.body);
+})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  font: ", ";\n\tline-height: 1.25;\n"], ["\n  font: ", ";\n\tline-height: 1.25;\n"])), semantic$9.typography.body);
 var StyledActions = styled.div.withConfig({
   displayName: "Alert__StyledActions",
   componentId: "sc-18tq5d-5"
-})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$a.spacing.layout.sm);
+})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$9.spacing.layout.sm);
 var StyledDismissButton = styled(IconButton).withConfig({
   displayName: "Alert__StyledDismissButton",
   componentId: "sc-18tq5d-6"
-})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$a.spacing.layout.xs);
+})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$9.spacing.layout.xs);
 var Alert = function Alert(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'info' : _b,
@@ -3747,7 +4013,7 @@ var Alert = function Alert(_a) {
     "$inline": inline,
     "data-testid": dataTestId
   }, props, {
-    children: [jsx(StyledIconContainer$1, {
+    children: [jsx(StyledIconContainer, {
       "aria-hidden": "true",
       children: jsx(Icon, {
         name: iconName,
@@ -3776,17 +4042,21 @@ var Alert = function Alert(_a) {
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$o, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$8, templateObject_7$6;
+var templateObject_1$n, templateObject_2$i, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$7, templateObject_7$5;
 
-var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+var _a$3, _b$1, _c, _d, _e, _f;
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-block;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  &:not(:last-of-type)::before {\n    content: '';\n    background-image: url('/assets/icons/caret.svg');\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-color: transparent;\n    opacity: 0.5;\n    display: inline-block;\n    width: ", ";\n    height: ", ";\n    right: -", ";\n    position: absolute;\n  }\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-block;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  &:not(:last-of-type)::before {\n    content: '';\n    background-image: url('/assets/icons/caret.svg');\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-color: transparent;\n    opacity: 0.5;\n    display: inline-block;\n    width: ", ";\n    height: ", ";\n    right: -", ";\n    position: absolute;\n  }\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', ((_h = (_g = tokensData.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokensData.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokensData.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
+})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
+var BreadcrumbSeparator = styled.span.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbSeparator",
+  componentId: "sc-7ouzg5-2"
+})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"])));
 var isInternalUrl = function isInternalUrl(url) {
   return url.startsWith('/') && !url.startsWith('http');
 };
@@ -3798,39 +4068,48 @@ var Breadcrumbs = function Breadcrumbs(_a) {
       "aria-label": "breadcrumb",
       children: jsx("ol", {
         children: breadcrumbs.map(function (breadcrumb, index) {
-          return jsx(BreadcrumbStyled, {
-            children: index === breadcrumbs.length - 1 ? jsx(Typography, {
-              variant: "caption",
-              children: breadcrumb.label
-            }) : LinkComponent && isInternalUrl(breadcrumb.url) ? jsx(LinkComponent, {
-              href: breadcrumb.url,
-              children: jsx(Typography, {
-                variant: "caption",
-                children: breadcrumb.label
-              })
-            }) : jsx("a", __assign({
-              href: breadcrumb.url
-            }, !isInternalUrl(breadcrumb.url) && {
-              target: "_blank",
-              rel: "noopener noreferrer"
-            }, {
-              children: jsx(Typography, {
+          return jsxs(React.Fragment, {
+            children: [jsx(BreadcrumbStyled, {
+              children: index === breadcrumbs.length - 1 ? jsx(Typography, {
                 variant: "caption",
                 children: breadcrumb.label
+              }) : LinkComponent && isInternalUrl(breadcrumb.url) ? jsx(LinkComponent, {
+                href: breadcrumb.url,
+                children: jsx(Typography, {
+                  variant: "caption",
+                  children: breadcrumb.label
+                })
+              }) : jsx("a", __assign({
+                href: breadcrumb.url
+              }, !isInternalUrl(breadcrumb.url) && {
+                target: "_blank",
+                rel: "noopener noreferrer"
+              }, {
+                children: jsx(Typography, {
+                  variant: "caption",
+                  children: breadcrumb.label
+                })
+              }))
+            }), index < breadcrumbs.length - 1 && jsx(BreadcrumbSeparator, {
+              "aria-hidden": "true",
+              children: jsx(Icon, {
+                name: "arrowRight",
+                size: "xs",
+                iconColor: "subdued"
               })
-            }))
+            })]
           }, index);
         })
       })
     })
   });
 };
-var templateObject_1$n, templateObject_2$i;
+var templateObject_1$m, templateObject_2$h, templateObject_3$f;
 
 var CardSmallStyled = styled.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
   componentId: "sc-jpcqvd-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
 var CardSmall = function CardSmall(_a) {
   var title = _a.title,
     picture = _a.picture,
@@ -3882,13 +4161,13 @@ var CardSmall = function CardSmall(_a) {
     })
   });
 };
-var templateObject_1$m;
+var templateObject_1$l;
 
 var border$3 = tokensData.base.border;
 var CardLargeStyled = styled.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
   componentId: "sc-1rfgdzl-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$3.radius[6]);
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$3.radius[6]);
 var CardLarge = function CardLarge(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -3941,7 +4220,7 @@ var CardLarge = function CardLarge(_a) {
     })
   });
 };
-var templateObject_1$l;
+var templateObject_1$k;
 
 /**
  * Hidden native checkbox input for accessibility
@@ -3953,7 +4232,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
   },
   displayName: "SelectableInputBase__HiddenCheckboxInput",
   componentId: "sc-1ddpctx-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
 /**
  * Custom checkbox visual component
  * 24px × 24px for 8px grid alignment
@@ -3970,7 +4249,7 @@ var StyledCheckbox = styled.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckbox",
   componentId: "sc-1ddpctx-1"
-})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"
+})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
@@ -4003,7 +4282,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckboxContainer",
   componentId: "sc-1ddpctx-2"
-})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"
+})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"
 /**
  * Label text with proper typography
  */])), tokensData.base.spacing[3], function (props) {
@@ -4023,16 +4302,16 @@ var StyledCheckboxLabel = styled.span.withConfig({
 })(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
   return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
 });
-var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$c;
+var templateObject_1$j, templateObject_2$g, templateObject_3$e, templateObject_4$c;
 
 var StyledFieldContainer$3 = styled.div.withConfig({
   displayName: "Checkbox__StyledFieldContainer",
   componentId: "sc-vquz3v-0"
-})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensData.base.spacing[1]);
+})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensData.base.spacing[1]);
 var StyledHelperText$4 = styled.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
-})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
+})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
 /**
  * Checkbox component for binary selection with WCAG 2.2 AA compliance
  *
@@ -4151,12 +4430,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
 });
 Checkbox.displayName = 'Checkbox';
-var templateObject_1$j, templateObject_2$g;
+var templateObject_1$i, templateObject_2$f;
 
 var ChipGroupWrapper = styled.div.withConfig({
   displayName: "ChipGroup__ChipGroupWrapper",
   componentId: "sc-ae049w-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
 var ChipGroup = function ChipGroup(_a) {
   var labels = _a.labels,
     _b = _a.variant,
@@ -4176,24 +4455,44 @@ var ChipGroup = function ChipGroup(_a) {
     })
   });
 };
-var templateObject_1$i;
+var templateObject_1$h;
 
 var _a$2 = tokensData.semantic,
   color$1 = _a$2.color,
   border$2 = _a$2.border,
   spacing$2 = _a$2.spacing;
+  _a$2.motion;
 var StyledCodeBlock = styled.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], function (_a) {
+  var $isExpanded = _a.$isExpanded,
+    $needsExpansion = _a.$needsExpansion;
+  return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
+}, spacing$2.layout.sm, function (_a) {
+  var $maxHeight = _a.$maxHeight,
+    $isExpanded = _a.$isExpanded,
+    $needsExpansion = _a.$needsExpansion;
+  if (!$maxHeight || !$needsExpansion) return '';
+  // Use a large value when expanded to allow smooth transition
+  // 10000px is effectively "no limit" for most code blocks
+  return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
+});
 var CodeBlockWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CodeBlockWrapper",
   componentId: "sc-1p1t0kp-1"
-})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
+})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
 var CopyButtonWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CopyButtonWrapper",
   componentId: "sc-1p1t0kp-2"
-})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
+})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
+var ExpandButtonWrapper = styled.div.withConfig({
+  displayName: "CodeBlock__ExpandButtonWrapper",
+  componentId: "sc-1p1t0kp-3"
+})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, tokensData.base.border.radius[2], function (_a) {
+  var $hasGradient = _a.$hasGradient;
+  return $hasGradient ? "\n    margin-top: -".concat(spacing$2.layout['4xl'], ";\n    padding-top: ").concat(spacing$2.layout['4xl'], ";\n    background: linear-gradient(\n      to bottom,\n      transparent 0%,\n      ").concat(color$1.background.subtle, " 60%\n    );\n  ") : "\n    background: transparent;\n  ";
+});
 var CopyButton = function CopyButton(_a) {
   var text = _a.text,
     onCopy = _a.onCopy;
@@ -4254,49 +4553,121 @@ var CopyButton = function CopyButton(_a) {
 };
 /**
  * CodeBlock component for displaying formatted code with optional copy functionality
+ * and expandable content for long code blocks.
  *
  * @param children - The code content to display
  * @param showCopyButton - Whether to show the copy button (default: true)
  * @param onCopy - Optional callback when code is copied
+ * @param maxHeight - Maximum height in pixels before enabling expand/collapse
+ * @param defaultExpanded - Initial expanded state when maxHeight is set
  * @param data-testid - Test identifier for the code block
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeBlock>const x = 1;</CodeBlock>
+ *
+ * // With max height and expand/collapse
+ * <CodeBlock maxHeight={200}>
+ *   {longCodeString}
+ * </CodeBlock>
+ *
+ * // Start expanded
+ * <CodeBlock maxHeight={200} defaultExpanded>
+ *   {longCodeString}
+ * </CodeBlock>
+ * ```
  */
 var CodeBlock = function CodeBlock(_a) {
   var children = _a.children,
     _b = _a.showCopyButton,
     showCopyButton = _b === void 0 ? true : _b,
     onCopy = _a.onCopy,
+    maxHeight = _a.maxHeight,
+    _c = _a.defaultExpanded,
+    defaultExpanded = _c === void 0 ? false : _c,
     testId = _a["data-testid"];
+  var _d = useState(defaultExpanded),
+    isExpanded = _d[0],
+    setIsExpanded = _d[1];
+  var _e = useState(false),
+    needsExpansion = _e[0],
+    setNeedsExpansion = _e[1];
+  var contentRef = useRef(null);
+  // Check if content exceeds maxHeight
+  useEffect(function () {
+    if (maxHeight && contentRef.current) {
+      var scrollHeight = contentRef.current.scrollHeight;
+      setNeedsExpansion(scrollHeight > maxHeight);
+    }
+  }, [children, maxHeight]);
+  var handleToggleExpand = function handleToggleExpand() {
+    setIsExpanded(function (prev) {
+      return !prev;
+    });
+    // Announce state change to screen readers
+    var announcement = isExpanded ? 'Code block collapsed' : 'Code block expanded';
+    var announcer = document.createElement('div');
+    announcer.setAttribute('aria-live', 'polite');
+    announcer.setAttribute('aria-atomic', 'true');
+    announcer.setAttribute('class', 'sr-only');
+    announcer.style.cssText = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;';
+    announcer.textContent = announcement;
+    document.body.appendChild(announcer);
+    setTimeout(function () {
+      document.body.removeChild(announcer);
+    }, 1000);
+  };
+  var showExpandButton = maxHeight && needsExpansion;
   return jsxs(CodeBlockWrapper, {
     children: [jsx(StyledCodeBlock, {
+      ref: contentRef,
       "data-testid": testId,
+      "$maxHeight": maxHeight,
+      "$isExpanded": isExpanded,
+      "$needsExpansion": needsExpansion,
+      "aria-expanded": showExpandButton ? isExpanded : undefined,
+      tabIndex: 0,
       children: children
+    }), showExpandButton && jsx(ExpandButtonWrapper, {
+      "$hasGradient": !isExpanded,
+      children: jsx(Button, {
+        variant: "secondary",
+        size: "small",
+        iconName: isExpanded ? 'caretUp' : 'caretDown',
+        onClick: handleToggleExpand,
+        "aria-expanded": isExpanded,
+        "aria-controls": testId,
+        "data-testid": "expand-button",
+        children: isExpanded ? 'Show less' : 'Show more'
+      })
     }), showCopyButton && jsx(CopyButton, {
       text: children,
       onCopy: onCopy
     })]
   });
 };
-var templateObject_1$h, templateObject_2$f, templateObject_3$e;
+var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
 
 var StyledHeader = styled.div.withConfig({
   displayName: "DateGroup__StyledHeader",
   componentId: "sc-9nfm1f-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], function (_a) {
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], function (_a) {
   var $sticky = _a.$sticky;
   return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    box-shadow: ".concat(tokensData.base.shadow[2], ";\n  ");
 });
 var StyledLeftSection = styled.div.withConfig({
   displayName: "DateGroup__StyledLeftSection",
   componentId: "sc-9nfm1f-1"
-})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
+})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
 var StyledRightSection = styled.div.withConfig({
   displayName: "DateGroup__StyledRightSection",
   componentId: "sc-9nfm1f-2"
-})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.md);
+})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.md);
 var StyledContent = styled.div.withConfig({
   displayName: "DateGroup__StyledContent",
   componentId: "sc-9nfm1f-3"
-})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  /* Content area for children */\n"], ["\n  /* Content area for children */\n"
+})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  /* Content area for children */\n"], ["\n  /* Content area for children */\n"
 /**
  * DateGroup component
  *
@@ -4368,18 +4739,18 @@ var DateGroup = function DateGroup(_a) {
     })]
   });
 };
-var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
+var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$a;
 
-var semantic$9 = tokensData.semantic;
+var semantic$8 = tokensData.semantic;
 var StyledContainer$1 = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "EmptyState__StyledContainer",
   componentId: "sc-1u5hxh-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"])), function (_a) {
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: ", ";\n"])), function (_a) {
   var $size = _a.$size;
-  return $size === 'small' ? semantic$9.spacing.layout['4xl'] : $size === 'large' ? semantic$9.spacing.layout['8xl'] : semantic$9.spacing.layout['6xl'];
+  return $size === 'small' ? semantic$8.spacing.layout['4xl'] : $size === 'large' ? semantic$8.spacing.layout['8xl'] : semantic$8.spacing.layout['6xl'];
 });
 var StyledIllustration = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -4387,22 +4758,22 @@ var StyledIllustration = styled.div.withConfig({
   },
   displayName: "EmptyState__StyledIllustration",
   componentId: "sc-1u5hxh-1"
-})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"])), function (_a) {
+})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
 }, function (_a) {
   var $size = _a.$size;
   return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
-}, semantic$9.spacing.layout['2xl'], function (_a) {
+}, semantic$8.spacing.layout['2xl'], function (_a) {
   var $variant = _a.$variant;
-  return $variant === 'error' ? semantic$9.color.icon.error : $variant === 'success' ? semantic$9.color.icon.success : semantic$9.color.icon.subdued;
+  return $variant === 'error' ? semantic$8.color.icon.error : $variant === 'success' ? semantic$8.color.icon.success : semantic$8.color.icon.subdued;
 });
 var StyledTextContainer = styled.div.withConfig({
   displayName: "EmptyState__StyledTextContainer",
   componentId: "sc-1u5hxh-2"
-})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  max-width: 360px;\n  margin-bottom: ", ";\n"], ["\n  max-width: 360px;\n  margin-bottom: ", ";\n"
+})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  max-width: 360px;\n  margin-bottom: ", ";\n"], ["\n  max-width: 360px;\n  margin-bottom: ", ";\n"
 // Map illustration type to icon name
-])), semantic$9.spacing.layout['2xl']);
+])), semantic$8.spacing.layout['2xl']);
 // Map illustration type to icon name
 var illustrationToIcon = {
   search: 'search',
@@ -4457,7 +4828,7 @@ var EmptyState = function EmptyState(_a) {
         children: title
       }), jsx("div", {
         style: {
-          marginTop: semantic$9.spacing.layout.md
+          marginTop: semantic$8.spacing.layout.md
         },
         children: jsx(Typography, {
           variant: "body",
@@ -4487,7 +4858,7 @@ var EmptyState = function EmptyState(_a) {
     })]
   });
 };
-var templateObject_1$f, templateObject_2$d, templateObject_3$c;
+var templateObject_1$e, templateObject_2$c, templateObject_3$b;
 
 var _a$1 = tokensData.base,
   spacing$1 = _a$1.spacing,
@@ -4495,23 +4866,23 @@ var _a$1 = tokensData.base,
 var FeatureBlockStyled = styled.div.withConfig({
   displayName: "FeatureBlock__FeatureBlockStyled",
   componentId: "sc-1mi4lso-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
 var ImageWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ImageWrapper",
   componentId: "sc-1mi4lso-1"
-})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokensData.base.breakpoint.lg);
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokensData.base.breakpoint.lg);
 var ContentSection = styled.div.withConfig({
   displayName: "FeatureBlock__ContentSection",
   componentId: "sc-1mi4lso-2"
-})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
+})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
 var ButtonWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ButtonWrapper",
   componentId: "sc-1mi4lso-3"
-})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
+})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
 var ContentWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ContentWrapper",
   componentId: "sc-1mi4lso-4"
-})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
+})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
 var FeatureBlock = function FeatureBlock(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -4568,7 +4939,7 @@ var FeatureBlock = function FeatureBlock(_a) {
     }), jsx(Divider, {})]
   });
 };
-var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
+var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8;
 
 var _a = tokensData.base,
   spacing = _a.spacing,
@@ -4582,14 +4953,14 @@ var _a = tokensData.base,
 var DropdownContainer = styled.div.withConfig({
   displayName: "Dropdown__DropdownContainer",
   componentId: "sc-kz07c4-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var DropdownTrigger = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Dropdown__DropdownTrigger",
   componentId: "sc-kz07c4-1"
-})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
+})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
 }, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
@@ -4609,7 +4980,7 @@ var DropdownIcon = styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownIcon",
   componentId: "sc-kz07c4-2"
-})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"])), spacing[2], function (_a) {
+})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"])), spacing[2], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen && "\n    transform: rotate(180deg);\n  ";
 });
@@ -4619,7 +4990,7 @@ var DropdownMenu = styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
+})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -4635,7 +5006,7 @@ var DropdownOption = styled.button.withConfig({
   },
   displayName: "Dropdown__DropdownOption",
   componentId: "sc-kz07c4-4"
-})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
+})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
   var $isSelected = _a.$isSelected,
     $isFocused = _a.$isFocused;
   if ($isFocused) return color.background.surface;
@@ -4645,7 +5016,7 @@ var DropdownOption = styled.button.withConfig({
 var StyledHelperText$3 = styled.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"
-})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), typography.caption, function (_a) {
+})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), typography.caption, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? color.text.error : color.text.subdued;
 }, spacing[2]);
@@ -4668,8 +5039,8 @@ var Dropdown = function Dropdown(_a) {
     focusedIndex = _e[0],
     setFocusedIndex = _e[1];
   var dropdownRef = useRef(null);
-  // Generate unique ID for accessibility
-  var dropdownId = useRef("dropdown-".concat(Math.random().toString(36).substr(2, 9))).current;
+  // Generate unique ID for accessibility (SSR-safe)
+  var dropdownId = useId();
   var selectedOption = options.find(function (option) {
     return option.id === value;
   });
@@ -4822,18 +5193,18 @@ var Dropdown = function Dropdown(_a) {
     })]
   });
 };
-var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
+var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6;
 
-var semantic$8 = tokensData.semantic;
+var semantic$7 = tokensData.semantic;
 var StyledList = styled.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "List__StyledList",
   componentId: "sc-1irksg5-0"
-})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
+})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
   var $dividers = _a.$dividers;
-  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: 1px solid ".concat(semantic$8.color.border["default"], ";\n    }\n  ");
+  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: 1px solid ".concat(semantic$7.color.border["default"], ";\n    }\n  ");
 });
 var List = function List(_a) {
   var children = _a.children,
@@ -4855,194 +5226,7 @@ var List = function List(_a) {
   }));
 };
 List.displayName = 'List';
-var templateObject_1$c;
-
-var semantic$7 = tokensData.semantic,
-  base$7 = tokensData.base;
-var StyledListItem = styled.li.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "ListItem__StyledListItem",
-  componentId: "sc-1wzzt21-0"
-})(templateObject_1$b || (templateObject_1$b = __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  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"])), function (_a) {
-  var $interactive = _a.$interactive;
-  return $interactive && 'user-select: none;';
-}, function (_a) {
-  var $disabled = _a.$disabled;
-  return $disabled && "\n    opacity: ".concat(base$7.opacity[50], ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
-});
-var StyledItemContent = styled.div.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "ListItem__StyledItemContent",
-  componentId: "sc-1wzzt21-1"
-})(templateObject_2$a || (templateObject_2$a = __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$7.spacing.layout.md, function (_a) {
-  var $spacing = _a.$spacing;
-  return $spacing === 'compact' ? "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.md) : "".concat(semantic$7.spacing.layout.md, " ").concat(semantic$7.spacing.layout.lg);
-}, base$7.border.radius[2], function (_a) {
-  var $selected = _a.$selected;
-  return $selected ? semantic$7.color.background['interactive-subtle'] : 'transparent';
-}, function (_a) {
-  var $interactive = _a.$interactive,
-    $disabled = _a.$disabled;
-  if ($disabled) return 'not-allowed';
-  if ($interactive) return 'pointer';
-  return 'default';
-}, function (_a) {
-  var $interactive = _a.$interactive,
-    $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$7.color.border.interactive);
-var StyledIconContainer = styled.div.withConfig({
-  displayName: "ListItem__StyledIconContainer",
-  componentId: "sc-1wzzt21-2"
-})(templateObject_3$9 || (templateObject_3$9 = __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$8 || (templateObject_4$8 = __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$7.spacing.layout.xs);
-var StyledRightContent = styled.div.withConfig({
-  displayName: "ListItem__StyledRightContent",
-  componentId: "sc-1wzzt21-4"
-})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$7.spacing.layout.sm);
-var StyledChevronIcon = styled.div.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "ListItem__StyledChevronIcon",
-  componentId: "sc-1wzzt21-5"
-})(templateObject_6$6 || (templateObject_6$6 = __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$7.color.icon.subdued, function (_a) {
-  var $expanded = _a.$expanded;
-  return $expanded ? '180deg' : '0deg';
-});
-var StyledExpandedContent = styled.div.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "ListItem__StyledExpandedContent",
-  componentId: "sc-1wzzt21-6"
-})(templateObject_7$5 || (templateObject_7$5 = __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) {
-  var $expanded = _a.$expanded;
-  return $expanded ? '1' : '0';
-}, function (_a) {
-  var $expanded = _a.$expanded,
-    $spacing = _a.$spacing;
-  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.md, " ").concat(semantic$7.spacing.layout.sm, " 48px") : "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.lg, " ").concat(semantic$7.spacing.layout.md, " 60px"), ";\n    background-color: ").concat(semantic$7.color.background['subtle'], ";\n    border-radius: ").concat(base$7.border.radius[2], ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic$7.spacing.layout.md : semantic$7.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md, ";\n  ");
-});
-var ListItem = function ListItem(_a) {
-  var primary = _a.primary,
-    secondary = _a.secondary,
-    badge = _a.badge,
-    icon = _a.icon,
-    _b = _a.expandable,
-    expandable = _b === void 0 ? false : _b,
-    _c = _a.expanded,
-    expanded = _c === void 0 ? false : _c,
-    onToggle = _a.onToggle,
-    _d = _a.interactive,
-    interactive = _d === void 0 ? false : _d,
-    onClick = _a.onClick,
-    _e = _a.disabled,
-    disabled = _e === void 0 ? false : _e,
-    _f = _a.selected,
-    selected = _f === void 0 ? false : _f,
-    _g = _a.spacing,
-    spacing = _g === void 0 ? 'comfortable' : _g,
-    children = _a.children,
-    className = _a.className,
-    dataTestId = _a["data-testid"],
-    customRole = _a.role,
-    ariaSelected = _a["aria-selected"],
-    id = _a.id,
-    customTabIndex = _a.tabIndex,
-    customOnKeyDown = _a.onKeyDown,
-    props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "spacing", "children", "className", 'data-testid', "role", 'aria-selected', "id", "tabIndex", "onKeyDown"]);
-  var isInteractive = interactive || expandable || customRole === 'option';
-  var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
-  var ariaExpanded = expandable ? expanded : undefined;
-  var ariaDisabled = disabled ? true : undefined;
-  var ariaCurrent = selected ? 'true' : undefined;
-  var handleClick = function handleClick() {
-    if (disabled) return;
-    if (expandable && onToggle) {
-      onToggle();
-    } else if (onClick) {
-      onClick();
-    }
-  };
-  var handleKeyDown = function handleKeyDown(event) {
-    if (customOnKeyDown) {
-      customOnKeyDown(event);
-      return;
-    }
-    if (disabled) return;
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleClick();
-    }
-  };
-  return jsxs(StyledListItem, __assign({
-    "$interactive": isInteractive,
-    "$disabled": disabled,
-    "$selected": selected,
-    "$spacing": spacing,
-    className: className,
-    "data-testid": dataTestId,
-    role: customRole || 'listitem',
-    id: id,
-    "aria-selected": ariaSelected
-  }, props, {
-    children: [jsxs(StyledItemContent, {
-      "$interactive": isInteractive,
-      "$disabled": disabled,
-      "$selected": selected,
-      "$spacing": spacing,
-      role: contentRole,
-      "aria-expanded": ariaExpanded,
-      "aria-disabled": ariaDisabled,
-      "aria-current": ariaCurrent,
-      tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      children: [icon && jsx(StyledIconContainer, {
-        "aria-hidden": "true",
-        children: icon
-      }), jsxs(StyledTextContent, {
-        children: [jsx(Typography, {
-          variant: "body",
-          color: "default",
-          children: primary
-        }), secondary && jsx(Typography, {
-          variant: "small",
-          color: "subdued",
-          children: secondary
-        })]
-      }), jsxs(StyledRightContent, {
-        children: [badge, expandable && jsx(StyledChevronIcon, {
-          "$expanded": expanded,
-          "aria-hidden": "true",
-          children: jsx(Icon, {
-            name: "caretDown",
-            size: "sm"
-          })
-        })]
-      })]
-    }), expandable && children && jsx(StyledExpandedContent, {
-      "$spacing": spacing,
-      "$expanded": expanded,
-      "aria-hidden": !expanded,
-      children: children
-    })]
-  }));
-};
-ListItem.displayName = 'ListItem';
-var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5;
+var templateObject_1$b;
 
 var input = tokensData.component.input;
 var StyledInputBase = styled.input.withConfig({