@common-origin/design-system 2.3.0 → 2.4.2

package/dist/index.esm.js

@@ -1,18 +1,9 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useEffect, forwardRef, useId, useCallback, useMemo } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
 import { createPortal } from 'react-dom';
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -416,7 +407,7 @@ var base$d = {
 	},
 	$ref: "./base/index.json"
 };
-var component = {
+var component$1 = {
 	button: {
 		primary: {
 			backgroundColor: "#212529",
@@ -866,11 +857,10 @@ var semantic$g = {
 };
 var tokensData = {
 	base: base$d,
-	component: component,
+	component: component$1,
 	semantic: semantic$g
 };
 
-React.createElement;
 var AvatarContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -897,7 +887,7 @@ var AvatarInitials = styled.span.withConfig({
   },
   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;
@@ -941,28 +931,30 @@ var Avatar = function Avatar(_a) {
   };
   var showImage = picture && !imageError;
   var initials = getInitials(name);
-  return /*#__PURE__*/React.createElement(AvatarContainer, _extends({
-    $size: size,
+  return jsx(AvatarContainer, __assign({
+    "$size": size,
     "data-testid": dataTestId,
     "data-size": size,
     role: "img",
     "aria-label": "Avatar for ".concat(name)
-  }, htmlProps), showImage ? /*#__PURE__*/React.createElement(AvatarImage, {
-    $size: size,
-    src: picture,
-    alt: "Avatar of ".concat(name),
-    onError: handleImageError,
-    onLoad: handleImageLoad,
-    "data-state": imageLoaded ? 'loaded' : 'loading'
-  }) : /*#__PURE__*/React.createElement(AvatarInitials, {
-    $size: size,
-    "data-initials": initials,
-    "aria-hidden": "true"
-  }, initials));
+  }, htmlProps, {
+    children: showImage ? jsx(AvatarImage, {
+      "$size": size,
+      src: picture,
+      alt: "Avatar of ".concat(name),
+      onError: handleImageError,
+      onLoad: handleImageLoad,
+      "data-state": imageLoaded ? 'loaded' : 'loading'
+    }) : jsx(AvatarInitials, {
+      "$size": size,
+      "data-initials": initials,
+      "aria-hidden": "true",
+      children: initials
+    })
+  }));
 };
-var templateObject_1$I, templateObject_2$t, templateObject_3$p;
+var templateObject_1$I, templateObject_2$t, templateObject_3$q;
 
-React.createElement;
 var _a$5 = tokensData.semantic,
   typography$2 = _a$5.typography,
   color$4 = _a$5.color;
@@ -1088,16 +1080,16 @@ var Typography = function Typography(_a) {
   // $variant and $color are only used for styled-components prop filtering
   var defaultElement = getDefaultElement(variant);
   var elementType = as || defaultElement;
-  return /*#__PURE__*/React.createElement(StyledTypography, {
+  return jsx(StyledTypography, {
     as: elementType,
-    $variant: variant,
-    $color: color,
-    "data-testid": dataTestId
-  }, children);
+    "$variant": variant,
+    "$color": color,
+    "data-testid": dataTestId,
+    children: children
+  });
 };
 var templateObject_1$H;
 
-React.createElement;
 var color$3 = tokensData.semantic.color;
   tokensData.base.shadow;
 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"])));
@@ -1111,7 +1103,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';
@@ -1154,46 +1146,50 @@ var Badge = function Badge(_a) {
   // Generate default aria-label if not provided
   var defaultAriaLabel = dot ? 'New notification indicator' : count === 1 ? '1 notification' : "".concat(count, " notifications");
   var label = ariaLabel || defaultAriaLabel;
-  return /*#__PURE__*/React.createElement(BadgeWrapper, {
-    className: className
-  }, children, /*#__PURE__*/React.createElement(BadgeIndicator, {
-    $variant: variant,
-    $isDot: dot,
-    $isVisible: isVisible,
-    role: "status",
-    "aria-live": "polite"
-  }, !dot && /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    color: "inverse"
-  }, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly$1, null, label)));
+  return jsxs(BadgeWrapper, {
+    className: className,
+    children: [children, jsxs(BadgeIndicator, {
+      "$variant": variant,
+      "$isDot": dot,
+      "$isVisible": isVisible,
+      role: "status",
+      "aria-live": "polite",
+      children: [!dot && jsx(Typography, {
+        variant: "caption",
+        color: "inverse",
+        children: displayCount
+      }), jsx(ScreenReaderOnly$1, {
+        children: label
+      })]
+    })]
+  });
 };
-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$j;
 
-React.createElement;
 var StyledBox = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Box__StyledBox",
   componentId: "sc-aj0jhd-0"
-})(templateObject_43 || (templateObject_43 = __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  // 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  // 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  // 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"
 // 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);
 }, function (props) {
   return props.$flexWrap && css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
-  return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
+  return props.$gap && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
 }, function (props) {
-  return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
+  return props.$m && css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
 }, function (props) {
-  return props.$mt && css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
+  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]);
 }, function (props) {
@@ -1257,11 +1253,19 @@ 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.$overflow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
+  return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.base.shadow[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);
 }, function (props) {
-  return props.$overflowX && css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["overflow-x: ", ";"], ["overflow-x: ", ";"])), props.$overflowX);
+  return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
 }, function (props) {
-  return props.$overflowY && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["overflow-y: ", ";"], ["overflow-y: ", ";"])), props.$overflowY);
+  return props.$overflowX && css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["overflow-x: ", ";"], ["overflow-x: ", ";"])), props.$overflowX);
+}, function (props) {
+  return props.$overflowY && css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["overflow-y: ", ";"], ["overflow-y: ", ";"])), props.$overflowY);
 });
 // Transform component that maps clean props to $-prefixed props for styled-components
 var BoxTransform = function BoxTransform(props) {
@@ -1312,6 +1316,15 @@ var BoxTransform = function BoxTransform(props) {
     // Background & Color
     bg = props.bg,
     color = props.color,
+    // Shadow
+    shadow = props.shadow,
+    // Cursor
+    cursor = props.cursor,
+    // Transition
+    transition = props.transition,
+    // Hover states
+    hoverShadow = props.hoverShadow,
+    hoverTransform = props.hoverTransform,
     // Overflow
     overflow = props.overflow,
     overflowX = props.overflowX,
@@ -1319,57 +1332,74 @@ var BoxTransform = function BoxTransform(props) {
     // Standard props
     as = props.as,
     children = props.children,
+    onClick = props.onClick,
+    onKeyDown = props.onKeyDown,
+    tabIndex = props.tabIndex,
+    role = props.role,
+    ariaLabel = props["aria-label"],
     dataTestId = props["data-testid"],
-    rest = __rest(props, ["display", "flexDirection", "justifyContent", "alignItems", "flexWrap", "gap", "m", "mt", "mr", "mb", "ml", "mx", "my", "p", "pt", "pr", "pb", "pl", "px", "py", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "position", "top", "right", "bottom", "left", "borderRadius", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "bg", "color", "overflow", "overflowX", "overflowY", "as", "children", 'data-testid']);
-  return /*#__PURE__*/React.createElement(StyledBox, _extends({
+    rest = __rest(props, ["display", "flexDirection", "justifyContent", "alignItems", "flexWrap", "gap", "m", "mt", "mr", "mb", "ml", "mx", "my", "p", "pt", "pr", "pb", "pl", "px", "py", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "position", "top", "right", "bottom", "left", "borderRadius", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "bg", "color", "shadow", "cursor", "transition", "hoverShadow", "hoverTransform", "overflow", "overflowX", "overflowY", "as", "children", "onClick", "onKeyDown", "tabIndex", "role", 'aria-label', 'data-testid']);
+  return jsx(StyledBox, __assign({
     as: as,
     "data-testid": dataTestId,
-    $display: display,
-    $flexDirection: flexDirection,
-    $justifyContent: justifyContent,
-    $alignItems: alignItems,
-    $flexWrap: flexWrap,
-    $gap: gap,
-    $m: m,
-    $mt: mt,
-    $mr: mr,
-    $mb: mb,
-    $ml: ml,
-    $mx: mx,
-    $my: my,
-    $p: p,
-    $pt: pt,
-    $pr: pr,
-    $pb: pb,
-    $pl: pl,
-    $px: px,
-    $py: py,
-    $width: width,
-    $height: height,
-    $maxWidth: maxWidth,
-    $maxHeight: maxHeight,
-    $minWidth: minWidth,
-    $minHeight: minHeight,
-    $position: position,
-    $top: top,
-    $right: right,
-    $bottom: bottom,
-    $left: left,
-    $borderRadius: borderRadius,
-    $border: border,
-    $borderTop: borderTop,
-    $borderRight: borderRight,
-    $borderBottom: borderBottom,
-    $borderLeft: borderLeft,
-    $bg: bg,
-    $color: color,
-    $overflow: overflow,
-    $overflowX: overflowX,
-    $overflowY: overflowY
-  }, rest), children);
+    "$display": display,
+    "$flexDirection": flexDirection,
+    "$justifyContent": justifyContent,
+    "$alignItems": alignItems,
+    "$flexWrap": flexWrap,
+    "$gap": gap,
+    "$m": m,
+    "$mt": mt,
+    "$mr": mr,
+    "$mb": mb,
+    "$ml": ml,
+    "$mx": mx,
+    "$my": my,
+    "$p": p,
+    "$pt": pt,
+    "$pr": pr,
+    "$pb": pb,
+    "$pl": pl,
+    "$px": px,
+    "$py": py,
+    "$width": width,
+    "$height": height,
+    "$maxWidth": maxWidth,
+    "$maxHeight": maxHeight,
+    "$minWidth": minWidth,
+    "$minHeight": minHeight,
+    "$position": position,
+    "$top": top,
+    "$right": right,
+    "$bottom": bottom,
+    "$left": left,
+    "$borderRadius": borderRadius,
+    "$border": border,
+    "$borderTop": borderTop,
+    "$borderRight": borderRight,
+    "$borderBottom": borderBottom,
+    "$borderLeft": borderLeft,
+    "$bg": bg,
+    "$color": color,
+    "$shadow": shadow,
+    "$cursor": cursor,
+    "$transition": transition,
+    "$hoverShadow": hoverShadow,
+    "$hoverTransform": hoverTransform,
+    "$overflow": overflow,
+    "$overflowX": overflowX,
+    "$overflowY": overflowY,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    tabIndex: tabIndex,
+    role: role,
+    "aria-label": ariaLabel
+  }, rest, {
+    children: children
+  }));
 };
 var Box = BoxTransform;
-var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$d, templateObject_7$b, templateObject_8$6, 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;
+var templateObject_1$F, templateObject_2$r, templateObject_3$o, 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 add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1588,7 +1618,6 @@ var iconsData = {
 	viewHide: viewHide
 };
 
-React.createElement;
 var IconStyled = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1639,40 +1668,41 @@ var Icon = function Icon(_a) {
   var iconData = iconsData[name];
   if (!iconData) {
     console.warn("Icon \"".concat(name, "\" not found in icons.json"));
-    return /*#__PURE__*/React.createElement(IconStyled, {
-      $size: size,
-      $iconColor: iconColor,
+    return jsx(IconStyled, {
+      "$size": size,
+      "$iconColor": iconColor,
       "data-testid": dataTestId
     });
   }
-  return /*#__PURE__*/React.createElement(IconStyled, {
-    $size: size,
-    $iconColor: iconColor,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
-    "aria-label": iconData.name
-  }, /*#__PURE__*/React.createElement("path", {
-    d: iconData.path
-  })));
+  return jsx(IconStyled, {
+    "$size": size,
+    "$iconColor": iconColor,
+    "data-testid": dataTestId,
+    children: jsx("svg", {
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": iconData.name,
+      children: jsx("path", {
+        d: iconData.path
+      })
+    })
+  });
 };
 var templateObject_1$E;
 
-React.createElement;
 var button = tokensData.component.button,
   semantic$f = tokensData.semantic;
 // Base styles shared between button and link
 var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$f.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(button.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
 // 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");
 };
 // Dynamic size styles using component tokens
-var getSizeStyles$2 = function getSizeStyles(_a) {
+var getSizeStyles$3 = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
@@ -1691,7 +1721,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$3);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1700,7 +1730,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$3);
 // Helper function to get icon size based on button size
 var getIconSize = function getIconSize(buttonSize) {
   switch (buttonSize) {
@@ -1718,11 +1748,13 @@ var getIconSize = function getIconSize(buttonSize) {
 var renderButtonContent = function renderButtonContent(children, iconName, size) {
   if (!iconName) return children;
   var iconSize = getIconSize(size);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-    name: iconName,
-    size: iconSize,
-    iconColor: "inherit"
-  }), children);
+  return jsxs(Fragment, {
+    children: [jsx(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconColor: "inherit"
+    }), children]
+  });
 };
 var Button = function Button(_a) {
   var _b = _a.variant,
@@ -1740,25 +1772,29 @@ var Button = function Button(_a) {
     rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
   // For links with custom link component (e.g., Next.js Link, React Router Link)
   if (purpose === 'link' && url && LinkComponent) {
-    return /*#__PURE__*/React.createElement(LinkComponent, {
-      href: url
-    }, /*#__PURE__*/React.createElement(StyledLink, {
-      as: "span",
-      $variant: variant,
-      $size: size,
-      "data-testid": dataTestId
-    }, renderButtonContent(children, iconName, size)));
+    return jsx(LinkComponent, {
+      href: url,
+      children: jsx(StyledLink, {
+        as: "span",
+        "$variant": variant,
+        "$size": size,
+        "data-testid": dataTestId,
+        children: renderButtonContent(children, iconName, size)
+      })
+    });
   }
   // For standard links (external or without custom component)
   if (purpose === 'link' && url) {
     var linkProps = rest;
-    return /*#__PURE__*/React.createElement(StyledLink, _extends({
+    return jsx(StyledLink, __assign({
       href: url,
       target: target,
-      $variant: variant,
-      $size: size,
+      "$variant": variant,
+      "$size": size,
       "data-testid": dataTestId
-    }, linkProps), renderButtonContent(children, iconName, size));
+    }, linkProps, {
+      children: renderButtonContent(children, iconName, size)
+    }));
   }
   // For button with URL (legacy support)
   if (purpose === 'button' && url) {
@@ -1775,24 +1811,26 @@ var Button = function Button(_a) {
         window.location.href = url;
       }
     };
-    return /*#__PURE__*/React.createElement(StyledButton, _extends({}, buttonProps_1, {
-      $variant: variant,
-      $size: size,
+    return jsx(StyledButton, __assign({}, buttonProps_1, {
+      "$variant": variant,
+      "$size": size,
       "data-testid": dataTestId,
-      onClick: handleClick
-    }), renderButtonContent(children, iconName, size));
+      onClick: handleClick,
+      children: renderButtonContent(children, iconName, size)
+    }));
   }
   // Regular button
   var buttonProps = rest;
-  return /*#__PURE__*/React.createElement(StyledButton, _extends({
-    $variant: variant,
-    $size: size,
+  return jsx(StyledButton, __assign({
+    "$variant": variant,
+    "$size": size,
     "data-testid": dataTestId
-  }, buttonProps), renderButtonContent(children, iconName, size));
+  }, buttonProps, {
+    children: renderButtonContent(children, iconName, size)
+  }));
 };
 var templateObject_1$D, templateObject_2$q;
 
-React.createElement;
 var semantic$e = tokensData.semantic,
   base$c = tokensData.base;
 var getColorStyles = function getColorStyles(color, variant) {
@@ -1818,7 +1856,7 @@ var getColorStyles = function getColorStyles(color, variant) {
     borderColor: 'transparent'
   };
 };
-var getSizeStyles$1 = function getSizeStyles(size) {
+var getSizeStyles$2 = function getSizeStyles(size) {
   if (size === 'small') {
     return {
       height: '24px',
@@ -1907,7 +1945,7 @@ var CategoryBadge = function CategoryBadge(_a) {
   var hasClickHandler = Boolean(onClick);
   var isClickable = hasClickHandler && !disabled;
   var colorStyles = getColorStyles(color, variant);
-  var sizeStyles = getSizeStyles$1(size);
+  var sizeStyles = getSizeStyles$2(size);
   var cssProps = {
     '--category-badge-bg': colorStyles.backgroundColor,
     '--category-badge-color': colorStyles.color,
@@ -1930,12 +1968,12 @@ var CategoryBadge = function CategoryBadge(_a) {
       onClick === null || onClick === void 0 ? void 0 : onClick();
     }
   };
-  return /*#__PURE__*/React.createElement(StyledCategoryBadge, {
-    $color: color,
-    $variant: variant,
-    $size: size,
-    $clickable: isClickable,
-    $disabled: disabled,
+  return jsxs(StyledCategoryBadge, {
+    "$color": color,
+    "$variant": variant,
+    "$size": size,
+    "$clickable": isClickable,
+    "$disabled": disabled,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     tabIndex: hasClickHandler ? 0 : undefined,
@@ -1943,78 +1981,69 @@ var CategoryBadge = function CategoryBadge(_a) {
     "aria-label": ariaLabel,
     "aria-disabled": disabled,
     "data-testid": dataTestId,
-    style: cssProps
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    name: icon,
-    size: sizeStyles.iconSize,
-    "aria-hidden": "true"
-  }), children);
+    style: cssProps,
+    children: [icon && jsx(Icon, {
+      name: icon,
+      size: sizeStyles.iconSize,
+      iconColor: variant === 'filled' ? 'inverse' : 'inherit',
+      "aria-hidden": "true"
+    }), children]
+  });
 };
 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;
   // 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    ");
   }
-  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      ");
     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      ");
     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      ");
     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      ");
   }
 };
-// 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$1 = 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      ");
   }
 };
 
