@common-origin/design-system 1.9.5 → 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 (6) hide show
  1. package/dist/index.d.ts +633 -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/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -731,7 +731,7 @@ var semantic$1 = {
731
731
  },
732
732
  $ref: "./semantic/index.json"
733
733
  };
734
- var tokens = {
734
+ var tokensData = {
735
735
  base: base$1,
736
736
  component: component,
737
737
  semantic: semantic$1
@@ -746,18 +746,18 @@ var AvatarContainer = styled.div.withConfig({
746
746
  componentId: "sc-ezn4ax-0"
747
747
  })(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) {
748
748
  var $size = _a.$size;
749
- return tokens.semantic.size.avatar[$size];
749
+ return tokensData.semantic.size.avatar[$size];
750
750
  }, function (_a) {
751
751
  var $size = _a.$size;
752
- return tokens.semantic.size.avatar[$size];
753
- }, tokens.base.border.radius.circle, tokens.semantic.color.background.surface);
752
+ return tokensData.semantic.size.avatar[$size];
753
+ }, tokensData.base.border.radius.circle, tokensData.semantic.color.background.surface);
754
754
  var AvatarImage = styled.img.withConfig({
755
755
  shouldForwardProp: function shouldForwardProp(prop) {
756
756
  return !prop.startsWith('$');
757
757
  },
758
758
  displayName: "Avatar__AvatarImage",
759
759
  componentId: "sc-ezn4ax-1"
760
- })(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);
760
+ })(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);
761
761
  var AvatarInitials = styled.span.withConfig({
762
762
  shouldForwardProp: function shouldForwardProp(prop) {
763
763
  return !prop.startsWith('$');
@@ -766,17 +766,17 @@ var AvatarInitials = styled.span.withConfig({
766
766
  componentId: "sc-ezn4ax-2"
767
767
  })(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"
768
768
  // Helper function to get initials from name
769
- ])), tokens.base.fontFamily.body, tokens.base.fontWeight[3], function (_a) {
769
+ ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
770
770
  var $size = _a.$size;
771
771
  var sizeMap = {
772
- xs: tokens.base.fontSize[1],
773
- sm: tokens.base.fontSize[2],
774
- md: tokens.base.fontSize[3],
775
- lg: tokens.base.fontSize[4],
776
- xl: tokens.base.fontSize[5]
772
+ xs: tokensData.base.fontSize[1],
773
+ sm: tokensData.base.fontSize[2],
774
+ md: tokensData.base.fontSize[3],
775
+ lg: tokensData.base.fontSize[4],
776
+ xl: tokensData.base.fontSize[5]
777
777
  };
778
778
  return sizeMap[$size];
779
- }, tokens.semantic.color.text["default"]);
779
+ }, tokensData.semantic.color.text["default"]);
780
780
  // Helper function to get initials from name
