@atlaskit/teams-avatar 2.3.0 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css +58 -2
  3. package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js +31 -3
  4. package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css +58 -2
  5. package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js +31 -3
  6. package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css +58 -2
  7. package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js +31 -3
  8. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/teams-avatar
2
2
 
3
+ ## 2.3.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#132848](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132848)
8
+ [`95e57fc68ae05`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/95e57fc68ae05) -
9
+ Fix for visibile avatar background due to radius change
10
+ - Updated dependencies
11
+
12
+ ## 2.3.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#129972](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129972)
17
+ [`b2d69a39e6687`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2d69a39e6687) -
18
+ Update `@compiled/react` dependency for improved type checking support.
19
+ - Updated dependencies
20
+
3
21
  ## 2.3.0
4
22
 
5
23
  ### Minor Changes
package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css CHANGED
@@ -1,12 +1,68 @@
1
1
 
2
+ ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
3
+ ._19itglyw{border:none}
2
4
  ._2rko19bv{border-radius:10px}
5
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
3
6
  ._2rko1tcg{border-radius:24px}
4
7
  ._2rko1y44{border-radius:4px}
5
8
  ._2rkoftgi{border-radius:8px}
6
9
  ._2rkoi2wt{border-radius:6px}
7
- ._2rkozwfg{border-radius:2pc}._16jlkb7n{flex-grow:1}
10
+ ._2rkozwfg{border-radius:2pc}
11
+ ._9v7aze3t:after{inset:var(--ds-space-0,0)}
12
+ ._qc5o1p41:after{transition:opacity .2s}
13
+ ._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
14
+ ._12ji1r31{outline-color:currentColor}
15
+ ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
16
+ ._12y31o36{outline-width:medium}
17
+ ._16jlkb7n{flex-grow:1}
18
+ ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
19
+ ._18m915vq{overflow-y:hidden}
20
+ ._18postnw:after{position:absolute}
21
+ ._1bah1h6o{justify-content:center}
22
+ ._1bsb16xz{width:6pc}
8
23
  ._1bsb1osq{width:100%}
24
+ ._1bsb1qr7{width:8pc}
25
+ ._1bsb1tcg{width:24px}
26
+ ._1bsb1ylp{width:40px}
27
+ ._1bsb7vkz{width:1pc}
28
+ ._1bsbzwfg{width:2pc}
9
29
  ._1e0c1txw{display:flex}
30
+ ._1hfk1j28:after{background-color:transparent}
31
+ ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
10
32
  ._1o9zkb7n{flex-shrink:1}
33
+ ._1peqidpf:after{opacity:0}
34
+ ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
35
+ ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
36
+ ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
37
+ ._1qu2glyw{outline-style:none}
38
+ ._1reo15vq{overflow-x:hidden}
39
+ ._2lx21bp4{flex-direction:column}
40
+ ._4cvr1fhb{align-items:stretch}
41
+ ._4t3i16xz{height:6pc}
11
42
  ._4t3i1osq{height:100%}
12
- ._i0dl1osq{flex-basis:100%}
43
+ ._4t3i1qr7{height:8pc}
44
+ ._4t3i1tcg{height:24px}
45
+ ._4t3i1ylp{height:40px}
46
+ ._4t3i7vkz{height:1pc}
47
+ ._4t3izwfg{height:2pc}
48
+ ._4tpu1g4v:hover:after{background-color:var(--ds-interaction-hovered,rgba(9,30,66,.36))}
49
+ ._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
50
+ ._80om13gf{cursor:not-allowed}
51
+ ._80om1kw7{cursor:inherit}
52
+ ._80omtlke{cursor:pointer}
53
+ ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
54
+ ._aetrf705:after{content:" "}
55
+ ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
56
+ ._bfhkcxp3{background-color:var(--avatar-bg-color)}
57
+ ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
58
+ ._eeh8kb7n:active:after{opacity:1}
59
+ ._ez1ykb7n:hover:after{opacity:1}
60
+ ._gcm1182g:active:after{background-color:var(--ds-interaction-pressed,rgba(9,30,66,.36))}
61
+ ._i0dl1osq{flex-basis:100%}
62
+ ._kqswh2mm{position:relative}
63
+ ._kqswpfqs{position:static}
64
+ ._t9ec1aqe{transform:translateZ(0)}
65
+ ._vchh1ntv{box-sizing:content-box}
66
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
67
+ ._z0ai1osq:after{width:100%}
68
+ @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js CHANGED
@@ -12,10 +12,26 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
- var _avatar = require("@atlaskit/avatar");
16
15
  var _fallback = require("./fallback");