-React.createElement;
-// 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: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ", background-color ", ";\n  cursor: ", ";\n  opacity: ", ";\n  \n  ", "\n  ", "\n  \n  &:hover {\n    opacity: ", ";\n  }\n  \n  &:active {\n    opacity: ", ";\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 ", ", background-color ", ";\n  cursor: ", ";\n  opacity: ", ";\n  \n  ", "\n  ", "\n  \n  &:hover {\n    opacity: ", ";\n  }\n  \n  &:active {\n    opacity: ", ";\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
 // Icon container for selected indicator or leading icons
-])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
+])), tokensData.semantic.motion.interactive, tokensData.semantic.motion.hover, function (props) {
+  return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
+}, function (props) {
+  return props.$disabled ? '0.6' : '1';
+}, getVariantStyles, getSizeStyles$1, function (props) {
+  return props.$disabled ? '0.6' : props.$clickable ? '0.8' : '1';
+}, function (props) {
+  return props.$disabled ? '0.6' : props.$clickable ? '0.9' : '1';
+}, chip.variants.interactive.backgroundColor);
 // Icon container for selected indicator or leading icons
 var IconContainer = styled.span.withConfig({
   displayName: "ChipBase__IconContainer",
@@ -2029,44 +2058,13 @@ 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: 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"])), tokensData.semantic.spacing.layout.sm, 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 /*#__PURE__*/React.createElement(BaseChipStyled, _extends({
-    style: __assign(__assign({}, cssProps), style)
-  }, htmlProps), children);
-};
-var templateObject_1$B, templateObject_2$p, templateObject_3$m;
+var templateObject_1$B, templateObject_2$p, templateObject_3$n;
 
-React.createElement;
 /**
  * Chip - Compact element for displaying tags, categories, and labels
  *
@@ -2112,11 +2110,11 @@ var Chip = function Chip(_a) {
       handleClick();
     }
   };
-  return /*#__PURE__*/React.createElement(StyledChipWrapper, _extends({
-    $variant: normalizedVariant,
-    $size: size,
-    $disabled: disabled || undefined,
-    $clickable: isClickable || undefined,
+  return jsx(StyledChip, __assign({
+    "$variant": normalizedVariant,
+    "$size": size,
+    "$disabled": disabled || undefined,
+    "$clickable": isClickable || undefined,
     onClick: isClickable ? handleClick : undefined,
     onKeyDown: handleKeyDown,
     tabIndex: isClickable ? 0 : undefined,
@@ -2125,19 +2123,21 @@ var Chip = function Chip(_a) {
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": disabled ? 'true' : undefined,
     "data-testid": dataTestId
-  }, props), content);
+  }, props, {
+    children: content
+  }));
 };
 var LegacyChip = function LegacyChip(_a) {
   var title = _a.title,
     _b = _a.variant,
     variant = _b === void 0 ? 'light' : _b;
   var newVariant = variant === 'dark' ? 'emphasis' : 'default';
-  return /*#__PURE__*/React.createElement(Chip, {
-    variant: newVariant
-  }, title);
+  return jsx(Chip, {
+    variant: newVariant,
+    children: title
+  });
 };
 
-React.createElement;
 /**
  * FilterChip - Chip for displaying filters with selected state and optional dismissal
  *
@@ -2190,39 +2190,42 @@ var FilterChip = function FilterChip(_a) {
   };
   // Generate accessible label for close button
   var closeButtonLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove filter';
-  return /*#__PURE__*/React.createElement(StyledChipWrapper, _extends({
-    $variant: "subtle",
-    $size: size,
-    $disabled: disabled || undefined,
-    $clickable: false,
-    $selected: selected,
+  return jsxs(StyledChip, __assign({
+    "$variant": "subtle",
+    "$size": size,
+    "$disabled": disabled || undefined,
+    "$clickable": false,
+    "$selected": selected,
     onKeyDown: handleKeyDown,
     role: role || 'status',
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": disabled ? 'true' : undefined,
     "data-testid": dataTestId
-  }, props), selected && /*#__PURE__*/React.createElement(IconContainer, {
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "check",
-    size: "sm"
-  })), children, isDismissible && /*#__PURE__*/React.createElement(CloseButton, {
-    type: "button",
-    onClick: handleDismiss,
-    onKeyDown: handleCloseKeyDown,
-    disabled: disabled,
-    $disabled: disabled,
-    "aria-label": closeButtonLabel,
-    tabIndex: 0,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-close") : undefined
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "close",
-    size: "sm"
-  })));
+  }, props, {
+    children: [selected && jsx(IconContainer, {
+      "aria-hidden": "true",
+      children: jsx(Icon, {
+        name: "check",
+        size: "sm"
+      })
+    }), children, isDismissible && jsx(CloseButton, {
+      type: "button",
+      onClick: handleDismiss,
+      onKeyDown: handleCloseKeyDown,
+      disabled: disabled,
+      "$disabled": disabled,
+      "aria-label": closeButtonLabel,
+      tabIndex: 0,
+      "data-testid": dataTestId ? "".concat(dataTestId, "-close") : undefined,
+      children: jsx(Icon, {
+        name: "close",
+        size: "sm"
+      })
+    })]
+  }));
 };
 
-React.createElement;
 /**
  * BooleanChip - Toggleable chip for quick filter controls
  *
@@ -2261,12 +2264,12 @@ var BooleanChip = function BooleanChip(_a) {
       handleClick();
     }
   };
-  return /*#__PURE__*/React.createElement(StyledChipWrapper, _extends({
-    $variant: "subtle",
-    $size: size,
-    $disabled: disabled || undefined,
-    $clickable: !disabled,
-    $selected: selected,
+  return jsxs(StyledChip, __assign({
+    "$variant": "subtle",
+    "$size": size,
+    "$disabled": disabled || undefined,
+    "$clickable": !disabled,
+    "$selected": selected,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     tabIndex: disabled ? undefined : 0,
@@ -2276,12 +2279,15 @@ var BooleanChip = function BooleanChip(_a) {
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": disabled ? 'true' : undefined,
     "data-testid": dataTestId
-  }, props), selected && /*#__PURE__*/React.createElement(IconContainer, {
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "check",
-    size: "sm"
-  })), children);
+  }, props, {
+    children: [selected && jsx(IconContainer, {
+      "aria-hidden": "true",
+      children: jsx(Icon, {
+        name: "check",
+        size: "sm"
+      })
+    }), children]
+  }));
 };
 
 // Breakpoints using base tokens
@@ -2303,7 +2309,6 @@ var media$1 = {
   '2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
 };
 
-React.createElement;
 var spacing$3 = tokensData.semantic.spacing;
 var StyledContainer$2 = styled.div.withConfig({
   displayName: "Container__StyledContainer",
@@ -2312,11 +2317,12 @@ var StyledContainer$2 = styled.div.withConfig({
 var Container = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
-  return /*#__PURE__*/React.createElement(StyledContainer$2, props, children);
+  return jsx(StyledContainer$2, __assign({}, props, {
+    children: children
+  }));
 };
 var templateObject_1$A;
 
-React.createElement;
 var base$b = tokensData.base;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
@@ -2329,7 +2335,7 @@ var ImageLink = styled.a.withConfig({
 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$b.duration.normal, base$b.easing.easeInOut);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
@@ -2344,25 +2350,27 @@ var Picture = function Picture(_a) {
     onClick = _a.onClick,
     href = _a.href,
     dataTestId = _a["data-testid"];
-  var image = /*#__PURE__*/React.createElement(StyledImage, {
+  var image = jsx(StyledImage, {
     src: src,
     alt: title,
     width: width,
     height: height
   });
-  return /*#__PURE__*/React.createElement(PictureWrapper, {
-    "data-testid": dataTestId
-  }, href ? /*#__PURE__*/React.createElement(ImageLink, {
-    href: href,
-    "aria-label": "Read more about ".concat(title)
-  }, image) : onClick ? /*#__PURE__*/React.createElement(ImageButton, {
-    onClick: onClick,
-    "aria-label": "Read more about ".concat(title)
-  }, image) : image);
+  return jsx(PictureWrapper, {
+    "data-testid": dataTestId,
+    children: href ? jsx(ImageLink, {
+      href: href,
+      "aria-label": "Read more about ".concat(title),
+      children: image
+    }) : onClick ? jsx(ImageButton, {
+      onClick: onClick,
+      "aria-label": "Read more about ".concat(title),
+      children: image
+    }) : 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$h;
 
-React.createElement;
 var _a$4 = tokensData.semantic,
   typography$1 = _a$4.typography,
   color$2 = _a$4.color;
@@ -2412,14 +2420,14 @@ var DateFormatter = function DateFormatter(_a) {
       displayText = format(date, formatString || 'yyyy');
       break;
   }
-  return /*#__PURE__*/React.createElement(TimeStyled, {
+  return jsx(TimeStyled, {
     dateTime: dateString,
-    "data-testid": dataTestId
-  }, displayText);
+    "data-testid": dataTestId,
+    children: displayText
+  });
 };
 var templateObject_1$y;
 
-React.createElement;
 var motion = tokensData.semantic.motion,
   iconButton = tokensData.component.iconButton;
 var IconButtonStyled = styled.button.withConfig({
@@ -2517,9 +2525,9 @@ var IconButton = function IconButton(_a) {
         return 'default';
     }
   };
-  return /*#__PURE__*/React.createElement(IconButtonStyled, _extends({
-    $variant: variant,
-    $size: size,
+  return jsx(IconButtonStyled, __assign({
+    "$variant": variant,
+    "$size": size,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     disabled: disabled,
@@ -2532,16 +2540,17 @@ var IconButton = function IconButton(_a) {
     "aria-disabled": disabled,
     tabIndex: disabled ? -1 : 0,
     "data-testid": dataTestId
-  }, htmlProps), /*#__PURE__*/React.createElement(Icon, {
-    name: iconName,
-    size: iconSize,
-    iconColor: getIconColor(variant),
-    "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
+  }, htmlProps, {
+    children: jsx(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconColor: getIconColor(variant),
+      "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
+    })
   }));
 };
 var templateObject_1$x;
 
-React.createElement;
 var StyledWrapper = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2634,27 +2643,28 @@ var MoneyDisplay = function MoneyDisplay(_a) {
   // Get typography variant and color
   var typographyVariant = sizeToTypographyVariant[size];
   var typographyColor = variantToTypographyColor[variant];
-  return /*#__PURE__*/React.createElement(StyledWrapper, {
-    $align: align,
-    $weight: weight,
+  return jsx(StyledWrapper, {
+    "$align": align,
+    "$weight": weight,
     "aria-label": ariaLabel,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: typographyVariant,
-    color: typographyColor,
-    as: "span"
-  }, displayText));
+    "data-testid": dataTestId,
+    children: jsx(Typography, {
+      variant: typographyVariant,
+      color: typographyColor,
+      as: "span",
+      children: displayText
+    })
+  });
 };
 var templateObject_1$w;
 
-React.createElement;
 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) {
+})(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"])), 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);
 }, 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);
@@ -2665,7 +2675,7 @@ var ProgressBarFill = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarFill",
   componentId: "sc-1nco33q-1"
-})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), 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"])), tokensData.semantic.motion.transition.normal, function (props) {
   var backgroundColor;
   switch (props.$color) {
     case 'success':
@@ -2683,7 +2693,7 @@ var ProgressBarFill = styled.div.withConfig({
 }, 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) {
-  return props.$variant === 'vertical' && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+  return props.$variant === 'vertical' && css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 });
 var ProgressBar = function ProgressBar(_a) {
   var value = _a.value,
@@ -2694,24 +2704,24 @@ var ProgressBar = function ProgressBar(_a) {
     height = _a.height,
     width = _a.width,
     dataTestId = _a["data-testid"];
-  return /*#__PURE__*/React.createElement(ProgressBarContainer, {
-    $variant: variant,
-    $height: height,
-    $width: width,
+  return jsx(ProgressBarContainer, {
+    "$variant": variant,
+    "$height": height,
+    "$width": width,
     "data-testid": dataTestId,
     role: "progressbar",
     "aria-valuenow": Math.min(100, Math.max(0, value)),
     "aria-valuemin": 0,
-    "aria-valuemax": 100
-  }, /*#__PURE__*/React.createElement(ProgressBarFill, {
-    $value: value,
-    $variant: variant,
-    $color: color
-  }));
+    "aria-valuemax": 100,
+    children: jsx(ProgressBarFill, {
+      "$value": value,
+      "$variant": variant,
+      "$color": color
+    })
+  });
 };
-var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$a;
+var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$g, templateObject_5$d, templateObject_6$b, templateObject_7$8;
 
-React.createElement;
 var StyledDivider$1 = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2822,10 +2832,10 @@ var Divider = function Divider(_a) {
     _d = _a.orientation,
     orientation = _d === void 0 ? 'horizontal' : _d,
     dataTestId = _a["data-testid"];
-  return /*#__PURE__*/React.createElement(StyledDivider$1, {
-    $variant: variant,
-    $size: size,
-    $orientation: orientation,
+  return jsx(StyledDivider$1, {
+    "$variant": variant,
+    "$size": size,
+    "$orientation": orientation,
     "data-testid": dataTestId,
     role: "separator",
     "aria-orientation": orientation
@@ -2833,7 +2843,6 @@ var Divider = function Divider(_a) {
 };
 var templateObject_1$u;
 
-React.createElement;
 var StyledStack = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2873,14 +2882,14 @@ var Stack = function Stack(_a) {
     '--stack-gap': gapValue,
     '--stack-wrap': wrap ? 'wrap' : 'nowrap'
   };
-  return /*#__PURE__*/React.createElement(StyledStack, {
+  return jsx(StyledStack, {
     style: cssProps,
-    "data-testid": dataTestId
-  }, children);
+    "data-testid": dataTestId,
+    children: children
+  });
 };
 var templateObject_1$t;
 
-React.createElement;
 var semantic$d = tokensData.semantic,
   base$a = tokensData.base;
 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"])));
@@ -2940,7 +2949,7 @@ var getSizeStyles = function getSizeStyles(size) {
   // medium
   return {
     height: '24px',
-    padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[3]),
+    padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[2]),
     font: semantic$d.typography.small,
     gap: base$a.spacing[1],
     iconSize: 'sm'
@@ -2956,7 +2965,7 @@ var StyledStatusBadge = styled.span.withConfig({
 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
  *
@@ -3025,25 +3034,28 @@ var StatusBadge = function StatusBadge(_a) {
     '--status-badge-font': sizeStyles.font,
     '--status-badge-gap': sizeStyles.gap
   };
-  return /*#__PURE__*/React.createElement(StyledStatusBadge, {
-    $status: status,
-    $size: size,
+  return jsxs(StyledStatusBadge, {
+    "$status": status,
+    "$size": size,
     role: "status",
     "aria-label": ariaLabel || "Status: ".concat(displayLabel),
     "aria-live": liveRegion ? 'polite' : undefined,
     "aria-atomic": liveRegion ? 'true' : undefined,
     "data-testid": dataTestId,
-    style: cssProps
-  }, showIcon && /*#__PURE__*/React.createElement(Icon, {
-    name: statusConfig.icon,
-    size: sizeStyles.iconSize,
-    "aria-hidden": "true"
-  }), displayLabel, /*#__PURE__*/React.createElement(ScreenReaderOnly, null, status, " status"));
+    style: cssProps,
+    children: [showIcon && jsx(Icon, {
+      name: statusConfig.icon,
+      size: sizeStyles.iconSize,
+      iconColor: "inherit",
+      "aria-hidden": "true"
+    }), displayLabel, jsxs(ScreenReaderOnly, {
+      children: [status, " status"]
+    })]
+  });
 };
 StatusBadge.displayName = 'StatusBadge';
-var templateObject_1$s, templateObject_2$m, templateObject_3$j;
+var templateObject_1$s, templateObject_2$m, templateObject_3$k;
 
-React.createElement;
 var semantic$c = tokensData.semantic;
 var StyledTag = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3122,50 +3134,44 @@ var Tag = function Tag(_a) {
     border = _c === void 0 ? true : _c,
     dataTestId = _a["data-testid"],
     props = __rest(_a, ["children", "variant", "border", 'data-testid']);
-  return /*#__PURE__*/React.createElement(StyledTag, _extends({
-    $variant: variant,
-    $border: border,
+  return jsx(StyledTag, __assign({
+    "$variant": variant,
+    "$border": border,
     "data-testid": dataTestId,
     "data-variant": variant,
     "data-border": border,
     role: "status",
     "aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
-  }, props), children);
+  }, props, {
+    children: children
+  }));
 };
 var templateObject_1$r;
 
-React.createElement;
-var StyledCard = styled.div.withConfig({
-  displayName: "AccountCard__StyledCard",
-  componentId: "sc-1erp7zn-0"
-})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  min-width: 300px;\n  min-height: 200px;\n  padding: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: all 0.2s ease;\n  \n  ", "\n"], ["\n  min-width: 300px;\n  min-height: 200px;\n  padding: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: all 0.2s ease;\n  \n  ", "\n"])), tokensData.semantic.spacing.layout.lg, tokensData.semantic.color.background.surface, tokensData.semantic.color.border["default"], tokensData.base.border.radius[5], tokensData.base.shadow[3], function (_a) {
-  var $clickable = _a.$clickable;
-  return $clickable && "\n    cursor: pointer;\n    \n    &:hover {\n      box-shadow: ".concat(tokensData.base.shadow[4], ";\n      transform: translateY(-2px);\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n      outline-offset: 2px;\n    }\n  ");
-});
 var StyledHeader$2 = styled.div.withConfig({
   displayName: "AccountCard__StyledHeader",
-  componentId: "sc-1erp7zn-1"
-})(templateObject_2$l || (templateObject_2$l = __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);
+  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);
 var StyledIconWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledIconWrapper",
-  componentId: "sc-1erp7zn-2"
-})(templateObject_3$i || (templateObject_3$i = __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.interactive, tokensData.base.border.radius[3], tokensData.semantic.color.icon.interactive);
+  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);
 var StyledBalanceSection = styled.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
-  componentId: "sc-1erp7zn-3"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
+  componentId: "sc-1erp7zn-2"
+})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
 var StyledTrendSection = styled.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
-  componentId: "sc-1erp7zn-4"
-})(templateObject_5$c || (templateObject_5$c = __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);
+  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);
 var StyledActions$1 = styled.div.withConfig({
   displayName: "AccountCard__StyledActions",
-  componentId: "sc-1erp7zn-5"
-})(templateObject_6$b || (templateObject_6$b = __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);
+  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);
 var StyledStackWrapper = styled.div.withConfig({
   displayName: "AccountCard__StyledStackWrapper",
-  componentId: "sc-1erp7zn-6"
-})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  height: 100%;\n  min-height: 168px;\n"], ["\n  height: 100%;\n  min-height: 168px;\n"
+  componentId: "sc-1erp7zn-5"
+})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  height: 100%;\n  min-height: 168px;\n"], ["\n  height: 100%;\n  min-height: 168px;\n"
 // Map account types to icon names (using placeholders)
 ])));
 // Map account types to icon names (using placeholders)