781
781
  var getInitials = function getInitials(name) {
782
782
  return name.split(' ').map(function (word) {
@@ -830,18 +830,18 @@ var Avatar = function Avatar(_a) {
830
830
  var templateObject_1$m, templateObject_2$b, templateObject_3$9;
831
831
 
832
832
  React.createElement;
833
- var _a$5 = tokens.semantic,
833
+ var _a$5 = tokensData.semantic,
834
834
  typography$2 = _a$5.typography,
835
835
  color$4 = _a$5.color;
836
836
  var getTypographyStyles = function getTypographyStyles(variant) {
837
837
  var styles = {
838
- display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
839
- h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
840
- h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
841
- h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
842
- h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
843
- h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
844
- h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
838
+ display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
839
+ h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
840
+ h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
841
+ h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
842
+ h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
843
+ h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
844
+ h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
845
845
  subtitle: "font: ".concat(typography$2.subtitle, ";"),
846
846
  body: "font: ".concat(typography$2.body, ";"),
847
847
  small: "font: ".concat(typography$2.small, ";"),
@@ -965,8 +965,8 @@ var Typography = function Typography(_a) {
965
965
  var templateObject_1$l;
966
966
 
967
967
  React.createElement;
968
- var color$3 = tokens.semantic.color;
969
- tokens.base.shadow;
968
+ var color$3 = tokensData.semantic.color;
969
+ tokensData.base.shadow;
970
970
  var scaleIn = 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"])));
971
971
  var BadgeWrapper = styled.span.withConfig({
972
972
  displayName: "Badge__BadgeWrapper",
@@ -986,7 +986,7 @@ var BadgeIndicator = styled.span.withConfig({
986
986
  return props.$isDot ? '8px' : '16px';
987
987
  }, function (props) {
988
988
  return props.$isDot ? '0' : '0 4px';
989
- }, tokens.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
989
+ }, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
990
990
  switch (props.$variant) {
991
991
  case 'primary':
992
992
  return "\n background-color: ".concat(color$3.background.interactive, ";\n color: ").concat(color$3.text.inverse, ";\n ");
@@ -1056,35 +1056,35 @@ var StyledBox = styled.div.withConfig({
1056
1056
  }, function (props) {
1057
1057
  return props.$flexWrap && css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
1058
1058
  }, function (props) {
1059
- return props.$gap && css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokens.semantic.spacing.layout[props.$gap]);
1059
+ return props.$gap && css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
1060
1060
  }, function (props) {
1061
- return props.$m && css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokens.semantic.spacing.layout[props.$m]);
1061
+ return props.$m && css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
1062
1062
  }, function (props) {
1063
- return props.$mt && css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokens.semantic.spacing.layout[props.$mt]);
1063
+ return props.$mt && css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
1064
1064
  }, function (props) {
1065
- return props.$mr && css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokens.semantic.spacing.layout[props.$mr]);
1065
+ return props.$mr && css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
1066
1066
  }, function (props) {
1067
- return props.$mb && css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokens.semantic.spacing.layout[props.$mb]);
1067
+ return props.$mb && css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
1068
1068
  }, function (props) {
1069
- return props.$ml && css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokens.semantic.spacing.layout[props.$ml]);
1069
+ return props.$ml && css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
1070
1070
  }, function (props) {
1071
- return props.$mx && 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]);
1071
+ return props.$mx && 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]);
1072
1072
  }, function (props) {
1073
- return props.$my && 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]);
1073
+ return props.$my && 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]);
1074
1074
  }, function (props) {
1075
- return props.$p && css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokens.semantic.spacing.layout[props.$p]);
1075
+ return props.$p && css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
1076
1076
  }, function (props) {
1077
- return props.$pt && css(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokens.semantic.spacing.layout[props.$pt]);
1077
+ return props.$pt && css(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensData.semantic.spacing.layout[props.$pt]);
1078
1078
  }, function (props) {
1079
- return props.$pr && css(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokens.semantic.spacing.layout[props.$pr]);
1079
+ return props.$pr && css(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
1080
1080
  }, function (props) {
1081
- return props.$pb && css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokens.semantic.spacing.layout[props.$pb]);
1081
+ return props.$pb && css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
1082
1082
  }, function (props) {
1083
- return props.$pl && css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokens.semantic.spacing.layout[props.$pl]);
1083
+ return props.$pl && css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensData.semantic.spacing.layout[props.$pl]);
1084
1084
  }, function (props) {
1085
- 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 "])), tokens.semantic.spacing.layout[props.$px], tokens.semantic.spacing.layout[props.$px]);
1085
+ 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]);
1086
1086
  }, function (props) {
1087
- 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 "])), tokens.semantic.spacing.layout[props.$py], tokens.semantic.spacing.layout[props.$py]);
1087
+ 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]);
1088
1088
  }, function (props) {
1089
1089
  return props.$width && css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), props.$width);