17
16
  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); }
18
17
  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; }
18
+ var boxShadowCssVar = '--avatar-box-shadow';
19
+ var bgColorCssVar = '--avatar-bg-color';
20
+
21
+ /**
22
+ * We need to maintan the container styles manually until Avatar provides the correct border radius.
23
+ * After that we can return to wrapping in <AvatarContent> rather than span
24
+ */
25
+ var containerStyles = {
26
+ 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",
27
+ circle: "_2rko1q5u _14mj1q5u",
28
+ positionRelative: "_kqswh2mm",
29
+ disabled: "_80om13gf _1hfkvuon _1peqs237"
30
+ };
31
+ var unboundStyles = {
32
+ root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
33
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
34
+ };
19
35
  var avatarImageStyles = {
20
36
  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq"
21
37
  };
@@ -35,6 +51,14 @@ var borderRadiusMap = {
35
51
  xlarge: "_2rko1tcg",
36
52
  xxlarge: "_2rkozwfg"
37
53
  };
54
+ var widthHeightMap = {
55
+ xsmall: "_1bsb7vkz _4t3i7vkz",
56
+ small: "_1bsb1tcg _4t3i1tcg",
57
+ medium: "_1bsbzwfg _4t3izwfg",
58
+ large: "_1bsb1ylp _4t3i1ylp",
59
+ xlarge: "_1bsb16xz _4t3i16xz",
60
+ xxlarge: "_1bsb1qr7 _4t3i1qr7"
61
+ };
38
62
 