@@ -3225,78 +3231,109 @@ var AccountCard = function AccountCard(_a) {
       onClick === null || onClick === void 0 ? void 0 : onClick();
     }
   };
-  return /*#__PURE__*/React.createElement(StyledCard, {
-    $clickable: isClickable,
+  return jsx(Box, {
+    minWidth: "300px",
+    minHeight: "200px",
+    p: "lg",
+    bg: "surface",
+    border: "default",
+    borderRadius: "5",
+    shadow: "3",
+    transition: "all 0.2s ease",
+    cursor: isClickable ? 'pointer' : 'default',
+    hoverShadow: isClickable ? '4' : undefined,
+    hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     tabIndex: isClickable ? 0 : undefined,
     role: isClickable ? 'button' : 'article',
     "aria-label": isClickable ? "".concat(accountName, " account, balance ").concat(balance) : undefined,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(StyledStackWrapper, null, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "none"
-  }, /*#__PURE__*/React.createElement(StyledHeader$2, null, /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    gap: "md",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(StyledIconWrapper, {
-    "aria-label": "".concat(accountType, " account"),
-    role: "img"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: accountIcon,
-    size: "md"
-  })), /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "xs"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h4"
-  }, accountName), accountNumber && /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    color: "subdued"
-  }, "\u2022\u2022\u2022\u2022 ", accountNumber)))), /*#__PURE__*/React.createElement(StyledBalanceSection, null, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "xs"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    color: "subdued"
-  }, "Balance"), /*#__PURE__*/React.createElement(MoneyDisplay, {
-    amount: balance,
-    currency: currency,
-    size: "xlarge",
-    weight: "bold",
-    "data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
-  })), trend && trendValue && /*#__PURE__*/React.createElement(StyledTrendSection, {
-    "aria-label": "Trend ".concat(trend),
-    role: "img"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: trendIcon,
-    size: "xs",
-    iconColor: trendColor
-  }), /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    color: trendColor
-  }, trendValue))), (action || secondaryAction) && /*#__PURE__*/React.createElement(StyledActions$1, null, action && /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      action.onClick();
-    },
-    variant: action.variant || 'primary',
-    iconName: action.icon,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined
-  }, action.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      secondaryAction.onClick();
-    },
-    variant: secondaryAction.variant || 'naked',
-    iconName: secondaryAction.icon,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
-  }, secondaryAction.label)))));
+    "data-testid": dataTestId,
+    children: jsx(StyledStackWrapper, {
+      children: jsxs(Stack, {
+        direction: "column",
+        gap: "none",
+        children: [jsx(StyledHeader$2, {
+          children: jsxs(Stack, {
+            direction: "row",
+            gap: "md",
+            alignItems: "center",
+            children: [jsx(StyledIconWrapper, {
+              "aria-label": "".concat(accountType, " account"),
+              role: "img",
+              children: jsx(Icon, {
+                name: accountIcon,
+                iconColor: "inverse",
+                size: "md"
+              })
+            }), jsxs(Stack, {
+              direction: "column",
+              gap: "none",
+              children: [jsx(Typography, {
+                variant: "h4",
+                children: accountName
+              }), accountNumber && jsxs(Typography, {
+                variant: "caption",
+                color: "subdued",
+                children: ["\u2022\u2022\u2022\u2022 ", accountNumber]
+              })]
+            })]
+          })
+        }), jsxs(StyledBalanceSection, {
+          children: [jsxs(Stack, {
+            direction: "column",
+            gap: "xs",
+            children: [jsx(Typography, {
+              variant: "caption",
+              color: "subdued",
+              children: "Balance"
+            }), jsx(MoneyDisplay, {
+              amount: balance,
+              currency: currency,
+              size: "xlarge",
+              weight: "bold",
+              "data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
+            })]
+          }), trend && trendValue && jsxs(StyledTrendSection, {
+            "aria-label": "Trend ".concat(trend),
+            role: "img",
+            children: [jsx(Icon, {
+              name: trendIcon,
+              size: "xs",
+              iconColor: trendColor
+            }), jsx(Typography, {
+              variant: "caption",
+              color: trendColor,
+              children: trendValue
+            })]
+          })]
+        }), (action || secondaryAction) && jsxs(StyledActions$1, {
+          children: [action && jsx(Button, {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              action.onClick();
+            },
+            variant: action.variant || 'primary',
+            iconName: action.icon,
+            "data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined,
+            children: action.label
+          }), secondaryAction && jsx(Button, {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              secondaryAction.onClick();
+            },
+            variant: secondaryAction.variant || 'naked',
+            iconName: secondaryAction.icon,
+            "data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
+            children: secondaryAction.label
+          })]
+        })]
+      })
+    })
+  });
 };
-var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$b, templateObject_7$9;
+var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$a;
 
-React.createElement;
 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"])));
@@ -3304,7 +3341,7 @@ var fadeIn$1 = keyframes(templateObject_2$k || (templateObject_2$k = __makeTempl
 var StyledOverlay$1 = styled.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"])), fadeIn$1);
+})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"])), fadeIn$1);
 var StyledActionSheet = styled.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
@@ -3316,15 +3353,15 @@ var StyledHeader$1 = styled.div.withConfig({
 var StyledHeaderContent = styled.div.withConfig({
   displayName: "ActionSheet__StyledHeaderContent",
   componentId: "sc-regbol-3"
-})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
 var StyledCloseButton = styled.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " 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]);
+})(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$5 || (templateObject_8$5 = __makeTemplateObject(["\n  padding: ", " 0;\n"], ["\n  padding: ", " 0;\n"])), base$9.spacing[2]);
+})(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"
@@ -3482,59 +3519,75 @@ var ActionSheet = function ActionSheet(_a) {
     return a.destructive;
   });
   var hasDestructive = destructiveIndex >= 0;
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay$1, {
-    onClick: handleOverlayClick
-  }), /*#__PURE__*/React.createElement(StyledActionSheet, {
-    ref: sheetRef,
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-labelledby": title ? 'action-sheet-title' : undefined,
-    "aria-describedby": description ? 'action-sheet-description' : undefined,
-    "data-testid": dataTestId
-  }, (title || description || showCloseButton) && /*#__PURE__*/React.createElement(StyledHeader$1, null, /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: description && title ? 'xs' : 'none'
-  }, title && /*#__PURE__*/React.createElement("div", {
-    id: "action-sheet-title"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h3"
-  }, title)), description && /*#__PURE__*/React.createElement("div", {
-    id: "action-sheet-description"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body",
-    color: "subdued"
-  }, description)))), showCloseButton && /*#__PURE__*/React.createElement(StyledCloseButton, {
-    type: "button",
-    onClick: onClose,
-    "aria-label": "Close"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "close",
-    size: "sm",
-    iconColor: "subdued"
-  }))), /*#__PURE__*/React.createElement(StyledActionsList, null, actions.map(function (action, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: action.id
-    }, hasDestructive && index === destructiveIndex && index > 0 && /*#__PURE__*/React.createElement(StyledDivider, null), /*#__PURE__*/React.createElement(StyledActionButton, {
-      type: "button",
-      onClick: function onClick() {
-        return handleActionClick(action);
-      },
-      disabled: action.disabled,
-      $destructive: action.destructive || false,
-      $disabled: action.disabled || false,
-      "aria-label": action.label
-    }, action.icon && /*#__PURE__*/React.createElement(Icon, {
-      name: action.icon,
-      size: "md",
-      iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
-    }), /*#__PURE__*/React.createElement(Typography, {
-      variant: "body"
-    }, action.label)));
-  })))), document.body);
+  return /*#__PURE__*/createPortal(jsxs(Fragment, {
+    children: [jsx(StyledOverlay$1, {
+      onClick: handleOverlayClick
+    }), jsxs(StyledActionSheet, {
+      ref: sheetRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": title ? 'action-sheet-title' : undefined,
+      "aria-describedby": description ? 'action-sheet-description' : undefined,
+      "data-testid": dataTestId,
+      children: [(title || description || showCloseButton) && jsxs(StyledHeader$1, {
+        children: [jsx(StyledHeaderContent, {
+          children: jsxs(Stack, {
+            direction: "column",
+            gap: description && title ? 'xs' : 'none',
+            children: [title && jsx("div", {
+              id: "action-sheet-title",
+              children: jsx(Typography, {
+                variant: "h3",
+                children: title
+              })
+            }), description && jsx("div", {
+              id: "action-sheet-description",
+              children: jsx(Typography, {
+                variant: "body",
+                color: "subdued",
+                children: description
+              })
+            })]
+          })
+        }), showCloseButton && jsx(StyledCloseButton, {
+          type: "button",
+          onClick: onClose,
+          "aria-label": "Close",
+          children: jsx(Icon, {
+            name: "close",
+            size: "sm",
+            iconColor: "subdued"
+          })
+        })]
+      }), jsx(StyledActionsList, {
+        children: actions.map(function (action, index) {
+          return jsxs("div", {
+            children: [hasDestructive && index === destructiveIndex && index > 0 && jsx(StyledDivider, {}), jsxs(StyledActionButton, {
+              type: "button",
+              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
+              })]
+            })]
+          }, action.id);
+        })
+      })]
+    })]
+  }), document.body);
 };
-var templateObject_1$p, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$3, templateObject_10$2;
+var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$e, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2;
 
-React.createElement;
 var semantic$a = tokensData.semantic,
   base$8 = tokensData.base;
 // Default icons by variant
