@atlaskit/focused-task-close-account 2.3.6 → 2.3.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/focused-task-close-account
 
+## 2.3.8
+
+### Patch Changes
+
+- [#181496](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/181496)
+  [`5f2ab44057dee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5f2ab44057dee) -
+  Internal changes to typography styles. There may be some minor visual changes to align with
+  modernized typography styles.
+
+## 2.3.7
+
+### Patch Changes
+
+- [#179922](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179922)
+  [`c0736bfffd63a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c0736bfffd63a) -
+  Internal changes to typography styles. There may be some minor visual changes to align with
+  modernized typography styles.
+
 ## 2.3.6
 
 ### Patch Changes

package/dist/cjs/components/DeactivateUserOverviewScreen/styled.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Title = exports.Screen = exports.MainInformationList = exports.LoadingWrapper = exports.AccessibleSitesWrapper = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _typography = require("@atlaskit/theme/typography");
-var _gridSizeTimes = _interopRequireDefault(require("../../util/gridSizeTimes"));
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -15,13 +13,13 @@ var Screen = exports.Screen = _styled.default.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat((0, _gridSizeTimes.default)(2), "px"),
+  marginBottom: "var(--ds-space-200, 16px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> p': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: "".concat((0, _gridSizeTimes.default)(3), "px"),
+    marginTop: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBottom: "".concat((0, _gridSizeTimes.default)(2), "px")
+    marginBottom: "var(--ds-space-200, 16px)"
   }
 });
 
@@ -34,10 +32,10 @@ var LoadingWrapper = exports.LoadingWrapper = _styled.default.div({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var Title = exports.Title = _styled.default.div(_typography.h700, {
+var Title = exports.Title = _styled.default.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat((0, _gridSizeTimes.default)(3), "px"),
-  marginTop: 0
+  marginBottom: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -51,5 +49,5 @@ var MainInformationList = exports.MainInformationList = _styled.default.ul({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var AccessibleSitesWrapper = exports.AccessibleSitesWrapper = _styled.default.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: "".concat((0, _gridSizeTimes.default)(1.5), "px")
+  marginTop: "var(--ds-space-150, 12px)"
 });

package/dist/cjs/components/DeleteUserContentPreviewScreen/styled.js

@@ -9,8 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
-var _typography = require("@atlaskit/theme/typography");
-var _gridSizeTimes = _interopRequireDefault(require("../../util/gridSizeTimes"));
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var getSelectedCardColor = function getSelectedCardColor(props) {
   return props.isSelected && "".concat("var(--ds-background-selected, ".concat(_colors.B50, ")"));
@@ -21,29 +19,29 @@ var Screen = exports.Screen = _styled.default.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat((0, _gridSizeTimes.default)(4), "px")
+  marginBottom: "var(--ds-space-400, 32px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var Title = exports.Title = _styled.default.div(_typography.h700, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat((0, _gridSizeTimes.default)(4), "px"),
-  marginTop: 0
+var Title = exports.Title = _styled.default.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginBottom: "var(--ds-space-400, 32px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var SectionCard = exports.SectionCard = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\tdisplay: flex;\n\tpadding: ", "px;\n\twidth: 100%;\n\tbackground-color: ", ";\n\tborder-radius: ", "px;\n\tbox-shadow: ", ";\n\tmargin-top: ", "px;\n"])), (0, _gridSizeTimes.default)(2.5), function (props) {
+var SectionCard = exports.SectionCard = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\tdisplay: flex;\n\tpadding: ", ";\n\twidth: 100%;\n\tbackground-color: ", ";\n\tborder-radius: ", "px;\n\tbox-shadow: ", ";\n\tmargin-top: ", ";\n"])), "var(--ds-space-250, 20px)", function (props) {
   return getSelectedCardColor(props);
-}, (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), (0, _gridSizeTimes.default)(2));
+}, (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-200, 16px)");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var Avatar = exports.Avatar = _styled.default.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: "".concat((0, _gridSizeTimes.default)(2.5), "px"),
+  marginLeft: "var(--ds-space-250, 20px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginRight: "".concat((0, _gridSizeTimes.default)(1), "px")
+  marginRight: "var(--ds-space-100, 8px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -51,7 +49,7 @@ var UserDetails = exports.UserDetails = _styled.default.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: "".concat((0, _gridSizeTimes.default)(1.5), "px"),
+  marginTop: "var(--ds-space-150, 12px)",
   fontWeight: "var(--ds-font-weight-semibold, 600)",
   color: "var(--ds-text-accent-blue, ".concat(_colors.B400, ")")
 });

