@atlaskit/avatar 21.3.3 → 21.3.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/avatar
 
+## 21.3.4
+
+### Patch Changes
+
+- [`abf69e9a4f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abf69e9a4f6) - Removes usage of deprecated theme mixins in favor of static token / color usage.
+
 ## 21.3.3
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -22,7 +22,7 @@ var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.3";
+var packageVersion = "21.3.4";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/cjs/AvatarImage.js

@@ -15,7 +15,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat((0, _colors.background)(), ")");
+var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
 exports.ICON_BACKGROUND = ICON_BACKGROUND;
 var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
 exports.ICON_COLOR = ICON_COLOR;

package/dist/cjs/AvatarItem.js

@@ -32,7 +32,7 @@ var getStyles = function getStyles(css, _ref) {
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
   return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };
 

package/dist/cjs/IconWrapper.js

@@ -28,7 +28,7 @@ var iconWrapperStyles = (0, _react.css)({
  */
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
-    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$bgColor,
+    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _ref$bgColor,
     children = _ref.children,
     label = _ref.label;
   return (0, _react.jsx)("span", {

package/dist/cjs/Presence.js

@@ -22,11 +22,11 @@ var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, n
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
 }));
 var FocusIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("path", {
-  fill: "var(--ds-icon-discovery, ".concat((0, _colors.purple)(), ")"),
+  fill: "var(--ds-icon-discovery, ".concat(_colors.P300, ")"),
   d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
 }));
 var OfflineIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("path", {

package/dist/cjs/Status.js

@@ -22,7 +22,7 @@ var ApprovedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragmen
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
 }));
 var DeclinedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
@@ -31,7 +31,7 @@ var DeclinedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragmen
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
 }));
 var LockedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.3",
+	"version": "21.3.4",
 	"sideEffects": false
 }

package/dist/es2019/Avatar.js

@@ -10,7 +10,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.3.3";
+const packageVersion = "21.3.4";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/es2019/AvatarImage.js

@@ -4,9 +4,9 @@ import { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
-import { background, N90 } from '@atlaskit/theme/colors';
+import { N0, N90 } from '@atlaskit/theme/colors';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${background()})`;
+export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
 export const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
 const avatarDefaultIconStyles = css({
   display: 'block',

package/dist/es2019/AvatarItem.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
-import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
+import { B200, B50, N30 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
 import Text from './Text';
@@ -42,7 +42,7 @@ css`
 
     ${isInteractive && `
         :hover {
-          background-color: ${`var(--ds-background-neutral-subtle-hovered, ${backgroundHover()})`};
+          background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
           cursor: pointer;
           text-decoration: none;
         }
@@ -53,7 +53,7 @@ css`
         }
 
         :active {
-          background-color: ${`var(--ds-background-neutral-subtle-pressed, ${backgroundActive()})`};
+          background-color: ${`var(--ds-background-neutral-subtle-pressed, ${B50})`};
         }
       `}
 

package/dist/es2019/IconWrapper.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
 import { css, jsx } from '@emotion/react';
-import { background } from '@atlaskit/theme/colors';
+import { N0 } from '@atlaskit/theme/colors';
 import { BORDER_WIDTH } from './constants';
 const iconWrapperStyles = css({
   display: 'flex',
@@ -21,7 +21,7 @@ const iconWrapperStyles = css({
  * An icon wrapper is used internally only.
  */
 const IconWrapper = ({
-  bgColor = `var(--ds-surface-overlay, ${background()})`,
+  bgColor = `var(--ds-surface-overlay, ${N0})`,
   children,
   label
 }) => jsx("span", {

package/dist/es2019/Presence.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { Fragment } from 'react';
-import { background, G300, N200, N40, purple, R300 } from '@atlaskit/theme/colors';
+import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 
@@ -12,11 +12,11 @@ const BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: `var(--ds-surface-overlay, ${background()})`,
+  fill: `var(--ds-surface-overlay, ${N0})`,
   d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
 }));
 const FocusIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
-  fill: `var(--ds-icon-discovery, ${purple()})`,
+  fill: `var(--ds-icon-discovery, ${P300})`,
   d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
 }));
 const OfflineIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {

package/dist/es2019/Status.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { Fragment } from 'react';
-import { background, G400, N40, N500, R400 } from '@atlaskit/theme/colors';
+import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 
@@ -12,7 +12,7 @@ const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: `var(--ds-surface-overlay, ${background()})`,
+  fill: `var(--ds-surface-overlay, ${N0})`,
   d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
 }));
 const DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
@@ -21,7 +21,7 @@ const DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: `var(--ds-surface-overlay, ${background()})`,
+  fill: `var(--ds-surface-overlay, ${N0})`,
   d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
 }));
 const LockedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.3",
+	"version": "21.3.4",
 	"sideEffects": false
 }

package/dist/esm/Avatar.js

@@ -15,7 +15,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.3";
+var packageVersion = "21.3.4";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/esm/AvatarImage.js

@@ -8,9 +8,9 @@ import { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
-import { background, N90 } from '@atlaskit/theme/colors';
+import { N0, N90 } from '@atlaskit/theme/colors';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(background(), ")");
+export var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(N0, ")");
 export var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
 var avatarDefaultIconStyles = css({
   display: 'block',

package/dist/esm/AvatarItem.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
-import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
+import { B200, B50, N30 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
 import Text from './Text';
@@ -25,7 +25,7 @@ var getStyles = function getStyles(css, _ref) {
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
   return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(backgroundHover(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(backgroundActive(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };
 

package/dist/esm/IconWrapper.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
 import { css, jsx } from '@emotion/react';
-import { background } from '@atlaskit/theme/colors';
+import { N0 } from '@atlaskit/theme/colors';
 import { BORDER_WIDTH } from './constants';
 var iconWrapperStyles = css({
   display: 'flex',
@@ -22,7 +22,7 @@ var iconWrapperStyles = css({
  */
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
-    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref$bgColor,
+    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(N0, ")") : _ref$bgColor,
     children = _ref.children,
     label = _ref.label;
   return jsx("span", {

package/dist/esm/Presence.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { Fragment } from 'react';
-import { background, G300, N200, N40, purple, R300 } from '@atlaskit/theme/colors';
+import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 
@@ -12,11 +12,11 @@ var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat(background(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
   d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
 }));
 var FocusIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
-  fill: "var(--ds-icon-discovery, ".concat(purple(), ")"),
+  fill: "var(--ds-icon-discovery, ".concat(P300, ")"),
   d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
 }));
 var OfflineIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {

package/dist/esm/Status.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { Fragment } from 'react';
-import { background, G400, N40, N500, R400 } from '@atlaskit/theme/colors';
+import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 
@@ -12,7 +12,7 @@ var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PU
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat(background(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
   d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
 }));
 var DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
@@ -21,7 +21,7 @@ var DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PU
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat(background(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
   d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
 }));
 var LockedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.3",
+	"version": "21.3.4",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.3.3",
+  "version": "21.3.4",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,14 +55,11 @@
     "@atlaskit/button": "^16.7.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/field-base": "^15.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
     "@testing-library/react": "^12.1.5",