@@ -3597,7 +3650,7 @@ var StyledIconContainer$1 = styled.div.withConfig({
 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$h || (templateObject_3$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$a.spacing.layout.xs);
 var StyledTitle = styled.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
@@ -3609,11 +3662,11 @@ var StyledMessage = styled.span.withConfig({
 var StyledActions = styled.div.withConfig({
   displayName: "Alert__StyledActions",
   componentId: "sc-18tq5d-5"
-})(templateObject_6$9 || (templateObject_6$9 = __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$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic$a.spacing.layout.sm);
 var StyledDismissButton = styled(IconButton).withConfig({
   displayName: "Alert__StyledDismissButton",
   componentId: "sc-18tq5d-6"
-})(templateObject_7$7 || (templateObject_7$7 = __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$6 || (templateObject_7$6 = __makeTemplateObject(["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n  margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$a.spacing.layout.xs);
 var Alert = function Alert(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'info' : _b,
@@ -3645,36 +3698,45 @@ var Alert = function Alert(_a) {
   var alertTitleColor = variantTitleColors[variant];
   // Determine ARIA role based on variant and aria-live
   var role = variant === 'error' ? 'alert' : 'status';
-  return /*#__PURE__*/React.createElement(StyledAlert, _extends({
+  return jsxs(StyledAlert, __assign({
     role: role,
     "aria-live": ariaLive,
-    $variant: variant,
-    $inline: inline,
+    "$variant": variant,
+    "$inline": inline,
     "data-testid": dataTestId
-  }, props), /*#__PURE__*/React.createElement(StyledIconContainer$1, {
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: iconName,
-    size: "md",
-    iconColor: alertIconColor
-  })), /*#__PURE__*/React.createElement(StyledContent$1, null, title && /*#__PURE__*/React.createElement(StyledTitle, {
-    role: "heading",
-    "aria-level": 6,
-    color: alertTitleColor
-  }, title), /*#__PURE__*/React.createElement(StyledMessage, null, children)), (action || dismissible) && /*#__PURE__*/React.createElement(StyledActions, null, action, dismissible && /*#__PURE__*/React.createElement(StyledDismissButton, {
-    iconName: "close",
-    size: "small",
-    variant: "naked",
-    onClick: handleDismiss,
-    "aria-label": "Dismiss alert",
-    "data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined
-  })));
+  }, props, {
+    children: [jsx(StyledIconContainer$1, {
+      "aria-hidden": "true",
+      children: jsx(Icon, {
+        name: iconName,
+        size: "md",
+        iconColor: alertIconColor
+      })
+    }), jsxs(StyledContent$1, {
+      children: [title && jsx(StyledTitle, {
+        role: "heading",
+        "aria-level": 6,
+        color: alertTitleColor,
+        children: title
+      }), jsx(StyledMessage, {
+        children: children
+      })]
+    }), (action || dismissible) && jsxs(StyledActions, {
+      children: [action, dismissible && jsx(StyledDismissButton, {
+        iconName: "close",
+        size: "small",
+        variant: "naked",
+        onClick: handleDismiss,
+        "aria-label": "Dismiss alert",
+        "data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined
+      })]
+    })]
+  }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$o, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7;
+var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$d, templateObject_5$a, templateObject_6$8, templateObject_7$6;
 
-React.createElement;
-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"
@@ -3682,37 +3744,60 @@ var BreadcrumbNavStyled = styled.nav.withConfig({
 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$i || (templateObject_2$i = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
+var BreadcrumbSeparator = styled.span.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbSeparator",
+  componentId: "sc-7ouzg5-2"
+})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"])));
 var isInternalUrl = function isInternalUrl(url) {
   return url.startsWith('/') && !url.startsWith('http');
 };
 var Breadcrumbs = function Breadcrumbs(_a) {
   var breadcrumbs = _a.breadcrumbs,
     LinkComponent = _a.linkComponent;
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(BreadcrumbNavStyled, {
-    "aria-label": "breadcrumb"
-  }, /*#__PURE__*/React.createElement("ol", null, breadcrumbs.map(function (breadcrumb, index) {
-    return /*#__PURE__*/React.createElement(BreadcrumbStyled, {
-      key: index
-    }, index === breadcrumbs.length - 1 ? /*#__PURE__*/React.createElement(Typography, {
-      variant: "caption"
-    }, breadcrumb.label) : LinkComponent && isInternalUrl(breadcrumb.url) ? /*#__PURE__*/React.createElement(LinkComponent, {
-      href: breadcrumb.url
-    }, /*#__PURE__*/React.createElement(Typography, {
-      variant: "caption"
-    }, breadcrumb.label)) : /*#__PURE__*/React.createElement("a", _extends({
-      href: breadcrumb.url
-    }, !isInternalUrl(breadcrumb.url) && {
-      target: "_blank",
-      rel: "noopener noreferrer"
-    }), /*#__PURE__*/React.createElement(Typography, {
-      variant: "caption"
-    }, breadcrumb.label)));
-  }))));
+  return jsx(Container, {
+    children: jsx(BreadcrumbNavStyled, {
+      "aria-label": "breadcrumb",
+      children: jsx("ol", {
+        children: breadcrumbs.map(function (breadcrumb, index) {
+          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$n, templateObject_2$i, templateObject_3$g;
 
-React.createElement;
 var CardSmallStyled = styled.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
   componentId: "sc-jpcqvd-0"
@@ -3727,40 +3812,49 @@ var CardSmall = function CardSmall(_a) {
   if (!picture || !meta) {
     return null;
   }
-  var content = /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "sm"
-  }, /*#__PURE__*/React.createElement(Picture, {
-    title: title,
-    src: picture,
-    width: 300,
-    height: 300
-  }), /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "xs"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "small"
-  }, title), /*#__PURE__*/React.createElement(Stack, {
+  var content = jsxs(Stack, {
     direction: "column",
-    gap: "none"
-  }, subtitle && /*#__PURE__*/React.createElement(Typography, {
-    variant: "label",
-    color: "subdued"
-  }, subtitle), meta && /*#__PURE__*/React.createElement(Typography, {
-    variant: "label",
-    color: "subdued"
-  }, meta))));
-  return /*#__PURE__*/React.createElement(CardSmallStyled, null, LinkComponent && href ? /*#__PURE__*/React.createElement(LinkComponent, {
-    href: href,
-    "aria-label": title
-  }, content) : /*#__PURE__*/React.createElement("a", {
-    href: href || '#',
-    "aria-label": title
-  }, content));
+    gap: 'sm',
+    children: [jsx(Picture, {
+      title: title,
+      src: picture,
+      width: 300,
+      height: 300
+    }), jsxs(Stack, {
+      direction: "column",
+      gap: 'xs',
+      children: [jsx(Typography, {
+        variant: "small",
+        children: title
+      }), jsxs(Stack, {
+        direction: "column",
+        gap: 'none',
+        children: [subtitle && jsx(Typography, {
+          variant: "label",
+          color: "subdued",
+          children: subtitle
+        }), meta && jsx(Typography, {
+          variant: "label",
+          color: "subdued",
+          children: meta
+        })]
+      })]
+    })]
+  });
+  return jsx(CardSmallStyled, {
+    children: LinkComponent && href ? jsx(LinkComponent, {
+      href: href,
+      "aria-label": title,
+      children: content
+    }) : jsx("a", {
+      href: href || '#',
+      "aria-label": title,
+      children: content
+    })
+  });
 };
 var templateObject_1$m;
 
-React.createElement;
 var border$3 = tokensData.base.border;
 var CardLargeStyled = styled.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
@@ -3775,40 +3869,48 @@ var CardLarge = function CardLarge(_a) {
     picture = _a.picture,
     onImageClick = _a.onImageClick,
     imageHref = _a.imageHref;
-  return /*#__PURE__*/React.createElement(CardLargeStyled, null, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "md"
-  }, /*#__PURE__*/React.createElement(Picture, {
-    title: title,
-    src: picture,
-    onClick: onImageClick,
-    href: imageHref
-  }), /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: "xs"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "xs"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h5"
-  }, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
-    variant: "small",
-    color: "subdued"
-  }, subtitle), excerpt && /*#__PURE__*/React.createElement(Typography, {
-    variant: "body"
-  }, excerpt)), /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    alignItems: "center",
-    gap: "xs"
-  }, Array.isArray(labels) && labels.map(function (label, index) {
-    return /*#__PURE__*/React.createElement(Chip, {
-      key: index,
-      title: label,
-      variant: "default"
-    });
-  })))));
+  return jsx(CardLargeStyled, {
+    children: jsxs(Stack, {
+      direction: "column",
+      gap: "md",
+      children: [jsx(Picture, {
+        title: title,
+        src: picture,
+        onClick: onImageClick,
+        href: imageHref
+      }), jsxs(Stack, {
+        direction: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: "xs",
+        children: [jsxs(Stack, {
+          direction: "column",
+          gap: "xs",
+          children: [jsx(Typography, {
+            variant: "h5",
+            children: title
+          }), subtitle && jsx(Typography, {
+            variant: "small",
+            color: "subdued",
+            children: subtitle
+          }), excerpt && jsx(Typography, {
+            variant: "body",
+            children: excerpt
+          })]
+        }), jsx(Stack, {
+          direction: "row",
+          alignItems: "center",
+          gap: "xs",
+          children: Array.isArray(labels) && labels.map(function (label, index) {
+            return jsx(Chip, {
+              title: label,
+              variant: "default"
+            }, index);
+          })
+        })]
+      })]
+    })
+  });
 };
 var templateObject_1$l;
 
@@ -3894,7 +3996,6 @@ var StyledCheckboxLabel = styled.span.withConfig({
 });
 var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$c;
 
-React.createElement;
 var StyledFieldContainer$3 = styled.div.withConfig({
   displayName: "Checkbox__StyledFieldContainer",
   componentId: "sc-vquz3v-0"
@@ -3983,41 +4084,46 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
       inputRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
-  return /*#__PURE__*/React.createElement(StyledFieldContainer$3, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, {
-    $disabled: disabled,
-    $labelPosition: labelPosition
-  }, /*#__PURE__*/React.createElement(HiddenCheckboxInput, _extends({
-    ref: inputRef,
-    type: "checkbox",
-    id: id,
-    checked: checked,
-    disabled: disabled,
-    onChange: onChange,
-    "aria-describedby": describedBy || undefined,
-    "aria-invalid": error ? true : undefined,
-    $state: state,
-    $checked: checked,
-    $indeterminate: indeterminate
-  }, rest)), /*#__PURE__*/React.createElement(StyledCheckbox, {
-    $state: state,
-    $checked: checked,
-    $indeterminate: indeterminate,
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
-    $disabled: disabled
-  }, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$4, {
-    id: helperTextId
-  }, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$4, {
-    id: errorId,
-    $error: true,
-    role: "alert",
-    "aria-live": "polite"
-  }, error));
+  return jsxs(StyledFieldContainer$3, {
+    children: [jsxs(StyledCheckboxContainer, {
+      "$disabled": disabled,
+      "$labelPosition": labelPosition,
+      children: [jsx(HiddenCheckboxInput, __assign({
+        ref: inputRef,
+        type: "checkbox",
+        id: id,
+        checked: checked,
+        disabled: disabled,
+        onChange: onChange,
+        "aria-describedby": describedBy || undefined,
+        "aria-invalid": error ? true : undefined,
+        "$state": state,
+        "$checked": checked,
+        "$indeterminate": indeterminate
+      }, rest)), jsx(StyledCheckbox, {
+        "$state": state,
+        "$checked": checked,
+        "$indeterminate": indeterminate,
+        "aria-hidden": "true"
+      }), jsx(StyledCheckboxLabel, {
+        "$disabled": disabled,
+        children: label
+      })]
+    }), helperText && !error && jsx(StyledHelperText$4, {
+      id: helperTextId,
+      children: helperText
+    }), error && jsx(StyledHelperText$4, {
+      id: errorId,
+      "$error": true,
+      role: "alert",
+      "aria-live": "polite",
+      children: error
+    })]
+  });
 });
 Checkbox.displayName = 'Checkbox';
 var templateObject_1$j, templateObject_2$g;
 
-React.createElement;
 var ChipGroupWrapper = styled.div.withConfig({
   displayName: "ChipGroup__ChipGroupWrapper",
   componentId: "sc-ae049w-0"
@@ -4027,22 +4133,22 @@ var ChipGroup = function ChipGroup(_a) {
     _b = _a.variant,
     variant = _b === void 0 ? 'default' : _b,
     dataTestId = _a["data-testid"];
-  return /*#__PURE__*/React.createElement(ChipGroupWrapper, {
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    gap: "sm"
-  }, labels && labels.map(function (title, index) {
-    return /*#__PURE__*/React.createElement(Chip, {
-      key: index,
-      title: title,
-      variant: variant
-    });
-  })));
+  return jsx(ChipGroupWrapper, {
+    "data-testid": dataTestId,
+    children: jsx(Stack, {
+      direction: "row",
+      gap: "sm",
+      children: labels && labels.map(function (title, index) {
+        return jsx(Chip, {
+          title: title,
+          variant: variant
+        }, index);
+      })
+    })
+  });
 };
 var templateObject_1$i;
 
-React.createElement;
 var _a$2 = tokensData.semantic,
   color$1 = _a$2.color,
   border$2 = _a$2.border,
@@ -4106,13 +4212,16 @@ var CopyButton = function CopyButton(_a) {
       }
     };
   }, []);
-  return /*#__PURE__*/React.createElement(CopyButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-    variant: "secondary",
-    size: "small",
-    iconName: "copy",
-    onClick: handleCopy,
-    "data-testid": "copy-button"
-  }, copied ? 'Copied!' : 'Copy'));
+  return jsx(CopyButtonWrapper, {
+    children: jsx(Button, {
+      variant: "secondary",
+      size: "small",
+      iconName: "copy",
+      onClick: handleCopy,
+      "data-testid": "copy-button",
+      children: copied ? 'Copied!' : 'Copy'
+    })
+  });
 };
 /**
  * CodeBlock component for displaying formatted code with optional copy functionality
@@ -4128,16 +4237,18 @@ var CodeBlock = function CodeBlock(_a) {
     showCopyButton = _b === void 0 ? true : _b,
     onCopy = _a.onCopy,
     testId = _a["data-testid"];
-  return /*#__PURE__*/React.createElement(CodeBlockWrapper, null, /*#__PURE__*/React.createElement(StyledCodeBlock, {
-    "data-testid": testId
-  }, children), showCopyButton && /*#__PURE__*/React.createElement(CopyButton, {
-    text: children,
-    onCopy: onCopy
-  }));
+  return jsxs(CodeBlockWrapper, {
+    children: [jsx(StyledCodeBlock, {
+      "data-testid": testId,
+      children: children
+    }), showCopyButton && jsx(CopyButton, {
+      text: children,
+      onCopy: onCopy
+    })]
+  });
 };
 var templateObject_1$h, templateObject_2$f, templateObject_3$e;
 
-React.createElement;
 var StyledHeader = styled.div.withConfig({
   displayName: "DateGroup__StyledHeader",
   componentId: "sc-9nfm1f-0"
@@ -4193,36 +4304,43 @@ var DateGroup = function DateGroup(_a) {
     dataTestId = _a["data-testid"];
   // Determine total variant based on amount (positive = income, negative = expense)
   var totalVariant = totalAmount && totalAmount !== 0 ? totalAmount > 0 ? 'positive' : 'negative' : 'default';
-  return /*#__PURE__*/React.createElement("div", {
+  return jsxs("div", {
     "data-testid": dataTestId,
     role: "group",
-    "aria-label": "Transactions for ".concat(date)
-  }, /*#__PURE__*/React.createElement(StyledHeader, {
-    $sticky: sticky,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined
-  }, /*#__PURE__*/React.createElement(StyledLeftSection, null, /*#__PURE__*/React.createElement(DateFormatter, {
-    dateString: typeof date === 'string' ? date : date.toISOString(),
-    mode: format,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
-  }), showCount && count !== undefined && /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    color: "subdued",
-    "data-testid": dataTestId ? "".concat(dataTestId, "-count") : undefined
-  }, "(", count, " ", count === 1 ? 'item' : 'items', ")")), /*#__PURE__*/React.createElement(StyledRightSection, null, showTotal && totalAmount !== undefined && /*#__PURE__*/React.createElement(MoneyDisplay, {
-    amount: totalAmount,
-    currency: currency,
-    variant: totalVariant,
-    size: "small",
-    weight: "medium",
-    showSign: true,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-total") : undefined
-  }))), /*#__PURE__*/React.createElement(StyledContent, {
-    "data-testid": dataTestId ? "".concat(dataTestId, "-content") : undefined
-  }, children));
+    "aria-label": "Transactions for ".concat(date),
+    children: [jsxs(StyledHeader, {
+      "$sticky": sticky,
+      "data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined,
+      children: [jsxs(StyledLeftSection, {
+        children: [jsx(DateFormatter, {
+          dateString: typeof date === 'string' ? date : date.toISOString(),
+          mode: format,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
+        }), showCount && count !== undefined && jsxs(Typography, {
+          variant: "caption",
+          color: "subdued",
+          "data-testid": dataTestId ? "".concat(dataTestId, "-count") : undefined,
+          children: ["(", count, " ", count === 1 ? 'item' : 'items', ")"]
+        })]
+      }), jsx(StyledRightSection, {
+        children: showTotal && totalAmount !== undefined && jsx(MoneyDisplay, {
+          amount: totalAmount,
+          currency: currency,
+          variant: totalVariant,
+          size: "small",
+          weight: "medium",
+          showSign: true,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-total") : undefined
+        })
+      })]
+    }), jsx(StyledContent, {
+      "data-testid": dataTestId ? "".concat(dataTestId, "-content") : undefined,
+      children: children
+    })]
+  });
 };
 var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
 
-React.createElement;
 var semantic$9 = tokensData.semantic;
 var StyledContainer$1 = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -4285,53 +4403,63 @@ var EmptyState = function EmptyState(_a) {
     }
     if (illustration !== 'custom') {
       var iconName = illustrationToIcon[illustration];
-      return /*#__PURE__*/React.createElement(Icon, {
+      return jsx(Icon, {
         name: iconName,
         size: "2xl"
       });
     }
     return null;
   };
-  return /*#__PURE__*/React.createElement(StyledContainer$1, {
-    $size: size,
+  return jsxs(StyledContainer$1, {
+    "$size": size,
     "data-testid": dataTestId,
     role: "status",
-    "aria-label": "Empty state: ".concat(title)
-  }, /*#__PURE__*/React.createElement(StyledIllustration, {
-    $size: size,
-    $variant: variant,
-    "aria-hidden": "true"
-  }, renderIllustration()), /*#__PURE__*/React.createElement(StyledTextContainer, null, /*#__PURE__*/React.createElement(Typography, {
-    variant: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
-    color: variant === 'error' ? 'error' : 'default',
-    as: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3'
-  }, title), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: semantic$9.spacing.layout.md
-    }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body",
-    color: "subdued"
-  }, description))), (action || secondaryAction) && /*#__PURE__*/React.createElement(Box, {
-    width: "100%",
-    maxWidth: "300px"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "sm"
-  }, action && /*#__PURE__*/React.createElement(Button, {
-    variant: action.variant || 'primary',
-    onClick: action.onClick,
-    iconName: action.icon,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-primary-action") : undefined
-  }, action.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
-    variant: "naked",
-    onClick: secondaryAction.onClick,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
-  }, secondaryAction.label))));
+    "aria-label": "Empty state: ".concat(title),
+    children: [jsx(StyledIllustration, {
+      "$size": size,
+      "$variant": variant,
+      "aria-hidden": "true",
+      children: renderIllustration()
+    }), jsxs(StyledTextContainer, {
+      children: [jsx(Typography, {
+        variant: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
+        color: variant === 'error' ? 'error' : 'default',
+        as: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
+        children: title
+      }), jsx("div", {
+        style: {
+          marginTop: semantic$9.spacing.layout.md
+        },
+        children: jsx(Typography, {
+          variant: "body",
+          color: "subdued",
+          children: description
+        })
+      })]
+    }), (action || secondaryAction) && jsx(Box, {
+      width: "100%",
+      maxWidth: "300px",
+      children: jsxs(Stack, {
+        direction: "column",
+        gap: "sm",
+        children: [action && jsx(Button, {
+          variant: action.variant || 'primary',
+          onClick: action.onClick,
+          iconName: action.icon,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-primary-action") : undefined,
+          children: action.label
+        }), secondaryAction && jsx(Button, {
+          variant: "naked",
+          onClick: secondaryAction.onClick,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
+          children: secondaryAction.label
+        })]
+      })
+    })]
+  });
 };
 var templateObject_1$f, templateObject_2$d, templateObject_3$c;
 
