@common-origin/design-system 2.12.0 → 2.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/LICENSE +21 -0
  2. package/dist/components/atoms/Box/Box.d.ts +26 -26
  3. package/dist/components/atoms/Chip/shared/ChipBase.d.ts +9 -3
  4. package/dist/components/layout/GridSystem/GridSystem.d.ts +19 -19
  5. package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts +12 -4
  6. package/dist/components/molecules/Dropdown/Dropdown.d.ts +3 -1
  7. package/dist/components/molecules/TextField/InputBase.d.ts +6 -2
  8. package/dist/index.d.ts +1 -858
  9. package/dist/index.esm.js +228 -193
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +228 -193
  12. package/dist/index.js.map +1 -1
  13. package/dist/lib/styleUtils.d.ts +0 -3
  14. package/dist/styles/tokens.json +30 -2
  15. package/dist/tokens/index.esm.js +35 -4
  16. package/dist/tokens/index.esm.js.map +1 -1
  17. package/dist/tokens/index.js +35 -4
  18. package/dist/tokens/index.js.map +1 -1
  19. package/dist/tokens/tokens.d.ts +4 -860
  20. package/dist/tokens/types/tokens.d.ts +889 -0
  21. package/dist/types/icons.d.ts +1 -1
  22. package/dist/types/tokens.d.ts +889 -0
  23. package/package.json +33 -16
  24. package/dist/lib/errorReporting.d.ts +0 -24
  25. package/dist/page-components/ErrorBoundaries.d.ts +0 -16
  26. package/dist/page-components/ErrorBoundary.d.ts +0 -20
  27. package/dist/page-components/Footer/Footer.d.ts +0 -8
  28. package/dist/page-components/Footer/index.d.ts +0 -1
  29. package/dist/page-components/HeroBanner/HeroBanner.d.ts +0 -10
  30. package/dist/page-components/HeroBanner/index.d.ts +0 -1
  31. package/dist/page-components/Meta.d.ts +0 -2
  32. package/dist/page-components/Navigation.d.ts +0 -2
  33. package/dist/page-components/PageLayout.d.ts +0 -7
  34. package/dist/page-components/index.d.ts +0 -8
package/dist/index.esm.js CHANGED
@@ -363,7 +363,9 @@ var base$d = {
363
363
  "2": "400",
364
364
  "3": "500",
365
365
  "4": "600",
366
- "5": "700"
366
+ "5": "700",
367
+ "6": "800",
368
+ "7": "900"
367
369
  },
368
370
  lineHeight: {
369
371
  "1": "1rem",
@@ -751,6 +753,20 @@ var component$3 = {
751
753
  cursor: "not-allowed"
752
754
  }
753
755
  },
756
+ badge: {
757
+ dot: {
758
+ size: "0.5rem"
759
+ },
760
+ count: {
761
+ minWidth: "1rem",
762
+ height: "1rem",
763
+ paddingX: "0.25rem"
764
+ },
765
+ ring: {
766
+ width: "0.125rem"
767
+ },
768
+ borderRadius: "10rem"
769
+ },
754
770
  $ref: "./component/index.json"
755
771
  };
756
772
  var semantic$k = {
@@ -804,6 +820,14 @@ var semantic$k = {
804
820
  lg: "2rem",
805
821
  xl: "3rem"
806
822
  },
823
+ component: {
824
+ xs: "0.25rem",
825
+ sm: "0.5rem",
826
+ md: "0.75rem",
827
+ lg: "1rem",
828
+ xl: "1.25rem",
829
+ "2xl": "1.5rem"
830
+ },
807
831
  layout: {
808
832
  none: "0",
809
833
  xs: "0.25rem",
@@ -852,7 +876,11 @@ var semantic$k = {
852
876
  warning: "#B14C00",
853
877
  "warning-subtle": "#FFECCC",
854
878
  disabled: "#dee2e6",
855
- progressTrack: "#dee2e6"
879
+ progressTrack: "#dee2e6",
880
+ page: "#f8f9fa",
881
+ overlay: "rgba(33, 37, 41, 0.5)",
882
+ "hover-overlay": "rgba(33, 37, 41, 0.1)",
883
+ "active-overlay": "rgba(33, 37, 41, 0.15)"
856
884
  },
857
885
  border: {
858
886
  "default": "#e9ecef",
@@ -956,14 +984,14 @@ var semantic$k = {
956
984
  },
957
985
  $ref: "./semantic/index.json"
958
986
  };
959
- var tokensData = {
987
+ var tokensJson = {
960
988
  base: base$d,
961
989
  component: component$3,
962
990
  semantic: semantic$k
963
991
  };
964
992
 
965
993
  // Destructure tokens
966
- var semantic$j = tokensData.semantic;
994
+ var semantic$j = tokensJson.semantic;
967
995
  var color$a = semantic$j.color,
968
996
  size$1 = semantic$j.size,
969
997
  border$a = semantic$j.border;
@@ -996,14 +1024,14 @@ var AvatarInitials = styled.span.withConfig({
996
1024
  componentId: "sc-ezn4ax-2"
997
1025
  })(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"
998
1026
  // Helper function to get initials from name
999
- ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
1027
+ ])), tokensJson.base.fontFamily.body, tokensJson.base.fontWeight[3], function (_a) {
1000
1028
  var $size = _a.$size;
1001
1029
  var sizeMap = {
1002
- xs: tokensData.base.fontSize[1],
1003
- sm: tokensData.base.fontSize[2],
1004
- md: tokensData.base.fontSize[3],
1005
- lg: tokensData.base.fontSize[4],
1006
- xl: tokensData.base.fontSize[5]
1030
+ xs: tokensJson.base.fontSize[1],
1031
+ sm: tokensJson.base.fontSize[2],
1032
+ md: tokensJson.base.fontSize[3],
1033
+ lg: tokensJson.base.fontSize[4],
1034
+ xl: tokensJson.base.fontSize[5]
1007
1035
  };
1008
1036
  return sizeMap[$size];
1009
1037
  }, color$a.text["default"]);
@@ -1062,18 +1090,18 @@ var Avatar = function Avatar(_a) {
1062
1090
  };
1063
1091
  var templateObject_1$K, templateObject_2$v, templateObject_3$s;
1064
1092
 
1065
- var _a$8 = tokensData.semantic,
1093
+ var _a$8 = tokensJson.semantic,
1066
1094
  typography$5 = _a$8.typography,
1067
1095
  color$9 = _a$8.color;
