@atlaskit/profilecard 18.1.0 → 18.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/profilecard
 
+## 18.1.2
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
+## 18.1.1
+
+### Patch Changes
+
+- [`60b1c9b0f05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60b1c9b0f05) - Upgrade profilecard to the latest major version of emotion
+
 ## 18.1.0
 
 ### Minor Changes

package/dist/cjs/components/Error/ErrorIllustration.js

@@ -9,8 +9,6 @@ exports.ErrorIllustration = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _tokens = require("@atlaskit/tokens");
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var ErrorIllustration = function ErrorIllustration() {
   return /*#__PURE__*/_react.default.createElement("svg", {
@@ -23,7 +21,7 @@ var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: (0, _tokens.token)('elevation.surface.overlay', 'white'),
+    fill: "var(--ds-surface-overlay, white)",
     fillOpacity: "0.01"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

package/dist/cjs/components/User/ProfileCard.js

@@ -29,8 +29,6 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _messages = _interopRequireDefault(require("../../messages"));
 
 var _Card = require("../../styled/Card");
@@ -160,7 +158,7 @@ var ProfilecardInternal = function ProfilecardInternal(props) {
   }, /*#__PURE__*/_react.default.createElement(_Card.ProfileImage, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
     size: "xlarge",
     src: status !== 'closed' ? props.avatarUrl : undefined,
-    borderColor: (0, _tokens.token)('elevation.shadow.overlay', _colors.N0)
+    borderColor: "var(--ds-shadow-overlay, ".concat(_colors.N0, ")")
   })), /*#__PURE__*/_react.default.createElement(_Card.CardContent, null, /*#__PURE__*/_react.default.createElement(_ProfileCardDetails.ProfileCardDetails, (0, _extends2.default)({}, props, {
     status: status,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration

package/dist/cjs/styled/Card.js

@@ -13,14 +13,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("./constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
@@ -44,9 +42,9 @@ exports.ProfileImage = ProfileImage;
 var ActionsFlexSpacer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n"])));
 
 exports.ActionsFlexSpacer = ActionsFlexSpacer;
-var kudosButtonAnimationTransformation = (0, _core.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["{\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n}"])));
+var kudosButtonAnimationTransformation = (0, _react2.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["{\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n}"])));
 
-var KudosBlobAnimationStyle = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), kudosButtonAnimationTransformation, (0, _tokens.token)('color.background.information.pressed', '#85B8FF'), (0, _tokens.token)('color.background.discovery.pressed', '#B8ACF6'));
+var KudosBlobAnimationStyle = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
 
 exports.KudosBlobAnimationStyle = KudosBlobAnimationStyle;
 

package/dist/cjs/styled/Error.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("./constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -39,6 +37,6 @@ var TeamErrorTitle = _styled.default.p(_templateObject4 || (_templateObject4 = (
 
 exports.TeamErrorTitle = TeamErrorTitle;
 
-var TeamErrorText = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)() * 1);
+var TeamErrorText = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _constants.gridSize)() * 1);
 
 exports.TeamErrorText = TeamErrorText;

package/dist/cjs/styled/TeamCard.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("./constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
@@ -32,7 +30,7 @@ var CardWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0
 exports.CardWrapper = CardWrapper;
 
 var CardHeader = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  box-sizing: content-box;\n  height: ", "px;\n"])), function (props) {
-  return props.isLoading ? (0, _tokens.token)('color.background.neutral', _colors.N20) : props.image ? "url('".concat(props.image, "')") : _constants2.teamHeaderBgColor;
+  return props.isLoading ? "var(--ds-background-neutral, ".concat(_colors.N20, ")") : props.image ? "url('".concat(props.image, "')") : _constants2.teamHeaderBgColor;
 }, (0, _constants.gridSize)() * 16);
 
 exports.CardHeader = CardHeader;
@@ -45,7 +43,7 @@ var TeamName = _styled.default.h6(_templateObject5 || (_templateObject5 = (0, _t
 
 exports.TeamName = TeamName;
 
-var MemberCount = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)() * 0.5);
+var MemberCount = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _constants.gridSize)() * 0.5);
 
 exports.MemberCount = MemberCount;
 
@@ -61,7 +59,7 @@ var Description = _styled.default.span(_templateObject9 || (_templateObject9 = (
 
 exports.Description = Description;
 
-var ActionButtons = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), (0, _tokens.token)('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)'));
+var ActionButtons = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))");
 
 exports.ActionButtons = ActionButtons;
 

package/dist/cjs/styled/constants.js

@@ -11,79 +11,77 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
 
 var bgColor = (0, _components.themed)({
-  light: (0, _tokens.token)('elevation.surface.overlay', colors.N0),
-  dark: (0, _tokens.token)('elevation.surface.overlay', colors.DN50)
+  light: "var(--ds-surface-overlay, ".concat(colors.N0, ")"),
+  dark: "var(--ds-surface-overlay, ".concat(colors.DN50, ")")
 });
 exports.bgColor = bgColor;
 var headerBgColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.brand.bold', colors.B500),
-  dark: (0, _tokens.token)('color.background.brand.bold', colors.B100)
+  light: "var(--ds-background-brand-bold, ".concat(colors.B500, ")"),
+  dark: "var(--ds-background-brand-bold, ".concat(colors.B100, ")")
 });
 exports.headerBgColor = headerBgColor;
 var teamHeaderBgColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.neutral', colors.N50),
-  dark: (0, _tokens.token)('color.background.neutral', colors.N50)
+  light: "var(--ds-background-neutral, ".concat(colors.N50, ")"),
+  dark: "var(--ds-background-neutral, ".concat(colors.N50, ")")
 });
 exports.teamHeaderBgColor = teamHeaderBgColor;
 var headerBgColorDisabledUser = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.disabled', colors.N30),
-  dark: (0, _tokens.token)('color.background.disabled', colors.B100)
+  light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
+  dark: "var(--ds-background-disabled, ".concat(colors.B100, ")")
 });
 exports.headerBgColorDisabledUser = headerBgColorDisabledUser;
 var headerTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.inverse', colors.N0),
-  dark: (0, _tokens.token)('color.text.inverse', colors.N0)
+  light: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
+  dark: "var(--ds-text-inverse, ".concat(colors.N0, ")")
 });
 exports.headerTextColor = headerTextColor;
 var headerTextColorInactive = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text', colors.N800),
-  dark: (0, _tokens.token)('color.text', colors.N0)
+  light: "var(--ds-text, ".concat(colors.N800, ")"),
+  dark: "var(--ds-text, ".concat(colors.N0, ")")
 });
 exports.headerTextColorInactive = headerTextColorInactive;
 var appLabelBgColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.neutral', colors.N20),
-  dark: (0, _tokens.token)('color.background.neutral', colors.N20)
+  light: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+  dark: "var(--ds-background-neutral, ".concat(colors.N20, ")")
 });
 exports.appLabelBgColor = appLabelBgColor;
 var appLabelTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text', colors.N500),
-  dark: (0, _tokens.token)('color.text', colors.N500)
+  light: "var(--ds-text, ".concat(colors.N500, ")"),
+  dark: "var(--ds-text, ".concat(colors.N500, ")")
 });
 exports.appLabelTextColor = appLabelTextColor;
 var labelTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text', colors.N800),
-  dark: (0, _tokens.token)('color.text', colors.DN900)
+  light: "var(--ds-text, ".concat(colors.N800, ")"),
+  dark: "var(--ds-text, ".concat(colors.DN900, ")")
 });
 exports.labelTextColor = labelTextColor;
 var labelIconColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.subtlest', colors.N60),
-  dark: (0, _tokens.token)('color.text.subtlest', colors.DN100)
+  light: "var(--ds-text-subtlest, ".concat(colors.N60, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(colors.DN100, ")")
 });
 exports.labelIconColor = labelIconColor;
 var errorIconColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.disabled', colors.N90),
-  dark: (0, _tokens.token)('color.text.disabled', colors.DN90)
+  light: "var(--ds-text-disabled, ".concat(colors.N90, ")"),
+  dark: "var(--ds-text-disabled, ".concat(colors.DN90, ")")
 });
 exports.errorIconColor = errorIconColor;
 var errorTitleColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text', colors.N800),
-  dark: (0, _tokens.token)('color.text', colors.DN800)
+  light: "var(--ds-text, ".concat(colors.N800, ")"),
+  dark: "var(--ds-text, ".concat(colors.DN800, ")")
 });
 exports.errorTitleColor = errorTitleColor;
 var errorTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.subtlest', colors.N90),
-  dark: (0, _tokens.token)('color.text.subtlest', colors.DN90)
+  light: "var(--ds-text-subtlest, ".concat(colors.N90, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(colors.DN90, ")")
 });
 exports.errorTextColor = errorTextColor;
 var boxShadow = (0, _components.themed)({
-  light: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A)),
-  dark: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A))
+  light: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A), ")"),
+  dark: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A), ")")
 });
 exports.boxShadow = boxShadow;

package/dist/cjs/util/analytics.js

@@ -59,7 +59,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "18.1.0"
+      packageVersion: "18.1.2"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "18.1.0"
+	"version": "18.1.2"
 }

package/dist/es2019/components/Error/ErrorIllustration.js

@@ -1,6 +1,5 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
-import { token } from '@atlaskit/tokens';
 export const ErrorIllustration = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "42",
@@ -12,7 +11,7 @@ export const ErrorIllustration = () => {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: token('elevation.surface.overlay', 'white'),
+    fill: "var(--ds-surface-overlay, white)",
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

package/dist/es2019/components/User/ProfileCard.js

@@ -6,7 +6,6 @@ import Avatar from '@atlaskit/avatar';
 import Button from '@atlaskit/button/custom-theme-button';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import messages from '../../messages';
 import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, CardContainer, CardContent, CardWrapper, KudosBlobAnimation, ProfileImage, SpinnerContainer } from '../../styled/Card';
 import { actionClicked, fireEvent, profileCardRendered } from '../../util/analytics';
@@ -120,7 +119,7 @@ export const ProfilecardInternal = props => {
   }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
     size: "xlarge",
     src: status !== 'closed' ? props.avatarUrl : undefined,
-    borderColor: token('elevation.shadow.overlay', N0)
+    borderColor: `var(--ds-shadow-overlay, ${N0})`
   })), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(ProfileCardDetails, _extends({}, props, {
     status: status,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration

package/dist/es2019/styled/Card.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { appLabelBgColor, appLabelTextColor, bgColor, boxShadow, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from './constants';
 
 const getFullNameMargin = props => props.noMeta ? `${gridSize() * 4.5}px 0 ${gridSize() * 1.5}px 0` : `${gridSize() * 1.5}px 0 0 0`;
@@ -37,8 +36,8 @@ export const KudosBlobAnimationStyle = styled.div`
   animation-duration: 3s;
   background-image: radial-gradient(
     circle,
-    ${token('color.background.information.pressed', '#85B8FF')} 0%,
-    ${token('color.background.discovery.pressed', '#B8ACF6')} 25%,
+    ${"var(--ds-background-information-pressed, #85B8FF)"} 0%,
+    ${"var(--ds-background-discovery-pressed, #B8ACF6)"} 25%,
     transparent 50%
   );
   overflow: hidden;

package/dist/es2019/styled/Error.js

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h400 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { errorIconColor, errorTextColor, errorTitleColor } from './constants';
 export const ErrorWrapper = styled.div`
   text-align: center;
@@ -21,6 +20,6 @@ export const TeamErrorTitle = styled.p`
   ${h400};
 `;
 export const TeamErrorText = styled.p`
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   margin-top: ${gridSize() * 1}px;
 `;

package/dist/es2019/styled/TeamCard.js

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { bgColor, teamHeaderBgColor } from './constants';
 export const CardTriggerWrapper = styled.div`
   display: inherit;
@@ -16,7 +15,7 @@ export const CardWrapper = styled.div`
   -moz-osx-font-smoothing: grayscale;
 `;
 export const CardHeader = styled.div`
-  background-color: ${props => props.isLoading ? token('color.background.neutral', N20) : props.image ? `url('${props.image}')` : teamHeaderBgColor};
+  background-color: ${props => props.isLoading ? `var(--ds-background-neutral, ${N20})` : props.image ? `url('${props.image}')` : teamHeaderBgColor};
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -39,7 +38,7 @@ export const TeamName = styled.h6`
   -webkit-box-orient: vertical;
 `;
 export const MemberCount = styled.div`
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   margin-top: ${gridSize() * 0.5}px;
 `;
 export const AvatarSection = styled.div`
@@ -63,7 +62,7 @@ export const ActionButtons = styled.div`
   display: flex;
   justify-content: space-between;
   margin: ${gridSize() * 3}px -${gridSize() * 3}px 0 -${gridSize()}px;
-  background-color: ${token('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)')};
+  background-color: ${"var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))"};
 `;
 export const WrappedButton = styled.div`
   flex-basis: 0;

package/dist/es2019/styled/constants.js

@@ -1,59 +1,58 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export const bgColor = themed({
-  light: token('elevation.surface.overlay', colors.N0),
-  dark: token('elevation.surface.overlay', colors.DN50)
+  light: `var(--ds-surface-overlay, ${colors.N0})`,
+  dark: `var(--ds-surface-overlay, ${colors.DN50})`
 });
 export const headerBgColor = themed({
-  light: token('color.background.brand.bold', colors.B500),
-  dark: token('color.background.brand.bold', colors.B100)
+  light: `var(--ds-background-brand-bold, ${colors.B500})`,
+  dark: `var(--ds-background-brand-bold, ${colors.B100})`
 });
 export const teamHeaderBgColor = themed({
-  light: token('color.background.neutral', colors.N50),
-  dark: token('color.background.neutral', colors.N50)
+  light: `var(--ds-background-neutral, ${colors.N50})`,
+  dark: `var(--ds-background-neutral, ${colors.N50})`
 });
 export const headerBgColorDisabledUser = themed({
-  light: token('color.background.disabled', colors.N30),
-  dark: token('color.background.disabled', colors.B100)
+  light: `var(--ds-background-disabled, ${colors.N30})`,
+  dark: `var(--ds-background-disabled, ${colors.B100})`
 });
 export const headerTextColor = themed({
-  light: token('color.text.inverse', colors.N0),
-  dark: token('color.text.inverse', colors.N0)
+  light: `var(--ds-text-inverse, ${colors.N0})`,
+  dark: `var(--ds-text-inverse, ${colors.N0})`
 });
 export const headerTextColorInactive = themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.N0)
+  light: `var(--ds-text, ${colors.N800})`,
+  dark: `var(--ds-text, ${colors.N0})`
 });
 export const appLabelBgColor = themed({
-  light: token('color.background.neutral', colors.N20),
-  dark: token('color.background.neutral', colors.N20)
+  light: `var(--ds-background-neutral, ${colors.N20})`,
+  dark: `var(--ds-background-neutral, ${colors.N20})`
 });
 export const appLabelTextColor = themed({
-  light: token('color.text', colors.N500),
-  dark: token('color.text', colors.N500)
+  light: `var(--ds-text, ${colors.N500})`,
+  dark: `var(--ds-text, ${colors.N500})`
 });
 export const labelTextColor = themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.DN900)
+  light: `var(--ds-text, ${colors.N800})`,
+  dark: `var(--ds-text, ${colors.DN900})`
 });
 export const labelIconColor = themed({
-  light: token('color.text.subtlest', colors.N60),
-  dark: token('color.text.subtlest', colors.DN100)
+  light: `var(--ds-text-subtlest, ${colors.N60})`,
+  dark: `var(--ds-text-subtlest, ${colors.DN100})`
 });
 export const errorIconColor = themed({
-  light: token('color.text.disabled', colors.N90),
-  dark: token('color.text.disabled', colors.DN90)
+  light: `var(--ds-text-disabled, ${colors.N90})`,
+  dark: `var(--ds-text-disabled, ${colors.DN90})`
 });
 export const errorTitleColor = themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.DN800)
+  light: `var(--ds-text, ${colors.N800})`,
+  dark: `var(--ds-text, ${colors.DN800})`
 });
 export const errorTextColor = themed({
-  light: token('color.text.subtlest', colors.N90),
-  dark: token('color.text.subtlest', colors.DN90)
+  light: `var(--ds-text-subtlest, ${colors.N90})`,
+  dark: `var(--ds-text-subtlest, ${colors.DN90})`
 });
 export const boxShadow = themed({
-  light: token('elevation.shadow.overlay', `0 4px 8px -2px ${colors.N50A}, 0 0 1px ${colors.N60A}`),
-  dark: token('elevation.shadow.overlay', `0 4px 8px -2px ${colors.DN50A}, 0 0 1px ${colors.DN60A}`)
+  light: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${colors.N50A}, 0 0 1px ${colors.N60A}`})`,
+  dark: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${colors.DN50A}, 0 0 1px ${colors.DN60A}`})`
 });

package/dist/es2019/util/analytics.js

@@ -38,7 +38,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "18.1.0",
+    packageVersion: "18.1.2",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "18.1.0"
+	"version": "18.1.2"
 }

package/dist/esm/components/Error/ErrorIllustration.js

@@ -1,6 +1,5 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
-import { token } from '@atlaskit/tokens';
 export var ErrorIllustration = function ErrorIllustration() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "42",
@@ -12,7 +11,7 @@ export var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: token('elevation.surface.overlay', 'white'),
+    fill: "var(--ds-surface-overlay, white)",
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

package/dist/esm/components/User/ProfileCard.js

@@ -8,7 +8,6 @@ import Avatar from '@atlaskit/avatar';
 import Button from '@atlaskit/button/custom-theme-button';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import messages from '../../messages';
 import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, CardContainer, CardContent, CardWrapper, KudosBlobAnimation, ProfileImage, SpinnerContainer } from '../../styled/Card';
 import { actionClicked, fireEvent, profileCardRendered } from '../../util/analytics';
@@ -126,7 +125,7 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
   }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
     size: "xlarge",
     src: status !== 'closed' ? props.avatarUrl : undefined,
-    borderColor: token('elevation.shadow.overlay', N0)
+    borderColor: "var(--ds-shadow-overlay, ".concat(N0, ")")
   })), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(ProfileCardDetails, _extends({}, props, {
     status: status,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration

package/dist/esm/styled/Card.js

@@ -4,10 +4,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 
 import React from 'react';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { appLabelBgColor, appLabelTextColor, bgColor, boxShadow, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from './constants';
 
 var getFullNameMargin = function getFullNameMargin(props) {
@@ -19,7 +18,7 @@ export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _tag
 export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
 export var ActionsFlexSpacer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n"])));
 var kudosButtonAnimationTransformation = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["{\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n}"])));
-export var KudosBlobAnimationStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), kudosButtonAnimationTransformation, token('color.background.information.pressed', '#85B8FF'), token('color.background.discovery.pressed', '#B8ACF6'));
+export var KudosBlobAnimationStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
 export var KudosBlobAnimation = function KudosBlobAnimation(props) {
   return /*#__PURE__*/React.createElement(KudosBlobAnimationStyle, _extends({
     className: "kudos-blob-animation"

package/dist/esm/styled/Error.js

@@ -6,10 +6,9 @@ import styled from '@emotion/styled';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h400 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { errorIconColor, errorTextColor, errorTitleColor } from './constants';
 export var ErrorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  padding: ", "px;\n  color: ", ";\n"])), gridSize() * 3, errorIconColor);
 export var ErrorTitle = styled.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: ", "px;\n  margin: ", "px 0;\n"])), errorTitleColor, gridSize() * 3, gridSize);
 export var ErrorText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), errorTextColor);
 export var TeamErrorTitle = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), h400);
-export var TeamErrorText = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.subtlest', N200), gridSize() * 1);
+export var TeamErrorText = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), gridSize() * 1);

package/dist/esm/styled/TeamCard.js

@@ -6,20 +6,19 @@ import styled from '@emotion/styled';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { bgColor, teamHeaderBgColor } from './constants';
 export var CardTriggerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inherit;\n"])));
 export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"])), bgColor, borderRadius, gridSize() * 40);
 export var CardHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  box-sizing: content-box;\n  height: ", "px;\n"])), function (props) {
-  return props.isLoading ? token('color.background.neutral', N20) : props.image ? "url('".concat(props.image, "')") : teamHeaderBgColor;
+  return props.isLoading ? "var(--ds-background-neutral, ".concat(N20, ")") : props.image ? "url('".concat(props.image, "')") : teamHeaderBgColor;
 }, gridSize() * 16);
 export var CardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  min-height: ", "px;\n"])), gridSize() * 3, gridSize() * 13);
 export var TeamName = styled.h6(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  text-transform: none;\n  overflow: hidden;\n  max-height: 48px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])), h600);
-export var MemberCount = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.subtlest', N200), gridSize() * 0.5);
+export var MemberCount = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), gridSize() * 0.5);
 export var AvatarSection = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  margin-left: -2px;\n"])), gridSize() * 2);
 export var DescriptionWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  align-items: center;\n  display: flex;\n"])), gridSize() * 2);
 export var Description = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  max-height: 60px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
-export var ActionButtons = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), gridSize() * 3, gridSize() * 3, gridSize(), token('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)'));
+export var ActionButtons = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), gridSize() * 3, gridSize() * 3, gridSize(), "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))");
 export var WrappedButton = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex-basis: 0;\n  flex-grow: 1;\n  margin-left: 8px;\n"])));
 export var MoreButton = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n"])));
 export var LoadingWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin-top: ", "px;\n"])), gridSize() * 5); // export const LoadingTeamName = styled.div`

