@atlaskit/avatar 24.0.0 → 25.0.0

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

@@ -1,96 +1,80 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* avatar-image.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./avatar-image.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/react';
 import PersonIconLegacy from '@atlaskit/icon/core/migration/person';
 import ReleaseIconMigration from '@atlaskit/icon/core/migration/release--ship';
 import PersonIcon from '@atlaskit/icon/core/person';
 import ReleaseIcon from '@atlaskit/icon/core/release';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N90 } from '@atlaskit/theme/colors';
-import { AVATAR_RADIUS, AVATAR_SIZES } from '../constants';
-var avatarDefaultIconStyles = css({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  backgroundColor: "var(--ds-icon-subtle, ".concat(N90, ")")
-});
-var avatarDefaultIconVisualRefreshStyles = css({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
-});
-var nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-    key = _ref2[0],
-    size = _ref2[1];
-  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& svg': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      width: "".concat(size, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      height: "".concat(size, "px")
-    }
-  })));
-}, {});
-var avatarImageStyles = css({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  flex: '1 1 100%'
-});
+var styles = {
+  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
+  icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
+  iconBg: "_bfhkr4aa",
+  iconBGVisualRefresh: "_bfhk1v33",
+  circle: "_2rko1q5u"
+};
+var borderRadiusMap = {
+  xsmall: "_2rkogqwt",
+  small: "_2rkogqwt",
+  medium: "_2rko1l7b",
+  large: "_2rko1l7b",
+  xlarge: "_2rkoi2wt",
+  xxlarge: "_2rkob7nn"
+};
+var nestedSvgStylesMap = {
+  xsmall: "_w8l57vkz _17527vkz",
+  small: "_w8l51tcg _17521tcg",
+  medium: "_w8l5zwfg _1752zwfg",
+  large: "_w8l51ylp _17521ylp",
+  xlarge: "_w8l516xz _175216xz",
+  xxlarge: "_w8l51qr7 _17521qr7"
+};
 
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-var AvatarImage = function AvatarImage(_ref3) {
-  var _ref3$alt = _ref3.alt,
-    alt = _ref3$alt === void 0 ? '' : _ref3$alt,
-    src = _ref3.src,
-    appearance = _ref3.appearance,
-    size = _ref3.size,
-    testId = _ref3.testId;
+var AvatarImage = function AvatarImage(_ref) {
+  var _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    src = _ref.src,
+    appearance = _ref.appearance,
+    size = _ref.size,
+    testId = _ref.testId;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
-  var borderRadius = appearance === 'circle' ? '50%' : "".concat(AVATAR_RADIUS[size], "px");
-  var isHidden = !alt ? true : undefined;
 
   // If src changes, reset state
   useEffect(function () {
     setHasImageErrored(false);
   }, [src]);
   if (!src || hasImageErrored) {
-    return jsx("span", {
-      css: [fg('platform-component-visual-refresh') ? avatarDefaultIconVisualRefreshStyles : avatarDefaultIconStyles, nestedAvatarStyles[size]]
-    }, appearance === 'circle' ? fg('platform-component-visual-refresh') ? jsx(PersonIcon, {
+    return /*#__PURE__*/React.createElement("span", {
+      className: ax([styles.icon, fg('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
+    }, appearance === 'circle' ? fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(PersonIcon, {
       label: alt,
       color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && "".concat(testId, "--person"),
       spacing: "spacious"
-    }) : jsx(PersonIconLegacy, {
+    }) : /*#__PURE__*/React.createElement(PersonIconLegacy, {
       label: alt,
       color: "var(--ds-icon-inverse, ".concat(N0, ")"),
       LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(N90, ")"),
       testId: testId && "".concat(testId, "--person"),
       spacing: "spacious"
-    }) : fg('platform-component-visual-refresh') ? jsx(ReleaseIcon, {
+    }) : fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(ReleaseIcon, {
       label: alt,
       color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && "".concat(testId, "--ship"),
       spacing: "spacious"
-    }) : jsx(ReleaseIconMigration, {
+    }) : /*#__PURE__*/React.createElement(ReleaseIconMigration, {
       label: alt,
       color: "var(--ds-icon-inverse, ".concat(N0, ")"),
       LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(N90, ")"),
@@ -98,21 +82,17 @@ var AvatarImage = function AvatarImage(_ref3) {
       spacing: "spacious"
     }));
   }
-  return jsx("img", {
+  return /*#__PURE__*/React.createElement("img", {
     src: src,
     alt: alt,
     "data-testid": testId && "".concat(testId, "--image"),
-    css: avatarImageStyles,
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      borderRadius: borderRadius
-    },
     onError: function onError() {
       return setHasImageErrored(true);
     },
-    "aria-hidden": isHidden,
+    "aria-hidden": !alt ? true : undefined,
     "data-vc": testId ? "".concat(testId, "--image") : 'avatar-image',
-    "data-ssr-placeholder-ignored": true
+    "data-ssr-placeholder-ignored": true,
+    className: ax([styles.image, borderRadiusMap[size], appearance === 'circle' && styles.circle])
   });
 };
 export default AvatarImage;

package/dist/esm/internal/icon-wrapper.compiled.css

@@ -0,0 +1,13 @@
+
+._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}._189e1bk5{border-width:var(--ds-border-width-outline,2px)}
+._1dqonqa1{border-style:solid}
+._1h6d1bhr{border-color:var(--ds-surface-overlay,#fff)}
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._ae4v1h6o{align-content:center}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._vchhusvi{box-sizing:border-box}

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

@@ -1,21 +1,13 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx } from '@emotion/react';
-import { N0 } from '@atlaskit/theme/colors';
-import { BORDER_WIDTH } from '../constants';
-var iconWrapperStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  width: '100%',
-  height: '100%',
-  alignItems: 'center',
-  alignContent: 'center',
-  borderRadius: "var(--ds-border-radius-circle, 50%)",
-  overflow: 'hidden'
-});
+/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./icon-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var styles = {
+  root: "_2rko1q5u _1reo15vq _18m915vq _189e1bk5 _1dqonqa1 _1e0c1txw _vchhusvi _1bsb1osq _4t3i1osq _4cvr1h6o _ae4v1h6o _bfhk1bhr"
+};
+var unboundStyles = {
+  root: "_1h6d1bhr"
+};
 
 /**
  * __Icon wrapper__
@@ -23,17 +15,15 @@ var iconWrapperStyles = css({
  * An icon wrapper is used internally only.
  */
 var IconWrapper = function IconWrapper(_ref) {
-  var _ref$bgColor = _ref.bgColor,
-    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(N0, ")") : _ref$bgColor,
+  var bgColor = _ref.bgColor,
     children = _ref.children;
-  return jsx("span", {
-    css: iconWrapperStyles,
+  return /*#__PURE__*/React.createElement("span", {
     role: "presentation",
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      border: "".concat(BORDER_WIDTH, "px solid ").concat(bgColor),
+      borderColor: bgColor,
       backgroundColor: bgColor
-    }
+    },
+    className: ax([styles.root, unboundStyles.root])
   }, children);
 };
 export default IconWrapper;

package/dist/esm/presence.compiled.css

@@ -0,0 +1,18 @@
+._1bsb1crf{width:9pt}
+._1bsbdlk8{width:14px}
+._1bsbf6fq{width:18px}
+._1bsbo7ao{width:15px}
+._1xi21v6z{right:7px}
+._1xi2idpf{right:0}
+._1xi2myb0{right:-4px}
+._1xi2t94y{right:1px}
+._4t3i1crf{height:9pt}
+._4t3idlk8{height:14px}
+._4t3if6fq{height:18px}
+._4t3io7ao{height:15px}
+._94n51v6z{bottom:7px}
+._94n5idpf{bottom:0}
+._94n5myb0{bottom:-4px}
+._94n5t94y{bottom:1px}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}

package/dist/esm/presence.js

@@ -1,6 +1,9 @@
-import React, { Fragment } from 'react';
+/* presence.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./presence.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
 import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
-import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './internal/icon-wrapper';
 var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-danger, ".concat(R300, ")"),
@@ -65,6 +68,23 @@ var AvatarPresence = function AvatarPresence(_ref) {
   }, getPresence(presence)) : children);
 };
 export default AvatarPresence;
+var styles = {
+  root: "_kqswstnw _lcxvglyw"
+};
+var iconSizeMap = {
+  small: "_4t3i1crf _1bsb1crf",
+  medium: "_4t3idlk8 _1bsbdlk8",
+  large: "_4t3io7ao _1bsbo7ao",
+  xlarge: "_4t3if6fq _1bsbf6fq"
+};
+var iconOffsetMap = {
+  square: "_94n5myb0 _1xi2myb0",
+  small: "_94n5idpf _1xi2idpf",
+  medium: "_94n5idpf _1xi2idpf",
+  large: "_94n5t94y _1xi2t94y",
+  xlarge: "_94n51v6z _1xi21v6z"
+};
+
 /**
  * __Presence wrapper__
  *
@@ -77,22 +97,10 @@ export var PresenceWrapper = function PresenceWrapper(_ref2) {
     borderColor = _ref2.borderColor,
     presence = _ref2.presence,
     testId = _ref2.testId;
-  var position = appearance === 'square' ? -4 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      pointerEvents: 'none',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      position: 'absolute',
-      bottom: "".concat(position, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      height: "".concat(ICON_SIZES[size], "px"),
-      right: "".concat(position, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      width: "".concat(ICON_SIZES[size], "px")
-    }
+    className: ax([styles.root, iconSizeMap[size], iconOffsetMap[size], appearance === 'square' && iconOffsetMap['square']])
   }, /*#__PURE__*/React.createElement(AvatarPresence, {
     borderColor: borderColor,
     presence: !children ? presence : undefined

package/dist/esm/skeleton.compiled.css

@@ -0,0 +1,24 @@
+
+._2rko1l7b{border-radius:3px}
+._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
+._2rkob7nn{border-radius:var(--ds-border-radius-300,9pt)}
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
+._2rkoi2wt{border-radius:6px}._189e1bk5{border-width:var(--ds-border-width-outline,2px)}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._1bsb16xz{width:6pc}
+._1bsb1qr7{width:8pc}
+._1bsb1tcg{width:24px}
+._1bsb1ylp{width:40px}
+._1bsb7vkz{width:1pc}
+._1bsbzwfg{width:2pc}
+._1e0c1o8l{display:inline-block}
+._4t3i16xz{height:6pc}
+._4t3i1qr7{height:8pc}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3i7vkz{height:1pc}
+._4t3izwfg{height:2pc}
+._bfhk1r8p{background-color:var(--avatar-skeleton-background-color)}
+._tzy4clii{opacity:.3}
+._tzy4nh7s{opacity:.15}

package/dist/esm/skeleton.js

@@ -1,50 +1,29 @@
+/* skeleton.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx } from '@emotion/react';
-import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH, CSS_VAR_AVATAR_BGCOLOR } from './constants';
-var skeletonStyles = css({
-  display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(".concat(CSS_VAR_AVATAR_BGCOLOR, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  border: "".concat(BORDER_WIDTH, "px solid transparent")
-});
-var sizeStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-    key = _ref2[0],
-    size = _ref2[1];
-  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: "".concat(size, "px"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(size, "px")
-  })));
-}, {});
-var radiusStyles = Object.entries(AVATAR_RADIUS).reduce(function (styles, _ref3) {
-  var _ref4 = _slicedToArray(_ref3, 2),
-    key = _ref4[0],
-    size = _ref4[1];
-  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: "".concat(size, "px")
-  })));
-}, {});
-var defaultRadiusStyles = css({
-  borderRadius: "var(--ds-border-radius-circle, 50%)"
-});
-var strongOpacityStyles = css({
-  opacity: 0.3
-});
-var defaultOpacityStyles = css({
-  opacity: 0.15
-});
+import "./skeleton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var bgColorCssVar = '--avatar-skeleton-background-color';
+var styles = {
+  root: "_2rko1q5u _189e1bk5 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
+  strongOpacity: "_tzy4clii"
+};
+var sizeStyles = {
+  xsmall: "_1bsb7vkz _4t3i7vkz",
+  small: "_1bsb1tcg _4t3i1tcg",
+  medium: "_1bsbzwfg _4t3izwfg",
+  large: "_1bsb1ylp _4t3i1ylp",
+  xlarge: "_1bsb16xz _4t3i16xz",
+  xxlarge: "_1bsb1qr7 _4t3i1qr7"
+};
+var borderRadiusMap = {
+  xsmall: "_2rkogqwt",
+  small: "_2rkogqwt",
+  medium: "_2rko1l7b",
+  large: "_2rko1l7b",
+  xlarge: "_2rkoi2wt",
+  xxlarge: "_2rkob7nn"
+};
 
 /**
  * __Skeleton__
@@ -54,16 +33,14 @@ var defaultOpacityStyles = css({
  * - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
  */
-var Skeleton = function Skeleton(_ref5) {
-  var size = _ref5.size,
-    appearance = _ref5.appearance,
-    color = _ref5.color,
-    weight = _ref5.weight;
-  return jsx("div", {
-    css: [skeletonStyles, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' ? radiusStyles[size !== null && size !== void 0 ? size : 'medium'] : defaultRadiusStyles, weight === 'strong' ? strongOpacityStyles : defaultOpacityStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: _defineProperty({}, CSS_VAR_AVATAR_BGCOLOR, color !== null && color !== void 0 ? color : 'currentColor')
+var Skeleton = function Skeleton(_ref) {
+  var size = _ref.size,
+    appearance = _ref.appearance,
+    color = _ref.color,
+    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])
   });
 };
 export default Skeleton;

package/dist/esm/status.compiled.css

@@ -0,0 +1,15 @@
+._154i1v6z{top:7px}
+._154iidpf{top:0}
+._154it94y{top:1px}
+._1bsb1crf{width:9pt}
+._1bsbdlk8{width:14px}
+._1bsbf6fq{width:18px}
+._1bsbo7ao{width:15px}
+._1xi21v6z{right:7px}
+._1xi2idpf{right:0}
+._1xi2t94y{right:1px}
+._4t3i1crf{height:9pt}
+._4t3idlk8{height:14px}
+._4t3if6fq{height:18px}
+._4t3io7ao{height:15px}
+._kqswstnw{position:absolute}

package/dist/esm/status.js

@@ -1,7 +1,26 @@
-import React, { Fragment } from 'react';
+/* status.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./status.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
 import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
-import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './internal/icon-wrapper';
+var styles = {
+  root: "_kqswstnw"
+};
+var iconSizeMap = {
+  small: "_4t3i1crf _1bsb1crf",
+  medium: "_4t3idlk8 _1bsbdlk8",
+  large: "_4t3io7ao _1bsbo7ao",
+  xlarge: "_4t3if6fq _1bsbf6fq"
+};
+var iconOffsetMap = {
+  square: "_1xi2idpf _154iidpf",
+  small: "_1xi2idpf _154iidpf",
+  medium: "_1xi2idpf _154iidpf",
+  large: "_1xi2t94y _154it94y",
+  xlarge: "_1xi21v6z _154i1v6z"
+};
 var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(G400, ")"),
   cx: "4",
@@ -75,20 +94,10 @@ export var StatusWrapper = function StatusWrapper(_ref2) {
     borderColor = _ref2.borderColor,
     children = _ref2.children,
     testId = _ref2.testId;
-  var position = appearance === 'square' ? 0 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      position: 'absolute',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      height: "".concat(ICON_SIZES[size], "px"),
-      right: "".concat(position, "px"),
-      top: "".concat(position, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      width: "".concat(ICON_SIZES[size], "px")
-    }
+    className: ax([styles.root, iconSizeMap[size], iconOffsetMap[size], appearance === 'square' && iconOffsetMap['square']])
   }, /*#__PURE__*/React.createElement(AvatarStatus, {
     borderColor: borderColor,
     status: !children ? status : undefined

package/dist/esm/utilities.js

@@ -1,16 +1,3 @@
-export var getLinkProps = function getLinkProps(href, target) {
-  return {
-    href: href,
-    rel: target === '_blank' ? 'noopener noreferrer' : null,
-    target: target
-  };
-};
-export var getButtonProps = function getButtonProps(onClick) {
-  return {
-    type: 'button',
-    onClick: onClick
-  };
-};
 export var getCustomElement = function getCustomElement(isDisabled, href, onClick) {
   if (href && !isDisabled) {
     return 'a';

package/dist/types/presence.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type FC, type ReactNode } from 'react';
 import { type AppearanceType, type IndicatorSizeType, type Presence } from './types';
 export interface PresenceProps {

package/dist/types/status.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type FC, type ReactNode } from 'react';
 import { type AppearanceType, type IndicatorSizeType, type Status } from './types';
 export interface StatusProps {

package/dist/types/utilities.d.ts

@@ -1,11 +1,2 @@
 import { type MouseEventHandler } from 'react';
-export declare const getLinkProps: (href: string, target?: string) => {
-    href: string;
-    rel: string | null;
-    target: string | undefined;
-};
-export declare const getButtonProps: (onClick: MouseEventHandler) => {
-    type: string;
-    onClick: MouseEventHandler;
-};
 export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler) => "a" | "button" | "span";

package/dist/types-ts4.5/presence.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type FC, type ReactNode } from 'react';
 import { type AppearanceType, type IndicatorSizeType, type Presence } from './types';
 export interface PresenceProps {

package/dist/types-ts4.5/status.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type FC, type ReactNode } from 'react';
 import { type AppearanceType, type IndicatorSizeType, type Status } from './types';
 export interface StatusProps {

package/dist/types-ts4.5/utilities.d.ts

@@ -1,11 +1,2 @@
 import { type MouseEventHandler } from 'react';
-export declare const getLinkProps: (href: string, target?: string) => {
-    href: string;
-    rel: string | null;
-    target: string | undefined;
-};
-export declare const getButtonProps: (onClick: MouseEventHandler) => {
-    type: string;
-    onClick: MouseEventHandler;
-};
 export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler) => "a" | "button" | "span";