package/dist/cjs/components/DeleteUserOverviewScreen/styled.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Title = exports.SectionMessageOuter = exports.Screen = exports.MainInformationList = exports.LoadingWrapper = exports.InlineDialogContent = exports.IconHoverWrapper = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _typography = require("@atlaskit/theme/typography");
-var _gridSizeTimes = _interopRequireDefault(require("../../util/gridSizeTimes"));
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -16,13 +14,13 @@ var Screen = exports.Screen = _styled.default.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat((0, _gridSizeTimes.default)(2), "px"),
+  marginBottom: "var(--ds-space-200, 16px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> p': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: "".concat((0, _gridSizeTimes.default)(3), "px"),
+    marginTop: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBottom: "".concat((0, _gridSizeTimes.default)(2), "px")
+    marginBottom: "var(--ds-space-200, 16px)"
   }
 });
 
@@ -35,16 +33,16 @@ var LoadingWrapper = exports.LoadingWrapper = _styled.default.div({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var Title = exports.Title = _styled.default.div(_typography.h700, {
+var Title = exports.Title = _styled.default.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat((0, _gridSizeTimes.default)(3), "px"),
-  marginTop: 0
+  marginBottom: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var SectionMessageOuter = exports.SectionMessageOuter = _styled.default.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  margin: "".concat((0, _gridSizeTimes.default)(3), "px 0")
+  margin: "var(--ds-space-300, 24px)".concat(" 0")
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -56,7 +54,7 @@ var MainInformationList = exports.MainInformationList = _styled.default.ul({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'p + ul': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: "".concat((0, _gridSizeTimes.default)(1.5), "px")
+    marginTop: "var(--ds-space-150, 12px)"
   }
 });
 
@@ -64,7 +62,7 @@ var MainInformationList = exports.MainInformationList = _styled.default.ul({
 var IconHoverWrapper = exports.IconHoverWrapper = _styled.default.span({
   color: "var(--ds-background-information-bold, ".concat(_colors.B500, ")"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingLeft: "".concat((0, _gridSizeTimes.default)(0.5), "px"),
+  paddingLeft: "var(--ds-space-050, 4px)",
   '&:hover': {
     color: "var(--ds-background-information-bold-hovered, ".concat(_colors.B200, ")")
   }
@@ -75,10 +73,10 @@ var InlineDialogContent = exports.InlineDialogContent = _styled.default.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginLeft: "".concat((0, _gridSizeTimes.default)(3), "px"),
+    marginLeft: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: "".concat((0, _gridSizeTimes.default)(1), "px"),
+    marginTop: "var(--ds-space-100, 8px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    paddingLeft: "".concat((0, _gridSizeTimes.default)(1), "px")
+    paddingLeft: "var(--ds-space-100, 8px)"
   }
 });

package/dist/cjs/components/UserInfo/UserInfo.js

@@ -13,6 +13,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
 var Styled = _interopRequireWildcard(require("./styles"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -31,7 +33,15 @@ var UserInfo = exports.UserInfo = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(Styled.UserInfoOuter, null, /*#__PURE__*/_react.default.createElement(Styled.Avatar, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
         size: "large",
         src: user.avatarUrl
-      })), /*#__PURE__*/_react.default.createElement(Styled.UserDetails, null, /*#__PURE__*/_react.default.createElement(Styled.UserName, null, user.fullName), /*#__PURE__*/_react.default.createElement(Styled.UserEmail, null, user.email)));
+      })), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+        space: "space.050"
+      }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+        size: "small",
+        as: "span"
+      }, user.fullName), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+        size: "small",
+        color: "color.text.subtlest"
+      }, user.email)));
     }
   }]);
 }(_react.default.Component);

package/dist/cjs/components/UserInfo/styles.js

