@atlaskit/avatar 25.1.19 → 25.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/avatar
 
+## 25.2.0
+
+### Minor Changes
+
+- [`955c510552199`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/955c510552199) -
+  We are testing a visual change behind a feature flag. Square avatar border radius will be updated
+  to be consistent with the new ADS Tile System. If this change is successful it will be available
+  in a later release.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 25.1.20
+
+### Patch Changes
+
+- [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
 ## 25.1.19
 
 ### Patch Changes

package/dist/cjs/avatar-content.compiled.css

@@ -8,6 +8,7 @@
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}

package/dist/cjs/avatar-content.js

@@ -1,4 +1,4 @@
-/* avatar-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -21,6 +21,7 @@ var bgColorCssVar = '--avatar-bg-color';
 var styles = {
   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 _1ejjglyw _mizu194a _1ah3v77o _ra3xnqa1 _128mdkaa _4dave4h9",
   circle: "_2rko1qll _14mj1qll",
+  square: "_2rkol0p1",
   positionRelative: "_kqswh2mm",
   disabled: "_80om13gf _1hfkvuon _1peqs237"
 };
@@ -88,6 +89,6 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     target: target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
   }, {
-    className: (0, _runtime.ax)([unboundStyles.root, styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
+    className: (0, _runtime.ax)([unboundStyles.root, styles.root, !(0, _platformFeatureFlags.fg)('platform_dst_avatar_tile') && borderRadiusMap[size], appearance === 'square' && (0, _platformFeatureFlags.fg)('platform_dst_avatar_tile') && styles.square, appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
   }), children || avatarImage);
 });

package/dist/cjs/avatar-item.js

@@ -1,4 +1,4 @@
-/* avatar-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/avatar.js

@@ -1,4 +1,4 @@
-/* avatar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "25.1.18";
+var packageVersion = "0.0.0-development";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/cjs/internal/avatar-image.js

@@ -1,4 +1,4 @@
-/* avatar-image.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-image.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/icon-wrapper.js

@@ -1,4 +1,4 @@
-/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/presence.js

@@ -1,4 +1,4 @@
-/* presence.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* presence.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/skeleton.compiled.css

@@ -2,6 +2,7 @@
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
 ._1dqonqa1{border-style:solid}

package/dist/cjs/skeleton.js

@@ -1,4 +1,4 @@
-/* skeleton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -11,10 +11,12 @@ require("./skeleton.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 bgColorCssVar = '--avatar-skeleton-background-color';
 var styles = {
   root: "_2rko1qll _189e1dm9 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
+  square: "_2rkol0p1",
   strongOpacity: "_tzy4clii"
 };
 var sizeStyles = {
@@ -49,7 +51,7 @@ var Skeleton = function Skeleton(_ref) {
     weight = _ref.weight;
   return /*#__PURE__*/React.createElement("div", {
     style: (0, _defineProperty2.default)({}, bgColorCssVar, color !== null && color !== void 0 ? color : 'currentColor'),
-    className: (0, _runtime.ax)([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], weight === 'strong' && styles.strongOpacity])
+    className: (0, _runtime.ax)([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && !(0, _platformFeatureFlags.fg)('platform_dst_avatar_tile') && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && (0, _platformFeatureFlags.fg)('platform_dst_avatar_tile') && styles.square, weight === 'strong' && styles.strongOpacity])
   });
 };
 var _default = exports.default = Skeleton;

package/dist/cjs/status.js

