@atlaskit/avatar 25.1.20 → 25.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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.19";
+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.19";
+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.19";
+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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "25.1.20",
+	"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.2.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",
@@ -54,7 +54,7 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/code": "^17.2.0",
 		"@atlaskit/docs": "^11.1.0",
-		"@atlaskit/form": "^12.7.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"
 		}
 	}
 }