@activecollab/components 2.0.367 → 2.0.369

package/dist/cjs/presentation/shared/SourceCodeSection.js

@@ -10,14 +10,17 @@ var _LinkBranchOrPullRequestDialog = require("./LinkBranchOrPullRequestDialog");
 var _LinkingCommandsButton = require("./LinkingCommandsButton");
 var _RoundAvatar = require("./RoundAvatar");
 var _tokens = require("./tokens");
+var _AvatarGroup = require("../../components/AvatarGroup");
 var _Button = require("../../components/Button");
 var _AddToListButton = require("../../components/Button/AddToListButton");
+var _Chip = require("../../components/Chip");
 var _Dialog = require("../../components/Dialog");
 var _IconButton = require("../../components/IconButton");
 var _Icons = require("../../components/Icons");
+var _StepSequence = require("../../components/StepSequence");
 var _Tooltip = require("../../components/Tooltip");
-var _Trigger = require("../../components/Trigger");
 var _Typography = require("../../components/Typography");
+var _excluded = ["size", "bg", "initials", "alt"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -26,6 +29,8 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -59,56 +64,24 @@ var iconColorProps = function iconColorProps(icon) {
 };
 
 /* ================================================================== */
-/* Issue markers (open / closed) — small inline glyphs so the          */
-/* open-vs-closed state reads crisply; they inherit `currentColor`.    */
+/* Issue state glyphs (open / closed) — mirror the app's IssueStateIcon */
+/* (`CircleDotIcon` when open, filled `CheckboxBlankTogglerIcon` when    */
+/* closed). Kept as a helper so the row lead and the status chip share   */
+/* the same glyph.                                                       */
 /* ================================================================== */
 
-var IssueOpenIcon = function IssueOpenIcon(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 16 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 16 : _ref$height;
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }, /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "6.4",
-    stroke: "currentColor",
-    strokeWidth: "1.6"
-  }), /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "2.2",
-    fill: "currentColor"
-  }));
-};
-var IssueClosedIcon = function IssueClosedIcon(_ref2) {
-  var _ref2$width = _ref2.width,
-    width = _ref2$width === void 0 ? 16 : _ref2$width,
-    _ref2$height = _ref2.height,
-    height = _ref2$height === void 0 ? 16 : _ref2$height;
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }, /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "6.4",
-    stroke: "currentColor",
-    strokeWidth: "1.6"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M5.2 8.1l1.9 1.9 3.7-3.9",
-    stroke: "currentColor",
-    strokeWidth: "1.6",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
+var IssueStateIcon = function IssueStateIcon(_ref) {
+  var closed = _ref.closed,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size;
+  return closed ? /*#__PURE__*/_react.default.createElement(_Icons.CheckboxBlankTogglerIcon, {
+    width: size,
+    height: size,
+    fill: "var(--color-primary)"
+  }) : /*#__PURE__*/_react.default.createElement(_Icons.CircleDotIcon, {
+    width: size,
+    height: size
+  });
 };
 
 /* ================================================================== */
