@atlaskit/avatar 21.1.0 → 21.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar
 
+## 21.1.2
+
+### Patch Changes
+
+- [`47f0e63c935`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f0e63c935) - Internal changes to apply spacing tokens. This should be a no-op change.
+
+## 21.1.1
+
+### Patch Changes
+
+- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+
 ## 21.1.0
 
 ### Minor Changes

package/dist/cjs/Avatar.js

@@ -38,7 +38,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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.1.0";
+var packageVersion = "21.1.2";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
@@ -50,7 +50,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
   );
 };
 /**

package/dist/cjs/AvatarItem.js

@@ -34,8 +34,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var avatarItemStyles = (0, _react2.css)({
   minWidth: 0,
   maxWidth: '100%',
-  paddingLeft: "".concat((0, _constants.gridSize)(), "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize()}px``
+  paddingLeft: "var(--ds-scale-100, 8px)",
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   lineHeight: '1.4'
 });
 
@@ -44,7 +46,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @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: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, (0, _constants.gridSize)() / 2, 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-scale-0, 0px)", "var(--ds-scale-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      "))
   );
 };
 /**

package/dist/cjs/Text.js

@@ -20,7 +20,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var getStyles = function getStyles(isSecondary, shouldTruncate) {
   return (0, _react.css)(_objectSpread(_objectSpread({
     display: 'block',
-    margin: 0,
+    // TODO Delete this comment after verifying spacing token -> previous value `0`
+    margin: "var(--ds-scale-0, 0px)",
     color: "var(--ds-text, ".concat(_colors.N900, ")")
   }, shouldTruncate && {
     overflowX: 'hidden',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.1.0",
+	"version": "21.1.2",
 	"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.1.0";
+const packageVersion = "21.1.2";
 
 const getStyles = (css, {
   size,
@@ -40,7 +40,7 @@ css`
     box-shadow: 0 0 0 ${BORDER_WIDTH}px ${borderColor};
     border: none;
     margin: ${BORDER_WIDTH}px;
-    padding: 0;
+    padding: ${"var(--ds-scale-0, 0px)"};
 
     /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */
     font-size: inherit;
@@ -48,8 +48,8 @@ css`
 
     &::-moz-focus-inner {
       border: 0;
-      margin: 0;
-      padding: 0;
+      margin: ${"var(--ds-scale-0, 0px)"};
+      padding: ${"var(--ds-scale-0, 0px)"};
     }
 
     &::after {

package/dist/es2019/AvatarItem.js

@@ -3,15 +3,17 @@
 import { createElement, forwardRef, Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
 import Text from './Text';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const avatarItemStyles = css({
   minWidth: 0,
   maxWidth: '100%',
-  paddingLeft: `${gridSize()}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize()}px``
+  paddingLeft: "var(--ds-scale-100, 8px)",
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   lineHeight: '1.4'
 });
 
