@common-origin/design-system 1.9.4 → 1.9.6

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 (9) hide show
  1. package/dist/index.d.ts +634 -1
  2. package/dist/index.esm.js +142 -139
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +142 -139
  5. package/dist/index.js.map +1 -1
  6. package/dist/tokens/index.esm.js.map +1 -1
  7. package/dist/tokens/index.js.map +1 -1
  8. package/dist/tokens/tokens.d.ts +1 -0
  9. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -733,7 +733,7 @@ var semantic$1 = {
733
733
  },
734
734
  $ref: "./semantic/index.json"
735
735
  };
736
- var tokens = {
736
+ var tokensData = {
737
737
  base: base$1,
738
738
  component: component,
739
739
  semantic: semantic$1
@@ -748,18 +748,18 @@ var AvatarContainer = styled.div.withConfig({
748
748
  componentId: "sc-ezn4ax-0"
749
749
  })(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n background-color: ", ";\n overflow: hidden;\n flex-shrink: 0;\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n background-color: ", ";\n overflow: hidden;\n flex-shrink: 0;\n"])), function (_a) {
750
750
  var $size = _a.$size;
751
- return tokens.semantic.size.avatar[$size];
751
+ return tokensData.semantic.size.avatar[$size];
752
752
  }, function (_a) {
753
753
  var $size = _a.$size;
754
- return tokens.semantic.size.avatar[$size];
755
- }, tokens.base.border.radius.circle, tokens.semantic.color.background.surface);
754
+ return tokensData.semantic.size.avatar[$size];
755
+ }, tokensData.base.border.radius.circle, tokensData.semantic.color.background.surface);
756
756
  var AvatarImage = styled.img.withConfig({
757
757
  shouldForwardProp: function shouldForwardProp(prop) {
758
758
  return !prop.startsWith('$');
759
759
  },
760
760
  displayName: "Avatar__AvatarImage",
761
761
  componentId: "sc-ezn4ax-1"
762
- })(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"])), tokens.base.border.radius.circle);
762
+ })(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"])), tokensData.base.border.radius.circle);
763
763
  var AvatarInitials = styled.span.withConfig({
764
764
  shouldForwardProp: function shouldForwardProp(prop) {
765
765
  return !prop.startsWith('$');
@@ -768,17 +768,17 @@ var AvatarInitials = styled.span.withConfig({
768
768
  componentId: "sc-ezn4ax-2"
769
769
  })(templateObject_3$9 || (templateObject_3$9 = __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"
770
770
  // Helper function to get initials from name
771
- ])), tokens.base.fontFamily.body, tokens.base.fontWeight[3], function (_a) {
771
+ ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
772
772
  var $size = _a.$size;
773
773
  var sizeMap = {
774
- xs: tokens.base.fontSize[1],
775
- sm: tokens.base.fontSize[2],
776
- md: tokens.base.fontSize[3],
777
- lg: tokens.base.fontSize[4],
778
- xl: tokens.base.fontSize[5]
774
+ xs: tokensData.base.fontSize[1],
775
+ sm: tokensData.base.fontSize[2],
776
+ md: tokensData.base.fontSize[3],
777
+ lg: tokensData.base.fontSize[4],
778
+ xl: tokensData.base.fontSize[5]
779
779
  };
780
780
  return sizeMap[$size];
781
- }, tokens.semantic.color.text["default"]);
781
+ }, tokensData.semantic.color.text["default"]);
782
782
  // Helper function to get initials from name