@@ -4,25 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserName = exports.UserInfoOuter = exports.UserEmail = exports.UserDetails = exports.Avatar = void 0;
+exports.UserInfoOuter = exports.Avatar = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _constants = require("@atlaskit/theme/constants");
-var _typography = require("@atlaskit/theme/typography");
-var _colors = require("@atlaskit/theme/colors");
-var _gridSizeTimes = _interopRequireDefault(require("../../util/gridSizeTimes"));
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var baseHeading = function baseHeading(size, lineHeight) {
-  return "\n  font-size: ".concat(size / (0, _constants.fontSize)(), "em;\n  font-style: inherit;\n  line-height: ").concat(lineHeight / size, ";\n");
-};
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var UserInfoOuter = exports.UserInfoOuter = _styled.default.div({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
+  gap: "var(--ds-space-150, 12px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat((0, _gridSizeTimes.default)(2), "px")
+  marginBottom: "var(--ds-space-200, 16px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -30,28 +23,5 @@ var Avatar = exports.Avatar = _styled.default.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: "".concat((0, _gridSizeTimes.default)(2.5), "px"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginRight: "".concat((0, _gridSizeTimes.default)(1), "px")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var UserDetails = exports.UserDetails = _styled.default.div({
-  display: 'flex',
-  flexDirection: 'column',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: "".concat((0, _gridSizeTimes.default)(0.5), "px")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var UserName = exports.UserName = _styled.default.span(_typography.h500, {
-  marginTop: 0
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var UserEmail = exports.UserEmail = _styled.default.span(baseHeading(11, 16), {
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontWeight: 300,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: "".concat((0, _gridSizeTimes.default)(0.5), "px")
+  marginLeft: "var(--ds-space-250, 20px)"
 });

package/dist/es2019/components/DeactivateUserOverviewScreen/styled.js

@@ -1,20 +1,17 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { h700 } from '@atlaskit/theme/typography';
-import gridSizeTimes from '../../util/gridSizeTimes';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Screen = styled.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: `${gridSizeTimes(2)}px`,
+  marginBottom: "var(--ds-space-200, 16px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> p': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: `${gridSizeTimes(3)}px`,
+    marginTop: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBottom: `${gridSizeTimes(2)}px`
+    marginBottom: "var(--ds-space-200, 16px)"
   }
 });
 
@@ -27,10 +24,10 @@ export const LoadingWrapper = styled.div({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export const Title = styled.div(h700, {
+export const Title = styled.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: `${gridSizeTimes(3)}px`,
-  marginTop: 0
+  marginBottom: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -44,5 +41,5 @@ export const MainInformationList = styled.ul({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const AccessibleSitesWrapper = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: `${gridSizeTimes(1.5)}px`
+  marginTop: "var(--ds-space-150, 12px)"
 });

package/dist/es2019/components/DeleteUserContentPreviewScreen/styled.js

@@ -2,8 +2,6 @@
 import styled from '@emotion/styled';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { B50, B400, N50A, N60A } from '@atlaskit/theme/colors';
-import { h700 } from '@atlaskit/theme/typography';
-import gridSizeTimes from '../../util/gridSizeTimes';
 const getSelectedCardColor = props => {
   return props.isSelected && `${`var(--ds-background-selected, ${B50})`}`;
 };
@@ -13,26 +11,26 @@ export const Screen = styled.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: `${gridSizeTimes(4)}px`
+  marginBottom: "var(--ds-space-400, 32px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export const Title = styled.div(h700, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: `${gridSizeTimes(4)}px`,
-  marginTop: 0
+export const Title = styled.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginBottom: "var(--ds-space-400, 32px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const SectionCard = styled.div`
 	position: relative;
 	display: flex;
-	padding: ${gridSizeTimes(2.5)}px;
+	padding: ${"var(--ds-space-250, 20px)"};
 	width: 100%;
 	background-color: ${props => getSelectedCardColor(props)};
 	border-radius: ${borderRadius()}px;
 	box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`};
-	margin-top: ${gridSizeTimes(2)}px;
+	margin-top: ${"var(--ds-space-200, 16px)"};
 `;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -40,9 +38,9 @@ export const Avatar = styled.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: `${gridSizeTimes(2.5)}px`,
+  marginLeft: "var(--ds-space-250, 20px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginRight: `${gridSizeTimes(1)}px`
+  marginRight: "var(--ds-space-100, 8px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -50,7 +48,7 @@ export const UserDetails = styled.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: `${gridSizeTimes(1.5)}px`,
+  marginTop: "var(--ds-space-150, 12px)",
   fontWeight: "var(--ds-font-weight-semibold, 600)",
   color: `var(--ds-text-accent-blue, ${B400})`
 });

package/dist/es2019/components/DeleteUserOverviewScreen/styled.js

@@ -1,21 +1,18 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
 import { B500, B200 } from '@atlaskit/theme/colors';
-import { h700 } from '@atlaskit/theme/typography';
-import gridSizeTimes from '../../util/gridSizeTimes';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Screen = styled.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: `${gridSizeTimes(2)}px`,
+  marginBottom: "var(--ds-space-200, 16px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> p': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: `${gridSizeTimes(3)}px`,
+    marginTop: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBottom: `${gridSizeTimes(2)}px`
+    marginBottom: "var(--ds-space-200, 16px)"
   }
 });
 