1068
1096
  var getTypographyStyles = function getTypographyStyles(variant) {
1069
1097
  var styles = {
1070
- display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
1071
- h1: "font: ".concat(typography$5.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
1072
- h2: "font: ".concat(typography$5.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
1073
- h3: "font: ".concat(typography$5.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
1074
- h4: "font: ".concat(typography$5.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
1075
- h5: "font: ".concat(typography$5.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
1076
- h6: "font: ".concat(typography$5.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
1098
+ display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[0], ";"),
1099
+ h1: "font: ".concat(typography$5.h1, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[0], ";"),
1100
+ h2: "font: ".concat(typography$5.h2, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[1], ";"),
1101
+ h3: "font: ".concat(typography$5.h3, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[1], ";"),
1102
+ h4: "font: ".concat(typography$5.h4, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[1], ";"),
1103
+ h5: "font: ".concat(typography$5.h5, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[2], ";"),
1104
+ h6: "font: ".concat(typography$5.h6, "; letter-spacing: ").concat(tokensJson.base.letterSpacing[2], ";"),
1077
1105
  subtitle: "font: ".concat(typography$5.subtitle, ";"),
1078
1106
  body: "font: ".concat(typography$5.body, ";"),
1079
1107
  small: "font: ".concat(typography$5.small, ";"),
@@ -1197,7 +1225,7 @@ var Typography = function Typography(_a) {
1197
1225
  };
1198
1226
  var templateObject_1$J;
1199
1227
 
1200
- var semantic$i = tokensData.semantic;
1228
+ var semantic$i = tokensJson.semantic;
1201
1229
  var color$8 = semantic$i.color,
1202
1230
  border$9 = semantic$i.border;
1203
1231
  var radius$4 = border$9.radius;
@@ -1294,35 +1322,35 @@ var StyledBox = styled.div.withConfig({
1294
1322
  }, function (props) {
1295
1323
  return props.$flexWrap && css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
1296
1324
  }, function (props) {
1297
- return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
1325
+ return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensJson.semantic.spacing.layout[props.$gap]);
1298
1326
  }, function (props) {
1299
- return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
1327
+ return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensJson.semantic.spacing.layout[props.$m]);
1300
1328
  }, function (props) {
1301
- return props.$mt && css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
1329
+ return props.$mt && css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensJson.semantic.spacing.layout[props.$mt]);
1302
1330
  }, function (props) {
1303
- return props.$mr && css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
1331
+ return props.$mr && css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensJson.semantic.spacing.layout[props.$mr]);
1304
1332
  }, function (props) {
1305
- return props.$mb && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
1333
+ return props.$mb && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$mb]);
1306
1334
  }, function (props) {
1307
- return props.$ml && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
1335
+ return props.$ml && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$ml]);
1308
1336
  }, function (props) {
1309
- return props.$mx && css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), tokensData.semantic.spacing.layout[props.$mx], tokensData.semantic.spacing.layout[props.$mx]);
1337
+ return props.$mx && css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), tokensJson.semantic.spacing.layout[props.$mx], tokensJson.semantic.spacing.layout[props.$mx]);
1310
1338
  }, function (props) {
1311
- return props.$my && css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), tokensData.semantic.spacing.layout[props.$my], tokensData.semantic.spacing.layout[props.$my]);
1339
+ return props.$my && css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), tokensJson.semantic.spacing.layout[props.$my], tokensJson.semantic.spacing.layout[props.$my]);
1312
1340
  }, function (props) {
1313
- return props.$p && css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
1341
+ return props.$p && css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensJson.semantic.spacing.layout[props.$p]);
1314
1342
  }, function (props) {
1315
- return props.$pt && css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensData.semantic.spacing.layout[props.$pt]);
1343
+ return props.$pt && css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensJson.semantic.spacing.layout[props.$pt]);
1316
1344
  }, function (props) {
1317
- return props.$pr && css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
1345
+ return props.$pr && css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensJson.semantic.spacing.layout[props.$pr]);
1318
1346
  }, function (props) {
1319
- return props.$pb && css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
1347
+ return props.$pb && css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$pb]);
1320
1348
  }, function (props) {
1321
- return props.$pl && css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensData.semantic.spacing.layout[props.$pl]);
1349
+ return props.$pl && css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$pl]);
1322
1350
  }, function (props) {
1323
- return props.$px && 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]);
1351
+ return props.$px && 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]);
1324
1352
  }, function (props) {
1325
- return props.$py && 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]);
1353
+ return props.$py && 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]);
1326
1354
  }, function (props) {
1327
1355
  return props.$width && css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
1328
1356
  }, function (props) {
@@ -1346,29 +1374,29 @@ var StyledBox = styled.div.withConfig({
1346
1374
  }, function (props) {
1347
1375
  return props.$left && css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
1348
1376
  }, function (props) {
1349
- return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.semantic.border.radius[props.$borderRadius]);
1377
+ return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensJson.semantic.border.radius[props.$borderRadius]);
1350
1378
  }, function (props) {
1351
- return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensData.semantic.color.border[props.$border]);
1379
+ return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$border]);
1352
1380
  }, function (props) {
1353
- return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: 1px solid ", ";"], ["border-top: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderTop]);
1381
+ return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: 1px solid ", ";"], ["border-top: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$borderTop]);
1354
1382
  }, function (props) {
1355
- return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: 1px solid ", ";"], ["border-right: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderRight]);
1383
+ return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: 1px solid ", ";"], ["border-right: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$borderRight]);
1356
1384
  }, function (props) {
1357
- return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderBottom]);
1385
+ return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$borderBottom]);
1358
1386
  }, function (props) {
1359
- return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderLeft]);
1387
+ return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokensJson.semantic.color.border[props.$borderLeft]);
1360
1388
  }, function (props) {
1361
- return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensData.semantic.color.background[props.$bg]);
1389
+ return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensJson.semantic.color.background[props.$bg]);
1362
1390
  }, function (props) {
1363
- return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensData.semantic.color.text[props.$color]);
1391
+ return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensJson.semantic.color.text[props.$color]);
1364
1392
  }, function (props) {
1365
- return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$shadow]);
1393
+ return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensJson.semantic.elevation[props.$shadow]);
1366
1394
  }, function (props) {
1367
1395
  return props.$cursor && css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["cursor: ", ";"], ["cursor: ", ";"])), props.$cursor);
