carbon-react 104.16.1 → 104.19.0

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

@@ -19,6 +19,12 @@ 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 validationIconTypes = {
+  error: "var(--colorsSemanticNegative500)",
+  info: "var(--colorsSemanticInfo500)",
+  success: "var(--colorsSemanticPositive500)",
+  warning: "var(--colorsSemanticCaution500)"
+};
 const ValidationIconStyle = _styledComponents.default.span`
   background: none;
   cursor: default;
@@ -37,15 +43,12 @@ const ValidationIconStyle = _styledComponents.default.span`
 
   ${_icon.default}:before {
     color: ${({
-  validationType,
-  theme
-}) => theme.colors[validationType]};
+  validationType
+}) => validationIconTypes[validationType]};
   }
 
   ${_icon.default}:focus {
-    outline: solid 2px ${({
-  theme
-}) => theme.colors.focus};
+    outline: solid 2px var(--colorsSemanticFocus500);
   }
 
   ${_styledSystem.margin}

package/lib/components/batch-selection/batch-selection.style.js

@@ -7,8 +7,6 @@ exports.StyledSelectionCount = exports.StyledBatchSelection = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
@@ -23,7 +21,6 @@ const StyledBatchSelection = _styledComponents.default.div`
   ${({
   disabled,
   colorTheme,
-  theme,
   hidden
 }) => (0, _styledComponents.css)`
     align-items: center;