@@ -28,16 +25,16 @@ export const LoadingWrapper = styled.div({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export const Title = styled.div(h700, {
+export const Title = styled.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: `${gridSizeTimes(3)}px`,
-  marginTop: 0
+  marginBottom: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const SectionMessageOuter = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  margin: `${gridSizeTimes(3)}px 0`
+  margin: `${"var(--ds-space-300, 24px)"} 0`
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -49,7 +46,7 @@ export const MainInformationList = styled.ul({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'p + ul': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: `${gridSizeTimes(1.5)}px`
+    marginTop: "var(--ds-space-150, 12px)"
   }
 });
 
@@ -57,7 +54,7 @@ export const MainInformationList = styled.ul({
 export const IconHoverWrapper = styled.span({
   color: `var(--ds-background-information-bold, ${B500})`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingLeft: `${gridSizeTimes(0.5)}px`,
+  paddingLeft: "var(--ds-space-050, 4px)",
   '&:hover': {
     color: `var(--ds-background-information-bold-hovered, ${B200})`
   }
@@ -68,10 +65,10 @@ export const InlineDialogContent = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginLeft: `${gridSizeTimes(3)}px`,
+    marginLeft: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: `${gridSizeTimes(1)}px`,
+    marginTop: "var(--ds-space-100, 8px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    paddingLeft: `${gridSizeTimes(1)}px`
+    paddingLeft: "var(--ds-space-100, 8px)"
   }
 });

package/dist/es2019/components/UserInfo/UserInfo.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import Avatar from '@atlaskit/avatar';
+import Heading from '@atlaskit/heading';
+import { Stack, Text } from '@atlaskit/primitives';
 import * as Styled from './styles';
 export class UserInfo extends React.Component {
   render() {
@@ -9,7 +11,15 @@ export class UserInfo extends React.Component {
     return /*#__PURE__*/React.createElement(Styled.UserInfoOuter, null, /*#__PURE__*/React.createElement(Styled.Avatar, null, /*#__PURE__*/React.createElement(Avatar, {
       size: "large",
       src: user.avatarUrl
-    })), /*#__PURE__*/React.createElement(Styled.UserDetails, null, /*#__PURE__*/React.createElement(Styled.UserName, null, user.fullName), /*#__PURE__*/React.createElement(Styled.UserEmail, null, user.email)));
+    })), /*#__PURE__*/React.createElement(Stack, {
+      space: "space.050"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      size: "small",
+      as: "span"
+    }, user.fullName), /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: "color.text.subtlest"
+    }, user.email)));
   }
 }
 export default UserInfo;

package/dist/es2019/components/UserInfo/styles.js

