carbon-react 100.0.0 → 101.0.1

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -31,8 +31,10 @@ const FocusTrap = ({
   const [focusableElements, setFocusableElements] = (0, _react.useState)();
   const [firstElement, setFirstElement] = (0, _react.useState)();
   const [lastElement, setLastElement] = (0, _react.useState)();
+  const [currentFocusedElement, setCurrentFocusedElement] = (0, _react.useState)();
   const {
-    isAnimationComplete
+    isAnimationComplete,
+    triggerRefocusFlag
   } = (0, _react.useContext)(_modal.ModalContext);
   const hasNewInputs = (0, _react.useCallback)(candidate => {
     if (!focusableElements || candidate.length !== focusableElements.length) {
@@ -114,6 +116,33 @@ const FocusTrap = ({
       document.removeEventListener("keydown", trapFn);
     };
   }, [firstElement, lastElement, focusableElements, bespokeTrap]);
+  const updateCurrentFocusedElement = (0, _react.useCallback)(() => {
+    const element = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.find(el => el === document.activeElement);
+
+    if (element) {
+      setCurrentFocusedElement(element);
+    }
+  }, [focusableElements]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener("focusin", updateCurrentFocusedElement);
+    return () => {
+      document.removeEventListener("focusin", updateCurrentFocusedElement);
+    };
+  }, [updateCurrentFocusedElement]);
+  const refocusTrap = (0, _react.useCallback)(() => {
+    /* istanbul ignore else */
+    if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
+      // the trap breaks if it tries to refocus a disabled element
+      (0, _focusTrapUtils.setElementFocus)(currentFocusedElement);
+    } else if (firstElement) {
+      (0, _focusTrapUtils.setElementFocus)(firstElement);
+    }
+  }, [currentFocusedElement, firstElement]);
+  (0, _react.useEffect)(() => {
+    if (triggerRefocusFlag) {
+      refocusTrap();
+    }
+  }, [triggerRefocusFlag, refocusTrap]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: trapRef
   }, children);

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/modal/__internal__/modal-manager.js

@@ -17,6 +17,8 @@ function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _
 
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
@@ -25,39 +27,73 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 
 var _modalList = /*#__PURE__*/new WeakMap();
 
+var _getTopModal = /*#__PURE__*/new WeakSet();
+
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);
 
+    _getTopModal.add(this);
+
     _modalList.set(this, {
       writable: true,
       value: []
     });
 
-    _defineProperty(this, "addModal", modal => {
-      _classPrivateFieldGet(this, _modalList).push(modal);
+    _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
+      const {
+        modal: topModal,
+        setTriggerRefocusFlag: setTrapFlag
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (topModal && setTrapFlag) {
+        setTrapFlag(false);
+      }
+
+      _classPrivateFieldGet(this, _modalList).push({
+        modal,
+        setTriggerRefocusFlag
+      });
     });
   }
 
   _createClass(ModalManagerInstance, [{
     key: "isTopmost",
     value: function isTopmost(modal) {
-      if (!modal || !_classPrivateFieldGet(this, _modalList).length) {
+      const {
+        modal: topModal
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (!modal || !topModal) {
         return false;
       }
 
-      return _classPrivateFieldGet(this, _modalList).indexOf(modal) === _classPrivateFieldGet(this, _modalList).length - 1;
+      return modal === topModal;
     }
   }, {
     key: "removeModal",
     value: function removeModal(modal) {
-      const modalIndex = _classPrivateFieldGet(this, _modalList).indexOf(modal);
+      const modalIndex = _classPrivateFieldGet(this, _modalList).findIndex(({
+        modal: m
+      }) => m === modal);
 
       if (modalIndex === -1) {
         return;
       }
 
       _classPrivateFieldGet(this, _modalList).splice(modalIndex, 1);
+
+      if (!_classPrivateFieldGet(this, _modalList).length) {
+        return;
+      }
+
+      const {
+        setTriggerRefocusFlag
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (setTriggerRefocusFlag) {
+        setTriggerRefocusFlag(true);
+      }
     }
   }, {
     key: "clearList",
@@ -69,6 +105,14 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   return ModalManagerInstance;
 }();
 
+function _getTopModal2() {
+  if (!_classPrivateFieldGet(this, _modalList).length) {
+    return {};
+  }
+
+  return _classPrivateFieldGet(this, _modalList)[_classPrivateFieldGet(this, _modalList).length - 1];
+}
+
 const ModalManager = new ModalManagerInstance();
 var _default = ModalManager;
 exports.default = _default;

package/lib/components/modal/modal.component.js

@@ -46,6 +46,7 @@ const Modal = ({
   const modalRegistered = (0, _react.useRef)(false);
   const originalOverflow = (0, _react.useRef)(undefined);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
+  const [triggerRefocusFlag, setTriggerRefocusFlag] = (0, _react.useState)(false);
   const setOverflow = (0, _react.useCallback)(() => {
     if (typeof originalOverflow.current === "undefined" && !enableBackgroundUI) {
       originalOverflow.current = document.documentElement.style.overflow;
@@ -110,7 +111,7 @@ const Modal = ({
   const registerModal = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (!modalRegistered.current) {
-      _modalManager.default.addModal(ref.current);
+      _modalManager.default.addModal(ref.current, setTriggerRefocusFlag);
 
       modalRegistered.current = true;
     }
@@ -164,7 +165,8 @@ const Modal = ({
     timeout: timeout
   }, /*#__PURE__*/_react.default.createElement(ModalContext.Provider, {
     value: {
-      isAnimationComplete
+      isAnimationComplete,
+      triggerRefocusFlag
     }
   }, content)))));
 };

package/lib/components/pages/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./pages";
+export { default as Page } from "./page/page";

package/lib/components/pages/index.js

@@ -9,7 +9,15 @@ Object.defineProperty(exports, "default", {
     return _pages.default;
   }
 });
+Object.defineProperty(exports, "Page", {
+  enumerable: true,
+  get: function () {
+    return _page.default;
+  }
+});
 
 var _pages = _interopRequireDefault(require("./pages.component"));
 
+var _page = _interopRequireDefault(require("./page/page.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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/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

@@ -337,7 +337,49 @@ var _default = palette => {
       fullScreenModal: 5000,
       notification: 6000,
       aboveAll: 9999
+    },
+
+    get compatibility() {
+      return {
+        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

@@ -13,6 +13,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var _default = { ..._index.default,
   ..._common.default,
-  name: "sage"
+  name: "sage (experimental)"
 };
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "100.0.0",
+  "version": "101.0.1",
   "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",
@@ -59,6 +60,7 @@
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^9.0.0",
     "@storybook/addon-a11y": "^6.3.6",
     "@storybook/addon-actions": "^6.3.6",
@@ -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",
@@ -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;