@@ -820,9 +793,9 @@ var CODE_ENTRIES = [{
 /* Spine + history dialog (for branches / pull requests)               */
 /* ================================================================== */
 
-var StageTip = function StageTip(_ref3) {
-  var name = _ref3.name,
-    details = _ref3.details;
+var StageTip = function StageTip(_ref2) {
+  var name = _ref2.name,
+    details = _ref2.details;
   return /*#__PURE__*/_react.default.createElement("span", {
     style: {
       display: "block",
@@ -843,55 +816,35 @@ var StageTip = function StageTip(_ref3) {
     }, d);
   }));
 };
-var SpineTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
-  displayName: "SourceCodeSection__SpineTrigger",
+var StyledSpineSequence = (0, _styledComponents.default)(_StepSequence.StepSequence).withConfig({
+  displayName: "SourceCodeSection__StyledSpineSequence",
   componentId: "sc-rvqbh5-0"
-})(["display:inline-flex;align-items:center;align-self:center;flex-shrink:0;padding:6px 8px;border-radius:8px;transition:background-color 200ms ease;&:hover{background-color:var(--color-theme-200);}&:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;}"]);
-var StyledSpine = _styledComponents.default.div.withConfig({
-  displayName: "SourceCodeSection__StyledSpine",
-  componentId: "sc-rvqbh5-1"
-})(["display:flex;align-items:flex-start;.circle{width:22px;height:22px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;}.circle.done{background:var(--color-sucess-green);}.circle.progress{background:var(--color-primary);}.circle.failed{background:var(--red-alert);}.circle.todo{background:transparent;border:2px solid var(--color-theme-400);}.dot{border-radius:50%;}.dot-progress{width:7px;height:7px;background:#fff;}.dot-todo{width:6px;height:6px;background:var(--color-theme-500);}.connector{width:13px;height:2px;margin-top:10px;background:var(--color-theme-400);}.connector.on{background:var(--color-sucess-green);}"]);
-var Spine = exports.Spine = function Spine(_ref4) {
-  var items = _ref4.items,
-    onClick = _ref4.onClick;
-  return /*#__PURE__*/_react.default.createElement(SpineTrigger, {
-    type: "button",
+})(["align-self:center;flex-shrink:0;"]);
+var Spine = exports.Spine = function Spine(_ref3) {
+  var items = _ref3.items,
+    onClick = _ref3.onClick;
+  return /*#__PURE__*/_react.default.createElement(StyledSpineSequence, {
+    ariaLabel: "Open source code history",
     onClick: onClick,
-    "aria-label": "Open source code history"
-  }, /*#__PURE__*/_react.default.createElement(StyledSpine, null, items.map(function (s, i) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: s.name
-    }, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-      title: /*#__PURE__*/_react.default.createElement(StageTip, s)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "circle ".concat(s.state)
-    }, s.state === "done" && /*#__PURE__*/_react.default.createElement(_Icons.CheckIcon, {
-      fill: "#fff",
-      width: 14,
-      height: 14
-    }), s.state === "failed" && /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, {
-      fill: "#fff",
-      width: 12,
-      height: 12
-    }), s.state === "progress" && /*#__PURE__*/_react.default.createElement("span", {
-      className: "dot dot-progress"
-    }), s.state === "todo" && /*#__PURE__*/_react.default.createElement("span", {
-      className: "dot dot-todo"
-    }))), i < items.length - 1 && /*#__PURE__*/_react.default.createElement("span", {
-      className: items[i + 1].state !== "todo" ? "connector on" : "connector"
-    }));
-  })));
+    steps: items.map(function (s) {
+      return {
+        key: s.name,
+        state: s.state,
+        tooltip: /*#__PURE__*/_react.default.createElement(StageTip, s)
+      };
+    })
+  });
 };
 
 /* The whole content scrolls together (header + stream + note) once the stream
    is long — the dialog title bar stays fixed, everything below scrolls. */
 var StyledHistory = _styledComponents.default.div.withConfig({
   displayName: "SourceCodeSection__StyledHistory",
-  componentId: "sc-rvqbh5-2"
+  componentId: "sc-rvqbh5-1"
 })(["font-family:", ";max-height:60vh;overflow-y:auto;padding-right:4px;.hist-header{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border-primary);}.hist-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}.hist-branches{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--color-theme-600);}.hist-branch{display:inline-flex;align-items:center;gap:4px;}.hist-repo{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:13px;color:var(--color-theme-600);}.sc-chip{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:0.02em;flex-shrink:0;}.sc-chip.done{color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 15%,transparent);}.sc-chip.gone{color:var(--color-theme-900);background:var(--color-theme-200);border:1px solid var(--border-primary);}.sc-chip.fail{color:var(--red-alert);background:color-mix(in srgb,var(--red-alert) 15%,transparent);}.hist-event{display:flex;align-items:center;gap:12px;padding-bottom:20px;}.hist-event:last-child{padding-bottom:0;}.hist-icon{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;}.hist-body{flex:1 1 auto;min-width:0;}.hist-title{display:flex;align-items:center;gap:6px;min-width:0;}.hist-title > *:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.hist-status{flex-shrink:0;display:inline-flex;}.hist-line{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.5;color:var(--color-theme-600);}.hist-meta{flex-shrink:0;align-self:flex-start;text-align:right;white-space:nowrap;}.hist-note{display:flex;align-items:center;gap:6px;margin-top:16px;color:var(--color-theme-500);}.hist-note svg{flex-shrink:0;}"], SANS);
