@activecollab/components 2.0.368 → 2.0.369

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

@@ -1,15 +1,19 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["size", "bg", "initials", "alt"];
 import React, { useState } from "react";
 import styled from "styled-components";
 import { LinkBranchOrPullRequestDialog } from "./LinkBranchOrPullRequestDialog";
 import { LinkingCommandsButton } from "./LinkingCommandsButton";
 import { RoundAvatar } from "./RoundAvatar";
 import { AVATAR_COLORS } from "./tokens";
+import { AvatarGroup } from "../../components/AvatarGroup";
 import { Button } from "../../components/Button";
 import { AddToListButton } from "../../components/Button/AddToListButton";
+import { Chip } from "../../components/Chip";
 import { Dialog } from "../../components/Dialog";
 import { IconButton } from "../../components/IconButton";
-import { ArrowRightIcon, CancelCrossIcon, CheckIcon, CloseIcon, CloudDeployFailedIcon, CloudDeployIcon, EyeIcon, GearFailedIcon, GearIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestDraftIcon, GitPullRequestIcon, GitRepositoryIcon, InfoSmallIcon, MessageIcon, TrashIcon } from "../../components/Icons";
+import { ArrowRightIcon, CancelCrossIcon, CheckboxBlankTogglerIcon, CheckIcon, CircleDotIcon, CloseIcon, CloudDeployFailedIcon, CloudDeployIcon, EyeIcon, GearFailedIcon, GearIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestDraftIcon, GitPullRequestIcon, GitRepositoryIcon, InfoSmallIcon, MessageIcon, MessageSmallIcon, TrashIcon } from "../../components/Icons";
 import { StepSequence } from "../../components/StepSequence";
 import { Tooltip } from "../../components/Tooltip";
 import { Body1, Caption1, Header3 } from "../../components/Typography";
