@common-origin/design-system 2.12.1 → 2.12.2

package/dist/index.js

@@ -365,7 +365,9 @@ var base$d = {
 		"2": "400",
 		"3": "500",
 		"4": "600",
-		"5": "700"
+		"5": "700",
+		"6": "800",
+		"7": "900"
 	},
 	lineHeight: {
 		"1": "1rem",
@@ -753,6 +755,20 @@ var component$3 = {
 			cursor: "not-allowed"
 		}
 	},
+	badge: {
+		dot: {
+			size: "0.5rem"
+		},
+		count: {
+			minWidth: "1rem",
+			height: "1rem",
+			paddingX: "0.25rem"
+		},
+		ring: {
+			width: "0.125rem"
+		},
+		borderRadius: "10rem"
+	},
 	$ref: "./component/index.json"
 };
 var semantic$k = {
@@ -806,6 +822,14 @@ var semantic$k = {
 			lg: "2rem",
 			xl: "3rem"
 		},
+		component: {
+			xs: "0.25rem",
+			sm: "0.5rem",
+			md: "0.75rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			"2xl": "1.5rem"
+		},
 		layout: {
 			none: "0",
 			xs: "0.25rem",
@@ -854,7 +878,11 @@ var semantic$k = {
 			warning: "#B14C00",
 			"warning-subtle": "#FFECCC",
 			disabled: "#dee2e6",
-			progressTrack: "#dee2e6"
+			progressTrack: "#dee2e6",
+			page: "#f8f9fa",
+			overlay: "rgba(33, 37, 41, 0.5)",
+			"hover-overlay": "rgba(33, 37, 41, 0.1)",
+			"active-overlay": "rgba(33, 37, 41, 0.15)"
 		},
 		border: {
 			"default": "#e9ecef",
@@ -958,14 +986,14 @@ var semantic$k = {
 	},
 	$ref: "./semantic/index.json"
 };
-var tokensData = {
+var tokensJson = {
 	base: base$d,
 	component: component$3,
 	semantic: semantic$k
 };
 
 // Destructure tokens
-var semantic$j = tokensData.semantic;
+var semantic$j = tokensJson.semantic;
 var color$a = semantic$j.color,
   size$1 = semantic$j.size,
   border$a = semantic$j.border;
@@ -998,14 +1026,14 @@ var AvatarInitials = styled.span.withConfig({
   componentId: "sc-ezn4ax-2"
 })(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
-])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
+])), tokensJson.base.fontFamily.body, tokensJson.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
   var sizeMap = {
-    xs: tokensData.base.fontSize[1],
-    sm: tokensData.base.fontSize[2],
-    md: tokensData.base.fontSize[3],
-    lg: tokensData.base.fontSize[4],
-    xl: tokensData.base.fontSize[5]
+    xs: tokensJson.base.fontSize[1],
+    sm: tokensJson.base.fontSize[2],
+    md: tokensJson.base.fontSize[3],
+    lg: tokensJson.base.fontSize[4],
+    xl: tokensJson.base.fontSize[5]
   };
   return sizeMap[$size];
 }, color$a.text["default"]);
@@ -1064,18 +1092,18 @@ var Avatar = function Avatar(_a) {
 };
 var templateObject_1$K, templateObject_2$v, templateObject_3$s;
 
-var _a$8 = tokensData.semantic,
+var _a$8 = tokensJson.semantic,
   typography$5 = _a$8.typography,
   color$9 = _a$8.color;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