-var HistoryDialog = exports.HistoryDialog = function HistoryDialog(_ref5) {
-  var entry = _ref5.entry,
-    onClose = _ref5.onClose;
+var HistoryDialog = exports.HistoryDialog = function HistoryDialog(_ref4) {
+  var entry = _ref4.entry,
+    onClose = _ref4.onClose;
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
     open: !!entry,
     onClose: onClose,
@@ -995,17 +948,108 @@ var HistoryDialog = exports.HistoryDialog = function HistoryDialog(_ref5) {
 
 var StyledSourceCode = _styledComponents.default.div.withConfig({
   displayName: "SourceCodeSection__StyledSourceCode",
-  componentId: "sc-rvqbh5-3"
-})(["font-family:", ";margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--border-primary);.sc-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}.sc-completed-row{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-primary);}.sc-add{margin-top:8px;padding-top:12px;border-top:1px solid var(--border-primary);}.sc-add .c--add-to-list-btn svg{box-sizing:content-box;}.sc-item{padding:12px 0;}.sc-item + .sc-item{border-top:1px solid var(--border-primary);}.sc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}.sc-main{flex:1 1 0%;min-width:0;}.sc-name{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;}.sc-lead{flex-shrink:0;display:inline-flex;color:var(--color-theme-600);}.sc-title{flex:0 1 auto;min-width:0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.sc-title.strike{text-decoration:line-through;}.sc-title.strike-link{text-decoration:line-through;}.sc-title.strike-link:hover{text-decoration:none;}.sc-sigs{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--color-theme-600);}.sc-sig{display:inline-flex;align-items:center;gap:4px;}.sc-chip{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:0.02em;flex-shrink:0;}.sc-chip.done{color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 15%,transparent);}.sc-chip.gone{color:var(--color-theme-900);background:var(--color-theme-200);border:1px solid var(--border-primary);}.sc-avatars{display:flex;align-items:center;}.sc-sha{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--color-theme-600);}.sc-diff .add{color:var(--color-sucess-green);}.sc-diff .del{color:var(--red-alert);}.sc-muted{color:var(--color-theme-600);}.sc-refs{display:inline-flex;align-items:center;gap:6px;}.sc-refs .ref-link{color:var(--color-primary);font-weight:500;}"], SANS);
+  componentId: "sc-rvqbh5-2"
+})(["font-family:", ";margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--border-primary);.sc-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}.sc-completed-row{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-primary);}.sc-add{margin-top:8px;padding-top:12px;border-top:1px solid var(--border-primary);}.sc-add .c--add-to-list-btn svg{box-sizing:content-box;}.sc-item{padding:12px 0;}.sc-item + .sc-item{border-top:1px solid var(--border-primary);}.sc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}.sc-main{flex:1 1 0%;min-width:0;}.sc-name{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;}.sc-lead{flex-shrink:0;display:inline-flex;color:var(--color-theme-600);}.sc-title{flex:0 1 auto;min-width:0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.sc-title.strike{text-decoration:line-through;}.sc-title.strike-link{text-decoration:line-through;}.sc-title.strike-link:hover{text-decoration:none;}.sc-sigs{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--color-theme-600);}.sc-sig{display:inline-flex;align-items:center;gap:4px;}.sc-sha{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}.sc-muted{color:var(--color-theme-600);}.sc-refs{display:inline-flex;align-items:center;gap:6px;}.sc-refs .ref-link{color:var(--color-primary);font-weight:500;}"], SANS);
 
 /* Element name — a link that opens the object in a new tab. Keeps the row's
    typography (inherits color + weight), turns primary on hover, link cursor. */
 var TitleLink = _styledComponents.default.a.withConfig({
   displayName: "SourceCodeSection__TitleLink",
-  componentId: "sc-rvqbh5-4"
+  componentId: "sc-rvqbh5-3"
 })(["color:inherit;text-decoration:none;cursor:pointer;transition:color 200ms ease;&:hover{color:var(--color-primary);}"]);
-var IssueRow = exports.IssueRow = function IssueRow(_ref6) {
-  var issue = _ref6.issue;
+
+/* Status label chip — the DS `Chip` styled to match the app's
+   `SourceCodeStatusChip`: a "done" tone (primary text on a translucent-primary
+   fill) and a "gone" tone (muted text on a bordered theme-200 fill). */
+var CHIP_BASE_STYLE = {
+  height: "1.25rem",
+  paddingLeft: "0.5rem",
+  paddingRight: "0.5rem",
+  borderRadius: "0.375rem",
+  gap: "3px",
+  flexShrink: 0
+};
+var CHIP_DONE_STYLE = _objectSpread(_objectSpread({}, CHIP_BASE_STYLE), {}, {
+  backgroundColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)"
+});
+var CHIP_GONE_STYLE = _objectSpread(_objectSpread({}, CHIP_BASE_STYLE), {}, {
+  backgroundColor: "var(--color-theme-200)",
+  border: "1px solid var(--border-primary)"
+});
+var StatusChip = function StatusChip(_ref5) {
+  var label = _ref5.label,
+    tone = _ref5.tone,
+    glyph = _ref5.glyph;
+  return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
+    label: label,
+    startAdornment: glyph,
+    color: tone === "done" ? "var(--color-primary)" : undefined,
+    style: tone === "done" ? CHIP_DONE_STYLE : CHIP_GONE_STYLE,
+    typographyProps: {
+      variant: "Caption 1",
+      weight: "bold",
+      align: "center"
+    }
+  });
+};
+
+/* Contributor avatars — the app renders real user images through the DS
+   `AvatarGroup` (`ContributorAvatars.jsx`). The mock feeds that same component
+   initials avatars via `MockAvatar`, which honours AvatarGroup's cloneElement
+   contract (it injects `size`, `alt` and `style` — the overlap margin + paper
+   ring), so the grouping, overlap and "+N" overflow behave identically. */
+var CONTRIBUTOR_NAMES = {
+  DA: "Dragana A.",
+  IS: "Ilija Studen",
+  MK: "Marko K."
+};
+var MockAvatar = /*#__PURE__*/_react.default.forwardRef(function (_ref6, ref) {
+  var _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 20 : _ref6$size,
+    bg = _ref6.bg,
+    initials = _ref6.initials,
+    alt = _ref6.alt,
+    rest = _objectWithoutProperties(_ref6, _excluded);
+  return (
+    /*#__PURE__*/
+    // `...rest` carries the props AvatarGroup and its Tooltip inject via
+    // cloneElement — `style` (overlap margin + paper ring) and the hover handlers
+    // (`onMouseOver` / `onMouseLeave`) — plus the forwarded `ref`, all of which
+    // must reach the DOM node for the tooltip to open.
+    _react.default.createElement(_RoundAvatar.RoundAvatar, _extends({
+      ref: ref,
+      $bg: bg,
+      $size: size,
+      $bordered: false
+    }, rest), initials)
+  );
+});
+MockAvatar.displayName = "MockAvatar";
+
+/* The app removes AvatarGroup's default padding with `tw-p-0`; the mock does
+   the same through a styled wrapper (`tw-` classes don't run in Storybook). */
+var StyledAvatarGroup = (0, _styledComponents.default)(_AvatarGroup.AvatarGroup).withConfig({
+  displayName: "SourceCodeSection__StyledAvatarGroup",
+  componentId: "sc-rvqbh5-4"
+})(["&&{padding:0;}"]);
+var ContributorAvatars = function ContributorAvatars(_ref7) {
+  var contributors = _ref7.contributors;
+  return /*#__PURE__*/_react.default.createElement(StyledAvatarGroup, {
+    limit: 4,
+    size: 20,
+    hasTooltip: true
+  }, contributors.map(function (c) {
+    var _CONTRIBUTOR_NAMES$c$;
+    return /*#__PURE__*/_react.default.createElement(MockAvatar, {
+      key: c.initials,
+      bg: c.bg,
+      initials: c.initials,
+      alt: (_CONTRIBUTOR_NAMES$c$ = CONTRIBUTOR_NAMES[c.initials]) !== null && _CONTRIBUTOR_NAMES$c$ !== void 0 ? _CONTRIBUTOR_NAMES$c$ : c.initials
+    });
+  }));
+};
+var IssueRow = exports.IssueRow = function IssueRow(_ref8) {
+  var issue = _ref8.issue;
   var closed = issue.state === "closed";
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sc-row"
@@ -1018,19 +1062,23 @@ var IssueRow = exports.IssueRow = function IssueRow(_ref6) {
     style: {
       color: closed ? "var(--color-primary)" : undefined
     }
-  }, closed ? /*#__PURE__*/_react.default.createElement(IssueClosedIcon, null) : /*#__PURE__*/_react.default.createElement(IssueOpenIcon, null)), /*#__PURE__*/_react.default.createElement(_Typography.Body1, {
+  }, /*#__PURE__*/_react.default.createElement(IssueStateIcon, {
+    closed: closed
+  })), /*#__PURE__*/_react.default.createElement(_Typography.Body1, {
     weight: "medium",
     className: "sc-title"
   }, /*#__PURE__*/_react.default.createElement(TitleLink, {
     href: issueUrl(issue),
     target: "_blank",
     rel: "noopener noreferrer"
-  }, issue.title)), closed && /*#__PURE__*/_react.default.createElement("span", {
-    className: "sc-chip done"
-  }, /*#__PURE__*/_react.default.createElement(IssueClosedIcon, {
-    width: 12,
-    height: 12
-  }), "Closed")), /*#__PURE__*/_react.default.createElement("div", {
+  }, issue.title)), closed && /*#__PURE__*/_react.default.createElement(StatusChip, {
+    label: "Closed",
+    tone: "done",
+    glyph: /*#__PURE__*/_react.default.createElement(IssueStateIcon, {
+      closed: true,
+      size: 12
+    })
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "sc-sigs"
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: "Repository: ".concat(issue.repoFull)
@@ -1043,37 +1091,42 @@ var IssueRow = exports.IssueRow = function IssueRow(_ref6) {
     className: "sc-muted"
   }, issue.updatedLabel))));
 };
