@atlaskit/teams-avatar 2.3.13 → 2.3.15

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/teams-avatar
 
+## 2.3.15
+
+### Patch Changes
+
+- [`765759f2ef1a6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/765759f2ef1a6) -
+  Clean up of FGs
+
+## 2.3.14
+
+### Patch Changes
+
+- [`ef3b2dfa2f8a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef3b2dfa2f8a8) -
+  Internal changes to use radius tokens. No visual changes.
+- Updated dependencies
+
 ## 2.3.13
 
 ### Patch Changes

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

@@ -12,7 +12,6 @@ var _react = _interopRequireDefault(require("react"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _colors = require("@atlaskit/theme/colors");
 var _teamsAvatarImage = require("./teams-avatar-image");
-var _utils = require("./utils");
 var _excluded = ["testId", "src", "size", "teamId"];
 /*
  * The component accepts src and teamId as input params. Order of preference:
@@ -34,7 +33,7 @@ function TeamAvatar(_ref) {
   // Strip ARI in case the teamId was given in that format
   teamId = teamId.replace('ari:cloud:identity::team/', '');
   return /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({
-    appearance: (0, _utils.isSquareIcon)(src) ? 'square' : 'circle'
+    appearance: "square"
   }, props, {
     size: size,
     src: src,

package/dist/{es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next → cjs/ui/teams-avatar/teams-avatar-image}/index.compiled.css

@@ -1,12 +1,12 @@
 
 ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
 ._19itglyw{border:none}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko19bv{border-radius:10px}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1tcg{border-radius:24px}
-._2rko1y44{border-radius:4px}
-._2rkoi2wt{border-radius:6px}
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._2rkozwfg{border-radius:2pc}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._qc5o1p41:after{transition:opacity .2s}

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

@@ -1,39 +1,40 @@
+/* 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.TeamAvatarImageLegacy = exports.TeamAvatarImage = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _react = require("react");
-var _react2 = require("@emotion/react");
-var _avatar = require("@atlaskit/avatar");
-var _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/core/people-group"));
-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
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
-var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
-// used in a size calculation so can't be a token. Without this the avatar looks very squished
-var ICON_PADDING = 4;
-var avatarDefaultIconStyles = (0, _react2.css)({
-  display: 'flex',
-  backgroundColor: ICON_COLOR,
-  borderRadius: '50%',
-  width: '100%',
-  height: '100%',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
+var _utils = require("./utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var boxShadowCssVar = '--avatar-box-shadow';
+var bgColorCssVar = '--avatar-bg-color';
+
+/**
+ * We need to maintan the container styles manually until Avatar provides the correct border radius.
+ * After that we can return to wrapping in <AvatarContent> rather than span
+ */
+var containerStyles = {
+  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw",
+  circle: "_2rko1q5u _14mj1q5u",
+  positionRelative: "_kqswh2mm",
+  disabled: "_80om13gf _1hfkvuon _1peqs237"
+};
+var unboundStyles = {
+  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
+  interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
+};
+var avatarImageStyles = {
+  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq"
+};
 var SIZES = {
   xsmall: 16,
   small: 24,
@@ -42,84 +43,64 @@ var SIZES = {
   xlarge: 96,
   xxlarge: 128
 };
-var nestedAvatarStyles = Object.entries(_avatar.AVATAR_SIZES).reduce(function (styles, _ref) {
-  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-    key = _ref2[0],
-    size = _ref2[1];
-  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react2.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: "".concat(size, "px"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(size, "px"),
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& svg': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      width: "".concat(size - ICON_PADDING, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      height: "".concat(size - ICON_PADDING, "px")
-    }
-  })));
-}, {});
-var avatarImageStyles = (0, _react2.css)({
-  display: 'flex',
-  flex: '1 1 100%',
-  width: '100%',
-  height: '100%'
-});
+var borderRadiusMap = {
+  xsmall: "_2rko12b0",
+  small: "_2rko1qi0",
+  medium: "_2rko1mok",
+  large: "_2rko19bv",
+  xlarge: "_2rko1tcg",
+  xxlarge: "_2rkozwfg"
+};
+var widthHeightMap = {
+  xsmall: "_1bsb7vkz _4t3i7vkz",
+  small: "_1bsb1tcg _4t3i1tcg",
+  medium: "_1bsbzwfg _4t3izwfg",
+  large: "_1bsb1ylp _4t3i1ylp",
+  xlarge: "_1bsb16xz _4t3i16xz",
+  xxlarge: "_1bsb1qr7 _4t3i1qr7"
+};
 
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-var TeamAvatarImageLegacy = exports.TeamAvatarImageLegacy = function TeamAvatarImageLegacy(_ref3) {
-  var _ref3$alt = _ref3.alt,
-    alt = _ref3$alt === void 0 ? '' : _ref3$alt,
-    src = _ref3.src,
-    size = _ref3.size,
-    testId = _ref3.testId;
+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,
+    teamId = _ref.teamId;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
+  var avatarSrc = (0, _utils.getTeamAvatarSrc)(src, teamId);
 
   // If src changes, reset state
   (0, _react.useEffect)(function () {
     setHasImageErrored(false);
-  }, [src]);
-  if (!src || hasImageErrored) {
-    if ((0, _platformFeatureFlags.fg)('enable-team-avatar-switch')) {
-      return (0, _react2.jsx)(_fallback.FallbackAvatar, {
-        "aria-label": alt,
-        width: SIZES[size],
-        height: SIZES[size],
-        "data-testid": testId
-      });
-    }
-    return (0, _react2.jsx)("span", {
-      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
-    }, (0, _react2.jsx)(_peopleGroup.default, {
-      label: alt,
-      color: ICON_BACKGROUND,
-      LEGACY_secondaryColor: ICON_COLOR,
-      testId: testId && "".concat(testId, "--team"),
-      spacing: "spacious",
-      LEGACY_fallbackIcon: _people.default
-    }));
+  }, [avatarSrc]);
+  if (!avatarSrc || hasImageErrored) {
+    return /*#__PURE__*/React.createElement(_fallback.FallbackAvatar, {
+      "aria-label": alt,
+      width: SIZES[size],
+      height: SIZES[size],
+      "data-testid": testId
+    });
   }