@@ -1,22 +1,13 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { fontSize } from '@atlaskit/theme/constants';
-import { h500 } from '@atlaskit/theme/typography';
-import { N200 } from '@atlaskit/theme/colors';
-import gridSizeTimes from '../../util/gridSizeTimes';
-const baseHeading = (size, lineHeight) => `
-  font-size: ${size / fontSize()}em;
-  font-style: inherit;
-  line-height: ${lineHeight / size};
-`;
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const UserInfoOuter = styled.div({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
+  gap: "var(--ds-space-150, 12px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: `${gridSizeTimes(2)}px`
+  marginBottom: "var(--ds-space-200, 16px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -24,28 +15,5 @@ export const Avatar = styled.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: `${gridSizeTimes(2.5)}px`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginRight: `${gridSizeTimes(1)}px`
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const UserDetails = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: `${gridSizeTimes(0.5)}px`
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export const UserName = styled.span(h500, {
-  marginTop: 0
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export const UserEmail = styled.span(baseHeading(11, 16), {
-  color: `var(--ds-text-subtlest, ${N200})`,
-  fontWeight: 300,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: `${gridSizeTimes(0.5)}px`
+  marginLeft: "var(--ds-space-250, 20px)"
 });

package/dist/esm/components/DeactivateUserOverviewScreen/styled.js

@@ -1,20 +1,17 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { h700 } from '@atlaskit/theme/typography';
-import gridSizeTimes from '../../util/gridSizeTimes';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var Screen = styled.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat(gridSizeTimes(2), "px"),
+  marginBottom: "var(--ds-space-200, 16px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> p': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: "".concat(gridSizeTimes(3), "px"),
+    marginTop: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBottom: "".concat(gridSizeTimes(2), "px")
+    marginBottom: "var(--ds-space-200, 16px)"
   }
 });
 
@@ -27,10 +24,10 @@ export var LoadingWrapper = styled.div({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export var Title = styled.div(h700, {
+export var Title = styled.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat(gridSizeTimes(3), "px"),
-  marginTop: 0
+  marginBottom: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -44,5 +41,5 @@ export var MainInformationList = styled.ul({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var AccessibleSitesWrapper = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: "".concat(gridSizeTimes(1.5), "px")
+  marginTop: "var(--ds-space-150, 12px)"
 });

package/dist/esm/components/DeleteUserContentPreviewScreen/styled.js

@@ -4,8 +4,6 @@ var _templateObject;
 import styled from '@emotion/styled';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { B50, B400, N50A, N60A } from '@atlaskit/theme/colors';
-import { h700 } from '@atlaskit/theme/typography';
-import gridSizeTimes from '../../util/gridSizeTimes';
 var getSelectedCardColor = function getSelectedCardColor(props) {
   return props.isSelected && "".concat("var(--ds-background-selected, ".concat(B50, ")"));
 };
@@ -15,29 +13,29 @@ export var Screen = styled.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat(gridSizeTimes(4), "px")
+  marginBottom: "var(--ds-space-400, 32px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export var Title = styled.div(h700, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat(gridSizeTimes(4), "px"),
-  marginTop: 0
+export var Title = styled.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginBottom: "var(--ds-space-400, 32px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var SectionCard = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\tdisplay: flex;\n\tpadding: ", "px;\n\twidth: 100%;\n\tbackground-color: ", ";\n\tborder-radius: ", "px;\n\tbox-shadow: ", ";\n\tmargin-top: ", "px;\n"])), gridSizeTimes(2.5), function (props) {
+export var SectionCard = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\tdisplay: flex;\n\tpadding: ", ";\n\twidth: 100%;\n\tbackground-color: ", ";\n\tborder-radius: ", "px;\n\tbox-shadow: ", ";\n\tmargin-top: ", ";\n"])), "var(--ds-space-250, 20px)", function (props) {
   return getSelectedCardColor(props);
-}, borderRadius(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), gridSizeTimes(2));
+}, borderRadius(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-200, 16px)");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var Avatar = styled.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: "".concat(gridSizeTimes(2.5), "px"),
+  marginLeft: "var(--ds-space-250, 20px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginRight: "".concat(gridSizeTimes(1), "px")
+  marginRight: "var(--ds-space-100, 8px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -45,7 +43,7 @@ export var UserDetails = styled.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: "".concat(gridSizeTimes(1.5), "px"),
+  marginTop: "var(--ds-space-150, 12px)",
   fontWeight: "var(--ds-font-weight-semibold, 600)",
   color: "var(--ds-text-accent-blue, ".concat(B400, ")")
 });

package/dist/esm/components/DeleteUserOverviewScreen/styled.js

@@ -1,21 +1,18 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
 import { B500, B200 } from '@atlaskit/theme/colors';
-import { h700 } from '@atlaskit/theme/typography';
-import gridSizeTimes from '../../util/gridSizeTimes';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var Screen = styled.div({
   width: '100%',
   maxWidth: '640px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat(gridSizeTimes(2), "px"),
+  marginBottom: "var(--ds-space-200, 16px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> p': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: "".concat(gridSizeTimes(3), "px"),
+    marginTop: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBottom: "".concat(gridSizeTimes(2), "px")
+    marginBottom: "var(--ds-space-200, 16px)"
   }
 });
 