-React.createElement;
 var _a$1 = tokensData.base,
   spacing$1 = _a$1.spacing,
   border$1 = _a$1.border;
@@ -4366,37 +4494,53 @@ var FeatureBlock = function FeatureBlock(_a) {
     readMoreHref = _a.readMoreHref,
     _c = _a.readMoreText,
     readMoreText = _c === void 0 ? "Read more" : _c;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FeatureBlockStyled, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Picture, {
-    title: title,
-    src: coverImage
-  })), /*#__PURE__*/React.createElement(ContentSection, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "md"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h3"
-  }, title), /*#__PURE__*/React.createElement(DateFormatter, {
-    dateString: date
-  }), /*#__PURE__*/React.createElement(Typography, {
-    variant: "small"
-  }, excerpt), /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    gap: "xs"
-  }, Array.isArray(labels) && labels.map(function (label, index) {
-    return /*#__PURE__*/React.createElement(Chip, {
-      key: index,
-      title: label,
-      variant: "default"
-    });
-  })), (onReadMore || readMoreHref) && /*#__PURE__*/React.createElement(ButtonWrapper, null, readMoreHref ? /*#__PURE__*/React.createElement(Button, {
-    purpose: "link",
-    url: readMoreHref
-  }, readMoreText) : /*#__PURE__*/React.createElement(Button, {
-    onClick: onReadMore
-  }, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
+  return jsxs(Fragment, {
+    children: [jsxs(FeatureBlockStyled, {
+      children: [jsx(ImageWrapper, {
+        children: jsx(Picture, {
+          title: title,
+          src: coverImage
+        })
+      }), jsx(ContentSection, {
+        children: jsx(ContentWrapper, {
+          children: jsxs(Stack, {
+            direction: "column",
+            gap: "md",
+            children: [jsx(Typography, {
+              variant: "h3",
+              children: title
+            }), jsx(DateFormatter, {
+              dateString: date
+            }), jsx(Typography, {
+              variant: "small",
+              children: excerpt
+            }), jsx(Stack, {
+              direction: "row",
+              gap: "xs",
+              children: Array.isArray(labels) && labels.map(function (label, index) {
+                return jsx(Chip, {
+                  title: label,
+                  variant: "default"
+                }, index);
+              })
+            }), (onReadMore || readMoreHref) && jsx(ButtonWrapper, {
+              children: readMoreHref ? jsx(Button, {
+                purpose: "link",
+                url: readMoreHref,
+                children: readMoreText
+              }) : jsx(Button, {
+                onClick: onReadMore,
+                children: readMoreText
+              })
+            })]
+          })
+        })
+      })]
+    }), jsx(Divider, {})]
+  });
 };
 var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
 
-React.createElement;
 var _a = tokensData.base,
   spacing = _a.spacing,
   shadow = _a.shadow,
@@ -4472,7 +4616,7 @@ var DropdownOption = styled.button.withConfig({
 var StyledHelperText$3 = styled.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"
-})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), typography.caption, function (_a) {
+})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), typography.caption, function (_a) {
   var $hasError = _a.$hasError;
   return $hasError ? color.text.error : color.text.subdued;
 }, spacing[2]);
@@ -4495,8 +4639,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;
   });
@@ -4589,59 +4733,68 @@ var Dropdown = function Dropdown(_a) {
     setIsOpen(false);
     setFocusedIndex(-1);
   };
-  return /*#__PURE__*/React.createElement(DropdownContainer, {
+  return jsxs(DropdownContainer, {
     ref: dropdownRef,
-    className: className
-  }, label && /*#__PURE__*/React.createElement("label", {
-    htmlFor: dropdownId,
-    style: {
-      display: 'block',
-      marginBottom: spacing[2]
-    }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "label"
-  }, label)), /*#__PURE__*/React.createElement(DropdownTrigger, {
-    id: dropdownId,
-    $isOpen: isOpen,
-    $hasError: hasError,
-    onClick: handleTriggerClick,
-    disabled: disabled,
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
-    "aria-invalid": hasError,
-    "aria-describedby": describedBy
-  }, /*#__PURE__*/React.createElement("span", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/React.createElement(DropdownIcon, {
-    $isOpen: isOpen
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "arrowDown",
-    iconColor: disabled ? 'disabled' : 'subdued'
-  }))), /*#__PURE__*/React.createElement(DropdownMenu, {
-    $isOpen: isOpen,
-    role: "listbox",
-    "aria-labelledby": dropdownId
-  }, options.map(function (option, index) {
-    return /*#__PURE__*/React.createElement(DropdownOption, {
-      key: option.id,
-      $isSelected: option.id === value,
-      $isFocused: index === focusedIndex,
-      onClick: function onClick() {
-        return handleOptionClick(option.id);
+    className: className,
+    children: [label && jsx("label", {
+      htmlFor: dropdownId,
+      style: {
+        display: 'block',
+        marginBottom: spacing[2]
       },
-      role: "option",
-      "aria-selected": option.id === value
-    }, option.label);
-  })), error && /*#__PURE__*/React.createElement(StyledHelperText$3, {
-    id: errorId,
-    role: "alert",
-    "aria-live": "polite",
-    $hasError: true
-  }, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$3, {
-    id: helperId
-  }, helperText));
+      children: jsx(Typography, {
+        variant: "label",
+        children: label
+      })
+    }), jsxs(DropdownTrigger, {
+      id: dropdownId,
+      "$isOpen": isOpen,
+      "$hasError": hasError,
+      onClick: handleTriggerClick,
+      disabled: disabled,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-invalid": hasError,
+      "aria-describedby": describedBy,
+      children: [jsx("span", {
+        children: selectedOption ? selectedOption.label : placeholder
+      }), jsx(DropdownIcon, {
+        "$isOpen": isOpen,
+        children: jsx(Icon, {
+          name: "arrowDown",
+          iconColor: disabled ? 'disabled' : 'subdued'
+        })
+      })]
+    }), jsx(DropdownMenu, {
+      "$isOpen": isOpen,
+      role: "listbox",
+      "aria-labelledby": dropdownId,
+      children: options.map(function (option, index) {
+        return jsx(DropdownOption, {
+          "$isSelected": option.id === value,
+          "$isFocused": index === focusedIndex,
+          onClick: function onClick() {
+            return handleOptionClick(option.id);
+          },
+          role: "option",
+          "aria-selected": option.id === value,
+          children: option.label
+        }, option.id);
+      })
+    }), error && jsx(StyledHelperText$3, {
+      id: errorId,
+      role: "alert",
+      "aria-live": "polite",
+      "$hasError": true,
+      children: error
+    }), helperText && !error && jsx(StyledHelperText$3, {
+      id: helperId,
+      children: helperText
+    })]
+  });
 };
-var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$8;
+var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
 
-React.createElement;
 var semantic$8 = tokensData.semantic;
 var StyledList = styled.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -4662,18 +4815,19 @@ var List = function List(_a) {
     className = _a.className,
     dataTestId = _a["data-testid"],
     props = __rest(_a, ["children", "dividers", "spacing", "className", 'data-testid']);
-  return /*#__PURE__*/React.createElement(StyledList, _extends({
-    $dividers: dividers,
-    $spacing: spacing,
+  return jsx(StyledList, __assign({
+    "$dividers": dividers,
+    "$spacing": spacing,
     className: className,
     "data-testid": dataTestId,
     role: "list"
-  }, props), children);
+  }, props, {
+    children: children
+  }));
 };
 List.displayName = 'List';
 var templateObject_1$c;
 
-React.createElement;
 var semantic$7 = tokensData.semantic,
   base$7 = tokensData.base;
 var StyledListItem = styled.li.withConfig({
@@ -4731,7 +4885,7 @@ var StyledChevronIcon = styled.div.withConfig({
   },
   displayName: "ListItem__StyledChevronIcon",
   componentId: "sc-1wzzt21-5"
-})(templateObject_6$7 || (templateObject_6$7 = __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) {
+})(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';
 });
@@ -4741,7 +4895,7 @@ var StyledExpandedContent = styled.div.withConfig({
   },
   displayName: "ListItem__StyledExpandedContent",
   componentId: "sc-1wzzt21-6"
-})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  overflow: hidden;\n  transition: max-height 200ms ease-out, opacity 200ms ease-out;\n  max-height: ", ";\n  opacity: ", ";\n  \n  ", "\n"], ["\n  overflow: hidden;\n  transition: max-height 200ms ease-out, opacity 200ms ease-out;\n  max-height: ", ";\n  opacity: ", ";\n  \n  ", "\n"])), function (_a) {
+})(templateObject_7$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) {
@@ -4774,9 +4928,14 @@ var ListItem = function ListItem(_a) {
     children = _a.children,
     className = _a.className,
     dataTestId = _a["data-testid"],
-    props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "spacing", "children", "className", 'data-testid']);
-  var isInteractive = interactive || expandable;
-  var role = isInteractive ? 'button' : undefined;
+    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;
@@ -4789,54 +4948,72 @@ var ListItem = function ListItem(_a) {
     }
   };
   var handleKeyDown = function handleKeyDown(event) {
+    if (customOnKeyDown) {
+      customOnKeyDown(event);
+      return;
+    }
     if (disabled) return;
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       handleClick();
     }
   };
