@atlaskit/avatar 25.10.0 → 25.11.1

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 (17) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/avatar-content.compiled.css +2 -0
  3. package/dist/cjs/avatar-content.js +3 -2
  4. package/dist/cjs/avatar.js +1 -1
  5. package/dist/cjs/presence.js +6 -7
  6. package/dist/cjs/status.js +6 -7
  7. package/dist/es2019/avatar-content.compiled.css +2 -0
  8. package/dist/es2019/avatar-content.js +3 -2
  9. package/dist/es2019/avatar.js +1 -1
  10. package/dist/es2019/presence.js +6 -7
  11. package/dist/es2019/status.js +6 -7
  12. package/dist/esm/avatar-content.compiled.css +2 -0
  13. package/dist/esm/avatar-content.js +3 -2
  14. package/dist/esm/avatar.js +1 -1
  15. package/dist/esm/presence.js +6 -7
  16. package/dist/esm/status.js +6 -7
  17. package/package.json +11 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 25.11.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
8
+ Removes redundant fallback color values via @atlaskit/theme
9
+
10
+ ## 25.11.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`2596f105ed08c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2596f105ed08c) -
15
+ [ux] Added motion on hover for interactive Avatar behind fg platform-dst-motion-uplift
16
+
3
17
  ## 25.10.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/avatar-content.compiled.css CHANGED
@@ -8,6 +8,7 @@
8
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
11
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
12
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
13
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -83,5 +84,6 @@
83
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
84
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
85
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
86
88
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}._4davidpf:focus-visible{outline-width:0}}
87
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/cjs/avatar-content.js CHANGED
@@ -35,7 +35,8 @@ var unboundStyles = {
35
35
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
36
36
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
37
37
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
38
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
38
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
39
+ interactiveMotion: "_v564155l _1llweo6y"
39
40
  };
40
41
  var widthHeightMap = {
41
42
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -103,7 +104,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
103
104
  target: target,
104
105
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
105
106
  }, {
106
- className: (0, _runtime.ax)([unboundStyles.root, (0, _platformFeatureFlags.fg)('avatar-custom-border') && unboundStyles.rootCustomBorder, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
107
+ className: (0, _runtime.ax)([unboundStyles.root, (0, _platformFeatureFlags.fg)('avatar-custom-border') && unboundStyles.rootCustomBorder, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isInteractive && !isDisabled && (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && unboundStyles.interactiveMotion, isDisabled && styles.disabled])
107
108
  }), children || avatarImage);
108
109
  if (appearance !== 'hexagon') {
109
110
  return renderedContent;
package/dist/cjs/avatar.js CHANGED
@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
26
26
  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; }
27
27
  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; }
28
28
  var packageName = "@atlaskit/avatar";
29
- var packageVersion = "25.9.2";
29
+ var packageVersion = "25.11.1";
30
30
  var containerStyles = null;
31
31
 
32
32
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/cjs/presence.js CHANGED
@@ -10,31 +10,30 @@ exports.default = void 0;
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var React = _react;
12
12
  var _runtime = require("@compiled/react/runtime");
13
- var _colors = require("@atlaskit/theme/colors");
14
13
  var _iconWrapper = _interopRequireDefault(require("./internal/icon-wrapper"));
15
14
  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); }
16
15
  var BusyIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
17
- fill: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
16
+ fill: "var(--ds-icon-danger, #C9372C)",
18
17
  cx: "4",
19
18
  cy: "4",
20
19
  r: "4"
21
20
  }), /*#__PURE__*/React.createElement("path", {
22
- fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
21
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
23
22
  d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
24
23
  }));
25
24
  var FocusIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("path", {
26
- fill: "var(--ds-icon-discovery, ".concat(_colors.P300, ")"),
25
+ fill: "var(--ds-icon-discovery, #AF59E1)",
27
26
  d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
28
27
  }));
29
28
  var OfflineIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("path", {
30
- fill: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
29
+ fill: "var(--ds-text-subtlest, #6B6E76)",
31
30
  d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
32
31
  }), /*#__PURE__*/React.createElement("path", {
33
- fill: "var(--ds-surface-overlay, ".concat(_colors.N40, ")"),
32
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
34
33
  d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
35
34
  }));
