@primer/react 38.33.0 → 38.33.1-rc.2046e1577

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/react
 
+## 38.33.1
+
+### Patch Changes
+
+- [#8169](https://github.com/primer/react/pull/8169) [`1d6f559`](https://github.com/primer/react/commit/1d6f5593f5e482d1d03027522bc882560c7b1f06) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Timeline: `Timeline.Actions` now wraps onto a new row below `Timeline.Body`, left-aligned with the body content, when `Timeline.Item` is narrower than 480px.
+
 ## 38.33.0
 
 ### Minor Changes

package/dist/Timeline/Timeline-b7e6685b.css

@@ -0,0 +1,2 @@
+.prc-Timeline-Timeline-awSoC{container-type:inline-size;display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]) .prc-Timeline-TimelineItem-QwDVH:last-child:where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:last-child:where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-TimelineItem-QwDVH{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-QwDVH:before{background-color:var(--borderColor-muted,#d1d9e0b3);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineBadge-u0qSm{background-color:var(--bgColor-default,#fff);border:0;color:var(--fgColor-muted,#59636e);height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-4,.25rem) + var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-TimelineItemAvatar-4zO8f{left:calc((var(--base-size-40,2.5rem) + var(--base-size-32,2rem))*-1);position:absolute;top:calc(var(--base-size-16,1rem) + var(--base-size-16,1rem));transform:translateY(-50%);z-index:1}.prc-Timeline-TimelineBadgeWrapper-SZw4k{position:relative;z-index:1}.prc-Timeline-TimelineBadge-u0qSm{align-items:center;background-color:var(--timelineBadge-bgColor,#f6f8fa);border-color:var(--bgColor-default,#fff);border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);color:var(--fgColor-muted,#59636e);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant]){color:var(--fgColor-onEmphasis,#fff)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=accent]){background-color:var(--bgColor-accent-emphasis,#0969da)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=success]){background-color:var(--bgColor-success-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=attention]){background-color:var(--bgColor-attention-emphasis,#9a6700)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=severe]){background-color:var(--bgColor-severe-emphasis,#bc4c00)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=danger]){background-color:var(--bgColor-danger-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=done]){background-color:var(--bgColor-done-emphasis,#8250df)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=open]){background-color:var(--bgColor-open-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=closed]){background-color:var(--bgColor-closed-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=sponsors]){background-color:var(--bgColor-sponsors-emphasis,#bf3989)}.prc-Timeline-TimelineBody-tjOtb{color:var(--fgColor-muted,#59636e);flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:calc(var(--base-size-4,.25rem) + 1px);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-X8eti{background-color:var(--bgColor-default,#fff);border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,#d1d9e0);height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}.prc-Timeline-TimelineBreak-X8eti:has(+[data-condensed]){margin-bottom:calc(var(--base-size-12,.75rem)*-1)}.prc-Timeline-TimelineItemActions-56Y7h{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;gap:var(--base-size-8,.5rem);margin-left:auto;min-height:var(--base-size-32,2rem)}@container (width < 480px){.prc-Timeline-TimelineItem-QwDVH{display:grid;grid-template-areas:"badge body" ".     actions";grid-template-columns:auto 1fr}.prc-Timeline-TimelineBadgeWrapper-SZw4k{grid-area:badge}.prc-Timeline-TimelineBody-tjOtb{grid-area:body}.prc-Timeline-TimelineItemActions-56Y7h{grid-area:actions;justify-content:flex-start;margin-left:0;margin-top:var(--base-size-8,.5rem);min-height:0}}
+/*# sourceMappingURL=Timeline-b7e6685b.css.map */

package/dist/Timeline/Timeline-b7e6685b.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Timeline/Timeline.module.css.js"],"names":[],"mappings":"AAAA,6BASE,0BAA2B,CAR3B,YAAa,CACb,qBAAsB,CACtB,eAAgB,CAEhB,QAAS,CADT,SAsCF,CA7BI,2GACE,aAeF,CAhBA,0GACE,aAeF,CAbE,kJAEE,4BACF,CAHA,iJAEE,4BACF,CAEA,0IACE,8BACF,CAFA,yIACE,8BACF,CAEA,0KAEE,6DACF,CAHA,yKAEE,6DACF,CAMF,wGACE,gBAKF,CANA,yGACE,gBAKF,CAHE,uIACE,iCACF,CAFA,wIACE,iCACF,CAKN,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAuCF,CAlCE,wCASE,mDAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAoBF,CAjBE,oEACE,uCACF,CAEA,2FAKE,4CAAwC,CACxC,QAAS,CAFT,kCAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAEA,gGAEE,yFACF,CAIJ,uCAGE,qEAA4D,CAF5D,iBAAkB,CAIlB,6DAAoD,CAEpD,0BAA2B,CAD3B,SAEF,CAEA,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,qDAA8C,CAE9C,wCAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAPtC,kCAA2B,CAR3B,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UA0DF,CAvCE,wDACE,oCACF,CAEA,+DACE,uDACF,CAEA,gEACE,wDACF,CAEA,kEACE,0DACF,CAEA,+DACE,uDACF,CAEA,+DACE,uDACF,CAEA,6DACE,qDACF,CAEA,6DACE,qDACF,CAEA,+DACE,uDACF,CAEA,iEACE,yDACF,CAGF,iCAME,kCAA2B,CAC3B,SAAU,CAFV,8CAAuC,CADvC,gDAA0C,CAF1C,cAAe,CADf,WAOF,CAEA,kCAOE,4CAAwC,CACxC,QAAS,CACT,qFAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAaF,CAHE,yDACE,iDACF,CAGF,wCAEE,kBAAmB,CACnB,qBAAsB,CAFtB,YAAa,CAOb,aAAc,CADd,4BAAuB,CADvB,gBAAiB,CADjB,mCAIF,CAKA,2BACE,iCACE,YAAa,CAEb,gDAEiB,CAHjB,8BAIF,CAEA,yCACE,eACF,CAEA,iCACE,cACF,CAEA,wCACE,iBAAkB,CAIlB,0BAA2B,CAD3B,aAAc,CADd,mCAA8B,CAG9B,YACF,CACF","file":"Timeline-b7e6685b.css","sourcesContent":[".Timeline {\n  display: flex;\n  flex-direction: column;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  /* Container for the narrow-viewport rules at the end of this file. Uses\n     an inline-size container so behavior tracks the timeline's own width,\n     not the viewport (works inside narrow side panels and split views). */\n  container-type: inline-size;\n\n  &:where([data-clip-sidebar='start']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:first-child {\n      padding-top: 0;\n\n      .TimelineItemAvatar {\n        /* No padding-top on first item: badge center is at 0 + 16px (half-badge) */\n        top: var(--base-size-16);\n      }\n\n      &:where([data-condensed])::before {\n        top: var(--base-size-12);\n      }\n\n      &:where([data-condensed]) .TimelineItemAvatar {\n        /* No padding-top + condensed: badge center is at 0 + 8px margin + 8px half-badge */\n        top: calc(var(--base-size-8) + var(--base-size-8));\n      }\n    }\n  }\n\n  &:where([data-clip-sidebar='end']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:last-child {\n      padding-bottom: 0;\n\n      &:where([data-condensed])::before {\n        height: var(--base-size-12);\n      }\n    }\n  }\n}\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--base-size-16) 0;\n  margin-left: var(--base-size-16);\n\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: 2px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:where([data-condensed]) {\n    padding-top: var(--base-size-4);\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: var(--base-size-16);\n    }\n\n    .TimelineBadge {\n      height: 16px;\n      margin-top: var(--base-size-8);\n      margin-bottom: var(--base-size-8);\n      color: var(--fgColor-muted);\n      background-color: var(--bgColor-default);\n      border: 0;\n    }\n\n    .TimelineItemAvatar {\n      /* Vertically center against the condensed badge (4px padding-top + 8px badge top margin + 8px half-badge) */\n      top: calc(var(--base-size-4) + var(--base-size-8) + var(--base-size-8));\n    }\n  }\n}\n\n.TimelineItemAvatar {\n  position: absolute;\n  /* Place avatar in the left gutter, aligned with surrounding actor avatars (~72px from item content) */\n  left: calc(-1 * (var(--base-size-40) + var(--base-size-32)));\n  /* Vertically center against the default badge (16px padding-top + 16px half-badge) */\n  top: calc(var(--base-size-16) + var(--base-size-16));\n  z-index: 1;\n  transform: translateY(-50%);\n}\n\n.TimelineBadgeWrapper {\n  position: relative;\n  z-index: 1;\n}\n\n.TimelineBadge {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  margin-right: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -15px;\n  flex-shrink: 0;\n  overflow: hidden;\n  color: var(--fgColor-muted);\n\n  /* TODOl not quite sure if this is the correct migration for this line */\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--bgColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thick);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n\n  &:where([data-variant]) {\n    color: var(--fgColor-onEmphasis);\n  }\n\n  &:where([data-variant='accent']) {\n    background-color: var(--bgColor-accent-emphasis);\n  }\n\n  &:where([data-variant='success']) {\n    background-color: var(--bgColor-success-emphasis);\n  }\n\n  &:where([data-variant='attention']) {\n    background-color: var(--bgColor-attention-emphasis);\n  }\n\n  &:where([data-variant='severe']) {\n    background-color: var(--bgColor-severe-emphasis);\n  }\n\n  &:where([data-variant='danger']) {\n    background-color: var(--bgColor-danger-emphasis);\n  }\n\n  &:where([data-variant='done']) {\n    background-color: var(--bgColor-done-emphasis);\n  }\n\n  &:where([data-variant='open']) {\n    background-color: var(--bgColor-open-emphasis);\n  }\n\n  &:where([data-variant='closed']) {\n    background-color: var(--bgColor-closed-emphasis);\n  }\n\n  &:where([data-variant='sponsors']) {\n    background-color: var(--bgColor-sponsors-emphasis);\n  }\n}\n\n.TimelineBody {\n  min-width: 0;\n  max-width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: calc(var(--base-size-4) + 1px);\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineBreak {\n  position: relative;\n  z-index: 1;\n  height: var(--base-size-24);\n  margin: 0;\n  margin-bottom: calc(-1 * var(--base-size-16));\n  margin-left: 0;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n\n  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(+ [data-condensed]) {\n    margin-bottom: calc(-1 * var(--base-size-12));\n  }\n}\n\n.TimelineItemActions {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  /* Match the badge wrapper height (32px in both default and condensed) so contents vertically center against the badge */\n  min-height: var(--base-size-32);\n  margin-left: auto;\n  gap: var(--base-size-8);\n  flex-shrink: 0;\n}\n\n/* Below 480px inline size, wrap Timeline.Actions onto its own row under\n   Timeline.Body via a 2-column grid. The badge keeps the left column so\n   the vertical rule stays consistent. */\n@container (width < 480px) {\n  .TimelineItem {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    grid-template-areas:\n      'badge body'\n      '.     actions';\n  }\n\n  .TimelineBadgeWrapper {\n    grid-area: badge;\n  }\n\n  .TimelineBody {\n    grid-area: body;\n  }\n\n  .TimelineItemActions {\n    grid-area: actions;\n    /* Reset flex-row auto-push; the wrapped row sits under Body. */\n    margin-top: var(--base-size-8);\n    margin-left: 0;\n    justify-content: flex-start;\n    min-height: 0;\n  }\n}\n"]}

package/dist/Timeline/Timeline.module.css.js

@@ -1,4 +1,4 @@
-import "./Timeline-ff81db92.css";
+import "./Timeline-b7e6685b.css";
 //#region src/Timeline/Timeline.module.css.js
 var Timeline_module_css_default = {
 	"Timeline": "prc-Timeline-Timeline-awSoC",

package/generated/components.json

@@ -4067,18 +4067,12 @@
           "defaultValue": "false",
           "description": "Set to true for links adjacent to text, underlining them for clear visibility and improved accessibility."
         },
-        {
-          "name": "underline",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Use `inline` instead.",
-          "deprecated": true
-        },
         {
           "name": "hoverColor",
           "type": "string",
           "defaultValue": "",
-          "description": "Color used when hovering over the link."
+          "description": "Use CSS modules to style hover color.",
+          "deprecated": true
         },
         {
           "name": "ref",
@@ -8185,7 +8179,7 @@
         },
         {
           "id": "components-timeline-features--with-actions",
-          "code": "() => (\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.SignatureLabelVerified}>Verified</Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceContent}>\n              <div className={classes.CrossReferenceTitle}>\n                <Link href=\"#\" className={classes.CrossReferenceLink}>\n                  <span className={classes.CrossReferenceName}>\n                    Fix positioning of Autocomplete overlay menu\n                  </span>{' '}\n                  <span className={classes.CrossReferenceNumber}>\n                    primer/react#7431\n                  </span>\n                </Link>\n              </div>\n              <div className={classes.CrossReferenceTaskline}>\n                <Octicon icon={TasklistIcon} size={16} />\n                17 tasks\n              </div>\n            </div>\n            <div className={classes.CrossReferenceActions}>\n              <Octicon\n                icon={LockIcon}\n                size={16}\n                className={classes.CrossReferenceMeta}\n              />\n              <StateLabel status=\"pullOpened\" size=\"medium\">\n                Open\n              </StateLabel>\n            </div>\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
+          "code": "() => (\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label\n            className={`${classes.SignatureLabelVerified} ${classes.HideAtNarrow}`}\n          >\n            Verified\n          </Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.HideAtNarrow}>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceTitle}>\n              <Link href=\"#\" className={classes.CrossReferenceLink}>\n                <span className={classes.CrossReferenceName}>\n                  Fix positioning of Autocomplete overlay menu\n                </span>{' '}\n                <span className={classes.CrossReferenceNumber}>\n                  primer/react#7431\n                </span>\n              </Link>\n            </div>\n            <Octicon\n              icon={LockIcon}\n              size={16}\n              className={classes.CrossReferenceMeta}\n              aria-label=\"Private\"\n            />\n            <StateLabel status=\"pullOpened\" size=\"small\">\n              Open\n            </StateLabel>\n          </div>\n          <div className={classes.CrossReferenceTaskline}>\n            <Octicon icon={TasklistIcon} size={16} />\n            17 tasks\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
         },
         {
           "id": "components-timeline-features--with-avatar",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.33.0",
+  "version": "38.33.1-rc.2046e1577",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/Timeline/Timeline-ff81db92.css

@@ -1,2 +0,0 @@
-.prc-Timeline-Timeline-awSoC{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]) .prc-Timeline-TimelineItem-QwDVH:last-child:where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:last-child:where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-TimelineItem-QwDVH{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-QwDVH:before{background-color:var(--borderColor-muted,#d1d9e0b3);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineBadge-u0qSm{background-color:var(--bgColor-default,#fff);border:0;color:var(--fgColor-muted,#59636e);height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-4,.25rem) + var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-TimelineItemAvatar-4zO8f{left:calc((var(--base-size-40,2.5rem) + var(--base-size-32,2rem))*-1);position:absolute;top:calc(var(--base-size-16,1rem) + var(--base-size-16,1rem));transform:translateY(-50%);z-index:1}.prc-Timeline-TimelineBadgeWrapper-SZw4k{position:relative;z-index:1}.prc-Timeline-TimelineBadge-u0qSm{align-items:center;background-color:var(--timelineBadge-bgColor,#f6f8fa);border-color:var(--bgColor-default,#fff);border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);color:var(--fgColor-muted,#59636e);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant]){color:var(--fgColor-onEmphasis,#fff)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=accent]){background-color:var(--bgColor-accent-emphasis,#0969da)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=success]){background-color:var(--bgColor-success-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=attention]){background-color:var(--bgColor-attention-emphasis,#9a6700)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=severe]){background-color:var(--bgColor-severe-emphasis,#bc4c00)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=danger]){background-color:var(--bgColor-danger-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=done]){background-color:var(--bgColor-done-emphasis,#8250df)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=open]){background-color:var(--bgColor-open-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=closed]){background-color:var(--bgColor-closed-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=sponsors]){background-color:var(--bgColor-sponsors-emphasis,#bf3989)}.prc-Timeline-TimelineBody-tjOtb{color:var(--fgColor-muted,#59636e);flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:calc(var(--base-size-4,.25rem) + 1px);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-X8eti{background-color:var(--bgColor-default,#fff);border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,#d1d9e0);height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}.prc-Timeline-TimelineBreak-X8eti:has(+[data-condensed]){margin-bottom:calc(var(--base-size-12,.75rem)*-1)}.prc-Timeline-TimelineItemActions-56Y7h{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;gap:var(--base-size-8,.5rem);margin-left:auto;min-height:var(--base-size-32,2rem)}
-/*# sourceMappingURL=Timeline-ff81db92.css.map */

package/dist/Timeline/Timeline-ff81db92.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Timeline/Timeline.module.css.js"],"names":[],"mappings":"AAAA,6BACE,YAAa,CACb,qBAAsB,CACtB,eAAgB,CAEhB,QAAS,CADT,SAkCF,CA7BI,2GACE,aAeF,CAhBA,0GACE,aAeF,CAbE,kJAEE,4BACF,CAHA,iJAEE,4BACF,CAEA,0IACE,8BACF,CAFA,yIACE,8BACF,CAEA,0KAEE,6DACF,CAHA,yKAEE,6DACF,CAMF,wGACE,gBAKF,CANA,yGACE,gBAKF,CAHE,uIACE,iCACF,CAFA,wIACE,iCACF,CAKN,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAuCF,CAlCE,wCASE,mDAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAoBF,CAjBE,oEACE,uCACF,CAEA,2FAKE,4CAAwC,CACxC,QAAS,CAFT,kCAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAEA,gGAEE,yFACF,CAIJ,uCAGE,qEAA4D,CAF5D,iBAAkB,CAIlB,6DAAoD,CAEpD,0BAA2B,CAD3B,SAEF,CAEA,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,qDAA8C,CAE9C,wCAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAPtC,kCAA2B,CAR3B,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UA0DF,CAvCE,wDACE,oCACF,CAEA,+DACE,uDACF,CAEA,gEACE,wDACF,CAEA,kEACE,0DACF,CAEA,+DACE,uDACF,CAEA,+DACE,uDACF,CAEA,6DACE,qDACF,CAEA,6DACE,qDACF,CAEA,+DACE,uDACF,CAEA,iEACE,yDACF,CAGF,iCAME,kCAA2B,CAC3B,SAAU,CAFV,8CAAuC,CADvC,gDAA0C,CAF1C,cAAe,CADf,WAOF,CAEA,kCAOE,4CAAwC,CACxC,QAAS,CACT,qFAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAaF,CAHE,yDACE,iDACF,CAGF,wCAEE,kBAAmB,CACnB,qBAAsB,CAFtB,YAAa,CAOb,aAAc,CADd,4BAAuB,CADvB,gBAAiB,CADjB,mCAIF","file":"Timeline-ff81db92.css","sourcesContent":[".Timeline {\n  display: flex;\n  flex-direction: column;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  &:where([data-clip-sidebar='start']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:first-child {\n      padding-top: 0;\n\n      .TimelineItemAvatar {\n        /* No padding-top on first item: badge center is at 0 + 16px (half-badge) */\n        top: var(--base-size-16);\n      }\n\n      &:where([data-condensed])::before {\n        top: var(--base-size-12);\n      }\n\n      &:where([data-condensed]) .TimelineItemAvatar {\n        /* No padding-top + condensed: badge center is at 0 + 8px margin + 8px half-badge */\n        top: calc(var(--base-size-8) + var(--base-size-8));\n      }\n    }\n  }\n\n  &:where([data-clip-sidebar='end']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:last-child {\n      padding-bottom: 0;\n\n      &:where([data-condensed])::before {\n        height: var(--base-size-12);\n      }\n    }\n  }\n}\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--base-size-16) 0;\n  margin-left: var(--base-size-16);\n\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: 2px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:where([data-condensed]) {\n    padding-top: var(--base-size-4);\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: var(--base-size-16);\n    }\n\n    .TimelineBadge {\n      height: 16px;\n      margin-top: var(--base-size-8);\n      margin-bottom: var(--base-size-8);\n      color: var(--fgColor-muted);\n      background-color: var(--bgColor-default);\n      border: 0;\n    }\n\n    .TimelineItemAvatar {\n      /* Vertically center against the condensed badge (4px padding-top + 8px badge top margin + 8px half-badge) */\n      top: calc(var(--base-size-4) + var(--base-size-8) + var(--base-size-8));\n    }\n  }\n}\n\n.TimelineItemAvatar {\n  position: absolute;\n  /* Place avatar in the left gutter, aligned with surrounding actor avatars (~72px from item content) */\n  left: calc(-1 * (var(--base-size-40) + var(--base-size-32)));\n  /* Vertically center against the default badge (16px padding-top + 16px half-badge) */\n  top: calc(var(--base-size-16) + var(--base-size-16));\n  z-index: 1;\n  transform: translateY(-50%);\n}\n\n.TimelineBadgeWrapper {\n  position: relative;\n  z-index: 1;\n}\n\n.TimelineBadge {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  margin-right: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -15px;\n  flex-shrink: 0;\n  overflow: hidden;\n  color: var(--fgColor-muted);\n\n  /* TODOl not quite sure if this is the correct migration for this line */\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--bgColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thick);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n\n  &:where([data-variant]) {\n    color: var(--fgColor-onEmphasis);\n  }\n\n  &:where([data-variant='accent']) {\n    background-color: var(--bgColor-accent-emphasis);\n  }\n\n  &:where([data-variant='success']) {\n    background-color: var(--bgColor-success-emphasis);\n  }\n\n  &:where([data-variant='attention']) {\n    background-color: var(--bgColor-attention-emphasis);\n  }\n\n  &:where([data-variant='severe']) {\n    background-color: var(--bgColor-severe-emphasis);\n  }\n\n  &:where([data-variant='danger']) {\n    background-color: var(--bgColor-danger-emphasis);\n  }\n\n  &:where([data-variant='done']) {\n    background-color: var(--bgColor-done-emphasis);\n  }\n\n  &:where([data-variant='open']) {\n    background-color: var(--bgColor-open-emphasis);\n  }\n\n  &:where([data-variant='closed']) {\n    background-color: var(--bgColor-closed-emphasis);\n  }\n\n  &:where([data-variant='sponsors']) {\n    background-color: var(--bgColor-sponsors-emphasis);\n  }\n}\n\n.TimelineBody {\n  min-width: 0;\n  max-width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: calc(var(--base-size-4) + 1px);\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineBreak {\n  position: relative;\n  z-index: 1;\n  height: var(--base-size-24);\n  margin: 0;\n  margin-bottom: calc(-1 * var(--base-size-16));\n  margin-left: 0;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n\n  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(+ [data-condensed]) {\n    margin-bottom: calc(-1 * var(--base-size-12));\n  }\n}\n\n.TimelineItemActions {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  /* Match the badge wrapper height (32px in both default and condensed) so contents vertically center against the badge */\n  min-height: var(--base-size-32);\n  margin-left: auto;\n  gap: var(--base-size-8);\n  flex-shrink: 0;\n}\n"]}