-  return /*#__PURE__*/React.createElement(StyledListItem, _extends({
-    $interactive: isInteractive,
-    $disabled: disabled,
-    $selected: selected,
-    $spacing: spacing,
+  return jsxs(StyledListItem, __assign({
+    "$interactive": isInteractive,
+    "$disabled": disabled,
+    "$selected": selected,
+    "$spacing": spacing,
     className: className,
     "data-testid": dataTestId,
-    role: "listitem"
-  }, props), /*#__PURE__*/React.createElement(StyledItemContent, {
-    $interactive: isInteractive,
-    $disabled: disabled,
-    $selected: selected,
-    $spacing: spacing,
-    role: role,
-    "aria-expanded": ariaExpanded,
-    "aria-disabled": ariaDisabled,
-    "aria-current": ariaCurrent,
-    tabIndex: isInteractive && !disabled ? 0 : undefined,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  }, icon && /*#__PURE__*/React.createElement(StyledIconContainer, {
-    "aria-hidden": "true"
-  }, icon), /*#__PURE__*/React.createElement(StyledTextContent, null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body",
-    color: "default"
-  }, primary), secondary && /*#__PURE__*/React.createElement(Typography, {
-    variant: "small",
-    color: "subdued"
-  }, secondary)), /*#__PURE__*/React.createElement(StyledRightContent, null, badge, expandable && /*#__PURE__*/React.createElement(StyledChevronIcon, {
-    $expanded: expanded,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "caretDown",
-    size: "sm"
-  })))), expandable && children && /*#__PURE__*/React.createElement(StyledExpandedContent, {
-    $spacing: spacing,
-    $expanded: expanded,
-    "aria-hidden": !expanded
-  }, children));
+    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$7, templateObject_7$6;
+var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5;
 
 var input = tokensData.component.input;
 var StyledInputBase = styled.input.withConfig({
@@ -4879,7 +5056,6 @@ var StyledTextAreaBase = styled.textarea.withConfig({
 })(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: 120px;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5;\n"], ["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: 120px;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5;\n"])), StyledInputBase);
 var templateObject_1$a, templateObject_2$9;
 
-React.createElement;
 var semantic$6 = tokensData.semantic,
   base$6 = tokensData.base;
 var StyledFieldContainer$2 = styled.div.withConfig({
@@ -4905,11 +5081,11 @@ var StyledNumberInput = styled(StyledInputBase).withConfig({
 var StyledStepperContainer = styled.div.withConfig({
   displayName: "NumberInput__StyledStepperContainer",
   componentId: "sc-qotc3w-5"
-})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), base$6.spacing[2], base$6.spacing[2]);
+})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), base$6.spacing[2], base$6.spacing[2]);
 var StyledHelperText$2 = styled.div.withConfig({
   displayName: "NumberInput__StyledHelperText",
   componentId: "sc-qotc3w-6"
-})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
  *
@@ -5070,63 +5246,71 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var isDecrementDisabled = disabled || min !== undefined && value !== '' && typeof value === 'number' && value <= min;
   // Build aria-describedby
   var ariaDescribedByIds = [ariaDescribedBy, helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined;
-  return /*#__PURE__*/React.createElement(StyledFieldContainer$2, null, label && /*#__PURE__*/React.createElement(StyledLabel$3, {
-    htmlFor: id,
-    "data-disabled": disabled
-  }, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$2, {
-    "aria-label": "required"
-  }, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$2, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
-    ref: ref,
-    id: id,
-    type: "text",
-    inputMode: "decimal",
-    value: value !== undefined ? formatValue(value) : undefined,
-    defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    disabled: disabled,
-    required: required,
-    placeholder: placeholder,
-    $hasError: !!error,
-    $disabled: disabled,
-    "aria-label": ariaLabel || label,
-    "aria-invalid": !!error,
-    "aria-describedby": ariaDescribedByIds,
-    "aria-required": required,
-    "data-testid": testId,
-    role: "spinbutton",
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-valuenow": typeof value === 'number' ? value : undefined
-  }, rest)), /*#__PURE__*/React.createElement(StyledStepperContainer, null, /*#__PURE__*/React.createElement(IconButton, {
-    iconName: "caretUp",
-    variant: "secondary",
-    size: "small",
-    onClick: handleIncrement,
-    disabled: isIncrementDisabled,
-    "aria-label": "Increment value",
-    tabIndex: -1,
-    type: "button"
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    iconName: "caretDown",
-    variant: "secondary",
-    size: "small",
-    onClick: handleDecrement,
-    disabled: isDecrementDisabled,
-    "aria-label": "Decrement value",
-    tabIndex: -1,
-    type: "button"
-  }))), (helperText || error) && /*#__PURE__*/React.createElement(StyledHelperText$2, {
-    id: error ? errorId : helperId,
-    $isError: !!error,
-    role: error ? 'alert' : undefined,
-    "aria-live": error ? 'polite' : undefined
-  }, error || helperText));
+  return jsxs(StyledFieldContainer$2, {
+    children: [label && jsxs(StyledLabel$3, {
+      htmlFor: id,
+      "data-disabled": disabled,
+      children: [label, required && jsx(StyledRequiredIndicator$2, {
+        "aria-label": "required",
+        children: "*"
+      })]
+    }), jsxs(StyledInputWrapper$2, {
+      children: [jsx(StyledNumberInput, __assign({
+        ref: ref,
+        id: id,
+        type: "text",
+        inputMode: "decimal",
+        value: value !== undefined ? formatValue(value) : undefined,
+        defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        disabled: disabled,
+        required: required,
+        placeholder: placeholder,
+        "$hasError": !!error,
+        "$disabled": disabled,
+        "aria-label": ariaLabel || label,
+        "aria-invalid": !!error,
+        "aria-describedby": ariaDescribedByIds,
+        "aria-required": required,
+        "data-testid": testId,
+        role: "spinbutton",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": typeof value === 'number' ? value : undefined
+      }, rest)), jsxs(StyledStepperContainer, {
+        children: [jsx(IconButton, {
+          iconName: "caretUp",
+          variant: "secondary",
+          size: "small",
+          onClick: handleIncrement,
+          disabled: isIncrementDisabled,
+          "aria-label": "Increment value",
+          tabIndex: -1,
+          type: "button"
+        }), jsx(IconButton, {
+          iconName: "caretDown",
+          variant: "secondary",
+          size: "small",
+          onClick: handleDecrement,
+          disabled: isDecrementDisabled,
+          "aria-label": "Decrement value",
+          tabIndex: -1,
+          type: "button"
+        })]
+      })]
+    }), (helperText || error) && jsx(StyledHelperText$2, {
+      id: error ? errorId : helperId,
+      "$isError": !!error,
+      role: error ? 'alert' : undefined,
+      "aria-live": error ? 'polite' : undefined,
+      children: error || helperText
+    })]
+  });
 });
 NumberInput.displayName = 'NumberInput';
-var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$6, templateObject_7$5;
+var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$4;
 
-React.createElement;
 var PageTitleStyled = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -5142,27 +5326,30 @@ var PageTitle = function PageTitle(_a) {
     _b = _a.hasBackButton,
     hasBackButton = _b === void 0 ? false : _b,
     subtitle = _a.subtitle;
-  return /*#__PURE__*/React.createElement(PageTitleStyled, {
-    $hasBackButton: hasBackButton
-  }, hasBackButton && /*#__PURE__*/React.createElement(IconButton, {
-    iconName: "back",
-    size: "large",
-    variant: "naked",
-    url: "/music",
-    "aria-label": "Go back to music page"
-  }), /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "md"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h1"
-  }, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    color: "subdued"
-  }, subtitle)));
+  return jsxs(PageTitleStyled, {
+    "$hasBackButton": hasBackButton,
+    children: [hasBackButton && jsx(IconButton, {
+      iconName: 'back',
+      size: 'large',
+      variant: 'naked',
+      url: '/music',
+      "aria-label": 'Go back to music page'
+    }), jsxs(Stack, {
+      direction: 'column',
+      gap: "md",
+      children: [jsx(Typography, {
+        variant: "h1",
+        children: title
+      }), subtitle && jsx(Typography, {
+        variant: 'caption',
+        color: 'subdued',
+        children: subtitle
+      })]
+    })]
+  });
 };
 var templateObject_1$8;
 
-React.createElement;
 var semantic$5 = tokensData.semantic,
   base$5 = tokensData.base;
 var StyledFieldContainer$1 = styled.div.withConfig({
@@ -5191,7 +5378,7 @@ var StyledInputWrapper$1 = styled.div.withConfig({
 var StyledToggleButton = styled.div.withConfig({
   displayName: "PasswordField__StyledToggleButton",
   componentId: "sc-1p15zk0-5"
-})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"
+})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"
 /**
  * PasswordField component for secure password input with visibility toggle
  *
@@ -5244,51 +5431,61 @@ var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
   var togglePasswordVisibility = function togglePasswordVisibility() {
     setShowPassword(!showPassword);
   };
-  return /*#__PURE__*/React.createElement(StyledFieldContainer$1, null, label && /*#__PURE__*/React.createElement(StyledLabel$2, {
-    htmlFor: id,
-    "data-disabled": disabled
-  }, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
-    "aria-label": "required"
-  }, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$1, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
-    ref: ref,
-    id: id,
-    type: showPassword ? 'text' : 'password',
-    disabled: disabled,
-    required: required,
-    "aria-required": required,
-    "aria-invalid": hasError,
-    "aria-describedby": describedBy,
-    $hasError: hasError,
-    $disabled: disabled,
-    "data-testid": dataTestId,
-    style: {
-      paddingRight: showToggle ? '3rem' : undefined
-    }
-  }, inputProps)), showToggle && /*#__PURE__*/React.createElement(StyledToggleButton, null, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "naked",
-    size: "small",
-    iconName: showPassword ? 'viewHide' : 'view',
-    onClick: togglePasswordVisibility,
-    disabled: disabled,
-    "aria-label": showPassword ? 'Hide password' : 'Show password',
-    "aria-pressed": showPassword,
-    type: "button",
-    tabIndex: -1
-  }))), error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
-    id: errorId,
-    role: "alert",
-    "aria-live": "polite",
-    $hasError: true
-  }, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
-    id: helperId
-  }, helperText));
+  return jsxs(StyledFieldContainer$1, {
+    children: [label && jsxs(StyledLabel$2, {
+      htmlFor: id,
+      "data-disabled": disabled,
+      children: [label, required && jsx(StyledRequiredIndicator$1, {
+        "aria-label": "required",
+        children: "*"
+      })]
+    }), jsxs(StyledInputWrapper$1, {
+      children: [jsx(StyledInputBase, __assign({
+        ref: ref,
+        id: id,
+        type: showPassword ? 'text' : 'password',
+        disabled: disabled,
+        required: required,
+        "aria-required": required,
+        "aria-invalid": hasError,
+        "aria-describedby": describedBy,
+        "$hasError": hasError,
+        "$disabled": disabled,
+        "data-testid": dataTestId,
+        style: {
+          paddingRight: showToggle ? '3rem' : undefined
+        }
+      }, inputProps)), showToggle && jsx(StyledToggleButton, {
+        children: jsx(IconButton, {
+          variant: "naked",
+          size: "small",
+          iconName: showPassword ? 'viewHide' : 'view',
+          onClick: togglePasswordVisibility,
+          disabled: disabled,
+          "aria-label": showPassword ? 'Hide password' : 'Show password',
+          "aria-pressed": showPassword,
+          type: "button",
+          tabIndex: -1
+        })
+      })]
+    }), error && jsx(StyledHelperText$1, {
+      id: errorId,
+      role: "alert",
+      "aria-live": "polite",
+      "$hasError": true,
+      children: error
+    }), helperText && !error && jsx(StyledHelperText$1, {
+      id: helperId,
+      children: helperText
+    })]
+  });
 });
 PasswordField.displayName = 'PasswordField';
-var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$5;
+var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4;
 
-React.createElement;
 var semantic$4 = tokensData.semantic,
-  base$4 = tokensData.base;
+  base$4 = tokensData.base,
+  component = tokensData.component;
 var StyledSearchContainer = styled.div.withConfig({
   displayName: "SearchField__StyledSearchContainer",
   componentId: "sc-qhz9i8-0"
@@ -5296,39 +5493,23 @@ var StyledSearchContainer = styled.div.withConfig({
 var StyledInputWrapper = styled.div.withConfig({
   displayName: "SearchField__StyledInputWrapper",
   componentId: "sc-qhz9i8-1"
-})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], semantic$4.motion.hover, function (props) {
-  return props.$isFocused && "\n    border-color: ".concat(semantic$4.color.border.interactive, ";\n    box-shadow: 0 0 0 ").concat(base$4.border.width[2], " ").concat(semantic$4.color.background['interactive-subtle'], ";\n  ");
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, function (props) {
+  return props.$isFocused && "\n    border-color: ".concat(component.input.focus.borderColor, ";\n    outline: ").concat(component.input.focus.outline, ";\n    outline-offset: ").concat(component.input.focus.outlineOffset, ";\n  ");
 }, function (props) {
-  return props.$disabled && "\n    background-color: ".concat(semantic$4.color.background.disabled, ";\n    cursor: not-allowed;\n  ");
-}, semantic$4.color.border.strong);
+  return props.$disabled && "\n    background-color: ".concat(component.input.disabled.backgroundColor, ";\n    border-color: ").concat(component.input.disabled.borderColor, ";\n    cursor: not-allowed;\n  ");
+}, component.input.hover.borderColor);
 var StyledInput = styled.input.withConfig({
   displayName: "SearchField__StyledInput",
   componentId: "sc-qhz9i8-2"
 })(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic$4.typography.body, semantic$4.color.text["default"], semantic$4.color.text.subdued, semantic$4.color.text.disabled);
-var StyledClearButton = styled.button.withConfig({
-  displayName: "SearchField__StyledClearButton",
-  componentId: "sc-qhz9i8-3"
-})(templateObject_4$5 || (templateObject_4$5 = __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  \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  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n"])), base$4.spacing[1], semantic$4.color.icon.subdued, base$4.border.radius[2], semantic$4.motion.hover, semantic$4.color.icon["default"], semantic$4.color.background.surface, base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
 var StyledSuggestionsList = styled.ul.withConfig({
   displayName: "SearchField__StyledSuggestionsList",
-  componentId: "sc-qhz9i8-4"
-})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: 1000;\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: 1000;\n"])), base$4.spacing[1], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], base$4.shadow[3], base$4.spacing[1]);
-var StyledSuggestionItem = styled.li.withConfig({
-  displayName: "SearchField__StyledSuggestionItem",
-  componentId: "sc-qhz9i8-5"
-})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  cursor: pointer;\n  transition: ", ";\n  \n  ", "\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  cursor: pointer;\n  transition: ", ";\n  \n  ", "\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  ", "\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.motion.hover, function (props) {
-  return props.$isHighlighted && "\n    background-color: ".concat(semantic$4.color.background['interactive-subtle'], ";\n  ");
-}, semantic$4.color.background['interactive-subtle'], function (props) {
-  return props.$isRecent && "\n    color: ".concat(semantic$4.color.text.subdued, ";\n  ");
-});
+  componentId: "sc-qhz9i8-3"
+})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: 1000;\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: 1000;\n"])), base$4.spacing[1], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], base$4.shadow[3], base$4.spacing[1]);
 var StyledSectionHeader = styled.div.withConfig({
   displayName: "SearchField__StyledSectionHeader",
-  componentId: "sc-qhz9i8-6"
-})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.caption, semantic$4.color.text.subdued, base$4.letterSpacing[4]);
-var StyledClearRecent = styled.button.withConfig({
-  displayName: "SearchField__StyledClearRecent",
-  componentId: "sc-qhz9i8-7"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  padding: ", " ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n  transition: ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: -", ";\n  }\n"], ["\n  padding: ", " ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n  transition: ", ";\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: -", ";\n  }\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.small, semantic$4.color.text.interactive, semantic$4.motion.hover, semantic$4.color.background['interactive-subtle'], base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
+  componentId: "sc-qhz9i8-4"
+})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.caption, semantic$4.color.text.subdued, base$4.letterSpacing[4]);
 var debounce = function debounce(func, wait) {
   var timeout = null;
   return function () {
@@ -5536,94 +5717,101 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [highlightedIndex]);
   var showClearButton = value.length > 0 && !disabled;
   var hasItems = displayItems.length > 0;
-  return /*#__PURE__*/React.createElement(StyledSearchContainer, {
-    $isFocused: isFocused,
-    $disabled: disabled,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(StyledInputWrapper, {
-    $isFocused: isFocused,
-    $disabled: disabled
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "search",
-    size: "sm",
-    iconColor: "subdued",
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement(StyledInput, _extends({
-    ref: inputRef,
-    type: "text",
-    value: value,
-    onChange: handleInputChange,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onKeyDown: handleKeyDown,
-    placeholder: placeholder,
-    disabled: disabled,
-    "aria-label": ariaLabel,
-    "aria-autocomplete": "list",
-    "aria-controls": showSuggestions && hasItems ? 'search-suggestions' : undefined,
-    "aria-expanded": showSuggestions && hasItems,
-    "aria-activedescendant": highlightedIndex >= 0 ? "suggestion-".concat(highlightedIndex) : undefined,
-    role: "combobox"
-  }, inputProps)), loading && /*#__PURE__*/React.createElement(Icon, {
-    name: "refresh",
-    size: "sm",
-    iconColor: "subdued",
-    "aria-label": "Loading"
-  }), showClearButton && /*#__PURE__*/React.createElement(StyledClearButton, {
-    type: "button",
-    onClick: handleClear,
-    "aria-label": "Clear search",
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "close",
-    size: "xs"
-  }))), showSuggestions && hasItems && /*#__PURE__*/React.createElement(StyledSuggestionsList, {
-    ref: listRef,
-    id: "search-suggestions",
-    role: "listbox"
-  }, !value.trim() && showRecentSearches && recentSearches.length > 0 && /*#__PURE__*/React.createElement(StyledSectionHeader, null, "Recent Searches"), displayItems.map(function (item, index) {
-    if (item.type === 'clear') {
-      return /*#__PURE__*/React.createElement(StyledClearRecent, {
-        key: "clear",
-        type: "button",
-        onClick: function onClick() {
-          return handleSuggestionClick(item);
+  return jsxs(StyledSearchContainer, {
+    "$isFocused": isFocused,
+    "$disabled": disabled,
+    "data-testid": dataTestId,
+    children: [jsxs(StyledInputWrapper, {
+      "$isFocused": isFocused,
+      "$disabled": disabled,
+      "data-disabled": disabled,
+      children: [jsx(Icon, {
+        name: "search",
+        size: "sm",
+        iconColor: "subdued",
+        "aria-hidden": "true"
+      }), jsx(StyledInput, __assign({
+        ref: inputRef,
+        type: "text",
+        value: value,
+        onChange: handleInputChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        placeholder: placeholder,
+        disabled: disabled,
+        "aria-label": ariaLabel,
+        "aria-autocomplete": "list",
+        "aria-controls": showSuggestions && hasItems ? 'search-suggestions' : undefined,
+        "aria-expanded": showSuggestions && hasItems,
+        "aria-activedescendant": highlightedIndex >= 0 ? "suggestion-".concat(highlightedIndex) : undefined,
+        role: "combobox"
+      }, inputProps)), loading && jsx(Icon, {
+        name: "refresh",
+        size: "sm",
+        iconColor: "subdued",
+        "aria-label": "Loading"
+      }), showClearButton && jsx(IconButton, {
+        iconName: "close",
+        size: "small",
+        variant: "naked",
+        onClick: handleClear,
+        "aria-label": "Clear search",
+        tabIndex: -1
+      })]
+    }), showSuggestions && hasItems && jsxs(StyledSuggestionsList, {
+      ref: listRef,
+      id: "search-suggestions",
+      role: "listbox",
+      children: [!value.trim() && showRecentSearches && recentSearches.length > 0 && jsx(StyledSectionHeader, {
+        children: "Recent Searches"
+      }), displayItems.map(function (item, index) {
+        if (item.type === 'clear') {
+          return jsx(ListItem, {
+            role: "option",
+            primary: "Clear recent searches",
+            interactive: true,
+            spacing: "compact",
+            onClick: function onClick() {
+              return handleSuggestionClick(item);
+            },
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleSuggestionClick(item);
+              }
+            }
+          }, "clear");
         }
-      }, "Clear recent searches");
-    }
-    var suggestion = item.data;
-    var isString = typeof suggestion === 'string';
-    var label = isString ? suggestion : suggestion.label;
-    var description = !isString ? suggestion.description : undefined;
-    return /*#__PURE__*/React.createElement(StyledSuggestionItem, {
-      key: isString ? suggestion : suggestion.id,
-      id: "suggestion-".concat(index),
-      role: "option",
-      "aria-selected": index === highlightedIndex,
-      $isHighlighted: index === highlightedIndex,
-      $isRecent: item.type === 'recent',
-      onClick: function onClick() {
-        return handleSuggestionClick(item);
-      }
-    }, item.type === 'recent' && /*#__PURE__*/React.createElement(Icon, {
-      name: "refresh",
-      size: "xs",
-      "aria-hidden": "true"
-    }), /*#__PURE__*/React.createElement(Stack, {
-      direction: "column",
-      gap: "none"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      variant: "body"
-    }, label), description && /*#__PURE__*/React.createElement(Typography, {
-      variant: "caption",
-      color: "subdued"
-    }, description)));
-  })));
+        var suggestion = item.data;
+        var isString = typeof suggestion === 'string';
+        var label = isString ? suggestion : suggestion.label;
+        var description = !isString ? suggestion.description : undefined;
+        return jsx(ListItem, {
+          id: "suggestion-".concat(index),
+          role: "option",
+          "aria-selected": index === highlightedIndex,
+          primary: label,
+          secondary: description,
+          icon: item.type === 'recent' ? jsx(Icon, {
+            name: "refresh",
+            size: "xs",
+            "aria-hidden": "true"
+          }) : undefined,
+          interactive: true,
+          selected: index === highlightedIndex,
+          spacing: "compact",
+          onClick: function onClick() {
+            return handleSuggestionClick(item);
+          }
+        }, isString ? suggestion : suggestion.id);
+      })]
+    })]
+  });
 });
 SearchField.displayName = 'SearchField';