36
35
  var OnlineIndicator = /*#__PURE__*/React.createElement("circle", {
37
- fill: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
36
+ fill: "var(--ds-icon-success, #6A9A23)",
38
37
  cx: "4",
39
38
  cy: "4",
40
39
  r: "4"
package/dist/cjs/status.js CHANGED
@@ -10,34 +10,33 @@ exports.default = void 0;
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var React = _react;
12
12
  var _runtime = require("@compiled/react/runtime");
13
- var _colors = require("@atlaskit/theme/colors");
14
13
  var _iconWrapper = _interopRequireDefault(require("./internal/icon-wrapper"));
15
14
  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); }
16
15
  var ApprovedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
17
- fill: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
16
+ fill: "var(--ds-icon-success, #6A9A23)",
18
17
  cx: "4",
19
18
  cy: "4",
20
19
  r: "4"
21
20
  }), /*#__PURE__*/React.createElement("path", {
22
- fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
21
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
23
22
  d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
24
23
  }));
25
24
  var DeclinedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
26
- fill: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
25
+ fill: "var(--ds-icon-danger, #C9372C)",
27
26
  cx: "4",
28
27
  cy: "4",
29
28
  r: "4"
30
29
  }), /*#__PURE__*/React.createElement("path", {
31
- fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
30
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
32
31
  d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
33
32
  }));
34
33
  var LockedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
35
- fill: "var(--ds-text-subtlest, ".concat(_colors.N40, ")"),
34
+ fill: "var(--ds-text-subtlest, #6B6E76)",
36
35
  cx: "4",
37
36
  cy: "4",
38
37
  r: "4"
39
38
  }), /*#__PURE__*/React.createElement("path", {
40
- fill: "var(--ds-surface-overlay, ".concat(_colors.N500, ")"),
39
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
41
40
  d: "M4.13074827,1.21766493 L4.10368158,1.21766493 C3.36340745,1.21766493 2.76388015,1.80793503 2.76388015,2.5367787 L2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,2.54344089 C3.44054754,2.17901906 3.74031119,1.88388401 4.11044825,1.88388401 L4.1239816,1.88388401 C4.49411866,1.88388401 4.79388232,2.17901906 4.79388232,2.54344089 L4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,2.5367787 C5.47054971,1.80793503 4.8710224,1.21766493 4.13074827,1.21766493 M2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,3.88254123 L2.76388015,3.88254123 L2.76388015,3.21632216 Z M4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,3.88254123 L4.79388232,3.88254123 L4.79388232,3.21632216 Z M4.79401765,3.88254123 L3.44068287,3.88254123 L2.76401548,3.88254123 C2.39049508,3.88254123 2.08734809,4.18100738 2.08734809,4.54876031 L2.08734809,5.54808892 C2.08734809,6.10000287 2.53735205,6.54741753 3.09094491,6.54741753 L5.14375561,6.54741753 C5.69802683,6.54741753 6.14735243,6.10385072 6.14735243,5.54808892 L6.14735243,4.54876031 C6.14735243,4.18100738 5.84420544,3.88254123 5.47068504,3.88254123 L4.79401765,3.88254123 Z"
42
41
  }));
43
42
  function getStatus(status) {
package/dist/es2019/avatar-content.compiled.css CHANGED
@@ -8,6 +8,7 @@
8
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
11
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
12
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
13
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -83,5 +84,6 @@
83
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
84
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
85
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
86
88
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}._4davidpf:focus-visible{outline-width:0}}
87
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/es2019/avatar-content.js CHANGED
@@ -25,7 +25,8 @@ const unboundStyles = {
25
25
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
26
26
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
27
27
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
28
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
28
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
29
+ interactiveMotion: "_v564155l _1llweo6y"
29
30
  };
30
31
  const widthHeightMap = {
31
32
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -97,7 +98,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
97
98
  target,
98
99
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
99
100
  }, {
100
- className: ax([unboundStyles.root, fg('avatar-custom-border') && unboundStyles.rootCustomBorder, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
101
+ className: ax([unboundStyles.root, fg('avatar-custom-border') && unboundStyles.rootCustomBorder, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isInteractive && !isDisabled && fg('platform-dst-motion-uplift') && unboundStyles.interactiveMotion, isDisabled && styles.disabled])
101
102
  }), children || avatarImage);
