@atlaskit/avatar 24.0.1 → 25.0.0

package/dist/es2019/avatar.js

@@ -1,11 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* avatar.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./avatar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { AvatarContent } from './avatar-content';
@@ -15,12 +12,8 @@ import { PresenceWrapper } from './presence';
 import { StatusWrapper } from './status';
 import { getCustomElement } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "24.0.1";
-const containerStyles = css({
-  display: 'inline-block',
-  position: 'relative',
-  outline: 0
-});
+const packageVersion = "25.0.0";
+const containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -108,17 +101,17 @@ const Avatar = /*#__PURE__*/forwardRef(({
   const defaultLabel = [name, isStatus && !customStatusNode && `(${status})`, isPresence && !customPresenceNode && `(${presence})`].filter(Boolean).join(' ');
   const isInteractive = onClick || href || isDisabled;
   const containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
-  return jsx(EnsureIsInsideAvatarContext.Provider, {
+  return /*#__PURE__*/React.createElement(EnsureIsInsideAvatarContext.Provider, {
     value: true
-  }, jsx(AvatarContainer, {
+  }, /*#__PURE__*/React.createElement(AvatarContainer, {
     "data-testid": testId,
     role: containerShouldBeImage ? 'img' : undefined,
     "aria-labelledby": containerShouldBeImage ? labelId : undefined,
-    css: containerStyles,
     style: {
       zIndex: stackIndex
-    }
-  }, jsx(AvatarContentContext.Provider, {
+    },
+    className: ax(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
+  }, /*#__PURE__*/React.createElement(AvatarContentContext.Provider, {
     value: {
       as: getCustomElement(isDisabled, href, onClick),
       appearance,
@@ -132,7 +125,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
       stackIndex,
       target,
       testId: testId ? `${testId}--inner` : undefined,
-      avatarImage: jsx(AvatarImage, {
+      avatarImage: /*#__PURE__*/React.createElement(AvatarImage, {
         alt: !containerShouldBeImage && src ? name : undefined,
         src: src,
         appearance: appearance,
@@ -140,18 +133,18 @@ const Avatar = /*#__PURE__*/forwardRef(({
         testId: testId
       })
     }
-  }, children || jsx(AvatarContent, null)), isPresence && jsx(PresenceWrapper, {
+  }, children || /*#__PURE__*/React.createElement(AvatarContent, null)), isPresence && /*#__PURE__*/React.createElement(PresenceWrapper, {
     appearance: appearance,
     size: size,
     presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
-  }, customPresenceNode), isStatus && jsx(StatusWrapper, {
+  }, customPresenceNode), isStatus && /*#__PURE__*/React.createElement(StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
     status: typeof status === 'string' ? status : undefined,
     testId: testId
-  }, customStatusNode), containerShouldBeImage ? jsx("span", {
+  }, customStatusNode), containerShouldBeImage ? /*#__PURE__*/React.createElement("span", {
     "data-testid": testId && `${testId}--label`,
     id: labelId,
     hidden: true

package/dist/es2019/internal/avatar-image.compiled.css

@@ -0,0 +1,25 @@
+
+._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}._16jlkb7n{flex-grow:1}
+._175216xz svg{height:6pc}
+._17521qr7 svg{height:8pc}
+._17521tcg svg{height:24px}
+._17521ylp svg{height:40px}
+._17527vkz svg{height:1pc}
+._1752zwfg svg{height:2pc}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._4t3i1osq{height:100%}
+._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
+._bfhkr4aa{background-color:var(--ds-icon-subtle,#8993a4)}
+._i0dl1osq{flex-basis:100%}
+._w8l516xz svg{width:6pc}
+._w8l51qr7 svg{width:8pc}
+._w8l51tcg svg{width:24px}
+._w8l51ylp svg{width:40px}
+._w8l57vkz svg{width:1pc}
+._w8l5zwfg svg{width:2pc}

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

@@ -1,48 +1,37 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* avatar-image.tsx generated by @compiled/babel-plugin v0.36.1 */
+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';
-const avatarDefaultIconStyles = css({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  backgroundColor: `var(--ds-icon-subtle, ${N90})`
-});
-const avatarDefaultIconVisualRefreshStyles = css({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
-});
-const nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
-  return {
-    ...styles,
-    [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: `${size}px`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        height: `${size}px`
-      }
-    })
-  };
-}, {});
-const avatarImageStyles = css({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  flex: '1 1 100%'
-});
+const styles = {
+  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
+  icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
+  iconBg: "_bfhkr4aa",
+  iconBGVisualRefresh: "_bfhk1v33",
+  circle: "_2rko1q5u"
+};
+const borderRadiusMap = {
+  xsmall: "_2rkogqwt",
+  small: "_2rkogqwt",
+  medium: "_2rko1l7b",
+  large: "_2rko1l7b",
+  xlarge: "_2rkoi2wt",
+  xxlarge: "_2rkob7nn"
+};
+const nestedSvgStylesMap = {
+  xsmall: "_w8l57vkz _17527vkz",
+  small: "_w8l51tcg _17521tcg",
+  medium: "_w8l5zwfg _1752zwfg",
+  large: "_w8l51ylp _17521ylp",
+  xlarge: "_w8l516xz _175216xz",
+  xxlarge: "_w8l51qr7 _17521qr7"
+};
 
 /**
  * __Avatar image__
@@ -57,33 +46,31 @@ const AvatarImage = ({
   testId
 }) => {
   const [hasImageErrored, setHasImageErrored] = useState(false);
-  const borderRadius = appearance === 'circle' ? '50%' : `${AVATAR_RADIUS[size]}px`;
-  const isHidden = !alt ? true : undefined;
 
   // If src changes, reset state
   useEffect(() => {
     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 && `${testId}--person`,
       spacing: "spacious"
-    }) : jsx(PersonIconLegacy, {
+    }) : /*#__PURE__*/React.createElement(PersonIconLegacy, {
       label: alt,
       color: `var(--ds-icon-inverse, ${N0})`,
       LEGACY_secondaryColor: `var(--ds-icon-subtle, ${N90})`,
       testId: testId && `${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 && `${testId}--ship`,
       spacing: "spacious"
-    }) : jsx(ReleaseIconMigration, {
+    }) : /*#__PURE__*/React.createElement(ReleaseIconMigration, {
       label: alt,
       color: `var(--ds-icon-inverse, ${N0})`,
       LEGACY_secondaryColor: `var(--ds-icon-subtle, ${N90})`,
@@ -91,19 +78,15 @@ const AvatarImage = ({
       spacing: "spacious"
     }));
   }
-  return jsx("img", {
+  return /*#__PURE__*/React.createElement("img", {
     src: src,
     alt: alt,
     "data-testid": testId && `${testId}--image`,
-    css: avatarImageStyles,
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      borderRadius: borderRadius
-    },
     onError: () => setHasImageErrored(true),
-    "aria-hidden": isHidden,
+    "aria-hidden": !alt ? true : undefined,
     "data-vc": testId ? `${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/es2019/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/es2019/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';
-const 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";
+const styles = {
+  root: "_2rko1q5u _1reo15vq _18m915vq _189e1bk5 _1dqonqa1 _1e0c1txw _vchhusvi _1bsb1osq _4t3i1osq _4cvr1h6o _ae4v1h6o _bfhk1bhr"
+};
+const unboundStyles = {
+  root: "_1h6d1bhr"
+};
 
 /**
  * __Icon wrapper__
@@ -23,15 +15,14 @@ const iconWrapperStyles = css({
  * An icon wrapper is used internally only.
  */
 const IconWrapper = ({
-  bgColor = `var(--ds-surface-overlay, ${N0})`,
+  bgColor,
   children
-}) => jsx("span", {
-  css: iconWrapperStyles,
+}) => /*#__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: `${BORDER_WIDTH}px solid ${bgColor}`,
+    borderColor: bgColor,
     backgroundColor: bgColor
-  }
+  },
+  className: ax([styles.root, unboundStyles.root])
 }, children);
 export default IconWrapper;

package/dist/es2019/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/es2019/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';
 const BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: `var(--ds-icon-danger, ${R300})`,
@@ -64,6 +67,23 @@ const AvatarPresence = ({
   xmlns: "http://www.w3.org/2000/svg"
 }, getPresence(presence)) : children);
 export default AvatarPresence;
+const styles = {
+  root: "_kqswstnw _lcxvglyw"
+};
+const iconSizeMap = {
+  small: "_4t3i1crf _1bsb1crf",
+  medium: "_4t3idlk8 _1bsbdlk8",
+  large: "_4t3io7ao _1bsbo7ao",
+  xlarge: "_4t3if6fq _1bsbf6fq"
+};
+const iconOffsetMap = {
+  square: "_94n5myb0 _1xi2myb0",
+  small: "_94n5idpf _1xi2idpf",
+  medium: "_94n5idpf _1xi2idpf",
+  large: "_94n5t94y _1xi2t94y",
+  xlarge: "_94n51v6z _1xi21v6z"
+};
+
 /**
  * __Presence wrapper__
  *
@@ -77,22 +97,10 @@ export const PresenceWrapper = ({
   presence,
   testId
 }) => {
-  const position = appearance === 'square' ? -4 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     "data-testid": testId && `${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: `${position}px`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      height: `${ICON_SIZES[size]}px`,
-      right: `${position}px`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      width: `${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/es2019/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/es2019/skeleton.js

@@ -1,46 +1,28 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { css, jsx } from '@emotion/react';
-import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH, CSS_VAR_AVATAR_BGCOLOR } from './constants';
-const 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(${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: `${BORDER_WIDTH}px solid transparent`
-});
-const sizeStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
-  return {
-    ...styles,
-    [key]: css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      width: `${size}px`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      height: `${size}px`
-    })
-  };
-}, {});
-const radiusStyles = Object.entries(AVATAR_RADIUS).reduce((styles, [key, size]) => {
-  return {
-    ...styles,
-    [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: `${size}px`
-    })
-  };
-}, {});
-const defaultRadiusStyles = css({
-  borderRadius: "var(--ds-border-radius-circle, 50%)"
-});
-const strongOpacityStyles = css({
-  opacity: 0.3
-});
-const defaultOpacityStyles = css({
-  opacity: 0.15
-});
+/* skeleton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./skeleton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const bgColorCssVar = '--avatar-skeleton-background-color';
+const styles = {
+  root: "_2rko1q5u _189e1bk5 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
+  strongOpacity: "_tzy4clii"
+};
+const sizeStyles = {
+  xsmall: "_1bsb7vkz _4t3i7vkz",
+  small: "_1bsb1tcg _4t3i1tcg",
+  medium: "_1bsbzwfg _4t3izwfg",
+  large: "_1bsb1ylp _4t3i1ylp",
+  xlarge: "_1bsb16xz _4t3i16xz",
+  xxlarge: "_1bsb1qr7 _4t3i1qr7"
+};
+const borderRadiusMap = {
+  xsmall: "_2rkogqwt",
+  small: "_2rkogqwt",
+  medium: "_2rko1l7b",
+  large: "_2rko1l7b",
+  xlarge: "_2rkoi2wt",
+  xxlarge: "_2rkob7nn"
+};
 
 /**
  * __Skeleton__
@@ -55,14 +37,10 @@ const Skeleton = ({
   appearance,
   color,
   weight
-}) => 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
-  ,
+}) => /*#__PURE__*/React.createElement("div", {
   style: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    [CSS_VAR_AVATAR_BGCOLOR]: color !== null && color !== void 0 ? color : 'currentColor'
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  }
+    [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/es2019/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/es2019/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';
+const styles = {
+  root: "_kqswstnw"
+};
+const iconSizeMap = {
+  small: "_4t3i1crf _1bsb1crf",
+  medium: "_4t3idlk8 _1bsbdlk8",
+  large: "_4t3io7ao _1bsbo7ao",
+  xlarge: "_4t3if6fq _1bsbf6fq"
+};
+const iconOffsetMap = {
+  square: "_1xi2idpf _154iidpf",
+  small: "_1xi2idpf _154iidpf",
+  medium: "_1xi2idpf _154iidpf",
+  large: "_1xi2t94y _154it94y",
+  xlarge: "_1xi21v6z _154i1v6z"
+};
 const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: `var(--ds-icon-success, ${G400})`,
   cx: "4",
@@ -75,20 +94,10 @@ export const StatusWrapper = ({
   children,
   testId
 }) => {
-  const position = appearance === 'square' ? 0 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     "data-testid": testId && `${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: `${ICON_SIZES[size]}px`,
-      right: `${position}px`,
-      top: `${position}px`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      width: `${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/es2019/utilities.js

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