@primer/react-brand 0.72.0-rc.f8b72452 → 0.72.1-rc.72b4db43

package/esm/river/river-shared.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"river-shared.module.js","names":[],"sources":["../../src/river/river-shared.module.css"],"sourcesContent":[".River {\n  display: grid;\n  gap: var(--brand-River-spacing-inner);\n  grid-auto-rows: min-content;\n  padding-inline: var(--brand-River-spacing-outerInline);\n  padding-block: var(--brand-River-spacing-outerBlock);\n  container-type: inline-size;\n}\n\n.River--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  gap: var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .River--variant-gridline {\n    gap: var(--base-size-28);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.River--align-center {\n  text-align: center;\n}\n\n.River__content {\n  order: 2;\n}\n\n.River__visual--fill-media img,\n.River__visual--fill-media picture,\n.River__visual--fill-media video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River__visual--rounded {\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River__visual--has-shadow {\n  box-shadow: var(--brand-River-visual-shadow);\n}\n\n.River--variant-gridline .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32);\n  border-radius: 0;\n  margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));\n}\n\n.River--variant-gridline .River__visual--has-background img,\n.River--variant-gridline .River__visual--has-background picture,\n.River--variant-gridline .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    justify-content: flex-end;\n    padding-block-end: 0;\n    padding-inline-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    border-start-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .River {\n    max-width: 618px;\n    margin-inline: auto;\n  }\n\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n.River__heading {\n  margin-bottom: var(--brand-River-heading-margin);\n}\n\n.River__call-to-action {\n  margin-top: var(--base-size-24);\n}\n\n.River__text strong,\n.River__text b {\n  font-weight: var(--base-text-weight-normal);\n  color: var(--brand-color-text-default);\n}\n\n.River__heading code,\n.River__text code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace) !important;\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.River__text code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n\n.River__heading-inner:has(code) {\n  line-height: calc(1lh * 1.8);\n}\n\n@media screen and (min-width: 64rem) {\n  .River__heading-inner:has(code) {\n    line-height: calc(1lh * 2.1);\n  }\n}\n\n.River__text:has(code) {\n  line-height: calc(1lh * 1.1);\n}\n\n.River__trailingComponent {\n  margin-block-start: var(--brand-River-spacing-inner);\n}\n\n.River__trailingComponent--divider {\n  padding-block-start: var(--brand-River-spacing-inner);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.River__label {\n  margin-block-end: var(--brand-River-label-margin);\n}\n\n.River--variant-gridline.River--align-start .River__visual {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-start .River__content {\n  order: 2;\n}\n\n.River--variant-gridline.River--align-end .River__content {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-end .River__visual {\n  order: 2;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .River--variant-gridline.River--align-start .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-end .River__visual--has-background {\n    margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n}\n\n/* Large breakpoint and up */\n@media screen and (min-width: 63.25rem) {\n  .River {\n    grid-template-rows: unset;\n  }\n\n  .River--variant-gridline .River__visual--has-background {\n    padding: var(--base-size-64);\n    margin: 0;\n  }\n\n  .River__content {\n    order: unset;\n  }\n\n  .River--50-50 {\n    grid-template-columns: [content] 1fr [visual] 1fr;\n  }\n\n  .River--60-40 {\n    grid-template-columns: [content] 4fr [visual] 6fr;\n  }\n\n  .River--align-start {\n    grid-template-areas: 'content visual';\n  }\n\n  .River--align-end {\n    grid-template-areas: 'visual content';\n  }\n\n  .River--align-end.River--60-40 {\n    grid-template-columns: [visual] 6fr [content] 4fr;\n  }\n\n  .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River__content {\n    display: grid;\n    align-content: center;\n    grid-area: content;\n  }\n\n  .River--50-50:not(.River--variant-gridline) .River__body-text,\n  .River--50-50:not(.River--variant-gridline) .River__heading {\n    max-width: 400px;\n  }\n\n  .River--align-start:not(.River--variant-gridline) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--align-end:not(.River--variant-gridline) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River__content--align-block-end {\n    align-content: end;\n  }\n\n  .River__visual {\n    grid-area: visual;\n  }\n\n  .River--align-center {\n    grid-auto-rows: min-content;\n    grid-template-columns: unset;\n  }\n\n  .River--align-center .River__content,\n  .River--align-center .River__visual {\n    grid-area: unset;\n    justify-self: center;\n  }\n\n  .River--align-center .River__body-text {\n    max-width: 600px;\n    justify-self: center;\n  }\n\n  .River--align-center .River__visual {\n    margin-bottom: var(--brand-River-spacing-inner);\n  }\n\n  .River--align-center .River__content {\n    margin-top: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {\n    padding: 0;\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 560fr 676fr;\n  }\n\n  .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {\n    grid-template-columns: 676fr 560fr;\n  }\n\n  .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-64);\n    padding-inline-end: var(--brand-River-spacing-inner);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n    padding-inline-end: var(--base-size-64);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-end: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) {\n    padding: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    width: 100%;\n    margin: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual {\n    margin-bottom: 0;\n  }\n\n  .River--variant-gridline.River--align-center {\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__content {\n    margin-top: 0;\n    margin-bottom: var(--base-size-64);\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {\n    padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n    padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n}\n\n.RiverBreakout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--brand-RiverBreakout-spacing-inner);\n  padding-block-end: var(--brand-River-spacing-outerBlock);\n  padding-block-start: var(--brand-River-spacing-outerBlock);\n}\n\n.RiverBreakout .River__text {\n  max-width: 37.5rem; /* 600px */\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-500);\n  font-weight: var(--brand-heading-weight-500);\n  letter-spacing: var(--brand-heading-letterSpacing-500);\n  line-height: var(--brand-text-lineHeight-500);\n}\n\n.RiverBreakout--muted .River__text {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverBreakout .River__text em,\n.RiverBreakout .River__text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.RiverBreakout__hiddenHeading {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.RiverBreakout .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n  .RiverBreakout .River__content {\n    display: grid;\n    gap: var(--brand-River-spacing-inner);\n    row-gap: var(--brand-River-spacing-innerY);\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 5fr 3fr;\n    grid-auto-rows: auto 1fr;\n  }\n\n  .RiverBreakout .River__text {\n    grid-area: text;\n  }\n\n  .RiverBreakout .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n  }\n\n  .RiverBreakout .River__trailingComponent {\n    grid-area: trailingComponent;\n    justify-self: flex-end;\n    margin-block-start: 0;\n  }\n}\n\n.RiverBreakout--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: 0;\n  gap: 0;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverBreakout--variant-gridline .River__visual {\n  overflow: hidden;\n}\n\n.RiverBreakout--variant-gridline .River__visual--rounded {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__content {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n}\n\n.RiverBreakout--variant-gridline .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n.RiverBreakout--variant-gridline .River__trailingComponent--divider {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n}\n\n/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint */\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    margin-block-start: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__content {\n    display: grid;\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);\n    grid-template-rows: auto 1fr;\n    gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n    flex: 1;\n    padding-block: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__text {\n    grid-area: text;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  }\n\n  .RiverBreakout--variant-gridline .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    grid-area: trailingComponent;\n    margin-block-start: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent--divider {\n    border-top: none;\n    border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-inline: 0;\n    margin-block: 0;\n    padding-inline: 0;\n    padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n    padding-block: 0;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n    align-self: stretch;\n  }\n}\n\n/* Gridline + background: remove outer container top padding (background fills to top edge) */\n.RiverBreakout--variant-gridline:has(.River__visual--has-background) {\n  padding-block-start: 0;\n}\n\n.RiverBreakout .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  border-radius: 0;\n  overflow: hidden;\n}\n\n.RiverBreakout .River__visual--has-background img,\n.RiverBreakout .River__visual--has-background picture,\n.RiverBreakout .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout .River__visual--has-background [data-video-player-container] {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__visual--has-background {\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding: var(--base-size-32);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding: var(--base-size-64);\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {\n    border-radius: 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"river-shared.module.js","names":[],"sources":["../../src/river/river-shared.module.css"],"sourcesContent":[".River {\n  display: grid;\n  gap: var(--brand-River-spacing-inner);\n  grid-auto-rows: min-content;\n  padding-inline: var(--brand-River-spacing-outerInline);\n  padding-block: var(--brand-River-spacing-outerBlock);\n  container-type: inline-size;\n}\n\n.River--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  gap: var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .River--variant-gridline {\n    gap: var(--base-size-28);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.River--align-center {\n  text-align: center;\n}\n\n.River__content {\n  order: 2;\n}\n\n.River__visual :is(img, picture) {\n  display: block;\n}\n\n.River__visual--fill-media img,\n.River__visual--fill-media picture,\n.River__visual--fill-media video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River__visual--rounded {\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River__visual--has-shadow {\n  box-shadow: var(--brand-River-visual-shadow);\n}\n\n.River--variant-gridline .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  border-radius: 0;\n  margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));\n}\n\n.River--variant-gridline .River__visual--has-background img,\n.River--variant-gridline .River__visual--has-background picture,\n.River--variant-gridline .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    justify-content: flex-end;\n    padding-block-end: 0;\n    padding-inline-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    border-start-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .River {\n    max-width: 618px;\n    margin-inline: auto;\n  }\n\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n.River__heading {\n  margin-bottom: var(--brand-River-heading-margin);\n}\n\n.River__call-to-action {\n  margin-top: var(--base-size-24);\n}\n\n.River__text strong,\n.River__text b {\n  font-weight: var(--base-text-weight-normal);\n  color: var(--brand-color-text-default);\n}\n\n.River__heading code,\n.River__text code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace) !important;\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.River__text code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n\n.River__heading-inner:has(code) {\n  line-height: calc(1lh * 1.8);\n}\n\n@media screen and (min-width: 64rem) {\n  .River__heading-inner:has(code) {\n    line-height: calc(1lh * 2.1);\n  }\n}\n\n.River__text:has(code) {\n  line-height: calc(1lh * 1.1);\n}\n\n.River__leadingComponent :is(img, picture),\n.River__trailingComponent :is(img, picture) {\n  display: block;\n}\n\n.River__trailingComponent {\n  margin-block-start: var(--brand-River-spacing-inner);\n}\n\n.River__trailingComponent--divider {\n  padding-block-start: var(--brand-River-spacing-inner);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.River__label {\n  margin-block-end: var(--brand-River-label-margin);\n}\n\n.River--variant-gridline.River--align-start .River__visual {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-start .River__content {\n  order: 2;\n}\n\n.River--variant-gridline.River--align-end .River__content {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-end .River__visual {\n  order: 2;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .River--variant-gridline.River--align-start .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-end .River__visual--has-background {\n    margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n}\n\n/* Large breakpoint and up */\n@media screen and (min-width: 63.25rem) {\n  .River {\n    grid-template-rows: unset;\n  }\n\n  .River--variant-gridline .River__visual--has-background {\n    margin: 0;\n  }\n\n  .River__content {\n    order: unset;\n  }\n\n  .River--50-50 {\n    grid-template-columns: [content] 1fr [visual] 1fr;\n  }\n\n  .River--60-40 {\n    grid-template-columns: [content] 4fr [visual] 6fr;\n  }\n\n  .River--align-start {\n    grid-template-areas: 'content visual';\n  }\n\n  .River--align-end {\n    grid-template-areas: 'visual content';\n  }\n\n  .River--align-end.River--60-40 {\n    grid-template-columns: [visual] 6fr [content] 4fr;\n  }\n\n  .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River__content {\n    display: grid;\n    align-content: center;\n    grid-area: content;\n  }\n\n  .River--50-50:not(.River--variant-gridline) .River__body-text,\n  .River--50-50:not(.River--variant-gridline) .River__heading {\n    max-width: 400px;\n  }\n\n  .River--align-start:not(.River--variant-gridline) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--align-end:not(.River--variant-gridline) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River__content--align-block-end {\n    align-content: end;\n  }\n\n  .River__visual {\n    grid-area: visual;\n  }\n\n  .River--align-center {\n    grid-auto-rows: min-content;\n    grid-template-columns: unset;\n  }\n\n  .River--align-center .River__content,\n  .River--align-center .River__visual {\n    grid-area: unset;\n    justify-self: center;\n  }\n\n  .River--align-center .River__body-text {\n    max-width: 600px;\n    justify-self: center;\n  }\n\n  .River--align-center .River__visual {\n    margin-bottom: var(--brand-River-spacing-inner);\n  }\n\n  .River--align-center .River__content {\n    margin-top: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {\n    padding: 0;\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 560fr 676fr;\n  }\n\n  .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {\n    grid-template-columns: 676fr 560fr;\n  }\n\n  .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-64);\n    padding-inline-end: var(--brand-River-spacing-inner);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n    padding-inline-end: var(--base-size-64);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-end: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) {\n    padding: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    width: 100%;\n    margin: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual {\n    margin-bottom: 0;\n  }\n\n  .River--variant-gridline.River--align-center {\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__content {\n    margin-top: 0;\n    margin-bottom: var(--base-size-64);\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {\n    padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n    padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n}\n\n/* Explicit visual media layouts override the responsive default without changing it. */\n.River--variant-gridline .River__visual.River__visual--position-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-start;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-start: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-all {\n  padding: var(--brand-River-variant-gridline-visual-padding);\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-none {\n  padding: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual:is(\n    .River__visual--position-center,\n    .River__visual--position-block-end,\n    .River__visual--position-block-end-inline-start,\n    .River__visual--position-block-end-inline-end\n  )\n  :is(img, picture, video, [data-video-player-container]) {\n  max-width: 100%;\n  width: auto;\n  height: auto;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-center\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-end-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-start-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--fill-media.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  width: 100%;\n  max-width: none;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]),\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n}\n\n.RiverBreakout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--brand-RiverBreakout-spacing-inner);\n  padding-block-end: var(--brand-River-spacing-outerBlock);\n  padding-block-start: var(--brand-River-spacing-outerBlock);\n}\n\n.RiverBreakout .River__text {\n  max-width: 37.5rem; /* 600px */\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-500);\n  font-weight: var(--brand-heading-weight-500);\n  letter-spacing: var(--brand-heading-letterSpacing-500);\n  line-height: var(--brand-text-lineHeight-500);\n}\n\n.RiverBreakout--muted .River__text {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverBreakout .River__text em,\n.RiverBreakout .River__text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.RiverBreakout__hiddenHeading {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.RiverBreakout .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n  .RiverBreakout .River__content {\n    display: grid;\n    gap: var(--brand-River-spacing-inner);\n    row-gap: var(--brand-River-spacing-innerY);\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 5fr 3fr;\n    grid-auto-rows: auto 1fr;\n  }\n\n  .RiverBreakout .River__text {\n    grid-area: text;\n  }\n\n  .RiverBreakout .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n  }\n\n  .RiverBreakout .River__trailingComponent {\n    grid-area: trailingComponent;\n    justify-self: flex-end;\n    margin-block-start: 0;\n  }\n}\n\n.RiverBreakout--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: 0;\n  gap: 0;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverBreakout--variant-gridline .River__visual {\n  overflow: hidden;\n}\n\n.RiverBreakout--variant-gridline .River__visual--rounded {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__content {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n}\n\n.RiverBreakout--variant-gridline .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n.RiverBreakout--variant-gridline .River__trailingComponent--divider {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n}\n\n/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint */\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    margin-block-start: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__content {\n    display: grid;\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);\n    grid-template-rows: auto 1fr;\n    gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n    flex: 1;\n    padding-block: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__text {\n    grid-area: text;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  }\n\n  .RiverBreakout--variant-gridline .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    grid-area: trailingComponent;\n    margin-block-start: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent--divider {\n    border-top: none;\n    border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-inline: 0;\n    margin-block: 0;\n    padding-inline: 0;\n    padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n    padding-block: 0;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n    align-self: stretch;\n  }\n}\n"],"mappings":""}

package/lib/ActionMenu/ActionMenu.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
-import { ButtonProps } from '../';
+import { ButtonProps } from '../Button';
 import { type Icon } from '@primer/octicons-react';
 import { type PositionSettings } from '@primer/behaviors';
 import type { BaseProps } from '../component-helpers';

package/lib/ButtonGroup/ButtonGroup.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
 import { ButtonProps } from '../Button';
+import { ActionMenuProps } from '../ActionMenu';
 export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
+export type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>;
+export type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandActionMenuType | false | null | undefined;
 export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
-    children: PrimerBrandButtonType[] | PrimerBrandButtonType;
+    children: ButtonGroupChild | ButtonGroupChild[];
     buttonSize?: ButtonProps<'button' | 'a'>['size'];
     buttonsAs?: 'button' | 'a';
 };

package/lib/Card/Card.d.ts

@@ -12,6 +12,7 @@ export declare const CardCTAVariants: readonly ["text", "arrow", "none"];
 export declare const CardBackgroundColors: readonly ["default", "subtle", "none"];
 export declare const CardTokenPositions: readonly ["block-start", "block-end"];
 export declare const CardLabelVariants: readonly ["token", "accent-text"];
+export declare const CardImagePaddingOptions: readonly ["default", "none"];
 export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
 export declare const defaultCardIconColor: "default";
 export declare const defaultCardCTAVariant: "text";
@@ -21,6 +22,7 @@ export type CardCTAVariant = (typeof CardCTAVariants)[number];
 export type CardTokenPosition = (typeof CardTokenPositions)[number];
 export type CardLabelVariant = (typeof CardLabelVariants)[number];
 export type CardBackgroundColor = (typeof CardBackgroundColors)[number];
+export type CardImagePadding = (typeof CardImagePaddingOptions)[number];
 type CardLeadingVisual = React.ReactElement | React.ComponentType<{
     className?: string;
 }>;
@@ -34,7 +36,7 @@ export type CardProps = {
      */
     children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardTokensProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
     /**
-     * Disable the default hover animation
+     * Disable transitions and animations within the Card
      */
     disableAnimation?: boolean;
     /**
@@ -70,10 +72,11 @@ export type CardProps = {
      */
     align?: 'start' | 'center';
 } & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
-type CardImageProps = {
+export type CardImageProps = {
     position?: 'block-start' | 'block-end';
+    padding?: CardImagePadding;
 } & ImageProps;
-declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+declare function CardImage({ className, position, padding, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
 type CardIconProps = IconProps;
 type CardTokensProps = BaseProps<HTMLDivElement> & {
     children: React.ReactNode | React.ReactNode[];

package/lib/Hero/Hero.d.ts

@@ -105,6 +105,11 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLParagraphElement>>;
+    ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.
+     * This component will be removed in a future release.
+     */
     PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
@@ -120,6 +125,10 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    /**
+     * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.
+     * This component will be removed in a future release.
+     */
     SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
@@ -136,7 +145,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     Image: React.ForwardRefExoticComponent<(Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
+        position?: import("./HeroContext").HeroMediaPosition;
+        padding?: import("./HeroContext").HeroMediaPadding;
         enableBorder?: boolean;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
@@ -149,7 +159,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         as?: "img";
         srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
     }, "ref"> | Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
+        position?: import("./HeroContext").HeroMediaPosition;
+        padding?: import("./HeroContext").HeroMediaPadding;
         enableBorder?: boolean;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
@@ -167,7 +178,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         srcSet?: undefined;
     }, "ref">) & React.RefAttributes<HTMLImageElement>>;
     Video: React.ForwardRefExoticComponent<(Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
+        position?: import("./HeroContext").HeroMediaPosition;
+        padding?: import("./HeroContext").HeroMediaPadding;
         enableBorder?: boolean;
         'data-testid'?: string;
     } & BaseProps<HTMLDivElement> & {
@@ -177,7 +189,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         posterAltText?: never;
         posterTitle?: never;
     }, "ref"> | Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
+        position?: import("./HeroContext").HeroMediaPosition;
+        padding?: import("./HeroContext").HeroMediaPadding;
         enableBorder?: boolean;
         'data-testid'?: string;
     } & BaseProps<HTMLDivElement> & {

package/lib/Hero/HeroContext.d.ts

@@ -3,10 +3,12 @@ export declare const HeroAlignOptions: readonly ["start", "center"];
 export type HeroAlign = (typeof HeroAlignOptions)[number];
 export declare const HeroVariantOptions: readonly ["default", "gridline", "gridline-expressive"];
 export type HeroVariant = (typeof HeroVariantOptions)[number];
-export declare const heroMediaPositions: readonly ["block-end", "block-end-padded", "inline-start", "inline-end", "inline-end-padded", "inline-start-padded"];
-export declare const heroMediaInlinePositions: ("inline-end" | "inline-start" | "block-end" | "block-end-padded" | "inline-end-padded" | "inline-start-padded")[];
-export type HeroMediaPositions = (typeof heroMediaPositions)[number];
-export type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number];
+export declare const HeroMediaPaddingOptions: readonly ["default", "none", "all"];
+export type HeroMediaPadding = (typeof HeroMediaPaddingOptions)[number];
+export declare const HeroMediaPositionOptions: readonly ["block-end", "inline-start", "inline-end"];
+export declare const HeroMediaInlinePositionOptions: readonly ["inline-start", "inline-end"];
+export type HeroMediaPosition = (typeof HeroMediaPositionOptions)[number];
+export type HeroMediaInlinePosition = (typeof HeroMediaInlinePositionOptions)[number];
 type HeroContextType = {
     /**
      * The active variant of the Hero component
@@ -19,7 +21,7 @@ type HeroContextType = {
     /**
      * Image position within the Hero
      */
-    imagePosition: HeroMediaPositions;
+    imagePosition: HeroMediaPosition;
     /**
      * Hero.Image is an inline media position
      */

package/lib/Hero/sub-components/HeroButtonGroup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonGroup } from '../../ButtonGroup';
+export type HeroButtonGroupProps = React.ComponentProps<typeof ButtonGroup>;
+export declare const HeroButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("../..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/Hero/sub-components/HeroImage.d.ts

@@ -1,12 +1,14 @@
 import { ImageProps } from '../../Image';
 import type { BaseProps } from '../../component-helpers';
-import { type HeroMediaPositions } from '../HeroContext';
+import { type HeroMediaPadding, type HeroMediaPosition } from '../HeroContext';
 export type HeroImageProps = {
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
 } & ImageProps & BaseProps<HTMLImageElement>;
 export declare const HeroImage: import("react").ForwardRefExoticComponent<(Omit<{
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
 } & import("react").ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
     src: string;
@@ -19,7 +21,8 @@ export declare const HeroImage: import("react").ForwardRefExoticComponent<(Omit<
     as?: "img";
     srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
 }, "ref"> | Omit<{
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
 } & import("react").ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
     src: string;

package/lib/Hero/sub-components/HeroVideo.d.ts

@@ -1,8 +1,12 @@
 import React, { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../component-helpers';
-import type { HeroMediaPositions } from '../HeroContext';
+import type { HeroMediaPadding, HeroMediaPosition } from '../HeroContext';
 type HeroVideoBaseProps = {
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    /**
+     * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.
+     */
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
     'data-testid'?: string;
 } & PropsWithChildren<BaseProps<HTMLDivElement>>;
@@ -17,7 +21,11 @@ type PosterProps = {
 };
 export type HeroVideoProps = HeroVideoBaseProps & PosterProps;
 export declare const HeroVideo: React.ForwardRefExoticComponent<(Omit<{
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    /**
+     * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.
+     */
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
     'data-testid'?: string;
 } & BaseProps<HTMLDivElement> & {
@@ -27,7 +35,11 @@ export declare const HeroVideo: React.ForwardRefExoticComponent<(Omit<{
     posterAltText?: never;
     posterTitle?: never;
 }, "ref"> | Omit<{
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    /**
+     * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.
+     */
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
     'data-testid'?: string;
 } & BaseProps<HTMLDivElement> & {

package/lib/Hero/sub-components/index.d.ts

@@ -4,6 +4,8 @@ export { HeroHeading } from './HeroHeading';
 export type { HeroHeadingProps } from './HeroHeading';
 export { HeroDescription } from './HeroDescription';
 export type { HeroDescriptionProps } from './HeroDescription';
+export { HeroButtonGroup } from './HeroButtonGroup';
+export type { HeroButtonGroupProps } from './HeroButtonGroup';
 export { HeroImage } from './HeroImage';
 export type { HeroImageProps } from './HeroImage';
 export { HeroVideo } from './HeroVideo';