@@ -28,16 +25,16 @@ export var LoadingWrapper = styled.div({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export var Title = styled.div(h700, {
+export var Title = styled.div({
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat(gridSizeTimes(3), "px"),
-  marginTop: 0
+  marginBottom: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var SectionMessageOuter = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  margin: "".concat(gridSizeTimes(3), "px 0")
+  margin: "var(--ds-space-300, 24px)".concat(" 0")
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -49,7 +46,7 @@ export var MainInformationList = styled.ul({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'p + ul': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: "".concat(gridSizeTimes(1.5), "px")
+    marginTop: "var(--ds-space-150, 12px)"
   }
 });
 
@@ -57,7 +54,7 @@ export var MainInformationList = styled.ul({
 export var IconHoverWrapper = styled.span({
   color: "var(--ds-background-information-bold, ".concat(B500, ")"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingLeft: "".concat(gridSizeTimes(0.5), "px"),
+  paddingLeft: "var(--ds-space-050, 4px)",
   '&:hover': {
     color: "var(--ds-background-information-bold-hovered, ".concat(B200, ")")
   }
@@ -68,10 +65,10 @@ export var InlineDialogContent = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginLeft: "".concat(gridSizeTimes(3), "px"),
+    marginLeft: "var(--ds-space-300, 24px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: "".concat(gridSizeTimes(1), "px"),
+    marginTop: "var(--ds-space-100, 8px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    paddingLeft: "".concat(gridSizeTimes(1), "px")
+    paddingLeft: "var(--ds-space-100, 8px)"
   }
 });

package/dist/esm/components/UserInfo/UserInfo.js

@@ -7,6 +7,8 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import Avatar from '@atlaskit/avatar';
+import Heading from '@atlaskit/heading';
+import { Stack, Text } from '@atlaskit/primitives';
 import * as Styled from './styles';
 export var UserInfo = /*#__PURE__*/function (_React$Component) {
   function UserInfo() {
@@ -21,7 +23,15 @@ export var UserInfo = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Styled.UserInfoOuter, null, /*#__PURE__*/React.createElement(Styled.Avatar, null, /*#__PURE__*/React.createElement(Avatar, {
         size: "large",
         src: user.avatarUrl
-      })), /*#__PURE__*/React.createElement(Styled.UserDetails, null, /*#__PURE__*/React.createElement(Styled.UserName, null, user.fullName), /*#__PURE__*/React.createElement(Styled.UserEmail, null, user.email)));
+      })), /*#__PURE__*/React.createElement(Stack, {
+        space: "space.050"
+      }, /*#__PURE__*/React.createElement(Heading, {
+        size: "small",
+        as: "span"
+      }, user.fullName), /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        color: "color.text.subtlest"
+      }, user.email)));
     }
   }]);
 }(React.Component);

package/dist/esm/components/UserInfo/styles.js

@@ -1,20 +1,13 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { fontSize } from '@atlaskit/theme/constants';
-import { h500 } from '@atlaskit/theme/typography';
-import { N200 } from '@atlaskit/theme/colors';
-import gridSizeTimes from '../../util/gridSizeTimes';
-var baseHeading = function baseHeading(size, lineHeight) {
-  return "\n  font-size: ".concat(size / fontSize(), "em;\n  font-style: inherit;\n  line-height: ").concat(lineHeight / size, ";\n");
-};
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var UserInfoOuter = styled.div({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
+  gap: "var(--ds-space-150, 12px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginBottom: "".concat(gridSizeTimes(2), "px")
+  marginBottom: "var(--ds-space-200, 16px)"
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -22,28 +15,5 @@ export var Avatar = styled.div({
   display: 'flex',
   flexDirection: 'column',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: "".concat(gridSizeTimes(2.5), "px"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginRight: "".concat(gridSizeTimes(1), "px")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var UserDetails = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: "".concat(gridSizeTimes(0.5), "px")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export var UserName = styled.span(h500, {
-  marginTop: 0
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export var UserEmail = styled.span(baseHeading(11, 16), {
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontWeight: 300,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginTop: "".concat(gridSizeTimes(0.5), "px")
+  marginLeft: "var(--ds-space-250, 20px)"
 });

package/dist/types/components/UserInfo/styles.d.ts

@@ -7,15 +7,3 @@ export declare const Avatar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const UserDetails: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const UserName: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const UserEmail: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/types-ts4.5/components/UserInfo/styles.d.ts

@@ -7,15 +7,3 @@ export declare const Avatar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const UserDetails: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const UserName: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const UserEmail: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/focused-task-close-account",
-	"version": "2.3.6",
+	"version": "2.3.8",
 	"description": "This package contains all of the UI components needed to assemble the focused tasks for deactivating and deleting users' accounts in accordance with the GDPR \"Right to be forgotten\".",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,12 +34,13 @@
 		"@atlaskit/avatar": "^21.17.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/drawer": "^9.2.0",
+		"@atlaskit/heading": "^4.0.0",
 		"@atlaskit/icon": "^23.1.0",
 		"@atlaskit/inline-dialog": "^16.0.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/section-message": "^6.8.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tokens": "^2.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/styled": "^11.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"