1368
1396
  }, function (props) {
1369
1397
  return props.$transition && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
1370
1398
  }, function (props) {
1371
- return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "], ["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensData.semantic.color.border.interactive);
1399
+ 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: ", ";"])), tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensJson.semantic.color.border.interactive);
1372
1400
  }, function (props) {
1373
1401
  return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
1374
1402
  }, function (props) {
@@ -2236,7 +2264,7 @@ var move = {
2236
2264
  decorativeDefault: false,
2237
2265
  ariaLabelDefault: "Move"
2238
2266
  };
2239
- var iconsData = {
2267
+ var iconsJson = {
2240
2268
  add: add,
2241
2269
  addRing: addRing,
2242
2270
  arrowDown: arrowDown,
@@ -2310,35 +2338,35 @@ var IconStyled = styled.span.withConfig({
2310
2338
  componentId: "sc-1105czq-0"
2311
2339
  })(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) {
2312
2340
  var $size = _a.$size;
2313
- return tokensData.semantic.size.icon[$size];
2341
+ return tokensJson.semantic.size.icon[$size];
2314
2342
  }, function (_a) {
2315
2343
  var $size = _a.$size;
2316
- return tokensData.semantic.size.icon[$size];
2344
+ return tokensJson.semantic.size.icon[$size];
2317
2345
  }, function (_a) {
2318
2346
  var $iconColor = _a.$iconColor;
2319
2347
  switch ($iconColor) {
2320
2348
  case 'default':
2321
- return tokensData.semantic.color.icon["default"];
2349
+ return tokensJson.semantic.color.icon["default"];
2322
2350
  case 'emphasis':
2323
- return tokensData.semantic.color.icon.emphasis;
2351
+ return tokensJson.semantic.color.icon.emphasis;
2324
2352
  case 'subdued':
2325
- return tokensData.semantic.color.icon.subdued;
2353
+ return tokensJson.semantic.color.icon.subdued;
2326
2354
  case 'disabled':
2327
- return tokensData.semantic.color.icon.disabled;
2355
+ return tokensJson.semantic.color.icon.disabled;
2328
2356
  case 'inverse':
2329
- return tokensData.semantic.color.icon.inverse;
2357
+ return tokensJson.semantic.color.icon.inverse;
2330
2358
  case 'interactive':
2331
- return tokensData.semantic.color.icon.interactive;
2359
+ return tokensJson.semantic.color.icon.interactive;
2332
2360
  case 'error':
2333
- return tokensData.semantic.color.icon.error;
2361
+ return tokensJson.semantic.color.icon.error;
2334
2362
  case 'success':
2335
- return tokensData.semantic.color.icon.success;
2363
+ return tokensJson.semantic.color.icon.success;
2336
2364
  case 'warning':
2337
- return tokensData.semantic.color.icon.warning;
2365
+ return tokensJson.semantic.color.icon.warning;
2338
2366
  case 'inherit':
2339
2367
  return 'currentColor';
2340
2368
  default:
2341
- return tokensData.semantic.color.icon["default"];
2369
+ return tokensJson.semantic.color.icon["default"];
2342
2370
  }
2343
2371
  });
2344
2372
  var Icon = function Icon(_a) {
@@ -2349,7 +2377,7 @@ var Icon = function Icon(_a) {
2349
2377
  iconColor = _c === void 0 ? 'default' : _c,
2350
2378
  dataTestId = _a["data-testid"];
2351
2379
  // Get the icon data from the JSON file
2352
- var iconData = iconsData[name];
2380
+ var iconData = iconsJson[name];
2353
2381
  if (!iconData) {
2354
2382
  console.warn("Icon \"".concat(name, "\" not found in icons.json"));
2355
2383
  return jsx(IconStyled, {
@@ -2376,10 +2404,10 @@ var Icon = function Icon(_a) {
2376
2404
  };
2377
2405
  var templateObject_1$G;
2378
2406
 
2379
- var button$1 = tokensData.component.button,
2380
- semantic$h = tokensData.semantic;
2407
+ var button$1 = tokensJson.component.button,
2408
+ semantic$h = tokensJson.semantic;
2381
2409
  // Base styles shared between button and link
2382
- 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");
2410
+ 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");
2383
2411
  // Dynamic variant styles using component tokens
2384
2412
  var getVariantStyles$1 = function getVariantStyles(_a) {
2385
2413
  var $variant = _a.$variant;
@@ -2558,8 +2586,8 @@ var Button = function Button(_a) {
2558
2586
  };
2559
2587
  var templateObject_1$F, templateObject_2$s;
2560
2588
 
2561
- var semantic$g = tokensData.semantic,
2562
- base$c = tokensData.base;
2589
+ var semantic$g = tokensJson.semantic,
2590
+ base$c = tokensJson.base;
2563
2591
  var color$7 = semantic$g.color,
2564
2592
  typography$4 = semantic$g.typography,
2565
2593
  border$8 = semantic$g.border,
@@ -2673,7 +2701,7 @@ var CategoryBadge = function CategoryBadge(_a) {
2673
2701
  CategoryBadge.displayName = 'CategoryBadge';
2674
2702
  var templateObject_1$E;
2675
2703
 
2676
- var chip = tokensData.component.chip;
2704
+ var chip = tokensJson.component.chip;
2677
2705
  // Helper function to get variant styles matching Button's approach
2678
2706
  var getVariantStyles = function getVariantStyles(_a) {
2679
2707
  var $variant = _a.$variant,
@@ -2682,7 +2710,7 @@ var getVariantStyles = function getVariantStyles(_a) {
2682
2710
  $disabled = _a.$disabled;
2683
2711
  // Boolean chips with selected state get special background
2684
2712
  if ($selected) {
2685
- 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 ");
2713
+ 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 ");
2686
2714
  }
2687
2715
  switch ($variant) {
2688
2716
  case 'emphasis':
@@ -2717,7 +2745,7 @@ var StyledChip = styled.span.withConfig({
2717
2745
  componentId: "sc-moa6zc-0"
2718
2746
  })(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"
2719
2747
  // Icon container for selected indicator or leading icons
2720
- ])), chip["default"].borderRadius, tokensData.semantic.motion.hover, function (props) {
2748
+ ])), chip["default"].borderRadius, tokensJson.semantic.motion.hover, function (props) {
2721
2749
  return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
2722
2750
  }, getVariantStyles, getSizeStyles, chip.focus.outline, chip.focus.outlineOffset);
2723
2751
  // Icon container for selected indicator or leading icons
@@ -2726,7 +2754,7 @@ var IconContainer = styled.span.withConfig({
2726
2754
  componentId: "sc-moa6zc-1"
2727
2755
  })(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"
2728
2756
  // Close button for dismissible chips
2729
- ])), tokensData.semantic.spacing.layout.xs);
2757
+ ])), tokensJson.semantic.spacing.layout.xs);
2730
2758
  // Close button for dismissible chips
2731
2759
  var CloseButton = styled.button.withConfig({
2732
2760
  shouldForwardProp: function shouldForwardProp(prop) {
@@ -2734,9 +2762,9 @@ var CloseButton = styled.button.withConfig({
2734
2762
  },
2735
2763
  displayName: "ChipBase__CloseButton",
2736
2764
  componentId: "sc-moa6zc-2"
2737
- })(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) {
2765
+ })(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) {
2738
2766
  return props.$disabled ? 'not-allowed' : 'pointer';
2739
- }, tokensData.semantic.motion.hover, tokensData.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
2767
+ }, tokensJson.semantic.motion.hover, tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
2740
2768
  var templateObject_1$D, templateObject_2$r, templateObject_3$p;
2741
2769
 