package/dist/esm/styled/constants.js

@@ -1,59 +1,58 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export var bgColor = themed({
-  light: token('elevation.surface.overlay', colors.N0),
-  dark: token('elevation.surface.overlay', colors.DN50)
+  light: "var(--ds-surface-overlay, ".concat(colors.N0, ")"),
+  dark: "var(--ds-surface-overlay, ".concat(colors.DN50, ")")
 });
 export var headerBgColor = themed({
-  light: token('color.background.brand.bold', colors.B500),
-  dark: token('color.background.brand.bold', colors.B100)
+  light: "var(--ds-background-brand-bold, ".concat(colors.B500, ")"),
+  dark: "var(--ds-background-brand-bold, ".concat(colors.B100, ")")
 });
 export var teamHeaderBgColor = themed({
-  light: token('color.background.neutral', colors.N50),
-  dark: token('color.background.neutral', colors.N50)
+  light: "var(--ds-background-neutral, ".concat(colors.N50, ")"),
+  dark: "var(--ds-background-neutral, ".concat(colors.N50, ")")
 });
 export var headerBgColorDisabledUser = themed({
-  light: token('color.background.disabled', colors.N30),
-  dark: token('color.background.disabled', colors.B100)
+  light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
+  dark: "var(--ds-background-disabled, ".concat(colors.B100, ")")
 });
 export var headerTextColor = themed({
-  light: token('color.text.inverse', colors.N0),
-  dark: token('color.text.inverse', colors.N0)
+  light: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
+  dark: "var(--ds-text-inverse, ".concat(colors.N0, ")")
 });
 export var headerTextColorInactive = themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.N0)