783
783
  var getInitials = function getInitials(name) {
784
784
  return name.split(' ').map(function (word) {
@@ -832,18 +832,18 @@ var Avatar = function Avatar(_a) {
832
832
  var templateObject_1$m, templateObject_2$b, templateObject_3$9;
833
833
 
834
834
  React.createElement;
835
- var _a$5 = tokens.semantic,
835
+ var _a$5 = tokensData.semantic,
836
836
  typography$2 = _a$5.typography,
837
837
  color$4 = _a$5.color;
838
838
  var getTypographyStyles = function getTypographyStyles(variant) {
839
839
  var styles = {
840
- display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
841
- h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
842
- h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
843
- h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
844
- h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
845
- h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
846
- h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
840
+ display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
841
+ h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
842
+ h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
843
+ h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
844
+ h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
845
+ h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
846
+ h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
847
847
  subtitle: "font: ".concat(typography$2.subtitle, ";"),
848
848
  body: "font: ".concat(typography$2.body, ";"),
849
849
  small: "font: ".concat(typography$2.small, ";"),
@@ -967,8 +967,8 @@ var Typography = function Typography(_a) {
967
967
  var templateObject_1$l;
968
968
 
969
969
  React.createElement;
970
- var color$3 = tokens.semantic.color;
971
- tokens.base.shadow;
970
+ var color$3 = tokensData.semantic.color;
971
+ tokensData.base.shadow;
972
972
  var scaleIn = styled.keyframes(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n"], ["\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n"])));
973
973
  var BadgeWrapper = styled.span.withConfig({
974
974
  displayName: "Badge__BadgeWrapper",
@@ -988,7 +988,7 @@ var BadgeIndicator = styled.span.withConfig({
988
988
  return props.$isDot ? '8px' : '16px';
989
989
  }, function (props) {
990
990
  return props.$isDot ? '0' : '0 4px';
991
- }, tokens.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
991
+ }, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
992
992
  switch (props.$variant) {
993
993
  case 'primary':
994
994
  return "\n background-color: ".concat(color$3.background.interactive, ";\n color: ").concat(color$3.text.inverse, ";\n ");
@@ -1058,35 +1058,35 @@ var StyledBox = styled.div.withConfig({
1058
1058
  }, function (props) {
1059
1059
  return props.$flexWrap && styled.css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
1060
1060
  }, function (props) {
1061
- return props.$gap && styled.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokens.semantic.spacing.layout[props.$gap]);
1061
+ return props.$gap && styled.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
1062
1062
  }, function (props) {
1063
- return props.$m && styled.css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokens.semantic.spacing.layout[props.$m]);
1063
+ return props.$m && styled.css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
1064
1064
  }, function (props) {
1065
- return props.$mt && styled.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokens.semantic.spacing.layout[props.$mt]);
1065
+ return props.$mt && styled.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
1066
1066
  }, function (props) {
1067
- return props.$mr && styled.css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokens.semantic.spacing.layout[props.$mr]);
1067
+ return props.$mr && styled.css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
1068
1068
  }, function (props) {
1069
- return props.$mb && styled.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokens.semantic.spacing.layout[props.$mb]);
1069
+ return props.$mb && styled.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
1070
1070
  }, function (props) {
1071
- return props.$ml && styled.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokens.semantic.spacing.layout[props.$ml]);
1071
+ return props.$ml && styled.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
1072
1072
  }, function (props) {
1073
- return props.$mx && styled.css(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), tokens.semantic.spacing.layout[props.$mx], tokens.semantic.spacing.layout[props.$mx]);
1073
+ return props.$mx && styled.css(templateObject_12$1 || (templateObject_12$1 = __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]);
1074
1074
  }, function (props) {
1075
- return props.$my && styled.css(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), tokens.semantic.spacing.layout[props.$my], tokens.semantic.spacing.layout[props.$my]);
1075
+ return props.$my && styled.css(templateObject_13$1 || (templateObject_13$1 = __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]);
1076
1076
  }, function (props) {
1077
- return props.$p && styled.css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokens.semantic.spacing.layout[props.$p]);
1077
+ return props.$p && styled.css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
1078
1078
  }, function (props) {
1079
- return props.$pt && styled.css(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokens.semantic.spacing.layout[props.$pt]);
1079
+ return props.$pt && styled.css(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensData.semantic.spacing.layout[props.$pt]);
1080
1080
  }, function (props) {
1081
- return props.$pr && styled.css(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokens.semantic.spacing.layout[props.$pr]);
1081
+ return props.$pr && styled.css(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
1082
1082
  }, function (props) {
1083
- return props.$pb && styled.css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokens.semantic.spacing.layout[props.$pb]);
1083
+ return props.$pb && styled.css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
1084
1084
  }, function (props) {
1085
- return props.$pl && styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokens.semantic.spacing.layout[props.$pl]);
1085
+ return props.$pl && styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensData.semantic.spacing.layout[props.$pl]);
1086
1086
  }, function (props) {
1087
- 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 "])), tokens.semantic.spacing.layout[props.$px], tokens.semantic.spacing.layout[props.$px]);
1087
+ 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]);
1088
1088
  }, function (props) {
1089
- 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 "])), tokens.semantic.spacing.layout[props.$py], tokens.semantic.spacing.layout[props.$py]);
1089
+ 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]);
1090
1090
  }, function (props) {
1091
1091
  return props.$width && styled.css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
1092
1092
  }, function (props) {
@@ -1110,21 +1110,21 @@ var StyledBox = styled.div.withConfig({
1110
1110
  }, function (props) {
1111
1111
  return props.$left && styled.css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
1112
1112
  }, function (props) {
1113
- return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokens.base.border.radius[props.$borderRadius]);
1113
+ return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.base.border.radius[props.$borderRadius]);
1114
1114
  }, function (props) {
1115
- return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokens.semantic.color.border[props.$border]);
1115
+ return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensData.semantic.color.border[props.$border]);
1116
1116
  }, function (props) {
1117
- return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: 1px solid ", ";"], ["border-top: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderTop]);
1117
+ 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]);
1118
1118
  }, function (props) {
1119
- return props.$borderRight && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: 1px solid ", ";"], ["border-right: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderRight]);
1119
+ 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]);
1120
1120
  }, function (props) {
1121
- return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderBottom]);
1121
+ return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderBottom]);
1122
1122
  }, function (props) {
1123
- return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderLeft]);
1123
+ return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderLeft]);
1124
1124
  }, function (props) {
1125
- return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokens.semantic.color.background[props.$bg]);
1125
+ return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensData.semantic.color.background[props.$bg]);
1126
1126
  }, function (props) {
1127
- return props.$color && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokens.semantic.color.text[props.$color]);
1127
+ return props.$color && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensData.semantic.color.text[props.$color]);
1128
1128
  }, function (props) {
1129
1129
  return props.$overflow && styled.css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
1130
1130
  }, function (props) {
@@ -1361,35 +1361,35 @@ var IconStyled = styled.span.withConfig({
1361
1361
  componentId: "sc-1105czq-0"
1362
1362
  })(templateObject_1$i || (templateObject_1$i = __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) {
1363
1363
  var $size = _a.$size;
1364
- return tokens.semantic.size.icon[$size];
1364
+ return tokensData.semantic.size.icon[$size];
1365
1365
  }, function (_a) {
1366
1366
  var $size = _a.$size;
1367
- return tokens.semantic.size.icon[$size];
1367
+ return tokensData.semantic.size.icon[$size];
1368
1368
  }, function (_a) {
1369
1369
  var $iconColor = _a.$iconColor;
1370
1370
  switch ($iconColor) {
1371
1371
  case 'default':
1372
- return tokens.semantic.color.icon["default"];
1372
+ return tokensData.semantic.color.icon["default"];
1373
1373
  case 'emphasis':
1374
- return tokens.semantic.color.icon.emphasis;
1374
+ return tokensData.semantic.color.icon.emphasis;
1375
1375
  case 'subdued':
1376
- return tokens.semantic.color.icon.subdued;
1376
+ return tokensData.semantic.color.icon.subdued;
1377
1377
  case 'disabled':
1378
- return tokens.semantic.color.icon.disabled;
1378
+ return tokensData.semantic.color.icon.disabled;
1379
1379
  case 'inverse':
1380
- return tokens.semantic.color.icon.inverse;
1380
+ return tokensData.semantic.color.icon.inverse;
1381
1381
  case 'interactive':
1382
- return tokens.semantic.color.icon.interactive;
1382
+ return tokensData.semantic.color.icon.interactive;
1383
1383
  case 'error':
1384
- return tokens.semantic.color.icon.error;
1384
+ return tokensData.semantic.color.icon.error;
1385
1385
  case 'success':
1386
- return tokens.semantic.color.icon.success;
1386
+ return tokensData.semantic.color.icon.success;
1387
1387
  case 'warning':
1388
- return tokens.semantic.color.icon.warning;
1388
+ return tokensData.semantic.color.icon.warning;
1389
1389
  case 'inherit':
1390
1390
  return 'currentColor';
1391
1391
  default:
1392
- return tokens.semantic.color.icon["default"];
1392
+ return tokensData.semantic.color.icon["default"];
1393
1393
  }
1394
1394
  });
1395
1395
  var Icon = function Icon(_a) {
@@ -1426,10 +1426,10 @@ var Icon = function Icon(_a) {
1426
1426
  var templateObject_1$i;
1427
1427
 
1428
1428
  React.createElement;
1429
- var button = tokens.component.button,
1430
- semantic = tokens.semantic;
1429
+ var button = tokensData.component.button,
1430
+ semantic = tokensData.semantic;
1431
1431
  // Base styles shared between button and link
1432
- var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(tokens.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button.focus.outline, ";\n outline-offset: ").concat(button.focus.outlineOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
1432
+ 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.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button.focus.outline, ";\n outline-offset: ").concat(button.focus.outlineOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
1433
1433
  // Dynamic variant styles using component tokens
1434
1434
  var getVariantStyles = function getVariantStyles(_a) {
1435
1435
  var $variant = _a.$variant;
@@ -1557,13 +1557,13 @@ var Button = function Button(_a) {
1557
1557
  };
1558
1558
  var templateObject_1$h, templateObject_2$8;
1559
1559
 
1560
- var chip = tokens.component.chip;
1560
+ var chip = tokensData.component.chip;
1561
1561
  // Helper function to get variant styles as objects for CSS custom properties
1562
1562
  var getVariantStylesAsObject = function getVariantStylesAsObject(variant, selected) {
1563
1563
  // Boolean chips with selected state get special background
1564
1564
  if (selected) {
1565
1565
  return {
1566
- backgroundColor: tokens.semantic.color.background['interactive-subtle'],
1566
+ backgroundColor: tokensData.semantic.color.background['interactive-subtle'],
1567
1567
  color: chip["default"].textColor
1568
1568
  };
1569
1569
  }
@@ -1618,14 +1618,14 @@ var BaseChipStyled = styled.span.withConfig({
1618
1618
  componentId: "sc-moa6zc-0"
1619
1619
  })(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: 12px;\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: width ", ";\n \n /* Use CSS custom properties set by wrapper */\n background-color: var(--chip-bg-color);\n color: var(--chip-text-color);\n font: var(--chip-font);\n padding: var(--chip-padding);\n opacity: var(--chip-opacity, 1);\n cursor: var(--chip-cursor, default);\n \n &:hover {\n opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n }\n \n &:active {\n opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: 12px;\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: width ", ";\n \n /* Use CSS custom properties set by wrapper */\n background-color: var(--chip-bg-color);\n color: var(--chip-text-color);\n font: var(--chip-font);\n padding: var(--chip-padding);\n opacity: var(--chip-opacity, 1);\n cursor: var(--chip-cursor, default);\n \n &:hover {\n opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n }\n \n &:active {\n opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"
1620
1620
  // Icon container for selected indicator or leading icons
1621
- ])), tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
1621
+ ])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
1622
1622
  // Icon container for selected indicator or leading icons
1623
1623
  var IconContainer = styled.span.withConfig({
1624
1624
  displayName: "ChipBase__IconContainer",
1625
1625
  componentId: "sc-moa6zc-1"
1626
1626
  })(templateObject_2$7 || (templateObject_2$7 = __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"
1627
1627
  // Close button for dismissible chips
1628
- ])), tokens.semantic.spacing.layout.sm);
1628
+ ])), tokensData.semantic.spacing.layout.sm);
1629
1629
  // Close button for dismissible chips
