@primer/react-brand 0.70.0-rc.88de47fc → 0.70.0-rc.c27c2e9b

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-32);\n  padding-block-end: var(--base-size-24);\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-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-28);\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-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":""}

package/esm/MediaPlaylist/MediaPlaylist.module-BddC0boN.css

@@ -0,0 +1 @@
+.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{padding-block-start:var(--base-size-36);padding-inline:var(--base-size-20)}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{width:100%;max-width:38.625rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{background:var(--brand-MediaPlaylist-bgColor);flex-direction:column;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:2;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:var(--base-size-48);align-items:center;gap:var(--base-size-8);padding:var(--base-size-12) var(--base-size-16);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);text-transform:uppercase;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs{align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs:before{content:"•";color:var(--brand-color-text-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{width:100%;padding:var(--base-size-16);order:1}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2[hidden]{display:none}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-20);flex-direction:column;width:100%;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr{max-width:var(--brand-Prose-lineLength)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{background-color:var(--base-color-scale-black-0);overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb img,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb picture,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb video,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{width:100%;max-width:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{flex-direction:column;order:2;display:flex;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));overscroll-behavior:contain;scroll-padding-block:var(--base-size-24);overflow-y:auto}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v{padding:var(--base-size-12) var(--base-size-16) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:3;justify-content:center;margin:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-width:0;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));flex-direction:column;flex:none;align-items:flex-start;display:flex;position:relative;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 100%;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-end:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-muted);margin:0;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G .Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-default)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0{flex:auto;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{gap:var(--base-size-4);flex-direction:column;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm{color:inherit;word-wrap:anywhere;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{box-sizing:border-box;width:100%;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));color:inherit;font:inherit;text-align:left;cursor:pointer;padding:var(--base-size-12) var(--base-size-16);background:0 0;border:0;outline:none;flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:flex-start;gap:var(--base-size-12);width:100%;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA{width:var(--base-size-112);block-size:calc(var(--base-size-64) - var(--brand-borderWidth-thin));aspect-ratio:16/9;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);flex-shrink:0;display:block;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA>*{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block-end:var(--base-size-24)}}@media screen and (width>=38.625rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{box-sizing:border-box;width:100%;border-inline:none;max-inline-size:80rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{--brand-MediaPlaylist-desktopGutter:3.75rem;--brand-MediaPlaylist-sidebarWidth:27rem;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,27rem);grid-template-areas:"media tabs";grid-template-columns:minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));grid-column-gap:3.75rem;grid-column-gap:var(--brand-MediaPlaylist-desktopGutter);-moz-column-gap:3.75rem;-moz-column-gap:var(--brand-MediaPlaylist-desktopGutter);column-gap:3.75rem;column-gap:var(--brand-MediaPlaylist-desktopGutter);width:100%;padding-inline-start:3.75rem;padding-inline-start:var(--brand-MediaPlaylist-desktopGutter);display:grid}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);flex-direction:column;grid-area:tabs;align-self:stretch;padding-block-start:calc(var(--base-size-48) + var(--base-size-12));display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block:var(--base-size-80);grid-area:media;justify-content:flex-start;align-items:flex-start;padding-inline:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-40)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{aspect-ratio:16/9;border-radius:var(--base-size-6)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:auto;padding-block-start:var(--base-size-24);padding-block-end:var(--base-size-12);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)));padding-block:var(--base-size-20);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:center}}@media screen and (width>=80rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-inline-end:0}}

package/esm/MediaPlaylist/MediaPlaylist.module.js

