@primer/react-brand 0.72.0-rc.44ea78b6 → 0.72.0-rc.4db5fc89

package/esm/Hero/Hero.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n  display: flex;\n  flex-direction: column;\n}\n\n.Hero--variant-default {\n  padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n  align-items: flex-start;\n  text-align: left;\n}\n\n.Hero--align-center {\n  justify-items: center;\n  align-items: center;\n  text-align: center;\n}\n\n.Hero-grid {\n  --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32);\n  background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed */\n}\n\n/* Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width.  */\n@container (min-width: 1280px) {\n  .Hero-grid--contained {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n  --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-grid--contained {\n    padding: var(--base-size-64);\n  }\n\n  .Hero-grid--block-end {\n    --brand-Grid-spacing-row: var(--base-size-80);\n  }\n}\n\n.Hero--align-center .Hero-actions {\n  justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.Hero-image {\n  border-radius: var(--brand-borderRadius-medium);\n  width: 100%;\n}\n\n.Hero-mediaContainer {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n  padding: var(--base-size-32);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n  background-color: var(--brand-color-canvas-subtle);\n  display: flex;\n  align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-imageContainer--inline-bordered {\n    min-height: calc(600px - var(--base-size-24));\n  }\n\n  .Hero-imageWrapper--bg-subtle {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero-imageContainer--inline-bg-padded {\n    padding: var(--base-size-64);\n  }\n}\n\n.Hero--variant-gridline {\n  container-type: inline-size;\n  width: 100%;\n}\n\n/* Shared media styles for images and videos */\n.Hero--variant-gridline .Hero-media {\n  max-width: 1176px;\n  margin-inline: auto;\n  display: block;\n  overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/* Applied directly to video/iframe elements for block-end position */\n.Hero-media-item--block-end {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n  padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero--variant-gridline .Hero-imageWrapper-inner {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n    padding: var(--base-size-64);\n  }\n}\n\n/* GridLine variant with inline (side-by-side) layout */\n.Hero-grid--bordered-inline {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-grid--bordered-inline {\n    min-height: 440px;\n  }\n}\n\n@container (min-width: 1280px) {\n  .Hero-grid--bordered-inline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/* Text column styling for gridline inline positions */\n.Hero-contentColumn--bordered-inline {\n  padding: var(--base-size-32);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-contentColumn--bordered-inline {\n    padding: var(--base-size-64);\n  }\n}\n\n/* Media styling for gridline inline positions */\n\n/* Edge-to-edge inline media (no padding) - remove border radius */\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n  border-radius: 0;\n}\n\n/* Applied directly to video/iframe elements for inline position */\n.Hero-media-item--inline {\n  border-radius: 0;\n}\n\n/* Padded inline media - constrain size and center */\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n  max-width: 100%;\n  height: auto;\n  align-self: center;\n}\n\n/* Image column styling now handled by .Hero-imageContainer--inline-bordered */\n\n.Hero-video {\n  width: 100%;\n}\n\n/* Base styles for video/iframe media elements */\n.Hero-media-item {\n  width: 100%;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  margin-block-end: calc(var(--base-size-16) - var(--base-size-2));\n  display: flex;\n  align-items: center;\n}\n\n.Hero-heading {\n  margin: 0;\n  max-width: 924px;\n}\n\n.Hero-heading b {\n  color: var(--brand-color-accent-primary);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n  max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n  height: 100%;\n}\n\n.Hero-description {\n  margin: var(--base-size-24) 0 0;\n  max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n  padding-block-start: var(--base-size-24);\n  margin-block-start: auto;\n}\n\n.Hero-actions {\n  margin-block-start: var(--base-size-28);\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n  align-items: stretch;\n  gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n  margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n  margin-block-end: var(--base-size-32);\n}\n\n/* Small breakpoint and up */\n@media screen and (min-width: 34rem) {\n  .Hero--variant-default {\n    padding: var(--brand-Hero-regular-padding);\n  }\n}\n\n.Hero-video-poster-button {\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: block;\n  height: 100%;\n  position: relative;\n  line-height: 0;\n  font-size: 0;\n  width: 100%;\n}\n\n.Hero-video-poster-image {\n  display: block;\n  height: auto;\n  width: 100%;\n}\n\n.Hero-video-poster-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--base-size-96);\n  height: var(--base-size-96);\n  z-index: 1;\n  color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n  position: absolute;\n  inset: 0 0 auto;\n  padding: var(--base-size-16) var(--base-size-24);\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-16);\n  height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n  color: var(--base-color-scale-white-0);\n}\n\n/* ========================================\n   Gridline-Expressive Variant\n   ======================================== */\n\n.Hero--variant-gridline-expressive {\n  container-type: inline-size;\n  width: 100%;\n}\n\n/* Grid container for expressive variant */\n.Hero-grid--expressive {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  gap: 0;\n  --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero-grid--expressive {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n/* Header column (eyebrow, heading) */\n.Hero-expressive-header-column {\n  padding: var(--base-size-36);\n  padding-inline: var(--base-size-20);\n  padding-block-end: var(--base-size-28);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  display: flex;\n  align-items: center;\n}\n\n/* Body column (description, actions, trailing) */\n.Hero-expressive-body-column {\n  padding: var(--base-size-32);\n  padding-inline: var(--base-size-20);\n  padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n  margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n  margin-block-start: var(--base-size-28);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n  margin-block-start: var(--base-size-24);\n}\n\n/* Desktop: Side-by-side layout with vertical divider */\n@media screen and (min-width: 63.25rem) {\n  .Hero-expressive-header-column {\n    padding: var(--base-size-64);\n    padding-inline-end: var(--base-size-64);\n    border-block-end: none;\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .Hero-expressive-body-column {\n    padding: var(--base-size-64);\n    padding-inline-start: var(--base-size-64);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n  }\n\n  .Hero--variant-gridline-expressive .Hero-actions {\n    margin-block-start: var(--base-size-24);\n  }\n\n  .Hero--variant-gridline-expressive .Hero-trailing {\n    margin-block-start: var(--base-size-20);\n  }\n}\n\n/* Media wrapper styles for gridline-expressive (same as gridline) */\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n  padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n    padding: var(--base-size-64);\n  }\n}\n\n/* Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n  max-width: 1176px;\n  margin-inline: auto;\n  display: block;\n  overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}
+{"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n  display: flex;\n  flex-direction: column;\n}\n\n.Hero--variant-default {\n  padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n  align-items: flex-start;\n  text-align: left;\n}\n\n.Hero--align-center {\n  justify-items: center;\n  align-items: center;\n  text-align: center;\n}\n\n.Hero-grid {\n  --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32);\n  background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed */\n}\n\n/* Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width.  */\n@container (min-width: 1280px) {\n  .Hero-grid--contained {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n  --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-grid--contained {\n    padding: var(--base-size-64);\n  }\n\n  .Hero-grid--block-end {\n    --brand-Grid-spacing-row: var(--base-size-80);\n  }\n}\n\n.Hero--align-center .Hero-actions {\n  justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.Hero-image {\n  border-radius: var(--brand-borderRadius-medium);\n  width: 100%;\n}\n\n.Hero-image > img {\n  border-radius: inherit;\n}\n\n.Hero-mediaContainer {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-padding-all {\n  padding: var(--base-size-32);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n  display: flex;\n  align-items: stretch;\n}\n\n.Hero-imageContainer--inline-bordered:not(.Hero-imageContainer--inline-padding-none) {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-imageContainer--inline-bordered {\n    min-height: calc(600px - var(--base-size-24));\n  }\n\n  .Hero-imageWrapper--bg-subtle {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero-imageContainer--inline-padding-all {\n    padding: var(--base-size-64);\n  }\n}\n\n.Hero--variant-gridline {\n  container-type: inline-size;\n  width: 100%;\n}\n\n/* Shared media styles for images and videos */\n.Hero--variant-gridline .Hero-media {\n  max-width: 1176px;\n  margin-inline: auto;\n  display: block;\n  overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end:not(.Hero-media--padding-all):not(.Hero-media--padding-none) {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero-media--pos-block-end.Hero-media--padding-all {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n/* Applied directly to video/iframe elements for block-end position */\n.Hero-media-item--block-end {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper:not(.Hero-imageWrapper--padding-none) {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padding-all {\n  padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero--variant-gridline .Hero-imageWrapper-inner {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero--variant-gridline .Hero-imageWrapper-inner--padding-all {\n    padding: var(--base-size-64);\n  }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padding-none {\n  padding: 0;\n}\n\n/* GridLine variant with inline (side-by-side) layout */\n.Hero-grid--bordered-inline {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-grid--bordered-inline {\n    min-height: 440px;\n  }\n}\n\n@container (min-width: 1280px) {\n  .Hero-grid--bordered-inline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/* Text column styling for gridline inline positions */\n.Hero-contentColumn--bordered-inline {\n  padding: var(--base-size-32);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-contentColumn--bordered-inline {\n    padding: var(--base-size-64);\n  }\n}\n\n/* Media styling for gridline inline positions */\n\n/* Edge-to-edge inline media (no padding) - remove border radius */\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--padding-all) {\n  border-radius: 0;\n}\n\n/* Applied directly to video/iframe elements for inline position */\n.Hero-media-item--inline {\n  border-radius: 0;\n}\n\n/* Padded inline media - constrain size and center */\n.Hero--variant-gridline .Hero-media--pos-inline.Hero-media--padding-all {\n  max-width: 100%;\n  height: auto;\n  align-self: center;\n}\n\n/* Image column styling now handled by .Hero-imageContainer--inline-bordered */\n\n.Hero-video {\n  width: 100%;\n}\n\n/* Base styles for video/iframe media elements */\n.Hero-media-item {\n  width: 100%;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  margin-block-end: calc(var(--base-size-16) - var(--base-size-2));\n  display: flex;\n  align-items: center;\n}\n\n.Hero-heading {\n  margin: 0;\n  max-width: 924px;\n}\n\n.Hero-heading b {\n  color: var(--brand-color-accent-primary);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n  max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n  height: 100%;\n}\n\n.Hero-description {\n  margin: var(--base-size-24) 0 0;\n  max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n  padding-block-start: var(--base-size-24);\n  margin-block-start: auto;\n}\n\n.Hero-actions {\n  margin-block-start: var(--base-size-28);\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero .Hero-actions > * {\n  flex-grow: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n  align-items: stretch;\n  gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n  margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n  margin-block-end: var(--base-size-32);\n}\n\n/* Small breakpoint and up */\n@media screen and (min-width: 34rem) {\n  .Hero--variant-default {\n    padding: var(--brand-Hero-regular-padding);\n  }\n}\n\n.Hero-video-poster-button {\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: block;\n  height: 100%;\n  position: relative;\n  line-height: 0;\n  font-size: 0;\n  width: 100%;\n}\n\n.Hero-video-poster-image {\n  display: block;\n  height: auto;\n  width: 100%;\n}\n\n.Hero-video-poster-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--base-size-96);\n  height: var(--base-size-96);\n  z-index: 1;\n  color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n  position: absolute;\n  inset: 0 0 auto;\n  padding: var(--base-size-16) var(--base-size-24);\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-16);\n  height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n  color: var(--base-color-scale-white-0);\n}\n\n/* ========================================\n   Gridline-Expressive Variant\n   ======================================== */\n\n.Hero--variant-gridline-expressive {\n  container-type: inline-size;\n  width: 100%;\n}\n\n/* Grid container for expressive variant */\n.Hero-grid--expressive {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  gap: 0;\n  --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero-grid--expressive {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n/* Header column (eyebrow, heading) */\n.Hero-expressive-header-column {\n  padding: var(--base-size-36);\n  padding-inline: var(--base-size-20);\n  padding-block-end: var(--base-size-28);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  display: flex;\n  align-items: center;\n}\n\n/* Body column (description, actions, trailing) */\n.Hero-expressive-body-column {\n  padding: var(--base-size-32);\n  padding-inline: var(--base-size-20);\n  padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n  margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n  margin-block-start: var(--base-size-28);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n  margin-block-start: var(--base-size-24);\n}\n\n/* Desktop: Side-by-side layout with vertical divider */\n@media screen and (min-width: 63.25rem) {\n  .Hero-expressive-header-column {\n    padding: var(--base-size-64);\n    padding-inline-end: var(--base-size-64);\n    border-block-end: none;\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .Hero-expressive-body-column {\n    padding: var(--base-size-64);\n    padding-inline-start: var(--base-size-64);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n  }\n\n  .Hero--variant-gridline-expressive .Hero-actions {\n    margin-block-start: var(--base-size-24);\n  }\n\n  .Hero--variant-gridline-expressive .Hero-trailing {\n    margin-block-start: var(--base-size-20);\n  }\n}\n\n/* Media wrapper styles for gridline-expressive (same as gridline) */\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper:not(.Hero-imageWrapper--padding-none) {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-all {\n  padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-all {\n    padding: var(--base-size-64);\n  }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-none {\n  padding: 0;\n}\n\n/* Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n  max-width: 1176px;\n  margin-inline: auto;\n  display: block;\n  overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive\n  .Hero-media--pos-block-end:not(.Hero-media--padding-all):not(.Hero-media--padding-none) {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-media--padding-none,\n.Hero--variant-gridline-expressive .Hero-media--padding-none {\n  border-radius: 0;\n  max-width: 100%;\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"HeroContext.d.ts","sourceRoot":"","sources":["../../src/Hero/HeroContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,gBAAgB,8BAA+B,CAAA;AAC5D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,eAAO,MAAM,kBAAkB,yDAA0D,CAAA;AACzF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,eAAO,MAAM,kBAAkB,sHAOrB,CAAA;AACV,eAAO,MAAM,wBAAwB,oHAA8D,CAAA;AACnG,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACpE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEhF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,OAAO,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,aAAa,EAAE,kBAAkB,CAAA;IACjC;;OAEG;IACH,cAAc,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,WAAW,4CAA8D,CAAA;AAEtF,eAAO,MAAM,cAAc,QAAO,eAOjC,CAAA"}
+{"version":3,"file":"HeroContext.d.ts","sourceRoot":"","sources":["../../src/Hero/HeroContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,gBAAgB,8BAA+B,CAAA;AAC5D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,eAAO,MAAM,kBAAkB,yDAA0D,CAAA;AACzF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,eAAO,MAAM,uBAAuB,qCAAsC,CAAA;AAC1E,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,eAAO,MAAM,wBAAwB,sDAAuD,CAAA;AAC5F,eAAO,MAAM,8BAA8B,yCAA0C,CAAA;AACrF,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzE,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,8BAA8B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,OAAO,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,aAAa,EAAE,iBAAiB,CAAA;IAChC;;OAEG;IACH,cAAc,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,WAAW,4CAA8D,CAAA;AAEtF,eAAO,MAAM,cAAc,QAAO,eAOjC,CAAA"}

package/esm/Hero/HeroContext.js

@@ -1,17 +1,11 @@
 import e from "react";
-var t = [
-	"block-end",
-	"block-end-padded",
-	"inline-start",
-	"inline-end",
-	"inline-end-padded",
-	"inline-start-padded"
-].filter((e) => e.startsWith("inline-")), n = e.createContext(void 0), r = () => {
+//#region src/Hero/HeroContext.ts
+var t = ["inline-start", "inline-end"], n = e.createContext(void 0), r = () => {
 	let t = e.useContext(n);
 	if (!t) throw Error("useHeroContext must be used within a HeroProvider");
 	return t;
 };
 //#endregion
-export { n as HeroContext, t as heroMediaInlinePositions, r as useHeroContext };
+export { n as HeroContext, t as HeroMediaInlinePositionOptions, r as useHeroContext };
 
 //# sourceMappingURL=HeroContext.js.map

package/esm/Hero/HeroContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroContext.js","names":[],"sources":["../../src/Hero/HeroContext.ts"],"sourcesContent":["import React from 'react'\n\nexport const HeroAlignOptions = ['start', 'center'] as const\nexport type HeroAlign = (typeof HeroAlignOptions)[number]\n\nexport const HeroVariantOptions = ['default', 'gridline', 'gridline-expressive'] as const\nexport type HeroVariant = (typeof HeroVariantOptions)[number]\n\nexport const heroMediaPositions = [\n  'block-end',\n  'block-end-padded',\n  'inline-start',\n  'inline-end',\n  'inline-end-padded',\n  'inline-start-padded',\n] as const\nexport const heroMediaInlinePositions = heroMediaPositions.filter(pos => pos.startsWith('inline-'))\nexport type HeroMediaPositions = (typeof heroMediaPositions)[number]\nexport type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number]\n\ntype HeroContextType = {\n  /**\n   * The active variant of the Hero component\n   */\n  variant: HeroVariant\n  /**\n   * The alignment of the Hero content\n   */\n  align: HeroAlign\n  /**\n   * Image position within the Hero\n   */\n  imagePosition: HeroMediaPositions\n  /**\n   * Hero.Image is an inline media position\n   */\n  hasInlineMedia: boolean\n  /**\n   * Whether animation is enabled for the Hero\n   */\n  enableAnimation: boolean\n}\n\nexport const HeroContext = React.createContext<HeroContextType | undefined>(undefined)\n\nexport const useHeroContext = (): HeroContextType => {\n  const context = React.useContext(HeroContext)\n  if (!context) {\n    throw new Error('useHeroContext must be used within a HeroProvider')\n  }\n\n  return context\n}\n"],"mappings":";AAgBA,IAAa,IAA2B;CAPtC;CACA;CACA;CACA;CACA;CACA;CAEsC,CAAmB,QAAO,MAAO,EAAI,WAAW,UAAU,CAAC,EA2BtF,IAAc,EAAM,cAA2C,KAAA,EAAU,EAEzE,UAAwC;CACnD,IAAM,IAAU,EAAM,WAAW,EAAY;AAC7C,KAAI,CAAC,EACH,OAAU,MAAM,oDAAoD;AAGtE,QAAO"}
+{"version":3,"file":"HeroContext.js","names":[],"sources":["../../src/Hero/HeroContext.ts"],"sourcesContent":["import React from 'react'\n\nexport const HeroAlignOptions = ['start', 'center'] as const\nexport type HeroAlign = (typeof HeroAlignOptions)[number]\n\nexport const HeroVariantOptions = ['default', 'gridline', 'gridline-expressive'] as const\nexport type HeroVariant = (typeof HeroVariantOptions)[number]\n\nexport const HeroMediaPaddingOptions = ['default', 'none', 'all'] as const\nexport type HeroMediaPadding = (typeof HeroMediaPaddingOptions)[number]\n\nexport const HeroMediaPositionOptions = ['block-end', 'inline-start', 'inline-end'] as const\nexport const HeroMediaInlinePositionOptions = ['inline-start', 'inline-end'] as const\nexport type HeroMediaPosition = (typeof HeroMediaPositionOptions)[number]\nexport type HeroMediaInlinePosition = (typeof HeroMediaInlinePositionOptions)[number]\n\ntype HeroContextType = {\n  /**\n   * The active variant of the Hero component\n   */\n  variant: HeroVariant\n  /**\n   * The alignment of the Hero content\n   */\n  align: HeroAlign\n  /**\n   * Image position within the Hero\n   */\n  imagePosition: HeroMediaPosition\n  /**\n   * Hero.Image is an inline media position\n   */\n  hasInlineMedia: boolean\n  /**\n   * Whether animation is enabled for the Hero\n   */\n  enableAnimation: boolean\n}\n\nexport const HeroContext = React.createContext<HeroContextType | undefined>(undefined)\n\nexport const useHeroContext = (): HeroContextType => {\n  const context = React.useContext(HeroContext)\n  if (!context) {\n    throw new Error('useHeroContext must be used within a HeroProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAYA,IAAa,IAAiC,CAAC,gBAAgB,aAAa,EA2B/D,IAAc,EAAM,cAA2C,KAAA,EAAU,EAEzE,UAAwC;CACnD,IAAM,IAAU,EAAM,WAAW,EAAY;AAC7C,KAAI,CAAC,EACH,OAAU,MAAM,oDAAoD;AAGtE,QAAO"}

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

@@ -0,0 +1,5 @@
+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>>;
+//# sourceMappingURL=HeroButtonGroup.d.ts.map

package/esm/Hero/sub-components/HeroButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAK7C,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAE3E,eAAO,MAAM,eAAe,yKAyB3B,CAAA"}

package/esm/Hero/sub-components/HeroButtonGroup.js

@@ -0,0 +1,28 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { Box as t } from "../../Box/Box.js";
+import { useHeroContext as n } from "../HeroContext.js";
+import r from "../Hero.module.js";
+import { ButtonGroup as i } from "../../ButtonGroup/ButtonGroup.js";
+import a, { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/Hero/sub-components/HeroButtonGroup.tsx
+var c = o(({ className: o, children: c, ...l }, u) => {
+	let { variant: d, enableAnimation: f } = n(), p = d === "gridline" || d === "gridline-expressive";
+	return /* @__PURE__ */ s(p ? t : a.Fragment, {
+		...p ? { animate: f ? {
+			variant: "slide-in-up",
+			delay: 750,
+			duration: 1e3
+		} : void 0 } : {},
+		children: /* @__PURE__ */ s(i, {
+			ref: u,
+			className: e(r["Hero-actions"], o),
+			...l,
+			children: c
+		})
+	});
+});
+//#endregion
+export { c as HeroButtonGroup };
+
+//# sourceMappingURL=HeroButtonGroup.js.map

package/esm/Hero/sub-components/HeroButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroButtonGroup.js","names":[],"sources":["../../../src/Hero/sub-components/HeroButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {Box} from '../../Box'\nimport {ButtonGroup} from '../../ButtonGroup'\nimport {useHeroContext} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroButtonGroupProps = React.ComponentProps<typeof ButtonGroup>\n\nexport const HeroButtonGroup = forwardRef<HTMLDivElement, HeroButtonGroupProps>(\n  ({className, children, ...props}, ref) => {\n    const {variant, enableAnimation} = useHeroContext()\n    const isGridline = variant === 'gridline' || variant === 'gridline-expressive'\n    const Tag = isGridline ? Box : React.Fragment\n    const tagProps = isGridline\n      ? {\n          animate: enableAnimation\n            ? {\n                variant: 'slide-in-up' as const,\n                delay: 750,\n                duration: 1000,\n              }\n            : undefined,\n        }\n      : {}\n\n    return (\n      <Tag {...tagProps}>\n        <ButtonGroup ref={ref} className={clsx(styles['Hero-actions'], className)} {...props}>\n          {children}\n        </ButtonGroup>\n      </Tag>\n    )\n  },\n)\n"],"mappings":";;;;;;;;AAUA,IAAa,IAAkB,GAC5B,EAAC,cAAW,aAAU,GAAG,KAAQ,MAAQ;CACxC,IAAM,EAAC,YAAS,uBAAmB,GAAgB,EAC7C,IAAa,MAAY,cAAc,MAAY;AAczD,QACE,kBAdU,IAAa,IAAM,EAAM,UAcnC;EAAK,GAbU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA,GACL,GACD,EAAE;YAIF,kBAAC,GAAD;GAAkB;GAAK,WAAW,EAAK,EAAO,iBAAiB,EAAU;GAAE,GAAI;GAC5E;GACW,CAAA;EACV,CAAA;EAGX"}

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

@@ -1 +1 @@
-{"version":3,"file":"HeroImage.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAC,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAiB,KAAK,kBAAkB,EAAC,MAAM,gBAAgB,CAAA;AAItE,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,GAAG,UAAU,GACZ,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,eAAO,MAAM,SAAS;eALT,kBAAkB;mBACd,OAAO;;;;;;;;;;;;eADX,kBAAkB;mBACd,OAAO;;;;;;;;;;;;;;;6DAiCvB,CAAA"}
+{"version":3,"file":"HeroImage.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAC,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAiB,KAAK,gBAAgB,EAAE,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AAI5F,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,GAAG,UAAU,GACZ,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,eAAO,MAAM,SAAS;eANT,iBAAiB;cAClB,gBAAgB;mBACX,OAAO;;;;;;;;;;;;eAFX,iBAAiB;cAClB,gBAAgB;mBACX,OAAO;;;;;;;;;;;;;;;6DAiCvB,CAAA"}

package/esm/Hero/sub-components/HeroImage.js

@@ -5,17 +5,17 @@ import { Image as r } from "../../Image/Image.js";
 import { forwardRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/Hero/sub-components/HeroImage.tsx
-var o = i(({ position: i = "block-end", className: o, enableBorder: s, ...c }, l) => {
-	let { variant: u, enableAnimation: d } = t(), f = i.startsWith("inline"), p = i.endsWith("-padded");
+var o = i(({ position: i = "block-end", padding: o = "default", className: s, enableBorder: c, ...l }, u) => {
+	let { variant: d, enableAnimation: f } = t(), p = i.startsWith("inline");
 	return /* @__PURE__ */ a(r, {
-		animate: u === "gridline" && d ? {
+		animate: d === "gridline" && f ? {
 			variant: "slide-in-up",
 			delay: 0,
 			duration: 1e3
 		} : void 0,
-		ref: l,
-		className: e(n["Hero-image"], n["Hero-media"], n[`Hero-media--pos-${i}`], f && n["Hero-media--pos-inline"], f && p && n["Hero-media--pos-inline-padded"], o),
-		...c
+		ref: u,
+		className: e(n["Hero-image"], n["Hero-media"], n[`Hero-media--pos-${i}`], p && n["Hero-media--pos-inline"], o === "all" && n["Hero-media--padding-all"], o === "none" && n["Hero-media--padding-none"], s),
+		...l
 	});
 });
 //#endregion

package/esm/Hero/sub-components/HeroImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroImage.js","names":[],"sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {Image, ImageProps} from '../../Image'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext, type HeroMediaPositions} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroImageProps = {\n  position?: HeroMediaPositions\n  enableBorder?: boolean\n} & ImageProps &\n  BaseProps<HTMLImageElement>\n\nexport const HeroImage = forwardRef<HTMLImageElement, HeroImageProps>(\n  ({position = 'block-end', className, enableBorder, ...rest}: PropsWithChildren<HeroImageProps>, ref) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isInlinePosition = position.startsWith('inline')\n    const isInlinePadded = position.endsWith('-padded')\n    return (\n      <Image\n        animate={\n          heroVariant === 'gridline' && enableAnimation\n            ? {\n                variant: 'slide-in-up',\n                delay: 0,\n                duration: 1000,\n              }\n            : undefined\n        }\n        ref={ref}\n        className={clsx(\n          styles['Hero-image'],\n          styles['Hero-media'],\n          styles[`Hero-media--pos-${position}`],\n          isInlinePosition && styles['Hero-media--pos-inline'],\n          isInlinePosition && isInlinePadded && styles['Hero-media--pos-inline-padded'],\n          className,\n        )}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAcA,IAAa,IAAY,GACtB,EAAC,cAAW,aAAa,cAAW,iBAAc,GAAG,KAA0C,MAAQ;CACtG,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAmB,EAAS,WAAW,SAAS,EAChD,IAAiB,EAAS,SAAS,UAAU;AACnD,QACE,kBAAC,GAAD;EACE,SACE,MAAgB,cAAc,IAC1B;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA;EAED;EACL,WAAW,EACT,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,KAAoB,KAAkB,EAAO,kCAC7C,EACD;EACD,GAAI;EACJ,CAAA;EAGP"}
+{"version":3,"file":"HeroImage.js","names":[],"sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"sourcesContent":["import {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {Image, ImageProps} from '../../Image'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext, type HeroMediaPadding, type HeroMediaPosition} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroImageProps = {\n  position?: HeroMediaPosition\n  padding?: HeroMediaPadding\n  enableBorder?: boolean\n} & ImageProps &\n  BaseProps<HTMLImageElement>\n\nexport const HeroImage = forwardRef<HTMLImageElement, HeroImageProps>(\n  ({position = 'block-end', padding = 'default', className, enableBorder, ...rest}: HeroImageProps, ref) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isInlinePosition = position.startsWith('inline')\n    return (\n      <Image\n        animate={\n          heroVariant === 'gridline' && enableAnimation\n            ? {\n                variant: 'slide-in-up',\n                delay: 0,\n                duration: 1000,\n              }\n            : undefined\n        }\n        ref={ref}\n        className={clsx(\n          styles['Hero-image'],\n          styles['Hero-media'],\n          styles[`Hero-media--pos-${position}`],\n          isInlinePosition && styles['Hero-media--pos-inline'],\n          padding === 'all' && styles['Hero-media--padding-all'],\n          padding === 'none' && styles['Hero-media--padding-none'],\n          className,\n        )}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAeA,IAAa,IAAY,GACtB,EAAC,cAAW,aAAa,aAAU,WAAW,cAAW,iBAAc,GAAG,KAAuB,MAAQ;CACxG,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAmB,EAAS,WAAW,SAAS;AACtD,QACE,kBAAC,GAAD;EACE,SACE,MAAgB,cAAc,IAC1B;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA;EAED;EACL,WAAW,EACT,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,MAAY,SAAS,EAAO,4BAC5B,MAAY,UAAU,EAAO,6BAC7B,EACD;EACD,GAAI;EACJ,CAAA;EAGP"}

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

@@ -1 +1 @@
-{"version":3,"file":"HeroVideo.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE1D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAA;AAQtD,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAGhD,KAAK,WAAW,GACZ;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAC,GAC5D;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,CAAA;AAEhE,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,WAAW,CAAA;AAE7D,eAAO,MAAM,SAAS;eAZT,kBAAkB;mBACd,OAAO;oBACN,MAAM;;;;aAKV,KAAK;oBAAkB,KAAK;kBAAgB,KAAK;;eAPlD,kBAAkB;mBACd,OAAO;oBACN,MAAM;;;;YAMX,MAAM;mBAAiB,MAAM;iBAAe,MAAM;iDAuD9D,CAAA"}
+{"version":3,"file":"HeroVideo.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE1D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,gBAAgB,EAAE,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AAQvE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAGhD,KAAK,WAAW,GACZ;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAC,GAC5D;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,CAAA;AAEhE,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,WAAW,CAAA;AAE7D,eAAO,MAAM,SAAS;eAhBT,iBAAiB;IAC5B;;OAEG;cACO,gBAAgB;mBACX,OAAO;oBACN,MAAM;;;;aAKV,KAAK;oBAAkB,KAAK;kBAAgB,KAAK;;eAXlD,iBAAiB;IAC5B;;OAEG;cACO,gBAAgB;mBACX,OAAO;oBACN,MAAM;;;;YAMX,MAAM;mBAAiB,MAAM;iBAAe,MAAM;iDAwD9D,CAAA"}

package/esm/Hero/sub-components/HeroVideo.js

@@ -3,24 +3,24 @@ import { useProvidedRefOrCreate as t } from "../../hooks/useRef.js";
 import { Box as n } from "../../Box/Box.js";
 import { Text as r } from "../../Text/Text.js";
 import i from "../Hero.module.js";
-import { Image as a } from "../../Image/Image.js";
-import { PlayIcon as o } from "../../VideoPlayer/components/PlayIcon/PlayIcon.js";
-import { MarkGithubIcon as s } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { MarkGithubIcon as a } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { Image as o } from "../../Image/Image.js";
+import { PlayIcon as s } from "../../VideoPlayer/components/PlayIcon/PlayIcon.js";
 import c, { forwardRef as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/Hero/sub-components/HeroVideo.tsx
-var f = l(({ className: n, children: r, position: a = "block-end", poster: o, posterTitle: s, posterAltText: l, enableBorder: d, "data-testid": f, ...m }, h) => {
-	let [g, _] = c.useState(!o), v = t(h), y = a.startsWith("inline"), b = a.endsWith("-padded"), x = e(i["Hero-video"], i["Hero-media"], i[`Hero-media--pos-${a}`], y && i["Hero-media--pos-inline"], y && b && i["Hero-media--pos-inline-padded"], n), S = () => _(!0), C = /* @__PURE__ */ u("div", {
+var f = l(({ className: n, children: r, position: a = "block-end", padding: o = "default", poster: s, posterTitle: l, posterAltText: d, enableBorder: f, "data-testid": m, ...h }, g) => {
+	let [_, v] = c.useState(!s), y = t(g), b = a.startsWith("inline"), x = e(i["Hero-video"], i["Hero-media"], i[`Hero-media--pos-${a}`], b && i["Hero-media--pos-inline"], o === "all" && i["Hero-media--padding-all"], o === "none" && i["Hero-media--padding-none"], n), S = () => v(!0), C = /* @__PURE__ */ u("div", {
 		className: x,
-		ref: v,
-		"data-testid": f || "Hero-video",
-		...m,
+		ref: y,
+		"data-testid": m || "Hero-video",
+		...h,
 		children: r
 	});
-	return g ? C : /* @__PURE__ */ u(p, {
-		posterSrc: o,
-		posterAlt: l,
-		posterTitle: s,
+	return _ ? C : /* @__PURE__ */ u(p, {
+		posterSrc: s,
+		posterAlt: d,
+		posterTitle: l,
 		onClick: S,
 		className: x
 	});
@@ -33,15 +33,15 @@ function p({ posterSrc: e, posterAlt: t, posterTitle: c, onClick: l, className:
 			onClick: l,
 			className: i["Hero-video-poster-button"],
 			children: [
-				/* @__PURE__ */ u(a, {
+				/* @__PURE__ */ u(o, {
 					src: e,
 					alt: t,
 					className: i["Hero-video-poster-image"]
 				}),
-				/* @__PURE__ */ u(o, { className: i["Hero-video-poster-icon"] }),
+				/* @__PURE__ */ u(s, { className: i["Hero-video-poster-icon"] }),
 				/* @__PURE__ */ d("span", {
 					className: i["Hero-video-poster-header"],
-					children: [/* @__PURE__ */ u(s, {
+					children: [/* @__PURE__ */ u(a, {
 						size: 48,
 						className: i["Hero-video-header-poster-icon"]
 					}), /* @__PURE__ */ u(r, {

package/esm/Hero/sub-components/HeroVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroVideo.js","names":[],"sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../../component-helpers'\nimport type {HeroMediaPositions} from '../HeroContext'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport styles from '../Hero.module.css'\nimport {Box, Image, Text} from '../..'\nimport {PlayIcon} from '../../VideoPlayer/components/PlayIcon'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\ntype HeroVideoBaseProps = {\n  position?: HeroMediaPositions\n  enableBorder?: boolean\n  'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\n// discriminated union to ensure that if one poster* prop is set, all are required\ntype PosterProps =\n  | {poster?: never; posterAltText?: never; posterTitle?: never}\n  | {poster: string; posterAltText: string; posterTitle: string}\n\nexport type HeroVideoProps = HeroVideoBaseProps & PosterProps\n\nexport const HeroVideo = forwardRef<HTMLDivElement, HeroVideoProps>(\n  (\n    {\n      className,\n      children,\n      position = 'block-end',\n      poster,\n      posterTitle,\n      posterAltText,\n      enableBorder,\n      'data-testid': testId,\n      ...rest\n    }: HeroVideoProps,\n    ref,\n  ) => {\n    const [showVideo, setShowVideo] = React.useState(poster ? false : true)\n    const containerRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLDivElement>)\n    const isInlinePosition = position.startsWith('inline')\n    const isInlinePadded = position.endsWith('-padded')\n\n    const mediaClasses = clsx(\n      styles['Hero-video'],\n      styles['Hero-media'],\n      styles[`Hero-media--pos-${position}`],\n      isInlinePosition && styles['Hero-media--pos-inline'],\n      isInlinePosition && isInlinePadded && styles['Hero-media--pos-inline-padded'],\n      className,\n    )\n\n    const handlePosterClick = () => setShowVideo(true)\n\n    const videoContent = (\n      <div className={mediaClasses} ref={containerRef} data-testid={testId || 'Hero-video'} {...rest}>\n        {children}\n      </div>\n    )\n\n    if (showVideo) {\n      return videoContent\n    }\n\n    return (\n      <PosterImage\n        posterSrc={poster!}\n        posterAlt={posterAltText!}\n        posterTitle={posterTitle!}\n        onClick={handlePosterClick}\n        className={mediaClasses}\n      />\n    )\n  },\n)\n\ntype PosterImageProps = {\n  posterSrc: string\n  posterAlt: string\n  posterTitle: string\n  onClick: () => void\n  className?: string\n}\n\nfunction PosterImage({posterSrc, posterAlt, posterTitle, onClick, className}: PosterImageProps) {\n  return (\n    <Box className={className}>\n      <button aria-label=\"Play video\" onClick={onClick} className={styles['Hero-video-poster-button']}>\n        <Image src={posterSrc} alt={posterAlt} className={styles['Hero-video-poster-image']} />\n        <PlayIcon className={styles['Hero-video-poster-icon']} />\n        <span className={styles['Hero-video-poster-header']}>\n          <MarkGithubIcon size={48} className={styles['Hero-video-header-poster-icon']} />\n          <Text size=\"350\" className={styles['Hero-video-poster-text']}>\n            {posterTitle}\n          </Text>\n        </span>\n      </button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,IAAY,GAErB,EACE,cACA,aACA,cAAW,aACX,WACA,gBACA,kBACA,iBACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAsB,EACjE,IAAe,EAAuB,EAAuC,EAC7E,IAAmB,EAAS,WAAW,SAAS,EAChD,IAAiB,EAAS,SAAS,UAAU,EAE7C,IAAe,EACnB,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,KAAoB,KAAkB,EAAO,kCAC7C,EACD,EAEK,UAA0B,EAAa,GAAK,EAE5C,IACJ,kBAAC,OAAD;EAAK,WAAW;EAAc,KAAK;EAAc,eAAa,KAAU;EAAc,GAAI;EACvF;EACG,CAAA;AAOR,QAJI,IACK,IAIP,kBAAC,GAAD;EACE,WAAW;EACX,WAAW;EACE;EACb,SAAS;EACT,WAAW;EACX,CAAA;EAGP;AAUD,SAAS,EAAY,EAAC,cAAW,cAAW,gBAAa,YAAS,gBAA8B;AAC9F,QACE,kBAAC,GAAD;EAAgB;YACd,kBAAC,UAAD;GAAQ,cAAW;GAAsB;GAAS,WAAW,EAAO;aAApE;IACE,kBAAC,GAAD;KAAO,KAAK;KAAW,KAAK;KAAW,WAAW,EAAO;KAA8B,CAAA;IACvF,kBAAC,GAAD,EAAU,WAAW,EAAO,2BAA6B,CAAA;IACzD,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,GAAD;MAAgB,MAAM;MAAI,WAAW,EAAO;MAAoC,CAAA,EAChF,kBAAC,GAAD;MAAM,MAAK;MAAM,WAAW,EAAO;gBAChC;MACI,CAAA,CACF;;IACA;;EACL,CAAA"}
+{"version":3,"file":"HeroVideo.js","names":[],"sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../../component-helpers'\nimport type {HeroMediaPadding, HeroMediaPosition} from '../HeroContext'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport styles from '../Hero.module.css'\nimport {Box, Image, Text} from '../..'\nimport {PlayIcon} from '../../VideoPlayer/components/PlayIcon'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\ntype HeroVideoBaseProps = {\n  position?: HeroMediaPosition\n  /**\n   * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.\n   */\n  padding?: HeroMediaPadding\n  enableBorder?: boolean\n  'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\n// discriminated union to ensure that if one poster* prop is set, all are required\ntype PosterProps =\n  | {poster?: never; posterAltText?: never; posterTitle?: never}\n  | {poster: string; posterAltText: string; posterTitle: string}\n\nexport type HeroVideoProps = HeroVideoBaseProps & PosterProps\n\nexport const HeroVideo = forwardRef<HTMLDivElement, HeroVideoProps>(\n  (\n    {\n      className,\n      children,\n      position = 'block-end',\n      padding = 'default',\n      poster,\n      posterTitle,\n      posterAltText,\n      enableBorder,\n      'data-testid': testId,\n      ...rest\n    }: HeroVideoProps,\n    ref,\n  ) => {\n    const [showVideo, setShowVideo] = React.useState(poster ? false : true)\n    const containerRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLDivElement>)\n    const isInlinePosition = position.startsWith('inline')\n\n    const mediaClasses = clsx(\n      styles['Hero-video'],\n      styles['Hero-media'],\n      styles[`Hero-media--pos-${position}`],\n      isInlinePosition && styles['Hero-media--pos-inline'],\n      padding === 'all' && styles['Hero-media--padding-all'],\n      padding === 'none' && styles['Hero-media--padding-none'],\n      className,\n    )\n\n    const handlePosterClick = () => setShowVideo(true)\n\n    const videoContent = (\n      <div className={mediaClasses} ref={containerRef} data-testid={testId || 'Hero-video'} {...rest}>\n        {children}\n      </div>\n    )\n\n    if (showVideo) {\n      return videoContent\n    }\n\n    return (\n      <PosterImage\n        posterSrc={poster!}\n        posterAlt={posterAltText!}\n        posterTitle={posterTitle!}\n        onClick={handlePosterClick}\n        className={mediaClasses}\n      />\n    )\n  },\n)\n\ntype PosterImageProps = {\n  posterSrc: string\n  posterAlt: string\n  posterTitle: string\n  onClick: () => void\n  className?: string\n}\n\nfunction PosterImage({posterSrc, posterAlt, posterTitle, onClick, className}: PosterImageProps) {\n  return (\n    <Box className={className}>\n      <button aria-label=\"Play video\" onClick={onClick} className={styles['Hero-video-poster-button']}>\n        <Image src={posterSrc} alt={posterAlt} className={styles['Hero-video-poster-image']} />\n        <PlayIcon className={styles['Hero-video-poster-icon']} />\n        <span className={styles['Hero-video-poster-header']}>\n          <MarkGithubIcon size={48} className={styles['Hero-video-header-poster-icon']} />\n          <Text size=\"350\" className={styles['Hero-video-poster-text']}>\n            {posterTitle}\n          </Text>\n        </span>\n      </button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA4BA,IAAa,IAAY,GAErB,EACE,cACA,aACA,cAAW,aACX,aAAU,WACV,WACA,gBACA,kBACA,iBACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAsB,EACjE,IAAe,EAAuB,EAAuC,EAC7E,IAAmB,EAAS,WAAW,SAAS,EAEhD,IAAe,EACnB,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,MAAY,SAAS,EAAO,4BAC5B,MAAY,UAAU,EAAO,6BAC7B,EACD,EAEK,UAA0B,EAAa,GAAK,EAE5C,IACJ,kBAAC,OAAD;EAAK,WAAW;EAAc,KAAK;EAAc,eAAa,KAAU;EAAc,GAAI;EACvF;EACG,CAAA;AAOR,QAJI,IACK,IAIP,kBAAC,GAAD;EACE,WAAW;EACX,WAAW;EACE;EACb,SAAS;EACT,WAAW;EACX,CAAA;EAGP;AAUD,SAAS,EAAY,EAAC,cAAW,cAAW,gBAAa,YAAS,gBAA8B;AAC9F,QACE,kBAAC,GAAD;EAAgB;YACd,kBAAC,UAAD;GAAQ,cAAW;GAAsB;GAAS,WAAW,EAAO;aAApE;IACE,kBAAC,GAAD;KAAO,KAAK;KAAW,KAAK;KAAW,WAAW,EAAO;KAA8B,CAAA;IACvF,kBAAC,GAAD,EAAU,WAAW,EAAO,2BAA6B,CAAA;IACzD,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,GAAD;MAAgB,MAAM;MAAI,WAAW,EAAO;MAAoC,CAAA,EAChF,kBAAC,GAAD;MAAM,MAAK;MAAM,WAAW,EAAO;gBAChC;MACI,CAAA,CACF;;IACA;;EACL,CAAA"}

package/esm/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';

package/esm/Hero/sub-components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAA"}

package/esm/Link/Link.js

@@ -1,7 +1,7 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
-import { LinkExternalIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { ExpandableArrow as r } from "../ExpandableArrow/ExpandableArrow.js";
+import { ExpandableArrow as n } from "../ExpandableArrow/ExpandableArrow.js";
+import { LinkExternalIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
 import i from "./Link.module.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes-Dh1w7a05.css';/* empty css                                                                                                  */
 import a, { useCallback as o } from "react";
@@ -42,7 +42,7 @@ function m({ size: l = "medium", variant: u = "default", className: d, children:
 		onBlur: k,
 		...x,
 		children: [
-			b === "start" && !h && /* @__PURE__ */ s(r, {
+			b === "start" && !h && /* @__PURE__ */ s(n, {
 				className: i["Link-arrow"],
 				expanded: S || w,
 				reverse: !0,
@@ -54,12 +54,12 @@ function m({ size: l = "medium", variant: u = "default", className: d, children:
 				className: e(i["Link--label"]),
 				children: m
 			}),
-			b === "end" && !h && /* @__PURE__ */ s(r, {
+			b === "end" && !h && /* @__PURE__ */ s(n, {
 				className: i["Link-arrow"],
 				expanded: S || w,
 				hidden: !0
 			}),
-			h && /* @__PURE__ */ s(n, {
+			h && /* @__PURE__ */ s(r, {
 				size: p[l],
 				"aria-label": "External link"
 			})

package/esm/LogoSuite/LogoSuite.js

@@ -3,8 +3,8 @@ import { Grid as t } from "../Grid/Grid.js";
 import { useReducedMotion as n } from "../hooks/useReducedMotion.js";
 import { Text as r } from "../Text/Text.js";
 import { Heading as i, defaultHeadingTag as a } from "../Heading/Heading.js";
-import { PauseIcon as o, PlayIcon as s } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { Button as c } from "../Button/Button.js";
+import { Button as o } from "../Button/Button.js";
+import { PauseIcon as s, PlayIcon as c } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes-B8ia26TA.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/base-DTi5Rx4y.css';/* empty css                                                                                                       */
 /* empty css                                                                                          */
 import l from "./LogoSuite.module.js";
@@ -64,20 +64,20 @@ var y = {
 		type: "button",
 		onClick: n,
 		"aria-label": e ? "Pause animation" : "Play animation",
-		children: _(e ? o : s, {})
+		children: _(e ? s : c, {})
 	});
-}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: o = "normal", variant: s = "muted", takeoverButton: u, ...d }, m) => {
-	let g = n(), [b, x] = h(() => a && !g && o !== "idle");
+}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: u, ...d }, m) => {
+	let g = n(), [b, x] = h(() => a && !g && s !== "idle");
 	p(() => {
-		x(a && !g && o !== "idle");
+		x(a && !g && s !== "idle");
 	}, [
 		a,
 		g,
-		o
+		s
 	]), a && u && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.");
 	let S = {
 		ref: m,
-		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${s}`], l[`LogoSuite__logobar--gap-${i}`], t),
+		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], t),
 		...d
 	}, [w, T] = h(!1), E = f(() => {
 		T(!0);
@@ -88,7 +88,7 @@ var y = {
 		let { className: t, label: n, ref: r, ...i } = u;
 		return /* @__PURE__ */ _("div", {
 			className: l["LogoSuite__logobar-takeoverButtonContainer"],
-			children: /* @__PURE__ */ _(c, {
+			children: /* @__PURE__ */ _(o, {
 				as: "a",
 				variant: "primary",
 				className: e(l["LogoSuite__logobar-takeoverButton"], t),
@@ -107,13 +107,13 @@ var y = {
 				onFocus: E,
 				onBlur: D,
 				children: [/* @__PURE__ */ _("div", {
-					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${o}`]),
+					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
 					"data-testid": y.marqueeGroup,
 					children: r
 				}), /* @__PURE__ */ _("div", {
 					inert: !0,
 					"aria-hidden": "true",
-					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${o}`]),
+					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
 					children: r
 				})]
 			}), /* @__PURE__ */ _(C, {

package/esm/MinimalFooter/MinimalFooter.js

@@ -1,9 +1,9 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { Stack as t } from "../Stack/Stack.js";
 import { Text as n } from "../Text/Text.js";
-import { LogoGithubIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { ColorModesEnum as i } from "../ThemeProvider/ThemeProvider.js";
-import { useTheme as a } from "../ThemeProvider/useTheme.js";
+import { ColorModesEnum as r } from "../ThemeProvider/ThemeProvider.js";
+import { useTheme as i } from "../ThemeProvider/useTheme.js";
+import { LogoGithubIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes-DhME9i-y.css';/* empty css                                                                                                    */
 import o from "./MinimalFooter.module.js";
 import s from "react";
@@ -162,7 +162,7 @@ var h = ({ name: e }) => {
 	}) }, e);
 };
 function g({ socialLinks: n = f, logoHref: s }) {
-	let { colorMode: c } = a();
+	let { colorMode: c } = i();
 	return /* @__PURE__ */ l("section", {
 		className: e(o.Footer__logomarks),
 		children: /* @__PURE__ */ l("div", {
@@ -180,8 +180,8 @@ function g({ socialLinks: n = f, logoHref: s }) {
 					href: s,
 					"data-analytics-event": "{\"category\":\"Footer\",\"action\":\"go to home\",\"label\":\"text:home\"}",
 					"aria-label": "GitHub",
-					children: /* @__PURE__ */ l(r, {
-						fill: c === i.DARK ? "white" : "black",
+					children: /* @__PURE__ */ l(a, {
+						fill: c === r.DARK ? "white" : "black",
 						size: "medium"
 					})
 				}) }), n ? /* @__PURE__ */ l("ul", {

package/esm/NavList/NavList.module-zvpwnkzz.css

@@ -0,0 +1 @@
+.Primer_Brand__NavList-module__NavList___tuR_C{--brand-NavList-label-indent-level-2:0px;--brand-NavList-label-indent-level-3:var(--base-size-16);--brand-NavList-label-indent-level-4:var(--base-size-32);--brand-NavList-label-indent-level-5:var(--base-size-48);--brand-NavList-item-paddingInlineStart-base:var(--base-size-24);--brand-NavList-control-paddingInlineStart:var(--base-size-8);--brand-NavList-label-paddingInlineStart:var(--base-size-6);box-sizing:border-box;font-family:var(--brand-fontStack-sansSerif);color:var(--brand-color-text-default);width:100%;padding-inline-start:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__list___gwquf,.Primer_Brand__NavList-module__NavList__subNav___Q4xI7,.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{margin:0;padding:0;list-style:none}.Primer_Brand__NavList-module__NavList__list___gwquf{flex-direction:column;gap:0;display:flex}.Primer_Brand__NavList-module__NavList__list--flat___xvRQl,.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{--brand-NavList-item-paddingInlineStart-base:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__groupList___Mtk4a .Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ{--brand-NavList-item-paddingInlineStart-base:0px;--brand-NavList-label-paddingInlineStart:var(--base-size-8)}.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__group___Jnwkd{position:relative}.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__item___HTVCC+.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__item___HTVCC+.Primer_Brand__NavList-module__NavList__group___Jnwkd,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__group___Jnwkd+.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__group___Jnwkd+.Primer_Brand__NavList-module__NavList__group___Jnwkd{background-image:repeating-linear-gradient(to right, var(--brand-color-border-muted) 0 var(--base-size-2), transparent var(--base-size-2) var(--base-size-4));background-repeat:no-repeat;background-size:100% var(--brand-borderWidth-thin);background-position:0 0}.Primer_Brand__NavList-module__NavList__groupTitle___r47_e{padding:var(--base-size-24) var(--base-size-16) var(--base-size-16);color:var(--brand-color-text-default);font-size:var(--brand-text-size-200);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200);margin:0}.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{flex-direction:column;gap:0;padding-block-end:var(--base-size-16);display:flex}.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{align-items:center;gap:var(--base-size-8);min-width:0;display:flex}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-block:calc(var(--base-size-8) + var(--base-size-2));padding-inline-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-2)}.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-3)}.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-4)}.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-5)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{min-height:var(--base-size-32);padding-block:0;padding-inline-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:calc(var(--brand-NavList-item-paddingInlineStart-base) + var(--brand-NavList-item-label-indent))}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{padding-inline-start:var(--brand-NavList-control-paddingInlineStart)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{padding-inline-start:var(--brand-NavList-label-paddingInlineStart)}.Primer_Brand__NavList-module__NavList__link___k0zio{align-items:center;gap:var(--base-size-8);border-radius:var(--brand-borderRadius-medium);min-width:0;color:var(--brand-color-text-muted);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default), color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);flex:auto;padding:0;display:flex;position:relative;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{box-sizing:border-box;width:100%;color:var(--brand-color-text-muted);cursor:pointer;text-align:start;background:0 0;border:0;font-family:inherit;position:relative}.Primer_Brand__NavList-module__NavList__link___k0zio:hover{color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:hover{color:var(--brand-color-text-default);background-color:#0000}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{min-height:var(--base-size-32);order:2}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):hover .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled){color:var(--brand-color-text-default)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled) .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__link___k0zio:focus-visible,.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__link___k0zio:focus-visible,.Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:focus-visible{outline-offset:calc(-1 * var(--base-size-2))}.Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]):before{content:"";inset-block:var(--base-size-8);width:var(--base-size-4);border-radius:var(--base-size-2);background-color:var(--brand-NavList-activeIndicator-color);position:absolute;inset-inline-start:0}.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled):before{content:"";block-size:var(--base-size-16);width:var(--base-size-4);border-radius:var(--base-size-2);background-color:var(--brand-NavList-activeIndicator-color);z-index:1;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:before{inset-inline-start:calc(-1 * var(--base-size-8))}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:before{inset-inline-start:var(--base-size-4)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]{padding-inline-start:var(--base-size-12)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false] .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{padding-inline-start:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){padding-inline-start:0}.Primer_Brand__NavList-module__NavList__link--disabled___Eg304{color:var(--brand-color-text-disabled);pointer-events:none}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:disabled{color:var(--brand-color-text-disabled);cursor:not-allowed}.Primer_Brand__NavList-module__NavList__label___ogBmt{word-break:break-word;min-width:0}.Primer_Brand__NavList-module__NavList__labelArea___c4ORu{align-items:center;gap:var(--base-size-8);border-radius:var(--brand-borderRadius-small);flex:auto;min-width:0;display:flex}.Primer_Brand__NavList-module__NavList__leadingVisual___KqRaq,.Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI{color:inherit;flex:none;display:inline-flex}.Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI{margin-inline-start:auto;margin-inline-end:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);flex:none}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform:rotate(-180deg)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7{opacity:0;max-height:0;transform:translateY(calc(-1 * var(--base-size-8)));visibility:hidden;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear var(--brand-animation-duration-fast);flex-direction:column;gap:0;margin:0;padding:0;display:flex;overflow:hidden}.Primer_Brand__NavList-module__NavList__subNav--expanded___ap3X8{max-height:none;max-height:var(--brand-NavList-subNav-height,none);opacity:1;visibility:visible;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear 0s;transform:translateY(0)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7[aria-hidden=true] .Primer_Brand__NavList-module__NavList__subNav___Q4xI7{visibility:hidden}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding:var(--base-size-24) var(--base-size-16) var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--expanded___pH_PL{padding-block-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-200);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-200);order:1}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{color:var(--brand-color-text-default);min-height:var(--base-size-32);margin-block:calc(-1 * var(--base-size-8));border-radius:var(--brand-borderRadius-small);padding-inline-start:0;padding-inline-end:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc>*{z-index:1;position:relative}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):hover:after,.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):active:after,.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled):after{content:"";z-index:0;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);pointer-events:none;position:absolute;inset-block:0;inset-inline:0}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{order:2;margin-inline-start:auto}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{order:1}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{min-height:var(--base-size-32);margin-block:calc(-1 * var(--base-size-8));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{position:absolute;inset-block-start:50%;inset-inline-start:calc(-1 * var(--brand-NavList-control-paddingInlineStart));transform:translateY(-50%)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform:translateY(-50%)rotate(-180deg)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{inset-inline-start:calc(-1 * var(--base-size-16))}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);order:2}.Primer_Brand__NavList-module__NavList__list--flat___xvRQl>.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{min-height:var(--base-size-32);border-radius:var(--brand-borderRadius-small)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{min-height:calc(var(--base-size-32) - var(--brand-borderWidth-thin));margin-block-end:var(--brand-borderWidth-thin)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){background-color:#0000}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio:hover .Primer_Brand__NavList-module__NavList__labelArea___c4ORu,.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]) .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio:hover{background-color:#0000}[data-color-mode=dark] .Primer_Brand__NavList-module__NavList___tuR_C{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-reduced-motion:reduce){.Primer_Brand__NavList-module__NavList___tuR_C,.Primer_Brand__NavList-module__NavList___tuR_C:before,.Primer_Brand__NavList-module__NavList___tuR_C:after,.Primer_Brand__NavList-module__NavList___tuR_C *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}