2742
2770
  /**
@@ -2966,12 +2994,12 @@ var BooleanChip = function BooleanChip(_a) {
2966
2994
 
2967
2995
  // Breakpoints using base tokens
2968
2996
  var breakpoints$1 = {
2969
- xs: tokensData.base.breakpoint.xs,
2970
- sm: tokensData.base.breakpoint.sm,
2971
- md: tokensData.base.breakpoint.md,
2972
- lg: tokensData.base.breakpoint.lg,
2973
- xl: tokensData.base.breakpoint.xl,
2974
- '2xl': tokensData.base.breakpoint['2xl']
2997
+ xs: tokensJson.base.breakpoint.xs,
2998
+ sm: tokensJson.base.breakpoint.sm,
2999
+ md: tokensJson.base.breakpoint.md,
3000
+ lg: tokensJson.base.breakpoint.lg,
3001
+ xl: tokensJson.base.breakpoint.xl,
3002
+ '2xl': tokensJson.base.breakpoint['2xl']
2975
3003
  };
2976
3004
  // Media query helpers
2977
3005
  var media$1 = {
@@ -2983,7 +3011,7 @@ var media$1 = {
2983
3011
  '2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
2984
3012
  };
2985
3013
 
2986
- var spacing$6 = tokensData.semantic.spacing;
3014
+ var spacing$6 = tokensJson.semantic.spacing;
2987
3015
  var StyledContainer$2 = styled.div.withConfig({
2988
3016
  displayName: "Container__StyledContainer",
2989
3017
  componentId: "sc-17dbj6n-0"
@@ -2997,7 +3025,7 @@ var Container$1 = function Container(_a) {
2997
3025
  };
2998
3026
  var templateObject_1$C;
2999
3027
 
3000
- var base$b = tokensData.base;
3028
+ var base$b = tokensJson.base;
3001
3029
  var PictureWrapper = styled.div.withConfig({
3002
3030
  displayName: "Picture__PictureWrapper",
3003
3031
  componentId: "sc-11d9tei-0"
@@ -3045,7 +3073,7 @@ var Picture = function Picture(_a) {
3045
3073
  };
3046
3074
  var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
3047
3075
 
3048
- var _a$7 = tokensData.semantic,
3076
+ var _a$7 = tokensJson.semantic,
3049
3077
  typography$3 = _a$7.typography,
3050
3078
  color$6 = _a$7.color;
3051
3079
  var TimeStyled = styled.time.withConfig({
@@ -3102,8 +3130,8 @@ var DateFormatter = function DateFormatter(_a) {
3102
3130
  };
3103
3131
  var templateObject_1$A;
3104
3132
 
3105
- var motion$2 = tokensData.semantic.motion,
3106
- _a$6 = tokensData.component,
3133
+ var motion$2 = tokensJson.semantic.motion,
3134
+ _a$6 = tokensJson.component,
3107
3135
  iconButton = _a$6.iconButton,
3108
3136
  button = _a$6.button;
3109
3137
  var IconButtonStyled = styled.button.withConfig({
@@ -3334,9 +3362,9 @@ var MoneyDisplay = function MoneyDisplay(_a) {
3334
3362
  var templateObject_1$y;
3335
3363
 
3336
3364
  // Destructure tokens
3337
- var semantic$f = tokensData.semantic;
3365
+ var semantic$f = tokensJson.semantic;
3338
3366
  var _a$5 = __assign(__assign({}, semantic$f), {
3339
- component: tokensData.component
3367
+ component: tokensJson.component
3340
3368
  }),
3341
3369
  color$5 = _a$5.color,
3342
3370
  border$7 = _a$5.border,
@@ -3408,8 +3436,8 @@ var ProgressBar = function ProgressBar(_a) {
3408
3436
  var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a;
3409
3437
 
3410
3438
  // Destructure tokens for cleaner access
3411
- var separatorTokens = tokensData.component.separator;
3412
- var separatorSpacing = tokensData.semantic.spacing.separator;
3439
+ var separatorTokens = tokensJson.component.separator;
3440
+ var separatorSpacing = tokensJson.semantic.spacing.separator;
3413
3441
  var StyledDivider = styled.div.withConfig({
3414
3442
  shouldForwardProp: function shouldForwardProp(prop) {
3415
3443
  return !prop.startsWith('$');
@@ -3543,12 +3571,12 @@ var StyledStack = styled.div.withConfig({
3543
3571
  // Helper function to convert gap prop to CSS value
3544
3572
  var getGapValue = function getGapValue(gap) {
3545
3573
  // Get semantic layout spacing token
3546
- var semanticSpacing = tokensData.semantic.spacing.layout;
3574
+ var semanticSpacing = tokensJson.semantic.spacing.layout;
3547
3575
  if (gap in semanticSpacing) {
3548
3576
  return semanticSpacing[gap];
3549
3577
  }
3550
3578
  // Fallback to medium layout spacing if token not found
3551
- return tokensData.semantic.spacing.layout.md;
3579
+ return tokensJson.semantic.spacing.layout.md;
3552
3580
  };
3553
3581
  var Stack = function Stack(_a) {
3554
3582
  var children = _a.children,
@@ -3579,11 +3607,11 @@ var Stack = function Stack(_a) {
3579
3607
  var templateObject_1$v;
3580
3608
 
3581
3609
  // Destructure tokens for cleaner access
3582
- var statusColors = tokensData.semantic.color.status;
3583
- var spacing$5 = tokensData.semantic.spacing.layout;
3584
- var radius$1 = tokensData.semantic.border.radius;
3585
- var transition = tokensData.semantic.motion.transition;
3586
- var typography$2 = tokensData.semantic.typography;
3610
+ var statusColors = tokensJson.semantic.color.status;
3611
+ var spacing$5 = tokensJson.semantic.spacing.layout;
3612
+ var radius$1 = tokensJson.semantic.border.radius;
3613
+ var transition = tokensJson.semantic.motion.transition;
3614
+ var typography$2 = tokensJson.semantic.typography;
3587
3615
  var scaleIn$1 = 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"])));
3588
3616
  var getStatusConfig = function getStatusConfig(status) {
3589
3617
  var configs = {
@@ -3745,7 +3773,7 @@ var StatusBadge = function StatusBadge(_a) {
3745
3773
  StatusBadge.displayName = 'StatusBadge';
3746
3774
  var templateObject_1$u, templateObject_2$o, templateObject_3$m;
3747
3775
 
3748
- var semantic$e = tokensData.semantic;
3776
+ var semantic$e = tokensJson.semantic;
3749
3777
  var color$4 = semantic$e.color,
3750
3778
  spacing$4 = semantic$e.spacing,
3751
3779
  border$6 = semantic$e.border,
@@ -3845,7 +3873,7 @@ var Tag = function Tag(_a) {
3845
3873
  var templateObject_1$t;
3846
3874
 
3847
3875
  // Destructure tokens for cleaner access
3848
- var semantic$d = tokensData.semantic;
3876
+ var semantic$d = tokensJson.semantic;
3849
3877
  var spacing$3 = semantic$d.spacing;
3850
3878
  var layout$2 = spacing$3.layout;
3851
3879
  var StyledBalanceSection = styled.div.withConfig({
@@ -4021,8 +4049,8 @@ var AccountCard = function AccountCard(_a) {
4021
4049
  };
4022
4050
  var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
4023
4051
 
4024
- var semantic$c = tokensData.semantic,
4025
- base$a = tokensData.base;
4052
+ var semantic$c = tokensJson.semantic,
4053
+ base$a = tokensJson.base;
4026
4054
  var StyledListItem = styled.li.withConfig({
4027
4055
  shouldForwardProp: function shouldForwardProp(prop) {
4028
4056
  return !prop.startsWith('$');
@@ -4062,7 +4090,7 @@ var StyledItemContent = styled.div.withConfig({
4062
4090
  var $interactive = _a.$interactive,
4063
4091
  $disabled = _a.$disabled,
4064
4092
  $selected = _a.$selected;
4065
- 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 ");
4093
+ 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 ");
4066
4094
  }, semantic$c.color.border.interactive);
4067
4095
  var StyledIconContainer$1 = styled.div.withConfig({
4068
4096
  displayName: "ListItem__StyledIconContainer",
@@ -4216,7 +4244,7 @@ var ListItem = function ListItem(_a) {
4216
4244
  ListItem.displayName = 'ListItem';
4217
4245
  var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
4218
4246
 
4219
- var _a$4 = tokensData.semantic,
4247
+ var _a$4 = tokensJson.semantic,
4220
4248
  color$3 = _a$4.color,
4221
4249
  border$5 = _a$4.border,
4222
4250
  layout$1 = _a$4.spacing.layout,
@@ -4559,9 +4587,9 @@ function agentInputStateTransition(currentState, event) {
4559
4587
  }
4560
4588
  }
4561
4589
 
4562
- var semantic$b = tokensData.semantic,
4563
- base$9 = tokensData.base,
4564
- component$1 = tokensData.component;
4590
+ var semantic$b = tokensJson.semantic,
4591
+ base$9 = tokensJson.base,
4592
+ component$1 = tokensJson.component;
4565
4593
  var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
4566
4594
  var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
4567
4595
  var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
@@ -5274,8 +5302,8 @@ var AgentInput = function AgentInput(_a) {
5274
5302
  };
5275
5303
  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;
5276
5304
 
5277
- var semantic$a = tokensData.semantic,
5278
- base$8 = tokensData.base;
5305
+ var semantic$a = tokensJson.semantic,
5306
+ base$8 = tokensJson.base;
5279
5307
  // Default icons by variant
5280
5308
  var variantIcons = {
5281
5309
  error: 'crossCircle',
@@ -5426,11 +5454,11 @@ var _a$3, _b$1, _c, _d, _e, _f;
5426
5454
  var BreadcrumbNavStyled = styled.nav.withConfig({
5427
5455
  displayName: "Breadcrumbs__BreadcrumbNavStyled",
5428
5456
  componentId: "sc-7ouzg5-0"
5429
- })(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');
5457
+ })(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');
5430
5458
  var BreadcrumbStyled = styled.li.withConfig({
5431
5459
  displayName: "Breadcrumbs__BreadcrumbStyled",
5432
5460
  componentId: "sc-7ouzg5-1"
5433
- })(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"]);
5461
+ })(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"]);
5434
5462
  var BreadcrumbSeparator = styled.span.withConfig({
5435
5463
  displayName: "Breadcrumbs__BreadcrumbSeparator",
5436
5464
  componentId: "sc-7ouzg5-2"
@@ -5487,7 +5515,7 @@ var templateObject_1$n, templateObject_2$i, templateObject_3$g;
5487
5515
  var CardSmallStyled = styled.div.withConfig({
5488
5516
  displayName: "CardSmall__CardSmallStyled",
5489
5517
  componentId: "sc-jpcqvd-0"
5490
- })(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);
5518
+ })(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);
5491
5519
  var CardSmall = function CardSmall(_a) {
5492
5520
  var title = _a.title,
5493
5521
  picture = _a.picture,
@@ -5541,7 +5569,7 @@ var CardSmall = function CardSmall(_a) {
5541
5569
  };
5542
5570
  var templateObject_1$m;
5543
5571
 
5544
- var border$4 = tokensData.base.border;
5572
+ var border$4 = tokensJson.base.border;
5545
5573
  var CardLargeStyled = styled.div.withConfig({
5546
5574
  displayName: "CardLarge__CardLargeStyled",
5547
5575
  componentId: "sc-1rfgdzl-0"
@@ -5631,25 +5659,25 @@ var StyledCheckbox = styled.span.withConfig({
5631
5659
  /**
5632
5660
  * Container for checkbox with proper spacing and alignment
5633
5661
  * 48px min-height for touch target (8px grid aligned)
5634
- */])), tokensData.component.input["default"].borderRadius, tokensData.component.input["default"].borderWidth, function (props) {
5635
- return props.$checked || props.$indeterminate ? tokensData.semantic.color.background.inverse : tokensData.component.input["default"].backgroundColor;
5662
+ */])), tokensJson.component.input["default"].borderRadius, tokensJson.component.input["default"].borderWidth, function (props) {
5663
+ return props.$checked || props.$indeterminate ? tokensJson.semantic.color.background.inverse : tokensJson.component.input["default"].backgroundColor;
5636
5664
  }, function (props) {
5637
- if (props.$state === 'error') return tokensData.component.input.error.borderColor;
5638
- if (props.$checked || props.$indeterminate) return tokensData.semantic.border.strong;
5639
- return tokensData.component.input["default"].borderColor;
5665
+ if (props.$state === 'error') return tokensJson.component.input.error.borderColor;
5666
+ if (props.$checked || props.$indeterminate) return tokensJson.semantic.border.strong;
5667
+ return tokensJson.component.input["default"].borderColor;
5640
5668
  }, function (props) {
5641
5669
  return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
5642
5670
  }, HiddenCheckboxInput, function (props) {
5643
- return props.$state === 'error' ? tokensData.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensData.semantic.border.strong : tokensData.component.input.hover.borderColor;
5644
- }, HiddenCheckboxInput, tokensData.component.input.focus.outline, tokensData.component.input.focus.outlineOffset, function (props) {
5645
- return props.$state === 'error' ? tokensData.component.input.error.focus.borderColor : tokensData.component.input.focus.borderColor;
5671
+ return props.$state === 'error' ? tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensJson.semantic.border.strong : tokensJson.component.input.hover.borderColor;
5672
+ }, HiddenCheckboxInput, tokensJson.component.input.focus.outline, tokensJson.component.input.focus.outlineOffset, function (props) {
5673
+ return props.$state === 'error' ? tokensJson.component.input.error.focus.borderColor : tokensJson.component.input.focus.borderColor;
5646
5674
  }, function (props) {
5647
- return props.$state === 'disabled' && "\n background-color: ".concat(tokensData.component.input.disabled.backgroundColor, ";\n border-color: ").concat(tokensData.component.input.disabled.borderColor, ";\n ");
5675
+ return props.$state === 'disabled' && "\n background-color: ".concat(tokensJson.component.input.disabled.backgroundColor, ";\n border-color: ").concat(tokensJson.component.input.disabled.borderColor, ";\n ");
5648
5676
  }, function (props) {
5649
5677
  return props.$checked ? 'block' : 'none';
5650
- }, tokensData.semantic.color.text.inverse, function (props) {
5678
+ }, tokensJson.semantic.color.text.inverse, function (props) {
5651
5679
  return props.$indeterminate ? 'block' : 'none';
5652
- }, tokensData.semantic.color.text.inverse);
5680
+ }, tokensJson.semantic.color.text.inverse);
5653
5681
  /**
5654
5682
  * Container for checkbox with proper spacing and alignment
5655
5683
  * 48px min-height for touch target (8px grid aligned)
@@ -5663,7 +5691,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
5663
5691
  })(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"
5664
5692
  /**
5665
5693
  * Label text with proper typography
5666
- */])), tokensData.base.spacing[3], function (props) {
5694
+ */])), tokensJson.base.spacing[3], function (props) {
5667
5695
  return props.$disabled ? 'not-allowed' : 'pointer';
5668
5696
  }, function (props) {
5669
5697
  return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
@@ -5677,15 +5705,15 @@ var StyledCheckboxLabel = styled.span.withConfig({
5677
5705
  },
5678
5706
  displayName: "SelectableInputBase__StyledCheckboxLabel",
5679
5707
  componentId: "sc-1ddpctx-3"
5680
- })(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
5681
- return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
5708
+ })(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensJson.component.input["default"].font, function (props) {
5709
+ return props.$disabled ? tokensJson.component.input.disabled.textColor : tokensJson.component.input["default"].textColor;
5682
5710
  });
