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

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  transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);\n  padding: var(--base-size-32);\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.Card--align-center .Card {\n  text-align: center;\n  padding: var(--base-size-64) var(--base-size-40);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    padding: var(--base-size-64) 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  padding: var(--base-size-64) 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:not(.Card--disableAnimation):hover {\n  transform: scale3d(1.025, 1.025, 1);\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 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: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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  --actionLabelClip-duration: 400ms;\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  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--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: 0;\n  padding-block: var(--base-size-4);\n  padding-inline: 0;\n  border: var(--brand-borderWidth-thin) solid transparent;\n  border-radius: var(--brand-borderRadius-full);\n  background-color: transparent;\n  flex-shrink: 0;\n  overflow: hidden;\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__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--skew:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n  opacity: 0.85;\n}\n\n.Card__skew-bounding {\n  border-radius: var(--brand-borderRadius-medium);\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n  height: 100%;\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n  width: 650px;\n  height: 650px;\n  background-color: var(--brand-color-accent-primary);\n  filter: blur(180px);\n  border-radius: 300px;\n  opacity: 0;\n  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  mix-blend-mode: soft-light;\n  will-change: transform;\n  pointer-events: none;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: -1;\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:not(.Card--disableAnimation):hover {\n  transform: none;\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\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/* 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-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--skew:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n  opacity: 0.85;\n}\n\n.Card__skew-bounding {\n  border-radius: var(--brand-borderRadius-medium);\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n  height: 100%;\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n  width: 650px;\n  height: 650px;\n  background-color: var(--brand-color-accent-primary);\n  filter: blur(180px);\n  border-radius: 300px;\n  opacity: 0;\n  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  mix-blend-mode: soft-light;\n  will-change: transform;\n  pointer-events: none;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: -1;\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/EyebrowBanner/EyebrowBanner.module-DYeTmaU9.css

@@ -0,0 +1 @@
+.Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9{background:var(--brand-Eyebrowbanner-bgColor-rest);border:var(--brand-borderWidth-thin) solid var(--brand-Eyebrowbanner-borderColor-rest);padding:var(--brand-EyebrowBanner-spacing-inner-block) var(--brand-EyebrowBanner-spacing-inner-inline);border-radius:var(--brand-EyebrowBanner-borderRadius);align-self:flex-start;-webkit-text-decoration:none;text-decoration:none;display:inline-block}.Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9:hover{-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:2px;transition:none}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__inner___FT9Za{align-items:center;display:flex}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__headings___uqjq6{text-align:start;margin-inline-start:var(--brand-EyebrowBanner-spacing-inner-inline)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingVisual___jOHo0{display:flex}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingVisual___jOHo0 img,.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingVisual___jOHo0 picture,.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingVisual___jOHo0 svg{height:var(--base-size-44);width:auto;max-width:var(--base-size-44);max-height:var(--base-size-44)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingVisual___jOHo0 img,.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingVisual___jOHo0 picture{display:block}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__trailingVisual___GOWPn{display:flex}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__trailingVisual-icon___RR5Q9{color:var(--brand-color-text-default);fill:var(--brand-color-text-default);margin-inline-start:var(--base-size-20)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel___2iKJT{font-family:var(--brand-body-fontFamily);font-weight:var(--base-text-weight-medium);font-size:var(--brand-EyebrowBanner-label-size);letter-spacing:var(--brand-text-letterSpacing-200);background:linear-gradient(92deg, var(--brand-EyebrowBanner-leadingLabel-color-start,var(--brand-Eyebrowbanner-fgColor-default-start)) 12.09%, var(--brand-EyebrowBanner-leadingLabel-color-middle,var(--brand-Eyebrowbanner-fgColor-default-middle)) 42.58%, var(--brand-EyebrowBanner-leadingLabel-color-end,var(--brand-Eyebrowbanner-fgColor-default-end)) 84.96%);text-transform:uppercase;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;line-height:1em;display:flex}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-blue___Q75Z_{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-blue);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-blue);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-blue)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-blue-purple___u3vdi{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-blue-purple-start);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-blue-purple-end);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-blue-purple-end)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-coral___n4YIN{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-coral);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-coral);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-coral)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-green___0psyZ{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-green);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-green);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-green)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-green-blue___S87oT{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-green-blue-start);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-green-blue-start);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-green-blue-end)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-gray___Ul8s0{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-gray);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-gray);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-gray)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-indigo___RkbmO{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-indigo);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-indigo);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-indigo)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-lemon___Rt5d0{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-lemon);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-lemon);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-lemon)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-lime___mUr8N{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-lime);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-lime);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-lime)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-orange___5icAs{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-orange);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-orange);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-orange)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-pink___46hPx{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-pink);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-pink);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-pink)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-pink-blue___iU5FD{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-pink-blue-start);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-pink-blue-start);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-pink-blue-end)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-purple___hVcG_{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-purple);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-purple);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-purple)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-purple-red___sGvEM{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-purple-red-start);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-purple-red-start);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-purple-red-end)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-red___e5Zlr{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-red);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-red);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-red)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-red-orange___tNfqQ{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-red-orange-start);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-red-orange-start);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-red-orange-end)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-teal___sHwEi{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-teal);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-teal);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-teal)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-yellow___NED2T{--brand-EyebrowBanner-leadingLabel-color-start:var(--brand-Eyebrowbanner-fgColor-yellow);--brand-EyebrowBanner-leadingLabel-color-middle:var(--brand-Eyebrowbanner-fgColor-yellow);--brand-EyebrowBanner-leadingLabel-color-end:var(--brand-Eyebrowbanner-fgColor-yellow)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__heading___pV18r{color:var(--brand-Eyebrowbanner-heading-fgColor);font-size:var(--brand-EyebrowBanner-heading-size);display:block}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__subHeading___j_Pgs{color:var(--brand-Eyebrowbanner-subHeading-fgColor);font-size:var(--brand-EyebrowBanner-subHeading-size);display:block}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{width:var(--base-size-44);height:var(--base-size-44);border-radius:50%;justify-content:center;align-items:center;display:flex}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon___0DNEo svg{width:var(--base-size-20);height:var(--base-size-20)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-default___AHn0V{color:var(--brand-color-text-default)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-default___AHn0V.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-default)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-blue___4OskO{color:var(--brand-Eyebrowbanner-fgColor-blue)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-blue___4OskO.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-blue)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-coral___T_46y{color:var(--brand-Eyebrowbanner-fgColor-coral)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-coral___T_46y.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-coral)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-green____I53I{color:var(--brand-Eyebrowbanner-fgColor-green)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-green____I53I.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-green)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-gray___xzgSs{color:var(--brand-Eyebrowbanner-fgColor-gray)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-gray___xzgSs.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-gray)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-indigo___WxuK_{color:var(--brand-Eyebrowbanner-fgColor-indigo)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-indigo___WxuK_.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-indigo)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-lemon____AfWK{color:var(--brand-Eyebrowbanner-fgColor-lemon)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-lemon____AfWK.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-lemon)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-lime___dSzH6{color:var(--brand-Eyebrowbanner-fgColor-lime)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-lime___dSzH6.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-lime)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-orange___z7Hxt{color:var(--brand-Eyebrowbanner-fgColor-orange)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-orange___z7Hxt.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-orange)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-pink___MUkAV{color:var(--brand-Eyebrowbanner-fgColor-pink)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-pink___MUkAV.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-pink)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-purple___eX4cj{color:var(--brand-Eyebrowbanner-fgColor-purple)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-purple___eX4cj.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-purple)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-red____md9b{color:var(--brand-Eyebrowbanner-fgColor-red)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-red____md9b.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-red)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-teal____Mv2F{color:var(--brand-Eyebrowbanner-fgColor-teal)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-teal____Mv2F.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-teal)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-yellow___oVyB6{color:var(--brand-Eyebrowbanner-fgColor-yellow)}.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-yellow___oVyB6.Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE{background-color:var(--brand-Eyebrowbanner-icon-background-yellow)}@media (prefers-reduced-motion:reduce){.Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9,.Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9:before,.Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9:after,.Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/EyebrowBanner/EyebrowBanner.module.js

@@ -1,4 +1,4 @@
-import './EyebrowBanner.module-C8hfGfYx.css';var e = {
+import './EyebrowBanner.module-DYeTmaU9.css';var e = {
 	EyebrowBanner: "Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9",
 	EyebrowBanner__inner: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__inner___FT9Za",
 	EyebrowBanner__headings: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__headings___uqjq6",

package/esm/EyebrowBanner/EyebrowBanner.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"EyebrowBanner.module.js","names":[],"sources":["../../src/EyebrowBanner/EyebrowBanner.module.css"],"sourcesContent":[".EyebrowBanner {\n  display: inline-block;\n  align-self: flex-start;\n  text-decoration: none;\n  background: var(--brand-Eyebrowbanner-bgColor-rest);\n  border: var(--brand-borderWidth-thin) solid var(--brand-Eyebrowbanner-borderColor-rest);\n  padding: var(--brand-EyebrowBanner-spacing-inner-block) var(--brand-EyebrowBanner-spacing-inner-inline);\n  border-radius: var(--brand-EyebrowBanner-borderRadius);\n}\n\n.EyebrowBanner:hover {\n  text-decoration: none !important; /* Required to override dotcom default */\n}\n\n.EyebrowBanner:focus-visible {\n  transition: none;\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: 2px;\n}\n\n.EyebrowBanner__inner {\n  display: flex;\n  align-items: center;\n}\n\n.EyebrowBanner__headings {\n  margin-inline-start: var(--brand-EyebrowBanner-spacing-inner-inline);\n  text-align: start;\n}\n\n.EyebrowBanner__leadingVisual {\n  display: flex;\n}\n\n.EyebrowBanner__leadingVisual img,\n.EyebrowBanner__leadingVisual picture,\n.EyebrowBanner__leadingVisual svg {\n  height: var(--base-size-44);\n  width: auto;\n  max-width: var(--base-size-44);\n  max-height: var(--base-size-44);\n}\n\n.EyebrowBanner__trailingVisual {\n  display: flex;\n}\n\n.EyebrowBanner__trailingVisual-icon {\n  margin-inline-start: var(--base-size-20);\n  color: var(--brand-color-text-default);\n}\n\n.EyebrowBanner__trailingVisual-icon {\n  fill: var(--brand-color-text-default);\n}\n\n.EyebrowBanner__leadingLabel {\n  display: flex;\n  font-family: var(--brand-body-fontFamily);\n  font-weight: var(--base-text-weight-medium);\n  font-size: var(--brand-EyebrowBanner-label-size);\n  line-height: 1em; /* for optical alignment */\n  letter-spacing: var(--brand-text-letterSpacing-200);\n  background: linear-gradient(\n    92deg,\n    var(--brand-EyebrowBanner-leadingLabel-color-start, var(--brand-Eyebrowbanner-fgColor-default-start)) 12.09%,\n    var(--brand-EyebrowBanner-leadingLabel-color-middle, var(--brand-Eyebrowbanner-fgColor-default-middle)) 42.58%,\n    var(--brand-EyebrowBanner-leadingLabel-color-end, var(--brand-Eyebrowbanner-fgColor-default-end)) 84.96%\n  );\n  text-transform: uppercase;\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.EyebrowBanner__leadingLabel--color-blue {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-blue);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-blue);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-blue);\n}\n\n.EyebrowBanner__leadingLabel--color-blue-purple {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-blue-purple-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-blue-purple-end);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-blue-purple-end);\n}\n\n.EyebrowBanner__leadingLabel--color-coral {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-coral);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-coral);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-coral);\n}\n\n.EyebrowBanner__leadingLabel--color-green {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-green);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-green);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-green);\n}\n\n.EyebrowBanner__leadingLabel--color-green-blue {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-green-blue-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-green-blue-start);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-green-blue-end);\n}\n\n.EyebrowBanner__leadingLabel--color-gray {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-gray);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-gray);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-gray);\n}\n\n.EyebrowBanner__leadingLabel--color-indigo {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-indigo);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-indigo);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-indigo);\n}\n\n.EyebrowBanner__leadingLabel--color-lemon {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-lemon);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-lemon);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-lemon);\n}\n\n.EyebrowBanner__leadingLabel--color-lime {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-lime);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-lime);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-lime);\n}\n\n.EyebrowBanner__leadingLabel--color-orange {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-orange);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-orange);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-orange);\n}\n\n.EyebrowBanner__leadingLabel--color-pink {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-pink);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-pink);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-pink);\n}\n\n.EyebrowBanner__leadingLabel--color-pink-blue {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-pink-blue-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-pink-blue-start);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-pink-blue-end);\n}\n\n.EyebrowBanner__leadingLabel--color-purple {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-purple);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-purple);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-purple);\n}\n\n.EyebrowBanner__leadingLabel--color-purple-red {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-purple-red-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-purple-red-start);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-purple-red-end);\n}\n\n.EyebrowBanner__leadingLabel--color-red {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-red);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-red);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-red);\n}\n\n.EyebrowBanner__leadingLabel--color-red-orange {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-red-orange-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-red-orange-start);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-red-orange-end);\n}\n\n.EyebrowBanner__leadingLabel--color-teal {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-teal);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-teal);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-teal);\n}\n\n.EyebrowBanner__leadingLabel--color-yellow {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-yellow);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-yellow);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-yellow);\n}\n\n.EyebrowBanner__heading {\n  display: block;\n  color: var(--brand-Eyebrowbanner-heading-fgColor);\n  font-size: var(--brand-EyebrowBanner-heading-size);\n}\n\n.EyebrowBanner__subHeading {\n  display: block;\n  color: var(--brand-Eyebrowbanner-subHeading-fgColor);\n  font-size: var(--brand-EyebrowBanner-subHeading-size);\n}\n\n.EyebrowBanner__icon--badge {\n  width: var(--base-size-44);\n  height: var(--base-size-44);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.EyebrowBanner__icon svg {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n.EyebrowBanner__icon--color-default {\n  color: var(--brand-color-text-default);\n}\n\n.EyebrowBanner__icon--color-default.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-default);\n}\n\n.EyebrowBanner__icon--color-blue {\n  color: var(--brand-Eyebrowbanner-fgColor-blue);\n}\n\n.EyebrowBanner__icon--color-blue.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-blue);\n}\n\n.EyebrowBanner__icon--color-coral {\n  color: var(--brand-Eyebrowbanner-fgColor-coral);\n}\n\n.EyebrowBanner__icon--color-coral.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-coral);\n}\n\n.EyebrowBanner__icon--color-green {\n  color: var(--brand-Eyebrowbanner-fgColor-green);\n}\n\n.EyebrowBanner__icon--color-green.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-green);\n}\n\n.EyebrowBanner__icon--color-gray {\n  color: var(--brand-Eyebrowbanner-fgColor-gray);\n}\n\n.EyebrowBanner__icon--color-gray.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-gray);\n}\n\n.EyebrowBanner__icon--color-indigo {\n  color: var(--brand-Eyebrowbanner-fgColor-indigo);\n}\n\n.EyebrowBanner__icon--color-indigo.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-indigo);\n}\n\n.EyebrowBanner__icon--color-lemon {\n  color: var(--brand-Eyebrowbanner-fgColor-lemon);\n}\n\n.EyebrowBanner__icon--color-lemon.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-lemon);\n}\n\n.EyebrowBanner__icon--color-lime {\n  color: var(--brand-Eyebrowbanner-fgColor-lime);\n}\n\n.EyebrowBanner__icon--color-lime.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-lime);\n}\n\n.EyebrowBanner__icon--color-orange {\n  color: var(--brand-Eyebrowbanner-fgColor-orange);\n}\n\n.EyebrowBanner__icon--color-orange.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-orange);\n}\n\n.EyebrowBanner__icon--color-pink {\n  color: var(--brand-Eyebrowbanner-fgColor-pink);\n}\n\n.EyebrowBanner__icon--color-pink.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-pink);\n}\n\n.EyebrowBanner__icon--color-purple {\n  color: var(--brand-Eyebrowbanner-fgColor-purple);\n}\n\n.EyebrowBanner__icon--color-purple.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-purple);\n}\n\n.EyebrowBanner__icon--color-red {\n  color: var(--brand-Eyebrowbanner-fgColor-red);\n}\n\n.EyebrowBanner__icon--color-red.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-red);\n}\n\n.EyebrowBanner__icon--color-teal {\n  color: var(--brand-Eyebrowbanner-fgColor-teal);\n}\n\n.EyebrowBanner__icon--color-teal.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-teal);\n}\n\n.EyebrowBanner__icon--color-yellow {\n  color: var(--brand-Eyebrowbanner-fgColor-yellow);\n}\n\n.EyebrowBanner__icon--color-yellow.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-yellow);\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  .EyebrowBanner,\n  .EyebrowBanner::before,\n  .EyebrowBanner::after,\n  .EyebrowBanner * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"EyebrowBanner.module.js","names":[],"sources":["../../src/EyebrowBanner/EyebrowBanner.module.css"],"sourcesContent":[".EyebrowBanner {\n  display: inline-block;\n  align-self: flex-start;\n  text-decoration: none;\n  background: var(--brand-Eyebrowbanner-bgColor-rest);\n  border: var(--brand-borderWidth-thin) solid var(--brand-Eyebrowbanner-borderColor-rest);\n  padding: var(--brand-EyebrowBanner-spacing-inner-block) var(--brand-EyebrowBanner-spacing-inner-inline);\n  border-radius: var(--brand-EyebrowBanner-borderRadius);\n}\n\n.EyebrowBanner:hover {\n  text-decoration: none !important; /* Required to override dotcom default */\n}\n\n.EyebrowBanner:focus-visible {\n  transition: none;\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: 2px;\n}\n\n.EyebrowBanner__inner {\n  display: flex;\n  align-items: center;\n}\n\n.EyebrowBanner__headings {\n  margin-inline-start: var(--brand-EyebrowBanner-spacing-inner-inline);\n  text-align: start;\n}\n\n.EyebrowBanner__leadingVisual {\n  display: flex;\n}\n\n.EyebrowBanner__leadingVisual img,\n.EyebrowBanner__leadingVisual picture,\n.EyebrowBanner__leadingVisual svg {\n  height: var(--base-size-44);\n  width: auto;\n  max-width: var(--base-size-44);\n  max-height: var(--base-size-44);\n}\n\n.EyebrowBanner__leadingVisual img,\n.EyebrowBanner__leadingVisual picture {\n  display: block;\n}\n\n.EyebrowBanner__trailingVisual {\n  display: flex;\n}\n\n.EyebrowBanner__trailingVisual-icon {\n  margin-inline-start: var(--base-size-20);\n  color: var(--brand-color-text-default);\n}\n\n.EyebrowBanner__trailingVisual-icon {\n  fill: var(--brand-color-text-default);\n}\n\n.EyebrowBanner__leadingLabel {\n  display: flex;\n  font-family: var(--brand-body-fontFamily);\n  font-weight: var(--base-text-weight-medium);\n  font-size: var(--brand-EyebrowBanner-label-size);\n  line-height: 1em; /* for optical alignment */\n  letter-spacing: var(--brand-text-letterSpacing-200);\n  background: linear-gradient(\n    92deg,\n    var(--brand-EyebrowBanner-leadingLabel-color-start, var(--brand-Eyebrowbanner-fgColor-default-start)) 12.09%,\n    var(--brand-EyebrowBanner-leadingLabel-color-middle, var(--brand-Eyebrowbanner-fgColor-default-middle)) 42.58%,\n    var(--brand-EyebrowBanner-leadingLabel-color-end, var(--brand-Eyebrowbanner-fgColor-default-end)) 84.96%\n  );\n  text-transform: uppercase;\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.EyebrowBanner__leadingLabel--color-blue {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-blue);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-blue);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-blue);\n}\n\n.EyebrowBanner__leadingLabel--color-blue-purple {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-blue-purple-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-blue-purple-end);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-blue-purple-end);\n}\n\n.EyebrowBanner__leadingLabel--color-coral {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-coral);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-coral);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-coral);\n}\n\n.EyebrowBanner__leadingLabel--color-green {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-green);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-green);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-green);\n}\n\n.EyebrowBanner__leadingLabel--color-green-blue {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-green-blue-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-green-blue-start);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-green-blue-end);\n}\n\n.EyebrowBanner__leadingLabel--color-gray {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-gray);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-gray);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-gray);\n}\n\n.EyebrowBanner__leadingLabel--color-indigo {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-indigo);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-indigo);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-indigo);\n}\n\n.EyebrowBanner__leadingLabel--color-lemon {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-lemon);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-lemon);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-lemon);\n}\n\n.EyebrowBanner__leadingLabel--color-lime {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-lime);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-lime);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-lime);\n}\n\n.EyebrowBanner__leadingLabel--color-orange {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-orange);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-orange);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-orange);\n}\n\n.EyebrowBanner__leadingLabel--color-pink {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-pink);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-pink);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-pink);\n}\n\n.EyebrowBanner__leadingLabel--color-pink-blue {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-pink-blue-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-pink-blue-start);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-pink-blue-end);\n}\n\n.EyebrowBanner__leadingLabel--color-purple {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-purple);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-purple);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-purple);\n}\n\n.EyebrowBanner__leadingLabel--color-purple-red {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-purple-red-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-purple-red-start);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-purple-red-end);\n}\n\n.EyebrowBanner__leadingLabel--color-red {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-red);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-red);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-red);\n}\n\n.EyebrowBanner__leadingLabel--color-red-orange {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-red-orange-start);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-red-orange-start);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-red-orange-end);\n}\n\n.EyebrowBanner__leadingLabel--color-teal {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-teal);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-teal);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-teal);\n}\n\n.EyebrowBanner__leadingLabel--color-yellow {\n  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-yellow);\n  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-yellow);\n  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-yellow);\n}\n\n.EyebrowBanner__heading {\n  display: block;\n  color: var(--brand-Eyebrowbanner-heading-fgColor);\n  font-size: var(--brand-EyebrowBanner-heading-size);\n}\n\n.EyebrowBanner__subHeading {\n  display: block;\n  color: var(--brand-Eyebrowbanner-subHeading-fgColor);\n  font-size: var(--brand-EyebrowBanner-subHeading-size);\n}\n\n.EyebrowBanner__icon--badge {\n  width: var(--base-size-44);\n  height: var(--base-size-44);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.EyebrowBanner__icon svg {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n.EyebrowBanner__icon--color-default {\n  color: var(--brand-color-text-default);\n}\n\n.EyebrowBanner__icon--color-default.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-default);\n}\n\n.EyebrowBanner__icon--color-blue {\n  color: var(--brand-Eyebrowbanner-fgColor-blue);\n}\n\n.EyebrowBanner__icon--color-blue.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-blue);\n}\n\n.EyebrowBanner__icon--color-coral {\n  color: var(--brand-Eyebrowbanner-fgColor-coral);\n}\n\n.EyebrowBanner__icon--color-coral.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-coral);\n}\n\n.EyebrowBanner__icon--color-green {\n  color: var(--brand-Eyebrowbanner-fgColor-green);\n}\n\n.EyebrowBanner__icon--color-green.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-green);\n}\n\n.EyebrowBanner__icon--color-gray {\n  color: var(--brand-Eyebrowbanner-fgColor-gray);\n}\n\n.EyebrowBanner__icon--color-gray.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-gray);\n}\n\n.EyebrowBanner__icon--color-indigo {\n  color: var(--brand-Eyebrowbanner-fgColor-indigo);\n}\n\n.EyebrowBanner__icon--color-indigo.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-indigo);\n}\n\n.EyebrowBanner__icon--color-lemon {\n  color: var(--brand-Eyebrowbanner-fgColor-lemon);\n}\n\n.EyebrowBanner__icon--color-lemon.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-lemon);\n}\n\n.EyebrowBanner__icon--color-lime {\n  color: var(--brand-Eyebrowbanner-fgColor-lime);\n}\n\n.EyebrowBanner__icon--color-lime.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-lime);\n}\n\n.EyebrowBanner__icon--color-orange {\n  color: var(--brand-Eyebrowbanner-fgColor-orange);\n}\n\n.EyebrowBanner__icon--color-orange.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-orange);\n}\n\n.EyebrowBanner__icon--color-pink {\n  color: var(--brand-Eyebrowbanner-fgColor-pink);\n}\n\n.EyebrowBanner__icon--color-pink.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-pink);\n}\n\n.EyebrowBanner__icon--color-purple {\n  color: var(--brand-Eyebrowbanner-fgColor-purple);\n}\n\n.EyebrowBanner__icon--color-purple.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-purple);\n}\n\n.EyebrowBanner__icon--color-red {\n  color: var(--brand-Eyebrowbanner-fgColor-red);\n}\n\n.EyebrowBanner__icon--color-red.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-red);\n}\n\n.EyebrowBanner__icon--color-teal {\n  color: var(--brand-Eyebrowbanner-fgColor-teal);\n}\n\n.EyebrowBanner__icon--color-teal.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-teal);\n}\n\n.EyebrowBanner__icon--color-yellow {\n  color: var(--brand-Eyebrowbanner-fgColor-yellow);\n}\n\n.EyebrowBanner__icon--color-yellow.EyebrowBanner__icon--badge {\n  background-color: var(--brand-Eyebrowbanner-icon-background-yellow);\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  .EyebrowBanner,\n  .EyebrowBanner::before,\n  .EyebrowBanner::after,\n  .EyebrowBanner * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/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/esm/Hero/Hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,KAAK,EAA2B,SAAS,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAanF;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAkBlG,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1D,oBAAoB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AA8QD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUf,CAAA"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,KAAK,EAA0B,SAAS,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAclF;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAkBlG,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1D,oBAAoB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAqTD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOH,CAAA"}

package/esm/Hero/Hero.js

@@ -1,23 +1,24 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { Grid as t } from "../Grid/Grid.js";
-import { AnimationProvider as ee } from "../animation/AnimationProvider/AnimationProvider.js";
-import { Stack as n } from "../Stack/Stack.js";
-import { Box as te } from "../Box/Box.js";
-import { HeroContext as ne, heroMediaInlinePositions as r } from "./HeroContext.js";
-import i from "./Hero.module.js";
-import { HeroLabel as a } from "./sub-components/HeroLabel.js";
-import { HeroHeading as o } from "./sub-components/HeroHeading.js";
-import { HeroDescription as s } from "./sub-components/HeroDescription.js";
-import { HeroImage as c } from "./sub-components/HeroImage.js";
-import { HeroVideo as l } from "./sub-components/HeroVideo.js";
-import { HeroEyebrow as u } from "./sub-components/HeroEyebrow.js";
-import { HeroPrimaryAction as d } from "./sub-components/HeroPrimaryAction.js";
-import { HeroSecondaryAction as f } from "./sub-components/HeroSecondaryAction.js";
+import { AnimationProvider as n } from "../animation/AnimationProvider/AnimationProvider.js";
+import { Stack as r } from "../Stack/Stack.js";
+import { Box as ee } from "../Box/Box.js";
+import { HeroContext as i, HeroMediaInlinePositionOptions as a } from "./HeroContext.js";
+import o from "./Hero.module.js";
+import { HeroLabel as s } from "./sub-components/HeroLabel.js";
+import { HeroHeading as c } from "./sub-components/HeroHeading.js";
+import { HeroDescription as l } from "./sub-components/HeroDescription.js";
+import { HeroButtonGroup as u } from "./sub-components/HeroButtonGroup.js";
+import { HeroImage as d } from "./sub-components/HeroImage.js";
+import { HeroVideo as f } from "./sub-components/HeroVideo.js";
+import { HeroEyebrow as p } from "./sub-components/HeroEyebrow.js";
+import { HeroPrimaryAction as m } from "./sub-components/HeroPrimaryAction.js";
+import { HeroSecondaryAction as h } from "./sub-components/HeroSecondaryAction.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/hero/base-BDi-g8vJ.css';/* empty css                                                                                     */
-import p, { Fragment as m, forwardRef as h, useMemo as g } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import g, { Fragment as te, forwardRef as _, useMemo as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/Hero/Hero.tsx
-var b = {
+var S = {
 	root: "Hero",
 	get video() {
 		return `${this.root}-video`;
@@ -28,10 +29,11 @@ var b = {
 	get imageWrapper() {
 		return `${this.root}-imageWrapper`;
 	}
-}, x = h(({ className: h, align: x = "start", children: S, imageContainerClassName: C, imageContainerStyle: w, imageContainerRef: T, imageBackgroundColor: E, variant: D = "default", trailingComponent: O, enableAnimation: k = !1, "data-testid": A, ...j }, M) => {
-	let { HeroActions: N, HeroChildren: re, HeroImageChild: P, HeroVideoChild: F, HeroHeaderChildren: I, HeroDescriptionChild: L } = g(() => {
-		let e = p.Children.toArray(S).reduce((e, t) => (p.isValidElement(t) && (t.type === d || t.type === f ? e.HeroActions.push(t) : t.type === c ? e.HeroImageChild = t : t.type === l ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === a || t.type === u || t.type === o ? e.HeroHeaderChildren.push(t) : t.type === s && (e.HeroDescriptionChild = t))), e), {
+}, C = _(({ className: _, align: C = "start", children: w, imageContainerClassName: T, imageContainerStyle: E, imageContainerRef: D, imageBackgroundColor: O, variant: k = "default", trailingComponent: A, enableAnimation: j = !1, "data-testid": ne, ...M }, N) => {
+	let { HeroActions: P, HeroButtonGroupChild: re, HeroChildren: ie, HeroImageChild: F, HeroVideoChild: I, HeroHeaderChildren: L, HeroDescriptionChild: R } = v(() => {
+		let e = g.Children.toArray(w).reduce((e, t) => (g.isValidElement(t) && (t.type === m || t.type === h ? e.HeroActions.push(t) : t.type === u ? e.HeroButtonGroupChild = t : t.type === d ? e.HeroImageChild = t : t.type === f ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === s || t.type === p || t.type === c ? e.HeroHeaderChildren.push(t) : t.type === l && (e.HeroDescriptionChild = t))), e), {
 			HeroActions: [],
+			HeroButtonGroupChild: void 0,
 			HeroChildren: [],
 			HeroImageChild: void 0,
 			HeroVideoChild: void 0,
@@ -39,138 +41,141 @@ var b = {
 			HeroDescriptionChild: void 0
 		});
 		return e.HeroImageChild && e.HeroVideoChild && (e.HeroVideoChild = void 0), e;
-	}, [S]), R = P?.props.position || F?.props.position, z = D === "gridline-expressive" && R?.startsWith("inline-") ? (process.env.NODE_ENV !== "production" && console.warn(`Hero: "gridline-expressive" variant does not support "${R}" position. Defaulting to "block-end".`), "block-end") : R || "block-end", ie = P?.props.enableBorder ?? F?.props.enableBorder ?? !0, B = r.includes(z), V = B ? z : void 0, H = P || F, U = D === "gridline", W = D === "gridline-expressive", G = z === "block-end" || z === "block-end-padded", K = z === "block-end-padded", q = W && x === "center", J = q ? "start" : x;
+	}, [w]), z = F?.props.position || I?.props.position, B = k === "gridline-expressive" && z?.startsWith("inline-") ? (process.env.NODE_ENV !== "production" && console.warn(`Hero: "gridline-expressive" variant does not support "${z}" position. Defaulting to "block-end".`), "block-end") : z || "block-end", ae = F?.props.enableBorder ?? I?.props.enableBorder ?? !0, V = F?.props.padding ?? I?.props.padding ?? "default", H = a.includes(B), U = F || I, W = k === "gridline", G = k === "gridline-expressive", K = B === "block-end";
+	k === "default" && V !== "default" && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(`Hero: media padding is only supported by the "gridline" and "gridline-expressive" variants; ignoring padding="${V}".`);
+	let q = G && C === "center", J = q ? "start" : C;
 	q && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.");
-	let ae = (U || W) && k ? ee : m, oe = (U || W) && k ? {
+	let oe = (W || G) && j ? n : te, se = (W || G) && j ? {
 		autoStaggerChildren: !1,
 		animationTrigger: "immediate"
-	} : {}, Y = (U || W) && G, X = U && B, se = P ? i["Hero--layout-image"] : i["Hero--layout-default"], Z = z === "inline-start" || z === "inline-start-padded", Q = (e) => O && /* @__PURE__ */ v(te, {
+	} : {}, Y = (W || G) && K, X = W && H, ce = F ? o["Hero--layout-image"] : o["Hero--layout-default"], Z = B === "inline-start", Q = (e) => A && /* @__PURE__ */ b(ee, {
 		animate: e ? {
 			variant: "slide-in-up",
 			delay: 1e3,
 			duration: 1e3
 		} : void 0,
-		children: /* @__PURE__ */ v("div", {
-			className: i["Hero-trailing"],
-			children: /* @__PURE__ */ v(O, {})
+		children: /* @__PURE__ */ b("div", {
+			className: o["Hero-trailing"],
+			children: /* @__PURE__ */ b(A, {})
 		})
-	}), $ = () => N.length > 0 && /* @__PURE__ */ v("div", {
-		className: i["Hero-actions"],
-		children: N
-	});
-	return /* @__PURE__ */ v(ae, {
-		...oe,
-		children: /* @__PURE__ */ v(ne.Provider, {
+	}), $ = () => /* @__PURE__ */ x(y, { children: [re, P.length > 0 && /* @__PURE__ */ b("div", {
+		className: o["Hero-actions"],
+		children: P
+	})] });
+	return /* @__PURE__ */ b(oe, {
+		...se,
+		children: /* @__PURE__ */ b(i.Provider, {
 			value: {
-				imagePosition: z,
-				variant: D,
+				imagePosition: B,
+				variant: k,
 				align: J,
-				hasInlineMedia: B,
-				enableAnimation: k
+				hasInlineMedia: H,
+				enableAnimation: j
 			},
-			children: /* @__PURE__ */ y("section", {
-				className: e(i.Hero, i[`Hero--variant-${D}`], !B && i[`Hero--align-${J}`], se, (P || F) && i[`Hero--image-pos-${z}`], (P || F) && B && i["Hero--image-pos-inline"], X && i["Hero--variant-inline-gridline"], h),
-				ref: M,
+			children: /* @__PURE__ */ x("section", {
+				className: e(o.Hero, o[`Hero--variant-${k}`], !H && o[`Hero--align-${J}`], ce, (F || I) && o[`Hero--image-pos-${B}`], (F || I) && H && o["Hero--image-pos-inline"], X && o["Hero--variant-inline-gridline"], _),
+				ref: N,
 				"aria-labelledby": "hero-section-brand-heading",
-				"data-testid": A || b.root,
-				...j,
-				children: [/* @__PURE__ */ v(t, {
+				"data-testid": ne || S.root,
+				...M,
+				children: [/* @__PURE__ */ b(t, {
 					fullWidth: !Y && !X,
-					"data-testid": b.grid,
-					className: e(i["Hero-grid"], i[`Hero-grid--${z}`], Y && !W && i["Hero-grid--contained"], X && i["Hero-grid--bordered-inline"], W && i["Hero-grid--expressive"]),
-					children: W ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(t.Column, {
+					"data-testid": S.grid,
+					className: e(o["Hero-grid"], o[`Hero-grid--${B}`], Y && !G && o["Hero-grid--contained"], X && o["Hero-grid--bordered-inline"], G && o["Hero-grid--expressive"]),
+					children: G ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(t.Column, {
 						span: {
 							medium: 12,
-							large: L ? 7 : 6
+							large: R ? 7 : 6
 						},
-						className: i["Hero-expressive-header-column"],
-						children: /* @__PURE__ */ v(n, {
+						className: o["Hero-expressive-header-column"],
+						children: /* @__PURE__ */ b(r, {
 							direction: "vertical",
 							gap: "none",
 							padding: "none",
 							alignItems: "flex-start",
-							children: I
+							children: L
 						})
-					}), /* @__PURE__ */ v(t.Column, {
+					}), /* @__PURE__ */ b(t.Column, {
 						span: {
 							medium: 12,
-							large: L ? 5 : 6
+							large: R ? 5 : 6
 						},
-						className: i["Hero-expressive-body-column"],
-						children: /* @__PURE__ */ y(n, {
+						className: o["Hero-expressive-body-column"],
+						children: /* @__PURE__ */ x(r, {
 							direction: "vertical",
 							gap: "none",
 							padding: "none",
 							alignItems: "flex-start",
 							children: [
-								L,
+								R,
 								$(),
-								Q(k)
+								Q(j)
 							]
 						})
-					})] }) : /* @__PURE__ */ y(_, { children: [
-						Z && H && !Y && /* @__PURE__ */ v(t.Column, {
-							ref: T,
+					})] }) : /* @__PURE__ */ x(y, { children: [
+						Z && U && !Y && /* @__PURE__ */ b(t.Column, {
+							ref: D,
 							span: { large: 6 },
-							className: e(E && i[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && i["Hero-imageContainer--inline-bg-padded"], X && i["Hero-imageContainer--inline-bordered"]),
-							children: /* @__PURE__ */ v("div", {
-								className: e(i["Hero-mediaContainer"], C),
-								style: w,
-								children: H
+							className: e(O && V !== "none" && o[`Hero-imageContainer--bg-${O}`], X && V === "all" && o["Hero-imageContainer--inline-padding-all"], X && V === "none" && o["Hero-imageContainer--inline-padding-none"], X && o["Hero-imageContainer--inline-bordered"]),
+							children: /* @__PURE__ */ b("div", {
+								className: e(o["Hero-mediaContainer"], T),
+								style: E,
+								children: U
 							})
 						}),
-						/* @__PURE__ */ v(t.Column, {
-							span: { large: H && B ? 6 : 12 },
-							children: /* @__PURE__ */ y(n, {
-								className: e(X && i["Hero-text-column--inline-gridline"], X && i["Hero-contentColumn--bordered-inline"]),
+						/* @__PURE__ */ b(t.Column, {
+							span: { large: U && H ? 6 : 12 },
+							children: /* @__PURE__ */ x(r, {
+								className: e(X && o["Hero-text-column--inline-gridline"], X && o["Hero-contentColumn--bordered-inline"]),
 								direction: "vertical",
 								gap: "none",
 								padding: "none",
-								alignItems: B || J === "start" ? "flex-start" : "center",
-								justifyContent: B ? void 0 : J === "start" ? "flex-start" : "center",
+								alignItems: H || J === "start" ? "flex-start" : "center",
+								justifyContent: H ? void 0 : J === "start" ? "flex-start" : "center",
 								children: [
-									re,
+									ie,
 									$(),
-									Q(U && k)
+									Q(W && j)
 								]
 							})
 						}),
-						!Z && H && !Y && /* @__PURE__ */ v(t.Column, {
-							ref: T,
-							span: { large: B ? 6 : 12 },
-							className: e(E && i[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && i["Hero-imageContainer--inline-bg-padded"], X && i["Hero-imageContainer--inline-bordered"]),
-							children: /* @__PURE__ */ v("div", {
-								className: e(i["Hero-mediaContainer"], C),
-								style: w,
-								children: H
+						!Z && U && !Y && /* @__PURE__ */ b(t.Column, {
+							ref: D,
+							span: { large: H ? 6 : 12 },
+							className: e(O && V !== "none" && o[`Hero-imageContainer--bg-${O}`], X && V === "all" && o["Hero-imageContainer--inline-padding-all"], X && V === "none" && o["Hero-imageContainer--inline-padding-none"], X && o["Hero-imageContainer--inline-bordered"]),
+							children: /* @__PURE__ */ b("div", {
+								className: e(o["Hero-mediaContainer"], T),
+								style: E,
+								children: U
 							})
 						})
 					] })
-				}), H && Y && /* @__PURE__ */ v("div", {
-					ref: T,
-					"data-testid": b.imageWrapper,
-					className: e(i["Hero-imageWrapper"], K && i["Hero-imageWrapper--block-end-padded"], C, E && i[`Hero-imageWrapper--bg-${E}`]),
-					style: w,
-					children: /* @__PURE__ */ v("div", {
-						className: e(i["Hero-imageWrapper-inner"], K && i["Hero-imageWrapper-inner--padded"], ie && i["Hero-imageWrapper-inner--with-gridline"]),
-						children: H
+				}), U && Y && /* @__PURE__ */ b("div", {
+					ref: D,
+					"data-testid": S.imageWrapper,
+					className: e(o["Hero-imageWrapper"], T, O && V !== "none" && o[`Hero-imageWrapper--bg-${O}`], V === "none" && o["Hero-imageWrapper--padding-none"]),
+					style: E,
+					children: /* @__PURE__ */ b("div", {
+						className: e(o["Hero-imageWrapper-inner"], V === "all" && o["Hero-imageWrapper-inner--padding-all"], V === "none" && o["Hero-imageWrapper-inner--padding-none"], ae && o["Hero-imageWrapper-inner--with-gridline"]),
+						children: U
 					})
 				})]
 			})
 		})
 	});
-}), S = Object.assign(x, {
-	Heading: o,
-	Description: s,
-	PrimaryAction: d,
-	SecondaryAction: f,
-	Image: c,
-	Video: l,
-	Label: a,
-	Eyebrow: u,
-	testIds: b
+}), w = Object.assign(C, {
+	Heading: c,
+	Description: l,
+	ButtonGroup: u,
+	PrimaryAction: m,
+	SecondaryAction: h,
+	Image: d,
+	Video: f,
+	Label: s,
+	Eyebrow: p,
+	testIds: S
 });
 //#endregion
-export { S as Hero };
+export { w as Hero };
 
 //# sourceMappingURL=Hero.js.map