-var CodeStatusChip = function CodeStatusChip(_ref7) {
-  var entry = _ref7.entry;
+var CodeStatusChip = function CodeStatusChip(_ref9) {
+  var entry = _ref9.entry;
   if (entry.status === "merged") {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "sc-chip done"
-    }, /*#__PURE__*/_react.default.createElement(_Icons.GitPullRequestIcon, {
-      width: 12,
-      height: 12,
-      fill: "var(--color-primary)"
-    }), "Merged");
+    return /*#__PURE__*/_react.default.createElement(StatusChip, {
+      label: "Merged",
+      tone: "done",
+      glyph: /*#__PURE__*/_react.default.createElement(_Icons.GitPullRequestIcon, {
+        width: 12,
+        height: 12,
+        fill: "var(--color-primary)"
+      })
+    });
   }
   if (entry.status === "deleted") {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "sc-chip gone"
-    }, /*#__PURE__*/_react.default.createElement(_Icons.TrashIcon, {
-      width: 12,
-      height: 12,
-      fill: "var(--color-theme-900)"
-    }), "Deleted");
+    return /*#__PURE__*/_react.default.createElement(StatusChip, {
+      label: "Deleted",
+      tone: "gone",
+      glyph: /*#__PURE__*/_react.default.createElement(_Icons.TrashIcon, {
+        width: 12,
+        height: 12,
+        fill: "var(--color-theme-900)"
+      })
+    });
   }
   if (entry.status === "closed") {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "sc-chip gone"
-    }, "Closed");
+    return /*#__PURE__*/_react.default.createElement(StatusChip, {
+      label: "Closed",
+      tone: "gone"
+    });
   }
   // Open branches / PRs show no status label.
   return null;
 };
