@czi-sds/components 22.1.0 → 22.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs.d.ts +2 -0
  2. package/dist/index.cjs.js +16 -9
  3. package/dist/index.esm.d.ts +2 -0
  4. package/dist/index.esm.js +16 -9
  5. package/dist/tailwind.json +58 -58
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +124 -124
  8. package/dist/variables.scss +62 -62
  9. package/package.json +2 -2
package/dist/index.cjs.d.ts CHANGED
@@ -967,6 +967,7 @@ interface CellHeaderExtraProps extends CommonThemeProps {
967
967
  active?: boolean;
968
968
  hideSortIcon?: boolean;
969
969
  horizontalAlign?: "left" | "center" | "right";
970
+ hover?: boolean;
970
971
  }
971
972
  type CellHeaderDirection = "asc" | "desc";
972
973
  interface CellHeaderContentProps {
@@ -975,6 +976,7 @@ interface CellHeaderContentProps {
975
976
  hideSortIcon?: boolean;
976
977
  horizontalAlign?: "left" | "center" | "right";
977
978
  children: React.ReactNode;
979
+ hover?: boolean;
978
980
  }
979
981
  interface CellHeaderRawProps extends Omit<React.HTMLProps<HTMLTableCellElement>, "as"> {
980
982
  tooltipText?: string;
package/dist/index.cjs.js CHANGED
@@ -6090,6 +6090,7 @@ var doNotForwardProps$i = [
6090
6090
  "tooltipProps",
6091
6091
  "tooltipText",
6092
6092
  "hideSortIcon",
6093
+ "hover",
6093
6094
  ];
6094
6095
  var StyledSortingIcon = styled__default.default(Icon, {
6095
6096
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
@@ -6103,11 +6104,17 @@ var StyledSortingIcon = styled__default.default(Icon, {
6103
6104
  var StyledTableHeader$1 = styled__default.default("th", {
6104
6105
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
6105
6106
  })(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
6106
- var _a, _b, _c, _d, _e, _f, _g, _h;
6107
- var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
6107
+ var _a, _b, _c, _d, _e, _f;
6108
+ var _g = props.active, active = _g === void 0 ? false : _g, _h = props.horizontalAlign, horizontalAlign = _h === void 0 ? "left" : _h, _j = props.hover, hover = _j === void 0 ? true : _j;
6108
6109
  var spaces = getSpaces(props);
6109
6110
  var semanticColors = getSemanticColors(props);
6110
- return "\n color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: pointer;\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, ";\n }\n }\n ");
6111
+ var defaultColor = active
6112
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
6113
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
6114
+ var hoverColor = active
6115
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover
6116
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary;
6117
+ return "\n color: ".concat(defaultColor, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: ").concat(hover ? "pointer" : "default", ";\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(hover ? hoverColor : defaultColor, ";\n\n & .MuiButtonBase-root {\n color: ").concat(hoverColor, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n ");
6111
6118
  });
6112
6119
  var StyledCellHeaderContainer = styled__default.default("div", {
6113
6120
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
@@ -6118,19 +6125,19 @@ var StyledCellHeaderContainer = styled__default.default("div", {
6118
6125
  var templateObject_1$E, templateObject_2$o, templateObject_3$f;
6119
6126
 
6120
6127
  var CellHeaderContent = function (props) {
6121
- var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign;
6128
+ var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign, hover = props.hover;
6122
6129
  var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
6123
6130
  var sortIcon = (jsxRuntime.jsx(StyledSortingIcon, { "aria-label": direction === "asc"
6124
6131
  ? "Change sort direction from ascending to descending"
6125
6132
  : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
6126
- return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
6133
+ return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx("span", { children: children }), (!hideSortIcon || active) && hover && sortIcon] }));
6127
6134
  };
6128
6135
  var CellHeader = React.forwardRef(function (props, ref) {
6129
- var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle"]);
6130
- if (shouldShowTooltipOnHover) {
6131
- return (jsxRuntime.jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({}, props, { children: children })) })) })));
6136
+ var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, _c = props.hover, hover = _c === void 0 ? false : _c, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle", "hover"]);
6137
+ if (shouldShowTooltipOnHover && hover) {
6138
+ return (jsxRuntime.jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({}, props, { hover: hover, children: children })) })) })));
6132
6139
  }