-  return (0, _react2.jsx)(_avatar.AvatarContent, null, (0, _react2.jsx)("img", {
-    src: src,
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId,
+    "aria-label": alt,
+    className: (0, _runtime.ax)([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
+  }, /*#__PURE__*/React.createElement("img", {
+    src: avatarSrc,
     alt: alt,
-    "data-testid": testId && "".concat(testId, "--image"),
-    css: avatarImageStyles,
+    "data-testId": testId && "".concat(testId, "--image"),
     onError: function onError() {
       return setHasImageErrored(true);
-    }
+    },
+    className: (0, _runtime.ax)([avatarImageStyles.image])
   }));
-};
-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/utils.js

@@ -4,28 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isSquareIcon = isSquareIcon;
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
- * This is a hack to toggle between square and circle icons based on the
- * network response as we want to FG the change in the BE.
- * This func will be removed once the BE is rolled out.
- * Square icon URLs:
- * - https://ptc-directory-sited-static.us-east-1.prod.public.atl-paas.net/teams/avatars/v4/blue_4.svg
- * - https://teams-directory-frontend.stg-east.frontend.public.atl-paas.net/assets/teams/avatars/v4/blue_1.svg
+ * @deprecated teams avatar is now always square
  */
-function isSquareIcon(src) {
-  if (!src) {
-    return false;
-  }
-  try {
-    var url = new URL(src);
-    var host = url.host;
-    var path = url.pathname;
-    if ((host.startsWith('ptc-directory-sited-static') || host.startsWith('teams-directory-frontend')) && path.includes('teams/avatars/v4') && (0, _platformFeatureFlags.fg)('enable-team-avatar-switch')) {
-      return true;
-    }
-  } catch (_unused) {
-    // The src wasn't a URL, so it's obviously not the refreshed avatar.
-  }
-  return false;
+function isSquareIcon(_src) {
+  return true;
 }

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

@@ -3,7 +3,6 @@ import React from 'react';
 import Avatar from '@atlaskit/avatar';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { TeamAvatarImage } from './teams-avatar-image';
-import { isSquareIcon } from './utils';
 
 /*
  * The component accepts src and teamId as input params. Order of preference:
@@ -24,7 +23,7 @@ export default function TeamAvatar({
   // Strip ARI in case the teamId was given in that format
   teamId = teamId.replace('ari:cloud:identity::team/', '');
   return /*#__PURE__*/React.createElement(Avatar, _extends({
-    appearance: isSquareIcon(src) ? 'square' : 'circle'
+    appearance: "square"
   }, props, {
     size: size,
     src: src,

package/dist/{esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next → es2019/ui/teams-avatar/teams-avatar-image}/index.compiled.css

@@ -1,12 +1,12 @@
 
 ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
 ._19itglyw{border:none}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko19bv{border-radius:10px}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1tcg{border-radius:24px}
-._2rko1y44{border-radius:4px}
-._2rkoi2wt{border-radius:6px}
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._2rkozwfg{border-radius:2pc}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._qc5o1p41:after{transition:opacity .2s}

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

@@ -1,31 +1,30 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* 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';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { AVATAR_SIZES, AvatarContent } from '@atlaskit/avatar';
-import PeopleGroupIcon from '@atlaskit/icon/core/people-group';
-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
-const ICON_PADDING = 4;
-const avatarDefaultIconStyles = css({
-  display: 'flex',
-  backgroundColor: ICON_COLOR,
-  borderRadius: '50%',
-  width: '100%',
-  height: '100%',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
+import { getTeamAvatarSrc } from './utils';
+const boxShadowCssVar = '--avatar-box-shadow';
+const bgColorCssVar = '--avatar-bg-color';
+
+/**
+ * We need to maintan the container styles manually until Avatar provides the correct border radius.
+ * After that we can return to wrapping in <AvatarContent> rather than span
+ */
+const containerStyles = {
+  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw",
+  circle: "_2rko1q5u _14mj1q5u",
+  positionRelative: "_kqswh2mm",
+  disabled: "_80om13gf _1hfkvuon _1peqs237"
+};
+const unboundStyles = {
+  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
+  interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
+};
+const avatarImageStyles = {
+  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq"
+};
 const SIZES = {
   xsmall: 16,
   small: 24,
@@ -34,79 +33,59 @@ const SIZES = {
   xlarge: 96,
   xxlarge: 128
 };
-const nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
-  return {
-    ...styles,
-    [key]: css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      width: `${size}px`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      height: `${size}px`,
-      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '& svg': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        width: `${size - ICON_PADDING}px`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        height: `${size - ICON_PADDING}px`
-      }
-    })
-  };
-}, {});
-const avatarImageStyles = css({
-  display: 'flex',
-  flex: '1 1 100%',
-  width: '100%',
-  height: '100%'
-});
+const borderRadiusMap = {
+  xsmall: "_2rko12b0",
+  small: "_2rko1qi0",
+  medium: "_2rko1mok",
+  large: "_2rko19bv",
+  xlarge: "_2rko1tcg",
+  xxlarge: "_2rkozwfg"
+};
+const widthHeightMap = {
+  xsmall: "_1bsb7vkz _4t3i7vkz",
+  small: "_1bsb1tcg _4t3i1tcg",
+  medium: "_1bsbzwfg _4t3izwfg",
+  large: "_1bsb1ylp _4t3i1ylp",
+  xlarge: "_1bsb16xz _4t3i16xz",
+  xxlarge: "_1bsb1qr7 _4t3i1qr7"
+};
 
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export const TeamAvatarImageLegacy = ({
+export const TeamAvatarImage = ({
   alt = '',
   src,
   size,
-  testId
+  testId,
+  teamId
 }) => {
   const [hasImageErrored, setHasImageErrored] = useState(false);
+  const avatarSrc = getTeamAvatarSrc(src, teamId);
 
   // If src changes, reset state
   useEffect(() => {
     setHasImageErrored(false);
-  }, [src]);
-  if (!src || hasImageErrored) {
-    if (fg('enable-team-avatar-switch')) {
-      return jsx(FallbackAvatar, {
-        "aria-label": alt,
-        width: SIZES[size],
-        height: SIZES[size],
-        "data-testid": testId
-      });
-    }
-    return jsx("span", {
-      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
-    }, jsx(PeopleGroupIcon, {
-      label: alt,
-      color: ICON_BACKGROUND,
-      LEGACY_secondaryColor: ICON_COLOR,
-      testId: testId && `${testId}--team`,
-      spacing: "spacious",
-      LEGACY_fallbackIcon: TeamIcon
-    }));
+  }, [avatarSrc]);
+  if (!avatarSrc || hasImageErrored) {
+    return /*#__PURE__*/React.createElement(FallbackAvatar, {
+      "aria-label": alt,
+      width: SIZES[size],
+      height: SIZES[size],
+      "data-testid": testId
+    });
   }
-  return jsx(AvatarContent, null, jsx("img", {
-    src: src,
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId,
+    "aria-label": alt,
+    className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
+  }, /*#__PURE__*/React.createElement("img", {
+    src: avatarSrc,
     alt: alt,
-    "data-testid": testId && `${testId}--image`,
-    css: avatarImageStyles,
-    onError: () => setHasImageErrored(true)
+    "data-testId": testId && `${testId}--image`,
+    onError: () => setHasImageErrored(true),
+    className: ax([avatarImageStyles.image])
   }));
-};
-export const TeamAvatarImage = props => {
-  if (fg('team-avatar-radii')) {
-    return jsx(TeamAvatarImageNext, props);
-  }
-  return jsx(TeamAvatarImageLegacy, props);
 };

package/dist/es2019/ui/teams-avatar/utils.js

@@ -1,25 +1,6 @@
-import { fg } from '@atlaskit/platform-feature-flags';
 /**
- * This is a hack to toggle between square and circle icons based on the
- * network response as we want to FG the change in the BE.
- * This func will be removed once the BE is rolled out.
- * Square icon URLs:
- * - https://ptc-directory-sited-static.us-east-1.prod.public.atl-paas.net/teams/avatars/v4/blue_4.svg
- * - https://teams-directory-frontend.stg-east.frontend.public.atl-paas.net/assets/teams/avatars/v4/blue_1.svg
+ * @deprecated teams avatar is now always square
  */
-export function isSquareIcon(src) {
-  if (!src) {
-    return false;
-  }
-  try {
-    const url = new URL(src);
-    const host = url.host;
-    const path = url.pathname;
-    if ((host.startsWith('ptc-directory-sited-static') || host.startsWith('teams-directory-frontend')) && path.includes('teams/avatars/v4') && fg('enable-team-avatar-switch')) {
-      return true;
-    }
-  } catch {
-    // The src wasn't a URL, so it's obviously not the refreshed avatar.
-  }
-  return false;
+export function isSquareIcon(_src) {
+  return true;
 }

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

@@ -5,7 +5,6 @@ import React from 'react';
 import Avatar from '@atlaskit/avatar';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { TeamAvatarImage } from './teams-avatar-image';
-import { isSquareIcon } from './utils';
 
 /*
  * The component accepts src and teamId as input params. Order of preference:
@@ -27,7 +26,7 @@ export default function TeamAvatar(_ref) {
   // Strip ARI in case the teamId was given in that format
   teamId = teamId.replace('ari:cloud:identity::team/', '');
   return /*#__PURE__*/React.createElement(Avatar, _extends({
-    appearance: isSquareIcon(src) ? 'square' : 'circle'
+    appearance: "square"
   }, props, {
     size: size,
     src: src,

package/dist/{cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next → esm/ui/teams-avatar/teams-avatar-image}/index.compiled.css

@@ -1,12 +1,12 @@
 
 ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
 ._19itglyw{border:none}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko19bv{border-radius:10px}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1tcg{border-radius:24px}
-._2rko1y44{border-radius:4px}
-._2rkoi2wt{border-radius:6px}
-._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._2rkozwfg{border-radius:2pc}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._qc5o1p41:after{transition:opacity .2s}