carbon-react 100.1.1 → 101.0.3

package/lib/__internal__/field-help/field-help.style.js

@@ -19,9 +19,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const FieldHelpStyle = _styledComponents.default.span`
   display: block;
+  flex: 1;
   margin-top: 8px;
   white-space: pre-wrap;
-  width: 100%;
 
   ${({
   labelInline,

package/lib/__spec_helper__/index.js

@@ -10,6 +10,8 @@ var _mockResizeObserver = _interopRequireDefault(require("./mock-resize-observer
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+require("jest-fetch-mock").enableMocks();
+
 (0, _mockResizeObserver.default)();
 (0, _mockMatchMedia.setup)();
 

package/lib/components/carbon-provider/carbon-provider.component.js

@@ -13,6 +13,8 @@ var _styledComponents = require("styled-components");
 
 var _mint = _interopRequireDefault(require("../../style/themes/mint"));
 
+var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const CarbonProvider = ({
@@ -20,7 +22,7 @@ const CarbonProvider = ({
   theme = _mint.default
 }) => /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
   theme: theme
-}, children);
+}, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, children));
 
 CarbonProvider.propTypes = {
   children: _propTypes.default.node.isRequired,

package/lib/components/select/select-list/select-list.component.js

@@ -235,7 +235,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
 
     setListHeight(`${newHeight}px`);
-  }, [children]);
+  }, [children, listRef.current]);
   (0, _react.useEffect)(() => {
     const keyboardEvent = "keydown";
     const listElement = listRef.current;

package/lib/components/select/simple-select/simple-select-test.stories.js

@@ -74,29 +74,23 @@ const Default = args => {
     text: "Blue",
     value: "3"
   }), /*#__PURE__*/_react.default.createElement(_.Option, {
-    text: "Brown",
+    text: "White",
     value: "4"
   }), /*#__PURE__*/_react.default.createElement(_.Option, {
     text: "Green",
     value: "5"
   }), /*#__PURE__*/_react.default.createElement(_.Option, {
-    text: "Orange",
+    text: "Like a lot of intelligent animals, most crows are quite social.  For instance, American crows spend most of the year living in pairs or small family groups. During the winter months, they will congregate with hundreds or even thousands of their peers to sleep together at night",
     value: "6"
   }), /*#__PURE__*/_react.default.createElement(_.Option, {
     text: "Pink",
     value: "7"
-  }), /*#__PURE__*/_react.default.createElement(_.Option, {
-    text: "Purple",
-    value: "8"
   }), /*#__PURE__*/_react.default.createElement(_.Option, {
     text: "Red",
-    value: "9"
-  }), /*#__PURE__*/_react.default.createElement(_.Option, {
-    text: "White",
-    value: "10"
+    value: "8"
   }), /*#__PURE__*/_react.default.createElement(_.Option, {
     text: "Yellow",
-    value: "11"
+    value: "9"
   }));
 };
 

package/lib/style/design-tokens/{carbon-scoped-story-provider → carbon-scoped-tokens-provider}/carbon-scoped-tokens-provider.component.js

@@ -24,7 +24,7 @@ const CarbonScopedTokensProvider = _styledComponents.default.div`
   display: inline;
   ${({
   theme
-}) => (0, _generateCssVariables.default)(theme)}
+}) => (0, _generateCssVariables.default)(theme.compatibility)}
 `;
 var _default = CarbonScopedTokensProvider;
 exports.default = _default;

package/lib/style/design-tokens/debug-theme.util.js

@@ -38,14 +38,15 @@ const debugTheme = themeProperties => Object.fromEntries(Object.entries(themePro
   }
 
   if (typeof value === "object") {
-    return [key, debugTheme(value)];
+    return key === "compatibility" ? [key, value] : [key, debugTheme(value)];
   }
 
   return [key, ""];
 }));
 
 var _default = { ...debugTheme(_mint.default),
-  ..._common.default,
+  compatibility: { ..._common.default
+  },
   name: "sage-debug"
 };
 exports.default = _default;

package/lib/style/themes/aegean/aegean-theme.config.js

@@ -26,7 +26,15 @@ var _default = palette => {
     },
     stepSequence: {
       completedText: palette.productBlueShade(23)
+    },
+
+    get compatibility() {
+      return {
+        colorsActionMajor500: this.colors.primary,
+        colorsActionMajor600: this.colors.secondary
+      };
     }
+
   };
 };
 

package/lib/style/themes/base/base-theme.config.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
+
 var _atOpacity = _interopRequireDefault(require("../../utils/at-opacity"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -337,7 +339,49 @@ var _default = palette => {
       fullScreenModal: 5000,
       notification: 6000,
       aboveAll: 9999
+    },
+
+    get compatibility() {
+      return { ..._common.default,
+        colorsActionMajor500: this.colors.primary,
+        colorsActionMajor600: this.colors.secondary,
+        colorsActionDisabled500: this.disabled.background,
+        colorsSemanticFocus500: this.colors.focus,
+        colorsSemanticPositive500: this.colors.success,
+        colorsSemanticNegative500: this.colors.error,
+        colorsSemanticNegative600: this.colors.destructive.hover,
+        colorsSemanticCaution500: this.colors.warning,
+        colorsSemanticInfo500: this.colors.info,
+        spacing000: `${this.space[0]}px`,
+        // 0px
+        spacing025: "2px",
+        spacing050: "4px",
+        spacing075: "6px",
+        spacing100: `${this.space[1]}px`,
+        // 8px
+        spacing125: "10px",
+        spacing150: "12px",
+        spacing200: `${this.space[2]}px`,
+        // 16px
+        spacing250: "20px",
+        spacing300: `${this.space[3]}px`,
+        // 24px
+        spacing400: `${this.space[4]}px`,
+        // 32px
+        spacing500: `${this.space[5]}px`,
+        // 40px
+        spacing600: `${this.space[6]}px`,
+        // 48px
+        spacing700: `${this.space[7]}px`,
+        // 56px
+        spacing800: `${this.space[8]}px`,
+        // 64px
+        spacing900: `${this.space[9]}px`,
+        // 72px
+        fontSizes100: this.text.size
+      };
     }
+
   };
 };
 

package/lib/style/themes/base/index.js

@@ -17,8 +17,6 @@ var _palette = _interopRequireDefault(require("../../palette"));
 
 var _addHexSymbols = _interopRequireDefault(require("../../utils/add-hex-symbols"));
 
-var _themeCompatibility = _interopRequireDefault(require("../../design-tokens/theme-compatibility.util"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const colors = (0, _palette.default)(_colorConfig.default);
@@ -36,13 +34,9 @@ exports.default = _default;
 
 const mergeWithBase = configureTheme => {
   const themeToMergeWithBase = configureTheme(palette);
-  const mergedThemes = { ...(0, _mergeDeep.mergeDeep)(baseTheme, themeToMergeWithBase),
+  return { ...(0, _mergeDeep.mergeDeep)(baseTheme, themeToMergeWithBase),
     palette
   };
-  return { ...mergedThemes,
-    ...(0, _themeCompatibility.default)(mergedThemes),
-    name: mergedThemes.name
-  };
 };
 
 exports.mergeWithBase = mergeWithBase;

package/lib/style/themes/mint/mint-theme.config.js

@@ -20,7 +20,15 @@ var _default = palette => {
     },
     stepSequence: {
       completedText: palette.productGreenShade(23)
+    },
+
+    get compatibility() {
+      return {
+        colorsActionMajor500: this.colors.primary,
+        colorsActionMajor600: this.colors.secondary
+      };
     }
+
   };
 };
 

package/lib/style/themes/sage/index.js

@@ -12,7 +12,8 @@ var _index = _interopRequireDefault(require("../mint/index"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = { ..._index.default,
-  ..._common.default,
-  name: "sage"
+  compatibility: { ..._common.default
+  },
+  name: "sage (experimental)"
 };
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "100.1.1",
+  "version": "101.0.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -30,7 +30,8 @@
     "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/__definition__.js' --quiet",
     "clean-lib": "rimraf ./lib",
     "copy-files": "cpy \"**/\" \"!**/(*.js|*.md|*.mdx|*.stories.*|*.snap)\" ../lib/ --cwd=src --parents",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "generate-metadata": "node ./scripts/generate_metadata/index.mjs"
   },
   "repository": {
     "type": "git",
@@ -58,8 +59,9 @@
     "@babel/preset-typescript": "7.12.7",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@semantic-release/changelog": "^5.0.1",
-    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/exec": "^6.0.2",
+    "@semantic-release/git": "^10.0.1",
     "@storybook/addon-a11y": "^6.3.6",
     "@storybook/addon-actions": "^6.3.6",
     "@storybook/addon-controls": "^6.3.7",
@@ -120,6 +122,7 @@
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
+    "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^6.3.1",
     "lint-staged": "^10.5.3",
     "mockdate": "^2.0.2",
@@ -129,7 +132,7 @@
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "rimraf": "^3.0.2",
-    "semantic-release": "^17.4.7",
+    "semantic-release": "^18.0.1",
     "semver": "^7.3.5",
     "sprintf-js": "^1.1.2",
     "styled-components": "^4.4.1",
@@ -203,6 +206,12 @@
           "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
         }
       ],
+      [
+        "@semantic-release/exec",
+        {
+          "successCmd": "echo \"SEMVER_VERSION=${nextRelease.version}\" >> $GITHUB_ENV"
+        }
+      ],
       "@semantic-release/github"
     ]
   }

package/lib/style/design-tokens/carbon-global-tokens-provider/carbon-global-tokens-provider.component.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = require("styled-components");
-
-var _generateCssVariables = _interopRequireDefault(require("../generate-css-variables.util"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- *
- * Converts theme properties to css variables form and set them globally
- *
- */
-const CarbonGlobalTokensProvider = (0, _styledComponents.createGlobalStyle)`
-  :root {
-    ${props => (0, _generateCssVariables.default)(props.theme)}
-  }
-`;
-var _default = CarbonGlobalTokensProvider;
-exports.default = _default;

package/lib/style/design-tokens/carbon-global-tokens-provider/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _carbonGlobalTokensProvider.default;
-  }
-});
-
-var _carbonGlobalTokensProvider = _interopRequireDefault(require("./carbon-global-tokens-provider.component"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/design-tokens/theme-compatibility.util.js

@@ -1,709 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-/**
- *
- * Util that maps old theme properties to design tokens
- * or assigns hardcoded values if equivalent does not
- * exist in old theme.
- *
- * Its purpose is to provide new property values to
- * old themes so both of them can be compatible.
- *
- * I see no other way, than hardcode those keys and
- * assign them values. Hopefully this job will be
- * done only once in the beginning.
- *
- */
-var _default = theme => ({ ...theme,
-  metaName: "Base Theme",
-  metaPublic: "true",
-  colorsLogo: "#00D639",
-  colorsYin030: "rgba(0,0,0,0.3)",
-  colorsYin055: "rgba(0,0,0,0.55)",
-  colorsYin065: "rgba(0,0,0,0.65)",
-  colorsYin090: "rgba(0,0,0,0.9)",
-  colorsComponentsNavigation500: "#008146",
-  colorsComponentsNavigation600: "#006738",
-  colorsComponentsNavigation700: "#004D2A",
-  colorsComponentsNavigation1000: "#000000",
-  colorsComponentsNavigation000: "#FFFFFF",
-  colorsComponentsNavigationTransparent: "rgba(0,0,0,0)",
-  colorsUtilityMajor100: "#CCD6DB",
-  colorsUtilityMajor150: "#B3C2C9",
-  colorsUtilityMajor200: "#99ADB7",
-  colorsUtilityMajor300: "#668494",
-  colorsUtilityMajor400: "#335B70",
-  colorsUtilityMajor500: "#00324C",
-  colorsUtilityMajor800: "#00141E",
-  colorsUtilityMajor1000: "#000000",
-  colorsUtilityMajor000: "#FFFFFF",
-  colorsUtilityMajor025: "#F2F5F6",
-  colorsUtilityMajor050: "#E6EBED",
-  colorsUtilityMajor075: "#D9E0E4",
-  colorsUtilityMajorTransparent: "rgba(0,0,0,0)",
-  colorsUtilityDisabled400: "#F2F5F6",
-  colorsUtilityDisabled500: "#E6EBED",
-  colorsUtilityDisabled600: "#CCD6DB",
-  colorsUtilityReadOnly400: "#F2F5F6",
-  colorsUtilityReadOnly500: "#E6EBED",
-  colorsUtilityReadOnly600: "#CCD6DB",
-  colorsActionMajor150: "#B3D9C8",
-  colorsActionMajor500: theme.colors.primary,
-  colorsActionMajor600: theme.colors.secondary,
-  colorsActionMajor700: "#004D2A",
-  colorsActionMajor1000: "#000000",
-  colorsActionMajor000: "#FFFFFF",
-  colorsActionMajorTransparent: "rgba(0,0,0,0)",
-  colorsActionMinor100: "#E6EBED",
-  colorsActionMinor200: "#CCD6DB",
-  colorsActionMinor300: "#99ADB7",
-  colorsActionMinor400: "#668494",
-  colorsActionMinor500: "#335B70",
-  colorsActionMinor600: "#00324C",
-  colorsActionMinor1000: "#000000",
-  colorsActionMinor000: "#FFFFFF",
-  colorsActionMinor025: "#FAFBFB",
-  colorsActionMinor050: "#F2F5F6",
-  colorsActionMinorTransparent: "rgba(0,0,0,0)",
-  colorsActionDisabled400: "#F2F5F6",
-  colorsActionDisabled500: theme.colors.disabled.disabled,
-  colorsActionDisabled600: "#CCD6DB",
-  colorsActionReadOnly400: "#F2F5F6",
-  colorsActionReadOnly500: "#E6EBED",
-  colorsActionReadOnly600: "#CCD6DB",
-  colorsSemanticNeutral200: "#CCD6DB",
-  colorsSemanticNeutral500: "#335B70",
-  colorsSemanticNeutral600: "#00324C",
-  colorsSemanticNeutral1000: "#000000",
-  colorsSemanticNeutral000: "#FFFFFF",
-  colorsSemanticNeutralTransparent: "rgba(0,0,0,0)",
-  colorsSemanticFocus250: "#FFDA80",
-  colorsSemanticFocus500: theme.colors.focus,
-  colorsSemanticFocus1000: "#000000",
-  colorsSemanticFocus000: "#FFFFFF",
-  colorsSemanticFocusTransparent: "rgba(0,0,0,0)",
-  colorsSemanticPositive500: theme.colors.success,
-  colorsSemanticPositive600: "#006e1a",
-  colorsSemanticPositive1000: "#000000",
-  colorsSemanticPositive000: "#FFFFFF",
-  colorsSemanticPositiveTransparent: "rgba(0,0,0,0)",
-  colorsSemanticNegative500: theme.colors.error,
-  colorsSemanticNegative600: theme.colors.destructive.hover,
-  colorsSemanticNegative1000: "#000000",
-  colorsSemanticNegative000: "#FFFFFF",
-  colorsSemanticNegativeTransparent: "rgba(0,0,0,0)",
-  colorsSemanticCaution400: "#f28533",
-  colorsSemanticCaution500: theme.colors.warning,
-  colorsSemanticCaution600: "#bf5200",
-  colorsSemanticCaution1000: "#000000",
-  colorsSemanticCaution000: "#FFFFFF",
-  colorsSemanticCautionTransparent: "rgba(0,0,0,0)",
-  colorsSemanticInfo150: "#b3cfe5",
-  colorsSemanticInfo500: theme.colors.info,
-  colorsSemanticInfo600: "#004d86",
-  colorsSemanticInfo1000: "#000000",
-  colorsSemanticInfo000: "#FFFFFF",
-  colorsSemanticInfoTransparent: "rgba(0,0,0,0)",
-  sizing10: "1px",
-  sizing100: "8px",
-  sizing125: "10px",
-  sizing150: "12px",
-  sizing175: "14px",
-  sizing200: "16px",
-  sizing250: "20px",
-  sizing300: "24px",
-  sizing350: "28px",
-  sizing375: "30px",
-  sizing400: "32px",
-  sizing500: "40px",
-  sizing600: "48px",
-  sizing700: "56px",
-  sizing800: "64px",
-  sizing900: "72px",
-  sizing1000: "80px",
-  sizing025: "2px",
-  sizing050: "4px",
-  sizing075: "6px",
-  sizingLogowidth: "40px",
-  spacing000: `${theme.space[0]}px`,
-  // 0px
-  spacing025: "2px",
-  spacing050: "4px",
-  spacing075: "6px",
-  spacing100: `${theme.space[1]}px`,
-  // 8px
-  spacing125: "10px",
-  spacing150: "12px",
-  spacing200: `${theme.space[2]}px`,
-  // 16px
-  spacing250: "20px",
-  spacing300: `${theme.space[3]}px`,
-  // 24px
-  spacing400: `${theme.space[4]}px`,
-  // 32px
-  spacing500: `${theme.space[5]}px`,
-  // 40px
-  spacing600: `${theme.space[6]}px`,
-  // 48px
-  spacing700: `${theme.space[7]}px`,
-  // 56px
-  spacing800: `${theme.space[8]}px`,
-  // 64px
-  spacing900: `${theme.space[9]}px`,
-  // 72px
-  borderWidth100: "1px",
-  borderWidth200: "2px",
-  borderWidth300: "3px",
-  borderWidth400: "4px",
-  borderWidth000: "0px",
-  fontSizes100: theme.text.size,
-  fontSizes200: "16px",
-  fontSizes300: "18px",
-  fontSizes400: "20px",
-  fontSizes500: "22px",
-  fontSizes600: "24px",
-  fontSizes700: "32px",
-  fontSizes800: "48px",
-  fontSizes900: "56px",
-  fontSizes1000: "64px",
-  fontSizes010: "10px",
-  fontSizes025: "12px",
-  fontSizes050: "13px",
-  boxShadow100: {
-    x: "0",
-    y: "10px",
-    blur: "10px",
-    spread: "0",
-    color: "rgba(0,20,29,0.1)"
-  },
-  boxShadow200: {
-    x: "0",
-    y: "20px",
-    blur: "40px",
-    spread: "0",
-    color: "rgba(0,20,29,0.1)"
-  },
-  boxShadow300: {
-    x: "0",
-    y: "30px",
-    blur: "60px",
-    spread: "0",
-    color: "rgba(0,20,29,0.1)"
-  },
-  boxShadow400: {
-    x: "0",
-    y: "50px",
-    blur: "80px",
-    spread: "0",
-    color: "rgba(0,20,29,0.1)"
-  },
-  opacity100: "10%",
-  opacity200: "20%",
-  opacity300: "30%",
-  opacity400: "40%",
-  opacity500: "50%",
-  opacity550: "55%",
-  opacity600: "60%",
-  opacity650: "65%",
-  opacity700: "70%",
-  opacity800: "80%",
-  opacity900: "90%",
-  fontWeights400: "Regular Beta",
-  fontWeights500: "Medium Beta",
-  fontWeights600: "SemiBold Beta",
-  fontWeights700: "Bold Beta",
-  lineHeights400: "125%",
-  lineHeights500: "150%",
-  fontFamiliesDefault: "Sage UI",
-  fontFamiliesIos: "San Francisco",
-  fontFamiliesAndroid: "Roboto",
-  fontFamiliesOther: "Open Sans",
-  borderRadiusCircle: "50%",
-  typographyButtonLabelS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyButtonLabelM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyButtonLabelL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyDialogTitleXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "125%",
-    fontSize: "20px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyDialogTitleS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "125%",
-    fontSize: "20px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyDialogTitleMs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "125%",
-    fontSize: "20px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyDialogTitleM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "125%",
-    fontSize: "20px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyDialogTitleMl: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "125%",
-    fontSize: "20px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyDialogTitleL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "125%",
-    fontSize: "20px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyDialogTitleXl: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "125%",
-    fontSize: "20px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFlashTextM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFlashTextL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldLabelXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldLabelS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldLabelM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldLabelL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldHintTextXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldHintTextS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldHintTextM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldHintTextL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldErrorMessageXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldErrorMessageS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldErrorMessageM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldErrorMessageL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldCautionMessageXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldCautionMessageS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldCautionMessageM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldCautionMessageL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldInputTextXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldInputTextS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldInputTextM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldInputTextL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldDropdownOptionsXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldDropdownOptionsS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldDropdownOptionsM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldDropdownOptionsL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldSecondLabelXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldSecondLabelS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldSecondLabelM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldSecondLabelL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldCharacterCountXs: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldCharacterCountS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldCharacterCountM: {
-    fontFamily: "Sage UI",
-    lineHeight: "150%",
-    fontWeight: "Regular Beta",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyFormFieldCharacterCountL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyLinkTextM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyLinkTextL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyMessageHeadingM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyMessageHeadingL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Bold Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyMessageTextM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyMessageTextL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyPillLabelS: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "10px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyPillLabelM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "12px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyPillLabelL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyPillLabelXl: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographySwitchOptionLabelM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "12px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographySwitchOptionLabelL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyTableHeaderTextM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Medium Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyTableCellTextM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyTooltipTextM: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "14px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  },
-  typographyTooltipTextL: {
-    fontFamily: "Sage UI",
-    fontWeight: "Regular Beta",
-    lineHeight: "150%",
-    fontSize: "16px",
-    letterSpacing: "0%",
-    paragraphSpacing: "0px"
-  }
-});
-
-exports.default = _default;