@primer/react-brand 0.72.0-rc.b7be5b38 → 0.72.0-rc.c1f51647

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.72.0-rc.b7be5b38)
+# Primer Brand docs (v0.72.0-rc.c1f51647)
 
-These docs are bundled with `@primer/react-brand@0.72.0-rc.b7be5b38` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.72.0-rc.c1f51647` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Hero/Hero.module-DjsgFkIQ.css

@@ -0,0 +1 @@
+.Primer_Brand__Hero-module__Hero___It6gj{flex-direction:column;display:flex}.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-narrow-padding)}.Primer_Brand__Hero-module__Hero--align-start___ouSp3{text-align:left;align-items:flex-start}.Primer_Brand__Hero-module__Hero--align-center___6FMoH{text-align:center;place-items:center}.Primer_Brand__Hero-module__Hero-grid___gXNGW{--brand-Grid-spacing-margin:0}.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{width:100%;max-width:1280px;padding:var(--base-size-32);background-color:var(--brand-Hero-bgColor-gridlineGridInner);margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V,.Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq{--brand-Grid-spacing-row:var(--base-size-40)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{padding:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V{--brand-Grid-spacing-row:var(--base-size-80)}}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-actions___RUotq{justify-content:center}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-content___lpGj0{flex-direction:column;align-items:center;display:flex}.Primer_Brand__Hero-module__Hero-image___GC10l{border-radius:var(--brand-borderRadius-medium);width:100%}.Primer_Brand__Hero-module__Hero-image___GC10l>img{border-radius:inherit}.Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR{flex:1;width:100%;height:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-32);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{justify-content:center;width:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{background-color:var(--brand-color-canvas-subtle);align-items:stretch;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{min-height:calc(600px - var(--base-size-24))}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI{border-radius:var(--brand-borderRadius-medium)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{width:100%;max-width:1280px;margin-inline:auto}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{min-height:440px}}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh.Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-32);flex-direction:column;justify-content:center;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr:not(.Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk),.Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG{border-radius:0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk{align-self:center;max-width:100%;height:auto}.Primer_Brand__Hero-module__Hero-video___Ne5zN{width:100%}.Primer_Brand__Hero-module__Hero-media-item___Ia3pn{border-radius:var(--brand-borderRadius-large);width:100%}.Primer_Brand__Hero-module__Hero-label___XJftM{text-transform:uppercase;letter-spacing:1px;align-items:center;margin-block-end:calc(var(--base-size-16) - var(--base-size-2));display:flex}.Primer_Brand__Hero-module__Hero-heading___HMve3{max-width:924px;margin:0}.Primer_Brand__Hero-module__Hero-heading___HMve3 b{color:var(--brand-color-accent-primary);font-style:normal;font-weight:inherit}.Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY{max-width:none;max-width:initial}.Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi{height:100%}.Primer_Brand__Hero-module__Hero-description___7raSC{margin:var(--base-size-24) 0 0;max-width:600px}.Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:auto;padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:center;gap:var(--base-size-8) var(--base-size-16);flex-wrap:wrap;margin-block-start:var(--base-size-28);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:stretch;gap:var(--base-size-8) var(--base-size-12)}.Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-eyebrow___mlxSE{margin-block-end:var(--base-size-32)}@media screen and (width>=34rem){.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-regular-padding)}}.Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt{cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0;font-size:0;line-height:0;display:block;position:relative}.Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5{width:100%;height:auto;display:block}.Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p{width:var(--base-size-96);height:var(--base-size-96);z-index:1;color:var(--base-color-scale-white-0);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__Hero-module__Hero-video-poster-header___13M9x{padding:var(--base-size-16) var(--base-size-24);align-items:center;gap:var(--base-size-16);height:var(--base-size-80);background:linear-gradient(#000000b3 60%,#0000);display:flex;position:absolute;inset:0 0 auto}.Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff,.Primer_Brand__Hero-module__Hero-video-poster-text___4R755{color:var(--base-color-scale-white-0)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{--brand-Grid-spacing-row:0;gap:0;width:100%;max-width:1280px;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-36);padding-inline:var(--base-size-20);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-28);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);padding-inline:var(--base-size-20);padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{margin-block-start:var(--base-size-28)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-24)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-64);border-block-end:none;border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline-end:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-64);flex-direction:column;justify-content:flex-end;padding-inline-start:var(--base-size-64);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{margin-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-20)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-image___GC10l:not(.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}

package/esm/Hero/Hero.module.js

@@ -1,4 +1,4 @@
-import './Hero.module-DqG5f0MT.css';var e = {
+import './Hero.module-DjsgFkIQ.css';var e = {
 	Hero: "Primer_Brand__Hero-module__Hero___It6gj",
 	"Hero--variant-default": "Primer_Brand__Hero-module__Hero--variant-default___lNgHw",
 	"Hero--align-start": "Primer_Brand__Hero-module__Hero--align-start___ouSp3",

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

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