@@ -1,4 +1,4 @@
-/* status.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* status.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/avatar-content.compiled.css

@@ -8,6 +8,7 @@
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}

package/dist/es2019/avatar-content.js

@@ -1,4 +1,4 @@
-/* avatar-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./avatar-content.compiled.css";
 import * as React from 'react';
@@ -11,6 +11,7 @@ const bgColorCssVar = '--avatar-bg-color';
 const styles = {
   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 _1ejjglyw _mizu194a _1ah3v77o _ra3xnqa1 _128mdkaa _4dave4h9",
   circle: "_2rko1qll _14mj1qll",
+  square: "_2rkol0p1",
   positionRelative: "_kqswh2mm",
   disabled: "_80om13gf _1hfkvuon _1peqs237"
 };
@@ -83,6 +84,6 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
     target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
   }, {
-    className: ax([unboundStyles.root, styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
+    className: ax([unboundStyles.root, styles.root, !fg('platform_dst_avatar_tile') && borderRadiusMap[size], appearance === 'square' && fg('platform_dst_avatar_tile') && styles.square, appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
   }), children || avatarImage);
 });

package/dist/es2019/avatar-item.js

@@ -1,4 +1,4 @@
-/* avatar-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./avatar-item.compiled.css";
 import * as React from 'react';

package/dist/es2019/avatar.js

@@ -1,4 +1,4 @@
-/* avatar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./avatar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -12,7 +12,7 @@ import { PresenceWrapper } from './presence';
 import { StatusWrapper } from './status';
 import { getCustomElement } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "25.1.18";
+const packageVersion = "0.0.0-development";
 const containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/es2019/internal/avatar-image.js

@@ -1,4 +1,4 @@
-/* avatar-image.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-image.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./avatar-image.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/internal/icon-wrapper.js

@@ -1,4 +1,4 @@
-/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./icon-wrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/presence.js

@@ -1,4 +1,4 @@
-/* presence.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* presence.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./presence.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/skeleton.compiled.css

@@ -2,6 +2,7 @@
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
 ._1dqonqa1{border-style:solid}

package/dist/es2019/skeleton.js

@@ -1,10 +1,12 @@
-/* skeleton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./skeleton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 const bgColorCssVar = '--avatar-skeleton-background-color';
 const styles = {
   root: "_2rko1qll _189e1dm9 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
+  square: "_2rkol0p1",
   strongOpacity: "_tzy4clii"
 };
 const sizeStyles = {
@@ -41,6 +43,6 @@ const Skeleton = ({
   style: {
     [bgColorCssVar]: color !== null && color !== void 0 ? color : 'currentColor'
   },
-  className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], weight === 'strong' && styles.strongOpacity])
+  className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && !fg('platform_dst_avatar_tile') && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && fg('platform_dst_avatar_tile') && styles.square, weight === 'strong' && styles.strongOpacity])
 });
 export default Skeleton;

package/dist/es2019/status.js

@@ -1,4 +1,4 @@
-/* status.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* status.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./status.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/avatar-content.compiled.css

@@ -8,6 +8,7 @@
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}

package/dist/esm/avatar-content.js

@@ -1,4 +1,4 @@
-/* avatar-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./avatar-content.compiled.css";
@@ -12,6 +12,7 @@ var bgColorCssVar = '--avatar-bg-color';
 var styles = {
   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 _1ejjglyw _mizu194a _1ah3v77o _ra3xnqa1 _128mdkaa _4dave4h9",
   circle: "_2rko1qll _14mj1qll",
+  square: "_2rkol0p1",
   positionRelative: "_kqswh2mm",
   disabled: "_80om13gf _1hfkvuon _1peqs237"
 };
@@ -79,6 +80,6 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     target: target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
   }, {
-    className: ax([unboundStyles.root, styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
+    className: ax([unboundStyles.root, styles.root, !fg('platform_dst_avatar_tile') && borderRadiusMap[size], appearance === 'square' && fg('platform_dst_avatar_tile') && styles.square, appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
   }), children || avatarImage);
 });

package/dist/esm/avatar-item.js

@@ -1,4 +1,4 @@
-/* avatar-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./avatar-item.compiled.css";

package/dist/esm/avatar.js

@@ -1,4 +1,4 @@
-/* avatar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./avatar.compiled.css";
 import * as React from 'react';
@@ -15,7 +15,7 @@ import { PresenceWrapper } from './presence';
 import { StatusWrapper } from './status';
 import { getCustomElement } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "25.1.18";
+var packageVersion = "0.0.0-development";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/esm/internal/avatar-image.js

@@ -1,4 +1,4 @@
-/* avatar-image.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* avatar-image.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./avatar-image.compiled.css";
 import * as React from 'react';

package/dist/esm/internal/icon-wrapper.js

@@ -1,4 +1,4 @@
-/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./icon-wrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/presence.js

@@ -1,4 +1,4 @@
-/* presence.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* presence.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./presence.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/skeleton.compiled.css

@@ -2,6 +2,7 @@
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
 ._1dqonqa1{border-style:solid}

package/dist/esm/skeleton.js

@@ -1,11 +1,13 @@
-/* skeleton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./skeleton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 var bgColorCssVar = '--avatar-skeleton-background-color';
 var styles = {
   root: "_2rko1qll _189e1dm9 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
+  square: "_2rkol0p1",
   strongOpacity: "_tzy4clii"
 };
 var sizeStyles = {
@@ -40,7 +42,7 @@ var Skeleton = function Skeleton(_ref) {
     weight = _ref.weight;
   return /*#__PURE__*/React.createElement("div", {
     style: _defineProperty({}, bgColorCssVar, color !== null && color !== void 0 ? color : 'currentColor'),
-    className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], weight === 'strong' && styles.strongOpacity])
+    className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && !fg('platform_dst_avatar_tile') && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && fg('platform_dst_avatar_tile') && styles.square, weight === 'strong' && styles.strongOpacity])
   });
 };
 export default Skeleton;