+  light: "var(--ds-text, ".concat(colors.N800, ")"),
+  dark: "var(--ds-text, ".concat(colors.N0, ")")
 });
 export var appLabelBgColor = themed({
-  light: token('color.background.neutral', colors.N20),
-  dark: token('color.background.neutral', colors.N20)
+  light: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+  dark: "var(--ds-background-neutral, ".concat(colors.N20, ")")
 });
 export var appLabelTextColor = themed({
-  light: token('color.text', colors.N500),
-  dark: token('color.text', colors.N500)
+  light: "var(--ds-text, ".concat(colors.N500, ")"),
+  dark: "var(--ds-text, ".concat(colors.N500, ")")
 });
 export var labelTextColor = themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.DN900)
+  light: "var(--ds-text, ".concat(colors.N800, ")"),
+  dark: "var(--ds-text, ".concat(colors.DN900, ")")
 });
 export var labelIconColor = themed({
-  light: token('color.text.subtlest', colors.N60),
-  dark: token('color.text.subtlest', colors.DN100)
+  light: "var(--ds-text-subtlest, ".concat(colors.N60, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(colors.DN100, ")")
 });
 export var errorIconColor = themed({
-  light: token('color.text.disabled', colors.N90),
-  dark: token('color.text.disabled', colors.DN90)
+  light: "var(--ds-text-disabled, ".concat(colors.N90, ")"),
+  dark: "var(--ds-text-disabled, ".concat(colors.DN90, ")")
 });
 export var errorTitleColor = themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.DN800)
+  light: "var(--ds-text, ".concat(colors.N800, ")"),
+  dark: "var(--ds-text, ".concat(colors.DN800, ")")
 });
 export var errorTextColor = themed({
-  light: token('color.text.subtlest', colors.N90),
-  dark: token('color.text.subtlest', colors.DN90)
+  light: "var(--ds-text-subtlest, ".concat(colors.N90, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(colors.DN90, ")")
 });
 export var boxShadow = themed({
-  light: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A)),
-  dark: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A))
+  light: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A), ")"),
+  dark: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A), ")")
 });

package/dist/esm/util/analytics.js

@@ -48,7 +48,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "18.1.0"
+      packageVersion: "18.1.2"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "18.1.0"
+	"version": "18.1.2"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "18.1.0",
+  "version": "18.1.2",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.13.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",
     "date-fns": "^2.17.0",
     "lodash": "^4.17.21",