@primer/react-brand 0.74.0-rc.ffd69649 → 0.74.0

package/esm/Card/Card.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */\n  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n\n  padding: var(--brand-Card-padding-block) var(--brand-Card-padding-inline);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action';\n  flex: auto;\n  grid-template-rows: var(--Card-grid-template-rows);\n  position: relative;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card {\n    --brand-Card-padding-inline: var(--base-size-32);\n  }\n}\n\n.Card--align-center .Card {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n\n  text-align: center;\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    --brand-Card-padding-inline: var(--base-size-80);\n  }\n}\n\n.Card--align-center .Card {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action';\n  justify-items: center;\n}\n\n.Card--backgroundColor-default {\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n  background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action';\n}\n\n/** Block end image position option */\n.Card--imagePos-block-end {\n  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action'\n    'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */\n  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action'\n    'image';\n}\n\n.Card--hasLeadingVisual {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n  margin-bottom: 0;\n  margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n  max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n  max-width: unset;\n}\n\n.Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n  --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n  text-decoration: none;\n}\n\n.Card__link {\n  color: currentColor;\n  text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.Card__description code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n  line-height: calc(1lh * 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n  line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n  text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title */\n.Card__link:focus {\n  outline: none;\n}\n\n.Card__link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n\n.Card--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n  height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n  outline-offset: var(\n    --base-size-12\n  ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */\n}\n\n.Card__image {\n  margin-block-end: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  grid-area: image;\n}\n\n.Card__image--padding-none {\n  margin-inline: calc(var(--brand-Card-padding-inline) * -1);\n}\n\n.Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card--border .Card__image--position-block-start.Card__image--padding-none {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.Card--border .Card__image--position-block-end.Card__image--padding-none {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-start-start-radius: 0;\n  border-start-end-radius: 0;\n}\n\n.Card--variant-minimal .Card__image--padding-none {\n  margin-inline: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: 0;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n  display: block;\n}\n\n.Card__leadingVisual {\n  margin-block-end: var(--base-size-36);\n  display: flex;\n  align-items: center;\n  grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n  justify-content: center;\n}\n\n.Card__leadingVisualItem {\n  display: block;\n  max-width: 100%;\n  height: var(--base-size-40);\n  width: auto;\n}\n\n.Card__icon {\n  margin-bottom: var(--base-size-24);\n  grid-area: icon;\n}\n\n.Card__tokens {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-8);\n  grid-area: tokens;\n  margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n  justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n  margin-block-start: var(--base-size-20);\n  margin-block-end: 0;\n}\n\n.Card__label {\n  margin-block-end: var(--base-size-20);\n  grid-area: label;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n}\n\n.Card__heading {\n  margin-block-end: var(--base-size-12);\n  grid-area: heading;\n}\n\n.Card__description {\n  margin-block-end: var(--base-size-24);\n  grid-area: description;\n}\n\n.Card__action {\n  grid-area: action;\n  margin-block-start: auto;\n  display: inline-flex;\n  align-items: center;\n  max-inline-size: 100%;\n  pointer-events: none;\n}\n\n.Card__actionIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.Card__actionLabel {\n  display: block;\n  min-inline-size: 0;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  text-align: center;\n}\n\n.Card__actionLabelClip {\n  display: contents;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n  margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n  --actionArrow-duration: 300ms;\n\n  margin-block-start: var(--base-size-20);\n  min-height: var(--base-size-40);\n  width: auto;\n  min-inline-size: 0;\n  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n  justify-content: flex-start;\n  column-gap: var(--base-size-8);\n  padding-block: var(--base-size-4);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-Card-background-overlay);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.Card__actionIcon--arrowOnly {\n  width: var(--base-size-32);\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  min-height: var(--base-size-32);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n  justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n  color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n  cursor: inherit;\n}\n\n.Card--expandableArrow {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n  --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n  --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n  margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n  margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\n}\n\n@media (hover: hover) {\n  .Card__action--arrowOnly {\n    column-gap: 0;\n    padding-inline: 0;\n    border-color: transparent;\n    background-color: transparent;\n    transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n      column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n  }\n\n  .Card__actionLabelClip {\n    --actionLabelClip-duration: 400ms;\n\n    display: inline-flex;\n    flex: 1 1 auto;\n    align-items: center;\n    align-self: stretch;\n    min-inline-size: 0;\n    overflow: hidden;\n    max-inline-size: 0;\n    background-color: transparent;\n    opacity: 0;\n    transform: translateX(calc(var(--base-size-12) * -1));\n    margin-inline: 0;\n    padding-inline: 0;\n    transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n      opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n      margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n  }\n\n  .Card--ctaVariant-arrow .Card__actionLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n  justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n  column-gap: var(--base-size-8);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border-color: var(--brand-color-border-default);\n  background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n  max-inline-size: 100%;\n  opacity: 1;\n  transform: translateX(0);\n  margin-inline-start: calc(var(--base-size-12) * -1);\n  margin-inline-end: 0;\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n  transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n  stroke-dashoffset: 20;\n}\n\n.Card--disableAnimation,\n.Card--disableAnimation * {\n  animation: none;\n  transition: none;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Card,\n  .Card::before,\n  .Card::after,\n  .Card * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */\n  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n\n  padding: var(--brand-Card-padding-block) var(--brand-Card-padding-inline);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action';\n  flex: auto;\n  grid-template-rows: var(--Card-grid-template-rows);\n  position: relative;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card {\n    --brand-Card-padding-inline: var(--base-size-32);\n  }\n}\n\n.Card--align-center .Card {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n\n  text-align: center;\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    --brand-Card-padding-inline: var(--base-size-80);\n  }\n}\n\n.Card--align-center .Card {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action';\n  justify-items: center;\n}\n\n.Card--backgroundColor-default {\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n  background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action';\n}\n\n/** Block end image position option */\n.Card--imagePos-block-end {\n  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action'\n    'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */\n  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action'\n    'image';\n}\n\n.Card--hasLeadingVisual {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n  margin-bottom: 0;\n  margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n  max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n  max-width: unset;\n}\n\n.Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n  --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n  text-decoration: none;\n}\n\n.Card__link {\n  color: currentColor;\n  text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n  font-family: var(--brand-fontStack-monospace);\n  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */\n  font-size: calc(1em - 1px);\n  font-weight: var(--base-text-weight-regular);\n  /* Keep the background clear of adjacent lines when large text wraps. */\n  line-height: 1.6;\n  color: var(--brand-InlineCode-color-fg-default);\n  background-color: var(--brand-InlineCode-bgColor);\n  padding-block: 0;\n  padding-inline: var(--base-size-4);\n  border-radius: var(--base-size-2);\n  white-space: normal;\n  overflow-wrap: anywhere;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n.Card--disableAnimation:hover .Card__link {\n  text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title */\n.Card__link:focus {\n  outline: none;\n}\n\n.Card__link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n\n.Card--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n  height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n  outline-offset: var(\n    --base-size-12\n  ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */\n}\n\n.Card__image {\n  margin-block-end: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  grid-area: image;\n}\n\n.Card__image--padding-none {\n  margin-inline: calc(var(--brand-Card-padding-inline) * -1);\n}\n\n.Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card--border .Card__image--position-block-start.Card__image--padding-none {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.Card--border .Card__image--position-block-end.Card__image--padding-none {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-start-start-radius: 0;\n  border-start-end-radius: 0;\n}\n\n.Card--variant-minimal .Card__image--padding-none {\n  margin-inline: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: 0;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n  display: block;\n}\n\n.Card__leadingVisual {\n  margin-block-end: var(--base-size-36);\n  display: flex;\n  align-items: center;\n  grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n  justify-content: center;\n}\n\n.Card__leadingVisualItem {\n  display: block;\n  max-width: 100%;\n  height: var(--base-size-40);\n  width: auto;\n}\n\n.Card__icon {\n  margin-bottom: var(--base-size-24);\n  grid-area: icon;\n}\n\n.Card__tokens {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-8);\n  grid-area: tokens;\n  margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n  justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n  margin-block-start: var(--base-size-20);\n  margin-block-end: 0;\n}\n\n.Card__label {\n  margin-block-end: var(--base-size-20);\n  grid-area: label;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n}\n\n.Card__heading {\n  margin-block-end: var(--base-size-12);\n  grid-area: heading;\n}\n\n.Card__description {\n  margin-block-end: var(--base-size-24);\n  grid-area: description;\n}\n\n.Card__action {\n  grid-area: action;\n  margin-block-start: auto;\n  display: inline-flex;\n  align-items: center;\n  max-inline-size: 100%;\n  pointer-events: none;\n}\n\n.Card__actionIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.Card__actionLabel {\n  display: block;\n  min-inline-size: 0;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  text-align: center;\n}\n\n.Card__actionLabelClip {\n  display: contents;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n  margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n  --actionArrow-duration: 300ms;\n\n  margin-block-start: var(--base-size-20);\n  min-height: var(--base-size-40);\n  width: auto;\n  min-inline-size: 0;\n  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n  justify-content: flex-start;\n  column-gap: var(--base-size-8);\n  padding-block: var(--base-size-4);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-Card-background-overlay);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.Card__actionIcon--arrowOnly {\n  width: var(--base-size-32);\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  min-height: var(--base-size-32);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n  justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n  color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n  cursor: inherit;\n}\n\n.Card--expandableArrow {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n  --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n  --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n  margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n  margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\n}\n\n@media (hover: hover) {\n  .Card__action--arrowOnly {\n    column-gap: 0;\n    padding-inline: 0;\n    border-color: transparent;\n    background-color: transparent;\n    transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n      column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n  }\n\n  .Card__actionLabelClip {\n    --actionLabelClip-duration: 400ms;\n\n    display: inline-flex;\n    flex: 1 1 auto;\n    align-items: center;\n    align-self: stretch;\n    min-inline-size: 0;\n    overflow: hidden;\n    max-inline-size: 0;\n    background-color: transparent;\n    opacity: 0;\n    transform: translateX(calc(var(--base-size-12) * -1));\n    margin-inline: 0;\n    padding-inline: 0;\n    transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n      opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n      margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n  }\n\n  .Card--ctaVariant-arrow .Card__actionLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n  justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n  column-gap: var(--base-size-8);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border-color: var(--brand-color-border-default);\n  background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n  max-inline-size: 100%;\n  opacity: 1;\n  transform: translateX(0);\n  margin-inline-start: calc(var(--base-size-12) * -1);\n  margin-inline-end: 0;\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n  transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n  stroke-dashoffset: 20;\n}\n\n.Card--disableAnimation,\n.Card--disableAnimation * {\n  animation: none;\n  transition: none;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Card,\n  .Card::before,\n  .Card::after,\n  .Card * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/InlineCode/InlineCode.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
+export type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> & BaseProps<HTMLElement> & {
+    /**
+     * Controls whether the code fragment can wrap.
+     * Disable only for short fragments that must remain together.
+     * @default true
+     */
+    wrap?: boolean;
+};
+/**
+ * Use InlineCode to render a short inline code fragment.
+ */
+export declare const InlineCode: React.ForwardRefExoticComponent<Omit<InlineCodeProps, "ref"> & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=InlineCode.d.ts.map

package/esm/InlineCode/InlineCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.d.ts","sourceRoot":"","sources":["../../src/InlineCode/InlineCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,+GAA+G,CAAA;AAKtH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,GAClE,SAAS,CAAC,WAAW,CAAC,GAAG;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAaH;;GAEG;AACH,eAAO,MAAM,UAAU,kGAA2D,CAAA"}

package/esm/InlineCode/InlineCode.js

@@ -0,0 +1,22 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
+import t from "./InlineCode.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/InlineCode/InlineCode.tsx
+function i({ className: n, children: i, wrap: a = !0, ...o }, s) {
+	return /* @__PURE__ */ r("code", {
+		ref: s,
+		className: e(t.InlineCode, !a && t["InlineCode--nowrap"], n),
+		...o,
+		children: /* @__PURE__ */ r("span", {
+			className: t.InlineCode__text,
+			children: i
+		})
+	});
+}
+var a = n(i);
+//#endregion
+export { a as InlineCode };
+
+//# sourceMappingURL=InlineCode.js.map

package/esm/InlineCode/InlineCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.js","names":[],"sources":["../../src/InlineCode/InlineCode.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './InlineCode.module.css'\n\nexport type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> &\n  BaseProps<HTMLElement> & {\n    /**\n     * Controls whether the code fragment can wrap.\n     * Disable only for short fragments that must remain together.\n     * @default true\n     */\n    wrap?: boolean\n  }\n\nfunction InlineCodeRoot(\n  {className, children, wrap = true, ...rest}: InlineCodeProps,\n  ref: React.ForwardedRef<HTMLElement>,\n) {\n  return (\n    <code ref={ref} className={clsx(styles.InlineCode, !wrap && styles['InlineCode--nowrap'], className)} {...rest}>\n      <span className={styles.InlineCode__text}>{children}</span>\n    </code>\n  )\n}\n\n/**\n * Use InlineCode to render a short inline code fragment.\n */\nexport const InlineCode = forwardRef<HTMLElement, InlineCodeProps>(InlineCodeRoot)\n"],"mappings":";;;;;;AAsBA,SAAS,EACP,EAAC,cAAW,aAAU,UAAO,IAAM,GAAG,KACtC,GACA;AACA,QACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,YAAY,CAAC,KAAQ,EAAO,uBAAuB,EAAU;EAAE,GAAI;YACxG,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAmB;GAAgB,CAAA;EACtD,CAAA;;AAOX,IAAa,IAAa,EAAyC,EAAe"}

package/esm/InlineCode/InlineCode.module-Br3-YmSA.css

@@ -0,0 +1 @@
+.Primer_Brand__InlineCode-module__InlineCode___CY8l3{font-family:var(--brand-fontStack-monospace);font-size:calc(1em - 1px);font-weight:var(--base-text-weight-regular);color:var(--brand-InlineCode-color-fg-default);background-color:var(--brand-InlineCode-bgColor);padding-block:0;padding-inline:var(--base-size-4);border-radius:var(--base-size-2);-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:normal;word-wrap:anywhere;line-height:1.6}.Primer_Brand__InlineCode-module__InlineCode___CY8l3.Primer_Brand__InlineCode-module__InlineCode--nowrap___YpKts{white-space:nowrap;word-wrap:normal}:where(h1,h2,h3,h4,h5,h6) .Primer_Brand__InlineCode-module__InlineCode___CY8l3{border-radius:var(--base-size-4)}:where(h1,h2,h3,h4,h5,h6) .Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j{color:var(--brand-InlineCode-color-fg-heading)}.Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto;position:relative;inset-block-start:-.03em}

package/esm/InlineCode/InlineCode.module.js

@@ -0,0 +1,9 @@
+import './InlineCode.module-Br3-YmSA.css';var e = {
+	InlineCode: "Primer_Brand__InlineCode-module__InlineCode___CY8l3",
+	"InlineCode--nowrap": "Primer_Brand__InlineCode-module__InlineCode--nowrap___YpKts",
+	InlineCode__text: "Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=InlineCode.module.js.map

package/esm/InlineCode/InlineCode.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.module.js","names":[],"sources":["../../src/InlineCode/InlineCode.module.css"],"sourcesContent":[".InlineCode {\n  font-family: var(--brand-fontStack-monospace);\n  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */\n  font-size: calc(1em - 1px);\n  font-weight: var(--base-text-weight-regular);\n  /* Keep the background clear of adjacent lines when large text wraps. */\n  line-height: 1.6;\n  color: var(--brand-InlineCode-color-fg-default);\n  background-color: var(--brand-InlineCode-bgColor);\n  padding-block: 0;\n  padding-inline: var(--base-size-4);\n  border-radius: var(--base-size-2);\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.InlineCode.InlineCode--nowrap {\n  white-space: nowrap;\n  overflow-wrap: normal;\n}\n\n:where(h1, h2, h3, h4, h5, h6) .InlineCode {\n  border-radius: var(--base-size-4);\n}\n\n:where(h1, h2, h3, h4, h5, h6) .InlineCode__text {\n  color: var(--brand-InlineCode-color-fg-heading);\n}\n\n.InlineCode__text {\n  position: relative;\n  /* TODO: this is some optical correction, but doesn't work well for uppercase. */\n  inset-block-start: -0.03em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n"],"mappings":""}

package/esm/InlineCode/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InlineCode';
+//# sourceMappingURL=index.d.ts.map

package/esm/InlineCode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InlineCode/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/esm/Label/Label.d.ts

@@ -25,7 +25,9 @@ export type LabelProps = BaseProps<HTMLSpanElement> & {
     ['data-testid']?: string;
 } & React.ComponentPropsWithoutRef<'span'>;
 /**
- * Use a Label to indicate the status of an object or to categorize it with metadata that describes it.
+ * Use Label to display short status or metadata attached to an object in product-like UI
+ * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.
+ *
  * @see https://primer.style/brand/components/Label
  */
 export declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {

package/esm/Label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,yGAAyG,CAAA;AAIhH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAIhD,eAAO,MAAM,WAAW,mOAAqC,CAAA;AAC7D,eAAO,MAAM,UAAU,uCAAwC,CAAA;AAE/D,eAAO,MAAM,iBAAiB,WAAiB,CAAA;AAC/C,eAAO,MAAM,gBAAgB,UAAgB,CAAA;AAE7C,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;IAClC,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAiE1C;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;CAAmC,CAAA"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,yGAAyG,CAAA;AAIhH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAIhD,eAAO,MAAM,WAAW,mOAAqC,CAAA;AAC7D,eAAO,MAAM,UAAU,uCAAwC,CAAA;AAE/D,eAAO,MAAM,iBAAiB,WAAiB,CAAA;AAC/C,eAAO,MAAM,gBAAgB,UAAgB,CAAA;AAE7C,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;IAClC,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAiE1C;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;;;;CAAmC,CAAA"}

package/esm/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useMemo, type Ref} from 'react'\nimport {Text} from '../Text'\n\nimport {useAnimation} from '../animation'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Colors, BiColorGradients, TriColorGradients} from '../constants'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Label.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\nconst Gradients = [...BiColorGradients, ...TriColorGradients] as const\n\nexport const LabelColors = [...Colors, ...Gradients] as const\nexport const LabelSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultLabelColor = LabelColors[0]\nexport const defaultLabelSize = LabelSizes[1]\n\nexport type LabelProps = BaseProps<HTMLSpanElement> & {\n  /**\n   * The leading visual appears before the Label content\n   */\n  leadingVisual?: React.ReactNode | Icon\n  /**\n   * The color variations available in Label\n   */\n  color?: (typeof LabelColors)[number]\n  /**\n   * The size variations available in Label\n   */\n  size?: (typeof LabelSizes)[number]\n  ['data-testid']?: string\n} & React.ComponentPropsWithoutRef<'span'>\n\nconst testIds = {\n  root: 'Label',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Label = forwardRef<HTMLSpanElement, LabelProps>(\n  (\n    {\n      animate,\n      className,\n      size = defaultLabelSize,\n      color = defaultLabelColor,\n      children,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const isGradient = useMemo(() => Gradients.find(gradient => gradient === color), [color])\n\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          animationClasses,\n          styles.Label,\n          styles[`Label--color-${color}`],\n          styles[`Label--size-${size}`],\n          isGradient && styles['Label--gradient'],\n          className,\n        )}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {LeadingVisual && (\n          <span className={styles['Label__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Label__icon-visual']),\n              })\n            )}\n          </span>\n        )}\n        <span className={clsx(styles['Label__text'])}>\n          <Text as=\"span\" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>\n            {children}\n          </Text>\n        </span>\n      </span>\n    )\n  },\n)\n\n/**\n * Use a Label to indicate the status of an object or to categorize it with metadata that describes it.\n * @see https://primer.style/brand/components/Label\n */\nexport const Label = Object.assign(_Label, {testIds})\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAY,CAAC,GAAG,GAAkB,GAAG,EAAkB,EAEhD,IAAc,CAAC,GAAG,GAAQ,GAAG,EAAU,EACvC,IAAa;CAAC;CAAS;CAAU;CAAQ,EAEzC,IAAoB,EAAY,IAChC,IAAmB,EAAW,IAkBrC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,cACA,UAAO,GACP,WAAQ,GACR,aACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAa,QAAc,EAAU,MAAK,MAAY,MAAa,EAAM,EAAE,CAAC,EAAM,CAAC;AAEzF,QACE,kBAAC,QAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,EAAO,gBAAgB,MACvB,EAAO,eAAe,MACtB,KAAc,EAAO,oBACrB,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA0B,eAAa,EAAQ;GAAe,eAAY;aAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAiB,CAAA,GAEjB,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,sBAAsB,EAC9C,CAAC;GAEC,CAAA,EAET,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,YAAe;aAC1C,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,MAAS,UAAU,QAAQ;IAAO,WAAW,EAAK,EAAO,aAAgB;IAC5F;IACI,CAAA;GACF,CAAA,CACF;;EAGZ,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useMemo, type Ref} from 'react'\nimport {Text} from '../Text'\n\nimport {useAnimation} from '../animation'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Colors, BiColorGradients, TriColorGradients} from '../constants'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Label.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\nconst Gradients = [...BiColorGradients, ...TriColorGradients] as const\n\nexport const LabelColors = [...Colors, ...Gradients] as const\nexport const LabelSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultLabelColor = LabelColors[0]\nexport const defaultLabelSize = LabelSizes[1]\n\nexport type LabelProps = BaseProps<HTMLSpanElement> & {\n  /**\n   * The leading visual appears before the Label content\n   */\n  leadingVisual?: React.ReactNode | Icon\n  /**\n   * The color variations available in Label\n   */\n  color?: (typeof LabelColors)[number]\n  /**\n   * The size variations available in Label\n   */\n  size?: (typeof LabelSizes)[number]\n  ['data-testid']?: string\n} & React.ComponentPropsWithoutRef<'span'>\n\nconst testIds = {\n  root: 'Label',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Label = forwardRef<HTMLSpanElement, LabelProps>(\n  (\n    {\n      animate,\n      className,\n      size = defaultLabelSize,\n      color = defaultLabelColor,\n      children,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const isGradient = useMemo(() => Gradients.find(gradient => gradient === color), [color])\n\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          animationClasses,\n          styles.Label,\n          styles[`Label--color-${color}`],\n          styles[`Label--size-${size}`],\n          isGradient && styles['Label--gradient'],\n          className,\n        )}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {LeadingVisual && (\n          <span className={styles['Label__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Label__icon-visual']),\n              })\n            )}\n          </span>\n        )}\n        <span className={clsx(styles['Label__text'])}>\n          <Text as=\"span\" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>\n            {children}\n          </Text>\n        </span>\n      </span>\n    )\n  },\n)\n\n/**\n * Use Label to display short status or metadata attached to an object in product-like UI\n * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.\n *\n * @see https://primer.style/brand/components/Label\n */\nexport const Label = Object.assign(_Label, {testIds})\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAY,CAAC,GAAG,GAAkB,GAAG,EAAkB,EAEhD,IAAc,CAAC,GAAG,GAAQ,GAAG,EAAU,EACvC,IAAa;CAAC;CAAS;CAAU;CAAQ,EAEzC,IAAoB,EAAY,IAChC,IAAmB,EAAW,IAkBrC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,cACA,UAAO,GACP,WAAQ,GACR,aACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAa,QAAc,EAAU,MAAK,MAAY,MAAa,EAAM,EAAE,CAAC,EAAM,CAAC;AAEzF,QACE,kBAAC,QAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,EAAO,gBAAgB,MACvB,EAAO,eAAe,MACtB,KAAc,EAAO,oBACrB,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA0B,eAAa,EAAQ;GAAe,eAAY;aAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAiB,CAAA,GAEjB,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,sBAAsB,EAC9C,CAAC;GAEC,CAAA,EAET,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,YAAe;aAC1C,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,MAAS,UAAU,QAAQ;IAAO,WAAW,EAAK,EAAO,aAAgB;IAC5F;IACI,CAAA;GACF,CAAA,CACF;;EAGZ,EAQY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}

package/esm/MinimalFooter/MinimalFooter.d.ts

@@ -4,6 +4,7 @@ import { BaseProps } from '../component-helpers';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/base.css';
 declare const socialLinkData: {
     readonly x: {
         readonly fullName: "X";
@@ -64,6 +65,13 @@ declare const socialLinkData: {
 };
 type SocialLinkName = keyof typeof socialLinkData;
 export type MinimalFooterProps = {
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    centerComponent?: React.ReactElement;
     /**
      * An array of social links to be displayed in the footer.
      */
@@ -78,12 +86,27 @@ export type MinimalFooterProps = {
      */
     copyrightStatement?: string | React.ReactElement;
 } & BaseProps<HTMLElement>;
-declare function Root({ className, children, copyrightStatement, logoHref, socialLinks, ...rest }: PropsWithChildren<MinimalFooterProps>): import("react/jsx-runtime").JSX.Element;
+declare function Root({ centerComponent, className, children, copyrightStatement, logoHref, socialLinks, ...rest }: PropsWithChildren<MinimalFooterProps>): import("react/jsx-runtime").JSX.Element;
 type FootnoteProps = BaseProps<HTMLElement>;
 declare function Footnotes({ children, className }: PropsWithChildren<FootnoteProps>): import("react/jsx-runtime").JSX.Element;
 type LinkProps<C extends React.ElementType> = BaseProps<C> & {
     as?: 'a' | 'button';
 } & Omit<React.ComponentPropsWithoutRef<C>, keyof C>;
+export type MinimalFooterBackToTopProps = {
+    /**
+     * The visible and accessible label.
+     */
+    children: React.ReactNode;
+    /**
+     * The ID of the semantic top-of-page element that receives focus after keyboard activation.
+     * Defaults to the first `<main>` element, then falls back to `<body>`.
+     */
+    focusTargetId?: string;
+    /**
+     * Runs before the built-in behavior. Call `event.preventDefault()` to cancel scrolling and focus transfer.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+} & BaseProps<HTMLButtonElement> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'>;
 /**
  * Use MinimalFooter to render a global footer on all GitHub pages.
  * @see https://primer.style/brand/components/MinimalFooter
@@ -91,6 +114,7 @@ type LinkProps<C extends React.ElementType> = BaseProps<C> & {
 export declare const MinimalFooter: typeof Root & {
     Footnotes: typeof Footnotes;
     Link: <C extends React.ElementType = "a">({ as, children, ...rest }: PropsWithChildren<LinkProps<C>>) => import("react/jsx-runtime").JSX.Element;
+    BackToTop: React.ForwardRefExoticComponent<Omit<MinimalFooterBackToTopProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 };
 export {};
 //# sourceMappingURL=MinimalFooter.d.ts.map

package/esm/MinimalFooter/MinimalFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinimalFooter.d.ts","sourceRoot":"","sources":["../../src/MinimalFooter/MinimalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C;;GAEG;AACH,OAAO,0GAA0G,CAAA;AAOjH,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDV,CAAA;AAEV,KAAK,cAAc,GAAG,MAAM,OAAO,cAAc,CAAA;AAKjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;CACjD,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,QAA+B,EAC/B,WAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CAqEvC;AAED,KAAK,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE3C,iBAAS,SAAS,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,2CAyBzE;AAoED,KAAK,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAA;CAAC,GAAG,IAAI,CACrF,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EACjC,MAAM,CAAC,CACR,CAAA;AAmBH;;;GAGG;AACH,eAAO,MAAM,aAAa;;WArBZ,CAAC,SAAS,KAAK,CAAC,WAAW,mCAAiC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAwBvG,CAAA"}
+{"version":3,"file":"MinimalFooter.d.ts","sourceRoot":"","sources":["../../src/MinimalFooter/MinimalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAc,MAAM,OAAO,CAAA;AAKvE,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAG9C;;GAEG;AACH,OAAO,0GAA0G,CAAA;AACjH,OAAO,6FAA6F,CAAA;AAOpG,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDV,CAAA;AAEV,KAAK,cAAc,GAAG,MAAM,OAAO,cAAc,CAAA;AAGjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;CACjD,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,iBAAS,IAAI,CAAC,EACZ,eAAe,EACf,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,QAA+B,EAC/B,WAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CA4EvC;AAED,KAAK,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE3C,iBAAS,SAAS,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,2CA2BzE;AAmDD,KAAK,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAA;CAAC,GAAG,IAAI,CACrF,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EACjC,MAAM,CAAC,CACR,CAAA;AAyBH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAC9B,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAA;AAuE7E;;;GAGG;AACH,eAAO,MAAM,aAAa;;WAjHZ,CAAC,SAAS,KAAK,CAAC,WAAW,mCAAiC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;CAqHvG,CAAA"}

package/esm/MinimalFooter/MinimalFooter.js

@@ -1,13 +1,12 @@
 import e from "../node_modules/clsx/dist/clsx.js";
-import { Stack as t } from "../Stack/Stack.js";
+import { useReducedMotion as t } from "../hooks/useReducedMotion.js";
 import { Text as n } from "../Text/Text.js";
-import { ColorModesEnum as r } from "../ThemeProvider/ThemeProvider.js";
-import { useTheme as i } from "../ThemeProvider/useTheme.js";
-import { LogoGithubIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes-DhME9i-y.css';/* empty css                                                                                                    */
-import o from "./MinimalFooter.module.js";
-import s from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ArrowUpIcon as r, MarkGithubIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes-CMFhnjfv.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/base-C0fjI9_t.css';/* empty css                                                                                                    */
+/* empty css                                                                                       */
+import a from "./MinimalFooter.module.js";
+import o, { forwardRef as s, useCallback as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/MinimalFooter/MinimalFooter.tsx
 var d = {
 	x: {
@@ -67,77 +66,88 @@ var d = {
 		iconHeight: 24
 	}
 }, f = Object.keys(d);
-function p({ className: r, children: i, copyrightStatement: a, logoHref: d = "https://github.com", socialLinks: f, ...p }) {
-	let h = () => s.Children.toArray(i).find((e) => {
-		if (!s.isValidElement(e)) return !1;
-		if (e.type && e.type === m) return !0;
-	}), v = s.Children.toArray(i).filter((e) => {
-		if (s.isValidElement(e) && e.type === _) return e;
-	}).slice(0, 5), y = (/* @__PURE__ */ new Date()).getFullYear();
+function p({ centerComponent: t, className: r, children: i, copyrightStatement: s, logoHref: c = "https://github.com", socialLinks: d, ...p }) {
+	let h, b, x = [];
+	for (let e of o.Children.toArray(i)) o.isValidElement(e) && (e.type === m ? h ??= e : e.type === y ? b ??= e : e.type === v && x.length < 5 && x.push(e));
+	let S = (/* @__PURE__ */ new Date()).getFullYear(), C = d === void 0 ? f : d, w = C === !1 ? [] : C, T = w.length > 0, E = x.length > 0, D = E ? /* @__PURE__ */ l("div", {
+		className: a.MinimalFooter__links,
+		children: x
+	}) : null, O = /* @__PURE__ */ l(n, {
+		as: "p",
+		size: "100",
+		font: "monospace",
+		weight: {
+			narrow: "medium",
+			wide: "normal"
+		},
+		variant: "muted",
+		className: e(a.MinimalFooter__copyright, a.MinimalFooter__metaText),
+		children: s || `\u00A9 ${S} GitHub. All rights reserved.`
+	});
 	return /* @__PURE__ */ u("footer", {
-		className: e(o.Footer, r),
+		className: e(a.MinimalFooter, h && a["MinimalFooter--withFootnotes"], r),
 		...p,
 		children: [
-			h(),
-			/* @__PURE__ */ l(g, {
-				socialLinks: f,
-				logoHref: d
+			h,
+			/* @__PURE__ */ l("div", {
+				className: a.MinimalFooter__section,
+				children: /* @__PURE__ */ l("section", {
+					className: a.MinimalFooter__top,
+					children: /* @__PURE__ */ l("div", {
+						className: a.MinimalFooter__container,
+						children: /* @__PURE__ */ u("div", {
+							className: a["MinimalFooter__top-row"],
+							children: [/* @__PURE__ */ l(g, { logoHref: c }), E || b ? /* @__PURE__ */ u("div", {
+								className: a["MinimalFooter__top-actions"],
+								children: [b, D]
+							}) : null]
+						})
+					})
+				})
 			}),
-			/* @__PURE__ */ l("section", { children: /* @__PURE__ */ l("div", {
-				className: o["Footer__legal-and-links"],
-				children: /* @__PURE__ */ l("div", {
-					className: o.Footer__container,
-					children: /* @__PURE__ */ u(t, {
-						direction: {
-							narrow: "vertical",
-							regular: "horizontal"
-						},
-						gap: "normal",
-						padding: "none",
-						justifyContent: "space-between",
-						children: [/* @__PURE__ */ l(t, {
-							padding: "none",
-							gap: "condensed",
-							justifyContent: {
-								narrow: "center",
-								regular: "flex-end"
-							},
-							direction: {
-								narrow: "vertical",
-								regular: "horizontal"
-							},
-							className: o.Footer__links,
-							children: /* @__PURE__ */ l(c, { children: v })
-						}), /* @__PURE__ */ l(n, {
-							as: "p",
-							size: "200",
-							variant: "muted",
-							className: o.Footer__copyright,
-							children: a || `\u00A9 ${y} GitHub. All rights reserved.`
-						})]
+			t ? /* @__PURE__ */ l("div", {
+				className: e(a.MinimalFooter__section, a["MinimalFooter__section--center"]),
+				children: /* @__PURE__ */ l("section", {
+					className: a.MinimalFooter__container,
+					children: t
+				})
+			}) : null,
+			/* @__PURE__ */ l("div", {
+				className: e(a.MinimalFooter__section, a["MinimalFooter__section--bottom"]),
+				children: /* @__PURE__ */ l("section", {
+					className: a.MinimalFooter__bottom,
+					children: /* @__PURE__ */ l("div", {
+						className: a.MinimalFooter__container,
+						children: /* @__PURE__ */ u("div", {
+							className: a["MinimalFooter__bottom-row"],
+							children: [O, T ? /* @__PURE__ */ l(_, { socialLinks: w }) : null]
+						})
 					})
 				})
-			}) })
+			})
 		]
 	});
 }
 function m({ children: t, className: r }) {
-	let i = s.Children.map(t, (t) => {
-		if (s.isValidElement(t) && t.type === n) {
+	let i = o.Children.map(t, (t) => {
+		if (o.isValidElement(t) && t.type === n) {
 			let n = t, r = {
 				variant: "muted",
 				size: "100",
-				className: e(o["Footer__terms-item"], n.props.className)
+				className: e(a["MinimalFooter__terms-item"], n.props.className)
 			};
-			return n.props.as || (r.as = "p"), s.cloneElement(n, r);
+			return n.props.as || (r.as = "p"), o.cloneElement(n, r);
 		}
 		return null;
 	});
-	return /* @__PURE__ */ l("section", {
-		className: o.Footer__container,
-		children: /* @__PURE__ */ l("div", {
-			className: e(o.Footer__terms, r),
-			children: i
+	return /* @__PURE__ */ l("div", {
+		className: e(a.MinimalFooter__section, a["MinimalFooter__section--footnotes"]),
+		children: /* @__PURE__ */ l("section", {
+			className: a.MinimalFooter__container,
+			children: /* @__PURE__ */ l("div", {
+				className: e(a.MinimalFooter__terms, r),
+				children: i
+			})
 		})
 	});
 }
@@ -145,10 +155,10 @@ var h = ({ name: e }) => {
 	let t = d[e];
 	return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ u("a", {
 		href: t.url,
-		className: o["Footer__social-link"],
+		className: a["MinimalFooter__social-link"],
 		"data-analytics-event": `{"category":"Footer","action":"go to ${t.fullName}","label":"text:${e}"}`,
 		children: [/* @__PURE__ */ l("img", {
-			className: o["Footer__social-icon"],
+			className: a["MinimalFooter__social-icon"],
 			src: t.icon,
 			height: t.iconHeight,
 			width: t.iconWidth,
@@ -159,53 +169,83 @@ var h = ({ name: e }) => {
 			className: "visually-hidden",
 			children: ["GitHub on ", t.fullName]
 		})]
-	}) }, e);
+	}) });
 };
-function g({ socialLinks: n = f, logoHref: s }) {
-	let { colorMode: c } = i();
-	return /* @__PURE__ */ l("section", {
-		className: e(o.Footer__logomarks),
-		children: /* @__PURE__ */ l("div", {
-			className: o.Footer__container,
-			children: /* @__PURE__ */ u(t, {
-				alignItems: "center",
-				direction: {
-					narrow: "vertical",
-					regular: "horizontal"
-				},
-				gap: "normal",
-				padding: "none",
-				justifyContent: "space-between",
-				children: [/* @__PURE__ */ l("div", { children: /* @__PURE__ */ l("a", {
-					href: s,
-					"data-analytics-event": "{\"category\":\"Footer\",\"action\":\"go to home\",\"label\":\"text:home\"}",
-					"aria-label": "GitHub",
-					children: /* @__PURE__ */ l(a, {
-						fill: c === r.DARK ? "white" : "black",
-						size: "medium"
-					})
-				}) }), n ? /* @__PURE__ */ l("ul", {
-					className: o["Footer__social-links"],
-					children: n.map((e) => /* @__PURE__ */ l(h, { name: e }, e))
-				}) : null]
-			})
-		})
+function g({ logoHref: e }) {
+	return /* @__PURE__ */ l("a", {
+		href: e,
+		className: a.MinimalFooter__logo,
+		"data-analytics-event": "{\"category\":\"Footer\",\"action\":\"go to home\",\"label\":\"text:home\"}",
+		"aria-label": "GitHub",
+		children: /* @__PURE__ */ l(i, { size: 24 })
+	});
+}
+function _({ socialLinks: e }) {
+	return /* @__PURE__ */ l("ul", {
+		className: a["MinimalFooter__social-links"],
+		children: e.map((e) => /* @__PURE__ */ l(h, { name: e }, e))
 	});
 }
-var _ = ({ as: e, children: t, ...r }) => /* @__PURE__ */ l(e || "a", {
-	className: o.Footer__link,
+var v = ({ as: e, children: t, ...r }) => /* @__PURE__ */ l(e || "a", {
+	className: a.MinimalFooter__link,
 	"data-analytics-event": r.href ? `{"category":"Footer","action":"go to ${r.href}","label":"text:${t}"}` : void 0,
 	...r,
 	children: /* @__PURE__ */ l(n, {
 		variant: "muted",
-		size: "200",
+		size: "100",
+		font: "monospace",
+		weight: {
+			narrow: "medium",
+			wide: "normal"
+		},
+		className: a.MinimalFooter__metaText,
 		children: t
 	})
-}), v = Object.assign(p, {
+}), y = s(({ children: i, className: o, focusTargetId: s, onClick: d, type: f = "button", ...p }, m) => {
+	let h = t(), g = c((e) => {
+		if (d?.(e), !e.defaultPrevented && (window.scrollTo({
+			top: 0,
+			behavior: h ? "instant" : "smooth"
+		}), e.detail === 0)) {
+			let e = s ? document.getElementById(s) : document.querySelector("main") ?? document.querySelector("body") ?? document.documentElement;
+			if (!e) {
+				(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(`MinimalFooter.BackToTop: No element found with id "${s}".`);
+				return;
+			}
+			e.hasAttribute("tabindex") || (e.tabIndex = -1, e.addEventListener("blur", () => e.removeAttribute("tabindex"), { once: !0 })), e.focus({ preventScroll: !0 });
+		}
+	}, [
+		s,
+		d,
+		h
+	]);
+	return /* @__PURE__ */ l("button", {
+		ref: m,
+		type: f,
+		className: e(a.MinimalFooter__backToTop, o),
+		onClick: g,
+		...p,
+		children: /* @__PURE__ */ u("span", {
+			className: a["MinimalFooter__backToTop-content"],
+			children: [/* @__PURE__ */ l(n, {
+				as: "span",
+				size: "100",
+				weight: "medium",
+				className: a.MinimalFooter__metaText,
+				children: i
+			}), /* @__PURE__ */ l("span", {
+				className: a["MinimalFooter__backToTop-icon"],
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ l(r, {})
+			})]
+		})
+	});
+}), b = Object.assign(p, {
 	Footnotes: m,
-	Link: _
+	Link: v,
+	BackToTop: y
 });
 //#endregion
-export { v as MinimalFooter };
+export { b as MinimalFooter };
 
 //# sourceMappingURL=MinimalFooter.js.map