package/dist/esm/status.js

@@ -1,4 +1,4 @@
-/* status.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* status.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./status.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/offerings.json

@@ -0,0 +1,181 @@
+[
+	{
+		"name": "Avatar",
+		"package": "@atlaskit/avatar",
+		"import": {
+			"name": "Avatar",
+			"package": "@atlaskit/avatar",
+			"type": "default"
+		},
+		"keywords": ["avatar", "user", "profile", "image", "presence", "status", "representation"],
+		"categories": ["images", "data-display"],
+		"shortDescription": "A component for displaying user avatars with support for images, initials, and status indicators. An avatar is a visual representation of a user or entity. It can display user images, initials, presence indicators, and status indicators. Avatars help users quickly identify people and entities in your application. They provide visual context and make interfaces more personal and engaging.",
+		"status": "general-availability",
+		"example": "import Avatar from '@atlaskit/avatar';\n\n<Avatar\n\tsrc=\"https://example.com/avatar.jpg\"\n\tstatus=\"online\"\n\tsize=\"large\"\n/>",
+		"usageGuidelines": [
+			"Use consistent sizing within the same context",
+			"Place avatars in logical groupings (e.g., team members)",
+			"Use presence indicators sparingly for real-time status only",
+			"Use status indicators for approval/permission states",
+			"Provide fallback initials when images fail to load",
+			"Use avatars to represent users, teams, projects, or any other entity that needs visual identification",
+			"Always provide meaningful names for accessibility"
+		],
+		"contentGuidelines": [
+			"Use full names when possible for better recognition",
+			"For companies/projects, use descriptive names",
+			"Avoid generic terms like 'User' or 'Admin'",
+			"Use consistent naming conventions across your app",
+			"Keep names concise but meaningful"
+		],
+		"generativeInstructions": "./docs/ai/avatar-instructions.md",
+		"examples": ["./examples/ai/avatar.tsx"]
+	},
+	{
+		"name": "AvatarItem",
+		"package": "@atlaskit/avatar",
+		"import": {
+			"name": "AvatarItem",
+			"package": "@atlaskit/avatar",
+			"type": "named"
+		},
+		"keywords": ["avatar", "item", "list", "user", "profile", "interactive"],
+		"categories": ["images", "data-display", "interaction"],
+		"shortDescription": "A component that combines an avatar with text content for displaying user information in lists. AvatarItem combines an avatar with primary and secondary text to create a rich user representation in lists and menus. It supports both interactive (clickable) and non-interactive modes, making it perfect for user lists, team members, or any context where you need to display user information with actions.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for displaying user information in lists and menus",
+			"Choose between interactive and display-only based on context",
+			"Provide clear primary and secondary text hierarchy",
+			"Use consistent spacing and alignment within lists",
+			"Consider the interaction pattern before implementation",
+			"Use AvatarItem when you need to show user information with additional context like names, emails, or status information",
+			"Provide clear primary and secondary text",
+			"Use meaningful labels for accessibility",
+			"Consider the interaction pattern (clickable vs display-only) based on your use case"
+		],
+		"contentGuidelines": [
+			"Use clear, descriptive primary text (usually names)",
+			"Provide relevant secondary text (emails, roles, etc.)",
+			"Keep text concise but informative",
+			"Use consistent formatting across similar items",
+			"Avoid redundant information between primary and secondary text"
+		],
+		"examples": ["./examples/ai/avatar-item.tsx"]
+	},
+	{
+		"name": "Presence",
+		"package": "@atlaskit/avatar",
+		"import": {
+			"name": "Presence",
+			"package": "@atlaskit/avatar",
+			"type": "named"
+		},
+		"keywords": ["presence", "status", "online", "offline", "busy", "focus", "indicator"],
+		"categories": ["status", "data-display"],
+		"shortDescription": "A standalone component for displaying user presence indicators. Presence indicators show the current availability status of users. They help other users understand when someone is available for communication and are useful in collaborative applications where knowing someone's availability is important for workflow.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Prefer using `<Avatar presence=\"…\" />` instead of `<Presence presence=\"…\" />`",
+			"Use sparingly for real-time status only",
+			"Don't overuse as they can create visual clutter",
+			"Show presence only when relevant to user workflow",
+			"Use consistent presence states across the application",
+			"Consider the context and user needs before showing presence",
+			"Use presence indicators sparingly for real-time status",
+			"Don't overuse them as they can create visual clutter",
+			"Only show presence when it's relevant to the user's workflow"
+		],
+		"contentGuidelines": [
+			"Use clear, universally understood presence states",
+			"Be consistent with presence terminology",
+			"Provide clear visual distinction between states",
+			"Avoid ambiguous or unclear presence indicators"
+		],
+		"examples": ["./examples/ai/presence.tsx"]
+	},
+	{
+		"name": "Status",
+		"package": "@atlaskit/avatar",
+		"import": {
+			"name": "Status",
+			"package": "@atlaskit/avatar",
+			"type": "named"
+		},
+		"keywords": ["status", "approved", "declined", "locked", "indicator", "permission"],
+		"categories": ["status", "data-display"],
+		"shortDescription": "A standalone component for displaying status indicators. Status indicators show the approval or permission state of users or entities. They help communicate important state information at a glance and are useful in workflow applications where approval states or permissions are important for user understanding.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Prefer using `<Avatar status=\"…\" />` instead of `<Status status=\"…\" />`",
+			"Use for approval states, permission levels, or important state information",
+			"Make sure the status is relevant and helpful to user workflow",
+			"Use consistent status states across the application",
+			"Consider the context and user needs before showing status",
+			"Don't overuse status indicators to avoid visual clutter",
+			"Use status indicators to show approval states, permission levels, or other important state information that affects how users should interact with the entity",
+			"Make sure the status is relevant and helpful to the user's workflow"
+		],
+		"contentGuidelines": [
+			"Use clear, universally understood status states",
+			"Be consistent with status terminology",
+			"Provide clear visual distinction between states",
+			"Avoid ambiguous or unclear status indicators"
+		],
+		"examples": ["./examples/ai/status.tsx"]
+	},
+	{
+		"name": "Skeleton",
+		"package": "@atlaskit/avatar",
+		"import": {
+			"name": "Skeleton",
+			"package": "@atlaskit/avatar",
+			"type": "named"
+		},
+		"keywords": ["skeleton", "loading", "placeholder", "shimmer", "avatar"],
+		"categories": ["loading", "data-display"],
+		"shortDescription": "A skeleton loading component for avatars that shows a placeholder while content is loading. Skeleton components provide visual feedback during loading states, helping users understand that content is being fetched. Skeleton components should match the size and shape of the actual content they're replacing to prevent layout shifts.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use during loading states to maintain layout stability",
+			"Match the size and shape of the actual avatar content",
+			"Prevent layout shifts by maintaining consistent dimensions",
+			"Use for short loading periods (under 3 seconds)",
+			"Consider using spinners for longer loading times",
+			"Use skeleton avatars when user data is loading to maintain layout stability and provide visual feedback",
+			"Match the size and shape of the actual avatar content to prevent layout shifts"
+		],
+		"contentGuidelines": [
+			"Keep skeleton content minimal and non-distracting",
+			"Use consistent skeleton patterns across similar components",
+			"Avoid overly detailed skeleton content",
+			"Ensure skeleton content is clearly distinguishable from real content"
+		],
+		"examples": ["./examples/ai/skeleton.tsx"]
+	},
+	{
+		"name": "AvatarContent",
+		"package": "@atlaskit/avatar",
+		"import": {
+			"name": "AvatarContent",
+			"package": "@atlaskit/avatar",
+			"type": "named"
+		},
+		"keywords": ["avatar", "content", "custom", "children", "wrapper"],
+		"categories": ["images", "data-display"],
+		"shortDescription": "A wrapper component for custom avatar content that provides consistent styling and behavior.",
+		"status": "general-availability",
+		"usageGuidelines": [
+			"Use for custom avatar content that needs consistent styling",
+			"Wrap custom content to maintain avatar behavior",
+			"Ensure custom content follows avatar design principles",
+			"Use when standard avatar props don't meet your needs"
+		],
+		"contentGuidelines": [
+			"Ensure custom content is appropriate for avatar context",
+			"Maintain consistent visual hierarchy",
+			"Keep custom content simple and clear"
+		],
+		"examples": ["./examples/ai/avatar-content.tsx"]
+	}
+]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "25.1.19",
+	"version": "25.2.0",
 	"description": "An avatar is a visual representation of a user or entity.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,11 +34,11 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/css": "^0.14.0",
-		"@atlaskit/ds-lib": "^5.0.0",
+		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.14.0",
+		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -53,8 +53,8 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/docs": "^11.0.0",
-		"@atlaskit/form": "^12.5.0",
+		"@atlaskit/docs": "^11.1.0",
+		"@atlaskit/form": "^14.1.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/range": "^9.2.0",
@@ -103,6 +103,9 @@
 		},
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
+		},
+		"platform_dst_avatar_tile": {
+			"type": "boolean"
 		}
 	}
 }