@atlaskit/avatar 25.3.1 → 25.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/avatar
 
+## 25.4.0
+
+### Minor Changes
+
+- [`a37090c1d91de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a37090c1d91de) -
+  Adds a new hexagon appearance (`<Avatar appearance="hexagon">`) as well as a
+  `<Skeleton appearance="hexagon">` and internal Image default loader for this. The intent with this
+  appearance is documented as displaying AI agents: `circle` for users, `square` for app entities
+  (teams, projects, spaces), and`hexagon` for agent entities.
+
+## 25.3.2
+
+### Patch Changes
+
+- [`2e422847ee061`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e422847ee061) -
+  [ux] Revert PR (Add a new prop to set the container element for avatar content)
+
 ## 25.3.1
 
 ### Patch Changes

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

@@ -1,23 +1,35 @@
 
+._14mj12b0:after{border-radius:var(--ds-radius-small,4px)}
 ._14mj1qi0:after{border-radius:var(--ds-radius-medium,6px)}
 ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
-._14mjfajl:after{border-radius:var(--ds-radius-small,3px)}
+._14mjidpf:after{border-radius:0}
 ._14mjlb4i:after{border-radius:var(--ds-radius-xsmall,2px)}
 ._14mjpb1k:after{border-radius:var(--ds-radius-xlarge,9pt)}
 ._19itglyw{border:none}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}
+._2rkoidpf{border-radius:0}
 ._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)}
 ._qc5o1p41:after{transition:opacity .2s}
-._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
+._v564ieh6{transition:transform .2s,opacity .2s}
+._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
+._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
+._195g1ukp{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 8px)}
+._195g8ocb{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 4px)}
+._195gcwjc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 1px)}
+._195gs7t4{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 2px)}
+._1moult7l{margin-block:calc(var(--ds-border-width-selected, 2px)*1.22*-1)}
+._1rjcf6hp{padding-block:calc(var(--ds-border-width-selected, 2px)*.5)}
+._1rjcyvr3{padding-block:calc(var(--ds-border-width-selected, 2px)*1.22)}._11fnglyw:after{pointer-events:none}
 ._12ji1r31{outline-color:currentColor}
 ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
 ._12y31o36{outline-width:medium}
 ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
+._16qsn7od{box-shadow:unset}
 ._18m915vq{overflow-y:hidden}
 ._18postnw:after{position:absolute}
 ._1bah1h6o{justify-content:center}
@@ -30,6 +42,8 @@
 ._1e0c1txw{display:flex}
 ._1hfk1j28:after{background-color:transparent}
 ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
+._1o9o1p6i:has(:focus-visible){background-color:var(--ds-border-focused,#388bff)}
+._1o9ovuon:has(:focus-visible){background-color:var(--ds-surface,#fff)}
 ._1peqidpf:after{opacity:0}
 ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
 ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
@@ -52,6 +66,7 @@
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._aetrf705:after{content:" "}
 ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
+._bfhk1j28{background-color:transparent}
 ._bfhkcxp3{background-color:var(--avatar-bg-color)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._eeh8kb7n:active:after{opacity:1}
@@ -59,14 +74,18 @@
 ._gcm1182g:active:after{background-color:var(--ds-interaction-pressed,rgba(9,30,66,.36))}
 ._kqswh2mm{position:relative}
 ._kqswpfqs{position:static}
+._mkrz1kw7{clip-path:inherit}
+._mkrz1nd3{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,92.64102% 21.33975%,94.06889% 22.33956%,95.30146% 23.57212%,96.30127% 25%,97.03794% 26.5798%,97.48909% 28.26352%,97.64102% 30%,97.64102% 70%,97.48909% 71.73648%,97.03794% 73.4202%,96.30127% 75%,95.30146% 76.42788%,94.06889% 77.66044%,92.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,7.35898% 78.66025%,5.93111% 77.66044%,4.69854% 76.42788%,3.69873% 75%,2.96206% 73.4202%,2.51091% 71.73648%,2.35898% 70%,2.35898% 30%,2.51091% 28.26352%,2.96206% 26.5798%,3.69873% 25%,4.69854% 23.57212%,5.93111% 22.33956%,7.35898% 21.33975%)}
 ._t9ec1aqe{transform:translateZ(0)}
 ._vchh1ntv{box-sizing:content-box}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._z0ai1osq:after{width:100%}
 ._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._128midpf:focus-visible{outline-width:0}
 ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
 ._1ejjglyw:focus-visible{box-shadow:none}
+._1ejjn7od:focus-visible{box-shadow:unset}
 ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
-@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}._4davidpf:focus-visible{outline-width:0}}
 @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}

package/dist/cjs/avatar-content.js

@@ -27,6 +27,9 @@ var styles = {
 };
 var unboundStyles = {
   root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
+  hexagonFocusContainer: "_1rjcyvr3 _18zr1dm9 _1moult7l _bfhk1j28 _mkrz1nd3 _1o9o1p6i",
+  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
+  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
   interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
 };
 var widthHeightMap = {
@@ -37,11 +40,19 @@ var widthHeightMap = {
   xlarge: "_1bsb16xz _4t3i16xz",
   xxlarge: "_1bsb1qr7 _4t3i1qr7"
 };
+var marginAdjustmentMap = {
+  xsmall: "_195gcwjc",
+  small: "_195gcwjc",
+  medium: "_195gs7t4",
+  large: "_195gs7t4",
+  xlarge: "_195g8ocb",
+  xxlarge: "_195g1ukp"
+};
 var borderRadiusMap = {
   xsmall: "_2rkolb4i _14mjlb4i",
   small: "_2rkolb4i _14mjlb4i",
-  medium: "_2rkofajl _14mjfajl",
-  large: "_2rkofajl _14mjfajl",
+  medium: "_2rko12b0 _14mj12b0",
+  large: "_2rko12b0 _14mj12b0",
   xlarge: "_2rko1qi0 _14mj1qi0",
   xxlarge: "_2rkopb1k _14mjpb1k"
 };
@@ -75,7 +86,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     size = _useAvatarContent.size,
     stackIndex = _useAvatarContent.stackIndex;
   var isInteractive = Boolean(onClick || href || isDisabled);
-  return /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
+  var renderedContent = /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
     style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
     ref: ref || contextRef,
     "aria-label": isInteractive ? label : undefined,
@@ -89,6 +100,18 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     target: target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
   }, {
-    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])
+    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, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
   }), children || avatarImage);
+  if (appearance !== 'hexagon') {
+    return renderedContent;
+  }
+
+  // For a Hexagon Avatar in order to have hexagonal "border" and "outline", we have to
+  // layer multiple elements and use their background colors to create the different layers.
+  return /*#__PURE__*/React.createElement("div", {
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
+    className: (0, _runtime.ax)([unboundStyles.hexagonFocusContainer, marginAdjustmentMap[size]])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer])
+  }, renderedContent));
 });

package/dist/cjs/avatar.js

@@ -58,8 +58,6 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     testId = _ref.testId,
     _ref$as = _ref.as,
     AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
-    contentAs = _ref.contentAs,
-    containerRole = _ref.containerRole,
     _ref$isDecorative = _ref.isDecorative,
     isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative,
     imgLoading = _ref.imgLoading;
@@ -117,12 +115,11 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
   var isInteractive = onClick || href || isDisabled;
   var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
-  var avatarContainerRole = containerRole || (containerShouldBeImage ? 'img' : undefined);
   return /*#__PURE__*/React.createElement(_context.EnsureIsInsideAvatarContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(AvatarContainer, {
     "data-testid": testId,
-    role: avatarContainerRole,
+    role: containerShouldBeImage ? 'img' : undefined,
     "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
     style: {
       zIndex: stackIndex
@@ -130,7 +127,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
   }, /*#__PURE__*/React.createElement(_context.AvatarContentContext.Provider, {
     value: {
-      as: contentAs || (0, _utilities.getCustomElement)(isDisabled, href, onClick),
+      as: (0, _utilities.getCustomElement)(isDisabled, href, onClick),
       appearance: appearance,
       borderColor: borderColor,
       href: href,

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

@@ -16,6 +16,7 @@
 ._4t3i1osq{height:100%}
 ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
 ._i0dl1osq{flex-basis:100%}
+._mkrz1nd3{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,92.64102% 21.33975%,94.06889% 22.33956%,95.30146% 23.57212%,96.30127% 25%,97.03794% 26.5798%,97.48909% 28.26352%,97.64102% 30%,97.64102% 70%,97.48909% 71.73648%,97.03794% 73.4202%,96.30127% 75%,95.30146% 76.42788%,94.06889% 77.66044%,92.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,7.35898% 78.66025%,5.93111% 77.66044%,4.69854% 76.42788%,3.69873% 75%,2.96206% 73.4202%,2.51091% 71.73648%,2.35898% 70%,2.35898% 30%,2.51091% 28.26352%,2.96206% 26.5798%,3.69873% 25%,4.69854% 23.57212%,5.93111% 22.33956%,7.35898% 21.33975%)}
 ._w8l516xz svg{width:6pc}
 ._w8l51qr7 svg{width:8pc}
 ._w8l51tcg svg{width:24px}

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

@@ -12,13 +12,15 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _aiAgent = _interopRequireDefault(require("@atlaskit/icon/core/ai-agent"));
 var _person = _interopRequireDefault(require("@atlaskit/icon/core/migration/person"));
 var _releaseShip = _interopRequireDefault(require("@atlaskit/icon/core/migration/release--ship"));
 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 styles = {
   image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
   icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk1v33",
-  circle: "_2rko1rr0"
+  circle: "_2rko1rr0",
+  hexagon: "_mkrz1nd3"
 };
 var borderRadiusMap = {
   xsmall: "_2rkolb4i",
@@ -60,21 +62,39 @@ var AvatarImage = function AvatarImage(_ref) {
     setHasImageErrored(false);
   }, [src]);
   if (!src || hasImageErrored) {
+    var renderedIcon;
+    switch (appearance) {
+      case 'circle':
+        renderedIcon = /*#__PURE__*/React.createElement(_person.default, {
+          label: alt,
+          color: "var(--ds-icon-subtle, #626F86)",
+          testId: testId && "".concat(testId, "--person"),
+          spacing: "spacious",
+          LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
+        });
+        break;
+      case 'hexagon':
+        renderedIcon = /*#__PURE__*/React.createElement(_aiAgent.default, {
+          label: alt,
+          color: "var(--ds-icon-subtle, #626F86)",
+          testId: testId && "".concat(testId, "--agent"),
+          spacing: "spacious"
+        });
+        break;
+      default: // historical default for safety
+      case 'square':
+        renderedIcon = /*#__PURE__*/React.createElement(_releaseShip.default, {
+          label: alt,
+          color: "var(--ds-icon-subtle, #626F86)",
+          testId: testId && "".concat(testId, "--ship"),
+          spacing: "spacious",
+          LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
+        });
+        break;
+    }
     return /*#__PURE__*/React.createElement("span", {
       className: (0, _runtime.ax)([styles.icon, nestedSvgStylesMap[size]])
-    }, appearance === 'circle' ? /*#__PURE__*/React.createElement(_person.default, {
-      label: alt,
-      color: "var(--ds-icon-subtle, #626F86)",
-      testId: testId && "".concat(testId, "--person"),
-      spacing: "spacious",
-      LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
-    }) : /*#__PURE__*/React.createElement(_releaseShip.default, {
-      label: alt,
-      color: "var(--ds-icon-subtle, #626F86)",
-      testId: testId && "".concat(testId, "--ship"),
-      spacing: "spacious",
-      LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
-    }));
+    }, renderedIcon);
   }
   return /*#__PURE__*/React.createElement("img", {
     loading: imgLoading,
@@ -87,7 +107,7 @@ var AvatarImage = function AvatarImage(_ref) {
     "aria-hidden": !alt ? true : undefined,
     "data-vc": testId ? "".concat(testId, "--image") : 'avatar-image',
     "data-ssr-placeholder-ignored": true,
-    className: (0, _runtime.ax)([styles.image, borderRadiusMap[size], appearance === 'circle' && styles.circle])
+    className: (0, _runtime.ax)([styles.image, borderRadiusMap[size], appearance === 'circle' && styles.circle, appearance === 'hexagon' && styles.hexagon])
   });
 };
 var _default = exports.default = AvatarImage;

package/dist/cjs/presence.compiled.css

@@ -2,6 +2,8 @@
 ._1bsbdlk8{width:14px}
 ._1bsbf6fq{width:18px}
 ._1bsbo7ao{width:15px}
+._1xi21lpd{right:-5px}
+._1xi21n1a{right:-1px}
 ._1xi21v6z{right:7px}
 ._1xi2idpf{right:0}
 ._1xi2myb0{right:-4px}
@@ -10,8 +12,11 @@
 ._4t3idlk8{height:14px}
 ._4t3if6fq{height:18px}
 ._4t3io7ao{height:15px}
+._94n51n1a{bottom:-1px}
 ._94n51v6z{bottom:7px}
+._94n51y44{bottom:4px}
 ._94n5idpf{bottom:0}
+._94n5l52n{bottom:17px}
 ._94n5myb0{bottom:-4px}
 ._94n5t94y{bottom:1px}
 ._kqswstnw{position:absolute}

package/dist/cjs/presence.js

@@ -86,13 +86,21 @@ var iconSizeMap = {
   large: "_4t3io7ao _1bsbo7ao",
   xlarge: "_4t3if6fq _1bsbf6fq"
 };
-var iconOffsetMap = {
-  square: "_94n5myb0 _1xi2myb0",
+var circleIconOffsetMap = {
   small: "_94n5idpf _1xi2idpf",
   medium: "_94n5idpf _1xi2idpf",
   large: "_94n5t94y _1xi2t94y",
   xlarge: "_94n51v6z _1xi21v6z"
 };
+var squareIconOffsetMap = {
+  root: "_94n5myb0 _1xi2myb0"
+};
+var hexagonIconOffsetMap = {
+  small: "_94n51n1a _1xi21n1a",
+  medium: "_94n51n1a _1xi21n1a",
+  large: "_94n51y44 _1xi2myb0",
+  xlarge: "_94n5l52n _1xi21lpd"
+};
 
 /**
  * __Presence wrapper__
@@ -109,7 +117,7 @@ var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2)
   return /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
-    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], iconOffsetMap[size], appearance === 'square' && iconOffsetMap['square']])
+    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
   }, /*#__PURE__*/React.createElement(AvatarPresence, {
     borderColor: borderColor,
     presence: !children ? presence : undefined

package/dist/cjs/skeleton.compiled.css

@@ -1,7 +1,7 @@
 
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._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)}
@@ -21,5 +21,6 @@
 ._4t3i7vkz{height:1pc}
 ._4t3izwfg{height:2pc}
 ._bfhk1r8p{background-color:var(--avatar-skeleton-background-color)}
+._mkrz1nd3{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,92.64102% 21.33975%,94.06889% 22.33956%,95.30146% 23.57212%,96.30127% 25%,97.03794% 26.5798%,97.48909% 28.26352%,97.64102% 30%,97.64102% 70%,97.48909% 71.73648%,97.03794% 73.4202%,96.30127% 75%,95.30146% 76.42788%,94.06889% 77.66044%,92.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,7.35898% 78.66025%,5.93111% 77.66044%,4.69854% 76.42788%,3.69873% 75%,2.96206% 73.4202%,2.51091% 71.73648%,2.35898% 70%,2.35898% 30%,2.51091% 28.26352%,2.96206% 26.5798%,3.69873% 25%,4.69854% 23.57212%,5.93111% 22.33956%,7.35898% 21.33975%)}
 ._tzy4clii{opacity:.3}
 ._tzy4nh7s{opacity:.15}

package/dist/cjs/skeleton.js

@@ -17,6 +17,7 @@ var bgColorCssVar = '--avatar-skeleton-background-color';
 var styles = {
   root: "_2rko1qll _189e1dm9 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
   square: "_2rkol0p1",
+  hexagon: "_mkrz1nd3",
   strongOpacity: "_tzy4clii"
 };
 var sizeStyles = {
@@ -30,8 +31,8 @@ var sizeStyles = {
 var borderRadiusMap = {
   xsmall: "_2rkolb4i",
   small: "_2rkolb4i",
-  medium: "_2rkofajl",
-  large: "_2rkofajl",
+  medium: "_2rko12b0",
+  large: "_2rko12b0",
   xlarge: "_2rko1qi0",
   xxlarge: "_2rkopb1k"
 };
@@ -51,7 +52,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' && !(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])
+    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, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
   });
 };
 var _default = exports.default = Skeleton;

package/dist/cjs/status.compiled.css

@@ -1,15 +1,21 @@
-._154i1v6z{top:7px}
-._154iidpf{top:0}
-._154it94y{top:1px}
+._152t1n1a{inset-block-start:-1px}
+._152t1v6z{inset-block-start:7px}
+._152t1y44{inset-block-start:4px}
+._152tidpf{inset-block-start:0}
+._152tl52n{inset-block-start:17px}
+._152tt94y{inset-block-start: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}
+._kqswstnw{position:absolute}
+._rjxp1lpd{inset-inline-end:-5px}
+._rjxp1n1a{inset-inline-end:-1px}
+._rjxp1v6z{inset-inline-end:7px}
+._rjxpidpf{inset-inline-end:0}
+._rjxpmyb0{inset-inline-end:-4px}
+._rjxpt94y{inset-inline-end:1px}

package/dist/cjs/status.js

@@ -23,12 +23,20 @@ var iconSizeMap = {
   large: "_4t3io7ao _1bsbo7ao",
   xlarge: "_4t3if6fq _1bsbf6fq"
 };
-var iconOffsetMap = {
-  square: "_1xi2idpf _154iidpf",
-  small: "_1xi2idpf _154iidpf",
-  medium: "_1xi2idpf _154iidpf",
-  large: "_1xi2t94y _154it94y",
-  xlarge: "_1xi21v6z _154i1v6z"
+var circleIconOffsetMap = {
+  small: "_rjxpidpf _152tidpf",
+  medium: "_rjxpidpf _152tidpf",
+  large: "_rjxpt94y _152tt94y",
+  xlarge: "_rjxp1v6z _152t1v6z"
+};
+var squareIconOffsetMap = {
+  root: "_rjxpidpf _152tidpf"
+};
+var hexagonIconOffsetMap = {
+  small: "_rjxp1n1a _152t1n1a",
+  medium: "_rjxp1n1a _152t1n1a",
+  large: "_rjxpmyb0 _152t1y44",
+  xlarge: "_rjxp1lpd _152tl52n"
 };
 var ApprovedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
@@ -106,7 +114,7 @@ var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
   return /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
-    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], iconOffsetMap[size], appearance === 'square' && iconOffsetMap['square']])
+    className: (0, _runtime.ax)([styles.root, iconSizeMap[size], circleIconOffsetMap[size], appearance === 'square' && squareIconOffsetMap.root, appearance === 'hexagon' && hexagonIconOffsetMap[size]])
   }, /*#__PURE__*/React.createElement(AvatarStatus, {
     borderColor: borderColor,
     status: !children ? status : undefined

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

@@ -1,23 +1,35 @@
 
+._14mj12b0:after{border-radius:var(--ds-radius-small,4px)}
 ._14mj1qi0:after{border-radius:var(--ds-radius-medium,6px)}
 ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
-._14mjfajl:after{border-radius:var(--ds-radius-small,3px)}
+._14mjidpf:after{border-radius:0}
 ._14mjlb4i:after{border-radius:var(--ds-radius-xsmall,2px)}
 ._14mjpb1k:after{border-radius:var(--ds-radius-xlarge,9pt)}
 ._19itglyw{border:none}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}
+._2rkoidpf{border-radius:0}
 ._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)}
 ._qc5o1p41:after{transition:opacity .2s}
-._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
+._v564ieh6{transition:transform .2s,opacity .2s}
+._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
+._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
+._195g1ukp{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 8px)}
+._195g8ocb{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 4px)}
+._195gcwjc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 1px)}
+._195gs7t4{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 2px)}
+._1moult7l{margin-block:calc(var(--ds-border-width-selected, 2px)*1.22*-1)}
+._1rjcf6hp{padding-block:calc(var(--ds-border-width-selected, 2px)*.5)}
+._1rjcyvr3{padding-block:calc(var(--ds-border-width-selected, 2px)*1.22)}._11fnglyw:after{pointer-events:none}
 ._12ji1r31{outline-color:currentColor}
 ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
 ._12y31o36{outline-width:medium}
 ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
+._16qsn7od{box-shadow:unset}
 ._18m915vq{overflow-y:hidden}
 ._18postnw:after{position:absolute}
 ._1bah1h6o{justify-content:center}
@@ -30,6 +42,8 @@
 ._1e0c1txw{display:flex}
 ._1hfk1j28:after{background-color:transparent}
 ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
+._1o9o1p6i:has(:focus-visible){background-color:var(--ds-border-focused,#388bff)}
+._1o9ovuon:has(:focus-visible){background-color:var(--ds-surface,#fff)}
 ._1peqidpf:after{opacity:0}
 ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
 ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
@@ -52,6 +66,7 @@
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._aetrf705:after{content:" "}
 ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
+._bfhk1j28{background-color:transparent}
 ._bfhkcxp3{background-color:var(--avatar-bg-color)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._eeh8kb7n:active:after{opacity:1}
@@ -59,14 +74,18 @@
 ._gcm1182g:active:after{background-color:var(--ds-interaction-pressed,rgba(9,30,66,.36))}
 ._kqswh2mm{position:relative}
 ._kqswpfqs{position:static}
+._mkrz1kw7{clip-path:inherit}
+._mkrz1nd3{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,92.64102% 21.33975%,94.06889% 22.33956%,95.30146% 23.57212%,96.30127% 25%,97.03794% 26.5798%,97.48909% 28.26352%,97.64102% 30%,97.64102% 70%,97.48909% 71.73648%,97.03794% 73.4202%,96.30127% 75%,95.30146% 76.42788%,94.06889% 77.66044%,92.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,7.35898% 78.66025%,5.93111% 77.66044%,4.69854% 76.42788%,3.69873% 75%,2.96206% 73.4202%,2.51091% 71.73648%,2.35898% 70%,2.35898% 30%,2.51091% 28.26352%,2.96206% 26.5798%,3.69873% 25%,4.69854% 23.57212%,5.93111% 22.33956%,7.35898% 21.33975%)}
 ._t9ec1aqe{transform:translateZ(0)}
 ._vchh1ntv{box-sizing:content-box}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._z0ai1osq:after{width:100%}
 ._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._128midpf:focus-visible{outline-width:0}
 ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
 ._1ejjglyw:focus-visible{box-shadow:none}
+._1ejjn7od:focus-visible{box-shadow:unset}
 ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
-@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}._4davidpf:focus-visible{outline-width:0}}
 @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}

package/dist/es2019/avatar-content.js

@@ -17,6 +17,9 @@ const styles = {
 };
 const unboundStyles = {
   root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
+  hexagonFocusContainer: "_1rjcyvr3 _18zr1dm9 _1moult7l _bfhk1j28 _mkrz1nd3 _1o9o1p6i",
+  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
+  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
   interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
 };
 const widthHeightMap = {
@@ -27,11 +30,19 @@ const widthHeightMap = {
   xlarge: "_1bsb16xz _4t3i16xz",
   xxlarge: "_1bsb1qr7 _4t3i1qr7"
 };
+const marginAdjustmentMap = {
+  xsmall: "_195gcwjc",
+  small: "_195gcwjc",
+  medium: "_195gs7t4",
+  large: "_195gs7t4",
+  xlarge: "_195g8ocb",
+  xxlarge: "_195g1ukp"
+};
 const borderRadiusMap = {
   xsmall: "_2rkolb4i _14mjlb4i",
   small: "_2rkolb4i _14mjlb4i",
-  medium: "_2rkofajl _14mjfajl",
-  large: "_2rkofajl _14mjfajl",
+  medium: "_2rko12b0 _14mj12b0",
+  large: "_2rko12b0 _14mj12b0",
   xlarge: "_2rko1qi0 _14mj1qi0",
   xxlarge: "_2rkopb1k _14mjpb1k"
 };
@@ -66,7 +77,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
     stackIndex
   } = useAvatarContent();
   const isInteractive = Boolean(onClick || href || isDisabled);
-  return /*#__PURE__*/React.createElement(Container, _extends({
+  const renderedContent = /*#__PURE__*/React.createElement(Container, _extends({
     style: {
       [bgColorCssVar]: borderColor,
       [boxShadowCssVar]: `0 0 0 2px ${borderColor}`
@@ -83,6 +94,21 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
     target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
   }, {
-    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])
+    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, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
   }), children || avatarImage);
+  if (appearance !== 'hexagon') {
+    return renderedContent;
+  }
+
+  // For a Hexagon Avatar in order to have hexagonal "border" and "outline", we have to
+  // layer multiple elements and use their background colors to create the different layers.
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      [bgColorCssVar]: borderColor,
+      [boxShadowCssVar]: `0 0 0 2px ${borderColor}`
+    },
+    className: ax([unboundStyles.hexagonFocusContainer, marginAdjustmentMap[size]])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([unboundStyles.hexagonBorderContainer])
+  }, renderedContent));
 });

package/dist/es2019/avatar.js

@@ -44,8 +44,6 @@ const Avatar = /*#__PURE__*/forwardRef(({
   target,
   testId,
   as: AvatarContainer = 'div',
-  contentAs,
-  containerRole,
   isDecorative = false,
   imgLoading
 }, ref) => {
@@ -105,12 +103,11 @@ 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);
-  const avatarContainerRole = containerRole || (containerShouldBeImage ? 'img' : undefined);
   return /*#__PURE__*/React.createElement(EnsureIsInsideAvatarContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(AvatarContainer, {
     "data-testid": testId,
-    role: avatarContainerRole,
+    role: containerShouldBeImage ? 'img' : undefined,
     "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
     style: {
       zIndex: stackIndex
@@ -118,7 +115,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
     className: ax(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
   }, /*#__PURE__*/React.createElement(AvatarContentContext.Provider, {
     value: {
-      as: contentAs || getCustomElement(isDisabled, href, onClick),
+      as: getCustomElement(isDisabled, href, onClick),
       appearance,
       borderColor,
       href,

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

@@ -16,6 +16,7 @@
 ._4t3i1osq{height:100%}
 ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
 ._i0dl1osq{flex-basis:100%}
+._mkrz1nd3{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,92.64102% 21.33975%,94.06889% 22.33956%,95.30146% 23.57212%,96.30127% 25%,97.03794% 26.5798%,97.48909% 28.26352%,97.64102% 30%,97.64102% 70%,97.48909% 71.73648%,97.03794% 73.4202%,96.30127% 75%,95.30146% 76.42788%,94.06889% 77.66044%,92.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,7.35898% 78.66025%,5.93111% 77.66044%,4.69854% 76.42788%,3.69873% 75%,2.96206% 73.4202%,2.51091% 71.73648%,2.35898% 70%,2.35898% 30%,2.51091% 28.26352%,2.96206% 26.5798%,3.69873% 25%,4.69854% 23.57212%,5.93111% 22.33956%,7.35898% 21.33975%)}
 ._w8l516xz svg{width:6pc}
 ._w8l51qr7 svg{width:8pc}
 ._w8l51tcg svg{width:24px}