1090
1090
  }, function (props) {
@@ -1108,21 +1108,21 @@ var StyledBox = styled.div.withConfig({
1108
1108
  }, function (props) {
1109
1109
  return props.$left && css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
1110
1110
  }, function (props) {
1111
- return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokens.base.border.radius[props.$borderRadius]);
1111
+ return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.base.border.radius[props.$borderRadius]);
1112
1112
  }, function (props) {
1113
- return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokens.semantic.color.border[props.$border]);
1113
+ return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensData.semantic.color.border[props.$border]);
1114
1114
  }, function (props) {
1115
- return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: 1px solid ", ";"], ["border-top: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderTop]);
1115
+ 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]);
1116
1116
  }, function (props) {
1117
- return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: 1px solid ", ";"], ["border-right: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderRight]);
1117
+ 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]);
1118
1118
  }, function (props) {
1119
- return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderBottom]);
1119
+ return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: 1px solid ", ";"], ["border-bottom: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderBottom]);
1120
1120
  }, function (props) {
1121
- return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokens.semantic.color.border[props.$borderLeft]);
1121
+ return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: 1px solid ", ";"], ["border-left: 1px solid ", ";"])), tokensData.semantic.color.border[props.$borderLeft]);
1122
1122
  }, function (props) {
1123
- return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokens.semantic.color.background[props.$bg]);
1123
+ return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensData.semantic.color.background[props.$bg]);
1124
1124
  }, function (props) {
1125
- return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokens.semantic.color.text[props.$color]);
1125
+ return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensData.semantic.color.text[props.$color]);
1126
1126
  }, function (props) {
1127
1127
  return props.$overflow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
1128
1128
  }, function (props) {
@@ -1359,35 +1359,35 @@ var IconStyled = styled.span.withConfig({
1359
1359
  componentId: "sc-1105czq-0"
1360
1360
  })(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) {
1361
1361
  var $size = _a.$size;
1362
- return tokens.semantic.size.icon[$size];
1362
+ return tokensData.semantic.size.icon[$size];
1363
1363
  }, function (_a) {
1364
1364
  var $size = _a.$size;
1365
- return tokens.semantic.size.icon[$size];
1365
+ return tokensData.semantic.size.icon[$size];
1366
1366
  }, function (_a) {
1367
1367
  var $iconColor = _a.$iconColor;
1368
1368
  switch ($iconColor) {
1369
1369
  case 'default':
1370
- return tokens.semantic.color.icon["default"];
1370
+ return tokensData.semantic.color.icon["default"];
1371
1371
  case 'emphasis':
1372
- return tokens.semantic.color.icon.emphasis;
1372
+ return tokensData.semantic.color.icon.emphasis;
1373
1373
  case 'subdued':
1374
- return tokens.semantic.color.icon.subdued;
1374
+ return tokensData.semantic.color.icon.subdued;
1375
1375
  case 'disabled':
1376
- return tokens.semantic.color.icon.disabled;
1376
+ return tokensData.semantic.color.icon.disabled;
1377
1377
  case 'inverse':
1378
- return tokens.semantic.color.icon.inverse;
1378
+ return tokensData.semantic.color.icon.inverse;
1379
1379
  case 'interactive':
1380
- return tokens.semantic.color.icon.interactive;
1380
+ return tokensData.semantic.color.icon.interactive;
1381
1381
  case 'error':
1382
- return tokens.semantic.color.icon.error;
1382
+ return tokensData.semantic.color.icon.error;
1383
1383
  case 'success':
1384
- return tokens.semantic.color.icon.success;
1384
+ return tokensData.semantic.color.icon.success;
1385
1385
  case 'warning':
1386
- return tokens.semantic.color.icon.warning;
1386
+ return tokensData.semantic.color.icon.warning;
1387
1387
  case 'inherit':
1388
1388
  return 'currentColor';
1389
1389
  default:
1390
- return tokens.semantic.color.icon["default"];
1390
+ return tokensData.semantic.color.icon["default"];
1391
1391
  }
1392
1392
  });
1393
1393
  var Icon = function Icon(_a) {
@@ -1424,10 +1424,10 @@ var Icon = function Icon(_a) {
1424
1424
  var templateObject_1$i;
1425
1425
 
1426
1426
  React.createElement;
1427
- var button = tokens.component.button,
1428
- semantic = tokens.semantic;
1427
+ var button = tokensData.component.button,
1428
+ semantic = tokensData.semantic;
1429
1429
  // Base styles shared between button and link
1430
- 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");
1430
+ 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");
1431
1431
  // Dynamic variant styles using component tokens
1432
1432
  var getVariantStyles = function getVariantStyles(_a) {
1433
1433
  var $variant = _a.$variant;
@@ -1555,13 +1555,13 @@ var Button = function Button(_a) {
1555
1555
  };
1556
1556
  var templateObject_1$h, templateObject_2$8;
1557
1557
 
1558
- var chip = tokens.component.chip;
1558
+ var chip = tokensData.component.chip;
1559
1559
  // Helper function to get variant styles as objects for CSS custom properties
1560
1560
  var getVariantStylesAsObject = function getVariantStylesAsObject(variant, selected) {
1561
1561
  // Boolean chips with selected state get special background
1562
1562
  if (selected) {
1563
1563
  return {
1564
- backgroundColor: tokens.semantic.color.background['interactive-subtle'],
1564
+ backgroundColor: tokensData.semantic.color.background['interactive-subtle'],
1565
1565
  color: chip["default"].textColor
1566
1566
  };
1567
1567
  }
@@ -1616,14 +1616,14 @@ var BaseChipStyled = styled.span.withConfig({
1616
1616
  componentId: "sc-moa6zc-0"
1617
1617
  })(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"
1618
1618
  // Icon container for selected indicator or leading icons
1619
- ])), tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
1619
+ ])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
1620
1620
  // Icon container for selected indicator or leading icons