102
103
  if (appearance !== 'hexagon') {
103
104
  return renderedContent;
package/dist/es2019/avatar.js CHANGED
@@ -14,7 +14,7 @@ import getCustomElement from './internal/get-custom-element';
14
14
  import PresenceWrapper from './internal/presence-wrapper';
15
15
  import StatusWrapper from './internal/status-wrapper';
16
16
  const packageName = "@atlaskit/avatar";
17
- const packageVersion = "25.9.2";
17
+ const packageVersion = "25.11.1";
18
18
  const containerStyles = null;
19
19
 
20
20
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/es2019/presence.js CHANGED
@@ -2,30 +2,29 @@
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import { Fragment } from 'react';
5
- import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
6
5
  import IconWrapper from './internal/icon-wrapper';
7
6
  const BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
8
- fill: `var(--ds-icon-danger, ${R300})`,
7
+ fill: "var(--ds-icon-danger, #C9372C)",
9
8
  cx: "4",
10
9
  cy: "4",
11
10
  r: "4"
12
11
  }), /*#__PURE__*/React.createElement("path", {
13
- fill: `var(--ds-surface-overlay, ${N0})`,
12
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
14
13
  d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
15
14
  }));
16
15
  const FocusIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
17
- fill: `var(--ds-icon-discovery, ${P300})`,
16
+ fill: "var(--ds-icon-discovery, #AF59E1)",
18
17
  d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
19
18
  }));
20
19
  const OfflineIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
21
- fill: `var(--ds-text-subtlest, ${N200})`,
20
+ fill: "var(--ds-text-subtlest, #6B6E76)",
22
21
  d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
23
22
  }), /*#__PURE__*/React.createElement("path", {
24
- fill: `var(--ds-surface-overlay, ${N40})`,
23
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
25
24
  d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
26
25
  }));
27
26
  const OnlineIndicator = /*#__PURE__*/React.createElement("circle", {
28
- fill: `var(--ds-icon-success, ${G300})`,
27
+ fill: "var(--ds-icon-success, #6A9A23)",
29
28
  cx: "4",
30
29
  cy: "4",
31
30
  r: "4"
package/dist/es2019/status.js CHANGED
@@ -2,33 +2,32 @@
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import { Fragment } from 'react';
5
- import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
6
5
  import IconWrapper from './internal/icon-wrapper';
7
6
  const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
8
- fill: `var(--ds-icon-success, ${G400})`,
7
+ fill: "var(--ds-icon-success, #6A9A23)",
9
8
  cx: "4",
10
9
  cy: "4",
11
10
  r: "4"
12
11
  }), /*#__PURE__*/React.createElement("path", {
13
- fill: `var(--ds-surface-overlay, ${N0})`,
12
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
14
13
  d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
15
14
  }));
16
15
  const DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
17
- fill: `var(--ds-icon-danger, ${R400})`,
16
+ fill: "var(--ds-icon-danger, #C9372C)",
18
17
  cx: "4",
19
18
  cy: "4",
20
19
  r: "4"
21
20
  }), /*#__PURE__*/React.createElement("path", {
22
- fill: `var(--ds-surface-overlay, ${N0})`,
21
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
23
22
  d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
24
23
  }));
25
24
  const LockedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
26
- fill: `var(--ds-text-subtlest, ${N40})`,
25
+ fill: "var(--ds-text-subtlest, #6B6E76)",
27
26
  cx: "4",
28
27
  cy: "4",
29
28
  r: "4"
30
29
  }), /*#__PURE__*/React.createElement("path", {
31
- fill: `var(--ds-surface-overlay, ${N500})`,
30
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
32
31
  d: "M4.13074827,1.21766493 L4.10368158,1.21766493 C3.36340745,1.21766493 2.76388015,1.80793503 2.76388015,2.5367787 L2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,2.54344089 C3.44054754,2.17901906 3.74031119,1.88388401 4.11044825,1.88388401 L4.1239816,1.88388401 C4.49411866,1.88388401 4.79388232,2.17901906 4.79388232,2.54344089 L4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,2.5367787 C5.47054971,1.80793503 4.8710224,1.21766493 4.13074827,1.21766493 M2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,3.88254123 L2.76388015,3.88254123 L2.76388015,3.21632216 Z M4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,3.88254123 L4.79388232,3.88254123 L4.79388232,3.21632216 Z M4.79401765,3.88254123 L3.44068287,3.88254123 L2.76401548,3.88254123 C2.39049508,3.88254123 2.08734809,4.18100738 2.08734809,4.54876031 L2.08734809,5.54808892 C2.08734809,6.10000287 2.53735205,6.54741753 3.09094491,6.54741753 L5.14375561,6.54741753 C5.69802683,6.54741753 6.14735243,6.10385072 6.14735243,5.54808892 L6.14735243,4.54876031 C6.14735243,4.18100738 5.84420544,3.88254123 5.47068504,3.88254123 L4.79401765,3.88254123 Z"
33
32
  }));