6133
- return (jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({}, props, { children: children })) })));
6140
+ return (jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({ hover: hover }, props, { children: children })) })));
6134
6141
  });
6135
6142
 
6136
6143
  var small = function (props) {
package/dist/index.esm.d.ts CHANGED
@@ -967,6 +967,7 @@ interface CellHeaderExtraProps extends CommonThemeProps {
967
967
  active?: boolean;
968
968
  hideSortIcon?: boolean;
969
969
  horizontalAlign?: "left" | "center" | "right";
970
+ hover?: boolean;
970
971
  }
971
972
  type CellHeaderDirection = "asc" | "desc";
972
973
  interface CellHeaderContentProps {
@@ -975,6 +976,7 @@ interface CellHeaderContentProps {
975
976
  hideSortIcon?: boolean;
976
977
  horizontalAlign?: "left" | "center" | "right";
977
978
  children: React.ReactNode;
979
+ hover?: boolean;
978
980
  }
979
981
  interface CellHeaderRawProps extends Omit<React.HTMLProps<HTMLTableCellElement>, "as"> {
980
982
  tooltipText?: string;
package/dist/index.esm.js CHANGED
@@ -6066,6 +6066,7 @@ var doNotForwardProps$i = [
6066
6066
  "tooltipProps",
6067
6067
  "tooltipText",
6068
6068
  "hideSortIcon",
6069
+ "hover",
6069
6070
  ];
6070
6071
  var StyledSortingIcon = styled(Icon, {
6071
6072
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
@@ -6079,11 +6080,17 @@ var StyledSortingIcon = styled(Icon, {
6079
6080
  var StyledTableHeader$1 = styled("th", {
6080
6081
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
6081
6082
  })(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
6082
- var _a, _b, _c, _d, _e, _f, _g, _h;
6083
- var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
6083
+ var _a, _b, _c, _d, _e, _f;
6084
+ var _g = props.active, active = _g === void 0 ? false : _g, _h = props.horizontalAlign, horizontalAlign = _h === void 0 ? "left" : _h, _j = props.hover, hover = _j === void 0 ? true : _j;
6084
6085
  var spaces = getSpaces(props);
6085
6086
  var semanticColors = getSemanticColors(props);
6086
- return "\n color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: pointer;\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, ";\n }\n }\n ");
6087
+ var defaultColor = active
6088
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
6089
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
6090
+ var hoverColor = active
6091
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover
6092
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary;
6093
+ return "\n color: ".concat(defaultColor, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: ").concat(hover ? "pointer" : "default", ";\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(hover ? hoverColor : defaultColor, ";\n\n & .MuiButtonBase-root {\n color: ").concat(hoverColor, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n ");
6087
6094
  });
6088
6095
  var StyledCellHeaderContainer = styled("div", {
6089
6096
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
@@ -6094,19 +6101,19 @@ var StyledCellHeaderContainer = styled("div", {
6094
6101
  var templateObject_1$E, templateObject_2$o, templateObject_3$f;
6095
6102
 
6096
6103
  var CellHeaderContent = function (props) {
6097
- var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign;
6104
+ var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign, hover = props.hover;
6098
6105
  var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
6099
6106
  var sortIcon = (jsx(StyledSortingIcon, { "aria-label": direction === "asc"
6100
6107
  ? "Change sort direction from ascending to descending"
6101
6108
  : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
6102
- return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
6109
+ return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx("span", { children: children }), (!hideSortIcon || active) && hover && sortIcon] }));
6103
6110
  };
6104
6111
  var CellHeader = forwardRef(function (props, ref) {
6105
- var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle"]);
6106
- if (shouldShowTooltipOnHover) {
6107
- return (jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsx(StyledTableHeader$1, __assign({ ref: ref }, rest, { children: jsx(CellHeaderContent, __assign({}, props, { children: children })) })) })));
6112
+ var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, _c = props.hover, hover = _c === void 0 ? false : _c, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle", "hover"]);
6113
+ if (shouldShowTooltipOnHover && hover) {
6114
+ return (jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsx(CellHeaderContent, __assign({}, props, { hover: hover, children: children })) })) })));
6108
6115
  }
6109
- return (jsx(StyledTableHeader$1, __assign({ ref: ref }, rest, { children: jsx(CellHeaderContent, __assign({}, props, { children: children })) })));
6116
+ return (jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsx(CellHeaderContent, __assign({ hover: hover }, props, { children: children })) })));
6110
6117
  });