1621
1621
  var IconContainer = styled.span.withConfig({
1622
1622
  displayName: "ChipBase__IconContainer",
1623
1623
  componentId: "sc-moa6zc-1"
1624
1624
  })(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"
1625
1625
  // Close button for dismissible chips
1626
- ])), tokens.semantic.spacing.layout.sm);
1626
+ ])), tokensData.semantic.spacing.layout.sm);
1627
1627
  // Close button for dismissible chips
1628
1628
  var CloseButton = styled.button.withConfig({
1629
1629
  shouldForwardProp: function shouldForwardProp(prop) {
@@ -1633,11 +1633,11 @@ var CloseButton = styled.button.withConfig({
1633
1633
  componentId: "sc-moa6zc-2"
1634
1634
  })(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"
1635
1635
  // Wrapper component that applies styles via CSS custom properties
1636
- ])), tokens.semantic.spacing.layout.sm, function (props) {
1636
+ ])), tokensData.semantic.spacing.layout.sm, function (props) {
1637
1637
  return props.$disabled ? 'not-allowed' : 'pointer';
1638
1638
  }, function (props) {
1639
1639
  return props.$disabled ? '0.6' : '1';
1640
- }, tokens.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
1640
+ }, tokensData.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
1641
1641
  // Wrapper component that applies styles via CSS custom properties