34
33
  function getStatus(status) {
package/dist/esm/avatar-content.compiled.css CHANGED
@@ -8,6 +8,7 @@
8
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
11
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
12
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
13
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -83,5 +84,6 @@
83
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
84
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
85
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
86
88
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}._4davidpf:focus-visible{outline-width:0}}
87
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/esm/avatar-content.js CHANGED
@@ -26,7 +26,8 @@ var unboundStyles = {
26
26
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
27
27
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
28
28
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
29
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
29
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
30
+ interactiveMotion: "_v564155l _1llweo6y"
30
31
  };
31
32
  var widthHeightMap = {
32
33
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -94,7 +95,7 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
94
95
  target: target,
95
96
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
96
97
  }, {
97
- className: ax([unboundStyles.root, fg('avatar-custom-border') && unboundStyles.rootCustomBorder, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
98
+ className: ax([unboundStyles.root, fg('avatar-custom-border') && unboundStyles.rootCustomBorder, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isInteractive && !isDisabled && fg('platform-dst-motion-uplift') && unboundStyles.interactiveMotion, isDisabled && styles.disabled])
98
99
  }), children || avatarImage);
99
100
  if (appearance !== 'hexagon') {
100
101
  return renderedContent;
package/dist/esm/avatar.js CHANGED
@@ -17,7 +17,7 @@ import getCustomElement from './internal/get-custom-element';
17
17
  import PresenceWrapper from './internal/presence-wrapper';
18
18
  import StatusWrapper from './internal/status-wrapper';
19
19
  var packageName = "@atlaskit/avatar";
20
- var packageVersion = "25.9.2";
20
+ var packageVersion = "25.11.1";
21
21
  var containerStyles = null;
22
22
 
23
23
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/esm/presence.js CHANGED
@@ -2,30 +2,29 @@
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import { Fragment } from 'react';
5
- import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
6
5
  import IconWrapper from './internal/icon-wrapper';
7
6
  var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
8
- fill: "var(--ds-icon-danger, ".concat(R300, ")"),
7
+ fill: "var(--ds-icon-danger, #C9372C)",
9
8
  cx: "4",
10
9
  cy: "4",
11
10
  r: "4"
12
11
  }), /*#__PURE__*/React.createElement("path", {
13
- fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
12
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
14
13
  d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
15
14
  }));
16
15
  var FocusIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
17
- fill: "var(--ds-icon-discovery, ".concat(P300, ")"),
16
+ fill: "var(--ds-icon-discovery, #AF59E1)",
18
17
  d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
19
18
  }));
20
19
  var OfflineIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
21
- fill: "var(--ds-text-subtlest, ".concat(N200, ")"),
20
+ fill: "var(--ds-text-subtlest, #6B6E76)",
22
21
  d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
23
22
  }), /*#__PURE__*/React.createElement("path", {
24
- fill: "var(--ds-surface-overlay, ".concat(N40, ")"),
23
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
25
24
  d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
26
25
  }));
27
26
  var OnlineIndicator = /*#__PURE__*/React.createElement("circle", {
28
- fill: "var(--ds-icon-success, ".concat(G300, ")"),
27
+ fill: "var(--ds-icon-success, #6A9A23)",
29
28
  cx: "4",
30
29
  cy: "4",
31
30
  r: "4"
package/dist/esm/status.js CHANGED
@@ -2,33 +2,32 @@
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import { Fragment } from 'react';
5
- import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
6
5
  import IconWrapper from './internal/icon-wrapper';
7
6
  var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
8
- fill: "var(--ds-icon-success, ".concat(G400, ")"),
7
+ fill: "var(--ds-icon-success, #6A9A23)",
9
8
  cx: "4",
10
9
  cy: "4",
11
10
  r: "4"
12
11
  }), /*#__PURE__*/React.createElement("path", {
13
- fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
12
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
14
13
  d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
15
14
  }));
16
15
  var DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
17
- fill: "var(--ds-icon-danger, ".concat(R400, ")"),
16
+ fill: "var(--ds-icon-danger, #C9372C)",
18
17
  cx: "4",
19
18
  cy: "4",
20
19
  r: "4"
21
20
  }), /*#__PURE__*/React.createElement("path", {
22
- fill: "var(--ds-surface-overlay, ".concat(N0, ")"),
21
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
23
22
  d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
24
23
  }));