@@ -33,8 +35,8 @@ css`
     font-weight: normal;
     line-height: 1;
     outline: none;
-    margin: 0;
-    padding: ${gridSize() / 2}px;
+    margin: ${"var(--ds-scale-0, 0px)"};
+    padding: ${"var(--ds-scale-050, 4px)"};
     text-align: left;
     text-decoration: none;
     width: 100%;

package/dist/es2019/Text.js

@@ -5,7 +5,8 @@ import { N200, N900 } from '@atlaskit/theme/colors';
 
 const getStyles = (isSecondary, shouldTruncate) => css({
   display: 'block',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   color: `var(--ds-text, ${N900})`,
   ...(shouldTruncate && {
     overflowX: 'hidden',

package/dist/es2019/version.json

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

package/dist/esm/Avatar.js

@@ -20,7 +20,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.1.0";
+var packageVersion = "21.1.2";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
@@ -32,7 +32,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", "var(--ds-scale-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
   );
 };
 /**

package/dist/esm/AvatarItem.js

@@ -12,15 +12,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { createElement, forwardRef, Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
 import Text from './Text';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var avatarItemStyles = css({
   minWidth: 0,
   maxWidth: '100%',
-  paddingLeft: "".concat(gridSize(), "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize()}px``
+  paddingLeft: "var(--ds-scale-100, 8px)",
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   lineHeight: '1.4'
 });
 
@@ -29,7 +31,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @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: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, gridSize() / 2, 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-scale-0, 0px)", "var(--ds-scale-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      "))
   );
 };
 /**

package/dist/esm/Text.js

@@ -12,7 +12,8 @@ import { N200, N900 } from '@atlaskit/theme/colors';
 var getStyles = function getStyles(isSecondary, shouldTruncate) {
   return css(_objectSpread(_objectSpread({
     display: 'block',
-    margin: 0,
+    // TODO Delete this comment after verifying spacing token -> previous value `0`
+    margin: "var(--ds-scale-0, 0px)",
     color: "var(--ds-text, ".concat(N900, ")")
   }, shouldTruncate && {
     overflowX: 'hidden',

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.1.0",
+  "version": "21.1.2",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,16 +12,10 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -51,7 +45,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.1",
     "@atlaskit/field-base": "^15.0.0",
@@ -86,6 +80,7 @@
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "styling": [
         "static",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/avatar".
+## API Report File for "@atlaskit/avatar"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -15,253 +19,135 @@ import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-export declare const ACTIVE_SCALE_FACTOR = 0.9;
+// @public (undocumented)
+export const ACTIVE_SCALE_FACTOR = 0.9;
 
-export declare type AppearanceType = 'circle' | 'square';
+// @public (undocumented)
+export type AppearanceType = 'circle' | 'square';
 
-/**
- * __Avatar__
- *
- * An avatar is a visual representation of a user or entity.
- *
- * - [Examples](https://atlassian.design/components/avatar/examples)
- * - [Code](https://atlassian.design/components/avatar/code)
- * - [Usage](https://atlassian.design/components/avatar/usage)
- */
-declare const Avatar: ForwardRefExoticComponent<
+// @public
+const Avatar: ForwardRefExoticComponent<
   AvatarPropTypes & RefAttributes<HTMLElement>
 >;
 export default Avatar;
 
-export declare const AVATAR_RADIUS: AvatarSizeMap;
+// @public (undocumented)
+export const AVATAR_RADIUS: AvatarSizeMap;
 
-export declare const AVATAR_SIZES: AvatarSizeMap;
+// @public (undocumented)
+export const AVATAR_SIZES: AvatarSizeMap;
 
-export declare type AvatarClickEventHandler = (
+// @public (undocumented)
+export type AvatarClickEventHandler = (
   event: React.MouseEvent,
   analyticsEvent?: UIAnalyticsEvent,
 ) => void;
 
-/**
- * __Avatar item__
- *
- * An avatar item is a wrapper that goes around an avatar when it's displayed alongside text, such as a name or status.
- *
- * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
- */
-export declare const AvatarItem: ForwardRefExoticComponent<
+// @public
+export const AvatarItem: ForwardRefExoticComponent<
   AvatarItemProps & RefAttributes<HTMLElement>
 >;
 
-export declare interface AvatarItemProps {
-  /**
-   * Used to provide better content to screen readers when using presence/status. Rather
-   * than a screen reader speaking "online, approved, John Smith", passing in an label
-   * allows a custom message like "John Smith (approved and online)".
-   */
-  label?: string;
-  /**
-   * Slot to place an avatar element. Use @atlaskit/avatar.
-   */
+// @public (undocumented)
+export interface AvatarItemProps {
   avatar: ReactNode;
-  /**
-   * Change background color.
-   */
   backgroundColor?: string;
-  /**
-   * Use a custom component instead of the default span.
-   */
   children?: (props: CustomAvatarItemProps) => ReactNode;
-  /**
-   * URL for avatars being used as a link.
-   */
   href?: string;
-  /**
-   * Disable the item from being interactive
-   */
   isDisabled?: boolean;
-  /**
-   * Handler to be called on click.
-   */
+  isTruncationDisabled?: boolean;
+  label?: string;
   onClick?: AvatarClickEventHandler;
-  /**
-   * PrimaryText text.
-   */
   primaryText?: ReactNode;
-  /**
-   * SecondaryText text.
-   */
   secondaryText?: ReactNode;
-  /**
-   * Pass target down to the anchor, if href is provided.
-   */
   target?: '_blank' | '_self' | '_top' | '_parent';
-  /**
-   * By default, overflowing text is truncated if it exceeds the container width. Use this prop to disable this.
-   */
-  isTruncationDisabled?: boolean;
-  /**
-   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-   */
   testId?: string;
 }
 
-export declare interface AvatarPropTypes {
-  /**
-   * Indicates the shape of the avatar. Most avatars are circular, but square avatars
-   * can be used for 'container' objects.
-   */
+// @public (undocumented)
+export interface AvatarPropTypes {
+  analyticsContext?: Record<string, any>;
   appearance?: AppearanceType;
-  /**
-   * Used to provide better content to screen readers when using presence/status. Rather
-   * than a screen reader speaking "online, approved, John Smith", passing in a label
-   * allows a custom message like "John Smith (approved and online)".
-   */
-  label?: string;
-  /**
-   * Used to override the default border color around the avatar body.
-   * Accepts any color argument that the border-color CSS property accepts.
-   */
   borderColor?: string;
-  /**
-   * Supply a custom avatar component instead of the default
-   */
   children?: (props: CustomAvatarProps) => ReactNode;
-  /**
-   * Provides a url for avatars being used as a link.
-   */
   href?: string;
-  /**
-   * Change the style to indicate the avatar is disabled.
-   */
   isDisabled?: boolean;
-  /**
-   * Provides alt text for the avatar image.
-   */
+  label?: string;
   name?: string;
-  /**
-   * Indicates a user's online status by showing a small icon on the avatar.
-   * Refer to presence values on the Presence component.
-   * Alternatively accepts any React element. For best results, it is recommended to
-   * use square content with height and width of 100%.
-   */
+  onClick?: AvatarClickEventHandler;
   presence?: ('online' | 'busy' | 'focus' | 'offline') | ReactNode;
-  /**
-   * Defines the size of the avatar
-   */
   size?: SizeType;
-  /**
-   * A url to load an image from (this can also be a base64 encoded image).
-   */
   src?: string;
-  /**
-   * Indicates contextual information by showing a small icon on the avatar.
-   * Refer to status values on the Status component.
-   */
-  status?: ('approved' | 'declined' | 'locked') | ReactNode;
-  /**
-   * The index of where this avatar is in the group `stack`.
-   */
   stackIndex?: number;
-  /**
-   * Assign specific tabIndex order to the underlying node.
-   */
+  status?: ('approved' | 'declined' | 'locked') | ReactNode;
   tabIndex?: number;
-  /**
-   * Pass target down to the anchor, if href is provided.
-   */
   target?: '_blank' | '_self' | '_top' | '_parent';
-  /**
-   * Handler to be called on click.
-   */
-  onClick?: AvatarClickEventHandler;
-  /**
-   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-   */
   testId?: string;
-  /**
-   * Analytics context meta data
-   */
-  analyticsContext?: Record<string, any>;
 }
 
-declare type AvatarSizeMap = Record<SizeType, number>;
+// @public (undocumented)
+type AvatarSizeMap = Record<SizeType, number>;
 
-export declare const BORDER_WIDTH = 2;
+// @public (undocumented)
+export const BORDER_WIDTH = 2;
 
-export declare interface CustomAvatarItemProps {
-  testId?: string;
-  onClick?: MouseEventHandler;
+// @public (undocumented)
+export interface CustomAvatarItemProps {
+  // (undocumented)
+  'aria-disabled'?: boolean | 'false' | 'true' | undefined;
+  'aria-label'?: string;
+  // (undocumented)
+  children: ReactNode;
+  // (undocumented)
   className?: string;
+  // (undocumented)
   href?: string;
-  children: ReactNode;
+  // (undocumented)
+  onClick?: MouseEventHandler;
+  // (undocumented)
   ref: Ref<HTMLElement>;
-  /**
-   * This is used in render props so is okay to be defined.
-   * eslint-disable-next-line consistent-props-definitions
-   */
-  'aria-label'?: string;
-  'aria-disabled'?: boolean | 'false' | 'true' | undefined;
+  // (undocumented)
+  testId?: string;
 }
 
-export declare interface CustomAvatarProps {
-  /**
-   * This is used in render props so is okay to be defined.
-   * eslint-disable-next-line consistent-props-definitions
-   */
+// @public (undocumented)
+export interface CustomAvatarProps {
   'aria-label'?: string;
-  tabIndex?: number;
-  testId?: string;
-  onClick?: MouseEventHandler;
+  // (undocumented)
+  children: ReactNode;
+  // (undocumented)
   className?: string;
+  // (undocumented)
   href?: string;
-  children: ReactNode;
+  // (undocumented)
+  onClick?: MouseEventHandler;
+  // (undocumented)
   ref: Ref<HTMLElement>;
+  // (undocumented)
+  tabIndex?: number;
+  // (undocumented)
+  testId?: string;
 }
 
-export declare type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge';
+// @public (undocumented)
+export type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge';
 
-/**
- * __Avatar presence__
- *
- * A presence shows an avatar’s availability.
- *
- * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
- */
-export declare const Presence: FC<PresenceProps>;
+// @public
+export const Presence: FC<PresenceProps>;
 
-export declare interface PresenceProps {
-  /**
-   * Used to override the default border color of the presence indicator.
-   * Accepts any color argument that the border-color CSS property accepts.
-   */
+// @public (undocumented)
+export interface PresenceProps {
   borderColor?: string;
-  /**
-   * Content to use as a custom presence indicator (usually not required if
-   * consuming Presence separate to Avatar).
-   */
   children?: ReactNode;
-  /**
-   * The type of presence indicator to show
-   */
   presence?: PresenceType;
-  /**
-   * Test Id
-   */
   testId?: string;
 }
 
-export declare type PresenceType =
-  | 'busy'
-  | 'focus'
-  | 'offline'
-  | 'online'
-  | ReactNode;
+// @public (undocumented)
+export type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
 
-export declare type SizeType =
+// @public (undocumented)
+export type SizeType =
   | 'xsmall'
   | 'small'
   | 'medium'
@@ -269,54 +155,33 @@ export declare type SizeType =
   | 'xlarge'
   | 'xxlarge';
 
-/**
- * __Skeleton__
- *
- * A skeleton is the loading state for the avatar component.
- *
- * - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
- */
-export declare const Skeleton: FC<SkeletonProps>;
+// @public
+export const Skeleton: FC<SkeletonProps>;
 
-export declare interface SkeletonProps {
+// @public (undocumented)
+export interface SkeletonProps {
+  // (undocumented)
   appearance?: AppearanceType;
+  // (undocumented)
   color?: string;
+  // (undocumented)
   size?: SizeType;
+  // (undocumented)
   weight?: 'normal' | 'strong';
 }
 
-/**
- * __Avatar status__
- *
- * An avatar status shows contextual information, such as if someone approves or declines something.
- *
- * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
- */
-export declare const Status: FC<StatusProps>;
+// @public
+export const Status: FC<StatusProps>;
 
-export declare interface StatusProps {
-  /**
-   * Override the default border color of the status indicator. This accepts
-   * any color argument that the CSS property `border-color` accepts.
-   */
+// @public (undocumented)
+export interface StatusProps {
   borderColor?: string;
-  /**
-   * Content to use as a custom status indicator. Not needed if consuming
-   * `Status` separate to `Avatar`.
-   */
   children?: ReactNode;
-  /**
-   * Content to use as a custom status indicator. Not needed if consuming
-   * `Status` separate to `Avatar`.
-   */
   status?: StatusType;
 }
 
-export declare type StatusType =
-  | ('approved' | 'declined' | 'locked')
-  | ReactNode;
+// @public (undocumented)
+export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types-ts4.0/Avatar.d.ts

@@ -1,106 +0,0 @@
-/** @jsx jsx */
-import { MouseEventHandler, ReactNode, Ref } from 'react';
-import { AppearanceType, AvatarClickEventHandler, SizeType } from './types';
-export interface CustomAvatarProps {
-    /**
-     * This is used in render props so is okay to be defined.
-     * eslint-disable-next-line consistent-props-definitions
-     */
-    'aria-label'?: string;
-    tabIndex?: number;
-    testId?: string;
-    onClick?: MouseEventHandler;
-    className?: string;
-    href?: string;
-    children: ReactNode;
-    ref: Ref<HTMLElement>;
-}
-export interface AvatarPropTypes {
-    /**
-     * Indicates the shape of the avatar. Most avatars are circular, but square avatars
-     * can be used for 'container' objects.
-     */
-    appearance?: AppearanceType;
-    /**
-     * Used to provide better content to screen readers when using presence/status. Rather
-     * than a screen reader speaking "online, approved, John Smith", passing in a label
-     * allows a custom message like "John Smith (approved and online)".
-     */
-    label?: string;
-    /**
-     * Used to override the default border color around the avatar body.
-     * Accepts any color argument that the border-color CSS property accepts.
-     */
-    borderColor?: string;
-    /**
-     * Supply a custom avatar component instead of the default
-     */
-    children?: (props: CustomAvatarProps) => ReactNode;
-    /**
-     * Provides a url for avatars being used as a link.
-     */
-    href?: string;
-    /**
-     * Change the style to indicate the avatar is disabled.
-     */
-    isDisabled?: boolean;
-    /**
-     * Provides alt text for the avatar image.
-     */
-    name?: string;
-    /**
-     * Indicates a user's online status by showing a small icon on the avatar.
-     * Refer to presence values on the Presence component.
-     * Alternatively accepts any React element. For best results, it is recommended to
-     * use square content with height and width of 100%.
-     */
-    presence?: ('online' | 'busy' | 'focus' | 'offline') | ReactNode;
-    /**
-     * Defines the size of the avatar
-     */
-    size?: SizeType;
-    /**
-     * A url to load an image from (this can also be a base64 encoded image).
-     */
-    src?: string;
-    /**
-     * Indicates contextual information by showing a small icon on the avatar.
-     * Refer to status values on the Status component.
-     */
-    status?: ('approved' | 'declined' | 'locked') | ReactNode;
-    /**
-     * The index of where this avatar is in the group `stack`.
-     */
-    stackIndex?: number;
-    /**
-     * Assign specific tabIndex order to the underlying node.
-     */
-    tabIndex?: number;
-    /**
-     * Pass target down to the anchor, if href is provided.
-     */
-    target?: '_blank' | '_self' | '_top' | '_parent';
-    /**
-     * Handler to be called on click.
-     */
-    onClick?: AvatarClickEventHandler;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-     */
-    testId?: string;
-    /**
-     * Analytics context meta data
-     */
-    analyticsContext?: Record<string, any>;
-}
-/**
- * __Avatar__
- *
- * An avatar is a visual representation of a user or entity.
- *
- * - [Examples](https://atlassian.design/components/avatar/examples)
- * - [Code](https://atlassian.design/components/avatar/code)
- * - [Usage](https://atlassian.design/components/avatar/usage)
- */
-declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
-export default Avatar;

package/dist/types-ts4.0/AvatarImage.d.ts

@@ -1,19 +0,0 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import { AppearanceType, SizeType } from './types';
-interface AvatarImageProps {
-    appearance: AppearanceType;
-    size: SizeType;
-    alt?: string;
-    src?: string;
-    testId?: string;
-}
-export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
-export declare const ICON_COLOR: "var(--ds-icon-subtle)";
-/**
- * __Avatar image__
- *
- * An avatar image is an internal component used to control the rendering phases of an image.
- */
-declare const AvatarImage: FC<AvatarImageProps>;
-export default AvatarImage;

package/dist/types-ts4.0/AvatarItem.d.ts

@@ -1,79 +0,0 @@
-/** @jsx jsx */
-import { MouseEventHandler, ReactNode, Ref } from 'react';
-import { AvatarClickEventHandler } from './types';
-export interface CustomAvatarItemProps {
-    testId?: string;
-    onClick?: MouseEventHandler;
-    className?: string;
-    href?: string;
-    children: ReactNode;
-    ref: Ref<HTMLElement>;
-    /**
-     * This is used in render props so is okay to be defined.
-     * eslint-disable-next-line consistent-props-definitions
-     */
-    'aria-label'?: string;
-    'aria-disabled'?: boolean | 'false' | 'true' | undefined;
-}
-export interface AvatarItemProps {
-    /**
-     * Used to provide better content to screen readers when using presence/status. Rather
-     * than a screen reader speaking "online, approved, John Smith", passing in an label
-     * allows a custom message like "John Smith (approved and online)".
-     */
-    label?: string;
-    /**
-     * Slot to place an avatar element. Use @atlaskit/avatar.
-     */
-    avatar: ReactNode;
-    /**
-     * Change background color.
-     */
-    backgroundColor?: string;
-    /**
-     * Use a custom component instead of the default span.
-     */
-    children?: (props: CustomAvatarItemProps) => ReactNode;
-    /**
-     * URL for avatars being used as a link.
-     */
-    href?: string;
-    /**
-     * Disable the item from being interactive
-     */
-    isDisabled?: boolean;
-    /**
-     * Handler to be called on click.
-     */
-    onClick?: AvatarClickEventHandler;
-    /**
-     * PrimaryText text.
-     */
-    primaryText?: ReactNode;
-    /**
-     * SecondaryText text.
-     */
-    secondaryText?: ReactNode;
-    /**
-     * Pass target down to the anchor, if href is provided.
-     */
-    target?: '_blank' | '_self' | '_top' | '_parent';
-    /**
-     * By default, overflowing text is truncated if it exceeds the container width. Use this prop to disable this.
-     */
-    isTruncationDisabled?: boolean;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-     */
-    testId?: string;
-}
-/**
- * __Avatar item__
- *
- * An avatar item is a wrapper that goes around an avatar when it's displayed alongside text, such as a name or status.
- *
- * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
- */
-declare const AvatarItem: import("react").ForwardRefExoticComponent<AvatarItemProps & import("react").RefAttributes<HTMLElement>>;
-export default AvatarItem;

package/dist/types-ts4.0/IconWrapper.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-import { FC, ReactNode } from 'react';
-interface IconWrapperProps {
-    bgColor?: string;
-    children?: ReactNode;
-}
-/**
- * __Icon wrapper__
- *
- * An icon wrapper is used internally only.
- */
-declare const IconWrapper: FC<IconWrapperProps>;
-export default IconWrapper;

package/dist/types-ts4.0/Presence.d.ts

@@ -1,45 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AppearanceType, IndicatorSizeType } from './types';
-export declare type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
-export interface PresenceProps {
-    /**
-     * Used to override the default border color of the presence indicator.
-     * Accepts any color argument that the border-color CSS property accepts.
-     */
-    borderColor?: string;
-    /**
-     * Content to use as a custom presence indicator (usually not required if
-     * consuming Presence separate to Avatar).
-     */
-    children?: ReactNode;
-    /**
-     * The type of presence indicator to show
-     */
-    presence?: PresenceType;
-    /**
-     * Test Id
-     */
-    testId?: string;
-}
-/**
- * __Avatar presence__
- *
- * A presence shows an avatar’s availability.
- *
- * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
- */
-declare const AvatarPresence: FC<PresenceProps>;
-export default AvatarPresence;
-export interface PresenceWrapperProps extends PresenceProps {
-    appearance: AppearanceType;
-    size: IndicatorSizeType;
-    testId?: string;
-}
-/**
- * __Presence wrapper__
- *
- * A presence wrapper is used internally to position presence ontop of the avatar.
- */
-export declare const PresenceWrapper: FC<PresenceWrapperProps>;

package/dist/types-ts4.0/Skeleton.d.ts

@@ -1,19 +0,0 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import { AppearanceType, SizeType } from './types';
-export interface SkeletonProps {
-    appearance?: AppearanceType;
-    color?: string;
-    size?: SizeType;
-    weight?: 'normal' | 'strong';
-}
-/**
- * __Skeleton__
- *
- * A skeleton is the loading state for the avatar component.
- *
- * - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
- */
-declare const Skeleton: FC<SkeletonProps>;
-export default Skeleton;

package/dist/types-ts4.0/Status.d.ts

@@ -1,42 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AppearanceType, IndicatorSizeType } from './types';
-export declare type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
-export interface StatusProps {
-    /**
-     * Override the default border color of the status indicator. This accepts
-     * any color argument that the CSS property `border-color` accepts.
-     */
-    borderColor?: string;
-    /**
-     * Content to use as a custom status indicator. Not needed if consuming
-     * `Status` separate to `Avatar`.
-     */
-    children?: ReactNode;
-    /**
-     * Content to use as a custom status indicator. Not needed if consuming
-     * `Status` separate to `Avatar`.
-     */
-    status?: StatusType;
-}
-/**
- * __Avatar status__
- *
- * An avatar status shows contextual information, such as if someone approves or declines something.
- *
- * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
- */
-declare const AvatarStatus: FC<StatusProps>;
-export default AvatarStatus;
-interface StatusWrapperProps extends StatusProps {
-    appearance: AppearanceType;
-    size: IndicatorSizeType;
-    children: ReactNode;
-    testId?: string;
-}
-/**
- * Status wrapper**
- *
- * A status wrapper is used internally to position status ontop of the avatar.
- */
-export declare const StatusWrapper: FC<StatusWrapperProps>;

package/dist/types-ts4.0/Text.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-import { FC, ReactNode } from 'react';
-/**
- * __Text__
- *
- * Text is used internally only.
- */
-declare const Text: FC<{
-    isSecondary?: boolean;
-    children: ReactNode;
-    shouldTruncate: boolean;
-}>;
-export default Text;

package/dist/types-ts4.0/constants.d.ts

@@ -1,7 +0,0 @@
-import { AvatarSizeMap, IndicatorSizeType } from './types';
-export declare const AVATAR_SIZES: AvatarSizeMap;
-export declare const AVATAR_RADIUS: AvatarSizeMap;
-export declare const BORDER_WIDTH = 2;
-export declare const ACTIVE_SCALE_FACTOR = 0.9;
-export declare const ICON_SIZES: Record<IndicatorSizeType, number>;
-export declare const ICON_OFFSET: Record<IndicatorSizeType, number>;

package/dist/types-ts4.0/entry-points/avatar-item.d.ts

@@ -1,2 +0,0 @@
-export { default } from '../AvatarItem';
-export type { AvatarItemProps, CustomAvatarItemProps } from '../AvatarItem';

package/dist/types-ts4.0/entry-points/avatar.d.ts

@@ -1 +0,0 @@
-export { default } from '../Avatar';

package/dist/types-ts4.0/entry-points/presence.d.ts

@@ -1,2 +0,0 @@
-export { default } from '../Presence';
-export type { PresenceType, PresenceProps } from '../Presence';

package/dist/types-ts4.0/entry-points/skeleton.d.ts

@@ -1,2 +0,0 @@
-export { default } from '../Skeleton';
-export type { SkeletonProps } from '../Skeleton';

package/dist/types-ts4.0/entry-points/status.d.ts

@@ -1,2 +0,0 @@
-export { default } from '../Status';
-export type { StatusType, StatusProps } from '../Status';

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { AppearanceType, SizeType, IndicatorSizeType, AvatarClickEventHandler, } from '../types';

package/dist/types-ts4.0/index.d.ts

@@ -1,12 +0,0 @@
-export { default } from './Avatar';
-export type { AvatarPropTypes, CustomAvatarProps } from './Avatar';
-export { default as AvatarItem } from './AvatarItem';
-export type { AvatarItemProps, CustomAvatarItemProps } from './AvatarItem';
-export { default as Presence } from './Presence';
-export type { PresenceProps, PresenceType } from './Presence';
-export { default as Status } from './Status';
-export type { StatusProps, StatusType } from './Status';
-export { default as Skeleton } from './Skeleton';
-export type { SkeletonProps } from './Skeleton';
-export { AVATAR_SIZES, BORDER_WIDTH, AVATAR_RADIUS, ACTIVE_SCALE_FACTOR, } from './constants';
-export type { AvatarClickEventHandler, AppearanceType, SizeType, IndicatorSizeType, } from './types';

package/dist/types-ts4.0/types.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-export declare type AvatarSizeMap = Record<SizeType, number>;
-export declare type AppearanceType = 'circle' | 'square';
-export declare type SizeType = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
-export declare type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge';
-export declare type AvatarClickEventHandler = (event: React.MouseEvent, analyticsEvent?: UIAnalyticsEvent) => void;

package/dist/types-ts4.0/utilities.d.ts

@@ -1,11 +0,0 @@
-import { MouseEventHandler } from 'react';
-export declare const getLinkProps: (href: string, target?: string | undefined) => {
-    href: string;
-    rel: string | null;
-    target: string | undefined;
-};
-export declare const getButtonProps: (onClick: MouseEventHandler) => {
-    type: string;
-    onClick: MouseEventHandler<Element>;
-};
-export declare const getCustomElement: (isDisabled?: boolean | undefined, href?: string | undefined, onClick?: MouseEventHandler<Element> | undefined) => "button" | "a" | "span";