@@ -39,56 +43,24 @@ const iconColorProps = icon => STROKE_ICONS.has(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.                                                       */
 /* ================================================================== */
 
-const IssueOpenIcon = _ref => {
-  let _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.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "6.4",
-    stroke: "currentColor",
-    strokeWidth: "1.6"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "2.2",
-    fill: "currentColor"
-  }));
-};
-const IssueClosedIcon = _ref2 => {
-  let _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.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "6.4",
-    stroke: "currentColor",
-    strokeWidth: "1.6"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M5.2 8.1l1.9 1.9 3.7-3.9",
-    stroke: "currentColor",
-    strokeWidth: "1.6",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
+const IssueStateIcon = _ref => {
+  let closed = _ref.closed,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size;
+  return closed ? /*#__PURE__*/React.createElement(CheckboxBlankTogglerIcon, {
+    width: size,
+    height: size,
+    fill: "var(--color-primary)"
+  }) : /*#__PURE__*/React.createElement(CircleDotIcon, {
+    width: size,
+    height: size
+  });
 };
 
 /* ================================================================== */
@@ -786,9 +758,9 @@ const CODE_ENTRIES = [{
 /* Spine + history dialog (for branches / pull requests)               */
 /* ================================================================== */
 
-const StageTip = _ref3 => {
-  let name = _ref3.name,
-    details = _ref3.details;
+const StageTip = _ref2 => {
+  let name = _ref2.name,
+    details = _ref2.details;
   return /*#__PURE__*/React.createElement("span", {
     style: {
       display: "block",
@@ -811,9 +783,9 @@ const StyledSpineSequence = styled(StepSequence).withConfig({
   displayName: "SourceCodeSection__StyledSpineSequence",
   componentId: "sc-rvqbh5-0"
 })(["align-self:center;flex-shrink:0;"]);
-const Spine = _ref4 => {
-  let items = _ref4.items,
-    onClick = _ref4.onClick;
+const Spine = _ref3 => {
+  let items = _ref3.items,
+    onClick = _ref3.onClick;
   return /*#__PURE__*/React.createElement(StyledSpineSequence, {
     ariaLabel: "Open source code history",
     onClick: onClick,
@@ -831,9 +803,9 @@ const StyledHistory = styled.div.withConfig({
   displayName: "SourceCodeSection__StyledHistory",
   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);
-const HistoryDialog = _ref5 => {
-  let entry = _ref5.entry,
-    onClose = _ref5.onClose;
+const HistoryDialog = _ref4 => {
+  let entry = _ref4.entry,
+    onClose = _ref4.onClose;
   return /*#__PURE__*/React.createElement(Dialog, {
     open: !!entry,
     onClose: onClose,
@@ -934,7 +906,7 @@ const HistoryDialog = _ref5 => {
 const StyledSourceCode = styled.div.withConfig({
   displayName: "SourceCodeSection__StyledSourceCode",
   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: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);
+})(["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. */
@@ -942,8 +914,99 @@ const TitleLink = styled.a.withConfig({
   displayName: "SourceCodeSection__TitleLink",
   componentId: "sc-rvqbh5-3"
 })(["color:inherit;text-decoration:none;cursor:pointer;transition:color 200ms ease;&:hover{color:var(--color-primary);}"]);
-const IssueRow = _ref6 => {
-  let 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). */
+const CHIP_BASE_STYLE = {
+  height: "1.25rem",
+  paddingLeft: "0.5rem",
+  paddingRight: "0.5rem",
+  borderRadius: "0.375rem",
+  gap: "3px",
+  flexShrink: 0
+};
+const CHIP_DONE_STYLE = _extends({}, CHIP_BASE_STYLE, {
+  backgroundColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)"
+});
+const CHIP_GONE_STYLE = _extends({}, CHIP_BASE_STYLE, {
+  backgroundColor: "var(--color-theme-200)",
+  border: "1px solid var(--border-primary)"
+});
+const StatusChip = _ref5 => {
+  let label = _ref5.label,
+    tone = _ref5.tone,
+    glyph = _ref5.glyph;
+  return /*#__PURE__*/React.createElement(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. */
+const CONTRIBUTOR_NAMES = {
+  DA: "Dragana A.",
+  IS: "Ilija Studen",
+  MK: "Marko K."
+};
+const MockAvatar = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 20 : _ref6$size,
+    bg = _ref6.bg,
+    initials = _ref6.initials,
+    alt = _ref6.alt,
+    rest = _objectWithoutPropertiesLoose(_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.createElement(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). */
+const StyledAvatarGroup = styled(AvatarGroup).withConfig({
+  displayName: "SourceCodeSection__StyledAvatarGroup",
+  componentId: "sc-rvqbh5-4"
+})(["&&{padding:0;}"]);
+const ContributorAvatars = _ref7 => {
+  let contributors = _ref7.contributors;
+  return /*#__PURE__*/React.createElement(StyledAvatarGroup, {
+    limit: 4,
+    size: 20,
+    hasTooltip: true
+  }, contributors.map(c => {
+    var _CONTRIBUTOR_NAMES$c$;
+    return /*#__PURE__*/React.createElement(MockAvatar, {
+      key: c.initials,
+      bg: c.bg,
+      initials: c.initials,
+      alt: (_CONTRIBUTOR_NAMES$c$ = CONTRIBUTOR_NAMES[c.initials]) != null ? _CONTRIBUTOR_NAMES$c$ : c.initials
+    });
+  }));
+};
+const IssueRow = _ref8 => {
+  let issue = _ref8.issue;
   const closed = issue.state === "closed";
   return /*#__PURE__*/React.createElement("div", {
     className: "sc-row"
@@ -956,19 +1019,23 @@ const IssueRow = _ref6 => {
     style: {
       color: closed ? "var(--color-primary)" : undefined
     }
-  }, closed ? /*#__PURE__*/React.createElement(IssueClosedIcon, null) : /*#__PURE__*/React.createElement(IssueOpenIcon, null)), /*#__PURE__*/React.createElement(Body1, {
+  }, /*#__PURE__*/React.createElement(IssueStateIcon, {
+    closed: closed
+  })), /*#__PURE__*/React.createElement(Body1, {
     weight: "medium",
     className: "sc-title"
   }, /*#__PURE__*/React.createElement(TitleLink, {
     href: issueUrl(issue),
     target: "_blank",
     rel: "noopener noreferrer"
-  }, issue.title)), closed && /*#__PURE__*/React.createElement("span", {
-    className: "sc-chip done"
-  }, /*#__PURE__*/React.createElement(IssueClosedIcon, {
-    width: 12,
-    height: 12
-  }), "Closed")), /*#__PURE__*/React.createElement("div", {
+  }, issue.title)), closed && /*#__PURE__*/React.createElement(StatusChip, {
+    label: "Closed",
+    tone: "done",
+    glyph: /*#__PURE__*/React.createElement(IssueStateIcon, {
+      closed: true,
+      size: 12
+    })
+  })), /*#__PURE__*/React.createElement("div", {
     className: "sc-sigs"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Repository: " + issue.repoFull
@@ -981,37 +1048,42 @@ const IssueRow = _ref6 => {
     className: "sc-muted"
   }, issue.updatedLabel))));
 };
-const CodeStatusChip = _ref7 => {
-  let entry = _ref7.entry;
+const CodeStatusChip = _ref9 => {
+  let entry = _ref9.entry;
   if (entry.status === "merged") {
-    return /*#__PURE__*/React.createElement("span", {
-      className: "sc-chip done"
-    }, /*#__PURE__*/React.createElement(GitPullRequestIcon, {
-      width: 12,
-      height: 12,
-      fill: "var(--color-primary)"
-    }), "Merged");
+    return /*#__PURE__*/React.createElement(StatusChip, {
+      label: "Merged",
+      tone: "done",
+      glyph: /*#__PURE__*/React.createElement(GitPullRequestIcon, {
+        width: 12,
+        height: 12,
+        fill: "var(--color-primary)"
+      })
+    });
   }
   if (entry.status === "deleted") {
-    return /*#__PURE__*/React.createElement("span", {
-      className: "sc-chip gone"
-    }, /*#__PURE__*/React.createElement(TrashIcon, {
-      width: 12,
-      height: 12,
-      fill: "var(--color-theme-900)"
-    }), "Deleted");
+    return /*#__PURE__*/React.createElement(StatusChip, {
+      label: "Deleted",
+      tone: "gone",
+      glyph: /*#__PURE__*/React.createElement(TrashIcon, {
+        width: 12,
+        height: 12,
+        fill: "var(--color-theme-900)"
+      })
+    });
   }
   if (entry.status === "closed") {
-    return /*#__PURE__*/React.createElement("span", {
-      className: "sc-chip gone"
-    }, "Closed");
+    return /*#__PURE__*/React.createElement(StatusChip, {
+      label: "Closed",
+      tone: "gone"
+    });
   }
   // Open branches / PRs show no status label.
   return null;
 };
-const CodeRow = _ref8 => {
-  let entry = _ref8.entry,
-    onOpenHistory = _ref8.onOpenHistory;
+const CodeRow = _ref0 => {
+  let entry = _ref0.entry,
+    onOpenHistory = _ref0.onOpenHistory;
   const 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
@@ -1052,50 +1124,45 @@ const CodeRow = _ref8 => {
   }, /*#__PURE__*/React.createElement(GitRepositoryIcon, {
     width: 14,
     height: 14
-  }), entry.repo)), /*#__PURE__*/React.createElement("span", {
-    className: "sc-avatars"
-  }, entry.contributors.map(c => /*#__PURE__*/React.createElement(RoundAvatar, {
-    key: c.initials,
-    $bg: c.bg,
-    $size: 20,
-    $overlap: true
-  }, c.initials))), /*#__PURE__*/React.createElement(Tooltip, {
+  }), entry.repo)), /*#__PURE__*/React.createElement(ContributorAvatars, {
+    contributors: entry.contributors
+  }), /*#__PURE__*/React.createElement(Tooltip, {
     title: entry.commits.tip
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(Caption1, {
+    color: "tertiary",
     className: "sc-sig"
   }, /*#__PURE__*/React.createElement(GitCommitIcon, {
     width: 14,
     height: 14
   }), entry.commits.value)), /*#__PURE__*/React.createElement(Tooltip, {
     title: "Head commit: " + entry.headSha
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(Caption1, {
+    color: "tertiary",
     className: "sc-sig sc-sha"
   }, entry.headSha.slice(0, 8))), entry.diff && /*#__PURE__*/React.createElement(Tooltip, {
     title: entry.diff.tip
   }, /*#__PURE__*/React.createElement("span", {
     className: "sc-sig sc-diff"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "add"
-  }, "+", entry.diff.add), " ", /*#__PURE__*/React.createElement("span", {
-    className: "del"
+  }, /*#__PURE__*/React.createElement(Caption1, {
+    color: "success"
+  }, "+", entry.diff.add), /*#__PURE__*/React.createElement(Caption1, {
+    color: "alert"
   }, "\u2212", entry.diff.del))), entry.comments && /*#__PURE__*/React.createElement(Tooltip, {
     title: entry.comments.tip
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(Caption1, {
+    color: "tertiary",
     className: "sc-sig"
-  }, /*#__PURE__*/React.createElement(MessageIcon, {
-    width: 14,
-    height: 14
-  }), entry.comments.value)), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(MessageSmallIcon, null), entry.comments.value)), /*#__PURE__*/React.createElement("span", {
     className: "sc-muted"
   }, entry.updatedLabel))), /*#__PURE__*/React.createElement(Spine, {
     items: entry.stages,
     onClick: onOpenHistory
   }));
 };
-const CompletedHeader = _ref9 => {
-  let expanded = _ref9.expanded,
-    count = _ref9.count,
-    onToggle = _ref9.onToggle;
+const CompletedHeader = _ref1 => {
+  let expanded = _ref1.expanded,
+    count = _ref1.count,
+    onToggle = _ref1.onToggle;
   return /*#__PURE__*/React.createElement("div", {
     className: "sc-completed-row"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -1108,9 +1175,9 @@ const CompletedHeader = _ref9 => {
     }
   }, expanded ? "Hide completed elements" : "Show " + count + " more completed elements"));
 };
-const SourceCodeSection = _ref0 => {
-  let _ref0$variant = _ref0.variant,
-    variant = _ref0$variant === void 0 ? "mix" : _ref0$variant;
+const SourceCodeSection = _ref10 => {
+  let _ref10$variant = _ref10.variant,
+    variant = _ref10$variant === void 0 ? "mix" : _ref10$variant;
   const _useState = useState(null),
     openEntry = _useState[0],
     setOpenEntry = _useState[1];