carbon-react 106.1.0 → 106.1.3

package/lib/__internal__/validations/validation-icon.component.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ValidationIcon = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _invariant = _interopRequireDefault(require("invariant"));
 
 var _icon = _interopRequireDefault(require("../../components/icon"));
 
@@ -27,8 +25,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const getValidationType = ({
   error,
   warning,
@@ -37,7 +33,7 @@ const getValidationType = ({
   if (error) return "error";
   if (warning) return "warning";
   if (info) return "info";
-  return "";
+  return null;
 };
 
 const ValidationIcon = ({
@@ -50,12 +46,18 @@ const ValidationIcon = ({
   iconId,
   tooltipId,
   isPartOfInput,
-  tabIndex,
+  tabIndex = -1,
   onClick,
-  tooltipPosition,
+  tooltipPosition = "right",
   tooltipFlipOverrides,
   ...rest
 }) => {
+  const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
+
+  if (tooltipFlipOverrides) {
+    (0, _invariant.default)(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+  }
+
   const {
     hasFocus,
     hasMouseOver
@@ -72,7 +74,7 @@ const ValidationIcon = ({
   });
   const validationMessage = error || warning || info;
 
-  if (typeof validationMessage !== "string") {
+  if (typeof validationMessage !== "string" || !validationType) {
     return null;
   }
 
@@ -107,60 +109,6 @@ const ValidationIcon = ({
   }));
 };
 
-ValidationIcon.propTypes = { ...marginPropTypes,
-
-  /** A small string to indicate the size of the icon */
-  size: _propTypes.default.oneOf(["small", "medium", "large"]),
-
-  /** The unique id of the component (used with aria-describedby for accessibility) */
-  iconId: _propTypes.default.string,
-
-  /** Define position of the tooltip */
-  tooltipPosition: _propTypes.default.string,
-
-  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) */
-  tooltipFlipOverrides: (props, propName, componentName) => {
-    const prop = props[propName];
-    const isValid = prop && Array.isArray(prop) && prop.every(placement => ["bottom", "left", "right", "top"].includes(placement));
-
-    if (!prop || isValid) {
-      return null;
-    }
-
-    return new Error( // eslint-disable-next-line max-len
-    `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
-  },
-
-  /** Id passed to the tooltip container, used for accessibility purposes. */
-  tooltipId: _propTypes.default.string,
-
-  /** An onClick handler */
-  onClick: _propTypes.default.func,
-
-  /** An onFocus handler */
-  onFocus: _propTypes.default.func,
-
-  /** An onBlur handler */
-  onBlur: _propTypes.default.func,
-
-  /** A boolean to indicate if the icon is part of an input */
-  isPartOfInput: _propTypes.default.bool,
-
-  /** Overrides the default tabindex of the component */
-  tabIndex: _propTypes.default.number,
-
-  /** Status of error validations */
-  error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Status of warnings */
-  warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Status of info */
-  info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string])
-};
-ValidationIcon.defaultProps = {
-  tooltipPosition: "right",
-  tabIndex: -1
-};
+exports.ValidationIcon = ValidationIcon;
 var _default = ValidationIcon;
 exports.default = _default;

package/lib/__internal__/validations/validation-icon.style.d.ts

@@ -1,2 +1,6 @@
+import { ValidationIconProps } from "./validation-icon.component";
+declare type ValidationType = "error" | "warning" | "info";
+declare const ValidationIconStyle: import("styled-components").StyledComponent<"span", any, ValidationIconProps & {
+    validationType: ValidationType;
+}, never>;
 export default ValidationIconStyle;
-declare const ValidationIconStyle: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/__internal__/validations/validation-icon.style.js

@@ -22,7 +22,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const validationIconTypes = {
   error: "var(--colorsSemanticNegative500)",
   info: "var(--colorsSemanticInfo500)",
-  success: "var(--colorsSemanticPositive500)",
   warning: "var(--colorsSemanticCaution500)"
 };
 const ValidationIconStyle = _styledComponents.default.span`

package/lib/components/duelling-picklist/picklist-item/picklist-item.component.js

@@ -44,6 +44,7 @@ const PicklistItem = /*#__PURE__*/_react.default.forwardRef(({
   const {
     setElementToFocus
   } = (0, _react.useContext)(_duellingPicklist.default);
+  const picklistItemNodeRef = (0, _react.useRef)();
   const calculateFocusIndex = (0, _react.useCallback)(() => {
     if (isLastItem) {
       const toggledListIndex = listIndex === 0 ? 1 : 0;
@@ -89,10 +90,13 @@ const PicklistItem = /*#__PURE__*/_react.default.forwardRef(({
     classNames: "picklist-item"
   }, rest, type === "add" ? {
     enter: false
-  } : {}), /*#__PURE__*/_react.default.createElement(_picklistItem.StyledPicklistItem, {
+  } : {}, {
+    nodeRef: picklistItemNodeRef
+  }), /*#__PURE__*/_react.default.createElement(_picklistItem.StyledPicklistItem, {
     onKeyDown: handleKeydown,
     "data-element": "picklist-item",
-    locked: locked
+    locked: locked,
+    ref: picklistItemNodeRef
   }, children, !locked && /*#__PURE__*/_react.default.createElement(_picklistItem.StyledButton, {
     buttonType: "primary",
     destructive: type === "remove",

package/lib/components/icon/icon.d.ts

@@ -239,6 +239,10 @@ export interface IconProps extends MarginProps {
   tooltipId?: string;
   /** Id passed to the icon. */
   id?: string;
+  tabIndex?: number;
+  isPartOfInput?: boolean;
+  inputSize?: "small" | "medium" | "large";
+  focusable?: boolean;
 }
 
 declare function Icon(

package/lib/components/link/link.style.js

@@ -67,6 +67,10 @@ const StyledLink = _styledComponents.default.span`
       &:hover {
         cursor: pointer;
         color: ${isSkipLink ? "var(--colorsUtilityYin090)" : "var(--colorsActionMajor600)"};
+
+        ${_icon.default} {
+          color: var(--colorsActionMajor600);
+        }
       }
 
       &:focus {

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

@@ -44,6 +44,8 @@ const Modal = ({
   ...rest
 }) => {
   const ref = (0, _react.useRef)();
+  const backgroundNodeRef = (0, _react.useRef)();
+  const contentNodeRef = (0, _react.useRef)();
   const listenerAdded = (0, _react.useRef)(false);
   const modalRegistered = (0, _react.useRef)(false);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
@@ -139,6 +141,7 @@ const Modal = ({
 
   if (open) {
     background = !enableBackgroundUI ? /*#__PURE__*/_react.default.createElement(_modal.StyledModalBackground, {
+      ref: backgroundNodeRef,
       "data-element": "modal-background",
       transitionName: "modal-background",
       transitionTime: timeout
@@ -152,6 +155,7 @@ const Modal = ({
     transitionTime: timeout,
     ref: ref
   }, rest), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, background && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: backgroundNodeRef,
     key: "modal",
     appear: true,
     classNames: "modal-background",
@@ -159,6 +163,7 @@ const Modal = ({
     onEntered: () => setAnimationComplete(true),
     onExiting: () => setAnimationComplete(false)
   }, background)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, content && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: contentNodeRef,
     appear: true,
     classNames: "modal",
     timeout: timeout
@@ -167,7 +172,8 @@ const Modal = ({
       isAnimationComplete,
       triggerRefocusFlag,
       isInModal: true
-    }
+    },
+    ref: contentNodeRef
   }, content)))));
 };
 

package/lib/components/pages/page/page.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,6 +21,10 @@ var _page = require("./page.style");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const Page = ({
@@ -28,6 +32,7 @@ const Page = ({
   children,
   ...props
 }) => {
+  const styledPageNodeRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, _extends({
     className: "carbon-carousel__transition",
     timeout: {
@@ -36,8 +41,11 @@ const Page = ({
       exit: 0
     } // eslint-disable-next-line react/prop-types
     ,
-    classNames: props.transitionName()
-  }, props), /*#__PURE__*/_react.default.createElement(_page.StyledPage, (0, _tags.default)("page", props), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
+    classNames: props.transitionName(),
+    nodeRef: styledPageNodeRef
+  }, props), /*#__PURE__*/_react.default.createElement(_page.StyledPage, _extends({}, (0, _tags.default)("page", props), {
+    ref: styledPageNodeRef
+  }), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
     hasContent: title
   }, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, {
     "data-element": "carbon-page-content"

package/lib/components/popover-container/popover-container.component.js

@@ -52,6 +52,7 @@ const PopoverContainer = ({
   const closeButtonRef = (0, _react.useRef)();
   const openButtonRef = (0, _react.useRef)();
   const guid = (0, _react.useRef)((0, _guid.default)());
+  const popoverContentNodeRef = (0, _react.useRef)();
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   (0, _react.useEffect)(() => {
@@ -99,7 +100,8 @@ const PopoverContainer = ({
     },
     appear: true,
     mountOnEnter: true,
-    unmountOnExit: true
+    unmountOnExit: true,
+    nodeRef: popoverContentNodeRef
   }, state => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
@@ -109,7 +111,8 @@ const PopoverContainer = ({
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
-    p: "16px 24px"
+    p: "16px 24px",
+    ref: popoverContentNodeRef
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"

package/lib/components/portal/portal.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.PortalContext = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -23,6 +23,10 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const PortalContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.PortalContext = PortalContext;
+
 const Portal = ({
   children,
   className,
@@ -31,6 +35,9 @@ const Portal = ({
 }) => {
   const [portalNode, setPortalNode] = (0, _react.useState)(null);
   const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
+  const {
+    renderInRoot
+  } = (0, _react.useContext)(PortalContext);
   (0, _react.useEffect)(() => {
     if (onReposition) {
       onReposition();
@@ -63,7 +70,7 @@ const Portal = ({
     if (!node && id !== undefined && document.getElementById(id)) {
       node = document.getElementById(id);
       setPortalNode(node);
-    } else if (!node) {
+    } else if (!node || document.getElementsByClassName(portalClassName).length === 0) {
       node = document.createElement("div");
       node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
@@ -73,14 +80,14 @@ const Portal = ({
       }
 
       setPortalNode(node);
-      const rootDiv = document.getElementById("root"); // Storybook adds the hidden attribute to the root element when on the "Docs" pages
-      // Without this check the portal would also be hidden
+      let mainNode = document.body;
+      const rootDiv = document.getElementById("root");
 
-      if (rootDiv && !rootDiv.hasAttribute("hidden")) {
-        rootDiv.appendChild(node);
-      } else {
-        document.body.appendChild(node);
+      if (rootDiv && renderInRoot) {
+        mainNode = rootDiv;
       }
+
+      mainNode.appendChild(node);
     }
 
     if (className) {

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

@@ -154,7 +154,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
 
         return true;
       });
-    } else if (key.length === 1) {
+    } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
       triggerFilterChange(key);
     }
   }, [triggerFilterChange, onKeyDown, onOpen, readOnly]);

package/lib/components/show-edit-pod/show-edit-pod.component.js

@@ -61,6 +61,8 @@ const ShowEditPod = ({
 }) => {
   const locale = (0, _react.useContext)(_i18nContext.default);
   const ref = (0, _react.useRef)();
+  const editModeNodeRef = (0, _react.useRef)();
+  const showModeNodeRef = (0, _react.useRef)();
   const [isEditing, setIsEditingState] = (0, _react.useState)(false);
   const isControlled = editing !== undefined;
 
@@ -146,9 +148,11 @@ const ShowEditPod = ({
         timeout: {
           enter: 300,
           exit: 50
-        }
+        },
+        nodeRef: editModeNodeRef
       }, /*#__PURE__*/_react.default.createElement("div", {
-        key: "edit"
+        key: "edit",
+        ref: editModeNodeRef
       }, editContent()));
     }
 
@@ -158,9 +162,11 @@ const ShowEditPod = ({
       timeout: {
         enter: 300,
         exit: 50
-      }
+      },
+      nodeRef: showModeNodeRef
     }, /*#__PURE__*/_react.default.createElement("div", {
-      key: "show"
+      key: "show",
+      ref: showModeNodeRef
     }, children));
   };
 

package/lib/components/toast/toast.component.js

@@ -63,6 +63,7 @@ const Toast = ({
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
+  const toastContentNodeRef = (0, _react.useRef)();
   const componentClasses = (0, _react.useMemo)(() => {
     return (0, _classnames.default)(className);
   }, [className]);
@@ -122,10 +123,13 @@ const Toast = ({
         appear: 1600,
         enter: 1500,
         exit: 500
-      }
+      },
+      nodeRef: toastContentNodeRef
     }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
       className: componentClasses
-    }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), toastProps), /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+    }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), toastProps, {
+      ref: toastContentNodeRef
+    }), /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: toastProps.variant

package/lib/style/themes/base/base-theme.config.d.ts

@@ -56,6 +56,9 @@ declare function _default(palette: any): {
         colorsYang100: string;
         colorsYang030: string;
         colorsYang080: string;
+        colorsGray600: string;
+        colorsGray700: string;
+        colorsGray750: string;
         colorsGray850: string;
         colorsGray900: string;
         colorsGray1000: string;
@@ -75,19 +78,31 @@ declare function _default(palette: any): {
         colorsComponentsMenuSpringChild400: string;
         colorsComponentsMenuSpringChild500: string;
         colorsComponentsMenuSpringChild600: string;
+        colorsComponentsMenuSpringChildAlt400: string;
         colorsComponentsMenuSpringChildAlt500: string;
         colorsComponentsMenuSpringChildAlt600: string;
+        colorsComponentsMenuSummerStandard400: string;
         colorsComponentsMenuSummerStandard500: string;
         colorsComponentsMenuSummerStandard600: string;
         colorsComponentsMenuSummerStandard700: string;
+        colorsComponentsMenuSummerStandard800: string;
+        colorsComponentsMenuSummerParent400: string;
         colorsComponentsMenuSummerParent500: string;
         colorsComponentsMenuSummerParent600: string;
         colorsComponentsMenuSummerParent700: string;
+        colorsComponentsMenuSummerParent800: string;
+        colorsComponentsMenuSummerChild300: string;
         colorsComponentsMenuSummerChild400: string;
         colorsComponentsMenuSummerChild500: string;
         colorsComponentsMenuSummerChild600: string;
+        colorsComponentsMenuSummerChild700: string;
+        colorsComponentsMenuSummerChild800: string;
+        colorsComponentsMenuSummerChildAlt300: string;
+        colorsComponentsMenuSummerChildAlt400: string;
         colorsComponentsMenuSummerChildAlt500: string;
         colorsComponentsMenuSummerChildAlt600: string;
+        colorsComponentsMenuSummerChildAlt700: string;
+        colorsComponentsMenuSummerChildAlt800: string;
         colorsComponentsMenuAutumnStandard500: string;
         colorsComponentsMenuAutumnStandard600: string;
         colorsComponentsMenuAutumnStandard700: string;
@@ -97,24 +112,37 @@ declare function _default(palette: any): {
         colorsComponentsMenuAutumnChild400: string;
         colorsComponentsMenuAutumnChild500: string;
         colorsComponentsMenuAutumnChild600: string;
+        colorsComponentsMenuAutumnChildAlt400: string;
         colorsComponentsMenuAutumnChildAlt500: string;
         colorsComponentsMenuAutumnChildAlt600: string;
+        colorsComponentsMenuWinterStandard400: string;
         colorsComponentsMenuWinterStandard500: string;
         colorsComponentsMenuWinterStandard600: string;
         colorsComponentsMenuWinterStandard700: string;
+        colorsComponentsMenuWinterStandard800: string;
+        colorsComponentsMenuWinterParent400: string;
         colorsComponentsMenuWinterParent500: string;
         colorsComponentsMenuWinterParent600: string;
         colorsComponentsMenuWinterParent700: string;
+        colorsComponentsMenuWinterParent800: string;
+        colorsComponentsMenuWinterChild300: string;
         colorsComponentsMenuWinterChild400: string;
         colorsComponentsMenuWinterChild500: string;
         colorsComponentsMenuWinterChild600: string;
+        colorsComponentsMenuWinterChild700: string;
+        colorsComponentsMenuWinterChild800: string;
+        colorsComponentsMenuWinterChildAlt300: string;
+        colorsComponentsMenuWinterChildAlt400: string;
         colorsComponentsMenuWinterChildAlt500: string;
         colorsComponentsMenuWinterChildAlt600: string;
+        colorsComponentsMenuWinterChildAlt700: string;
+        colorsComponentsMenuWinterChildAlt800: string;
         colorsComponentsMenuYin100: string;
         colorsComponentsMenuYin065: string;
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
+        colorsComponentsMenuTransparent: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -229,6 +257,7 @@ declare function _default(palette: any): {
         sizing400: string;
         sizing450: string;
         sizing500: string;
+        sizing525: string;
         sizing600: string;
         sizing700: string;
         sizing800: string;
@@ -236,12 +265,13 @@ declare function _default(palette: any): {
         sizing1000: string;
         sizing1300: string;
         sizing1600: string;
+        sizing010: string;
         sizing025: string;
         sizing050: string;
         sizing075: string;
         sizingLogowidth: string;
-        sizing010: string;
         spacing100: string;
+        spacing110: string;
         spacing125: string;
         spacing150: string;
         spacing200: string;
@@ -255,8 +285,10 @@ declare function _default(palette: any): {
         spacing900: string;
         spacing1000: string;
         spacing000: string;
+        spacing010: string;
         spacing025: string;
         spacing050: string;
+        spacing060: string;
         spacing075: string;
         borderWidth100: string;
         borderWidth200: string;
@@ -281,8 +313,11 @@ declare function _default(palette: any): {
         boxShadow200: string;
         boxShadow300: string;
         boxShadow400: string;
-        boxShadow075: string;
+        boxShadow010: string;
         boxShadow050: string;
+        boxShadow075: string;
+        boxShadow090: string;
+        boxShadow091: string;
         fontWeights400: string;
         fontWeights500: string;
         fontWeights700: string;
@@ -303,14 +338,29 @@ declare function _default(palette: any): {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardParagraphM: string;
         typographyCardSelectTitleM: string;
         typographyCardSelectSubtitleM: string;
         typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;
+        typographyDialogTitleXs: string;
+        typographyDialogTitleS: string;
+        typographyDialogTitleMs: string;
         typographyDialogTitleM: string;
+        typographyDialogTitleMl: string;
+        typographyDialogTitleL: string;
+        typographyDialogTitleXl: string;
+        typographyDialogTitleXxl: string;
+        typographyDialogParagraphXs: string;
+        typographyDialogParagraphS: string;
+        typographyDialogParagraphMs: string;
         typographyDialogParagraphM: string;
+        typographyDialogParagraphMl: string;
+        typographyDialogParagraphL: string;
+        typographyDialogParagraphXl: string;
+        typographyDialogParagraphXxl: string;
         typographyDrawerTitleM: string;
         typographyDrawerParagraphM: string;
         typographyFlashTextM: string;
@@ -351,24 +401,31 @@ declare function _default(palette: any): {
         typographyLinkTextM: string;
         typographyLinkTextL: string;
         typographyMenuLabelM: string;
+        typographyMenuLabelL: string;
         typographyMenuSegmentTitleM: string;
         typographyMessageHeadingM: string;
         typographyMessageHeadingL: string;
         typographyMessageTextM: string;
         typographyMessageTextL: string;
         typographyPaginationLabelM: string;
-        typographyTileParagraphM: string;
         typographyPillLabelS: string;
         typographyPillLabelM: string;
         typographyPillLabelL: string;
         typographyPillLabelXl: string;
-        typographyProfileEmailXs: string;
-        typographyProfileEmailS: string;
-        typographyProfileEmailM: string;
-        typographyProfileEmailMl: string;
-        typographyProfileEmailL: string;
-        typographyProfileEmailXl: string;
-        typographyProfileEmailXxl: string;
+        typographyProfileEmailTextXs: string;
+        typographyProfileEmailTextS: string;
+        typographyProfileEmailTextM: string;
+        typographyProfileEmailTextMl: string;
+        typographyProfileEmailTextL: string;
+        typographyProfileEmailTextXl: string;
+        typographyProfileEmailTextXxl: string;
+        typographyProfileEmailLinkXs: string;
+        typographyProfileEmailLinkS: string;
+        typographyProfileEmailLinkM: string;
+        typographyProfileEmailLinkMl: string;
+        typographyProfileEmailLinkL: string;
+        typographyProfileEmailLinkXl: string;
+        typographyProfileEmailLinkXxl: string;
         typographyProfileInitialsXs: string;
         typographyProfileInitialsS: string;
         typographyProfileInitialsM: string;
@@ -387,10 +444,20 @@ declare function _default(palette: any): {
         typographyProgressTrackerValueLabelM: string;
         typographyProgressTrackerValueLabelL: string;
         typographySearchLabelM: string;
+        typographySidebarTitleXs: string;
         typographySidebarTitleS: string;
+        typographySidebarTitleMs: string;
         typographySidebarTitleM: string;
+        typographySidebarTitleMl: string;
         typographySidebarTitleL: string;
+        typographySidebarTitleXl: string;
+        typographySidebarParagraphXs: string;
+        typographySidebarParagraphS: string;
+        typographySidebarParagraphMs: string;
         typographySidebarParagraphM: string;
+        typographySidebarParagraphMl: string;
+        typographySidebarParagraphL: string;
+        typographySidebarParagraphXl: string;
         typographyStepFlowCompleteLabelM: string;
         typographyStepFlowCurrentLabelM: string;
         typographyStepFlowIncompleteLabelM: string;
@@ -406,6 +473,7 @@ declare function _default(palette: any): {
         typographyTableCellTextM: string;
         typographyTableCellTextL: string;
         typographyTableCellTextXl: string;
+        typographyTileParagraphM: string;
         typographyTooltipTextM: string;
         typographyTooltipTextL: string;
         opacity300: string;