-    display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
-    h1: "font: ".concat(typography$5.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
-    h2: "font: ".concat(typography$5.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h3: "font: ".concat(typography$5.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h4: "font: ".concat(typography$5.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h5: "font: ".concat(typography$5.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
-    h6: "font: ".concat(typography$5.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
+    display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[0], ";"),
+    h1: "font: ".concat(typography$5.h1, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[0], ";"),
+    h2: "font: ".concat(typography$5.h2, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[1], ";"),
+    h3: "font: ".concat(typography$5.h3, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[1], ";"),
+    h4: "font: ".concat(typography$5.h4, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[1], ";"),
+    h5: "font: ".concat(typography$5.h5, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[2], ";"),
+    h6: "font: ".concat(typography$5.h6, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[2], ";"),
     subtitle: "font: ".concat(typography$5.subtitle, ";"),
     body: "font: ".concat(typography$5.body, ";"),
     small: "font: ".concat(typography$5.small, ";"),
@@ -1199,7 +1227,7 @@ var Typography = function Typography(_a) {
 };
 var templateObject_1$J;
 
-var semantic$i = tokensData.semantic;
+var semantic$i = tokensJson.semantic;
 var color$8 = semantic$i.color,
   border$9 = semantic$i.border;
 var radius$4 = border$9.radius;
@@ -1296,35 +1324,35 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$flexWrap && styled.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
-  return props.$gap && styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
+  return props.$gap && styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensJson.semantic.spacing.layout[props.$gap]);
 }, function (props) {
-  return props.$m && styled.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
+  return props.$m && styled.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensJson.semantic.spacing.layout[props.$m]);
 }, function (props) {
-  return props.$mt && styled.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
+  return props.$mt && styled.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensJson.semantic.spacing.layout[props.$mt]);
 }, function (props) {
-  return props.$mr && styled.css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
+  return props.$mr && styled.css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensJson.semantic.spacing.layout[props.$mr]);
 }, function (props) {
-  return props.$mb && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
+  return props.$mb && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$mb]);
 }, function (props) {
-  return props.$ml && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
+  return props.$ml && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$ml]);
 }, function (props) {
-  return props.$mx && styled.css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), tokensData.semantic.spacing.layout[props.$mx], tokensData.semantic.spacing.layout[props.$mx]);
+  return props.$mx && styled.css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$mx], tokensJson.semantic.spacing.layout[props.$mx]);
 }, function (props) {
-  return props.$my && styled.css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), tokensData.semantic.spacing.layout[props.$my], tokensData.semantic.spacing.layout[props.$my]);
+  return props.$my && styled.css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$my], tokensJson.semantic.spacing.layout[props.$my]);
 }, function (props) {
-  return props.$p && styled.css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
+  return props.$p && styled.css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensJson.semantic.spacing.layout[props.$p]);
 }, function (props) {
-  return props.$pt && styled.css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensData.semantic.spacing.layout[props.$pt]);
+  return props.$pt && styled.css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensJson.semantic.spacing.layout[props.$pt]);
 }, function (props) {
-  return props.$pr && styled.css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
+  return props.$pr && styled.css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensJson.semantic.spacing.layout[props.$pr]);
 }, function (props) {
-  return props.$pb && styled.css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
+  return props.$pb && styled.css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$pb]);
 }, function (props) {
-  return props.$pl && styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensData.semantic.spacing.layout[props.$pl]);
+  return props.$pl && styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$pl]);
 }, function (props) {
-  return props.$px && styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), tokensData.semantic.spacing.layout[props.$px], tokensData.semantic.spacing.layout[props.$px]);
+  return props.$px && styled.css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$px], tokensJson.semantic.spacing.layout[props.$px]);
 }, function (props) {
-  return props.$py && styled.css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), tokensData.semantic.spacing.layout[props.$py], tokensData.semantic.spacing.layout[props.$py]);
+  return props.$py && styled.css(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), tokensJson.semantic.spacing.layout[props.$py], tokensJson.semantic.spacing.layout[props.$py]);
 }, function (props) {
   return props.$width && styled.css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
 }, function (props) {
@@ -1348,29 +1376,29 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$left && styled.css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
 }, function (props) {
-  return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.semantic.border.radius[props.$borderRadius]);
+  return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensJson.semantic.border.radius[props.$borderRadius]);
 }, function (props) {
-  return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensData.semantic.color.border[props.$border]);
+  return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$border]);
 }, function (props) {
-  return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: 1px solid ", ";"], ["border-top: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderTop]);
+  return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: 1px solid ", ";"], ["border-top: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$borderTop]);
 }, function (props) {
-  return props.$borderRight && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: 1px solid ", ";"], ["border-right: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderRight]);
+  return props.$borderRight && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: 1px solid ", ";"], ["border-right: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$borderRight]);
 }, function (props) {
-  return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderBottom]);
+  return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$borderBottom]);
 }, function (props) {
-  return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderLeft]);
+  return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$borderLeft]);
 }, function (props) {
-  return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensData.semantic.color.background[props.$bg]);
+  return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensJson.semantic.color.background[props.$bg]);
 }, function (props) {
-  return props.$color && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensData.semantic.color.text[props.$color]);
+  return props.$color && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensJson.semantic.color.text[props.$color]);
 }, function (props) {
-  return props.$shadow && styled.css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$shadow]);
+  return props.$shadow && styled.css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensJson.semantic.elevation[props.$shadow]);
 }, function (props) {
   return props.$cursor && styled.css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["cursor: ", ";"], ["cursor: ", ";"])), props.$cursor);
 }, function (props) {
   return props.$transition && styled.css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
 }, function (props) {
-  return (props.$hoverShadow || props.$hoverTransform) && styled.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 && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && styled.css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensData.semantic.color.border.interactive);
+  return (props.$hoverShadow || props.$hoverTransform) && styled.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 && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && styled.css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensJson.semantic.color.border.interactive);
 }, function (props) {
   return props.$overflow && styled.css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
 }, function (props) {
@@ -2238,7 +2266,7 @@ var move = {
 	decorativeDefault: false,
 	ariaLabelDefault: "Move"
 };
-var iconsData = {
+var iconsJson = {
 	add: add,
 	addRing: addRing,
 	arrowDown: arrowDown,
@@ -2312,35 +2340,35 @@ var IconStyled = styled.span.withConfig({
   componentId: "sc-1105czq-0"
 })(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
-  return tokensData.semantic.size.icon[$size];
+  return tokensJson.semantic.size.icon[$size];
 }, function (_a) {
   var $size = _a.$size;
-  return tokensData.semantic.size.icon[$size];
+  return tokensJson.semantic.size.icon[$size];
 }, function (_a) {
   var $iconColor = _a.$iconColor;
   switch ($iconColor) {
     case 'default':
-      return tokensData.semantic.color.icon["default"];
+      return tokensJson.semantic.color.icon["default"];
     case 'emphasis':
-      return tokensData.semantic.color.icon.emphasis;
+      return tokensJson.semantic.color.icon.emphasis;
     case 'subdued':
-      return tokensData.semantic.color.icon.subdued;
+      return tokensJson.semantic.color.icon.subdued;
     case 'disabled':
-      return tokensData.semantic.color.icon.disabled;
+      return tokensJson.semantic.color.icon.disabled;
     case 'inverse':
-      return tokensData.semantic.color.icon.inverse;
+      return tokensJson.semantic.color.icon.inverse;
     case 'interactive':
-      return tokensData.semantic.color.icon.interactive;
+      return tokensJson.semantic.color.icon.interactive;
     case 'error':
-      return tokensData.semantic.color.icon.error;
+      return tokensJson.semantic.color.icon.error;
     case 'success':
-      return tokensData.semantic.color.icon.success;
+      return tokensJson.semantic.color.icon.success;
     case 'warning':
-      return tokensData.semantic.color.icon.warning;
+      return tokensJson.semantic.color.icon.warning;
     case 'inherit':
       return 'currentColor';
     default:
-      return tokensData.semantic.color.icon["default"];
+      return tokensJson.semantic.color.icon["default"];
   }
 });
 var Icon = function Icon(_a) {
@@ -2351,7 +2379,7 @@ var Icon = function Icon(_a) {
     iconColor = _c === void 0 ? 'default' : _c,
     dataTestId = _a["data-testid"];
   // Get the icon data from the JSON file
-  var iconData = iconsData[name];
+  var iconData = iconsJson[name];
   if (!iconData) {
     console.warn("Icon \"".concat(name, "\" not found in icons.json"));
     return jsxRuntime.jsx(IconStyled, {
@@ -2378,10 +2406,10 @@ var Icon = function Icon(_a) {
 };
 var templateObject_1$G;
 
-var button$1 = tokensData.component.button,
-  semantic$h = tokensData.semantic;
+var button$1 = tokensJson.component.button,
+  semantic$h = tokensJson.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$h.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(button$1.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokensJson.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$h.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button$1.focus.outline, ";\n    outline-offset: ").concat(button$1.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
@@ -2560,8 +2588,8 @@ var Button = function Button(_a) {
 };
 var templateObject_1$F, templateObject_2$s;
 
-var semantic$g = tokensData.semantic,
-  base$c = tokensData.base;
+var semantic$g = tokensJson.semantic,
+  base$c = tokensJson.base;
 var color$7 = semantic$g.color,
   typography$4 = semantic$g.typography,
   border$8 = semantic$g.border,
@@ -2675,7 +2703,7 @@ var CategoryBadge = function CategoryBadge(_a) {
 CategoryBadge.displayName = 'CategoryBadge';
 var templateObject_1$E;
 
-var chip = tokensData.component.chip;
+var chip = tokensJson.component.chip;
 // Helper function to get variant styles matching Button's approach
 var getVariantStyles = function getVariantStyles(_a) {
   var $variant = _a.$variant,
@@ -2684,7 +2712,7 @@ var getVariantStyles = function getVariantStyles(_a) {
     $disabled = _a.$disabled;
   // Boolean chips with selected state get special background
   if ($selected) {
-    return "\n      background-color: ".concat(tokensData.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? tokensData.semantic.color.background['interactive-subtle'] : $clickable ? '#CAE8FF' : tokensData.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? tokensData.semantic.color.background['interactive-subtle'] : $clickable ? '#B5DEFF' : tokensData.semantic.color.background['interactive-subtle'], ";\n      }\n    ");
+    return "\n      background-color: ".concat(tokensJson.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n      \n      &:hover {\n        background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#CAE8FF' : tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n      \n      &:active {\n        background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? '#B5DEFF' : tokensJson.semantic.color.background['interactive-subtle'], ";\n      }\n    ");
   }
   switch ($variant) {
     case 'emphasis':
@@ -2719,7 +2747,7 @@ var StyledChip = styled.span.withConfig({
   componentId: "sc-moa6zc-0"
 })(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"
 // Icon container for selected indicator or leading icons
-])), chip["default"].borderRadius, tokensData.semantic.motion.hover, function (props) {
+])), chip["default"].borderRadius, tokensJson.semantic.motion.hover, function (props) {
   return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
 }, getVariantStyles, getSizeStyles, chip.focus.outline, chip.focus.outlineOffset);
 // Icon container for selected indicator or leading icons
@@ -2728,7 +2756,7 @@ var IconContainer = styled.span.withConfig({
   componentId: "sc-moa6zc-1"
 })(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
 // Close button for dismissible chips
-])), tokensData.semantic.spacing.layout.xs);
+])), tokensJson.semantic.spacing.layout.xs);
 // Close button for dismissible chips
 var CloseButton = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2736,9 +2764,9 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokensData.semantic.spacing.layout.sm, tokensData.semantic.border.radius.xs, function (props) {
+})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 2px;\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  \n  &:active:not(:disabled) {\n    background-color: rgba(0, 0, 0, 0.15);\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.border.radius.xs, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, tokensData.semantic.motion.hover, tokensData.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
+}, tokensJson.semantic.motion.hover, tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
 var templateObject_1$D, templateObject_2$r, templateObject_3$p;
 
 /**
@@ -2968,12 +2996,12 @@ var BooleanChip = function BooleanChip(_a) {
 
 // Breakpoints using base tokens
 var breakpoints$1 = {
-  xs: tokensData.base.breakpoint.xs,
-  sm: tokensData.base.breakpoint.sm,
-  md: tokensData.base.breakpoint.md,
-  lg: tokensData.base.breakpoint.lg,
-  xl: tokensData.base.breakpoint.xl,
-  '2xl': tokensData.base.breakpoint['2xl']
+  xs: tokensJson.base.breakpoint.xs,
+  sm: tokensJson.base.breakpoint.sm,
+  md: tokensJson.base.breakpoint.md,
+  lg: tokensJson.base.breakpoint.lg,
+  xl: tokensJson.base.breakpoint.xl,
+  '2xl': tokensJson.base.breakpoint['2xl']
 };
 // Media query helpers
 var media$1 = {
@@ -2985,7 +3013,7 @@ var media$1 = {
   '2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
 };
 
-var spacing$6 = tokensData.semantic.spacing;
+var spacing$6 = tokensJson.semantic.spacing;
 var StyledContainer$2 = styled.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
@@ -2999,7 +3027,7 @@ var Container$1 = function Container(_a) {
 };
 var templateObject_1$C;
 
-var base$b = tokensData.base;
+var base$b = tokensJson.base;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
@@ -3047,7 +3075,7 @@ var Picture = function Picture(_a) {
 };
 var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
 
-var _a$7 = tokensData.semantic,
+var _a$7 = tokensJson.semantic,
   typography$3 = _a$7.typography,
   color$6 = _a$7.color;
 var TimeStyled = styled.time.withConfig({
@@ -3104,8 +3132,8 @@ var DateFormatter = function DateFormatter(_a) {
 };
 var templateObject_1$A;
 
-var motion$2 = tokensData.semantic.motion,
-  _a$6 = tokensData.component,
+var motion$2 = tokensJson.semantic.motion,
+  _a$6 = tokensJson.component,
   iconButton = _a$6.iconButton,
   button = _a$6.button;
 var IconButtonStyled = styled.button.withConfig({
@@ -3336,9 +3364,9 @@ var MoneyDisplay = function MoneyDisplay(_a) {
 var templateObject_1$y;
 
 // Destructure tokens
-var semantic$f = tokensData.semantic;
+var semantic$f = tokensJson.semantic;
 var _a$5 = __assign(__assign({}, semantic$f), {
-    component: tokensData.component
+    component: tokensJson.component
   }),
   color$5 = _a$5.color,
   border$7 = _a$5.border,
@@ -3410,8 +3438,8 @@ var ProgressBar = function ProgressBar(_a) {
 var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a;
 
 // Destructure tokens for cleaner access
-var separatorTokens = tokensData.component.separator;
-var separatorSpacing = tokensData.semantic.spacing.separator;
+var separatorTokens = tokensJson.component.separator;
+var separatorSpacing = tokensJson.semantic.spacing.separator;
 var StyledDivider = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -3545,12 +3573,12 @@ var StyledStack = styled.div.withConfig({
 // Helper function to convert gap prop to CSS value
 var getGapValue = function getGapValue(gap) {
   // Get semantic layout spacing token
-  var semanticSpacing = tokensData.semantic.spacing.layout;
+  var semanticSpacing = tokensJson.semantic.spacing.layout;
   if (gap in semanticSpacing) {
     return semanticSpacing[gap];
   }
   // Fallback to medium layout spacing if token not found
-  return tokensData.semantic.spacing.layout.md;
+  return tokensJson.semantic.spacing.layout.md;
 };
 var Stack = function Stack(_a) {
   var children = _a.children,
@@ -3581,11 +3609,11 @@ var Stack = function Stack(_a) {
 var templateObject_1$v;
 
 // Destructure tokens for cleaner access
-var statusColors = tokensData.semantic.color.status;
-var spacing$5 = tokensData.semantic.spacing.layout;
-var radius$1 = tokensData.semantic.border.radius;
-var transition = tokensData.semantic.motion.transition;
-var typography$2 = tokensData.semantic.typography;
+var statusColors = tokensJson.semantic.color.status;
+var spacing$5 = tokensJson.semantic.spacing.layout;
+var radius$1 = tokensJson.semantic.border.radius;
+var transition = tokensJson.semantic.motion.transition;
+var typography$2 = tokensJson.semantic.typography;
 var scaleIn$1 = styled.keyframes(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
   var configs = {
@@ -3747,7 +3775,7 @@ var StatusBadge = function StatusBadge(_a) {
 StatusBadge.displayName = 'StatusBadge';
 var templateObject_1$u, templateObject_2$o, templateObject_3$m;
 
-var semantic$e = tokensData.semantic;
+var semantic$e = tokensJson.semantic;
 var color$4 = semantic$e.color,
   spacing$4 = semantic$e.spacing,
   border$6 = semantic$e.border,
@@ -3847,7 +3875,7 @@ var Tag = function Tag(_a) {
 var templateObject_1$t;
 
 // Destructure tokens for cleaner access
-var semantic$d = tokensData.semantic;
+var semantic$d = tokensJson.semantic;
 var spacing$3 = semantic$d.spacing;
 var layout$2 = spacing$3.layout;
 var StyledBalanceSection = styled.div.withConfig({
@@ -4023,8 +4051,8 @@ var AccountCard = function AccountCard(_a) {
 };
 var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
 
-var semantic$c = tokensData.semantic,
-  base$a = tokensData.base;
+var semantic$c = tokensJson.semantic,
+  base$a = tokensJson.base;
 var StyledListItem = styled.li.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -4064,7 +4092,7 @@ var StyledItemContent = styled.div.withConfig({
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled,
     $selected = _a.$selected;
-  return !$disabled && $interactive && "\n    &:hover {\n      background-color: ".concat($selected ? tokensData.component.button.variants.secondary.backgroundColor : tokensData.component.button.variants.secondary.backgroundColor, ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensData.component.button.variants.naked.backgroundColor, ";\n    }\n  ");
+  return !$disabled && $interactive && "\n    &:hover {\n      background-color: ".concat($selected ? tokensJson.component.button.variants.secondary.backgroundColor : tokensJson.component.button.variants.secondary.backgroundColor, ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensJson.component.button.variants.naked.backgroundColor, ";\n    }\n  ");
 }, semantic$c.color.border.interactive);
 var StyledIconContainer$1 = styled.div.withConfig({
   displayName: "ListItem__StyledIconContainer",
@@ -4218,7 +4246,7 @@ var ListItem = function ListItem(_a) {
 ListItem.displayName = 'ListItem';
 var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
 
-var _a$4 = tokensData.semantic,
+var _a$4 = tokensJson.semantic,
   color$3 = _a$4.color,
   border$5 = _a$4.border,
   layout$1 = _a$4.spacing.layout,
@@ -4561,9 +4589,9 @@ function agentInputStateTransition(currentState, event) {
   }
 }
 
-var semantic$b = tokensData.semantic,
-  base$9 = tokensData.base,
-  component$1 = tokensData.component;
+var semantic$b = tokensJson.semantic,
+  base$9 = tokensJson.base,
+  component$1 = tokensJson.component;
 var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
 var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
 var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
@@ -5276,8 +5304,8 @@ var AgentInput = function AgentInput(_a) {
 };
 var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
 
-var semantic$a = tokensData.semantic,
-  base$8 = tokensData.base;
+var semantic$a = tokensJson.semantic,
+  base$8 = tokensJson.base;
 // Default icons by variant
 var variantIcons = {
   error: 'crossCircle',
@@ -5428,11 +5456,11 @@ var _a$3, _b$1, _c, _d, _e, _f;
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensJson.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
+})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensJson.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensJson.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensJson.semantic.color.text.subdued, tokensJson.semantic.color.text["default"]);
 var BreadcrumbSeparator = styled.span.withConfig({
   displayName: "Breadcrumbs__BreadcrumbSeparator",
   componentId: "sc-7ouzg5-2"
@@ -5489,7 +5517,7 @@ var templateObject_1$n, templateObject_2$i, templateObject_3$g;
 var CardSmallStyled = styled.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
   componentId: "sc-jpcqvd-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokensJson.base.border.radius[2], tokensJson.semantic.color.border.strong);
 var CardSmall = function CardSmall(_a) {
   var title = _a.title,
     picture = _a.picture,
@@ -5543,7 +5571,7 @@ var CardSmall = function CardSmall(_a) {
 };
 var templateObject_1$m;
 
-var border$4 = tokensData.base.border;
+var border$4 = tokensJson.base.border;
 var CardLargeStyled = styled.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
   componentId: "sc-1rfgdzl-0"
@@ -5633,25 +5661,25 @@ var StyledCheckbox = styled.span.withConfig({
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
- */])), tokensData.component.input["default"].borderRadius, tokensData.component.input["default"].borderWidth, function (props) {
-  return props.$checked || props.$indeterminate ? tokensData.semantic.color.background.inverse : tokensData.component.input["default"].backgroundColor;
+ */])), tokensJson.component.input["default"].borderRadius, tokensJson.component.input["default"].borderWidth, function (props) {
+  return props.$checked || props.$indeterminate ? tokensJson.semantic.color.background.inverse : tokensJson.component.input["default"].backgroundColor;
 }, function (props) {
-  if (props.$state === 'error') return tokensData.component.input.error.borderColor;
-  if (props.$checked || props.$indeterminate) return tokensData.semantic.border.strong;
-  return tokensData.component.input["default"].borderColor;
+  if (props.$state === 'error') return tokensJson.component.input.error.borderColor;
+  if (props.$checked || props.$indeterminate) return tokensJson.semantic.border.strong;
+  return tokensJson.component.input["default"].borderColor;
 }, function (props) {
   return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
 }, HiddenCheckboxInput, function (props) {
-  return props.$state === 'error' ? tokensData.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensData.semantic.border.strong : tokensData.component.input.hover.borderColor;
-}, HiddenCheckboxInput, tokensData.component.input.focus.outline, tokensData.component.input.focus.outlineOffset, function (props) {
-  return props.$state === 'error' ? tokensData.component.input.error.focus.borderColor : tokensData.component.input.focus.borderColor;
+  return props.$state === 'error' ? tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensJson.semantic.border.strong : tokensJson.component.input.hover.borderColor;
+}, HiddenCheckboxInput, tokensJson.component.input.focus.outline, tokensJson.component.input.focus.outlineOffset, function (props) {
+  return props.$state === 'error' ? tokensJson.component.input.error.focus.borderColor : tokensJson.component.input.focus.borderColor;
 }, function (props) {
-  return props.$state === 'disabled' && "\n    background-color: ".concat(tokensData.component.input.disabled.backgroundColor, ";\n    border-color: ").concat(tokensData.component.input.disabled.borderColor, ";\n  ");
+  return props.$state === 'disabled' && "\n    background-color: ".concat(tokensJson.component.input.disabled.backgroundColor, ";\n    border-color: ").concat(tokensJson.component.input.disabled.borderColor, ";\n  ");
 }, function (props) {
   return props.$checked ? 'block' : 'none';
-}, tokensData.semantic.color.text.inverse, function (props) {
+}, tokensJson.semantic.color.text.inverse, function (props) {
   return props.$indeterminate ? 'block' : 'none';
-}, tokensData.semantic.color.text.inverse);
+}, tokensJson.semantic.color.text.inverse);
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
@@ -5665,7 +5693,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
 })(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"
 /**
  * Label text with proper typography
- */])), tokensData.base.spacing[3], function (props) {
+ */])), tokensJson.base.spacing[3], function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, function (props) {
   return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
@@ -5679,15 +5707,15 @@ var StyledCheckboxLabel = styled.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckboxLabel",
   componentId: "sc-1ddpctx-3"
-})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
-  return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
+})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokensJson.component.input["default"].font, function (props) {
+  return props.$disabled ? tokensJson.component.input.disabled.textColor : tokensJson.component.input["default"].textColor;
 });
 var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$d;
 
 var StyledFieldContainer$3 = styled.div.withConfig({
   displayName: "Checkbox__StyledFieldContainer",
   componentId: "sc-vquz3v-0"
-})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensData.base.spacing[1]);
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensJson.base.spacing[1]);
 var StyledHelperText$4 = styled.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