@@ -31,22 +28,26 @@ const StyledBatchSelection = _styledComponents.default.div`
 
     ${hidden && "opacity: 0;"}
 
+    ${_icon.default} {
+      color: var(--colorsActionMajorYin065);
+    }
+
     ${colorTheme === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.colors.slate};
-      color: ${theme.colors.white};
+      background-color: var(--colorsUtilityMajor500);
+      color: var(--colorsUtilityYang100);
 
       ${_icon.default} {
-        color: ${theme.colors.white};
+        color: var(--colorsActionMajorYang100);
       }
     `}
 
     ${colorTheme === "light" && (0, _styledComponents.css)`
-      background-color: ${theme.batchSelection.lightTheme};
+      background-color: var(--colorsUtilityMajor150);
     `}
 
     ${colorTheme === "white" && (0, _styledComponents.css)`
-      background-color: ${theme.white};
-      box-shadow: ${theme.shadows.depth1};
+      background-color: var(--colorsUtilityYang100);
+      box-shadow: var(--boxShadow100);
     `}
 
     ${_iconButton.default} {
@@ -56,16 +57,16 @@ const StyledBatchSelection = _styledComponents.default.div`
     }
 
     ${_iconButton.default}:hover {
-      background-color: ${theme.colors.base};
+      background-color: var(--colorsActionMajor500);
 
       ${_icon.default} {
-        color: ${theme.colors.white};
+        color: var(--colorsActionMajorYang100);
       }
     }
 
     ${disabled && (0, _styledComponents.css)`
       background: transparent;
-      color: ${theme.disabled.disabled};
+      color: var(--colorsUtilityYin030);
       cursor: not-allowed;
 
       ${_iconButton.default} {
@@ -73,16 +74,13 @@ const StyledBatchSelection = _styledComponents.default.div`
         pointer-events: none;
 
         ${_icon.default} {
-          color: ${theme.icon.disabled};
+          color: var(--colorsActionMajorYin030);
         }
       }
     `}
   `}
 `;
 exports.StyledBatchSelection = StyledBatchSelection;
-StyledBatchSelection.defaultProps = {
-  theme: _base.default
-};
 const StyledSelectionCount = _styledComponents.default.span`
   display: inline-block;
   padding: 10px 15px;

package/lib/components/date-range/date-range.component.js

@@ -25,6 +25,8 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
+
 var _dateFormats = _interopRequireDefault(require("../date/__internal__/date-formats"));
 
 var _dateRange2 = _interopRequireDefault(require("./date-range.context"));
@@ -107,16 +109,7 @@ const DateRange = ({
     formattedValue: getEndDate(),
     rawValue: isEmptyValue(endDateProps.allowEmptyValue, getEndDate()) ? "" : (0, _utils.formatToISO)(format, getEndDate())
   });
-
-  function usePrevious(arg) {
-    const ref = (0, _react.useRef)();
-    (0, _react.useEffect)(() => {
-      ref.current = arg;
-    });
-    return ref.current;
-  }
-
-  const previousValue = usePrevious(value);
+  const previousValue = (0, _usePrevious.default)(value);
   (0, _react.useEffect)(() => {
     const updateValues = () => {
       setStartDateValue({

package/lib/components/decimal/decimal.component.js

@@ -19,6 +19,8 @@ var _utils = require("../../style/utils");
 
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
+
 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; }
@@ -99,27 +101,18 @@ const Decimal = ({
     }
 
     return formattedNumber;
-  }, [getSeparator, isNaN, l, locale, precision]); // Return previous value before state is changed. Used to compare prevState and newState.
-
-  function usePrevious(arg) {
-    const ref = (0, _react.useRef)();
-    (0, _react.useEffect)(() => {
-      ref.current = arg;
-    });
-    return ref.current;
-  }
+  }, [getSeparator, isNaN, l, locale, precision]);
   /**
    * Determine if the precision value has changed from the previous ref value for precision
    */
 
-
-  const prevPrecisionValue = usePrevious(precision);
+  const prevPrecisionValue = (0, _usePrevious.default)(precision);
   (0, _react.useEffect)(() => {
     if (prevPrecisionValue && prevPrecisionValue !== precision) {
       // eslint-disable-next-line no-console
       console.error("Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.");
     }
-  }, [precision]);
+  }, [precision, prevPrecisionValue]);
   const removeDelimiters = (0, _react.useCallback)(valueToFormat => {
     const delimiterMatcher = new RegExp(`[\\${getSeparator("group")} ]*`, "g");
     return valueToFormat.replace(delimiterMatcher, "");
@@ -190,16 +183,17 @@ const Decimal = ({
     if (onBlur) onBlur(event);
   };
 
-  const isComponentControlled = value !== undefined;
-  const prevControlledState = usePrevious(isComponentControlled);
+  const isControlled = value !== undefined;
+  const prevControlledRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    (0, _invariant.default)(prevControlledState !== isComponentControlled, message);
-  }, [isComponentControlled]);
+    (0, _invariant.default)(prevControlledRef.current !== isControlled, message);
+    prevControlledRef.current = isControlled;
+  }, [isControlled]);
   (0, _react.useEffect)(() => {
     const unformattedValue = toStandardDecimal(stateValue);
 
-    if (isComponentControlled) {
+    if (isControlled) {
       const valueProp = getSafeValueProp(value);
 
       if (unformattedValue !== valueProp) {

package/lib/components/drawer/drawer.component.js

@@ -15,6 +15,8 @@ var _invariant = _interopRequireDefault(require("invariant"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
+
 var _icon = _interopRequireDefault(require("../icon"));
 
 var _drawer = require("./drawer.style");
@@ -88,16 +90,7 @@ const Drawer = ({
       }, timeout);
     }
   }, [getAnimationDuration, isExpanded]);
-
-  function usePrevious(arg) {
-    const ref = (0, _react.useRef)();
-    (0, _react.useEffect)(() => {
-      ref.current = arg;
-    });
-    return ref.current;
-  }
-
-  const previousValue = usePrevious(expanded);
+  const previousValue = (0, _usePrevious.default)(expanded);
   (0, _react.useEffect)(() => {
     const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
     (0, _invariant.default)(isControlled.current === (expanded !== undefined), message);

package/lib/components/icon-button/icon-button.style.js

@@ -47,7 +47,10 @@ const StyledIconButton = _styledComponents.default.button.attrs({
     }
 
     ${_icon.default} {
-      ${disabled && `color: ${theme.icon.disabled}`};
+      ${disabled && (0, _styledComponents.css)`
+        color: ${theme.icon.disabled};
+        background-color: transparent;
+      `};
       position: relative;
 
       &:focus {

package/lib/components/portrait/portrait-gravatar.component.d.ts

@@ -9,7 +9,6 @@ declare function PortraitGravatar({ gravatarEmail, size, alt, shape, errorCallba
 }): JSX.Element;
 declare namespace PortraitGravatar {
     namespace propTypes {
-        const theme: PropTypes.Requireable<object>;
         const gravatarEmail: PropTypes.Validator<string>;
         const size: PropTypes.Validator<string>;
         const shape: PropTypes.Requireable<string>;

package/lib/components/portrait/portrait-gravatar.component.js

@@ -51,9 +51,6 @@ const PortraitGravatar = ({
 };
 
 PortraitGravatar.propTypes = {
-  /** The theme to use. */
-  theme: _propTypes.default.object,
-
   /** The user's email address for the Gravatar. */
   gravatarEmail: _propTypes.default.string.isRequired,
 

package/lib/components/portrait/portrait-gravatar.d.ts

@@ -1,8 +1,6 @@
 import { PortraitSizes, PortraitShapes } from "./portrait";
 
 export interface PortraitGravatarProps {
-  /** The theme to use. */
-  theme?: Record<string, unknown>;
   /** The user's email address for the Gravatar. */
   gravatarEmail: string;
   /** The size of the Gravatar. */

package/lib/components/portrait/portrait-initials.component.d.ts

@@ -1,8 +1,23 @@
-declare var _default: React.ForwardRefExoticComponent<{
+export default PortraitInitials;
+declare function PortraitInitials({ initials, size, shape, darkBackground, alt, ...rest }: {
     [x: string]: any;
-    [x: number]: any;
-} & {
-    theme?: any;
-}>;
-export default _default;
-import React from "react";
+    initials: any;
+    size: any;
+    shape: any;
+    darkBackground: any;
+    alt: any;
+}): JSX.Element;
+declare namespace PortraitInitials {
+    namespace propTypes {
+        const initials: PropTypes.Validator<string>;
+        const size: PropTypes.Validator<string>;
+        const darkBackground: PropTypes.Requireable<boolean>;
+        const shape: PropTypes.Requireable<string>;
+        const alt: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const shape_1: string;
+        export { shape_1 as shape };
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/portrait/portrait-initials.component.js

@@ -9,9 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = require("styled-components");
-
-var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
 
 var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
 
@@ -28,7 +26,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 PortraitInitials = ({
-  theme,
   initials,
   size,
   shape,
@@ -39,7 +36,7 @@ const PortraitInitials = ({
   const [cachedImageDataUrl, setCachedImageDataUrl] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
     setCachedImageDataUrl(null);
-  }, [theme, initials, size, darkBackground]);
+  }, [initials, size, darkBackground]);
 
   const generateDataUrl = () => {
     if (cachedImageDataUrl) {
@@ -49,7 +46,7 @@ const PortraitInitials = ({
     const {
       textColor,
       bgColor
-    } = (0, _portrait.getColorsForInitials)(theme, darkBackground);
+    } = (0, _portrait.getColorsForInitials)(darkBackground);
 
     let canvas = _browser.default.getDocument().createElement("canvas");
 
@@ -66,9 +63,9 @@ const PortraitInitials = ({
     context.font = `${Math.round(canvas.width / 2.4)}px Lato, Arial`;
     context.textAlign = "center"; // Setup background and front color
 
-    context.fillStyle = bgColor;
+    context.fillStyle = _common.default[bgColor];
     context.fillRect(0, 0, dimensions, dimensions);
-    context.fillStyle = textColor;
+    context.fillStyle = _common.default[textColor];
     context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5); // Set image representation in default format (png)
 
     const dataURI = canvas.toDataURL(); // Dispose canvas element
@@ -81,8 +78,7 @@ const PortraitInitials = ({
   return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, _extends({
     "data-element": "initials",
     size: size,
-    shape: shape,
-    theme: theme
+    shape: shape
   }, rest), /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
     src: generateDataUrl(),
     alt: alt
@@ -90,9 +86,6 @@ const PortraitInitials = ({
 };
 
 PortraitInitials.propTypes = {
-  /** The theme to use. */
-  theme: _propTypes.default.object,
-
   /** The user's initials to render. */
   initials: _propTypes.default.string.isRequired,
 
@@ -109,10 +102,7 @@ PortraitInitials.propTypes = {
   alt: _propTypes.default.string
 };
 PortraitInitials.defaultProps = {
-  shape: "square",
-  theme: _base.default
+  shape: "square"
 };
-
-var _default = (0, _styledComponents.withTheme)(PortraitInitials);
-
+var _default = PortraitInitials;
 exports.default = _default;

package/lib/components/portrait/portrait-initials.d.ts

@@ -1,8 +1,6 @@
 import { PortraitSizes, PortraitShapes } from "./portrait";
 
 export interface PortraitInitialsProps {
-  /** The theme to use. */
-  theme?: Record<string, unknown>;
   /** The user's initials to render. */
   initials: string;
   /** The size of the initials image. */

package/lib/components/portrait/portrait.config.js

@@ -27,11 +27,11 @@ const PORTRAIT_SIZE_PARAMS = {
   },
   L: {
     dimensions: 72,
-    iconDimensions: 32
+    iconDimensions: 40
   },
   XL: {
     dimensions: 104,
-    iconDimensions: 48
+    iconDimensions: 56
   },
   XXL: {
     dimensions: 128,

package/lib/components/portrait/portrait.style.d.ts

@@ -1,10 +1,10 @@
-export function getColorsForInitials(theme: any, darkBackground: any): {
-    textColor: any;
-    bgColor: any;
+export function getColorsForInitials(darkBackground: any): {
+    textColor: string;
+    bgColor: string;
 };
 export const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPortraitInitialsImg: import("styled-components").StyledComponent<"img", any, {}, never>;
 export const StyledPortraitGravatar: import("styled-components").StyledComponent<"img", any, {}, never>;
 export const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
-export const StyledIcon: import("styled-components").StyledComponent<({ darkBackground, ...rest }: any) => JSX.Element, any, {}, never>;
+export const StyledIcon: import("styled-components").StyledComponent<({ size, darkBackground, ...rest }: any) => JSX.Element, any, {}, never>;
 export const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/portrait/portrait.style.js

@@ -54,7 +54,6 @@ function stylingForShape({
 
 function stylingForIcon({
   size,
-  theme,
   darkBackground
 }) {
   const params = _portrait.PORTRAIT_SIZE_PARAMS[size];
@@ -63,31 +62,28 @@ function stylingForIcon({
     return (0, _styledComponents.css)``;
   }
 
-  let color = theme.portrait.border;
-  let backgroundColor = theme.portrait.background;
+  let color = "var(--colorsUtilityMajor200)";
+  let backgroundColor = "var(--colorsUtilityMajor025)";
 
   if (darkBackground) {
-    color = theme.portrait.background;
-    backgroundColor = theme.portrait.border;
+    color = "var(--colorsUtilityMajor025)";
+    backgroundColor = "var(--colorsUtilityMajor200)";
   }
 
   return (0, _styledComponents.css)`
     background-color: ${backgroundColor};
     color: ${color};
 
-    ${params.iconDimensions && (0, _styledComponents.css)`
-      svg {
-        width: ${params.iconDimensions}px;
-        height: ${params.iconDimensions}px;
-      }
-    `}
+    ::before {
+      font-size: ${params.iconDimensions}px;
+    }
   `;
 }
 
-function getColorsForInitials(theme, darkBackground) {
+function getColorsForInitials(darkBackground) {
   return {
-    textColor: darkBackground ? theme.portrait.background : theme.portrait.initials,
-    bgColor: darkBackground ? theme.portrait.initials : theme.portrait.background
+    textColor: darkBackground ? "colorsUtilityYang100" : "colorsUtilityYin055",
+    bgColor: darkBackground ? "colorsUtilityMajor400" : "colorsUtilityMajor025"
   };
 }
 
@@ -97,20 +93,14 @@ const StyledPortraitInitials = _styledComponents.default.div`
   box-sizing: border-box;
   ${stylingForSize}
   ${stylingForShape}
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-      border: 1px solid ${theme.portrait.border};
-    `}
+  border: 1px solid var(--colorsUtilityMajor200);
 `;
 exports.StyledPortraitInitials = StyledPortraitInitials;
 StyledPortraitInitials.propTypes = {
-  theme: _propTypes.default.object,
   size: _propTypes.default.oneOf(_portrait.PORTRAIT_SIZES).isRequired,
   shape: _propTypes.default.oneOf(_portrait.PORTRAIT_SHAPES)
 };
 StyledPortraitInitials.defaultProps = {
-  theme: _base.default,
   shape: "square"
 };
 const StyledPortraitInitialsImg = _styledComponents.default.img`
@@ -134,9 +124,6 @@ StyledPortraitGravatar.propTypes = {
   src: _propTypes.default.string.isRequired,
   alt: _propTypes.default.string
 };
-StyledPortraitGravatar.defaultProps = {
-  theme: _base.default
-};
 const StyledCustomImg = _styledComponents.default.img`
   display: block;
   ${stylingForSize}
@@ -151,6 +138,7 @@ StyledCustomImg.propTypes = {
 }; // && is used here to increase the specificity
 
 const StyledIcon = (0, _styledComponents.default)(({
+  size,
   darkBackground,
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_icon.default, rest))`
@@ -160,11 +148,9 @@ const StyledIcon = (0, _styledComponents.default)(({
     ${stylingForSize}
     ${stylingForIcon}
     ${stylingForShape}
-    ${({
-  theme
-}) => (0, _styledComponents.css)`
-        border: 1px dashed ${theme.portrait.border};
-      `}
+    border: 1px dashed ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)"};
   }
 `;
 exports.StyledIcon = StyledIcon;
@@ -172,14 +158,12 @@ StyledIcon.propTypes = {
   darkBackground: _propTypes.default.bool,
   size: _propTypes.default.oneOf(_portrait.PORTRAIT_SIZES),
   shape: _propTypes.default.oneOf(_portrait.PORTRAIT_SHAPES),
-  theme: _propTypes.default.object,
   type: _propTypes.default.string.isRequired
 };
 StyledIcon.defaultProps = {
   darkBackground: false,
   size: "M",
-  shape: "square",
-  theme: _base.default
+  shape: "square"
 };
 const StyledPortraitContainer = _styledComponents.default.div`
   display: inline-block;

package/lib/components/profile/profile.config.d.ts

@@ -1,7 +1,6 @@
 export const PROFILE_SIZES: string[];
 declare namespace _default {
     namespace XS {
-        const dimensions: number;
         const nameSize: string;
         const emailSize: string;
         const lineHeight: string;
@@ -9,11 +8,10 @@ declare namespace _default {
         const marginTop: string;
     }
     namespace S {
-        const dimensions_1: number;
-        export { dimensions_1 as dimensions };
         const nameSize_1: string;
         export { nameSize_1 as nameSize };
-        export const emailsize: string;
+        const emailSize_1: string;
+        export { emailSize_1 as emailSize };
         const lineHeight_1: string;
         export { lineHeight_1 as lineHeight };
         const marginLeft_1: string;
@@ -22,12 +20,10 @@ declare namespace _default {
         export { marginTop_1 as marginTop };
     }
     namespace M {
-        const dimensions_2: number;
-        export { dimensions_2 as dimensions };
         const nameSize_2: string;
         export { nameSize_2 as nameSize };
-        const emailSize_1: string;
-        export { emailSize_1 as emailSize };
+        const emailSize_2: string;
+        export { emailSize_2 as emailSize };
         const lineHeight_2: string;
         export { lineHeight_2 as lineHeight };
         const marginLeft_2: string;
@@ -36,12 +32,10 @@ declare namespace _default {
         export { marginTop_2 as marginTop };
     }
     namespace ML {
-        const dimensions_3: number;
-        export { dimensions_3 as dimensions };
         const nameSize_3: string;
         export { nameSize_3 as nameSize };
-        const emailSize_2: string;
-        export { emailSize_2 as emailSize };
+        const emailSize_3: string;
+        export { emailSize_3 as emailSize };
         const lineHeight_3: string;
         export { lineHeight_3 as lineHeight };
         const marginLeft_3: string;
@@ -50,12 +44,10 @@ declare namespace _default {
         export { marginTop_3 as marginTop };
     }
     namespace L {
-        const dimensions_4: number;
-        export { dimensions_4 as dimensions };
         const nameSize_4: string;
         export { nameSize_4 as nameSize };
-        const emailSize_3: string;
-        export { emailSize_3 as emailSize };
+        const emailSize_4: string;
+        export { emailSize_4 as emailSize };
         const lineHeight_4: string;
         export { lineHeight_4 as lineHeight };
         const marginLeft_4: string;
@@ -64,12 +56,10 @@ declare namespace _default {
         export { marginTop_4 as marginTop };
     }
     namespace XL {
-        const dimensions_5: number;
-        export { dimensions_5 as dimensions };
         const nameSize_5: string;
         export { nameSize_5 as nameSize };
-        const emailSize_4: string;
-        export { emailSize_4 as emailSize };
+        const emailSize_5: string;
+        export { emailSize_5 as emailSize };
         const lineHeight_5: string;
         export { lineHeight_5 as lineHeight };
         const marginLeft_5: string;
@@ -78,12 +68,10 @@ declare namespace _default {
         export { marginTop_5 as marginTop };
     }
     namespace XXL {
-        const dimensions_6: number;
-        export { dimensions_6 as dimensions };
         const nameSize_6: string;
         export { nameSize_6 as nameSize };
-        const emailSize_5: string;
-        export { emailSize_5 as emailSize };
+        const emailSize_6: string;
+        export { emailSize_6 as emailSize };
         const lineHeight_6: string;
         export { lineHeight_6 as lineHeight };
         const marginLeft_6: string;