1630
1630
  var CloseButton = styled.button.withConfig({
1631
1631
  shouldForwardProp: function shouldForwardProp(prop) {
@@ -1635,11 +1635,11 @@ var CloseButton = styled.button.withConfig({
1635
1635
  componentId: "sc-moa6zc-2"
1636
1636
  })(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"
1637
1637
  // Wrapper component that applies styles via CSS custom properties
1638
- ])), tokens.semantic.spacing.layout.sm, function (props) {
1638
+ ])), tokensData.semantic.spacing.layout.sm, function (props) {
1639
1639
  return props.$disabled ? 'not-allowed' : 'pointer';
1640
1640
  }, function (props) {
1641
1641
  return props.$disabled ? '0.6' : '1';
1642
- }, tokens.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
1642
+ }, tokensData.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
1643
1643
  // Wrapper component that applies styles via CSS custom properties
1644
1644
  var StyledChipWrapper = function StyledChipWrapper(_a) {
1645
1645
  var $variant = _a.$variant,
@@ -1890,12 +1890,12 @@ var BooleanChip = function BooleanChip(_a) {
1890
1890
 
1891
1891
  // Breakpoints using base tokens
1892
1892
  var breakpoints$1 = {
1893
- xs: tokens.base.breakpoint.xs,
1894
- sm: tokens.base.breakpoint.sm,
1895
- md: tokens.base.breakpoint.md,
1896
- lg: tokens.base.breakpoint.lg,
1897
- xl: tokens.base.breakpoint.xl,
1898
- '2xl': tokens.base.breakpoint['2xl']
1893
+ xs: tokensData.base.breakpoint.xs,
1894
+ sm: tokensData.base.breakpoint.sm,
1895
+ md: tokensData.base.breakpoint.md,
1896
+ lg: tokensData.base.breakpoint.lg,
1897
+ xl: tokensData.base.breakpoint.xl,
1898
+ '2xl': tokensData.base.breakpoint['2xl']
1899
1899
  };
1900
1900
  // Media query helpers
1901
1901
  var media$1 = {
@@ -1908,7 +1908,7 @@ var media$1 = {
1908
1908
  };
1909
1909
 
1910
1910
  React.createElement;
1911
- var spacing$3 = tokens.semantic.spacing;
1911
+ var spacing$3 = tokensData.semantic.spacing;
1912
1912
  var StyledContainer = styled.div.withConfig({
1913
1913
  displayName: "Container__StyledContainer",
1914
1914
  componentId: "sc-17dbj6n-0"
@@ -1921,7 +1921,7 @@ var Container = function Container(_a) {
1921
1921
  var templateObject_1$f;
1922
1922
 
1923
1923
  React.createElement;
1924
- var base = tokens.base;
1924
+ var base = tokensData.base;
1925
1925
  var PictureWrapper = styled.div.withConfig({
1926
1926
  displayName: "Picture__PictureWrapper",
1927
1927
  componentId: "sc-11d9tei-0"
@@ -1967,7 +1967,7 @@ var Picture = function Picture(_a) {
1967
1967
  var templateObject_1$e, templateObject_2$6, templateObject_3$5, templateObject_4$4;
1968
1968
 
1969
1969
  React.createElement;
1970
- var _a$4 = tokens.semantic,
1970
+ var _a$4 = tokensData.semantic,
1971
1971
  typography$1 = _a$4.typography,
1972
1972
  color$2 = _a$4.color;
1973
1973
  var TimeStyled = styled.time.withConfig({
@@ -1988,8 +1988,8 @@ var DateFormatter = function DateFormatter(_a) {
1988
1988
  var templateObject_1$d;
1989
1989
 
1990
1990
  React.createElement;
1991
- var motion = tokens.semantic.motion,
1992
- iconButton = tokens.component.iconButton;
1991
+ var motion = tokensData.semantic.motion,
1992
+ iconButton = tokensData.component.iconButton;
1993
1993
  var IconButtonStyled = styled.button.withConfig({
1994
1994
  shouldForwardProp: function shouldForwardProp(prop) {
1995
1995
  return !prop.startsWith('$');
@@ -2116,10 +2116,10 @@ var ProgressBarContainer = styled.div.withConfig({
2116
2116
  },
2117
2117
  displayName: "ProgressBar__ProgressBarContainer",
2118
2118
  componentId: "sc-1nco33q-0"
2119
- })(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), tokens.semantic.color.background.disabled, tokens.base.border.radius[1], function (props) {
2120
- return props.$variant === 'horizontal' && styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? tokens.component.progressBar.sizes[props.$height].height : tokens.component.progressBar.sizes.md.height);
2119
+ })(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), tokensData.semantic.color.background.disabled, tokensData.base.border.radius[1], function (props) {
2120
+ return props.$variant === 'horizontal' && styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? tokensData.component.progressBar.sizes[props.$height].height : tokensData.component.progressBar.sizes.md.height);
2121
2121
  }, function (props) {
2122
- return props.$variant === 'vertical' && styled.css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? tokens.component.progressBar.sizes[props.$width].height : tokens.component.progressBar.sizes.md.height);
2122
+ return props.$variant === 'vertical' && styled.css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? tokensData.component.progressBar.sizes[props.$width].height : tokensData.component.progressBar.sizes.md.height);
2123
2123
  });
2124
2124
  var ProgressBarFill = styled.div.withConfig({
2125
2125
  shouldForwardProp: function shouldForwardProp(prop) {
@@ -2127,18 +2127,18 @@ var ProgressBarFill = styled.div.withConfig({
2127
2127
  },
2128
2128
  displayName: "ProgressBar__ProgressBarFill",
2129
2129
  componentId: "sc-1nco33q-1"
2130
- })(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), tokens.semantic.motion.transition.normal, function (props) {
2130
+ })(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
2131
2131
  var backgroundColor;
2132
2132
  switch (props.$color) {
2133
2133
  case 'success':
2134
- backgroundColor = tokens.semantic.color.background.success;
2134
+ backgroundColor = tokensData.semantic.color.background.success;
2135
2135
  break;
2136
2136
  case 'error':
2137
- backgroundColor = tokens.semantic.color.background.error;
2137
+ backgroundColor = tokensData.semantic.color.background.error;
2138
2138
  break;
2139
2139
  case 'default':
2140
2140
  default:
2141
- backgroundColor = tokens.semantic.color.background.interactive;
2141
+ backgroundColor = tokensData.semantic.color.background.interactive;
2142
2142
  break;
2143
2143
  }
2144
2144
  return styled.css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
@@ -2213,12 +2213,12 @@ var StyledDivider = styled.div.withConfig({
2213
2213
  var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
2214
2214
  switch ($variant) {
2215
2215
  case 'strong':
2216
- return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants.strong.border, ";");
2216
+ return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants.strong.border, ";");
2217
2217
  case 'minimal':
2218
- return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants.minimal.border, ";");
2218
+ return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants.minimal.border, ";");
2219
2219
  case 'default':
2220
2220
  default:
2221
- return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants["default"].border, ";");
2221
+ return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants["default"].border, ";");
2222
2222
  }
2223
2223
  }, function (_a) {
2224
2224
  var _b = _a.$size,
@@ -2229,33 +2229,33 @@ var StyledDivider = styled.div.withConfig({
2229
2229
  $orientation = _d === void 0 ? 'horizontal' : _d;
2230
2230
  if ($variant === 'minimal' && $orientation === 'horizontal') {
2231
2231
  // Minimal variant always uses its predefined spacing for horizontal
2232
- return "margin: ".concat(tokens.component.separator.variants.minimal.margin, ";");
2232
+ return "margin: ".concat(tokensData.component.separator.variants.minimal.margin, ";");
2233
2233
  }
2234
2234
  if ($orientation === 'vertical') {
2235
2235
  // Vertical orientation uses horizontal margins (left/right)
2236
2236
  switch ($size) {
2237
2237
  case 'small':
2238
- return "margin: 0 ".concat(tokens.semantic.spacing.separator.sm, ";");
2238
+ return "margin: 0 ".concat(tokensData.semantic.spacing.separator.sm, ";");
2239
2239
  case 'medium':
2240
- return "margin: 0 ".concat(tokens.semantic.spacing.separator.md, ";");
2240
+ return "margin: 0 ".concat(tokensData.semantic.spacing.separator.md, ";");
2241
2241
  case 'xlarge':
2242
- return "margin: 0 ".concat(tokens.semantic.spacing.separator.xl, ";");
2242
+ return "margin: 0 ".concat(tokensData.semantic.spacing.separator.xl, ";");
2243
2243
  case 'large':
2244
2244
  default:
2245
- return "margin: 0 ".concat(tokens.semantic.spacing.separator.lg, ";");
2245
+ return "margin: 0 ".concat(tokensData.semantic.spacing.separator.lg, ";");
2246
2246
  }
2247
2247
  }
2248
2248
  // Horizontal orientation uses vertical margins (top/bottom)
2249
2249
  switch ($size) {
2250
2250
  case 'small':
2251
- return "margin: ".concat(tokens.component.separator.sizes.small.margin, ";");
2251
+ return "margin: ".concat(tokensData.component.separator.sizes.small.margin, ";");
2252
2252
  case 'medium':
2253
- return "margin: ".concat(tokens.component.separator.sizes.medium.margin, ";");
2253
+ return "margin: ".concat(tokensData.component.separator.sizes.medium.margin, ";");
2254
2254
  case 'xlarge':
2255
- return "margin: ".concat(tokens.component.separator.sizes.xlarge.margin, ";");
2255
+ return "margin: ".concat(tokensData.component.separator.sizes.xlarge.margin, ";");
2256
2256
  case 'large':
2257
2257
  default:
2258
- return "margin: ".concat(tokens.component.separator.sizes.large.margin, ";");
2258
+ return "margin: ".concat(tokensData.component.separator.sizes.large.margin, ";");
2259
2259
  }
2260
2260
  });
2261
2261
  /**
@@ -2308,12 +2308,12 @@ var StyledStack = styled.div.withConfig({
2308
2308
  // Helper function to convert gap prop to CSS value
2309
2309
  var getGapValue = function getGapValue(gap) {
2310
2310
  // Get semantic layout spacing token
2311
- var semanticSpacing = tokens.semantic.spacing.layout;
2311
+ var semanticSpacing = tokensData.semantic.spacing.layout;
2312
2312
  if (gap in semanticSpacing) {
2313
2313
  return semanticSpacing[gap];
2314
2314
  }
2315
2315
  // Fallback to medium layout spacing if token not found
2316
- return tokens.semantic.spacing.layout.md;
2316
+ return tokensData.semantic.spacing.layout.md;
2317
2317
  };
2318
2318
  var Stack = function Stack(_a) {
2319
2319
  var children = _a.children,
@@ -2347,11 +2347,11 @@ var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
2347
2347
  var BreadcrumbNavStyled = styled.nav.withConfig({
2348
2348
  displayName: "Breadcrumbs__BreadcrumbNavStyled",
2349
2349
  componentId: "sc-7ouzg5-0"
2350
- })(templateObject_1$8 || (templateObject_1$8 = __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 = tokens.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');
2350
+ })(templateObject_1$8 || (templateObject_1$8 = __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');
2351
2351
  var BreadcrumbStyled = styled.li.withConfig({
2352
2352
  displayName: "Breadcrumbs__BreadcrumbStyled",
2353
2353
  componentId: "sc-7ouzg5-1"
2354
- })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"])), ((_d = (_c = tokens.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokens.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', ((_h = (_g = tokens.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokens.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokens.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokens.semantic.color.text.subdued, tokens.semantic.color.text["default"]);
2354
+ })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', ((_h = (_g = tokensData.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokensData.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokensData.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
2355
2355
  var isInternalUrl = function isInternalUrl(url) {
2356
2356
  return url.startsWith('/') && !url.startsWith('http');
2357
2357
  };
@@ -2383,7 +2383,7 @@ React.createElement;
2383
2383
  var CardSmallStyled = styled.div.withConfig({
2384
2384
  displayName: "CardSmall__CardSmallStyled",
2385
2385
  componentId: "sc-jpcqvd-0"
2386
- })(templateObject_1$7 || (templateObject_1$7 = __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"])), tokens.base.border.radius[2], tokens.semantic.color.border.strong);
2386
+ })(templateObject_1$7 || (templateObject_1$7 = __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);
2387
2387
  var CardSmall = function CardSmall(_a) {
2388
2388
  var title = _a.title,
2389
2389
  picture = _a.picture,
@@ -2423,7 +2423,7 @@ var CardSmall = function CardSmall(_a) {
2423
2423
  var templateObject_1$7;
2424
2424
 
2425
2425
  React.createElement;
2426
- var border$3 = tokens.base.border;
2426
+ var border$3 = tokensData.base.border;
2427
2427
  var CardLargeStyled = styled.div.withConfig({
2428
2428
  displayName: "CardLarge__CardLargeStyled",
2429
2429
  componentId: "sc-1rfgdzl-0"
@@ -2500,14 +2500,14 @@ var ChipGroup = function ChipGroup(_a) {
2500
2500
  var templateObject_1$5;
2501
2501
 
2502
2502
  React.createElement;
2503
- var _a$2 = tokens.semantic,
2503
+ var _a$2 = tokensData.semantic,
2504
2504
  color$1 = _a$2.color,
2505
2505
  border$2 = _a$2.border,
2506
2506
  spacing$2 = _a$2.spacing;
2507
2507
  var StyledCodeBlock = styled.pre.withConfig({
2508
2508
  displayName: "CodeBlock__StyledCodeBlock",
2509
2509
  componentId: "sc-1p1t0kp-0"
2510
- })(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokens.base.border.radius[2], spacing$2.layout.md, tokens.base.fontFamily.monospace, tokens.base.fontSize[1], tokens.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
2510
+ })(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
2511
2511
  var CodeBlockWrapper = styled.div.withConfig({
2512
2512
  displayName: "CodeBlock__CodeBlockWrapper",
2513
2513
  componentId: "sc-1p1t0kp-1"
@@ -2595,21 +2595,21 @@ var CodeBlock = function CodeBlock(_a) {
2595
2595
  var templateObject_1$4, templateObject_2$3, templateObject_3$3;
2596
2596
 
2597
2597
  React.createElement;
2598
- var _a$1 = tokens.base,
2598
+ var _a$1 = tokensData.base,
2599
2599
  spacing$1 = _a$1.spacing,
2600
2600
  border$1 = _a$1.border;
2601
2601
  var FeatureBlockStyled = styled.div.withConfig({
2602
2602
  displayName: "FeatureBlock__FeatureBlockStyled",
2603
2603
  componentId: "sc-1mi4lso-0"
2604
- })(templateObject_1$3 || (templateObject_1$3 = __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"])), tokens.base.breakpoint.md, tokens.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
2604
+ })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"], ["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
2605
2605
  var ImageWrapper = styled.div.withConfig({
2606
2606
  displayName: "FeatureBlock__ImageWrapper",
2607
2607
  componentId: "sc-1mi4lso-1"
2608
- })(templateObject_2$2 || (templateObject_2$2 = __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"])), tokens.base.breakpoint.lg);
2608
+ })(templateObject_2$2 || (templateObject_2$2 = __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);
2609
2609
  var ContentSection = styled.div.withConfig({
2610
2610
  displayName: "FeatureBlock__ContentSection",
2611
2611
  componentId: "sc-1mi4lso-2"
2612
- })(templateObject_3$2 || (templateObject_3$2 = __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], tokens.base.breakpoint.lg, spacing$1[8], tokens.base.breakpoint.xl, spacing$1[24]);
2612
+ })(templateObject_3$2 || (templateObject_3$2 = __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]);
2613
2613
  var ButtonWrapper = styled.div.withConfig({
2614
2614
  displayName: "FeatureBlock__ButtonWrapper",
2615
2615
  componentId: "sc-1mi4lso-3"
@@ -2660,11 +2660,11 @@ var FeatureBlock = function FeatureBlock(_a) {
2660
2660
  var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
2661
2661
 
2662
2662
  React.createElement;
2663
- var _a = tokens.base,
2663
+ var _a = tokensData.base,
2664
2664
  spacing = _a.spacing,
2665
2665
  shadow = _a.shadow,
2666
2666
  zIndex = _a.zIndex,
2667
- _b = tokens.semantic,
2667
+ _b = tokensData.semantic,
2668
2668
  color = _b.color,
2669
2669
  typography = _b.typography,
2670
2670
  border = _b.border;
@@ -2678,7 +2678,7 @@ var DropdownTrigger = styled.button.withConfig({
2678
2678
  },
2679
2679
  displayName: "Dropdown__DropdownTrigger",
2680
2680
  componentId: "sc-kz07c4-1"
2681
- })(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n \n &:focus {\n outline: ", ";\n outline-offset: 2px;\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n border-color: ", ";\n }\n \n ", "\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n \n &:focus {\n outline: ", ";\n outline-offset: 2px;\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n border-color: ", ";\n }\n \n ", "\n"])), spacing[3], spacing[4], color.background["default"], border["default"], tokens.base.border.radius[2], typography.body, color.text["default"], color.background.surface, color.border.strong, tokens.semantic.border.focus, color.background.disabled, color.text.disabled, color.border.subtle, function (_a) {
2681
+ })(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n \n &:focus {\n outline: ", ";\n outline-offset: 2px;\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n border-color: ", ";\n }\n \n ", "\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n \n &:focus {\n outline: ", ";\n outline-offset: 2px;\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n border-color: ", ";\n }\n \n ", "\n"])), spacing[3], spacing[4], color.background["default"], border["default"], tokensData.base.border.radius[2], typography.body, color.text["default"], color.background.surface, color.border.strong, tokensData.semantic.border.focus, color.background.disabled, color.text.disabled, color.border.subtle, function (_a) {
2682
2682
  var $isOpen = _a.$isOpen;
2683
2683
  return $isOpen && "\n background-color: ".concat(color.background.surface, ";\n border-color: ").concat(color.border.strong, ";\n ");
2684
2684
  });
@@ -2698,7 +2698,7 @@ var DropdownMenu = styled.div.withConfig({
2698
2698
  },
2699
2699
  displayName: "Dropdown__DropdownMenu",
2700
2700
  componentId: "sc-kz07c4-3"
2701
- })(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"])), zIndex[3], color.background["default"], border["default"], tokens.base.border.radius[2], shadow[3], spacing[1], function (_a) {
2701
+ })(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"])), zIndex[3], color.background["default"], border["default"], tokensData.base.border.radius[2], shadow[3], spacing[1], function (_a) {
2702
2702
  var $isOpen = _a.$isOpen;
2703
2703
  return $isOpen ? 1 : 0;
2704
2704
  }, function (_a) {
@@ -2877,9 +2877,9 @@ var PageTitleStyled = styled.div.withConfig({
2877
2877
  },
2878
2878
  displayName: "PageTitle__PageTitleStyled",
2879
2879
  componentId: "sc-16h256f-0"
2880
- })(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokens.base.spacing[6], function (_a) {
2880
+ })(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
2881
2881
  var $hasBackButton = _a.$hasBackButton;
2882
- return $hasBackButton ? tokens.base.spacing[0] : tokens.base.spacing[12];
2882
+ return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
2883
2883
  });
2884
2884
  var PageTitle = function PageTitle(_a) {
2885
2885
  var title = _a.title,
@@ -2909,12 +2909,12 @@ var templateObject_1$1;
2909
2909
  React.createElement;
2910
2910
  // Breakpoints using base tokens
2911
2911
  var breakpoints = {
2912
- xs: tokens.base.breakpoint.xs,
2913
- sm: tokens.base.breakpoint.sm,
2914
- md: tokens.base.breakpoint.md,
2915
- lg: tokens.base.breakpoint.lg,
2916
- xl: tokens.base.breakpoint.xl,
2917
- '2xl': tokens.base.breakpoint['2xl']
2912
+ xs: tokensData.base.breakpoint.xs,
2913
+ sm: tokensData.base.breakpoint.sm,
2914
+ md: tokensData.base.breakpoint.md,
2915
+ lg: tokensData.base.breakpoint.lg,
2916
+ xl: tokensData.base.breakpoint.xl,
2917
+ '2xl': tokensData.base.breakpoint['2xl']
2918
2918
  };
2919
2919
  // Media query helpers
2920
2920
  var media = {
@@ -2950,9 +2950,9 @@ var Grid = function Grid(_a) {
2950
2950
  children = _a.children;
2951
2951
  return /*#__PURE__*/React.createElement(GridContainer, {
2952
2952
  $cols: cols,
2953
- $gap: gap ? tokens.base.spacing[gap] : undefined,
2954
- $gapX: gapX ? tokens.base.spacing[gapX] : undefined,
2955
- $gapY: gapY ? tokens.base.spacing[gapY] : undefined,
2953
+ $gap: gap ? tokensData.base.spacing[gap] : undefined,
2954
+ $gapX: gapX ? tokensData.base.spacing[gapX] : undefined,
2955
+ $gapY: gapY ? tokensData.base.spacing[gapY] : undefined,
2956
2956
  className: className
2957
2957
  }, children);
2958
2958
  };
@@ -3086,26 +3086,29 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
3086
3086
  $colsMd: colsMd,
3087
3087
  $colsLg: colsLg,
3088
3088
  $colsXl: colsXl,
3089
- $gap: gap ? tokens.base.spacing[gap] : undefined,
3090
- $gapSm: gapSm ? tokens.base.spacing[gapSm] : undefined,
3091
- $gapMd: gapMd ? tokens.base.spacing[gapMd] : undefined,
3092
- $gapLg: gapLg ? tokens.base.spacing[gapLg] : undefined,
3093
- $gapXl: gapXl ? tokens.base.spacing[gapXl] : undefined,
3094
- $gapX: gapX ? tokens.base.spacing[gapX] : undefined,
3095
- $gapXSm: gapXSm ? tokens.base.spacing[gapXSm] : undefined,
3096
- $gapXMd: gapXMd ? tokens.base.spacing[gapXMd] : undefined,
3097
- $gapXLg: gapXLg ? tokens.base.spacing[gapXLg] : undefined,
3098
- $gapXXl: gapXXl ? tokens.base.spacing[gapXXl] : undefined,
3099
- $gapY: gapY ? tokens.base.spacing[gapY] : undefined,
3100
- $gapYSm: gapYSm ? tokens.base.spacing[gapYSm] : undefined,
3101
- $gapYMd: gapYMd ? tokens.base.spacing[gapYMd] : undefined,
3102
- $gapYLg: gapYLg ? tokens.base.spacing[gapYLg] : undefined,
3103
- $gapYXl: gapYXl ? tokens.base.spacing[gapYXl] : undefined,
3089
+ $gap: gap ? tokensData.base.spacing[gap] : undefined,
3090
+ $gapSm: gapSm ? tokensData.base.spacing[gapSm] : undefined,
3091
+ $gapMd: gapMd ? tokensData.base.spacing[gapMd] : undefined,
3092
+ $gapLg: gapLg ? tokensData.base.spacing[gapLg] : undefined,
3093
+ $gapXl: gapXl ? tokensData.base.spacing[gapXl] : undefined,
3094
+ $gapX: gapX ? tokensData.base.spacing[gapX] : undefined,
3095
+ $gapXSm: gapXSm ? tokensData.base.spacing[gapXSm] : undefined,
3096
+ $gapXMd: gapXMd ? tokensData.base.spacing[gapXMd] : undefined,
3097
+ $gapXLg: gapXLg ? tokensData.base.spacing[gapXLg] : undefined,
3098
+ $gapXXl: gapXXl ? tokensData.base.spacing[gapXXl] : undefined,
3099
+ $gapY: gapY ? tokensData.base.spacing[gapY] : undefined,
3100
+ $gapYSm: gapYSm ? tokensData.base.spacing[gapYSm] : undefined,
3101
+ $gapYMd: gapYMd ? tokensData.base.spacing[gapYMd] : undefined,
3102
+ $gapYLg: gapYLg ? tokensData.base.spacing[gapYLg] : undefined,
3103
+ $gapYXl: gapYXl ? tokensData.base.spacing[gapYXl] : undefined,
3104
3104
  className: className
3105
3105
  }, children);
3106
3106
  };
3107
3107
  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;
3108
3108
 
3109
+ // Main design system exports
3110
+ var tokens = tokensData;
3111
+
3109
3112
  exports.Avatar = Avatar;
3110
3113
  exports.Badge = Badge;
3111
3114
  exports.BooleanChip = BooleanChip;