@@ -5713,9 +5741,9 @@ var StyledHelperText$4 = styled.span.withConfig({
  *   required
  * />
  * ```
- */])), tokensData.semantic.typography.small, function (props) {
-  return props.$error ? tokensData.semantic.color.text.error : tokensData.semantic.color.text.subdued;
-}, tokensData.base.spacing[9]);
+ */])), tokensJson.semantic.typography.small, function (props) {
+  return props.$error ? tokensJson.semantic.color.text.error : tokensJson.semantic.color.text.subdued;
+}, tokensJson.base.spacing[9]);
 /**
  * Checkbox component for binary selection with WCAG 2.2 AA compliance
  *
@@ -5837,7 +5865,7 @@ var ChipGroup = function ChipGroup(_a) {
 };
 var templateObject_1$i;
 
-var _a$2 = tokensData.semantic,
+var _a$2 = tokensJson.semantic,
   color$2 = _a$2.color,
   border$3 = _a$2.border,
   spacing$2 = _a$2.spacing;
@@ -5845,7 +5873,7 @@ var _a$2 = tokensData.semantic,
 var StyledCodeBlock = styled.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"])), color$2.background.subtle, border$3.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$2.text["default"], function (_a) {
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height 300ms ease-in-out;\n  \n  ", "\n"])), color$2.background.subtle, border$3.subtle, tokensJson.base.border.radius[2], spacing$2.layout.md, tokensJson.base.fontFamily.monospace, tokensJson.base.fontSize[1], tokensJson.base.lineHeight[3], color$2.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
@@ -5869,7 +5897,7 @@ var CopyButtonWrapper = styled.div.withConfig({
 var ExpandButtonWrapper = styled.div.withConfig({
   displayName: "CodeBlock__ExpandButtonWrapper",
   componentId: "sc-1p1t0kp-3"
-})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, tokensData.base.border.radius[2], function (_a) {
+})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  width: calc(100% - 2px);\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n  \n  ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, tokensJson.base.border.radius[2], function (_a) {
   var $hasGradient = _a.$hasGradient;
   return $hasGradient ? "\n    margin-top: -".concat(spacing$2.layout['4xl'], ";\n    padding-top: ").concat(spacing$2.layout['4xl'], ";\n    background: linear-gradient(\n      to bottom,\n      transparent 0%,\n      ").concat(color$2.background.subtle, " 60%\n    );\n  ") : "\n    background: transparent;\n  ";
 });
@@ -6032,18 +6060,18 @@ var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4
 var StyledHeader$1 = styled.div.withConfig({
   displayName: "DateGroup__StyledHeader",
   componentId: "sc-9nfm1f-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], function (_a) {
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  \n  ", "\n"])), tokensJson.semantic.spacing.layout.md, tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.color.background["default"], tokensJson.semantic.color.border["default"], function (_a) {
   var $sticky = _a.$sticky;
-  return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    box-shadow: ".concat(tokensData.base.shadow[2], ";\n  ");
+  return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    box-shadow: ".concat(tokensJson.base.shadow[2], ";\n  ");
 });
 var StyledLeftSection = styled.div.withConfig({
   displayName: "DateGroup__StyledLeftSection",
   componentId: "sc-9nfm1f-1"
-})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
+})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm);
 var StyledRightSection = styled.div.withConfig({
   displayName: "DateGroup__StyledRightSection",
   componentId: "sc-9nfm1f-2"
-})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.md);
+})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.md);
 var StyledContent = styled.div.withConfig({
   displayName: "DateGroup__StyledContent",
   componentId: "sc-9nfm1f-3"
@@ -6121,7 +6149,7 @@ var DateGroup = function DateGroup(_a) {
 };
 var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
 
-var semantic$9 = tokensData.semantic;
+var semantic$9 = tokensJson.semantic;
 var StyledContainer$1 = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -6240,21 +6268,21 @@ var EmptyState = function EmptyState(_a) {
 };
 var templateObject_1$f, templateObject_2$d, templateObject_3$c;
 
-var _a$1 = tokensData.base,
+var _a$1 = tokensJson.base,
   spacing$1 = _a$1.spacing,
   border$2 = _a$1.border;
 var FeatureBlockStyled = styled.div.withConfig({
   displayName: "FeatureBlock__FeatureBlockStyled",
   componentId: "sc-1mi4lso-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$2.radius[6]);
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokensJson.base.breakpoint.md, tokensJson.base.breakpoint.lg, spacing$1[12], border$2.radius[6]);
 var ImageWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ImageWrapper",
   componentId: "sc-1mi4lso-1"
-})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokensData.base.breakpoint.lg);
+})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokensJson.base.breakpoint.lg);
 var ContentSection = styled.div.withConfig({
   displayName: "FeatureBlock__ContentSection",
   componentId: "sc-1mi4lso-2"
-})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
+})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokensJson.base.breakpoint.lg, spacing$1[8], tokensJson.base.breakpoint.xl, spacing$1[24]);
 var ButtonWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ButtonWrapper",
   componentId: "sc-1mi4lso-3"
@@ -6321,15 +6349,15 @@ var FeatureBlock = function FeatureBlock(_a) {
 };
 var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
 
-var _a = tokensData.base,
+var _a = tokensJson.base,
   spacing = _a.spacing,
   shadow = _a.shadow,
   zIndex = _a.zIndex,
-  _b = tokensData.semantic,
+  _b = tokensJson.semantic,
   color$1 = _b.color,
   typography = _b.typography,
   border$1 = _b.border,
-  input$1 = tokensData.component.input;
+  input$1 = tokensJson.component.input;
 var DropdownContainer = styled.div.withConfig({
   displayName: "Dropdown__DropdownContainer",
   componentId: "sc-kz07c4-0"
@@ -6575,7 +6603,7 @@ var Dropdown = function Dropdown(_a) {
 };
 var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
 
-var semantic$8 = tokensData.semantic;
+var semantic$8 = tokensJson.semantic;
 var StyledList = styled.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -6608,8 +6636,8 @@ var List = function List(_a) {
 List.displayName = 'List';
 var templateObject_1$c;
 
-var semantic$7 = tokensData.semantic,
-  base$7 = tokensData.base;
+var semantic$7 = tokensJson.semantic,
+  base$7 = tokensJson.base;
 var layout = semantic$7.spacing.layout,
   color = semantic$7.color,
   border = semantic$7.border,
@@ -6831,7 +6859,7 @@ var Modal = function Modal(_a) {
 Modal.displayName = 'Modal';
 var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
 
-var input = tokensData.component.input;
+var input = tokensJson.component.input;
 var StyledInputBase = styled.input.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -6872,8 +6900,8 @@ 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;
 
-var semantic$6 = tokensData.semantic,
-  base$6 = tokensData.base;
+var semantic$6 = tokensJson.semantic,
+  base$6 = tokensJson.base;
 var StyledFieldContainer$2 = styled.div.withConfig({
   displayName: "NumberInput__StyledFieldContainer",
   componentId: "sc-qotc3w-0"
@@ -7133,9 +7161,9 @@ var PageTitleStyled = styled.div.withConfig({
   },
   displayName: "PageTitle__PageTitleStyled",
   componentId: "sc-16h256f-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokensJson.base.spacing[6], function (_a) {
   var $hasBackButton = _a.$hasBackButton;
-  return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
+  return $hasBackButton ? tokensJson.base.spacing[0] : tokensJson.base.spacing[12];
 });
 var PageTitle = function PageTitle(_a) {
   var title = _a.title,
@@ -7166,8 +7194,8 @@ var PageTitle = function PageTitle(_a) {
 };
 var templateObject_1$8;
 
-var semantic$5 = tokensData.semantic,
-  base$5 = tokensData.base;
+var semantic$5 = tokensJson.semantic,
+  base$5 = tokensJson.base;
 var StyledFieldContainer$1 = styled.div.withConfig({
   displayName: "PasswordField__StyledFieldContainer",
   componentId: "sc-1p15zk0-0"
@@ -7299,9 +7327,9 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 PasswordField.displayName = 'PasswordField';
 var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4;
 
-var semantic$4 = tokensData.semantic,
-  base$4 = tokensData.base,
-  component = tokensData.component;
+var semantic$4 = tokensJson.semantic,
+  base$4 = tokensJson.base,
+  component = tokensJson.component;
 var StyledSearchContainer = styled.div.withConfig({
   displayName: "SearchField__StyledSearchContainer",
   componentId: "sc-qhz9i8-0"
@@ -7628,8 +7656,8 @@ var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 SearchField.displayName = 'SearchField';
 var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4;
 
-var semantic$3 = tokensData.semantic,
-  base$3 = tokensData.base;
+var semantic$3 = tokensJson.semantic,
+  base$3 = tokensJson.base;
 // Fade in animation for overlay
 var fadeIn = styled.keyframes(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"
 // Slide animations for each position
@@ -7833,8 +7861,8 @@ var Sheet = function Sheet(_a) {
 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;
 
-var semantic$2 = tokensData.semantic,
-  base$2 = tokensData.base;
+var semantic$2 = tokensJson.semantic,
+  base$2 = tokensJson.base;
 var StyledSliderContainer = styled.div.withConfig({
   displayName: "Slider__StyledSliderContainer",
   componentId: "sc-6mh2d4-0"
@@ -8239,8 +8267,8 @@ var Slider = function Slider(_a) {
 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;
 
-var semantic$1 = tokensData.semantic,
-  base$1 = tokensData.base;
+var semantic$1 = tokensJson.semantic,
+  base$1 = tokensJson.base;
 var StyledTabList = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -8458,8 +8486,8 @@ var TabBar = function TabBar(_a) {
 TabBar.displayName = 'TabBar';
 var templateObject_1$3, templateObject_2$3, templateObject_3$3;
 
-var semantic = tokensData.semantic,
-  base = tokensData.base;
+var semantic = tokensJson.semantic,
+  base = tokensJson.base;
 var StyledFieldContainer = styled.div.withConfig({
   displayName: "TextField__StyledFieldContainer",
   componentId: "sc-1ys3b0-0"
@@ -8564,9 +8592,9 @@ var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4
 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) {
+})(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"])), tokensJson.semantic.spacing.layout.md, tokensJson.semantic.spacing.layout.md, tokensJson.semantic.color.background["default"], tokensJson.semantic.color.border["default"], tokensJson.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.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  ");
+  return $clickable && "\n    cursor: pointer;\n    \n    &:hover {\n      background-color: ".concat(tokensJson.semantic.color.background.subtle, ";\n    }\n    \n    &:active {\n      background-color: ").concat(tokensJson.semantic.color.background['interactive-active'], ";\n    }\n    \n    &:focus-visible {\n      outline: 2px solid ").concat(tokensJson.semantic.color.border.interactive, ";\n      outline-offset: -2px;\n    }\n  ");
 });
 var StyledAvatarSection = styled.div.withConfig({
   displayName: "TransactionListItem__StyledAvatarSection",
@@ -8579,23 +8607,23 @@ var StyledMainContent = styled.div.withConfig({
 var StyledTopRow = styled.div.withConfig({
   displayName: "TransactionListItem__StyledTopRow",
   componentId: "sc-7yunm0-3"
-})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm);
 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.sm);
+})(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"])), tokensJson.semantic.spacing.layout.sm);
 var StyledBottomRow = styled.div.withConfig({
   displayName: "TransactionListItem__StyledBottomRow",
   componentId: "sc-7yunm0-5"
-})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm);
 var StyledMetadata = styled.div.withConfig({
   displayName: "TransactionListItem__StyledMetadata",
   componentId: "sc-7yunm0-6"
-})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm);
 var StyledIconIndicator = styled.div.withConfig({
   displayName: "TransactionListItem__StyledIconIndicator",
   componentId: "sc-7yunm0-7"
-})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.color.icon.subdued);
+})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"])), tokensJson.semantic.spacing.layout.xs, tokensJson.semantic.color.icon.subdued);
 var StyledTruncatedText = styled.span.withConfig({
   displayName: "TransactionListItem__StyledTruncatedText",
   componentId: "sc-7yunm0-8"
@@ -8776,12 +8804,12 @@ var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4
 
 // Breakpoints using base tokens
 var breakpoints = {
-  xs: tokensData.base.breakpoint.xs,
-  sm: tokensData.base.breakpoint.sm,
-  md: tokensData.base.breakpoint.md,
-  lg: tokensData.base.breakpoint.lg,
-  xl: tokensData.base.breakpoint.xl,
-  '2xl': tokensData.base.breakpoint['2xl']
+  xs: tokensJson.base.breakpoint.xs,
+  sm: tokensJson.base.breakpoint.sm,
+  md: tokensJson.base.breakpoint.md,
+  lg: tokensJson.base.breakpoint.lg,
+  xl: tokensJson.base.breakpoint.xl,
+  '2xl': tokensJson.base.breakpoint['2xl']
 };
 // Media query helpers
 var media = {
@@ -8817,9 +8845,9 @@ var Grid = function Grid(_a) {
     children = _a.children;
   return jsxRuntime.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,
+    "$gap": gap ? tokensJson.base.spacing[gap] : undefined,
+    "$gapX": gapX ? tokensJson.base.spacing[gapX] : undefined,
+    "$gapY": gapY ? tokensJson.base.spacing[gapY] : undefined,
     className: className,
     children: children
   });
@@ -8955,29 +8983,36 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
     "$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,
+    "$gap": gap ? tokensJson.base.spacing[gap] : undefined,
+    "$gapSm": gapSm ? tokensJson.base.spacing[gapSm] : undefined,
+    "$gapMd": gapMd ? tokensJson.base.spacing[gapMd] : undefined,
+    "$gapLg": gapLg ? tokensJson.base.spacing[gapLg] : undefined,
+    "$gapXl": gapXl ? tokensJson.base.spacing[gapXl] : undefined,
+    "$gapX": gapX ? tokensJson.base.spacing[gapX] : undefined,
+    "$gapXSm": gapXSm ? tokensJson.base.spacing[gapXSm] : undefined,
+    "$gapXMd": gapXMd ? tokensJson.base.spacing[gapXMd] : undefined,
+    "$gapXLg": gapXLg ? tokensJson.base.spacing[gapXLg] : undefined,
+    "$gapXXl": gapXXl ? tokensJson.base.spacing[gapXXl] : undefined,
+    "$gapY": gapY ? tokensJson.base.spacing[gapY] : undefined,
+    "$gapYSm": gapYSm ? tokensJson.base.spacing[gapYSm] : undefined,
+    "$gapYMd": gapYMd ? tokensJson.base.spacing[gapYMd] : undefined,
+    "$gapYLg": gapYLg ? tokensJson.base.spacing[gapYLg] : undefined,
+    "$gapYXl": gapYXl ? tokensJson.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;
 
-// Main design system exports
-var tokens = tokensData;
+// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,
+// which consumers can only resolve with `resolveJsonModule`.
+var tokens = tokensJson;
+
+// Icon type definitions for external consumption
+// This is a self-contained type that doesn't depend on JSON imports
+// to ensure it works correctly in consuming projects
+// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).
+var iconsData = iconsJson;
 
 exports.AccountCard = AccountCard;
 exports.ActionSheet = ActionSheet;