5683
5711
  var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$d;
5684
5712
 
5685
5713
  var StyledFieldContainer$3 = styled.div.withConfig({
5686
5714
  displayName: "Checkbox__StyledFieldContainer",
5687
5715
  componentId: "sc-vquz3v-0"
5688
- })(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]);
5716
+ })(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]);
5689
5717
  var StyledHelperText$4 = styled.span.withConfig({
5690
5718
  displayName: "Checkbox__StyledHelperText",
5691
5719
  componentId: "sc-vquz3v-1"
@@ -5711,9 +5739,9 @@ var StyledHelperText$4 = styled.span.withConfig({
5711
5739
  * required
5712
5740
  * />
5713
5741
  * ```
5714
- */])), tokensData.semantic.typography.small, function (props) {
5715
- return props.$error ? tokensData.semantic.color.text.error : tokensData.semantic.color.text.subdued;
5716
- }, tokensData.base.spacing[9]);
5742
+ */])), tokensJson.semantic.typography.small, function (props) {
5743
+ return props.$error ? tokensJson.semantic.color.text.error : tokensJson.semantic.color.text.subdued;
5744
+ }, tokensJson.base.spacing[9]);
5717
5745
  /**
5718
5746
  * Checkbox component for binary selection with WCAG 2.2 AA compliance
5719
5747
  *
@@ -5835,7 +5863,7 @@ var ChipGroup = function ChipGroup(_a) {
5835
5863
  };
5836
5864
  var templateObject_1$i;
5837
5865
 
5838
- var _a$2 = tokensData.semantic,
5866
+ var _a$2 = tokensJson.semantic,
5839
5867
  color$2 = _a$2.color,
5840
5868
  border$3 = _a$2.border,
5841
5869
  spacing$2 = _a$2.spacing;
@@ -5843,7 +5871,7 @@ var _a$2 = tokensData.semantic,
5843
5871
  var StyledCodeBlock = styled.pre.withConfig({
5844
5872
  displayName: "CodeBlock__StyledCodeBlock",
5845
5873
  componentId: "sc-1p1t0kp-0"
5846
- })(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) {
5874
+ })(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) {
5847
5875
  var $isExpanded = _a.$isExpanded,
5848
5876
  $needsExpansion = _a.$needsExpansion;
5849
5877
  return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
@@ -5867,7 +5895,7 @@ var CopyButtonWrapper = styled.div.withConfig({
5867
5895
  var ExpandButtonWrapper = styled.div.withConfig({
5868
5896
  displayName: "CodeBlock__ExpandButtonWrapper",
5869
5897
  componentId: "sc-1p1t0kp-3"
5870
- })(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) {
5898
+ })(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) {
5871
5899
  var $hasGradient = _a.$hasGradient;
5872
5900
  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 ";
5873
5901
  });
@@ -6030,18 +6058,18 @@ var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4
6030
6058
  var StyledHeader$1 = styled.div.withConfig({
6031
6059
  displayName: "DateGroup__StyledHeader",
6032
6060
  componentId: "sc-9nfm1f-0"
6033
- })(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) {
6061
+ })(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) {
6034
6062
  var $sticky = _a.$sticky;
6035
- return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
6063
+ return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensJson.base.shadow[2], ";\n ");
6036
6064
  });
6037
6065
  var StyledLeftSection = styled.div.withConfig({
6038
6066
  displayName: "DateGroup__StyledLeftSection",
6039
6067
  componentId: "sc-9nfm1f-1"
6040
- })(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);
6068
+ })(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);
6041
6069
  var StyledRightSection = styled.div.withConfig({
6042
6070
  displayName: "DateGroup__StyledRightSection",
6043
6071
  componentId: "sc-9nfm1f-2"
6044
- })(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);
6072
+ })(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);
6045
6073
  var StyledContent = styled.div.withConfig({
6046
6074
  displayName: "DateGroup__StyledContent",
6047
6075
  componentId: "sc-9nfm1f-3"
@@ -6119,7 +6147,7 @@ var DateGroup = function DateGroup(_a) {
6119
6147
  };
6120
6148
  var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
6121
6149
 
6122
- var semantic$9 = tokensData.semantic;
6150
+ var semantic$9 = tokensJson.semantic;
6123
6151
  var StyledContainer$1 = styled.div.withConfig({
6124
6152
  shouldForwardProp: function shouldForwardProp(prop) {
6125
6153
  return !prop.startsWith('$');
@@ -6238,21 +6266,21 @@ var EmptyState = function EmptyState(_a) {
6238
6266
  };
6239
6267
  var templateObject_1$f, templateObject_2$d, templateObject_3$c;
6240
6268
 
6241
- var _a$1 = tokensData.base,
6269
+ var _a$1 = tokensJson.base,
6242
6270
  spacing$1 = _a$1.spacing,
6243
6271
  border$2 = _a$1.border;
6244
6272
  var FeatureBlockStyled = styled.div.withConfig({
6245
6273
  displayName: "FeatureBlock__FeatureBlockStyled",
6246
6274
  componentId: "sc-1mi4lso-0"
6247
- })(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]);
6275
+ })(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]);
6248
6276
  var ImageWrapper = styled.div.withConfig({
6249
6277
  displayName: "FeatureBlock__ImageWrapper",
6250
6278
  componentId: "sc-1mi4lso-1"
6251
- })(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);
6279
+ })(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);
6252
6280
  var ContentSection = styled.div.withConfig({
6253
6281
  displayName: "FeatureBlock__ContentSection",
6254
6282
  componentId: "sc-1mi4lso-2"
6255
- })(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]);
6283
+ })(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]);
6256
6284
  var ButtonWrapper = styled.div.withConfig({
6257
6285
  displayName: "FeatureBlock__ButtonWrapper",
6258
6286
  componentId: "sc-1mi4lso-3"
@@ -6319,15 +6347,15 @@ var FeatureBlock = function FeatureBlock(_a) {
6319
6347
  };
6320
6348
  var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
6321
6349
 
6322
- var _a = tokensData.base,
6350
+ var _a = tokensJson.base,
6323
6351
  spacing = _a.spacing,
6324
6352
  shadow = _a.shadow,
6325
6353
  zIndex = _a.zIndex,
6326
- _b = tokensData.semantic,
6354
+ _b = tokensJson.semantic,
6327
6355
  color$1 = _b.color,
6328
6356
  typography = _b.typography,
6329
6357
  border$1 = _b.border,
6330
- input$1 = tokensData.component.input;
6358
+ input$1 = tokensJson.component.input;
6331
6359
  var DropdownContainer = styled.div.withConfig({
6332
6360
  displayName: "Dropdown__DropdownContainer",
6333
6361
  componentId: "sc-kz07c4-0"
@@ -6573,7 +6601,7 @@ var Dropdown = function Dropdown(_a) {
6573
6601
  };
6574
6602
  var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
6575
6603
 
6576
- var semantic$8 = tokensData.semantic;
6604
+ var semantic$8 = tokensJson.semantic;
6577
6605
  var StyledList = styled.ul.withConfig({
6578
6606
  shouldForwardProp: function shouldForwardProp(prop) {
6579
6607
  return !prop.startsWith('$');
@@ -6606,8 +6634,8 @@ var List = function List(_a) {
6606
6634
  List.displayName = 'List';
6607
6635
  var templateObject_1$c;
6608
6636
 
6609
- var semantic$7 = tokensData.semantic,
6610
- base$7 = tokensData.base;
6637
+ var semantic$7 = tokensJson.semantic,
6638
+ base$7 = tokensJson.base;
6611
6639
  var layout = semantic$7.spacing.layout,
6612
6640
  color = semantic$7.color,
6613
6641
  border = semantic$7.border,
@@ -6829,7 +6857,7 @@ var Modal = function Modal(_a) {
6829
6857
  Modal.displayName = 'Modal';
6830
6858
  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;
6831
6859
 
6832
- var input = tokensData.component.input;
6860
+ var input = tokensJson.component.input;
6833
6861
  var StyledInputBase = styled.input.withConfig({
6834
6862
  shouldForwardProp: function shouldForwardProp(prop) {
6835
6863
  return !prop.startsWith('$');
@@ -6870,8 +6898,8 @@ var StyledTextAreaBase = styled.textarea.withConfig({
6870
6898
  })(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);
6871
6899
  var templateObject_1$a, templateObject_2$9;
6872
6900
 
6873
- var semantic$6 = tokensData.semantic,
6874
- base$6 = tokensData.base;
6901
+ var semantic$6 = tokensJson.semantic,
6902
+ base$6 = tokensJson.base;
6875
6903
  var StyledFieldContainer$2 = styled.div.withConfig({
6876
6904
  displayName: "NumberInput__StyledFieldContainer",
6877
6905
  componentId: "sc-qotc3w-0"
@@ -7131,9 +7159,9 @@ var PageTitleStyled = styled.div.withConfig({
7131
7159
  },
7132
7160
  displayName: "PageTitle__PageTitleStyled",
7133
7161
  componentId: "sc-16h256f-0"
7134
- })(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) {
7162
+ })(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) {
7135
7163
  var $hasBackButton = _a.$hasBackButton;
7136
- return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
7164
+ return $hasBackButton ? tokensJson.base.spacing[0] : tokensJson.base.spacing[12];
7137
7165
  });
7138
7166
  var PageTitle = function PageTitle(_a) {
7139
7167
  var title = _a.title,
@@ -7164,8 +7192,8 @@ var PageTitle = function PageTitle(_a) {
7164
7192
  };
7165
7193
  var templateObject_1$8;
7166
7194
 
7167
- var semantic$5 = tokensData.semantic,
7168
- base$5 = tokensData.base;
7195
+ var semantic$5 = tokensJson.semantic,
7196
+ base$5 = tokensJson.base;
7169
7197
  var StyledFieldContainer$1 = styled.div.withConfig({
7170
7198
  displayName: "PasswordField__StyledFieldContainer",
7171
7199
  componentId: "sc-1p15zk0-0"
@@ -7297,9 +7325,9 @@ var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
7297
7325
  PasswordField.displayName = 'PasswordField';
7298
7326
  var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4;
7299
7327
 
7300
- var semantic$4 = tokensData.semantic,
7301
- base$4 = tokensData.base,
7302
- component = tokensData.component;
7328
+ var semantic$4 = tokensJson.semantic,
7329
+ base$4 = tokensJson.base,
7330
+ component = tokensJson.component;
7303
7331
  var StyledSearchContainer = styled.div.withConfig({
7304
7332
  displayName: "SearchField__StyledSearchContainer",
7305
7333
  componentId: "sc-qhz9i8-0"
@@ -7626,8 +7654,8 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
7626
7654
  SearchField.displayName = 'SearchField';
7627
7655
  var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4;
7628
7656
 
7629
- var semantic$3 = tokensData.semantic,
7630
- base$3 = tokensData.base;
7657
+ var semantic$3 = tokensJson.semantic,
7658
+ base$3 = tokensJson.base;
7631
7659
  // Fade in animation for overlay
7632
7660
  var fadeIn = 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"
7633
7661
  // Slide animations for each position
@@ -7831,8 +7859,8 @@ var Sheet = function Sheet(_a) {
7831
7859
  Sheet.displayName = 'Sheet';
7832
7860
  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;
7833
7861
 
7834
- var semantic$2 = tokensData.semantic,
7835
- base$2 = tokensData.base;
7862
+ var semantic$2 = tokensJson.semantic,
7863
+ base$2 = tokensJson.base;
7836
7864
  var StyledSliderContainer = styled.div.withConfig({
7837
7865
  displayName: "Slider__StyledSliderContainer",
7838
7866
  componentId: "sc-6mh2d4-0"
@@ -8237,8 +8265,8 @@ var Slider = function Slider(_a) {
8237
8265
  Slider.displayName = 'Slider';
8238
8266
  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;
8239
8267
 
8240
- var semantic$1 = tokensData.semantic,
8241
- base$1 = tokensData.base;
8268
+ var semantic$1 = tokensJson.semantic,
8269
+ base$1 = tokensJson.base;
8242
8270
  var StyledTabList = styled.div.withConfig({
8243
8271
  shouldForwardProp: function shouldForwardProp(prop) {
8244
8272
  return !prop.startsWith('$');
@@ -8456,8 +8484,8 @@ var TabBar = function TabBar(_a) {
8456
8484
  TabBar.displayName = 'TabBar';
8457
8485
  var templateObject_1$3, templateObject_2$3, templateObject_3$3;
8458
8486
 
8459
- var semantic = tokensData.semantic,
8460
- base = tokensData.base;
8487
+ var semantic = tokensJson.semantic,
8488
+ base = tokensJson.base;
8461
8489
  var StyledFieldContainer = styled.div.withConfig({
8462
8490
  displayName: "TextField__StyledFieldContainer",
8463
8491
  componentId: "sc-1ys3b0-0"
@@ -8562,9 +8590,9 @@ var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4
8562
8590
  var StyledContainer = styled.div.withConfig({
8563
8591
  displayName: "TransactionListItem__StyledContainer",
8564
8592
  componentId: "sc-7yunm0-0"
8565
- })(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) {
8593
+ })(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) {
8566
8594
  var $clickable = _a.$clickable;
8567
- 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 ");
8595
+ 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 ");
8568
8596
  });
8569
8597
  var StyledAvatarSection = styled.div.withConfig({
8570
8598
  displayName: "TransactionListItem__StyledAvatarSection",
@@ -8577,23 +8605,23 @@ var StyledMainContent = styled.div.withConfig({
8577
8605
  var StyledTopRow = styled.div.withConfig({
8578
8606
  displayName: "TransactionListItem__StyledTopRow",
8579
8607
  componentId: "sc-7yunm0-3"
8580
- })(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);
8608
+ })(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);
8581
8609
  var StyledMerchantSection = styled.div.withConfig({
8582
8610
  displayName: "TransactionListItem__StyledMerchantSection",
8583
8611
  componentId: "sc-7yunm0-4"
8584
- })(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);
8612
+ })(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);
8585
8613
  var StyledBottomRow = styled.div.withConfig({
8586
8614
  displayName: "TransactionListItem__StyledBottomRow",
8587
8615
  componentId: "sc-7yunm0-5"
8588
- })(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);
8616
+ })(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);
8589
8617
  var StyledMetadata = styled.div.withConfig({
8590
8618
  displayName: "TransactionListItem__StyledMetadata",
8591
8619
  componentId: "sc-7yunm0-6"
8592
- })(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);
8620
+ })(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);
8593
8621
  var StyledIconIndicator = styled.div.withConfig({
8594
8622
  displayName: "TransactionListItem__StyledIconIndicator",
8595
8623
  componentId: "sc-7yunm0-7"
8596
- })(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);
8624
+ })(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);
8597
8625
  var StyledTruncatedText = styled.span.withConfig({
8598
8626
  displayName: "TransactionListItem__StyledTruncatedText",
8599
8627
  componentId: "sc-7yunm0-8"
@@ -8774,12 +8802,12 @@ var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4
8774
8802
 
8775
8803
  // Breakpoints using base tokens
8776
8804
  var breakpoints = {
8777
- xs: tokensData.base.breakpoint.xs,
8778
- sm: tokensData.base.breakpoint.sm,
8779
- md: tokensData.base.breakpoint.md,
8780
- lg: tokensData.base.breakpoint.lg,
8781
- xl: tokensData.base.breakpoint.xl,
8782
- '2xl': tokensData.base.breakpoint['2xl']
8805
+ xs: tokensJson.base.breakpoint.xs,
8806
+ sm: tokensJson.base.breakpoint.sm,
8807
+ md: tokensJson.base.breakpoint.md,
8808
+ lg: tokensJson.base.breakpoint.lg,
8809
+ xl: tokensJson.base.breakpoint.xl,
8810
+ '2xl': tokensJson.base.breakpoint['2xl']
8783
8811
  };
8784
8812
  // Media query helpers
8785
8813
  var media = {
@@ -8815,9 +8843,9 @@ var Grid = function Grid(_a) {
8815
8843
  children = _a.children;
8816
8844
  return jsx(GridContainer, {
8817
8845
  "$cols": cols,
8818
- "$gap": gap ? tokensData.base.spacing[gap] : undefined,
8819
- "$gapX": gapX ? tokensData.base.spacing[gapX] : undefined,
8820
- "$gapY": gapY ? tokensData.base.spacing[gapY] : undefined,
8846
+ "$gap": gap ? tokensJson.base.spacing[gap] : undefined,
8847
+ "$gapX": gapX ? tokensJson.base.spacing[gapX] : undefined,
8848
+ "$gapY": gapY ? tokensJson.base.spacing[gapY] : undefined,
8821
8849
  className: className,
8822
8850
  children: children
8823
8851
  });
@@ -8953,29 +8981,36 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
8953
8981
  "$colsMd": colsMd,
8954
8982
  "$colsLg": colsLg,
8955
8983
  "$colsXl": colsXl,
8956
- "$gap": gap ? tokensData.base.spacing[gap] : undefined,
8957
- "$gapSm": gapSm ? tokensData.base.spacing[gapSm] : undefined,
8958
- "$gapMd": gapMd ? tokensData.base.spacing[gapMd] : undefined,
8959
- "$gapLg": gapLg ? tokensData.base.spacing[gapLg] : undefined,
8960
- "$gapXl": gapXl ? tokensData.base.spacing[gapXl] : undefined,
8961
- "$gapX": gapX ? tokensData.base.spacing[gapX] : undefined,
8962
- "$gapXSm": gapXSm ? tokensData.base.spacing[gapXSm] : undefined,
8963
- "$gapXMd": gapXMd ? tokensData.base.spacing[gapXMd] : undefined,
8964
- "$gapXLg": gapXLg ? tokensData.base.spacing[gapXLg] : undefined,
8965
- "$gapXXl": gapXXl ? tokensData.base.spacing[gapXXl] : undefined,
8966
- "$gapY": gapY ? tokensData.base.spacing[gapY] : undefined,
8967
- "$gapYSm": gapYSm ? tokensData.base.spacing[gapYSm] : undefined,
8968
- "$gapYMd": gapYMd ? tokensData.base.spacing[gapYMd] : undefined,
8969
- "$gapYLg": gapYLg ? tokensData.base.spacing[gapYLg] : undefined,
8970
- "$gapYXl": gapYXl ? tokensData.base.spacing[gapYXl] : undefined,
8984
+ "$gap": gap ? tokensJson.base.spacing[gap] : undefined,
8985
+ "$gapSm": gapSm ? tokensJson.base.spacing[gapSm] : undefined,
8986
+ "$gapMd": gapMd ? tokensJson.base.spacing[gapMd] : undefined,
8987
+ "$gapLg": gapLg ? tokensJson.base.spacing[gapLg] : undefined,
8988
+ "$gapXl": gapXl ? tokensJson.base.spacing[gapXl] : undefined,
8989
+ "$gapX": gapX ? tokensJson.base.spacing[gapX] : undefined,
8990
+ "$gapXSm": gapXSm ? tokensJson.base.spacing[gapXSm] : undefined,
8991
+ "$gapXMd": gapXMd ? tokensJson.base.spacing[gapXMd] : undefined,
8992
+ "$gapXLg": gapXLg ? tokensJson.base.spacing[gapXLg] : undefined,
8993
+ "$gapXXl": gapXXl ? tokensJson.base.spacing[gapXXl] : undefined,
8994
+ "$gapY": gapY ? tokensJson.base.spacing[gapY] : undefined,
8995
+ "$gapYSm": gapYSm ? tokensJson.base.spacing[gapYSm] : undefined,
8996
+ "$gapYMd": gapYMd ? tokensJson.base.spacing[gapYMd] : undefined,
8997
+ "$gapYLg": gapYLg ? tokensJson.base.spacing[gapYLg] : undefined,
8998
+ "$gapYXl": gapYXl ? tokensJson.base.spacing[gapYXl] : undefined,
8971
8999
  className: className,
8972
9000
  children: children
8973
9001
  });
8974
9002
  };
8975
9003
  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;
8976
9004
 
8977
- // Main design system exports
8978
- var tokens = tokensData;
9005
+ // Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,
9006
+ // which consumers can only resolve with `resolveJsonModule`.
9007
+ var tokens = tokensJson;
9008
+
9009
+ // Icon type definitions for external consumption
9010
+ // This is a self-contained type that doesn't depend on JSON imports
9011
+ // to ensure it works correctly in consuming projects
9012
+ // Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).
9013
+ var iconsData = iconsJson;
8979
9014
 
8980
9015
  export { AccountCard, ActionSheet, AgentInput, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container$1 as Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, Modal, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
8981
9016
  //# sourceMappingURL=index.esm.js.map