-var CodeRow = exports.CodeRow = function CodeRow(_ref8) {
-  var entry = _ref8.entry,
-    onOpenHistory = _ref8.onOpenHistory;
+var CodeRow = exports.CodeRow = function CodeRow(_ref0) {
+  var entry = _ref0.entry,
+    onOpenHistory = _ref0.onOpenHistory;
   var deleted = entry.status === "deleted";
   // A closed-without-merge PR is still a live link, but its name is struck
   // through to signal the dead-end; the strike lifts on hover so it reads as a
@@ -1114,52 +1167,45 @@ var CodeRow = exports.CodeRow = function CodeRow(_ref8) {
   }, /*#__PURE__*/_react.default.createElement(_Icons.GitRepositoryIcon, {
     width: 14,
     height: 14
-  }), entry.repo)), /*#__PURE__*/_react.default.createElement("span", {
-    className: "sc-avatars"
-  }, entry.contributors.map(function (c) {
-    return /*#__PURE__*/_react.default.createElement(_RoundAvatar.RoundAvatar, {
-      key: c.initials,
-      $bg: c.bg,
-      $size: 20,
-      $overlap: true
-    }, c.initials);
-  })), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+  }), entry.repo)), /*#__PURE__*/_react.default.createElement(ContributorAvatars, {
+    contributors: entry.contributors
+  }), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: entry.commits.tip
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "tertiary",
     className: "sc-sig"
   }, /*#__PURE__*/_react.default.createElement(_Icons.GitCommitIcon, {
     width: 14,
     height: 14
   }), entry.commits.value)), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: "Head commit: ".concat(entry.headSha)
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "tertiary",
     className: "sc-sig sc-sha"
   }, entry.headSha.slice(0, 8))), entry.diff && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: entry.diff.tip
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "sc-sig sc-diff"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "add"
-  }, "+", entry.diff.add), " ", /*#__PURE__*/_react.default.createElement("span", {
-    className: "del"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "success"
+  }, "+", entry.diff.add), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "alert"
   }, "\u2212", entry.diff.del))), entry.comments && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: entry.comments.tip
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "tertiary",
     className: "sc-sig"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.MessageIcon, {
-    width: 14,
-    height: 14
-  }), entry.comments.value)), /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement(_Icons.MessageSmallIcon, null), entry.comments.value)), /*#__PURE__*/_react.default.createElement("span", {
     className: "sc-muted"
   }, entry.updatedLabel))), /*#__PURE__*/_react.default.createElement(Spine, {
     items: entry.stages,
     onClick: onOpenHistory
   }));
 };
-var CompletedHeader = exports.CompletedHeader = function CompletedHeader(_ref9) {
-  var expanded = _ref9.expanded,
-    count = _ref9.count,
-    onToggle = _ref9.onToggle;
+var CompletedHeader = exports.CompletedHeader = function CompletedHeader(_ref1) {
+  var expanded = _ref1.expanded,
+    count = _ref1.count,
+    onToggle = _ref1.onToggle;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sc-completed-row"
   }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
@@ -1172,9 +1218,9 @@ var CompletedHeader = exports.CompletedHeader = function CompletedHeader(_ref9)
     }
   }, expanded ? "Hide completed elements" : "Show ".concat(count, " more completed elements")));
 };
-var SourceCodeSection = exports.SourceCodeSection = function SourceCodeSection(_ref0) {
-  var _ref0$variant = _ref0.variant,
-    variant = _ref0$variant === void 0 ? "mix" : _ref0$variant;
+var SourceCodeSection = exports.SourceCodeSection = function SourceCodeSection(_ref10) {
+  var _ref10$variant = _ref10.variant,
+    variant = _ref10$variant === void 0 ? "mix" : _ref10$variant;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     openEntry = _useState2[0],