@atlaskit/teams-avatar 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/teams-avatar
 
+## 2.3.0
+
+### Minor Changes
+
+- [#127906](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127906)
+  [`194a6a52208e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/194a6a52208e2) -
+  Update border radius
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TeamAvatarImage = void 0;
+exports.TeamAvatarImageLegacy = exports.TeamAvatarImage = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -15,6 +15,7 @@ var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _fallback = require("./fallback");
+var _teamsAvatarImageNext = require("./teams-avatar-image-next");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
@@ -71,7 +72,7 @@ var avatarImageStyles = (0, _react2.css)({
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref3) {
+var TeamAvatarImageLegacy = exports.TeamAvatarImageLegacy = function TeamAvatarImageLegacy(_ref3) {
   var _ref3$alt = _ref3.alt,
     alt = _ref3$alt === void 0 ? '' : _ref3$alt,
     src = _ref3.src,
@@ -115,4 +116,10 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref3)
       return setHasImageErrored(true);
     }
   }));
+};
+var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(props) {
+  if ((0, _platformFeatureFlags.fg)('team-avatar-radii')) {
+    return (0, _react2.jsx)(_teamsAvatarImageNext.TeamAvatarImage, props);
+  }
+  return (0, _react2.jsx)(TeamAvatarImageLegacy, props);
 };

package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/fallback/index.compiled.css

@@ -0,0 +1,5 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/fallback/index.js

@@ -0,0 +1,57 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FallbackAvatar = FallbackAvatar;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
+};
+function FallbackAvatar(props) {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    clipPath: "url(#clip0_2032_552)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "32",
+    height: "32",
+    rx: "4",
+    fill: "#DCDFE4"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.6666 12.6666C11.7712 12.6666 12.6666 11.7712 12.6666 10.6666C12.6666 9.56206 11.7712 8.66663 10.6666 8.66663C9.56202 8.66663 8.66658 9.56206 8.66658 10.6666C8.66658 11.7712 9.56202 12.6666 10.6666 12.6666ZM10.6666 14.6666C12.8757 14.6666 14.6666 12.8758 14.6666 10.6666C14.6666 8.45749 12.8757 6.66663 10.6666 6.66663C8.45745 6.66663 6.66658 8.45749 6.66658 10.6666C6.66658 12.8758 8.45745 14.6666 10.6666 14.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.3333 12.6666C22.4378 12.6666 23.3333 11.7712 23.3333 10.6666C23.3333 9.56206 22.4378 8.66663 21.3333 8.66663C20.2287 8.66663 19.3333 9.56206 19.3333 10.6666C19.3333 11.7712 20.2287 12.6666 21.3333 12.6666ZM21.3333 14.6666C23.5424 14.6666 25.3333 12.8758 25.3333 10.6666C25.3333 8.45749 23.5424 6.66663 21.3333 6.66663C19.1241 6.66663 17.3333 8.45749 17.3333 10.6666C17.3333 12.8758 19.1241 14.6666 21.3333 14.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M21.6666 16C24.4273 16.0004 26.6666 18.2385 26.6666 21V22.6666C26.6666 24.1394 25.4727 25.3333 23.9999 25.3333H20.135C18.0324 25.3333 16.1545 24.018 15.436 22.042L14.6843 19.9747C14.2531 18.7892 13.1264 18 11.8649 18H10.3333C8.6764 18 7.33325 19.3431 7.33325 21V22.6666C7.33325 23.0348 7.63173 23.3333 7.99992 23.3333H13.3333V25.3333H7.99992C6.52716 25.3333 5.33325 24.1394 5.33325 22.6666V21C5.33325 18.2385 7.57183 16 10.3333 16H11.8649C13.9674 16 15.8453 17.3153 16.5638 19.2913L17.3156 21.3585C17.7467 22.5441 18.8734 23.3333 20.135 23.3333H23.9999C24.3681 23.3333 24.6666 23.0348 24.6666 22.6666V21C24.6666 19.3437 23.3233 18.0004 21.6666 18H20.135V16H21.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M20.135 16C19.5972 16 18.7183 16.1407 18.0518 16.4564L18.908 18.2639C19.064 18.19 19.288 18.1205 19.537 18.0703C19.785 18.0203 20.0045 18 20.135 18V16Z",
+    fill: "#44546F"
+  })), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
+    id: "clip0_2032_552"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "32",
+    height: "32",
+    rx: "4",
+    fill: "white"
+  })))));
+}

package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css

@@ -0,0 +1,12 @@
+
+._2rko19bv{border-radius:10px}
+._2rko1tcg{border-radius:24px}
+._2rko1y44{border-radius:4px}
+._2rkoftgi{border-radius:8px}
+._2rkoi2wt{border-radius:6px}
+._2rkozwfg{border-radius:2pc}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._4t3i1osq{height:100%}
+._i0dl1osq{flex-basis:100%}

package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js

@@ -0,0 +1,76 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TeamAvatarImage = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _avatar = require("@atlaskit/avatar");
+var _fallback = require("./fallback");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var avatarImageStyles = {
+  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq"
+};
+var SIZES = {
+  xsmall: 16,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 96,
+  xxlarge: 128
+};
+var borderRadiusMap = {
+  xsmall: "_2rko1y44",
+  small: "_2rkoi2wt",
+  medium: "_2rkoftgi",
+  large: "_2rko19bv",
+  xlarge: "_2rko1tcg",
+  xxlarge: "_2rkozwfg"
+};
+
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
+  var _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    src = _ref.src,
+    size = _ref.size,
+    testId = _ref.testId;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If src changes, reset state
+  (0, _react.useEffect)(function () {
+    setHasImageErrored(false);
+  }, [src]);
+  if (!src || hasImageErrored) {
+    return /*#__PURE__*/React.createElement(_fallback.FallbackAvatar, {
+      "aria-label": alt,
+      width: SIZES[size],
+      height: SIZES[size],
+      "data-testid": testId
+    });
+  }
+  return /*#__PURE__*/React.createElement(_avatar.AvatarContent, null, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt,
+    "data-testId": testId && "".concat(testId, "--image"),
+    onError: function onError() {
+      return setHasImageErrored(true);
+    },
+    className: (0, _runtime.ax)([avatarImageStyles.image, borderRadiusMap[size]])
+  }));
+};

package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.js

@@ -12,6 +12,7 @@ import TeamIcon from '@atlaskit/icon/glyph/people';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { FallbackAvatar } from './fallback';
+import { TeamAvatarImage as TeamAvatarImageNext } from './teams-avatar-image-next';
 const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
 const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
 // used in a size calculation so can't be a token. Without this the avatar looks very squished
@@ -63,7 +64,7 @@ const avatarImageStyles = css({
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export const TeamAvatarImage = ({
+export const TeamAvatarImageLegacy = ({
   alt = '',
   src,
   size,
@@ -102,4 +103,10 @@ export const TeamAvatarImage = ({
     css: avatarImageStyles,
     onError: () => setHasImageErrored(true)
   }));
+};
+export const TeamAvatarImage = props => {
+  if (fg('team-avatar-radii')) {
+    return jsx(TeamAvatarImageNext, props);
+  }
+  return jsx(TeamAvatarImageLegacy, props);
 };

package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/fallback/index.compiled.css

@@ -0,0 +1,5 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/fallback/index.js

@@ -0,0 +1,50 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
+};
+export function FallbackAvatar(props) {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_2032_552)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "32",
+    height: "32",
+    rx: "4",
+    fill: "#DCDFE4"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.6666 12.6666C11.7712 12.6666 12.6666 11.7712 12.6666 10.6666C12.6666 9.56206 11.7712 8.66663 10.6666 8.66663C9.56202 8.66663 8.66658 9.56206 8.66658 10.6666C8.66658 11.7712 9.56202 12.6666 10.6666 12.6666ZM10.6666 14.6666C12.8757 14.6666 14.6666 12.8758 14.6666 10.6666C14.6666 8.45749 12.8757 6.66663 10.6666 6.66663C8.45745 6.66663 6.66658 8.45749 6.66658 10.6666C6.66658 12.8758 8.45745 14.6666 10.6666 14.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.3333 12.6666C22.4378 12.6666 23.3333 11.7712 23.3333 10.6666C23.3333 9.56206 22.4378 8.66663 21.3333 8.66663C20.2287 8.66663 19.3333 9.56206 19.3333 10.6666C19.3333 11.7712 20.2287 12.6666 21.3333 12.6666ZM21.3333 14.6666C23.5424 14.6666 25.3333 12.8758 25.3333 10.6666C25.3333 8.45749 23.5424 6.66663 21.3333 6.66663C19.1241 6.66663 17.3333 8.45749 17.3333 10.6666C17.3333 12.8758 19.1241 14.6666 21.3333 14.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M21.6666 16C24.4273 16.0004 26.6666 18.2385 26.6666 21V22.6666C26.6666 24.1394 25.4727 25.3333 23.9999 25.3333H20.135C18.0324 25.3333 16.1545 24.018 15.436 22.042L14.6843 19.9747C14.2531 18.7892 13.1264 18 11.8649 18H10.3333C8.6764 18 7.33325 19.3431 7.33325 21V22.6666C7.33325 23.0348 7.63173 23.3333 7.99992 23.3333H13.3333V25.3333H7.99992C6.52716 25.3333 5.33325 24.1394 5.33325 22.6666V21C5.33325 18.2385 7.57183 16 10.3333 16H11.8649C13.9674 16 15.8453 17.3153 16.5638 19.2913L17.3156 21.3585C17.7467 22.5441 18.8734 23.3333 20.135 23.3333H23.9999C24.3681 23.3333 24.6666 23.0348 24.6666 22.6666V21C24.6666 19.3437 23.3233 18.0004 21.6666 18H20.135V16H21.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M20.135 16C19.5972 16 18.7183 16.1407 18.0518 16.4564L18.908 18.2639C19.064 18.19 19.288 18.1205 19.537 18.0703C19.785 18.0203 20.0045 18 20.135 18V16Z",
+    fill: "#44546F"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_2032_552"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "32",
+    height: "32",
+    rx: "4",
+    fill: "white"
+  })))));
+}

package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css

@@ -0,0 +1,12 @@
+
+._2rko19bv{border-radius:10px}
+._2rko1tcg{border-radius:24px}
+._2rko1y44{border-radius:4px}
+._2rkoftgi{border-radius:8px}
+._2rkoi2wt{border-radius:6px}
+._2rkozwfg{border-radius:2pc}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._4t3i1osq{height:100%}
+._i0dl1osq{flex-basis:100%}

package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js

@@ -0,0 +1,60 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useState } from 'react';
+import { AvatarContent } from '@atlaskit/avatar';
+import { FallbackAvatar } from './fallback';
+const avatarImageStyles = {
+  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq"
+};
+const SIZES = {
+  xsmall: 16,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 96,
+  xxlarge: 128
+};
+const borderRadiusMap = {
+  xsmall: "_2rko1y44",
+  small: "_2rkoi2wt",
+  medium: "_2rkoftgi",
+  large: "_2rko19bv",
+  xlarge: "_2rko1tcg",
+  xxlarge: "_2rkozwfg"
+};
+
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+export const TeamAvatarImage = ({
+  alt = '',
+  src,
+  size,
+  testId
+}) => {
+  const [hasImageErrored, setHasImageErrored] = useState(false);
+
+  // If src changes, reset state
+  useEffect(() => {
+    setHasImageErrored(false);
+  }, [src]);
+  if (!src || hasImageErrored) {
+    return /*#__PURE__*/React.createElement(FallbackAvatar, {
+      "aria-label": alt,
+      width: SIZES[size],
+      height: SIZES[size],
+      "data-testid": testId
+    });
+  }
+  return /*#__PURE__*/React.createElement(AvatarContent, null, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt,
+    "data-testId": testId && `${testId}--image`,
+    onError: () => setHasImageErrored(true),
+    className: ax([avatarImageStyles.image, borderRadiusMap[size]])
+  }));
+};

package/dist/esm/ui/teams-avatar/teams-avatar-image/index.js

@@ -16,6 +16,7 @@ import TeamIcon from '@atlaskit/icon/glyph/people';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { FallbackAvatar } from './fallback';
+import { TeamAvatarImage as TeamAvatarImageNext } from './teams-avatar-image-next';
 var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(N0, ")");
 var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
 // used in a size calculation so can't be a token. Without this the avatar looks very squished
@@ -67,7 +68,7 @@ var avatarImageStyles = css({
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export var TeamAvatarImage = function TeamAvatarImage(_ref3) {
+export var TeamAvatarImageLegacy = function TeamAvatarImageLegacy(_ref3) {
   var _ref3$alt = _ref3.alt,
     alt = _ref3$alt === void 0 ? '' : _ref3$alt,
     src = _ref3.src,
@@ -111,4 +112,10 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref3) {
       return setHasImageErrored(true);
     }
   }));
+};
+export var TeamAvatarImage = function TeamAvatarImage(props) {
+  if (fg('team-avatar-radii')) {
+    return jsx(TeamAvatarImageNext, props);
+  }
+  return jsx(TeamAvatarImageLegacy, props);
 };

package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/fallback/index.compiled.css

@@ -0,0 +1,5 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/fallback/index.js

@@ -0,0 +1,50 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
+};
+export function FallbackAvatar(props) {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_2032_552)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "32",
+    height: "32",
+    rx: "4",
+    fill: "#DCDFE4"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.6666 12.6666C11.7712 12.6666 12.6666 11.7712 12.6666 10.6666C12.6666 9.56206 11.7712 8.66663 10.6666 8.66663C9.56202 8.66663 8.66658 9.56206 8.66658 10.6666C8.66658 11.7712 9.56202 12.6666 10.6666 12.6666ZM10.6666 14.6666C12.8757 14.6666 14.6666 12.8758 14.6666 10.6666C14.6666 8.45749 12.8757 6.66663 10.6666 6.66663C8.45745 6.66663 6.66658 8.45749 6.66658 10.6666C6.66658 12.8758 8.45745 14.6666 10.6666 14.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.3333 12.6666C22.4378 12.6666 23.3333 11.7712 23.3333 10.6666C23.3333 9.56206 22.4378 8.66663 21.3333 8.66663C20.2287 8.66663 19.3333 9.56206 19.3333 10.6666C19.3333 11.7712 20.2287 12.6666 21.3333 12.6666ZM21.3333 14.6666C23.5424 14.6666 25.3333 12.8758 25.3333 10.6666C25.3333 8.45749 23.5424 6.66663 21.3333 6.66663C19.1241 6.66663 17.3333 8.45749 17.3333 10.6666C17.3333 12.8758 19.1241 14.6666 21.3333 14.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M21.6666 16C24.4273 16.0004 26.6666 18.2385 26.6666 21V22.6666C26.6666 24.1394 25.4727 25.3333 23.9999 25.3333H20.135C18.0324 25.3333 16.1545 24.018 15.436 22.042L14.6843 19.9747C14.2531 18.7892 13.1264 18 11.8649 18H10.3333C8.6764 18 7.33325 19.3431 7.33325 21V22.6666C7.33325 23.0348 7.63173 23.3333 7.99992 23.3333H13.3333V25.3333H7.99992C6.52716 25.3333 5.33325 24.1394 5.33325 22.6666V21C5.33325 18.2385 7.57183 16 10.3333 16H11.8649C13.9674 16 15.8453 17.3153 16.5638 19.2913L17.3156 21.3585C17.7467 22.5441 18.8734 23.3333 20.135 23.3333H23.9999C24.3681 23.3333 24.6666 23.0348 24.6666 22.6666V21C24.6666 19.3437 23.3233 18.0004 21.6666 18H20.135V16H21.6666Z",
+    fill: "#44546F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M20.135 16C19.5972 16 18.7183 16.1407 18.0518 16.4564L18.908 18.2639C19.064 18.19 19.288 18.1205 19.537 18.0703C19.785 18.0203 20.0045 18 20.135 18V16Z",
+    fill: "#44546F"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_2032_552"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "32",
+    height: "32",
+    rx: "4",
+    fill: "white"
+  })))));
+}

package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css

@@ -0,0 +1,12 @@
+
+._2rko19bv{border-radius:10px}
+._2rko1tcg{border-radius:24px}
+._2rko1y44{border-radius:4px}
+._2rkoftgi{border-radius:8px}
+._2rkoi2wt{border-radius:6px}
+._2rkozwfg{border-radius:2pc}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._4t3i1osq{height:100%}
+._i0dl1osq{flex-basis:100%}

package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js

@@ -0,0 +1,66 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useState } from 'react';
+import { AvatarContent } from '@atlaskit/avatar';
+import { FallbackAvatar } from './fallback';
+var avatarImageStyles = {
+  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq"
+};
+var SIZES = {
+  xsmall: 16,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 96,
+  xxlarge: 128
+};
+var borderRadiusMap = {
+  xsmall: "_2rko1y44",
+  small: "_2rkoi2wt",
+  medium: "_2rkoftgi",
+  large: "_2rko19bv",
+  xlarge: "_2rko1tcg",
+  xxlarge: "_2rkozwfg"
+};
+
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+export var TeamAvatarImage = function TeamAvatarImage(_ref) {
+  var _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    src = _ref.src,
+    size = _ref.size,
+    testId = _ref.testId;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If src changes, reset state
+  useEffect(function () {
+    setHasImageErrored(false);
+  }, [src]);
+  if (!src || hasImageErrored) {
+    return /*#__PURE__*/React.createElement(FallbackAvatar, {
+      "aria-label": alt,
+      width: SIZES[size],
+      height: SIZES[size],
+      "data-testid": testId
+    });
+  }
+  return /*#__PURE__*/React.createElement(AvatarContent, null, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt,
+    "data-testId": testId && "".concat(testId, "--image"),
+    onError: function onError() {
+      return setHasImageErrored(true);
+    },
+    className: ax([avatarImageStyles.image, borderRadiusMap[size]])
+  }));
+};

package/dist/types/ui/teams-avatar/teams-avatar-image/index.d.ts

@@ -11,5 +11,6 @@ type AvatarImageProps = {
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export declare const TeamAvatarImage: ({ alt, src, size, testId }: AvatarImageProps) => jsx.JSX.Element;
+export declare const TeamAvatarImageLegacy: ({ alt, src, size, testId }: AvatarImageProps) => jsx.JSX.Element;
+export declare const TeamAvatarImage: (props: AvatarImageProps) => jsx.JSX.Element;
 export {};

package/dist/types/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/fallback/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function FallbackAvatar(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

package/dist/types/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+import { type SizeType } from '@atlaskit/avatar';
+type AvatarImageProps = {
+    size: SizeType;
+    alt?: string;
+    src?: string;
+    testId?: string;
+};
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+export declare const TeamAvatarImage: ({ alt, src, size, testId }: AvatarImageProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/index.d.ts

@@ -11,5 +11,6 @@ type AvatarImageProps = {
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export declare const TeamAvatarImage: ({ alt, src, size, testId }: AvatarImageProps) => jsx.JSX.Element;
+export declare const TeamAvatarImageLegacy: ({ alt, src, size, testId }: AvatarImageProps) => jsx.JSX.Element;
+export declare const TeamAvatarImage: (props: AvatarImageProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/fallback/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function FallbackAvatar(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type SizeType } from '@atlaskit/avatar';
+type AvatarImageProps = {
+    size: SizeType;
+    alt?: string;
+    src?: string;
+    testId?: string;
+};
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+export declare const TeamAvatarImage: ({ alt, src, size, testId }: AvatarImageProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/teams-avatar",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "A team avatar is a visual representation of a team.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -43,6 +43,7 @@
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.2",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
@@ -100,6 +101,9 @@
 	"platform-feature-flags": {
 		"enable-team-avatar-switch": {
 			"type": "boolean"
+		},
+		"team-avatar-radii": {
+			"type": "boolean"
 		}
 	}
 }