@@ -1,5 +1,6 @@
-import './MediaPlaylist.module-BU39a4-W.css';var e = {
+import './MediaPlaylist.module-BddC0boN.css';var e = {
 	MediaPlaylist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg",
+	MediaPlaylist__panelContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr",
 	MediaPlaylist__layout: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17",
 	MediaPlaylist__playlist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y",
 	MediaPlaylist__heading: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj",
@@ -8,7 +9,6 @@ import './MediaPlaylist.module-BU39a4-W.css';var e = {
 	MediaPlaylist__mediaPanels: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2",
 	MediaPlaylist__mediaPanel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2",
 	MediaPlaylist__panel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx",
-	MediaPlaylist__panelContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr",
 	MediaPlaylist__media: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb",
 	MediaPlaylist__tablist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB",
 	"MediaPlaylist--overflowItems": "Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc",

package/esm/MediaPlaylist/MediaPlaylist.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaPlaylist.module.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.module.css"],"sourcesContent":[".MediaPlaylist {\n  padding-block-start: var(--base-size-36);\n  padding-inline: var(--base-size-20);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .MediaPlaylist {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n    padding: 0;\n  }\n}\n\n.MediaPlaylist__layout {\n  display: flex;\n  flex-direction: column;\n  background: var(--brand-MediaPlaylist-bgColor);\n}\n\n.MediaPlaylist__playlist {\n  order: 2;\n  min-width: 0;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__heading {\n  display: flex;\n  min-height: var(--base-size-48);\n  align-items: center;\n  gap: var(--base-size-8);\n  padding: var(--base-size-12) var(--base-size-16);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  color: var(--brand-color-text-muted);\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  text-transform: uppercase;\n}\n\n.MediaPlaylist__headingLabel {\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  text-transform: inherit;\n}\n\n.MediaPlaylist__headingCounter {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__headingCounter::before {\n  content: '•';\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__mediaPanels {\n  order: 1;\n  width: 100%;\n  padding: var(--base-size-16);\n}\n\n.MediaPlaylist__mediaPanel {\n  min-width: 0;\n}\n\n.MediaPlaylist__mediaPanel[hidden] {\n  display: none;\n}\n\n.MediaPlaylist__panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-20);\n  width: 100%;\n}\n\n.MediaPlaylist__panelContent {\n  max-width: var(--brand-Prose-lineLength);\n}\n\n.MediaPlaylist__media {\n  overflow: hidden;\n  background-color: var(--base-color-scale-black-0);\n}\n\n.MediaPlaylist__media :is(img, picture, video, iframe) {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n}\n\n.MediaPlaylist__tablist {\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n}\n\n.MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n  max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding-block: var(--base-size-24);\n}\n\n.MediaPlaylist__pagination {\n  order: 3;\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: var(--base-size-12) var(--base-size-16) var(--base-size-16);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__item {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: column;\n  align-items: flex-start;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  overflow-x: hidden;\n}\n\n.MediaPlaylist__item::before {\n  content: '';\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 100%;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.MediaPlaylist__item--selected {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__item--selected::before {\n  transform: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n.MediaPlaylist__itemHeading {\n  display: block;\n  margin: 0;\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__item--selected .MediaPlaylist__itemHeading {\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__itemHeadingContent {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingDetails {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingTitle {\n  display: -webkit-box;\n  color: inherit;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.MediaPlaylist__tab {\n  box-sizing: border-box;\n  width: 100%;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.MediaPlaylist__tabContent {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  width: 100%;\n  gap: var(--base-size-12);\n}\n\n.MediaPlaylist__thumbnail {\n  display: block;\n  flex-shrink: 0;\n  width: var(--base-size-112);\n  block-size: calc(var(--base-size-64) - var(--brand-borderWidth-thin));\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  border-radius: var(--brand-borderRadius-small);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__thumbnail > * {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.MediaPlaylist__tab:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-4);\n}\n\n.MediaPlaylist__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n@media screen and (min-width: 38.625rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .MediaPlaylist {\n    box-sizing: border-box;\n    width: 100%;\n    max-inline-size: 80rem;\n    margin-inline: auto;\n    padding: 0;\n    border-inline: none;\n  }\n\n  .MediaPlaylist__layout {\n    --brand-MediaPlaylist-desktopGutter: 3.75rem;\n    --brand-MediaPlaylist-sidebarWidth: 27rem;\n\n    display: grid;\n    box-sizing: border-box;\n    width: 100%;\n    grid-template-areas: 'media tabs';\n    grid-template-columns: minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));\n    column-gap: var(--brand-MediaPlaylist-desktopGutter);\n    padding-inline-start: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__playlist {\n    grid-area: tabs;\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    padding-block-start: calc(var(--base-size-48) + var(--base-size-12));\n    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n    max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__mediaPanels {\n    grid-area: media;\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-block: var(--base-size-80);\n    padding-inline: 0;\n  }\n\n  .MediaPlaylist__mediaPanel {\n    width: 100%;\n  }\n\n  .MediaPlaylist__panel {\n    gap: var(--base-size-40);\n  }\n\n  .MediaPlaylist__panelContent {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media iframe {\n    aspect-ratio: 16 / 9;\n    border-radius: var(--base-size-6);\n  }\n\n  .MediaPlaylist__itemHeadingDetails {\n    font-size: var(--brand-text-size-200);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {\n    margin-block-start: var(--base-size-12);\n  }\n\n  .MediaPlaylist__heading {\n    min-height: auto;\n    padding-block-start: var(--base-size-24);\n    padding-block-end: var(--base-size-12);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__item {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__tab {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n    padding-block: var(--base-size-20);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__tabContent {\n    align-items: center;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist__playlist {\n    border-inline-end: 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MediaPlaylist.module.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.module.css"],"sourcesContent":[".MediaPlaylist {\n  padding-block-start: var(--base-size-36);\n  padding-inline: var(--base-size-20);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .MediaPlaylist {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n    padding: 0;\n  }\n\n  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {\n    margin-block-start: var(--base-size-12);\n  }\n}\n\n.MediaPlaylist__layout {\n  display: flex;\n  flex-direction: column;\n  background: var(--brand-MediaPlaylist-bgColor);\n}\n\n.MediaPlaylist__playlist {\n  order: 2;\n  min-width: 0;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__heading {\n  display: flex;\n  min-height: var(--base-size-48);\n  align-items: center;\n  gap: var(--base-size-8);\n  padding: var(--base-size-12) var(--base-size-16);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  color: var(--brand-color-text-muted);\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  text-transform: uppercase;\n}\n\n.MediaPlaylist__headingLabel {\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  text-transform: inherit;\n}\n\n.MediaPlaylist__headingCounter {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__headingCounter::before {\n  content: '•';\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__mediaPanels {\n  order: 1;\n  width: 100%;\n  padding: var(--base-size-16);\n}\n\n.MediaPlaylist__mediaPanel {\n  min-width: 0;\n}\n\n.MediaPlaylist__mediaPanel[hidden] {\n  display: none;\n}\n\n.MediaPlaylist__panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-20);\n  width: 100%;\n}\n\n.MediaPlaylist__panelContent {\n  max-width: var(--brand-Prose-lineLength);\n}\n\n.MediaPlaylist__media {\n  overflow: hidden;\n  background-color: var(--base-color-scale-black-0);\n}\n\n.MediaPlaylist__media :is(img, picture, video, iframe) {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n}\n\n.MediaPlaylist__tablist {\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n}\n\n.MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n  max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding-block: var(--base-size-24);\n}\n\n.MediaPlaylist__pagination {\n  order: 3;\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: var(--base-size-12) var(--base-size-16) var(--base-size-16);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__item {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: column;\n  align-items: flex-start;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  overflow-x: hidden;\n}\n\n.MediaPlaylist__item::before {\n  content: '';\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 100%;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.MediaPlaylist__item--selected {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__item--selected::before {\n  transform: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n.MediaPlaylist__itemHeading {\n  display: block;\n  margin: 0;\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__item--selected .MediaPlaylist__itemHeading {\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__itemHeadingContent {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingDetails {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingTitle {\n  display: -webkit-box;\n  color: inherit;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.MediaPlaylist__tab {\n  box-sizing: border-box;\n  width: 100%;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.MediaPlaylist__tabContent {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  width: 100%;\n  gap: var(--base-size-12);\n}\n\n.MediaPlaylist__thumbnail {\n  display: block;\n  flex-shrink: 0;\n  width: var(--base-size-112);\n  block-size: calc(var(--base-size-64) - var(--brand-borderWidth-thin));\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  border-radius: var(--brand-borderRadius-small);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__thumbnail > * {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.MediaPlaylist__tab:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-4);\n}\n\n.MediaPlaylist__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .MediaPlaylist__mediaPanels {\n    padding-block-end: var(--base-size-24);\n  }\n}\n\n@media screen and (min-width: 38.625rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .MediaPlaylist {\n    box-sizing: border-box;\n    width: 100%;\n    max-inline-size: 80rem;\n    margin-inline: auto;\n    padding: 0;\n    border-inline: none;\n  }\n\n  .MediaPlaylist__layout {\n    --brand-MediaPlaylist-desktopGutter: 3.75rem;\n    --brand-MediaPlaylist-sidebarWidth: 27rem;\n\n    display: grid;\n    box-sizing: border-box;\n    width: 100%;\n    grid-template-areas: 'media tabs';\n    grid-template-columns: minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));\n    column-gap: var(--brand-MediaPlaylist-desktopGutter);\n    padding-inline-start: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__playlist {\n    grid-area: tabs;\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    padding-block-start: calc(var(--base-size-48) + var(--base-size-12));\n    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n    max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__mediaPanels {\n    grid-area: media;\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-block: var(--base-size-80);\n    padding-inline: 0;\n  }\n\n  .MediaPlaylist__mediaPanel {\n    width: 100%;\n  }\n\n  .MediaPlaylist__panel {\n    gap: var(--base-size-40);\n  }\n\n  .MediaPlaylist__panelContent {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media iframe {\n    aspect-ratio: 16 / 9;\n    border-radius: var(--base-size-6);\n  }\n\n  .MediaPlaylist__itemHeadingDetails {\n    font-size: var(--brand-text-size-200);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {\n    margin-block-start: var(--base-size-12);\n  }\n\n  .MediaPlaylist__heading {\n    min-height: auto;\n    padding-block-start: var(--base-size-24);\n    padding-block-end: var(--base-size-12);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__item {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__tab {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n    padding-block: var(--base-size-20);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__tabContent {\n    align-items: center;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist__playlist {\n    border-inline-end: 0;\n  }\n}\n"],"mappings":""}

package/esm/Pillar/{Pillar.module-BM_qcCVC.css → Pillar.module-D_CQtE2q.css}

@@ -1 +1 @@
-.Primer_Brand__Pillar-module__Pillar___xLPAt{color:var(--brand-color-text-default);flex-direction:column;display:flex}.Primer_Brand__Pillar-module__Pillar--has-max-width___reXfE{max-width:50ch}.Primer_Brand__Pillar-module__Pillar--has-border___h8dLv{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-32)}.Primer_Brand__Pillar-module__Pillar___xLPAt.Primer_Brand__Pillar-module__Pillar--align-center___1eAmk{text-align:center;align-items:center}.Primer_Brand__Pillar-module__Pillar___xLPAt.Primer_Brand__Pillar-module__Pillar--align-start___kEyp9{text-align:left;align-items:flex-start}.Primer_Brand__Pillar-module__Pillar__image___z4m11{margin-bottom:var(--base-size-28);border-radius:var(--brand-borderRadius-medium);overflow:hidden}.Primer_Brand__Pillar-module__Pillar__image___z4m11 img,.Primer_Brand__Pillar-module__Pillar__image___z4m11 span,.Primer_Brand__Pillar-module__Pillar__image___z4m11 picture{display:block}.Primer_Brand__Pillar-module__Pillar__icon___4V_g6{margin-bottom:var(--base-size-48)}.Primer_Brand__Pillar-module__Pillar__icon--with-background___6pK_P>svg{width:100%;height:100%}.Primer_Brand__Pillar-module__Pillar__heading___9r3aH{margin-bottom:var(--base-size-16)}.Primer_Brand__Pillar-module__Pillar__description___WhErW:not(.Primer_Brand__Pillar-module__Pillar--has-border___h8dLv .Primer_Brand__Pillar-module__Pillar__description___WhErW:last-child){margin-bottom:var(--base-size-24)}.Primer_Brand__Pillar-module__Pillar__link___4V1wl{margin-top:auto}
+.Primer_Brand__Pillar-module__Pillar___xLPAt{color:var(--brand-color-text-default);flex-direction:column;display:flex}.Primer_Brand__Pillar-module__Pillar--has-max-width___reXfE{max-width:50ch}.Primer_Brand__Pillar-module__Pillar--has-border___h8dLv{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-32)}.Primer_Brand__Pillar-module__Pillar___xLPAt.Primer_Brand__Pillar-module__Pillar--align-center___1eAmk{text-align:center;align-items:center}.Primer_Brand__Pillar-module__Pillar___xLPAt.Primer_Brand__Pillar-module__Pillar--align-start___kEyp9{text-align:left;align-items:flex-start}.Primer_Brand__Pillar-module__Pillar__image___z4m11{margin-bottom:var(--base-size-28);border-radius:var(--brand-borderRadius-medium);overflow:hidden}.Primer_Brand__Pillar-module__Pillar__image___z4m11 img,.Primer_Brand__Pillar-module__Pillar__image___z4m11 span,.Primer_Brand__Pillar-module__Pillar__image___z4m11 picture{display:block}.Primer_Brand__Pillar-module__Pillar__icon___4V_g6{margin-bottom:var(--base-size-48)}.Primer_Brand__Pillar-module__Pillar__icon--with-background___6pK_P{border-radius:var(--base-size-12)}.Primer_Brand__Pillar-module__Pillar__icon--with-background___6pK_P>svg{width:100%;height:100%}.Primer_Brand__Pillar-module__Pillar__heading___9r3aH{margin-bottom:var(--base-size-16)}.Primer_Brand__Pillar-module__Pillar__description___WhErW:not(.Primer_Brand__Pillar-module__Pillar--has-border___h8dLv .Primer_Brand__Pillar-module__Pillar__description___WhErW:last-child){margin-bottom:var(--base-size-24)}.Primer_Brand__Pillar-module__Pillar__link___4V1wl{margin-top:auto}

package/esm/Pillar/Pillar.module.js

@@ -1,4 +1,4 @@
-import './Pillar.module-BM_qcCVC.css';var e = {
+import './Pillar.module-D_CQtE2q.css';var e = {
 	Pillar: "Primer_Brand__Pillar-module__Pillar___xLPAt",
 	"Pillar--has-max-width": "Primer_Brand__Pillar-module__Pillar--has-max-width___reXfE",
 	"Pillar--has-border": "Primer_Brand__Pillar-module__Pillar--has-border___h8dLv",

package/esm/Pillar/Pillar.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pillar.module.js","names":[],"sources":["../../src/Pillar/Pillar.module.css"],"sourcesContent":[".Pillar {\n  color: var(--brand-color-text-default);\n  display: flex;\n  flex-direction: column;\n}\n\n.Pillar--has-max-width {\n  max-width: 50ch;\n}\n\n.Pillar--has-border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-32);\n}\n\n.Pillar.Pillar--align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.Pillar.Pillar--align-start {\n  align-items: flex-start;\n  text-align: left;\n}\n\n.Pillar__image {\n  margin-bottom: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n}\n\n.Pillar__image img,\n.Pillar__image span,\n.Pillar__image picture {\n  display: block;\n}\n\n.Pillar__icon {\n  margin-bottom: var(--base-size-48);\n}\n\n.Pillar__icon--with-background > svg {\n  width: 100%;\n  height: 100%;\n}\n\n.Pillar__heading {\n  margin-bottom: var(--base-size-16);\n}\n\n.Pillar__description:not(.Pillar--has-border .Pillar__description:last-child) {\n  margin-bottom: var(--base-size-24);\n}\n\n.Pillar__link {\n  margin-top: auto;\n}\n"],"mappings":""}
+{"version":3,"file":"Pillar.module.js","names":[],"sources":["../../src/Pillar/Pillar.module.css"],"sourcesContent":[".Pillar {\n  color: var(--brand-color-text-default);\n  display: flex;\n  flex-direction: column;\n}\n\n.Pillar--has-max-width {\n  max-width: 50ch;\n}\n\n.Pillar--has-border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-32);\n}\n\n.Pillar.Pillar--align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.Pillar.Pillar--align-start {\n  align-items: flex-start;\n  text-align: left;\n}\n\n.Pillar__image {\n  margin-bottom: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n}\n\n.Pillar__image img,\n.Pillar__image span,\n.Pillar__image picture {\n  display: block;\n}\n\n.Pillar__icon {\n  margin-bottom: var(--base-size-48);\n}\n\n.Pillar__icon--with-background {\n  border-radius: var(--base-size-12);\n}\n\n.Pillar__icon--with-background > svg {\n  width: 100%;\n  height: 100%;\n}\n\n.Pillar__heading {\n  margin-bottom: var(--base-size-16);\n}\n\n.Pillar__description:not(.Pillar--has-border .Pillar__description:last-child) {\n  margin-bottom: var(--base-size-24);\n}\n\n.Pillar__link {\n  margin-top: auto;\n}\n"],"mappings":""}

package/esm/SectionIntroStacked/{SectionIntroStacked.module-Cr7kUqTH.css → SectionIntroStacked.module-C3cmwHDY.css}

@@ -1 +1 @@
-.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y{--brand-Grid-spacing-row:var(--base-size-48)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-24);padding-block:var(--base-size-32);--SectionIntroStacked-item-divider-overflow-start:var(--base-size-24);--SectionIntroStacked-item-divider-overflow-end:var(--base-size-24);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-64);padding-block:var(--base-size-64);--SectionIntroStacked-item-divider-overflow-start:0px;--SectionIntroStacked-item-divider-overflow-end:calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));padding-inline:var(--base-size-64);padding-block:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text--muted___PAxL5{color:var(--brand-color-text-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH b,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ b{color:var(--brand-color-text-default);font-style:normal;font-weight:var(--base-text-weight-normal)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--full-width___wxr_6 .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{max-width:none}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-description____vGqZ{max-width:50ch;margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-link___Vna3J{margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}@media screen and (width<=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{font-size:var(--brand-text-size-600)}}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{top:var(--base-size-2);position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-block:calc(-1 * var(--base-size-64));padding-block:0;position:static;top:auto}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-inline-start:var(--base-size-32);padding-inline-end:var(--base-size-32)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{border-block-end:none;position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{padding-block-end:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:not(:last-child):after{content:"";bottom:0;left:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));right:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);position:absolute}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-block:var(--base-size-40);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{border-block-end:none;padding-block-end:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{align-items:flex-start;gap:var(--base-size-24);flex-direction:row;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{gap:var(--base-size-48)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY{gap:var(--base-size-8);flex-direction:column;flex:1;min-width:0;display:flex}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__icon___PkmCx{border-radius:var(--brand-borderRadius-medium);flex-shrink:0}
+.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y{--brand-Grid-spacing-row:var(--base-size-48)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-24);padding-block:var(--base-size-32);--SectionIntroStacked-item-divider-overflow-start:var(--base-size-24);--SectionIntroStacked-item-divider-overflow-end:var(--base-size-24);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-64);padding-block:var(--base-size-64);--SectionIntroStacked-item-divider-overflow-start:0px;--SectionIntroStacked-item-divider-overflow-end:calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));padding-inline:var(--base-size-64);padding-block:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text--muted___PAxL5{color:var(--brand-color-text-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH b,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ b{color:var(--brand-color-text-default);font-style:normal;font-weight:var(--base-text-weight-normal)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--full-width___wxr_6 .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{max-width:none}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-description____vGqZ{max-width:50ch;margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-link___Vna3J{margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}@media screen and (width<=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{font-size:var(--brand-text-size-600)}}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{top:var(--base-size-2);position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-block:calc(-1 * var(--base-size-64));padding-block:0;position:static;top:auto}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-inline-start:var(--base-size-32);padding-inline-end:var(--base-size-32)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{border-block-end:none;position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{padding-block-end:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:not(:last-child):after{content:"";bottom:0;left:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));right:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);position:absolute}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-block:var(--base-size-40);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{border-block-end:none;padding-block-end:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{align-items:flex-start;gap:var(--base-size-24);flex-direction:row;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{gap:var(--base-size-48)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY{gap:var(--base-size-8);flex-direction:column;flex:1;min-width:0;display:flex}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__icon___PkmCx{border-radius:var(--base-size-12);flex-shrink:0}

package/esm/SectionIntroStacked/SectionIntroStacked.module.js

@@ -1,4 +1,4 @@
-import './SectionIntroStacked.module-Cr7kUqTH.css';var e = {
+import './SectionIntroStacked.module-C3cmwHDY.css';var e = {
 	SectionIntroStacked: "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y",
 	"SectionIntroStacked--variant-gridline": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi",
 	"SectionIntroStacked-heading--muted": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH",

package/esm/SectionIntroStacked/SectionIntroStacked.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n  --brand-Grid-spacing-row: var(--base-size-48);\n}\n\n.SectionIntroStacked--variant-gridline {\n  position: relative;\n  padding-inline: var(--base-size-24);\n  padding-block: var(--base-size-32);\n\n  --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n  --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked--variant-gridline {\n    padding-inline: var(--base-size-64);\n    padding-block: var(--base-size-64);\n    /* At large viewports, left overflow is 0 (vertical divider bounds the start) */\n    --SectionIntroStacked-item-divider-overflow-start: 0px;\n    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked--variant-gridline {\n    padding-inline: var(--base-size-64);\n    padding-block: var(--base-size-64);\n    --SectionIntroStacked-item-divider-overflow-start: 0px;\n    --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .SectionIntroStacked--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n  color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n  max-width: none;\n}\n\n.SectionIntroStacked-description {\n  margin-block-start: var(--base-size-16);\n  max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n  margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n}\n\n@media screen and (max-width: 63.25rem) {\n  .SectionIntroStacked-heading {\n    font-size: var(--brand-text-size-600);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked-items {\n    position: relative;\n    top: var(--base-size-2);\n  }\n\n  .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-block: calc(-1 * var(--base-size-64));\n    padding-block: 0;\n    position: static;\n    top: auto;\n  }\n\n  .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n    /* Inset item content from the vertical gridline */\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--base-size-32);\n  }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n  border-block-end: none;\n  position: relative;\n}\n\n/* Restore equal padding on first/last items in gridline variant */\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n  padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n  padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));\n  right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n  padding-block: var(--base-size-40);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n  border-block-end: none;\n  padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n  padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStackedItem-item--with-icon {\n    gap: var(--base-size-48);\n  }\n}\n\n.SectionIntroStackedItem__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-8);\n  flex: 1;\n  min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n  flex-shrink: 0;\n  border-radius: var(--brand-borderRadius-medium);\n}\n"],"mappings":""}
+{"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n  --brand-Grid-spacing-row: var(--base-size-48);\n}\n\n.SectionIntroStacked--variant-gridline {\n  position: relative;\n  padding-inline: var(--base-size-24);\n  padding-block: var(--base-size-32);\n\n  --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n  --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked--variant-gridline {\n    padding-inline: var(--base-size-64);\n    padding-block: var(--base-size-64);\n    /* At large viewports, left overflow is 0 (vertical divider bounds the start) */\n    --SectionIntroStacked-item-divider-overflow-start: 0px;\n    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked--variant-gridline {\n    padding-inline: var(--base-size-64);\n    padding-block: var(--base-size-64);\n    --SectionIntroStacked-item-divider-overflow-start: 0px;\n    --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .SectionIntroStacked--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n  color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n  max-width: none;\n}\n\n.SectionIntroStacked-description {\n  margin-block-start: var(--base-size-16);\n  max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n  margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n}\n\n@media screen and (max-width: 63.25rem) {\n  .SectionIntroStacked-heading {\n    font-size: var(--brand-text-size-600);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked-items {\n    position: relative;\n    top: var(--base-size-2);\n  }\n\n  .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-block: calc(-1 * var(--base-size-64));\n    padding-block: 0;\n    position: static;\n    top: auto;\n  }\n\n  .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n    /* Inset item content from the vertical gridline */\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--base-size-32);\n  }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n  border-block-end: none;\n  position: relative;\n}\n\n/* Restore equal padding on first/last items in gridline variant */\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n  padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n  padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));\n  right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n  padding-block: var(--base-size-40);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n  border-block-end: none;\n  padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n  padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStackedItem-item--with-icon {\n    gap: var(--base-size-48);\n  }\n}\n\n.SectionIntroStackedItem__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-8);\n  flex: 1;\n  min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n  flex-shrink: 0;\n  border-radius: var(--base-size-12);\n}\n"],"mappings":""}

package/esm/Tiles/Tiles.module-DU8TFm3h.css

@@ -0,0 +1 @@
+.Primer_Brand__Tiles-module__Tiles___RhWBm{width:100%;color:var(--brand-color-text-default)}.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:2;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none;display:flex}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:4}}@media screen and (width>=34rem) and (width<=47.99rem){.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:3}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:6}}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:4}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:8}}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-grid-border-color:var(--brand-color-border-muted);padding-right:var(--brand-borderWidth-thin);padding-bottom:var(--brand-borderWidth-thin);position:relative}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:before,.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:after{content:"";border-left:var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);z-index:1;pointer-events:none;width:0;position:absolute;top:0;bottom:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:before{left:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:after{right:0}@media screen and (width>=63.25rem){:is(.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:not(:has(>.Primer_Brand__Tiles-module__Tiles-item___YlnUj:nth-child(6))),.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:not(:has(>.Primer_Brand__Tiles-module__Tiles-item___YlnUj:nth-child(8)))){--tiles-grid-border-color:transparent}}.Primer_Brand__Tiles-module__Tiles-item___YlnUj{--tiles-inset-shadow:inset 0 0 0 transparent;width:calc(100% / var(--tiles-columns));box-sizing:border-box;background-color:var(--brand-tiles-bgColor-rest);border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), inset 0 0 0 transparent;box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);transition:background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default), box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);flex-direction:column;display:flex;position:relative}:is(.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):hover,.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):focus-within){--tiles-inset-shadow:inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);background-color:var(--brand-tiles-bgColor-hover)}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69{width:100%;color:inherit;flex:1;-webkit-text-decoration:none;text-decoration:none;display:flex}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:calc(-1 * var(--base-size-4));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Tiles-module__Tiles-item-content___YIq8M{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{justify-content:center;align-items:center;display:flex}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{width:auto;height:var(--base-size-40);max-width:100%}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-32)}.Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{justify-content:space-between;align-items:center;gap:var(--base-size-4);padding:var(--base-size-12) var(--base-size-16);display:flex;position:absolute;bottom:0;left:0;right:0}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transform:translateY(calc(-1 * var(--base-size-4)))}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:0;transform:translateY(var(--base-size-4));transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);pointer-events:none}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:1;transform:translateY(0)}.Primer_Brand__Tiles-module__Tiles-item-name___47ZMU{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M{color:var(--brand-color-text-default);flex-shrink:0}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tiles-module__Tiles-item___YlnUj,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{transition:none}}

package/esm/Tiles/Tiles.module.js

@@ -1,4 +1,4 @@
-import './Tiles.module-BOGZTY7t.css';var e = {
+import './Tiles.module-DU8TFm3h.css';var e = {
 	Tiles: "Primer_Brand__Tiles-module__Tiles___RhWBm",
 	"Tiles-grid": "Primer_Brand__Tiles-module__Tiles-grid___lAoQw",
 	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",

package/esm/Tiles/Tiles.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n  width: 100%;\n  color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n  --tiles-columns: 2;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 4;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 6;\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 4;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 8;\n  }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n  --tiles-grid-border-color: var(--brand-color-border-muted);\n  position: relative;\n  padding-right: var(--brand-borderWidth-thin);\n  padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-left: var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n  left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n  right: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),\n  .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {\n    --tiles-grid-border-color: transparent;\n  }\n}\n\n.Tiles-item {\n  --tiles-inset-shadow: inset 0 0 0 transparent;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% / var(--tiles-columns));\n  box-sizing: border-box;\n  background-color: var(--brand-tiles-bgColor-rest);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n    0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n  transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n  --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n  background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  text-decoration: none;\n  color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: calc(-1 * var(--base-size-4));\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n  width: auto;\n  height: var(--base-size-40);\n  max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n  height: var(--base-size-32);\n}\n\n.Tiles-item-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-4);\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n  transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n  opacity: 0;\n  transform: translateY(var(--base-size-4));\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n  pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.Tiles-item-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.Tiles-item-icon {\n  flex-shrink: 0;\n  color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Tiles-item {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-media {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-label {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n  width: 100%;\n  color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n  --tiles-columns: 2;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 4;\n  }\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n  .Tiles-grid {\n    --tiles-columns: 3;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 6;\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 4;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 8;\n  }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n  --tiles-grid-border-color: var(--brand-color-border-muted);\n  position: relative;\n  padding-right: var(--brand-borderWidth-thin);\n  padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-left: var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n  left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n  right: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),\n  .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {\n    --tiles-grid-border-color: transparent;\n  }\n}\n\n.Tiles-item {\n  --tiles-inset-shadow: inset 0 0 0 transparent;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% / var(--tiles-columns));\n  box-sizing: border-box;\n  background-color: var(--brand-tiles-bgColor-rest);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n    0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n  transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n  --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n  background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  text-decoration: none;\n  color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: calc(-1 * var(--base-size-4));\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n  width: auto;\n  height: var(--base-size-40);\n  max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n  height: var(--base-size-32);\n}\n\n.Tiles-item-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-4);\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n  transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n  opacity: 0;\n  transform: translateY(var(--base-size-4));\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n  pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.Tiles-item-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.Tiles-item-icon {\n  flex-shrink: 0;\n  color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Tiles-item {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-media {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-label {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/lib/Heading/Heading.d.ts

@@ -37,7 +37,14 @@ export declare const classMap: {
     h6: "6";
 };
 export type HeadingProps = {
+    /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. */
     as?: (typeof HeadingTags)[number];
+    /**
+     * Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.
+     *
+     * @example
+     * <Heading as="h2" size="4">This h2 will appear visually identical to an h4</Heading>
+     */
     size?: (typeof HeadingSizes)[number];
     weight?: HeadingWeightVariants | ResponsiveWeightMap;
     stretch?: HeadingStretchVariants | ResponsiveStretchMap;
@@ -45,5 +52,8 @@ export type HeadingProps = {
     font?: HeadingFontVariants;
     textWrap?: HeadingTextWrapVariants;
 } & React.HTMLAttributes<HTMLHeadingElement> & BaseProps<HTMLHeadingElement>;
+/**
+ * Use the heading component to render titles or subtitle text.
+ */
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};