-var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4;
+var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4;
 
-React.createElement;
 var semantic$3 = tokensData.semantic,
   base$3 = tokensData.base;
 // Fade in animation for overlay
@@ -5801,30 +5989,34 @@ var Sheet = function Sheet(_a) {
     }
   };
   if (!isOpen) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay, {
-    $isOpen: isOpen,
-    onClick: handleOverlayClick,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
-  }), /*#__PURE__*/React.createElement(StyledSheet, {
-    ref: sheetRef,
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": ariaLabel || title || 'Sheet dialog',
-    "aria-describedby": ariaDescribedBy,
-    tabIndex: -1,
-    $position: position,
-    $variant: variant,
-    $width: width,
-    $height: height,
-    $isOpen: isOpen,
-    onKeyDown: handleKeyDown,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(StyledSheetContent, null, children)));
+  return jsxs(Fragment, {
+    children: [jsx(StyledOverlay, {
+      "$isOpen": isOpen,
+      onClick: handleOverlayClick,
+      "data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
+    }), jsx(StyledSheet, {
+      ref: sheetRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel || title || 'Sheet dialog',
+      "aria-describedby": ariaDescribedBy,
+      tabIndex: -1,
+      "$position": position,
+      "$variant": variant,
+      "$width": width,
+      "$height": height,
+      "$isOpen": isOpen,
+      onKeyDown: handleKeyDown,
+      "data-testid": dataTestId,
+      children: jsx(StyledSheetContent, {
+        children: children
+      })
+    })]
+  });
 };
 Sheet.displayName = 'Sheet';
 var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
 
-React.createElement;
 var semantic$2 = tokensData.semantic,
   base$2 = tokensData.base;
 var StyledSliderContainer = styled.div.withConfig({
@@ -6129,90 +6321,108 @@ var Slider = function Slider(_a) {
   var _l = [valueToPercent(currentRangeValue[0]), valueToPercent(currentRangeValue[1])],
     minPercent = _l[0],
     maxPercent = _l[1];
-  return /*#__PURE__*/React.createElement(StyledSliderContainer, {
-    "data-testid": dataTestId
-  }, label && /*#__PURE__*/React.createElement(StyledLabel$1, {
-    htmlFor: generatedId,
-    $disabled: disabled
-  }, label), /*#__PURE__*/React.createElement(StyledSliderTrackContainer, null, /*#__PURE__*/React.createElement(StyledTrack, {
-    ref: trackRef,
-    onClick: handleTrackClick,
-    $disabled: disabled
-  }, isRange ? /*#__PURE__*/React.createElement(StyledTrackFill, {
-    $disabled: disabled,
-    style: {
-      left: "".concat(minPercent, "%"),
-      width: "".concat(maxPercent - minPercent, "%")
-    }
-  }) : /*#__PURE__*/React.createElement(StyledTrackFill, {
-    $disabled: disabled,
-    style: {
-      left: 0,
-      width: "".concat(singlePercent, "%")
-    }
-  }), isRange ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledThumb, {
-    role: "slider",
-    tabIndex: disabled ? -1 : 0,
-    "aria-label": ariaLabel ? "".concat(ariaLabel, " minimum") : 'Minimum value',
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-valuenow": currentRangeValue[0],
-    "aria-valuetext": formatValue(currentRangeValue[0]),
-    "aria-disabled": disabled,
-    "aria-describedby": ariaDescribedBy,
-    $disabled: disabled,
-    $active: activeThumb === 'min',
-    style: {
-      left: "".concat(minPercent, "%")
-    },
-    onMouseDown: handleThumbMouseDown('min'),
-    onKeyDown: handleKeyDown('min')
-  }, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
-    $disabled: disabled
-  }, formatValue(currentRangeValue[0]))), /*#__PURE__*/React.createElement(StyledThumb, {
-    role: "slider",
-    tabIndex: disabled ? -1 : 0,
-    "aria-label": ariaLabel ? "".concat(ariaLabel, " maximum") : 'Maximum value',
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-valuenow": currentRangeValue[1],
-    "aria-valuetext": formatValue(currentRangeValue[1]),
-    "aria-disabled": disabled,
-    "aria-describedby": ariaDescribedBy,
-    $disabled: disabled,
-    $active: activeThumb === 'max',
-    style: {
-      left: "".concat(maxPercent, "%")
-    },
-    onMouseDown: handleThumbMouseDown('max'),
-    onKeyDown: handleKeyDown('max')
-  }, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
-    $disabled: disabled
-  }, formatValue(currentRangeValue[1])))) : /*#__PURE__*/React.createElement(StyledThumb, {
-    role: "slider",
-    tabIndex: disabled ? -1 : 0,
-    "aria-label": ariaLabel || label || 'Slider value',
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-valuenow": currentValue,
-    "aria-valuetext": formatValue(currentValue),
-    "aria-disabled": disabled,
-    "aria-describedby": ariaDescribedBy,
-    $disabled: disabled,
-    $active: activeThumb === 'single',
-    style: {
-      left: "".concat(singlePercent, "%")
-    },
-    onMouseDown: handleThumbMouseDown('single'),
-    onKeyDown: handleKeyDown('single')
-  }, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
-    $disabled: disabled
-  }, formatValue(currentValue))))), /*#__PURE__*/React.createElement(StyledMinMaxLabels, null, /*#__PURE__*/React.createElement("span", null, formatValue(min)), /*#__PURE__*/React.createElement("span", null, formatValue(max))));
+  return jsxs(StyledSliderContainer, {
+    "data-testid": dataTestId,
+    children: [label && jsx(StyledLabel$1, {
+      htmlFor: generatedId,
+      "$disabled": disabled,
+      children: label
+    }), jsx(StyledSliderTrackContainer, {
+      children: jsxs(StyledTrack, {
+        ref: trackRef,
+        onClick: handleTrackClick,
+        "$disabled": disabled,
+        children: [isRange ? jsx(StyledTrackFill, {
+          "$disabled": disabled,
+          style: {
+            left: "".concat(minPercent, "%"),
+            width: "".concat(maxPercent - minPercent, "%")
+          }
+        }) : jsx(StyledTrackFill, {
+          "$disabled": disabled,
+          style: {
+            left: 0,
+            width: "".concat(singlePercent, "%")
+          }
+        }), isRange ? jsxs(Fragment, {
+          children: [jsx(StyledThumb, {
+            role: "slider",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": ariaLabel ? "".concat(ariaLabel, " minimum") : 'Minimum value',
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": currentRangeValue[0],
+            "aria-valuetext": formatValue(currentRangeValue[0]),
+            "aria-disabled": disabled,
+            "aria-describedby": ariaDescribedBy,
+            "$disabled": disabled,
+            "$active": activeThumb === 'min',
+            style: {
+              left: "".concat(minPercent, "%")
+            },
+            onMouseDown: handleThumbMouseDown('min'),
+            onKeyDown: handleKeyDown('min'),
+            children: showValueLabel && jsx(StyledValueLabel, {
+              "$disabled": disabled,
+              children: formatValue(currentRangeValue[0])
+            })
+          }), jsx(StyledThumb, {
+            role: "slider",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": ariaLabel ? "".concat(ariaLabel, " maximum") : 'Maximum value',
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": currentRangeValue[1],
+            "aria-valuetext": formatValue(currentRangeValue[1]),
+            "aria-disabled": disabled,
+            "aria-describedby": ariaDescribedBy,
+            "$disabled": disabled,
+            "$active": activeThumb === 'max',
+            style: {
+              left: "".concat(maxPercent, "%")
+            },
+            onMouseDown: handleThumbMouseDown('max'),
+            onKeyDown: handleKeyDown('max'),
+            children: showValueLabel && jsx(StyledValueLabel, {
+              "$disabled": disabled,
+              children: formatValue(currentRangeValue[1])
+            })
+          })]
+        }) : jsx(StyledThumb, {
+          role: "slider",
+          tabIndex: disabled ? -1 : 0,
+          "aria-label": ariaLabel || label || 'Slider value',
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": currentValue,
+          "aria-valuetext": formatValue(currentValue),
+          "aria-disabled": disabled,
+          "aria-describedby": ariaDescribedBy,
+          "$disabled": disabled,
+          "$active": activeThumb === 'single',
+          style: {
+            left: "".concat(singlePercent, "%")
+          },
+          onMouseDown: handleThumbMouseDown('single'),
+          onKeyDown: handleKeyDown('single'),
+          children: showValueLabel && jsx(StyledValueLabel, {
+            "$disabled": disabled,
+            children: formatValue(currentValue)
+          })
+        })]
+      })
+    }), jsxs(StyledMinMaxLabels, {
+      children: [jsx("span", {
+        children: formatValue(min)
+      }), jsx("span", {
+        children: formatValue(max)
+      })]
+    })]
+  });
 };
 Slider.displayName = 'Slider';
 var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
 