39
63
  /**
40
64
  * __Avatar image__
@@ -64,13 +88,17 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
64
88
  "data-testid": testId
65
89
  });
66
90
  }
67
- return /*#__PURE__*/React.createElement(_avatar.AvatarContent, null, /*#__PURE__*/React.createElement("img", {
91
+ return /*#__PURE__*/React.createElement("span", {
92
+ "data-testid": testId,
93
+ "aria-label": alt,
94
+ className: (0, _runtime.ax)([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
95
+ }, /*#__PURE__*/React.createElement("img", {
68
96
  src: src,
69
97
  alt: alt,
70
98
  "data-testId": testId && "".concat(testId, "--image"),
71
99
  onError: function onError() {
72
100
  return setHasImageErrored(true);
73
101
  },
74
- className: (0, _runtime.ax)([avatarImageStyles.image, borderRadiusMap[size]])
102
+ className: (0, _runtime.ax)([avatarImageStyles.image])
75
103
  }));
76
104
  };
package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css CHANGED
@@ -1,12 +1,68 @@
1
1
 
2
+ ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
3
+ ._19itglyw{border:none}
2
4
  ._2rko19bv{border-radius:10px}
5
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
3
6
  ._2rko1tcg{border-radius:24px}
4
7
  ._2rko1y44{border-radius:4px}
5
8
  ._2rkoftgi{border-radius:8px}
6
9
  ._2rkoi2wt{border-radius:6px}
7
- ._2rkozwfg{border-radius:2pc}._16jlkb7n{flex-grow:1}
10
+ ._2rkozwfg{border-radius:2pc}
11
+ ._9v7aze3t:after{inset:var(--ds-space-0,0)}
12
+ ._qc5o1p41:after{transition:opacity .2s}
13
+ ._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
14
+ ._12ji1r31{outline-color:currentColor}
15
+ ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
16
+ ._12y31o36{outline-width:medium}
17
+ ._16jlkb7n{flex-grow:1}
18
+ ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
19
+ ._18m915vq{overflow-y:hidden}
20
+ ._18postnw:after{position:absolute}
21
+ ._1bah1h6o{justify-content:center}
22
+ ._1bsb16xz{width:6pc}
8
23
  ._1bsb1osq{width:100%}
24
+ ._1bsb1qr7{width:8pc}
25
+ ._1bsb1tcg{width:24px}
26
+ ._1bsb1ylp{width:40px}
27
+ ._1bsb7vkz{width:1pc}
28
+ ._1bsbzwfg{width:2pc}
9
29
  ._1e0c1txw{display:flex}
30
+ ._1hfk1j28:after{background-color:transparent}
31
+ ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
10
32
  ._1o9zkb7n{flex-shrink:1}
33
+ ._1peqidpf:after{opacity:0}
34
+ ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
35
+ ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
36
+ ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
37
+ ._1qu2glyw{outline-style:none}
38
+ ._1reo15vq{overflow-x:hidden}
39
+ ._2lx21bp4{flex-direction:column}
40
+ ._4cvr1fhb{align-items:stretch}
41
+ ._4t3i16xz{height:6pc}
11
42
  ._4t3i1osq{height:100%}
12
- ._i0dl1osq{flex-basis:100%}
43
+ ._4t3i1qr7{height:8pc}
44
+ ._4t3i1tcg{height:24px}
45
+ ._4t3i1ylp{height:40px}
46
+ ._4t3i7vkz{height:1pc}
47
+ ._4t3izwfg{height:2pc}
48
+ ._4tpu1g4v:hover:after{background-color:var(--ds-interaction-hovered,rgba(9,30,66,.36))}
49
+ ._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
50
+ ._80om13gf{cursor:not-allowed}
51
+ ._80om1kw7{cursor:inherit}
52
+ ._80omtlke{cursor:pointer}
53
+ ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
54
+ ._aetrf705:after{content:" "}
55
+ ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
56
+ ._bfhkcxp3{background-color:var(--avatar-bg-color)}
57
+ ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
58
+ ._eeh8kb7n:active:after{opacity:1}
59
+ ._ez1ykb7n:hover:after{opacity:1}
60
+ ._gcm1182g:active:after{background-color:var(--ds-interaction-pressed,rgba(9,30,66,.36))}
61
+ ._i0dl1osq{flex-basis:100%}
62
+ ._kqswh2mm{position:relative}
63
+ ._kqswpfqs{position:static}
64
+ ._t9ec1aqe{transform:translateZ(0)}
65
+ ._vchh1ntv{box-sizing:content-box}
66
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
67
+ ._z0ai1osq:after{width:100%}
68
+ @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js CHANGED
@@ -3,8 +3,24 @@ import "./index.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useEffect, useState } from 'react';
6
- import { AvatarContent } from '@atlaskit/avatar';
7
6
  import { FallbackAvatar } from './fallback';
7
+ const boxShadowCssVar = '--avatar-box-shadow';
8
+ const bgColorCssVar = '--avatar-bg-color';
9
+
10
+ /**
11
+ * We need to maintan the container styles manually until Avatar provides the correct border radius.
12
+ * After that we can return to wrapping in <AvatarContent> rather than span
13
+ */
14
+ const containerStyles = {
15
+ 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",
16
+ circle: "_2rko1q5u _14mj1q5u",
17
+ positionRelative: "_kqswh2mm",
18
+ disabled: "_80om13gf _1hfkvuon _1peqs237"
19
+ };
20
+ const unboundStyles = {
21
+ root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
22
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
23
+ };
8
24
  const avatarImageStyles = {
9
25
  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq"
10
26
  };
@@ -24,6 +40,14 @@ const borderRadiusMap = {
24
40
  xlarge: "_2rko1tcg",
25
41
  xxlarge: "_2rkozwfg"
26
42
  };
43
+ const widthHeightMap = {
44
+ xsmall: "_1bsb7vkz _4t3i7vkz",
45
+ small: "_1bsb1tcg _4t3i1tcg",
46
+ medium: "_1bsbzwfg _4t3izwfg",
47
+ large: "_1bsb1ylp _4t3i1ylp",
48
+ xlarge: "_1bsb16xz _4t3i16xz",
49
+ xxlarge: "_1bsb1qr7 _4t3i1qr7"
50
+ };
27
51
 
28
52
  /**
29
53
  * __Avatar image__
@@ -50,11 +74,15 @@ export const TeamAvatarImage = ({
50
74
  "data-testid": testId
51
75
  });
52
76
  }
53
- return /*#__PURE__*/React.createElement(AvatarContent, null, /*#__PURE__*/React.createElement("img", {
77
+ return /*#__PURE__*/React.createElement("span", {
78
+ "data-testid": testId,
79
+ "aria-label": alt,
80
+ className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
81
+ }, /*#__PURE__*/React.createElement("img", {
54
82
  src: src,
55
83
  alt: alt,
56
84
  "data-testId": testId && `${testId}--image`,
57
85
  onError: () => setHasImageErrored(true),
58
- className: ax([avatarImageStyles.image, borderRadiusMap[size]])
86
+ className: ax([avatarImageStyles.image])
59
87
  }));
60
88
  };
package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.compiled.css CHANGED
@@ -1,12 +1,68 @@
1
1
 
2
+ ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
3
+ ._19itglyw{border:none}
2
4
  ._2rko19bv{border-radius:10px}
5
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
3
6
  ._2rko1tcg{border-radius:24px}
4
7
  ._2rko1y44{border-radius:4px}
5
8
  ._2rkoftgi{border-radius:8px}
6
9
  ._2rkoi2wt{border-radius:6px}
7
- ._2rkozwfg{border-radius:2pc}._16jlkb7n{flex-grow:1}
10
+ ._2rkozwfg{border-radius:2pc}
11
+ ._9v7aze3t:after{inset:var(--ds-space-0,0)}
12
+ ._qc5o1p41:after{transition:opacity .2s}
13
+ ._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
14
+ ._12ji1r31{outline-color:currentColor}
15
+ ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
16
+ ._12y31o36{outline-width:medium}
17
+ ._16jlkb7n{flex-grow:1}
18
+ ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
19
+ ._18m915vq{overflow-y:hidden}
20
+ ._18postnw:after{position:absolute}
21
+ ._1bah1h6o{justify-content:center}
22
+ ._1bsb16xz{width:6pc}
8
23
  ._1bsb1osq{width:100%}
24
+ ._1bsb1qr7{width:8pc}
25
+ ._1bsb1tcg{width:24px}
26
+ ._1bsb1ylp{width:40px}
27
+ ._1bsb7vkz{width:1pc}
28
+ ._1bsbzwfg{width:2pc}
9
29
  ._1e0c1txw{display:flex}
30
+ ._1hfk1j28:after{background-color:transparent}
31
+ ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
10
32
  ._1o9zkb7n{flex-shrink:1}
33
+ ._1peqidpf:after{opacity:0}
34
+ ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
35
+ ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
36
+ ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
37
+ ._1qu2glyw{outline-style:none}
38
+ ._1reo15vq{overflow-x:hidden}
39
+ ._2lx21bp4{flex-direction:column}
40
+ ._4cvr1fhb{align-items:stretch}
41
+ ._4t3i16xz{height:6pc}
11
42
  ._4t3i1osq{height:100%}
12
- ._i0dl1osq{flex-basis:100%}
43
+ ._4t3i1qr7{height:8pc}
44
+ ._4t3i1tcg{height:24px}
45
+ ._4t3i1ylp{height:40px}
46
+ ._4t3i7vkz{height:1pc}
47
+ ._4t3izwfg{height:2pc}
48
+ ._4tpu1g4v:hover:after{background-color:var(--ds-interaction-hovered,rgba(9,30,66,.36))}
49
+ ._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
50
+ ._80om13gf{cursor:not-allowed}
51
+ ._80om1kw7{cursor:inherit}
52
+ ._80omtlke{cursor:pointer}
53
+ ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
54
+ ._aetrf705:after{content:" "}
55
+ ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
56
+ ._bfhkcxp3{background-color:var(--avatar-bg-color)}
57
+ ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
58
+ ._eeh8kb7n:active:after{opacity:1}
59
+ ._ez1ykb7n:hover:after{opacity:1}
60
+ ._gcm1182g:active:after{background-color:var(--ds-interaction-pressed,rgba(9,30,66,.36))}
61
+ ._i0dl1osq{flex-basis:100%}
62
+ ._kqswh2mm{position:relative}
63
+ ._kqswpfqs{position:static}
64
+ ._t9ec1aqe{transform:translateZ(0)}
65
+ ._vchh1ntv{box-sizing:content-box}
66
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
67
+ ._z0ai1osq:after{width:100%}
68
+ @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js CHANGED
@@ -4,8 +4,24 @@ import "./index.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useEffect, useState } from 'react';
7
- import { AvatarContent } from '@atlaskit/avatar';
8
7
  import { FallbackAvatar } from './fallback';
8
+ var boxShadowCssVar = '--avatar-box-shadow';
9
+ var bgColorCssVar = '--avatar-bg-color';
10
+
11
+ /**
12
+ * We need to maintan the container styles manually until Avatar provides the correct border radius.
13
+ * After that we can return to wrapping in <AvatarContent> rather than span
14
+ */
15
+ var containerStyles = {
16
+ 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",
17
+ circle: "_2rko1q5u _14mj1q5u",
18
+ positionRelative: "_kqswh2mm",
19
+ disabled: "_80om13gf _1hfkvuon _1peqs237"
20
+ };
21
+ var unboundStyles = {
22
+ root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
23
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
24
+ };
9
25
  var avatarImageStyles = {
10
26
  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq"
11
27
  };
@@ -25,6 +41,14 @@ var borderRadiusMap = {
25
41
  xlarge: "_2rko1tcg",
26
42
  xxlarge: "_2rkozwfg"
27
43
  };
44
+ var widthHeightMap = {
45
+ xsmall: "_1bsb7vkz _4t3i7vkz",
46
+ small: "_1bsb1tcg _4t3i1tcg",
47
+ medium: "_1bsbzwfg _4t3izwfg",
48
+ large: "_1bsb1ylp _4t3i1ylp",
49
+ xlarge: "_1bsb16xz _4t3i16xz",
50
+ xxlarge: "_1bsb1qr7 _4t3i1qr7"
51
+ };
28
52
 
29
53
  /**
30
54
  * __Avatar image__
@@ -54,13 +78,17 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
54
78
  "data-testid": testId
55
79
  });
56
80
  }
57
- return /*#__PURE__*/React.createElement(AvatarContent, null, /*#__PURE__*/React.createElement("img", {
81
+ return /*#__PURE__*/React.createElement("span", {
82
+ "data-testid": testId,
83
+ "aria-label": alt,
84
+ className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
85
+ }, /*#__PURE__*/React.createElement("img", {
58
86
  src: src,
59
87
  alt: alt,
60
88
  "data-testId": testId && "".concat(testId, "--image"),
61
89
  onError: function onError() {
62
90
  return setHasImageErrored(true);
63
91
  },
64
- className: ax([avatarImageStyles.image, borderRadiusMap[size]])
92
+ className: ax([avatarImageStyles.image])
65
93
  }));
66
94
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/teams-avatar",
3
- "version": "2.3.0",
3
+ "version": "2.3.2",
4
4
  "description": "A team avatar is a visual representation of a team.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,13 +37,13 @@
37
37
  "dependencies": {
38
38
  "@atlaskit/avatar": "^25.0.0",
39
39
  "@atlaskit/css": "^0.10.0",
40
- "@atlaskit/icon": "^25.0.0",
40
+ "@atlaskit/icon": "^25.2.0",
41
41
  "@atlaskit/platform-feature-flags": "^1.1.0",
42
- "@atlaskit/primitives": "^14.1.0",
42
+ "@atlaskit/primitives": "^14.2.0",
43
43
  "@atlaskit/theme": "^18.0.0",
44
44
  "@atlaskit/tokens": "^4.5.0",
45
45
  "@babel/runtime": "^7.0.0",
46
- "@compiled/react": "^0.18.2",
46
+ "@compiled/react": "^0.18.3",
47
47
  "@emotion/react": "^11.7.1"
48
48
  },
49
49
  "peerDependencies": {