1642
1642
  var StyledChipWrapper = function StyledChipWrapper(_a) {
1643
1643
  var $variant = _a.$variant,
@@ -1888,12 +1888,12 @@ var BooleanChip = function BooleanChip(_a) {
1888
1888
 
1889
1889
  // Breakpoints using base tokens
1890
1890
  var breakpoints$1 = {
1891
- xs: tokens.base.breakpoint.xs,
1892
- sm: tokens.base.breakpoint.sm,
1893
- md: tokens.base.breakpoint.md,
1894
- lg: tokens.base.breakpoint.lg,
1895
- xl: tokens.base.breakpoint.xl,
1896
- '2xl': tokens.base.breakpoint['2xl']
1891
+ xs: tokensData.base.breakpoint.xs,
1892
+ sm: tokensData.base.breakpoint.sm,
1893
+ md: tokensData.base.breakpoint.md,
1894
+ lg: tokensData.base.breakpoint.lg,
1895
+ xl: tokensData.base.breakpoint.xl,
1896
+ '2xl': tokensData.base.breakpoint['2xl']
1897
1897
  };
1898
1898
  // Media query helpers
1899
1899
  var media$1 = {
@@ -1906,7 +1906,7 @@ var media$1 = {
1906
1906
  };
1907
1907
 
1908
1908
  React.createElement;
1909
- var spacing$3 = tokens.semantic.spacing;
1909
+ var spacing$3 = tokensData.semantic.spacing;
1910
1910
  var StyledContainer = styled.div.withConfig({
1911
1911
  displayName: "Container__StyledContainer",
1912
1912
  componentId: "sc-17dbj6n-0"
@@ -1919,7 +1919,7 @@ var Container = function Container(_a) {
1919
1919
  var templateObject_1$f;
1920
1920
 
1921
1921
  React.createElement;
1922
- var base = tokens.base;
1922
+ var base = tokensData.base;
1923
1923
  var PictureWrapper = styled.div.withConfig({
1924
1924
  displayName: "Picture__PictureWrapper",
1925
1925
  componentId: "sc-11d9tei-0"
@@ -1965,7 +1965,7 @@ var Picture = function Picture(_a) {
1965
1965
  var templateObject_1$e, templateObject_2$6, templateObject_3$5, templateObject_4$4;
1966
1966
 
1967
1967
  React.createElement;
1968
- var _a$4 = tokens.semantic,
1968
+ var _a$4 = tokensData.semantic,
1969
1969
  typography$1 = _a$4.typography,
1970
1970
  color$2 = _a$4.color;
1971
1971
  var TimeStyled = styled.time.withConfig({
@@ -1986,8 +1986,8 @@ var DateFormatter = function DateFormatter(_a) {
1986
1986
  var templateObject_1$d;
1987
1987
 
1988
1988
  React.createElement;
1989
- var motion = tokens.semantic.motion,
1990
- iconButton = tokens.component.iconButton;
1989
+ var motion = tokensData.semantic.motion,
1990
+ iconButton = tokensData.component.iconButton;
1991
1991
  var IconButtonStyled = styled.button.withConfig({
1992
1992
  shouldForwardProp: function shouldForwardProp(prop) {
1993
1993
  return !prop.startsWith('$');
@@ -2114,10 +2114,10 @@ var ProgressBarContainer = styled.div.withConfig({
2114
2114
  },
2115
2115
  displayName: "ProgressBar__ProgressBarContainer",
2116
2116
  componentId: "sc-1nco33q-0"
2117
- })(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) {
2118
- return props.$variant === 'horizontal' && 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);
2117
+ })(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) {
2118
+ return props.$variant === 'horizontal' && 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);
2119
2119
  }, function (props) {
2120
- return props.$variant === 'vertical' && 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);
2120
+ return props.$variant === 'vertical' && 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);
2121
2121
  });
2122
2122
  var ProgressBarFill = styled.div.withConfig({
2123
2123
  shouldForwardProp: function shouldForwardProp(prop) {
@@ -2125,18 +2125,18 @@ var ProgressBarFill = styled.div.withConfig({
2125
2125
  },
2126
2126
  displayName: "ProgressBar__ProgressBarFill",
2127
2127
  componentId: "sc-1nco33q-1"
2128
- })(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) {
2128
+ })(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) {
2129
2129
  var backgroundColor;
2130
2130
  switch (props.$color) {
2131
2131
  case 'success':
2132
- backgroundColor = tokens.semantic.color.background.success;
2132
+ backgroundColor = tokensData.semantic.color.background.success;
2133
2133
  break;
2134
2134
  case 'error':
2135
- backgroundColor = tokens.semantic.color.background.error;
2135
+ backgroundColor = tokensData.semantic.color.background.error;
2136
2136
  break;
2137
2137
  case 'default':
2138
2138
  default:
2139
- backgroundColor = tokens.semantic.color.background.interactive;
2139
+ backgroundColor = tokensData.semantic.color.background.interactive;
2140
2140
  break;
2141
2141
  }
2142
2142
  return css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
@@ -2211,12 +2211,12 @@ var StyledDivider = styled.div.withConfig({
2211
2211
  var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
2212
2212
  switch ($variant) {
2213
2213
  case 'strong':
2214
- return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants.strong.border, ";");
2214
+ return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants.strong.border, ";");
2215
2215
  case 'minimal':
2216
- return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants.minimal.border, ";");
2216
+ return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants.minimal.border, ";");
2217
2217
  case 'default':
2218
2218
  default:
2219
- return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants["default"].border, ";");
2219
+ return "".concat(borderProperty, ": ").concat(tokensData.component.separator.variants["default"].border, ";");
2220
2220
  }
2221
2221
  }, function (_a) {
2222
2222
  var _b = _a.$size,
@@ -2227,33 +2227,33 @@ var StyledDivider = styled.div.withConfig({
2227
2227
  $orientation = _d === void 0 ? 'horizontal' : _d;
2228
2228
  if ($variant === 'minimal' && $orientation === 'horizontal') {
2229
2229
  // Minimal variant always uses its predefined spacing for horizontal
2230
- return "margin: ".concat(tokens.component.separator.variants.minimal.margin, ";");
2230
+ return "margin: ".concat(tokensData.component.separator.variants.minimal.margin, ";");
2231
2231
  }
2232
2232
  if ($orientation === 'vertical') {
2233
2233
  // Vertical orientation uses horizontal margins (left/right)
2234
2234
  switch ($size) {
2235
2235
  case 'small':
2236
- return "margin: 0 ".concat(tokens.semantic.spacing.separator.sm, ";");
2236
+ return "margin: 0 ".concat(tokensData.semantic.spacing.separator.sm, ";");
2237
2237
  case 'medium':
2238
- return "margin: 0 ".concat(tokens.semantic.spacing.separator.md, ";");
2238
+ return "margin: 0 ".concat(tokensData.semantic.spacing.separator.md, ";");
2239
2239
  case 'xlarge':
2240
- return "margin: 0 ".concat(tokens.semantic.spacing.separator.xl, ";");
2240
+ return "margin: 0 ".concat(tokensData.semantic.spacing.separator.xl, ";");
2241
2241
  case 'large':
2242
2242
  default:
2243
- return "margin: 0 ".concat(tokens.semantic.spacing.separator.lg, ";");
2243
+ return "margin: 0 ".concat(tokensData.semantic.spacing.separator.lg, ";");
2244
2244
  }
2245
2245
  }
2246
2246
  // Horizontal orientation uses vertical margins (top/bottom)
2247
2247
  switch ($size) {
2248
2248
  case 'small':
2249
- return "margin: ".concat(tokens.component.separator.sizes.small.margin, ";");
2249
+ return "margin: ".concat(tokensData.component.separator.sizes.small.margin, ";");
2250
2250
  case 'medium':
2251
- return "margin: ".concat(tokens.component.separator.sizes.medium.margin, ";");
2251
+ return "margin: ".concat(tokensData.component.separator.sizes.medium.margin, ";");
2252
2252
  case 'xlarge':
2253
- return "margin: ".concat(tokens.component.separator.sizes.xlarge.margin, ";");
2253
+ return "margin: ".concat(tokensData.component.separator.sizes.xlarge.margin, ";");
2254
2254
  case 'large':
2255
2255
  default:
2256
- return "margin: ".concat(tokens.component.separator.sizes.large.margin, ";");
2256
+ return "margin: ".concat(tokensData.component.separator.sizes.large.margin, ";");
2257
2257
  }
2258
2258
  });
2259
2259
  /**
@@ -2306,12 +2306,12 @@ var StyledStack = styled.div.withConfig({
2306
2306
  // Helper function to convert gap prop to CSS value
2307
2307
  var getGapValue = function getGapValue(gap) {
2308
2308
  // Get semantic layout spacing token
2309
- var semanticSpacing = tokens.semantic.spacing.layout;
2309
+ var semanticSpacing = tokensData.semantic.spacing.layout;
2310
2310
  if (gap in semanticSpacing) {
2311
2311
  return semanticSpacing[gap];
2312
2312
  }
2313
2313
  // Fallback to medium layout spacing if token not found
2314
- return tokens.semantic.spacing.layout.md;
2314
+ return tokensData.semantic.spacing.layout.md;
2315
2315
  };
2316
2316
  var Stack = function Stack(_a) {
2317
2317
  var children = _a.children,
@@ -2345,11 +2345,11 @@ var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
2345
2345
  var BreadcrumbNavStyled = styled.nav.withConfig({
2346
2346
  displayName: "Breadcrumbs__BreadcrumbNavStyled",
2347
2347
  componentId: "sc-7ouzg5-0"
2348
- })(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');
2348
+ })(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');
2349
2349
  var BreadcrumbStyled = styled.li.withConfig({
2350
2350
  displayName: "Breadcrumbs__BreadcrumbStyled",
2351
2351
  componentId: "sc-7ouzg5-1"
2352
- })(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"]);
2352
+ })(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"]);
2353
2353
  var isInternalUrl = function isInternalUrl(url) {
2354
2354
  return url.startsWith('/') && !url.startsWith('http');
2355
2355
  };
@@ -2381,7 +2381,7 @@ React.createElement;
2381
2381
  var CardSmallStyled = styled.div.withConfig({
2382
2382
  displayName: "CardSmall__CardSmallStyled",
2383
2383
  componentId: "sc-jpcqvd-0"
2384
- })(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);
2384
+ })(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);
2385
2385
  var CardSmall = function CardSmall(_a) {
2386
2386
  var title = _a.title,
2387
2387
  picture = _a.picture,
@@ -2421,7 +2421,7 @@ var CardSmall = function CardSmall(_a) {
2421
2421
  var templateObject_1$7;
2422
2422
 
2423
2423
  React.createElement;
2424
- var border$3 = tokens.base.border;
2424
+ var border$3 = tokensData.base.border;
2425
2425
  var CardLargeStyled = styled.div.withConfig({
2426
2426
  displayName: "CardLarge__CardLargeStyled",
2427
2427
  componentId: "sc-1rfgdzl-0"
@@ -2498,14 +2498,14 @@ var ChipGroup = function ChipGroup(_a) {
2498
2498
  var templateObject_1$5;
2499
2499
 
2500
2500
  React.createElement;
2501
- var _a$2 = tokens.semantic,
2501
+ var _a$2 = tokensData.semantic,
2502
2502
  color$1 = _a$2.color,
2503
2503
  border$2 = _a$2.border,
2504
2504
  spacing$2 = _a$2.spacing;
2505
2505
  var StyledCodeBlock = styled.pre.withConfig({
2506
2506
  displayName: "CodeBlock__StyledCodeBlock",
2507
2507
  componentId: "sc-1p1t0kp-0"
2508
- })(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);
2508
+ })(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);
2509
2509
  var CodeBlockWrapper = styled.div.withConfig({
2510
2510
  displayName: "CodeBlock__CodeBlockWrapper",
2511
2511
  componentId: "sc-1p1t0kp-1"
@@ -2593,21 +2593,21 @@ var CodeBlock = function CodeBlock(_a) {
2593
2593
  var templateObject_1$4, templateObject_2$3, templateObject_3$3;
2594
2594
 
2595
2595
  React.createElement;
2596
- var _a$1 = tokens.base,
2596
+ var _a$1 = tokensData.base,
2597
2597
  spacing$1 = _a$1.spacing,
2598
2598
  border$1 = _a$1.border;
2599
2599
  var FeatureBlockStyled = styled.div.withConfig({
2600
2600
  displayName: "FeatureBlock__FeatureBlockStyled",
2601
2601
  componentId: "sc-1mi4lso-0"
2602
- })(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]);
2602
+ })(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]);
2603
2603
  var ImageWrapper = styled.div.withConfig({
2604
2604
  displayName: "FeatureBlock__ImageWrapper",
2605
2605
  componentId: "sc-1mi4lso-1"
2606
- })(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);
2606
+ })(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);
2607
2607
  var ContentSection = styled.div.withConfig({
2608
2608
  displayName: "FeatureBlock__ContentSection",
2609
2609
  componentId: "sc-1mi4lso-2"
2610
- })(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]);
2610
+ })(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]);
2611
2611
  var ButtonWrapper = styled.div.withConfig({
2612
2612
  displayName: "FeatureBlock__ButtonWrapper",
2613
2613
  componentId: "sc-1mi4lso-3"
@@ -2658,11 +2658,11 @@ var FeatureBlock = function FeatureBlock(_a) {
2658
2658
  var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
2659
2659
 
2660
2660
  React.createElement;
2661
- var _a = tokens.base,
2661
+ var _a = tokensData.base,
2662
2662
  spacing = _a.spacing,
2663
2663
  shadow = _a.shadow,
2664
2664
  zIndex = _a.zIndex,
2665
- _b = tokens.semantic,
2665
+ _b = tokensData.semantic,
2666
2666
  color = _b.color,
2667
2667
  typography = _b.typography,
2668
2668
  border = _b.border;
@@ -2676,7 +2676,7 @@ var DropdownTrigger = styled.button.withConfig({
2676
2676
  },
2677
2677
  displayName: "Dropdown__DropdownTrigger",
2678
2678
  componentId: "sc-kz07c4-1"
2679
- })(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) {
2679
+ })(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) {
2680
2680
  var $isOpen = _a.$isOpen;
2681
2681
  return $isOpen && "\n background-color: ".concat(color.background.surface, ";\n border-color: ").concat(color.border.strong, ";\n ");
2682
2682
  });
@@ -2696,7 +2696,7 @@ var DropdownMenu = styled.div.withConfig({
2696
2696
  },
2697
2697
  displayName: "Dropdown__DropdownMenu",
2698
2698
  componentId: "sc-kz07c4-3"
2699
- })(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) {
2699
+ })(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) {
2700
2700
  var $isOpen = _a.$isOpen;
2701
2701
  return $isOpen ? 1 : 0;
2702
2702
  }, function (_a) {
@@ -2875,9 +2875,9 @@ var PageTitleStyled = styled.div.withConfig({
2875
2875
  },
2876
2876
  displayName: "PageTitle__PageTitleStyled",
2877
2877
  componentId: "sc-16h256f-0"
2878
- })(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) {
2878
+ })(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) {
2879
2879
  var $hasBackButton = _a.$hasBackButton;
2880
- return $hasBackButton ? tokens.base.spacing[0] : tokens.base.spacing[12];
2880
+ return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
2881
2881
  });
2882
2882
  var PageTitle = function PageTitle(_a) {
2883
2883
  var title = _a.title,
@@ -2907,12 +2907,12 @@ var templateObject_1$1;
2907
2907
  React.createElement;
2908
2908
  // Breakpoints using base tokens
2909
2909
  var breakpoints = {
2910
- xs: tokens.base.breakpoint.xs,
2911
- sm: tokens.base.breakpoint.sm,
2912
- md: tokens.base.breakpoint.md,
2913
- lg: tokens.base.breakpoint.lg,
2914
- xl: tokens.base.breakpoint.xl,
2915
- '2xl': tokens.base.breakpoint['2xl']
2910
+ xs: tokensData.base.breakpoint.xs,
2911
+ sm: tokensData.base.breakpoint.sm,
2912
+ md: tokensData.base.breakpoint.md,
2913
+ lg: tokensData.base.breakpoint.lg,
2914
+ xl: tokensData.base.breakpoint.xl,
2915
+ '2xl': tokensData.base.breakpoint['2xl']
2916
2916
  };
2917
2917
  // Media query helpers
2918
2918
  var media = {
@@ -2948,9 +2948,9 @@ var Grid = function Grid(_a) {
2948
2948
  children = _a.children;
2949
2949
  return /*#__PURE__*/React.createElement(GridContainer, {
2950
2950
  $cols: cols,
2951
- $gap: gap ? tokens.base.spacing[gap] : undefined,
2952
- $gapX: gapX ? tokens.base.spacing[gapX] : undefined,
2953
- $gapY: gapY ? tokens.base.spacing[gapY] : undefined,
2951
+ $gap: gap ? tokensData.base.spacing[gap] : undefined,
2952
+ $gapX: gapX ? tokensData.base.spacing[gapX] : undefined,
2953
+ $gapY: gapY ? tokensData.base.spacing[gapY] : undefined,
2954
2954
  className: className
2955
2955
  }, children);
2956
2956
  };
@@ -3084,25 +3084,28 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
3084
3084
  $colsMd: colsMd,
3085
3085
  $colsLg: colsLg,
3086
3086
  $colsXl: colsXl,
3087
- $gap: gap ? tokens.base.spacing[gap] : undefined,
3088
- $gapSm: gapSm ? tokens.base.spacing[gapSm] : undefined,
3089
- $gapMd: gapMd ? tokens.base.spacing[gapMd] : undefined,
3090
- $gapLg: gapLg ? tokens.base.spacing[gapLg] : undefined,
3091
- $gapXl: gapXl ? tokens.base.spacing[gapXl] : undefined,
3092
- $gapX: gapX ? tokens.base.spacing[gapX] : undefined,
3093
- $gapXSm: gapXSm ? tokens.base.spacing[gapXSm] : undefined,
3094
- $gapXMd: gapXMd ? tokens.base.spacing[gapXMd] : undefined,
3095
- $gapXLg: gapXLg ? tokens.base.spacing[gapXLg] : undefined,
3096
- $gapXXl: gapXXl ? tokens.base.spacing[gapXXl] : undefined,
3097
- $gapY: gapY ? tokens.base.spacing[gapY] : undefined,
3098
- $gapYSm: gapYSm ? tokens.base.spacing[gapYSm] : undefined,
3099
- $gapYMd: gapYMd ? tokens.base.spacing[gapYMd] : undefined,
3100
- $gapYLg: gapYLg ? tokens.base.spacing[gapYLg] : undefined,
3101
- $gapYXl: gapYXl ? tokens.base.spacing[gapYXl] : undefined,
3087
+ $gap: gap ? tokensData.base.spacing[gap] : undefined,
3088
+ $gapSm: gapSm ? tokensData.base.spacing[gapSm] : undefined,
3089
+ $gapMd: gapMd ? tokensData.base.spacing[gapMd] : undefined,
3090
+ $gapLg: gapLg ? tokensData.base.spacing[gapLg] : undefined,
3091
+ $gapXl: gapXl ? tokensData.base.spacing[gapXl] : undefined,
3092
+ $gapX: gapX ? tokensData.base.spacing[gapX] : undefined,
3093
+ $gapXSm: gapXSm ? tokensData.base.spacing[gapXSm] : undefined,
3094
+ $gapXMd: gapXMd ? tokensData.base.spacing[gapXMd] : undefined,
3095
+ $gapXLg: gapXLg ? tokensData.base.spacing[gapXLg] : undefined,
3096
+ $gapXXl: gapXXl ? tokensData.base.spacing[gapXXl] : undefined,
3097
+ $gapY: gapY ? tokensData.base.spacing[gapY] : undefined,
3098
+ $gapYSm: gapYSm ? tokensData.base.spacing[gapYSm] : undefined,
3099
+ $gapYMd: gapYMd ? tokensData.base.spacing[gapYMd] : undefined,
3100
+ $gapYLg: gapYLg ? tokensData.base.spacing[gapYLg] : undefined,
3101
+ $gapYXl: gapYXl ? tokensData.base.spacing[gapYXl] : undefined,
3102
3102
  className: className
3103
3103
  }, children);
3104
3104
  };
3105
3105
  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;
3106
3106
 
3107
+ // Main design system exports
3108
+ var tokens = tokensData;
3109
+
3107
3110
  export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, Typography, iconsData, tokens };
3108
3111
  //# sourceMappingURL=index.esm.js.map