-React.createElement;
 var semantic$1 = tokensData.semantic,
   base$1 = tokensData.base;
 var StyledTabList = styled.div.withConfig({
@@ -6394,43 +6604,44 @@ var TabBar = function TabBar(_a) {
       (_a = tabRefs.current[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
   };
-  return /*#__PURE__*/React.createElement(StyledTabList, {
-    $variant: variant,
+  return jsx(StyledTabList, {
+    "$variant": variant,
     role: "tablist",
     "aria-label": ariaLabel,
-    "data-testid": dataTestId
-  }, tabs.map(function (tab, index) {
-    return /*#__PURE__*/React.createElement(StyledTab, {
-      key: tab.id,
-      ref: function ref(el) {
-        tabRefs.current[index] = el;
-      },
-      $variant: variant,
-      $isActive: tab.id === activeTab,
-      $disabled: tab.disabled || false,
-      role: "tab",
-      "aria-selected": tab.id === activeTab,
-      "aria-disabled": tab.disabled || false,
-      tabIndex: index === focusedIndex ? 0 : -1,
-      disabled: tab.disabled,
-      onClick: function onClick() {
-        return handleTabClick(tab, index);
-      },
-      onKeyDown: function onKeyDown(e) {
-        return handleKeyDown(e, index);
-      },
-      "data-testid": "".concat(dataTestId, "-tab-").concat(tab.id)
-    }, tab.label, typeof tab.badge === 'number' && tab.badge > 0 && /*#__PURE__*/React.createElement(StyledBadge, {
-      $variant: variant,
-      $isActive: tab.id === activeTab,
-      "aria-label": "".concat(tab.badge, " items")
-    }, tab.badge > 99 ? '99+' : tab.badge));
-  }));
+    "data-testid": dataTestId,
+    children: tabs.map(function (tab, index) {
+      return jsxs(StyledTab, {
+        ref: function ref(el) {
+          tabRefs.current[index] = el;
+        },
+        "$variant": variant,
+        "$isActive": tab.id === activeTab,
+        "$disabled": tab.disabled || false,
+        role: "tab",
+        "aria-selected": tab.id === activeTab,
+        "aria-disabled": tab.disabled || false,
+        tabIndex: index === focusedIndex ? 0 : -1,
+        disabled: tab.disabled,
+        onClick: function onClick() {
+          return handleTabClick(tab, index);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return handleKeyDown(e, index);
+        },
+        "data-testid": "".concat(dataTestId, "-tab-").concat(tab.id),
+        children: [tab.label, typeof tab.badge === 'number' && tab.badge > 0 && jsx(StyledBadge, {
+          "$variant": variant,
+          "$isActive": tab.id === activeTab,
+          "aria-label": "".concat(tab.badge, " items"),
+          children: tab.badge > 99 ? '99+' : tab.badge
+        })]
+      }, tab.id);
+    })
+  });
 };
 TabBar.displayName = 'TabBar';
 var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 
-React.createElement;
 var semantic = tokensData.semantic,
   base = tokensData.base;
 var StyledFieldContainer = styled.div.withConfig({
@@ -6499,43 +6710,47 @@ var TextField = /*#__PURE__*/forwardRef(function (_a, ref) {
   var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
   var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
   var hasError = Boolean(error);
-  return /*#__PURE__*/React.createElement(StyledFieldContainer, {
-    "data-testid": dataTestId
-  }, label && /*#__PURE__*/React.createElement(StyledLabel, {
-    htmlFor: id,
-    "data-disabled": disabled
-  }, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator, {
-    "aria-label": "required"
-  }, "*")), /*#__PURE__*/React.createElement(StyledInputBase, _extends({
-    ref: ref,
-    id: id,
-    type: type,
-    disabled: disabled,
-    required: required,
-    "aria-required": required,
-    "aria-invalid": hasError,
-    "aria-describedby": describedBy,
-    $hasError: hasError,
-    $disabled: disabled
-  }, inputProps)), error && /*#__PURE__*/React.createElement(StyledHelperText, {
-    id: errorId,
-    role: "alert",
-    "aria-live": "polite",
-    $hasError: true
-  }, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText, {
-    id: helperId
-  }, helperText));
+  return jsxs(StyledFieldContainer, {
+    "data-testid": dataTestId,
+    children: [label && jsxs(StyledLabel, {
+      htmlFor: id,
+      "data-disabled": disabled,
+      children: [label, required && jsx(StyledRequiredIndicator, {
+        "aria-label": "required",
+        children: "*"
+      })]
+    }), jsx(StyledInputBase, __assign({
+      ref: ref,
+      id: id,
+      type: type,
+      disabled: disabled,
+      required: required,
+      "aria-required": required,
+      "aria-invalid": hasError,
+      "aria-describedby": describedBy,
+      "$hasError": hasError,
+      "$disabled": disabled
+    }, inputProps)), error && jsx(StyledHelperText, {
+      id: errorId,
+      role: "alert",
+      "aria-live": "polite",
+      "$hasError": true,
+      children: error
+    }), helperText && !error && jsx(StyledHelperText, {
+      id: helperId,
+      children: helperText
+    })]
+  });
 });
 TextField.displayName = 'TextField';
 var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
 
-React.createElement;
 var StyledContainer = styled.div.withConfig({
   displayName: "TransactionListItem__StyledContainer",
   componentId: "sc-7yunm0-0"
 })(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: 72px;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  gap: ", ";\n  transition: background-color 0.2s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: 72px;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  gap: ", ";\n  transition: background-color 0.2s ease;\n  \n  ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.md, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], tokensData.semantic.spacing.layout.md, function (_a) {
   var $clickable = _a.$clickable;
-  return $clickable && "\n    cursor: pointer;\n    \n    &:hover {\n      background-color: ".concat(tokensData.semantic.color.background['interactive-hover'], ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensData.semantic.color.background['interactive-active'], ";\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n      outline-offset: -2px;\n    }\n  ");
+  return $clickable && "\n    cursor: pointer;\n    \n    &:hover {\n      background-color: ".concat(tokensData.semantic.color.background.subtle, ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensData.semantic.color.background['interactive-active'], ";\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n      outline-offset: -2px;\n    }\n  ");
 });
 var StyledAvatarSection = styled.div.withConfig({
   displayName: "TransactionListItem__StyledAvatarSection",
@@ -6544,7 +6759,7 @@ var StyledAvatarSection = styled.div.withConfig({
 var StyledMainContent = styled.div.withConfig({
   displayName: "TransactionListItem__StyledMainContent",
   componentId: "sc-7yunm0-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.xs);
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: none;\n"], ["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: none;\n"])));
 var StyledTopRow = styled.div.withConfig({
   displayName: "TransactionListItem__StyledTopRow",
   componentId: "sc-7yunm0-3"
@@ -6552,7 +6767,7 @@ var StyledTopRow = styled.div.withConfig({
 var StyledMerchantSection = styled.div.withConfig({
   displayName: "TransactionListItem__StyledMerchantSection",
   componentId: "sc-7yunm0-4"
-})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"])), tokensData.semantic.spacing.layout.xs);
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"])), tokensData.semantic.spacing.layout.sm);
 var StyledBottomRow = styled.div.withConfig({
   displayName: "TransactionListItem__StyledBottomRow",
   componentId: "sc-7yunm0-5"
@@ -6569,21 +6784,40 @@ var StyledTruncatedText = styled.span.withConfig({
   displayName: "TransactionListItem__StyledTruncatedText",
   componentId: "sc-7yunm0-8"
 })(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"
-// Map categories to icon names (using placeholders until custom icons available)
+// Map categories to CategoryBadge configurations
 ])));
-// Map categories to icon names (using placeholders until custom icons available)
-var categoryToIcon = {
-  shopping: 'paper',
-  // Will use shopping bag icon
-  dining: 'paper',
-  // Will use restaurant icon
-  transport: 'paper',
-  // Will use car icon
-  entertainment: 'star',
-  // Will use ticket icon
-  bills: 'paper',
-  // Will use document icon
-  other: 'paper'
+// Map categories to CategoryBadge configurations
+var categoryConfig = {
+  shopping: {
+    color: 'purple',
+    icon: 'paper',
+    label: 'Shopping'
+  },
+  dining: {
+    color: 'orange',
+    icon: 'paper',
+    label: 'Dining'
+  },
+  transport: {
+    color: 'blue',
+    icon: 'paper',
+    label: 'Transport'
+  },
+  entertainment: {
+    color: 'pink',
+    icon: 'star',
+    label: 'Entertainment'
+  },
+  bills: {
+    color: 'red',
+    icon: 'paper',
+    label: 'Bills'
+  },
+  other: {
+    color: 'gray',
+    icon: 'paper',
+    label: 'Other'
+  }
 };
 // Map status to badge variant
 var statusToBadgeVariant = {
@@ -6620,8 +6854,8 @@ var TransactionListItem = function TransactionListItem(_a) {
   var isClickable = !!onClick;
   // Determine amount variant
   var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
-  // Get category icon
-  var categoryIcon = category ? categoryToIcon[category] : undefined;
+  // Get category configuration
+  var categoryData = category ? categoryConfig[category] : undefined;
   // Get badge variant from status
   var badgeVariant = statusToBadgeVariant[status];
   var handleClick = function handleClick() {
@@ -6635,71 +6869,95 @@ var TransactionListItem = function TransactionListItem(_a) {
       onClick === null || onClick === void 0 ? void 0 : onClick();
     }
   };
-  return /*#__PURE__*/React.createElement(StyledContainer, {
-    $clickable: isClickable,
+  return jsxs(StyledContainer, {
+    "$clickable": isClickable,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     tabIndex: isClickable ? 0 : undefined,
     role: isClickable ? 'button' : undefined,
     "aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(StyledAvatarSection, null, status === 'pending' ? /*#__PURE__*/React.createElement(Badge, {
-    variant: badgeVariant,
-    dot: true,
-    "aria-label": "Pending transaction"
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    name: merchant,
-    picture: merchantLogo,
-    size: "md"
-  })) : /*#__PURE__*/React.createElement(Avatar, {
-    name: merchant,
-    picture: merchantLogo,
-    size: "md"
-  })), /*#__PURE__*/React.createElement(StyledMainContent, null, /*#__PURE__*/React.createElement(StyledTopRow, null, /*#__PURE__*/React.createElement(StyledMerchantSection, null, categoryIcon && /*#__PURE__*/React.createElement("span", {
-    "aria-label": "Category: ".concat(category),
-    role: "img"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: categoryIcon,
-    size: "sm",
-    iconColor: "subdued"
-  })), /*#__PURE__*/React.createElement(StyledTruncatedText, null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body"
-  }, merchant)), status === 'failed' && /*#__PURE__*/React.createElement(Badge, {
-    variant: "error",
-    dot: true,
-    "aria-label": "Failed transaction"
-  }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement(MoneyDisplay, {
-    amount: amount,
-    currency: currency,
-    variant: amountVariant,
-    size: "medium",
-    weight: "medium",
-    showSign: true,
-    "data-testid": dataTestId ? "".concat(dataTestId, "-amount") : undefined
-  })), /*#__PURE__*/React.createElement(StyledBottomRow, null, /*#__PURE__*/React.createElement(StyledMetadata, null, /*#__PURE__*/React.createElement(DateFormatter, {
-    dateString: typeof date === 'string' ? date : date.toISOString(),
-    mode: "smart",
-    "data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
-  }), description && /*#__PURE__*/React.createElement(StyledTruncatedText, null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    color: "subdued"
-  }, "\u2022 ", description))), (hasReceipt || hasNote) && /*#__PURE__*/React.createElement(StyledIconIndicator, null, hasReceipt && /*#__PURE__*/React.createElement("span", {
-    "aria-label": "Has receipt",
-    role: "img"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "fileDocSearch",
-    size: "xs"
-  })), hasNote && /*#__PURE__*/React.createElement("span", {
-    "aria-label": "Has note",
-    role: "img"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "paper",
-    size: "xs"
-  }))))));
+    "data-testid": dataTestId,
+    children: [jsx(StyledAvatarSection, {
+      children: status === 'pending' ? jsx(Badge, {
+        variant: badgeVariant,
+        dot: true,
+        "aria-label": "Pending transaction",
+        children: jsx(Avatar, {
+          name: merchant,
+          picture: merchantLogo,
+          size: "md"
+        })
+      }) : jsx(Avatar, {
+        name: merchant,
+        picture: merchantLogo,
+        size: "md"
+      })
+    }), jsxs(StyledMainContent, {
+      children: [jsxs(StyledTopRow, {
+        children: [jsxs(StyledMerchantSection, {
+          children: [jsx(StyledTruncatedText, {
+            children: jsx(Typography, {
+              variant: "body",
+              children: merchant
+            })
+          }), categoryData && jsx(CategoryBadge, {
+            color: categoryData.color,
+            icon: categoryData.icon,
+            size: "small",
+            variant: "minimal",
+            "aria-label": "Category: ".concat(categoryData.label),
+            children: categoryData.label
+          }), status === 'failed' && jsx(Badge, {
+            variant: "error",
+            dot: true,
+            "aria-label": "Failed transaction",
+            children: jsx("span", {})
+          })]
+        }), jsx(MoneyDisplay, {
+          amount: amount,
+          currency: currency,
+          variant: amountVariant,
+          size: "medium",
+          weight: "medium",
+          showSign: true,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-amount") : undefined
+        })]
+      }), jsxs(StyledBottomRow, {
+        children: [jsxs(StyledMetadata, {
+          children: [jsx(DateFormatter, {
+            dateString: typeof date === 'string' ? date : date.toISOString(),
+            mode: "smart",
+            "data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
+          }), description && jsx(StyledTruncatedText, {
+            children: jsxs(Typography, {
+              variant: "small",
+              color: "subdued",
+              children: ["\u2022 ", description]
+            })
+          })]
+        }), (hasReceipt || hasNote) && jsxs(StyledIconIndicator, {
+          children: [hasReceipt && jsx("span", {
+            "aria-label": "Has receipt",
+            role: "img",
+            children: jsx(Icon, {
+              name: "fileDocSearch",
+              size: "xs"
+            })
+          }), hasNote && jsx("span", {
+            "aria-label": "Has note",
+            role: "img",
+            children: jsx(Icon, {
+              name: "paper",
+              size: "xs"
+            })
+          })]
+        })]
+      })]
+    })]
+  });
 };
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
 
-React.createElement;
 // Breakpoints using base tokens
 var breakpoints = {
   xs: tokensData.base.breakpoint.xs,
@@ -6741,13 +6999,14 @@ var Grid = function Grid(_a) {
     gapY = _a.gapY,
     className = _a.className,
     children = _a.children;
-  return /*#__PURE__*/React.createElement(GridContainer, {
-    $cols: cols,
-    $gap: gap ? tokensData.base.spacing[gap] : undefined,
-    $gapX: gapX ? tokensData.base.spacing[gapX] : undefined,
-    $gapY: gapY ? tokensData.base.spacing[gapY] : undefined,
-    className: className
-  }, children);
+  return jsx(GridContainer, {
+    "$cols": cols,
+    "$gap": gap ? tokensData.base.spacing[gap] : undefined,
+    "$gapX": gapX ? tokensData.base.spacing[gapX] : undefined,
+    "$gapY": gapY ? tokensData.base.spacing[gapY] : undefined,
+    className: className,
+    children: children
+  });
 };
 var GridColContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -6789,19 +7048,20 @@ var GridCol = function GridCol(_a) {
     orderXl = _a.orderXl,
     className = _a.className,
     children = _a.children;
-  return /*#__PURE__*/React.createElement(GridColContainer, {
-    $span: span,
-    $spanSm: spanSm,
-    $spanMd: spanMd,
-    $spanLg: spanLg,
-    $spanXl: spanXl,
-    $order: order,
-    $orderSm: orderSm,
-    $orderMd: orderMd,
-    $orderLg: orderLg,
-    $orderXl: orderXl,
-    className: className
-  }, children);
+  return jsx(GridColContainer, {
+    "$span": span,
+    "$spanSm": spanSm,
+    "$spanMd": spanMd,
+    "$spanLg": spanLg,
+    "$spanXl": spanXl,
+    "$order": order,
+    "$orderSm": orderSm,
+    "$orderMd": orderMd,
+    "$orderLg": orderLg,
+    "$orderXl": orderXl,
+    className: className,
+    children: children
+  });
 };
 var ResponsiveGridContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -6873,29 +7133,30 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     gapYXl = _a.gapYXl,
     className = _a.className,
     children = _a.children;
-  return /*#__PURE__*/React.createElement(ResponsiveGridContainer, {
-    $cols: cols,
-    $colsSm: colsSm,
-    $colsMd: colsMd,
-    $colsLg: colsLg,
-    $colsXl: colsXl,
-    $gap: gap ? tokensData.base.spacing[gap] : undefined,
-    $gapSm: gapSm ? tokensData.base.spacing[gapSm] : undefined,
-    $gapMd: gapMd ? tokensData.base.spacing[gapMd] : undefined,
-    $gapLg: gapLg ? tokensData.base.spacing[gapLg] : undefined,
-    $gapXl: gapXl ? tokensData.base.spacing[gapXl] : undefined,
-    $gapX: gapX ? tokensData.base.spacing[gapX] : undefined,
-    $gapXSm: gapXSm ? tokensData.base.spacing[gapXSm] : undefined,
-    $gapXMd: gapXMd ? tokensData.base.spacing[gapXMd] : undefined,
-    $gapXLg: gapXLg ? tokensData.base.spacing[gapXLg] : undefined,
-    $gapXXl: gapXXl ? tokensData.base.spacing[gapXXl] : undefined,
-    $gapY: gapY ? tokensData.base.spacing[gapY] : undefined,
-    $gapYSm: gapYSm ? tokensData.base.spacing[gapYSm] : undefined,
-    $gapYMd: gapYMd ? tokensData.base.spacing[gapYMd] : undefined,
-    $gapYLg: gapYLg ? tokensData.base.spacing[gapYLg] : undefined,
-    $gapYXl: gapYXl ? tokensData.base.spacing[gapYXl] : undefined,
-    className: className
-  }, children);
+  return jsx(ResponsiveGridContainer, {
+    "$cols": cols,
+    "$colsSm": colsSm,
+    "$colsMd": colsMd,
+    "$colsLg": colsLg,
+    "$colsXl": colsXl,
+    "$gap": gap ? tokensData.base.spacing[gap] : undefined,
+    "$gapSm": gapSm ? tokensData.base.spacing[gapSm] : undefined,
+    "$gapMd": gapMd ? tokensData.base.spacing[gapMd] : undefined,
+    "$gapLg": gapLg ? tokensData.base.spacing[gapLg] : undefined,
+    "$gapXl": gapXl ? tokensData.base.spacing[gapXl] : undefined,
+    "$gapX": gapX ? tokensData.base.spacing[gapX] : undefined,
+    "$gapXSm": gapXSm ? tokensData.base.spacing[gapXSm] : undefined,
+    "$gapXMd": gapXMd ? tokensData.base.spacing[gapXMd] : undefined,
+    "$gapXLg": gapXLg ? tokensData.base.spacing[gapXLg] : undefined,
+    "$gapXXl": gapXXl ? tokensData.base.spacing[gapXXl] : undefined,
+    "$gapY": gapY ? tokensData.base.spacing[gapY] : undefined,
+    "$gapYSm": gapYSm ? tokensData.base.spacing[gapYSm] : undefined,
+    "$gapYMd": gapYMd ? tokensData.base.spacing[gapYMd] : undefined,
+    "$gapYLg": gapYLg ? tokensData.base.spacing[gapYLg] : undefined,
+    "$gapYXl": gapYXl ? tokensData.base.spacing[gapYXl] : undefined,
+    className: className,
+    children: children
+  });
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;