25
24
  var LockedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
26
- fill: "var(--ds-text-subtlest, ".concat(N40, ")"),
25
+ fill: "var(--ds-text-subtlest, #6B6E76)",
27
26
  cx: "4",
28
27
  cy: "4",
29
28
  r: "4"
30
29
  }), /*#__PURE__*/React.createElement("path", {
31
- fill: "var(--ds-surface-overlay, ".concat(N500, ")"),
30
+ fill: "var(--ds-surface-overlay, #FFFFFF)",
32
31
  d: "M4.13074827,1.21766493 L4.10368158,1.21766493 C3.36340745,1.21766493 2.76388015,1.80793503 2.76388015,2.5367787 L2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,2.54344089 C3.44054754,2.17901906 3.74031119,1.88388401 4.11044825,1.88388401 L4.1239816,1.88388401 C4.49411866,1.88388401 4.79388232,2.17901906 4.79388232,2.54344089 L4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,2.5367787 C5.47054971,1.80793503 4.8710224,1.21766493 4.13074827,1.21766493 M2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,3.88254123 L2.76388015,3.88254123 L2.76388015,3.21632216 Z M4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,3.88254123 L4.79388232,3.88254123 L4.79388232,3.21632216 Z M4.79401765,3.88254123 L3.44068287,3.88254123 L2.76401548,3.88254123 C2.39049508,3.88254123 2.08734809,4.18100738 2.08734809,4.54876031 L2.08734809,5.54808892 C2.08734809,6.10000287 2.53735205,6.54741753 3.09094491,6.54741753 L5.14375561,6.54741753 C5.69802683,6.54741753 6.14735243,6.10385072 6.14735243,5.54808892 L6.14735243,4.54876031 C6.14735243,4.18100738 5.84420544,3.88254123 5.47068504,3.88254123 L4.79401765,3.88254123 Z"
33
32
  }));
34
33
  function getStatus(status) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "25.10.0",
3
+ "version": "25.11.1",
4
4
  "description": "An avatar is a visual representation of a user or entity.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,14 +32,13 @@
32
32
  }
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/analytics-next": "^11.1.0",
35
+ "@atlaskit/analytics-next": "^11.2.0",
36
36
  "@atlaskit/css": "^0.19.0",
37
37
  "@atlaskit/ds-lib": "^6.0.0",
38
- "@atlaskit/icon": "^33.0.0",
38
+ "@atlaskit/icon": "^33.1.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
- "@atlaskit/primitives": "^18.0.0",
41
- "@atlaskit/theme": "^22.0.0",
42
- "@atlaskit/tokens": "^11.1.0",
40
+ "@atlaskit/primitives": "^18.1.0",
41
+ "@atlaskit/tokens": "^11.4.0",
43
42
  "@babel/runtime": "^7.0.0",
44
43
  "@compiled/react": "^0.20.0"
45
44
  },
@@ -53,15 +52,16 @@
53
52
  "@atlaskit/button": "^23.10.0",
54
53
  "@atlaskit/code": "^17.4.0",
55
54
  "@atlaskit/docs": "^11.7.0",
56
- "@atlaskit/form": "^15.4.0",
55
+ "@atlaskit/form": "^15.5.0",
57
56
  "@atlaskit/heading": "^5.3.0",
58
57
  "@atlaskit/link": "^3.3.0",
59
58
  "@atlaskit/range": "^10.0.0",
60
59
  "@atlaskit/section-message": "^8.12.0",
61
60
  "@atlaskit/textfield": "^8.2.0",
62
- "@atlaskit/tooltip": "^20.14.0",
61
+ "@atlaskit/tooltip": "^21.0.0",
63
62
  "@atlassian/feature-flags-test-utils": "^1.0.0",
64
63
  "@atlassian/ssr-tests": "workspace:^",
64
+ "@atlassian/structured-docs-types": "workspace:^",
65
65
  "@atlassian/testing-library": "^0.4.0",
66
66
  "@testing-library/react": "^16.3.0",
67
67
  "@testing-library/user-event": "^14.4.3",
@@ -104,6 +104,9 @@
104
104
  "platform_dst_hexagon_avatar_unified_size": {
105
105
  "type": "boolean",
106
106
  "showOnWebsiteForTransitiveDependencies": true
107
+ },
108
+ "platform-dst-motion-uplift": {
109
+ "type": "boolean"
107
110
  }
108
111
  }
109
112
  }