6111
6118
 
6112
6119
  var small = function (props) {
package/dist/tailwind.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "fontFamily": {
3
- "sds-body": "\"Inter\", sans-serif",
4
- "sds-caps": "\"Inter\", sans-serif",
3
+ "sds-body": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif",
4
+ "sds-caps": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif",
5
5
  "sds-code": "\"IBM Plex Mono\", monospace",
6
- "sds-header": "\"Inter\", sans-serif",
7
- "sds-tabular": "\"Inter\", sans-serif"
6
+ "sds-header": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif",
7
+ "sds-tabular": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif"
8
8
  },
9
9
  "fontSize": {
10
10
  "sds-body-xxxs-400-narrow": "12px",
@@ -329,7 +329,7 @@
329
329
  "typography": {
330
330
  "sds-body-xxxs-400-narrow": {
331
331
  "css": {
332
- "fontFamily": "Inter, sans-serif",
332
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
333
333
  "fontSize": "12px",
334
334
  "fontStyle": "normal",
335
335
  "fontVariantNumeric": "normal",
@@ -341,7 +341,7 @@
341
341
  },
342
342
  "sds-body-xxxs-400-wide": {
343
343
  "css": {
344
- "fontFamily": "Inter, sans-serif",
344
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
345
345
  "fontSize": "11px",
346
346
  "fontStyle": "normal",
347
347
  "fontVariantNumeric": "normal",
@@ -353,7 +353,7 @@
353
353
  },
354
354
  "sds-body-xxxs-600-narrow": {
355
355
  "css": {
356
- "fontFamily": "Inter, sans-serif",
356
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
357
357
  "fontSize": "12px",
358
358
  "fontStyle": "normal",
359
359
  "fontVariantNumeric": "normal",
@@ -365,7 +365,7 @@
365
365
  },
366
366
  "sds-body-xxxs-600-wide": {
367
367
  "css": {
368
- "fontFamily": "Inter, sans-serif",
368
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
369
369
  "fontSize": "11px",
370
370
  "fontStyle": "normal",
371
371
  "fontVariantNumeric": "normal",
@@ -377,7 +377,7 @@
377
377
  },
378
378
  "sds-body-xxs-400-narrow": {
379
379
  "css": {
380
- "fontFamily": "Inter, sans-serif",
380
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
381
381
  "fontSize": "12px",
382
382
  "fontStyle": "normal",
383
383
  "fontVariantNumeric": "normal",
@@ -389,7 +389,7 @@
389
389
  },
390
390
  "sds-body-xxs-400-wide": {
391
391
  "css": {
392
- "fontFamily": "Inter, sans-serif",
392
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
393
393
  "fontSize": "12px",
394
394
  "fontStyle": "normal",
395
395
  "fontVariantNumeric": "normal",
@@ -401,7 +401,7 @@
401
401
  },
402
402
  "sds-body-xxs-600-narrow": {
403
403
  "css": {
404
- "fontFamily": "Inter, sans-serif",
404
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
405
405
  "fontSize": "12px",
406
406
  "fontStyle": "normal",
407
407
  "fontVariantNumeric": "normal",
@@ -413,7 +413,7 @@
413
413
  },
414
414
  "sds-body-xxs-600-wide": {
415
415
  "css": {
416
- "fontFamily": "Inter, sans-serif",
416
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
417
417
  "fontSize": "12px",
418
418
  "fontStyle": "normal",
419
419
  "fontVariantNumeric": "normal",
@@ -425,7 +425,7 @@
425
425
  },
426
426
  "sds-body-xs-400-narrow": {
427
427
  "css": {
428
- "fontFamily": "Inter, sans-serif",
428
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
429
429
  "fontSize": "13px",
430
430
  "fontStyle": "normal",
431
431
  "fontVariantNumeric": "normal",
@@ -437,7 +437,7 @@
437
437
  },
438
438
  "sds-body-xs-400-wide": {
439
439
  "css": {
440
- "fontFamily": "Inter, sans-serif",
440
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
441
441
  "fontSize": "13px",
442
442
  "fontStyle": "normal",
443
443
  "fontVariantNumeric": "normal",
@@ -449,7 +449,7 @@
449
449
  },
450
450
  "sds-body-xs-600-narrow": {
451
451
  "css": {
452
- "fontFamily": "Inter, sans-serif",
452
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
453
453
  "fontSize": "13px",
454
454
  "fontStyle": "normal",
455
455
  "fontVariantNumeric": "normal",
@@ -461,7 +461,7 @@
461
461
  },
462
462
  "sds-body-xs-600-wide": {
463
463
  "css": {
464
- "fontFamily": "Inter, sans-serif",
464
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
465
465
  "fontSize": "13px",
466
466
  "fontStyle": "normal",
467
467
  "fontVariantNumeric": "normal",
@@ -473,7 +473,7 @@
473
473
  },
474
474
  "sds-body-s-400-narrow": {
475
475
  "css": {
476
- "fontFamily": "Inter, sans-serif",
476
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
477
477
  "fontSize": "14px",
478
478
  "fontStyle": "normal",
479
479
  "fontVariantNumeric": "normal",
@@ -485,7 +485,7 @@
485
485
  },
486
486
  "sds-body-s-400-wide": {
487
487
  "css": {
488
- "fontFamily": "Inter, sans-serif",
488
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
489
489
  "fontSize": "14px",
490
490
  "fontStyle": "normal",
491
491
  "fontVariantNumeric": "normal",
@@ -497,7 +497,7 @@
497
497
  },
498
498
  "sds-body-s-600-narrow": {
499
499
  "css": {
500
- "fontFamily": "Inter, sans-serif",
500
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
501
501
  "fontSize": "14px",
502
502
  "fontStyle": "normal",
503
503
  "fontVariantNumeric": "normal",
@@ -509,7 +509,7 @@
509
509
  },
510
510
  "sds-body-s-600-wide": {
511
511
  "css": {
512
- "fontFamily": "Inter, sans-serif",
512
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
513
513
  "fontSize": "14px",
514
514
  "fontStyle": "normal",
515
515
  "fontVariantNumeric": "normal",
@@ -521,7 +521,7 @@
521
521
  },
522
522
  "sds-body-m-400-narrow": {
523
523
  "css": {
524
- "fontFamily": "Inter, sans-serif",
524
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
525
525
  "fontSize": "14px",
526
526
  "fontStyle": "normal",
527
527
  "fontVariantNumeric": "normal",
@@ -533,7 +533,7 @@
533
533
  },
534
534
  "sds-body-m-400-wide": {
535
535
  "css": {
536
- "fontFamily": "Inter, sans-serif",
536
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
537
537
  "fontSize": "16px",
538
538
  "fontStyle": "normal",
539
539
  "fontVariantNumeric": "normal",
@@ -545,7 +545,7 @@
545
545
  },
546
546
  "sds-body-m-600-narrow": {
547
547
  "css": {
548
- "fontFamily": "Inter, sans-serif",
548
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
549
549
  "fontSize": "14px",
550
550
  "fontStyle": "normal",
551
551
  "fontVariantNumeric": "normal",
@@ -557,7 +557,7 @@
557
557
  },
558
558
  "sds-body-m-600-wide": {
559
559
  "css": {
560
- "fontFamily": "Inter, sans-serif",
560
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
561
561
  "fontSize": "16px",
562
562
  "fontStyle": "normal",
563
563
  "fontVariantNumeric": "normal",
@@ -569,7 +569,7 @@
569
569
  },
570
570
  "sds-body-l-400-narrow": {
571
571
  "css": {
572
- "fontFamily": "Inter, sans-serif",
572
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
573
573
  "fontSize": "16px",
574
574
  "fontStyle": "normal",
575
575
  "fontVariantNumeric": "normal",
@@ -581,7 +581,7 @@
581
581
  },
582
582
  "sds-body-l-400-wide": {
583
583
  "css": {
584
- "fontFamily": "Inter, sans-serif",
584
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
585
585
  "fontSize": "18px",
586
586
  "fontStyle": "normal",
587
587
  "fontVariantNumeric": "normal",
@@ -593,7 +593,7 @@
593
593
  },
594
594
  "sds-body-l-600-narrow": {
595
595
  "css": {
596
- "fontFamily": "Inter, sans-serif",
596
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
597
597
  "fontSize": "16px",
598
598
  "fontStyle": "normal",
599
599
  "fontVariantNumeric": "normal",
@@ -605,7 +605,7 @@
605
605
  },
606
606
  "sds-body-l-600-wide": {
607
607
  "css": {
608
- "fontFamily": "Inter, sans-serif",
608
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
609
609
  "fontSize": "18px",
610
610
  "fontStyle": "normal",
611
611
  "fontVariantNumeric": "normal",
@@ -617,7 +617,7 @@
617
617
  },
618
618
  "sds-caps-xxxxs-600-narrow": {
619
619
  "css": {
620
- "fontFamily": "Inter, sans-serif",
620
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
621
621
  "fontSize": "11px",
622
622
  "fontStyle": "normal",
623
623
  "fontVariantNumeric": "normal",
@@ -629,7 +629,7 @@
629
629
  },
630
630
  "sds-caps-xxxxs-600-wide": {
631
631
  "css": {
632
- "fontFamily": "Inter, sans-serif",
632
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
633
633
  "fontSize": "10px",
634
634
  "fontStyle": "normal",
635
635
  "fontVariantNumeric": "normal",
@@ -641,7 +641,7 @@
641
641
  },
642
642
  "sds-caps-xxxs-600-narrow": {
643
643
  "css": {
644
- "fontFamily": "Inter, sans-serif",
644
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
645
645
  "fontSize": "11px",
646
646
  "fontStyle": "normal",
647
647
  "fontVariantNumeric": "normal",
@@ -653,7 +653,7 @@
653
653
  },
654
654
  "sds-caps-xxxs-600-wide": {
655
655
  "css": {
656
- "fontFamily": "Inter, sans-serif",
656
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
657
657
  "fontSize": "11px",
658
658
  "fontStyle": "normal",
659
659
  "fontVariantNumeric": "normal",
@@ -665,7 +665,7 @@
665
665
  },
666
666
  "sds-caps-xxs-600-narrow": {
667
667
  "css": {
668
- "fontFamily": "Inter, sans-serif",
668
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
669
669
  "fontSize": "12px",
670
670
  "fontStyle": "normal",
671
671
  "fontVariantNumeric": "normal",
@@ -677,7 +677,7 @@
677
677
  },
678
678
  "sds-caps-xxs-600-wide": {
679
679
  "css": {
680
- "fontFamily": "Inter, sans-serif",
680
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
681
681
  "fontSize": "12px",
682
682
  "fontStyle": "normal",
683
683
  "fontVariantNumeric": "normal",
@@ -689,7 +689,7 @@
689
689
  },
690
690
  "sds-header-xxxs-600-narrow": {
691
691
  "css": {
692
- "fontFamily": "Inter, sans-serif",
692
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
693
693
  "fontSize": "12px",
694
694
  "fontStyle": "normal",
695
695
  "fontVariantNumeric": "normal",
@@ -701,7 +701,7 @@
701
701
  },
702
702
  "sds-header-xxxs-600-wide": {
703
703
  "css": {
704
- "fontFamily": "Inter, sans-serif",
704
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
705
705
  "fontSize": "11px",
706
706
  "fontStyle": "normal",
707
707
  "fontVariantNumeric": "normal",
@@ -713,7 +713,7 @@
713
713
  },
714
714
  "sds-header-xxs-600-narrow": {
715
715
  "css": {
716
- "fontFamily": "Inter, sans-serif",
716
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
717
717
  "fontSize": "12px",
718
718
  "fontStyle": "normal",
719
719
  "fontVariantNumeric": "normal",
@@ -725,7 +725,7 @@
725
725
  },
726
726
  "sds-header-xxs-600-wide": {
727
727
  "css": {
728
- "fontFamily": "Inter, sans-serif",
728
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
729
729
  "fontSize": "12px",
730
730
  "fontStyle": "normal",
731
731
  "fontVariantNumeric": "normal",
@@ -737,7 +737,7 @@
737
737
  },
738
738
  "sds-header-xs-600-narrow": {
739
739
  "css": {
740
- "fontFamily": "Inter, sans-serif",
740
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
741
741
  "fontSize": "13px",
742
742
  "fontStyle": "normal",
743
743
  "fontVariantNumeric": "normal",
@@ -749,7 +749,7 @@
749
749
  },
750
750
  "sds-header-xs-600-wide": {
751
751
  "css": {
752
- "fontFamily": "Inter, sans-serif",
752
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
753
753
  "fontSize": "13px",
754
754
  "fontStyle": "normal",
755
755
  "fontVariantNumeric": "normal",
@@ -761,7 +761,7 @@
761
761
  },
762
762
  "sds-header-s-600-narrow": {
763
763
  "css": {
764
- "fontFamily": "Inter, sans-serif",
764
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
765
765
  "fontSize": "14px",
766
766
  "fontStyle": "normal",
767
767
  "fontVariantNumeric": "normal",
@@ -773,7 +773,7 @@
773
773
  },
774
774
  "sds-header-s-600-wide": {
775
775
  "css": {
776
- "fontFamily": "Inter, sans-serif",
776
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
777
777
  "fontSize": "14px",
778
778
  "fontStyle": "normal",
779
779
  "fontVariantNumeric": "normal",
@@ -785,7 +785,7 @@
785
785
  },
786
786
  "sds-header-m-600-narrow": {
787
787
  "css": {
788
- "fontFamily": "Inter, sans-serif",
788
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
789
789
  "fontSize": "14px",
790
790
  "fontStyle": "normal",
791
791
  "fontVariantNumeric": "normal",
@@ -797,7 +797,7 @@
797
797
  },
798
798
  "sds-header-m-600-wide": {
799
799
  "css": {
800
- "fontFamily": "Inter, sans-serif",
800
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
801
801
  "fontSize": "16px",
802
802
  "fontStyle": "normal",
803
803
  "fontVariantNumeric": "normal",
@@ -809,7 +809,7 @@
809
809
  },
810
810
  "sds-header-l-600-narrow": {
811
811
  "css": {
812
- "fontFamily": "Inter, sans-serif",
812
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
813
813
  "fontSize": "16px",
814
814
  "fontStyle": "normal",
815
815
  "fontVariantNumeric": "normal",
@@ -821,7 +821,7 @@
821
821
  },
822
822
  "sds-header-l-600-wide": {
823
823
  "css": {
824
- "fontFamily": "Inter, sans-serif",
824
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
825
825
  "fontSize": "18px",
826
826
  "fontStyle": "normal",
827
827
  "fontVariantNumeric": "normal",
@@ -833,7 +833,7 @@
833
833
  },
834
834
  "sds-header-xl-600-narrow": {
835
835
  "css": {
836
- "fontFamily": "Inter, sans-serif",
836
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
837
837
  "fontSize": "18px",
838
838
  "fontStyle": "normal",
839
839
  "fontVariantNumeric": "normal",
@@ -845,7 +845,7 @@
845
845
  },
846
846
  "sds-header-xl-600-wide": {
847
847
  "css": {
848
- "fontFamily": "Inter, sans-serif",
848
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
849
849
  "fontSize": "22px",
850
850
  "fontStyle": "normal",
851
851
  "fontVariantNumeric": "normal",
@@ -857,7 +857,7 @@
857
857
  },
858
858
  "sds-header-xxl-600-narrow": {
859
859
  "css": {
860
- "fontFamily": "Inter, sans-serif",
860
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
861
861
  "fontSize": "22px",
862
862
  "fontStyle": "normal",
863
863
  "fontVariantNumeric": "normal",
@@ -869,7 +869,7 @@
869
869
  },
870
870
  "sds-header-xxl-600-wide": {
871
871
  "css": {
872
- "fontFamily": "Inter, sans-serif",
872
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
873
873
  "fontSize": "26px",
874
874
  "fontStyle": "normal",
875
875
  "fontVariantNumeric": "normal",
@@ -881,7 +881,7 @@
881
881
  },
882
882
  "sds-tabular-xs-400-narrow": {
883
883
  "css": {
884
- "fontFamily": "Inter, sans-serif",
884
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
885
885
  "fontSize": "13px",
886
886
  "fontStyle": "normal",
887
887
  "fontVariantNumeric": "tabular-nums",
@@ -893,7 +893,7 @@
893
893
  },
894
894
  "sds-tabular-xs-400-wide": {
895
895
  "css": {
896
- "fontFamily": "Inter, sans-serif",
896
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
897
897
  "fontSize": "13px",
898
898
  "fontStyle": "normal",
899
899
  "fontVariantNumeric": "tabular-nums",
@@ -905,7 +905,7 @@
905
905
  },
906
906
  "sds-tabular-xs-600-narrow": {
907
907
  "css": {
908
- "fontFamily": "Inter, sans-serif",
908
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
909
909
  "fontSize": "13px",
910
910
  "fontStyle": "normal",
911
911
  "fontVariantNumeric": "tabular-nums",
@@ -917,7 +917,7 @@
917
917
  },
918
918
  "sds-tabular-xs-600-wide": {
919
919
  "css": {
920
- "fontFamily": "Inter, sans-serif",
920
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
921
921
  "fontSize": "13px",
922
922
  "fontStyle": "normal",
923
923
  "fontVariantNumeric": "tabular-nums",
@@ -929,7 +929,7 @@
929
929
  },
930
930
  "sds-tabular-s-400-narrow": {
931
931
  "css": {
932
- "fontFamily": "Inter, sans-serif",
932
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
933
933
  "fontSize": "14px",
934
934
  "fontStyle": "normal",
935
935
  "fontVariantNumeric": "tabular-nums",
@@ -941,7 +941,7 @@
941
941
  },
942
942
  "sds-tabular-s-400-wide": {
943
943
  "css": {
944
- "fontFamily": "Inter, sans-serif",
944
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
945
945
  "fontSize": "14px",
946
946
  "fontStyle": "normal",
947
947
  "fontVariantNumeric": "tabular-nums",
@@ -953,7 +953,7 @@
953
953
  },
954
954
  "sds-tabular-s-600-narrow": {
955
955
  "css": {
956
- "fontFamily": "Inter, sans-serif",
956
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
957
957
  "fontSize": "14px",
958
958
  "fontStyle": "normal",
959
959
  "fontVariantNumeric": "tabular-nums",
@@ -965,7 +965,7 @@
965
965
  },
966
966
  "sds-tabular-s-600-wide": {
967
967
  "css": {
968
- "fontFamily": "Inter, sans-serif",
968
+ "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif",
969
969
  "fontSize": "14px",
970
970
  "fontStyle": "normal",
971
971
  "fontVariantNumeric": "tabular-nums",