@atlaskit/avatar 24.0.1 → 25.0.1

package/dist/cjs/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/cjs/internal/avatar-image.js

@@ -1,102 +1,90 @@
+/* avatar-image.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("./avatar-image.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _person = _interopRequireDefault(require("@atlaskit/icon/core/migration/person"));
 var _releaseShip = _interopRequireDefault(require("@atlaskit/icon/core/migration/release--ship"));
 var _person2 = _interopRequireDefault(require("@atlaskit/icon/core/person"));
 var _release = _interopRequireDefault(require("@atlaskit/icon/core/release"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("../constants");
-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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */
-var avatarDefaultIconStyles = (0, _react2.css)({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  backgroundColor: "var(--ds-icon-subtle, ".concat(_colors.N90, ")")
-});
-var avatarDefaultIconVisualRefreshStyles = (0, _react2.css)({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
-});
-var nestedAvatarStyles = Object.entries(_constants.AVATAR_SIZES).reduce(function (styles, _ref) {
-  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-    key = _ref2[0],
-    size = _ref2[1];
-  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react2.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 = (0, _react2.css)({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  flex: '1 1 100%'
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
-  var borderRadius = appearance === 'circle' ? '50%' : "".concat(_constants.AVATAR_RADIUS[size], "px");
-  var isHidden = !alt ? true : undefined;
 
   // If src changes, reset state
   (0, _react.useEffect)(function () {
     setHasImageErrored(false);
   }, [src]);
   if (!src || hasImageErrored) {
-    return (0, _react2.jsx)("span", {
-      css: [(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? avatarDefaultIconVisualRefreshStyles : avatarDefaultIconStyles, nestedAvatarStyles[size]]
-    }, appearance === 'circle' ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? (0, _react2.jsx)(_person2.default, {
+    return /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)([styles.icon, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
+    }, appearance === 'circle' ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(_person2.default, {
       label: alt,
       color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && "".concat(testId, "--person"),
       spacing: "spacious"
-    }) : (0, _react2.jsx)(_person.default, {
+    }) : /*#__PURE__*/React.createElement(_person.default, {
       label: alt,
       color: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
       LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(_colors.N90, ")"),
       testId: testId && "".concat(testId, "--person"),
       spacing: "spacious"
-    }) : (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? (0, _react2.jsx)(_release.default, {
+    }) : (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(_release.default, {
       label: alt,
       color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && "".concat(testId, "--ship"),
       spacing: "spacious"
-    }) : (0, _react2.jsx)(_releaseShip.default, {
+    }) : /*#__PURE__*/React.createElement(_releaseShip.default, {
       label: alt,
       color: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
       LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(_colors.N90, ")"),
@@ -104,21 +92,17 @@ var AvatarImage = function AvatarImage(_ref3) {
       spacing: "spacious"
     }));
   }
-  return (0, _react2.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: (0, _runtime.ax)([styles.image, borderRadiusMap[size], appearance === 'circle' && styles.circle])
   });
 };
 var _default = exports.default = AvatarImage;

package/dist/cjs/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/cjs/internal/icon-wrapper.js

@@ -1,27 +1,22 @@
+/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("../constants");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-var iconWrapperStyles = (0, _react.css)({
-  display: 'flex',
-  boxSizing: 'border-box',
-  width: '100%',
-  height: '100%',
-  alignItems: 'center',
-  alignContent: 'center',
-  borderRadius: "var(--ds-border-radius-circle, 50%)",
-  overflow: 'hidden'
-});
+require("./icon-wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  root: "_2rko1q5u _1reo15vq _18m915vq _189e1bk5 _1dqonqa1 _1e0c1txw _vchhusvi _1bsb1osq _4t3i1osq _4cvr1h6o _ae4v1h6o _bfhk1bhr"
+};
+var unboundStyles = {
+  root: "_1h6d1bhr"
+};
 
 /**
  * __Icon wrapper__
@@ -29,17 +24,15 @@ var iconWrapperStyles = (0, _react.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(_colors.N0, ")") : _ref$bgColor,
+  var bgColor = _ref.bgColor,
     children = _ref.children;
-  return (0, _react.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(_constants.BORDER_WIDTH, "px solid ").concat(bgColor),
+      borderColor: bgColor,
       backgroundColor: bgColor
-    }
+    },
+    className: (0, _runtime.ax)([styles.root, unboundStyles.root])
   }, children);
 };
 var _default = exports.default = IconWrapper;

package/dist/cjs/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/cjs/presence.js

@@ -1,3 +1,4 @@
+/* presence.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,33 +7,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PresenceWrapper = void 0;
+require("./presence.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("./constants");
 var _iconWrapper = _interopRequireDefault(require("./internal/icon-wrapper"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
+var BusyIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
   cx: "4",
   cy: "4",
   r: "4"
-}), /*#__PURE__*/_react.default.createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
 }));
-var FocusIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("path", {
+var FocusIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("path", {
   fill: "var(--ds-icon-discovery, ".concat(_colors.P300, ")"),
   d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
 }));
-var OfflineIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("path", {
+var OfflineIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("path", {
   fill: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
   d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
-}), /*#__PURE__*/_react.default.createElement("path", {
+}), /*#__PURE__*/React.createElement("path", {
   fill: "var(--ds-surface-overlay, ".concat(_colors.N40, ")"),
   d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
 }));
-var OnlineIndicator = /*#__PURE__*/_react.default.createElement("circle", {
+var OnlineIndicator = /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
   cx: "4",
   cy: "4",
@@ -64,9 +67,9 @@ var AvatarPresence = function AvatarPresence(_ref) {
   var borderColor = _ref.borderColor,
     children = _ref.children,
     presence = _ref.presence;
-  return /*#__PURE__*/_react.default.createElement(_iconWrapper.default, {
+  return /*#__PURE__*/React.createElement(_iconWrapper.default, {
     bgColor: borderColor
-  }, presence ? /*#__PURE__*/_react.default.createElement("svg", {
+  }, presence ? /*#__PURE__*/React.createElement("svg", {
     height: "100%",
     version: "1.1",
     viewBox: "0 0 8 8",
@@ -75,6 +78,23 @@ var AvatarPresence = function AvatarPresence(_ref) {
   }, getPresence(presence)) : children);
 };
 var _default = exports.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__
  *
@@ -87,23 +107,11 @@ var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2)
     borderColor = _ref2.borderColor,
     presence = _ref2.presence,
     testId = _ref2.testId;
-  var position = appearance === 'square' ? -4 : _constants.ICON_OFFSET[size];
-  return /*#__PURE__*/_react.default.createElement("span", {
+  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(_constants.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(_constants.ICON_SIZES[size], "px")
-    }
-  }, /*#__PURE__*/_react.default.createElement(AvatarPresence, {
+    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], iconOffsetMap[size], appearance === 'square' && iconOffsetMap['square']])
+  }, /*#__PURE__*/React.createElement(AvatarPresence, {
     borderColor: borderColor,
     presence: !children ? presence : undefined
   }, children));

package/dist/cjs/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/cjs/skeleton.js

@@ -1,55 +1,39 @@
+/* skeleton.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./skeleton.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("@emotion/react");
-var _constants = require("./constants");
-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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */
-var skeletonStyles = (0, _react.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(_constants.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(_constants.BORDER_WIDTH, "px solid transparent")
-});
-var sizeStyles = Object.entries(_constants.AVATAR_SIZES).reduce(function (styles, _ref) {
-  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-    key = _ref2[0],
-    size = _ref2[1];
-  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.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(_constants.AVATAR_RADIUS).reduce(function (styles, _ref3) {
-  var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-    key = _ref4[0],
-    size = _ref4[1];
-  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.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 = (0, _react.css)({
-  borderRadius: "var(--ds-border-radius-circle, 50%)"
-});
-var strongOpacityStyles = (0, _react.css)({
-  opacity: 0.3
-});
-var defaultOpacityStyles = (0, _react.css)({
-  opacity: 0.15
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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__
@@ -59,16 +43,14 @@ var defaultOpacityStyles = (0, _react.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 (0, _react.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: (0, _defineProperty2.default)({}, _constants.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: (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])
   });
 };
 var _default = exports.default = Skeleton;

package/dist/cjs/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}