npm - @primer/react-brand - Versions diffs - 0.68.1-rc.fa68148f → 0.69.0-rc.50f5ffef - Mend

@primer/react-brand 0.68.1-rc.fa68148f → 0.69.0-rc.50f5ffef

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (382) hide show

package/esm/Card/{Card.module-C-m74c29.css → Card.module-DZZ8DN76.css} RENAMED Viewed

	@@ -1 +1 @@
1	- .Primer_Brand__Card-module__Card___txAQX{--Card-grid-template-rows:auto auto auto auto auto auto 1fr auto;color:var(--brand-color-text-default);transition:transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);padding:var(--base-size-32);grid-template:"image image""leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description"1fr"action action"/1fr 1fr;grid-template-rows:var(--Card-grid-template-rows);border-radius:var(--brand-borderRadius-medium);flex:auto;height:100%;-webkit-text-decoration:none;text-decoration:none;display:grid;position:relative}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{text-align:center;padding:var(--base-size-64) var(--base-size-40)}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{padding:var(--base-size-64) var(--base-size-80)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{grid-template-columns:1fr;grid-template-areas:"image""leadingVisual""icon""tokens""label""heading""description""action";justify-items:center}.Primer_Brand__Card-module__Card--backgroundColor-default___1JGan{background-color:var(--brand-Card-background-default)}.Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Card-module__Card--backgroundColor-none___GVX0n{background-color:#0000}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"image image""leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"image""leadingVisual""icon""label""heading""description""tokens""action"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{grid-template-areas:"leadingVisual""icon""tokens""label""heading""description""action""image"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto 1fr auto auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"leadingVisual""icon""label""heading""description""tokens""action""image"}.Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4{padding:var(--base-size-64) var(--base-size-40)}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_ .Primer_Brand__Card-module__Card__image___3J5wL{margin-bottom:0;margin-top:var(--base-size-28)}.Primer_Brand__Card-module__Card--maxWidth___vGoIk{max-width:var(--brand-Card-maxWidth)}.Primer_Brand__Card-module__Card--fullWidth___nh9Zq{max-width:none;max-width:initial}.Primer_Brand__Card-module__Card--variant-minimal___V3m21,.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--variant-minimal___V3m21{padding:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH{--Card-arrowAction-endInset:var(--base-size-40)}.Primer_Brand__Card-module__Card___txAQX:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Card-module__Card__link___LyRm6{color:currentColor;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__Card-module__Card__link___LyRm6 code,.Primer_Brand__Card-module__Card__description___6RhVF code{font-size:inherit;font-family:var(--brand-fontStack-monospace);background-color:var(--brand-color-canvas-subtle);padding:0 var(--base-size-4) var(--base-size-2);margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default)}.Primer_Brand__Card-module__Card__description___6RhVF code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__Card-module__Card__link___LyRm6:has(code){line-height:1.4lh}.Primer_Brand__Card-module__Card__description___6RhVF.Primer_Brand__Card-module__Card__description___6RhVF:has(code){line-height:1.25lh}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc:hover .Primer_Brand__Card-module__Card__link___LyRm6{-webkit-text-decoration:underline!important;text-decoration:underline!important}.Primer_Brand__Card-module__Card__link___LyRm6:focus{outline:none}.Primer_Brand__Card-module__Card__link___LyRm6:before{content:"";position:absolute;inset:0}.Primer_Brand__Card-module__Card--border___7rvcG{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY{height:100%}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21){border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Card-module__Card__outer___FFzJY:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21):focus-within{outline-offset:var(--base-size-12)}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:scale(1.025)}.Primer_Brand__Card-module__Card__image___3J5wL{border-radius:var(--brand-borderRadius-medium);grid-area:image;margin-block-end:var(--base-size-28);overflow:hidden}.Primer_Brand__Card-module__Card__image___3J5wL img,.Primer_Brand__Card-module__Card__image___3J5wL picture,.Primer_Brand__Card-module__Card__image___3J5wL span{display:block}.Primer_Brand__Card-module__Card__leadingVisual___l_R3_{grid-area:leadingVisual;align-items:center;margin-block-end:var(--base-size-36);display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__leadingVisual___l_R3_{justify-content:center}.Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV{max-width:100%;height:var(--base-size-40);width:auto;display:block}.Primer_Brand__Card-module__Card__icon___gPD1k{margin-bottom:var(--base-size-24);grid-area:icon}.Primer_Brand__Card-module__Card__tokens___9L_4a{gap:var(--base-size-8);margin-bottom:var(--base-size-20);flex-wrap:wrap;grid-area:tokens;display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__tokens___9L_4a{justify-content:center}.Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0{margin-block-start:var(--base-size-20);margin-block-end:0}.Primer_Brand__Card-module__Card__label___q_cqg{grid-area:label;inline-size:fit-content;max-inline-size:100%;margin-block-end:var(--base-size-20)}.Primer_Brand__Card-module__Card__heading___vdQlj{grid-area:heading;margin-block-end:var(--base-size-12)}.Primer_Brand__Card-module__Card__description___6RhVF{grid-area:description;margin-block-end:var(--base-size-32)}.Primer_Brand__Card-module__Card__action___NKFQ0{pointer-events:none;grid-area:action;align-items:center;max-inline-size:100%;margin-block-start:auto;display:inline-flex}.Primer_Brand__Card-module__Card__actionIcon___KF4ar{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;display:block;overflow:hidden}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0{inline-size:100%;min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0>span:first-child{min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;word-wrap:anywhere;overflow:visible}.Primer_Brand__Card-module__Card--align-center___zuZI_:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-align:center}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{--actionLabelClip-duration:.4s;opacity:0;min-inline-size:0;max-inline-size:0;transform:translateX(calc(var(--base-size-12) * -1));transition:max-inline-size .4s var(--brand-Card-animation-easing), opacity .4s ease-out, transform .4s ease-out, margin-inline .4s ease-out, padding-inline .4s ease-out;transition:max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing), opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out, margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;background-color:#0000;flex:auto;align-self:stretch;align-items:center;display:inline-flex;overflow:hidden}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy .Primer_Brand__Card-module__Card__action___NKFQ0{margin-block-start:var(--base-size-20)}.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{--actionArrow-duration:.3s;min-height:var(--base-size-40);width:fit-content;min-inline-size:0;max-inline-size:calc(100% - var(--Card-arrowAction-endInset));-moz-column-gap:0;padding-block:var(--base-size-4);border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-full);transition:border-color .3s ease-out,background-color .3s ease-out,column-gap .3s ease-out,padding-inline .3s ease-out,-moz-column-gap .3s ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;background-color:#0000;flex-shrink:0;justify-content:flex-start;column-gap:0;margin-block-start:var(--base-size-20);padding-inline:0;overflow:hidden}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1{width:var(--base-size-32);min-width:var(--base-size-32);height:var(--base-size-32);min-height:var(--base-size-32);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-canvas-default)}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__action___NKFQ0{justify-content:center}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 span{color:var(--brand-Link-color-accent)}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 {cursor:inherit}.Primer_Brand__Card-module__Card--skew___k2nMy:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}.Primer_Brand__Card-module__Card--skew___k2nMy:hover .Primer_Brand__Card-module__Card__torch___hdUqp{opacity:.85}.Primer_Brand__Card-module__Card__skew-bounding___g108S{border-radius:var(--brand-borderRadius-medium);z-index:1;background-color:var(--brand-Card-background-default);height:100%;position:relative;overflow:hidden}.Primer_Brand__Card-module__Card__torch___hdUqp{background-color:var(--brand-color-accent-primary);filter:blur(180px);opacity:0;mix-blend-mode:soft-light;will-change:transform;pointer-events:none;z-index:-1;border-radius:300px;width:650px;height:650px;transition:opacity 1.2s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;right:0}.Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card--expandableArrow____CfmY{--ExpandableArrow-duration:var(--brand-Card-animation-duration);--ExpandableArrow-easing:var(--brand-Card-animation-easing)}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1 .Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__description___6RhVF{margin-bottom:var(--base-size-12)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:none}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:start;min-inline-size:0}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:center}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);border-color:var(--brand-color-border-default);background-color:var(--brand-Card-background-overlay);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__actionLabelClip___kEth0,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__actionLabelClip___kEth0{opacity:1;max-inline-size:100%;margin-inline-start:calc(var(--base-size-12) -1);margin-inline-end:0;padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);transform:translate(0)}.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY,.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY{transform:translateX(var(--base-size-2))}.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2),.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2){stroke-dashoffset:20px}@media (prefers-reduced-motion:reduce){.Primer_Brand__Card-module__Card___txAQX,.Primer_Brand__Card-module__Card___txAQX:before,.Primer_Brand__Card-module__Card___txAQX:after,.Primer_Brand__Card-module__Card___txAQX *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
1	+ .Primer_Brand__Card-module__Card___txAQX{--Card-grid-template-rows:auto auto auto auto auto auto 1fr auto;color:var(--brand-color-text-default);transition:transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);padding:var(--base-size-32);grid-template:"image image""leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description"1fr"action action"/1fr 1fr;grid-template-rows:var(--Card-grid-template-rows);border-radius:var(--brand-borderRadius-medium);flex:auto;height:100%;-webkit-text-decoration:none;text-decoration:none;display:grid;position:relative}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{text-align:center;padding:var(--base-size-64) var(--base-size-40)}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{padding:var(--base-size-64) var(--base-size-80)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{grid-template-columns:1fr;grid-template-areas:"image""leadingVisual""icon""tokens""label""heading""description""action";justify-items:center}.Primer_Brand__Card-module__Card--backgroundColor-default___1JGan{background-color:var(--brand-Card-background-default)}.Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Card-module__Card--backgroundColor-none___GVX0n{background-color:#0000}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"image image""leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"image""leadingVisual""icon""label""heading""description""tokens""action"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{grid-template-areas:"leadingVisual""icon""tokens""label""heading""description""action""image"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto 1fr auto auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"leadingVisual""icon""label""heading""description""tokens""action""image"}.Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4{padding:var(--base-size-64) var(--base-size-40)}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_ .Primer_Brand__Card-module__Card__image___3J5wL{margin-bottom:0;margin-top:var(--base-size-28)}.Primer_Brand__Card-module__Card--maxWidth___vGoIk{max-width:var(--brand-Card-maxWidth)}.Primer_Brand__Card-module__Card--fullWidth___nh9Zq{max-width:none;max-width:initial}.Primer_Brand__Card-module__Card--variant-minimal___V3m21,.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--variant-minimal___V3m21{padding:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH{--Card-arrowAction-endInset:var(--base-size-40)}.Primer_Brand__Card-module__Card___txAQX:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Card-module__Card__link___LyRm6{color:currentColor;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__Card-module__Card__link___LyRm6 code,.Primer_Brand__Card-module__Card__description___6RhVF code{font-size:inherit;font-family:var(--brand-fontStack-monospace);background-color:var(--brand-color-canvas-subtle);padding:0 var(--base-size-4) var(--base-size-2);margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default)}.Primer_Brand__Card-module__Card__description___6RhVF code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__Card-module__Card__link___LyRm6:has(code){line-height:1.4lh}.Primer_Brand__Card-module__Card__description___6RhVF.Primer_Brand__Card-module__Card__description___6RhVF:has(code){line-height:1.25lh}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc:hover .Primer_Brand__Card-module__Card__link___LyRm6{-webkit-text-decoration:underline!important;text-decoration:underline!important}.Primer_Brand__Card-module__Card__link___LyRm6:focus{outline:none}.Primer_Brand__Card-module__Card__link___LyRm6:before{content:"";position:absolute;inset:0}.Primer_Brand__Card-module__Card--border___7rvcG{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY{height:100%}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21){border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Card-module__Card__outer___FFzJY:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21):focus-within{outline-offset:var(--base-size-12)}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:scale(1.025)}.Primer_Brand__Card-module__Card__image___3J5wL{border-radius:var(--brand-borderRadius-medium);grid-area:image;margin-block-end:var(--base-size-28);overflow:hidden}.Primer_Brand__Card-module__Card__image___3J5wL img,.Primer_Brand__Card-module__Card__image___3J5wL picture,.Primer_Brand__Card-module__Card__image___3J5wL span{display:block}.Primer_Brand__Card-module__Card__leadingVisual___l_R3_{grid-area:leadingVisual;align-items:center;margin-block-end:var(--base-size-36);display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__leadingVisual___l_R3_{justify-content:center}.Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV{max-width:100%;height:var(--base-size-40);width:auto;display:block}.Primer_Brand__Card-module__Card__icon___gPD1k{margin-bottom:var(--base-size-24);grid-area:icon}.Primer_Brand__Card-module__Card__tokens___9L_4a{gap:var(--base-size-8);margin-bottom:var(--base-size-20);flex-wrap:wrap;grid-area:tokens;display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__tokens___9L_4a{justify-content:center}.Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0{margin-block-start:var(--base-size-20);margin-block-end:0}.Primer_Brand__Card-module__Card__label___q_cqg{grid-area:label;inline-size:fit-content;max-inline-size:100%;margin-block-end:var(--base-size-20)}.Primer_Brand__Card-module__Card__heading___vdQlj{grid-area:heading;margin-block-end:var(--base-size-12)}.Primer_Brand__Card-module__Card__description___6RhVF{grid-area:description;margin-block-end:var(--base-size-32)}.Primer_Brand__Card-module__Card__action___NKFQ0{pointer-events:none;grid-area:action;align-items:center;max-inline-size:100%;margin-block-start:auto;display:inline-flex}.Primer_Brand__Card-module__Card__actionIcon___KF4ar{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;display:block;overflow:hidden}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0{inline-size:100%;min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0>span:first-child{min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;word-wrap:anywhere;overflow:visible}.Primer_Brand__Card-module__Card--align-center___zuZI_:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-align:center}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{--actionLabelClip-duration:.4s;opacity:0;min-inline-size:0;max-inline-size:0;transform:translateX(calc(var(--base-size-12) * -1));transition:max-inline-size .4s var(--brand-Card-animation-easing), opacity .4s ease-out, transform .4s ease-out, margin-inline .4s ease-out, padding-inline .4s ease-out;transition:max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing), opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out, margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;background-color:#0000;flex:auto;align-self:stretch;align-items:center;display:inline-flex;overflow:hidden}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy .Primer_Brand__Card-module__Card__action___NKFQ0{margin-block-start:var(--base-size-20)}.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{--actionArrow-duration:.3s;min-height:var(--base-size-40);width:auto;min-inline-size:0;max-inline-size:calc(100% - var(--Card-arrowAction-endInset));-moz-column-gap:0;padding-block:var(--base-size-4);border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-full);transition:border-color .3s ease-out,background-color .3s ease-out,column-gap .3s ease-out,padding-inline .3s ease-out,-moz-column-gap .3s ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;background-color:#0000;flex-shrink:0;justify-content:flex-start;column-gap:0;margin-block-start:var(--base-size-20);padding-inline:0;overflow:hidden}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1{width:var(--base-size-32);min-width:var(--base-size-32);height:var(--base-size-32);min-height:var(--base-size-32);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-canvas-default)}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__action___NKFQ0{justify-content:center}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 span{color:var(--brand-Link-color-accent)}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 {cursor:inherit}.Primer_Brand__Card-module__Card--skew___k2nMy:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}.Primer_Brand__Card-module__Card--skew___k2nMy:hover .Primer_Brand__Card-module__Card__torch___hdUqp{opacity:.85}.Primer_Brand__Card-module__Card__skew-bounding___g108S{border-radius:var(--brand-borderRadius-medium);z-index:1;background-color:var(--brand-Card-background-default);height:100%;position:relative;overflow:hidden}.Primer_Brand__Card-module__Card__torch___hdUqp{background-color:var(--brand-color-accent-primary);filter:blur(180px);opacity:0;mix-blend-mode:soft-light;will-change:transform;pointer-events:none;z-index:-1;border-radius:300px;width:650px;height:650px;transition:opacity 1.2s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;right:0}.Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card--expandableArrow____CfmY{--ExpandableArrow-duration:var(--brand-Card-animation-duration);--ExpandableArrow-easing:var(--brand-Card-animation-easing)}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1 .Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__description___6RhVF{margin-bottom:var(--base-size-12)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:none}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:start;min-inline-size:0}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:center}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);border-color:var(--brand-color-border-default);background-color:var(--brand-Card-background-overlay);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__actionLabelClip___kEth0,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__actionLabelClip___kEth0{opacity:1;max-inline-size:100%;margin-inline-start:calc(var(--base-size-12) -1);margin-inline-end:0;padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);transform:translate(0)}.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY,.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY{transform:translateX(var(--base-size-2))}.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2),.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2){stroke-dashoffset:20px}@media (prefers-reduced-motion:reduce){.Primer_Brand__Card-module__Card___txAQX,.Primer_Brand__Card-module__Card___txAQX:before,.Primer_Brand__Card-module__Card___txAQX:after,.Primer_Brand__Card-module__Card___txAQX *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Card/Card.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Card.module-C-m74c29.css';var e = {
+import './Card.module-DZZ8DN76.css';var e = {
 	Card: "Primer_Brand__Card-module__Card___txAQX",
 	"Card--align-center": "Primer_Brand__Card-module__Card--align-center___zuZI_",
 	"Card--backgroundColor-default": "Primer_Brand__Card-module__Card--backgroundColor-default___1JGan",

package/esm/Card/Card.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. /\n --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n text-decoration: none;\n color: var(--brand-color-text-default);\n\n transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);\n padding: var(--base-size-32);\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action';\n flex: auto;\n grid-template-rows: var(--Card-grid-template-rows);\n position: relative;\n height: 100%;\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card--align-center .Card {\n text-align: center;\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n@media screen and (min-width: 64rem) {\n .Card--align-center .Card {\n padding: var(--base-size-64) var(--base-size-80);\n }\n}\n\n.Card--align-center .Card {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action';\n justify-items: center;\n}\n\n.Card--backgroundColor-default {\n background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action';\n}\n\n/* Block end image position option /\n.Card--imagePos-block-end {\n / Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action'\n 'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. /\n --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action'\n 'image';\n}\n\n.Card--hasLeadingVisual {\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n margin-bottom: 0;\n margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n max-width: unset;\n}\n\n.Card--variant-minimal {\n padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n text-decoration: none;\n}\n\n.Card__link {\n color: currentColor;\n text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n font-size: inherit;\n font-family: var(--brand-fontStack-monospace);\n background-color: var(--brand-color-canvas-subtle);\n padding: 0 var(--base-size-4) var(--base-size-2);\n margin-inline: var(--base-size-2);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-small);\n box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.Card__description code {\n padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n line-height: calc(1lh 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title /\n.Card__link:focus {\n outline: none;\n}\n\n.Card__link::before {\n content: '';\n position: absolute;\n inset: 0;\n}\n\n.Card--border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n outline-offset: var(\n --base-size-12\n ); / This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` /\n}\n\n.Card:not(.Card--disableAnimation):hover {\n transform: scale3d(1.025, 1.025, 1);\n}\n\n.Card__image {\n margin-block-end: var(--base-size-28);\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n grid-area: image;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n display: block;\n}\n\n.Card__leadingVisual {\n margin-block-end: var(--base-size-36);\n display: flex;\n align-items: center;\n grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n justify-content: center;\n}\n\n.Card__leadingVisualItem {\n display: block;\n max-width: 100%;\n height: var(--base-size-40);\n width: auto;\n}\n\n.Card__icon {\n margin-bottom: var(--base-size-24);\n grid-area: icon;\n}\n\n.Card__tokens {\n display: flex;\n flex-wrap: wrap;\n gap: var(--base-size-8);\n grid-area: tokens;\n margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n margin-block-start: var(--base-size-20);\n margin-block-end: 0;\n}\n\n.Card__label {\n margin-block-end: var(--base-size-20);\n grid-area: label;\n inline-size: fit-content;\n max-inline-size: 100%;\n}\n\n.Card__heading {\n margin-block-end: var(--base-size-12);\n grid-area: heading;\n}\n\n.Card__description {\n margin-block-end: var(--base-size-32);\n grid-area: description;\n}\n\n.Card__action {\n grid-area: action;\n margin-block-start: auto;\n display: inline-flex;\n align-items: center;\n max-inline-size: 100%;\n pointer-events: none;\n}\n\n.Card__actionIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.Card__actionLabel {\n display: block;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n inline-size: 100%;\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n text-align: center;\n}\n\n.Card__actionLabelClip {\n --actionLabelClip-duration: 400ms;\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n align-self: stretch;\n min-inline-size: 0;\n overflow: hidden;\n max-inline-size: 0;\n background-color: transparent;\n opacity: 0;\n transform: translateX(calc(var(--base-size-12) -1));\n transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n --actionArrow-duration: 300ms;\n\n margin-block-start: var(--base-size-20);\n min-height: var(--base-size-40);\n width: fit-content;\n min-inline-size: 0;\n max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n justify-content: flex-start;\n column-gap: 0;\n padding-block: var(--base-size-4);\n padding-inline: 0;\n border: var(--brand-borderWidth-thin) solid transparent;\n border-radius: var(--brand-borderRadius-full);\n background-color: transparent;\n flex-shrink: 0;\n overflow: hidden;\n transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n}\n\n.Card__actionIcon--arrowOnly {\n width: var(--base-size-32);\n min-width: var(--base-size-32);\n height: var(--base-size-32);\n min-height: var(--base-size-32);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n cursor: inherit;\n}\n\n.Card--skew:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n opacity: 0.85;\n}\n\n.Card__skew-bounding {\n border-radius: var(--brand-borderRadius-medium);\n position: relative;\n overflow: hidden;\n z-index: 1;\n height: 100%;\n background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n width: 650px;\n height: 650px;\n background-color: var(--brand-color-accent-primary);\n filter: blur(180px);\n border-radius: 300px;\n opacity: 0;\n transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n mix-blend-mode: soft-light;\n will-change: transform;\n pointer-events: none;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -1;\n}\n\n.Card--expandableArrow {\n margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow:not(.Card--disableAnimation):hover {\n transform: none;\n}\n\n.Card--ctaVariant-arrow .Card__action {\n min-inline-size: 0;\n justify-self: start;\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n column-gap: var(--base-size-8);\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n border-color: var(--brand-color-border-default);\n background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n max-inline-size: 100%;\n opacity: 1;\n transform: translateX(0);\n margin-inline-start: calc(var(--base-size-12) * -1);\n margin-inline-end: 0;\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n stroke-dashoffset: 20;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Card,\n .Card::before,\n .Card::after,\n .Card {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. /\n --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n text-decoration: none;\n color: var(--brand-color-text-default);\n\n transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);\n padding: var(--base-size-32);\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action';\n flex: auto;\n grid-template-rows: var(--Card-grid-template-rows);\n position: relative;\n height: 100%;\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card--align-center .Card {\n text-align: center;\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n@media screen and (min-width: 64rem) {\n .Card--align-center .Card {\n padding: var(--base-size-64) var(--base-size-80);\n }\n}\n\n.Card--align-center .Card {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action';\n justify-items: center;\n}\n\n.Card--backgroundColor-default {\n background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action';\n}\n\n/* Block end image position option /\n.Card--imagePos-block-end {\n / Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action'\n 'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. /\n --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action'\n 'image';\n}\n\n.Card--hasLeadingVisual {\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n margin-bottom: 0;\n margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n max-width: unset;\n}\n\n.Card--variant-minimal {\n padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n text-decoration: none;\n}\n\n.Card__link {\n color: currentColor;\n text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n font-size: inherit;\n font-family: var(--brand-fontStack-monospace);\n background-color: var(--brand-color-canvas-subtle);\n padding: 0 var(--base-size-4) var(--base-size-2);\n margin-inline: var(--base-size-2);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-small);\n box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.Card__description code {\n padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n line-height: calc(1lh 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title /\n.Card__link:focus {\n outline: none;\n}\n\n.Card__link::before {\n content: '';\n position: absolute;\n inset: 0;\n}\n\n.Card--border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n outline-offset: var(\n --base-size-12\n ); / This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` /\n}\n\n.Card:not(.Card--disableAnimation):hover {\n transform: scale3d(1.025, 1.025, 1);\n}\n\n.Card__image {\n margin-block-end: var(--base-size-28);\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n grid-area: image;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n display: block;\n}\n\n.Card__leadingVisual {\n margin-block-end: var(--base-size-36);\n display: flex;\n align-items: center;\n grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n justify-content: center;\n}\n\n.Card__leadingVisualItem {\n display: block;\n max-width: 100%;\n height: var(--base-size-40);\n width: auto;\n}\n\n.Card__icon {\n margin-bottom: var(--base-size-24);\n grid-area: icon;\n}\n\n.Card__tokens {\n display: flex;\n flex-wrap: wrap;\n gap: var(--base-size-8);\n grid-area: tokens;\n margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n margin-block-start: var(--base-size-20);\n margin-block-end: 0;\n}\n\n.Card__label {\n margin-block-end: var(--base-size-20);\n grid-area: label;\n inline-size: fit-content;\n max-inline-size: 100%;\n}\n\n.Card__heading {\n margin-block-end: var(--base-size-12);\n grid-area: heading;\n}\n\n.Card__description {\n margin-block-end: var(--base-size-32);\n grid-area: description;\n}\n\n.Card__action {\n grid-area: action;\n margin-block-start: auto;\n display: inline-flex;\n align-items: center;\n max-inline-size: 100%;\n pointer-events: none;\n}\n\n.Card__actionIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.Card__actionLabel {\n display: block;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n inline-size: 100%;\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n text-align: center;\n}\n\n.Card__actionLabelClip {\n --actionLabelClip-duration: 400ms;\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n align-self: stretch;\n min-inline-size: 0;\n overflow: hidden;\n max-inline-size: 0;\n background-color: transparent;\n opacity: 0;\n transform: translateX(calc(var(--base-size-12) -1));\n transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n --actionArrow-duration: 300ms;\n\n margin-block-start: var(--base-size-20);\n min-height: var(--base-size-40);\n width: auto;\n min-inline-size: 0;\n max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n justify-content: flex-start;\n column-gap: 0;\n padding-block: var(--base-size-4);\n padding-inline: 0;\n border: var(--brand-borderWidth-thin) solid transparent;\n border-radius: var(--brand-borderRadius-full);\n background-color: transparent;\n flex-shrink: 0;\n overflow: hidden;\n transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n}\n\n.Card__actionIcon--arrowOnly {\n width: var(--base-size-32);\n min-width: var(--base-size-32);\n height: var(--base-size-32);\n min-height: var(--base-size-32);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n cursor: inherit;\n}\n\n.Card--skew:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n opacity: 0.85;\n}\n\n.Card__skew-bounding {\n border-radius: var(--brand-borderRadius-medium);\n position: relative;\n overflow: hidden;\n z-index: 1;\n height: 100%;\n background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n width: 650px;\n height: 650px;\n background-color: var(--brand-color-accent-primary);\n filter: blur(180px);\n border-radius: 300px;\n opacity: 0;\n transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n mix-blend-mode: soft-light;\n will-change: transform;\n pointer-events: none;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -1;\n}\n\n.Card--expandableArrow {\n margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow:not(.Card--disableAnimation):hover {\n transform: none;\n}\n\n.Card--ctaVariant-arrow .Card__action {\n min-inline-size: 0;\n justify-self: start;\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n column-gap: var(--base-size-8);\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n border-color: var(--brand-color-border-default);\n background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n max-inline-size: 100%;\n opacity: 1;\n transform: translateX(0);\n margin-inline-start: calc(var(--base-size-12) * -1);\n margin-inline-end: 0;\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n stroke-dashoffset: 20;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Card,\n .Card::before,\n .Card::after,\n .Card {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/Link/Link.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css';
 export declare const LinkVariants: readonly ["default", "accent"];
-export declare const LinkSizes: readonly ["medium", "large"];
+export declare const LinkSizes: readonly ["small", "medium", "large"];
 export declare const LinkArrowDirections: readonly ["start", "end", "none"];
 export type LinkProps = {
     /**

package/esm/Link/Link.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAC1D,eAAO,MAAM,SAAS,~~8BAA+B~~,CAAA;~~AACrD~~,eAAO,MAAM,mBAAmB,mCAAoC,CAAA;~~AAEpE~~,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,SAAS,~~2CAuEX~~"}
1	+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAC1D,eAAO,MAAM,SAAS,uCAAwC,CAAA;AAC9D,eAAO,MAAM,mBAAmB,mCAAoC,CAAA;AAcpE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,SAAS,2CAkEX"}

package/esm/Link/Link.js CHANGED Viewed

@@ -7,57 +7,66 @@ import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/compon
 import a, { useCallback as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/Link/Link.tsx
-var l = ["default", "accent"], u = ["medium", "large"], d = [
+var l = ["default", "accent"], u = [
+	"small",
+	"medium",
+	"large"
+], d = [
 	"start",
 	"end",
 	"none"
-];
-function f({ size: l = "medium", variant: u = "default", className: d, children: f, isExternal: p, onMouseEnter: m, onMouseLeave: h, onFocus: g, onBlur: _, arrowDirection: v = "end", ...y }) {
-	let [b, x] = a.useState(!1), [S, C] = a.useState(!1), w = {
-		medium: "200",
-		large: "300"
-	}, T = o((e) => {
-		x(!b), m?.(e);
-	}, [m, b]), E = o((e) => {
-		x(!b), h?.(e);
-	}, [h, b]), D = o((e) => {
+], f = {
+	small: "100",
+	medium: "200",
+	large: "300"
+}, p = {
+	small: 16,
+	medium: 16,
+	large: 20
+};
+function m({ size: l = "medium", variant: u = "default", className: d, children: m, isExternal: h, onMouseEnter: g, onMouseLeave: _, onFocus: v, onBlur: y, arrowDirection: b = "end", ...x }) {
+	let [S, C] = a.useState(!1), [w, T] = a.useState(!1), E = o((e) => {
 		C(!S), g?.(e);
-	}, [g, S]), O = o((e) => {
+	}, [g, S]), D = o((e) => {
 		C(!S), _?.(e);
-	}, [_, S]);
+	}, [_, S]), O = o((e) => {
+		T(!w), v?.(e);
+	}, [v, w]), k = o((e) => {
+		T(!w), y?.(e);
+	}, [y, w]);
 	return /* @__PURE__ */ c("a", {
-		className: e(i.Link, i[`Link--${l}`], i[`Link--${u}`], p ? i["Link--is-external"] : i[`Link--arrow-${v}`], d),
-		onMouseEnter: T,
-		onMouseLeave: E,
-		onFocus: D,
-		onBlur: O,
-		...y,
+		className: e(i.Link, i[`Link--${l}`], i[`Link--${u}`], h ? i["Link--is-external"] : i[`Link--arrow-${b}`], d),
+		onMouseEnter: E,
+		onMouseLeave: D,
+		onFocus: O,
+		onBlur: k,
+		...x,
 		children: [
-			v === "start" && !p && /* @__PURE__ */ s(r, {
+			b === "start" && !h && /* @__PURE__ */ s(r, {
 				className: i["Link-arrow"],
-				expanded: b || S,
+				expanded: S || w,
 				reverse: !0,
 				hidden: !0
 			}),
 			/* @__PURE__ */ s(t, {
 				as: "span",
-				size: w[l],
+				size: f[l],
 				className: e(i["Link--label"]),
-				children: f
+				children: m
 			}),
-			v === "end" && !p && /* @__PURE__ */ s(r, {
+			b === "end" && !h && /* @__PURE__ */ s(r, {
 				className: i["Link-arrow"],
-				expanded: b || S,
+				expanded: S || w,
 				hidden: !0
 			}),
-			p && /* @__PURE__ */ s(n, {
-				size: l === "large" ? 20 : 16,
+			h && /* @__PURE__ */ s(n, {
+				size: p[l],
 				"aria-label": "External link"
 			})
 		]
 	});
 }
 //#endregion
-export { f as Link, d as LinkArrowDirections, u as LinkSizes, l as LinkVariants };
+export { m as Link, d as LinkArrowDirections, u as LinkSizes, l as LinkVariants };
 //# sourceMappingURL=Link.js.map

package/esm/Link/Link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.js","names":[],"sources":["../../src/Link/Link.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useCallback} from 'react'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {LinkExternalIcon} from '@primer/octicons-react'\nimport {Text} from '../Text'\n\nimport styles from './Link.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'\n\nexport const LinkVariants = ['default', 'accent'] as const\nexport const LinkSizes = ['medium', 'large'] as const\nexport const LinkArrowDirections = ['start', 'end', 'none'] as const\n\nexport type LinkProps = {\n /*\n The size variations available in Link\n /\n size?: (typeof LinkSizes)[number]\n /\n Position of the arrow.\n /\n arrowDirection?: (typeof LinkArrowDirections)[number]\n /\n Show an external link icon\n /\n isExternal?: boolean\n /\n Specify alternative link appearance\n /\n variant?: (typeof LinkVariants)[number]\n} & React.ComponentPropsWithoutRef<'a'>\n\n/\n Links connect users to related content.\n * These are not intended to be used as a call-to-action.\n */\nexport function Link({\n size = 'medium',\n variant = 'default',\n className,\n children,\n isExternal,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n arrowDirection = 'end',\n ...props\n}: LinkProps) {\n const [isHovered, setIsHovered] = React.useState(false)\n const [isFocused, setIsFocused] = React.useState(false)\n\n const ~~sizeMap = {\n medium: '200',\n large: '300',\n } as const\n\n const~~ handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseEnter?.(event)\n },\n [onMouseEnter, isHovered],\n )\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseLeave?.(event)\n },\n [onMouseLeave, isHovered],\n )\n\n const handleOnFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onFocus?.(event)\n },\n [onFocus, isFocused],\n )\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onBlur?.(event)\n },\n [onBlur, isFocused],\n )\n\n return (\n <a\n className={clsx(\n styles.Link,\n styles[`Link--${size}`],\n styles[`Link--${variant}`],\n isExternal ? styles['Link--is-external'] : styles[`Link--arrow-${arrowDirection}`],\n className,\n )}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n {...props}\n >\n {arrowDirection === 'start' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} reverse hidden />\n )}\n\n <Text as=\"span\" size={~~sizeMap~~[size]} className={clsx(styles['Link--label'])}>\n {children}\n </Text>\n\n {arrowDirection === 'end' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} hidden />\n )}\n\n {isExternal && <LinkExternalIcon size={size ~~=== 'large' ? 20 : 16~~} aria-label=\"External link\" />}\n </a>\n )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAe,CAAC,WAAW,SAAS,EACpC,IAAY,CAAC,~~UAAU~~,~~QAAQ,EAC/B,~~IAAsB;CAAC;CAAS;CAAO;CAAO;~~AAyB3D~~,SAAgB,EAAK,EACnB,UAAO,UACP,aAAU,WACV,cACA,aACA,eACA,iBACA,iBACA,YACA,WACA,oBAAiB,OACjB,GAAG,KACS;CACZ,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM,EACjD,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM,EAEjD,~~IAAU;EACd,QAAQ;EACR,OAAO;EACR,EAEK,~~IAAmB,GACtB,MAA2D;AAE1D,EADA,EAAa,CAAC,EAAU,EACxB,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAU,CAC1B,EAEK,IAAmB,GACtB,MAA2D;AAE1D,EADA,EAAa,CAAC,EAAU,EACxB,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAU,CAC1B,EAEK,IAAgB,GACnB,MAAwD;AAEvD,EADA,EAAa,CAAC,EAAU,EACxB,IAAU,EAAM;IAElB,CAAC,GAAS,EAAU,CACrB,EAEK,IAAe,GAClB,MAAwD;AAEvD,EADA,EAAa,CAAC,EAAU,EACxB,IAAS,EAAM;IAEjB,CAAC,GAAQ,EAAU,CACpB;AAED,QACE,kBAAC,KAAD;EACE,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,EACD;EACD,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YAZN;GAcG,MAAmB,WAAW,CAAC,KAC9B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,SAAA;IAAQ,QAAA;IAAS,CAAA;GAGvG,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,~~EAAQ~~;IAAO,WAAW,EAAK,EAAO,eAAe;~~IACxE~~;IACI,CAAA;GAEN,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;IAAS,CAAA;GAG9F,KAAc,kBAAC,GAAD;IAAkB,MAAM,~~MAAS,UAAU,KAAK~~;~~IAAI~~,cAAW;IAAkB,CAAA;~~GAC9F~~"}
1	+ {"version":3,"file":"Link.js","names":[],"sources":["../../src/Link/Link.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useCallback} from 'react'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {LinkExternalIcon} from '@primer/octicons-react'\nimport {Text} from '../Text'\n\nimport styles from './Link.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'\n\nexport const LinkVariants = ['default', 'accent'] as const\nexport const LinkSizes = ['small', 'medium', 'large'] as const\nexport const LinkArrowDirections = ['start', 'end', 'none'] as const\n\nconst LinkTextSizes = {\n small: '100',\n medium: '200',\n large: '300',\n} as const\n\nconst LinkExternalIconSizes = {\n small: 16,\n medium: 16,\n large: 20,\n} as const\n\nexport type LinkProps = {\n /*\n The size variations available in Link\n /\n size?: (typeof LinkSizes)[number]\n /\n Position of the arrow.\n /\n arrowDirection?: (typeof LinkArrowDirections)[number]\n /\n Show an external link icon\n /\n isExternal?: boolean\n /\n Specify alternative link appearance\n /\n variant?: (typeof LinkVariants)[number]\n} & React.ComponentPropsWithoutRef<'a'>\n\n/\n Links connect users to related content.\n * These are not intended to be used as a call-to-action.\n */\nexport function Link({\n size = 'medium',\n variant = 'default',\n className,\n children,\n isExternal,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n arrowDirection = 'end',\n ...props\n}: LinkProps) {\n const [isHovered, setIsHovered] = React.useState(false)\n const [isFocused, setIsFocused] = React.useState(false)\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseEnter?.(event)\n },\n [onMouseEnter, isHovered],\n )\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseLeave?.(event)\n },\n [onMouseLeave, isHovered],\n )\n\n const handleOnFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onFocus?.(event)\n },\n [onFocus, isFocused],\n )\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onBlur?.(event)\n },\n [onBlur, isFocused],\n )\n\n return (\n <a\n className={clsx(\n styles.Link,\n styles[`Link--${size}`],\n styles[`Link--${variant}`],\n isExternal ? styles['Link--is-external'] : styles[`Link--arrow-${arrowDirection}`],\n className,\n )}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n {...props}\n >\n {arrowDirection === 'start' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} reverse hidden />\n )}\n\n <Text as=\"span\" size={LinkTextSizes[size]} className={clsx(styles['Link--label'])}>\n {children}\n </Text>\n\n {arrowDirection === 'end' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} hidden />\n )}\n\n {isExternal && <LinkExternalIcon size={LinkExternalIconSizes[size]} aria-label=\"External link\" />}\n </a>\n )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAe,CAAC,WAAW,SAAS,EACpC,IAAY;CAAC;CAAS;CAAU;CAAQ,EACxC,IAAsB;CAAC;CAAS;CAAO;CAAO,EAErD,IAAgB;CACpB,OAAO;CACP,QAAQ;CACR,OAAO;CACR,EAEK,IAAwB;CAC5B,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAyBD,SAAgB,EAAK,EACnB,UAAO,UACP,aAAU,WACV,cACA,aACA,eACA,iBACA,iBACA,YACA,WACA,oBAAiB,OACjB,GAAG,KACS;CACZ,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM,EACjD,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM,EAEjD,IAAmB,GACtB,MAA2D;AAE1D,EADA,EAAa,CAAC,EAAU,EACxB,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAU,CAC1B,EAEK,IAAmB,GACtB,MAA2D;AAE1D,EADA,EAAa,CAAC,EAAU,EACxB,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAU,CAC1B,EAEK,IAAgB,GACnB,MAAwD;AAEvD,EADA,EAAa,CAAC,EAAU,EACxB,IAAU,EAAM;IAElB,CAAC,GAAS,EAAU,CACrB,EAEK,IAAe,GAClB,MAAwD;AAEvD,EADA,EAAa,CAAC,EAAU,EACxB,IAAS,EAAM;IAEjB,CAAC,GAAQ,EAAU,CACpB;AAED,QACE,kBAAC,KAAD;EACE,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,EACD;EACD,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YAZN;GAcG,MAAmB,WAAW,CAAC,KAC9B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,SAAA;IAAQ,QAAA;IAAS,CAAA;GAGvG,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,EAAc;IAAO,WAAW,EAAK,EAAO,eAAe;IAC9E;IACI,CAAA;GAEN,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;IAAS,CAAA;GAG9F,KAAc,kBAAC,GAAD;IAAkB,MAAM,EAAsB;IAAO,cAAW;IAAkB,CAAA;GAC/F"}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts CHANGED Viewed

@@ -11,6 +11,19 @@ export type RiverBreakoutTabsProps = React.PropsWithChildren<{
     defaultSelectedIndex?: number;
     selectedIndex?: number;
     onChange?: (selectedIndex: number) => void;
+    /**
+     * Decorative background rendered behind the visual and persisted across tab
+     * changes. Must not contain interactive and remain purely decorative.
+     */
+    backgroundVisual?: React.ReactNode;
+    /**
+     * Alignment of media within the visual container when `backgroundVisual` is provided
+     */
+    imagePosition?: 'center' | 'block-end';
+    /**
+     * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them
+     */
+    backgroundVisualFullBleed?: boolean;
 }> & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
 export type RiverBreakoutTabsItemProps = React.PropsWithChildren<{
     className?: string;
@@ -29,6 +42,19 @@ export declare const RiverBreakoutTabs: React.ForwardRefExoticComponent<{
     defaultSelectedIndex?: number;
     selectedIndex?: number;
     onChange?: (selectedIndex: number) => void;
+    /**
+     * Decorative background rendered behind the visual and persisted across tab
+     * changes. Must not contain interactive and remain purely decorative.
+     */
+    backgroundVisual?: React.ReactNode;
+    /**
+     * Alignment of media within the visual container when `backgroundVisual` is provided
+     */
+    imagePosition?: "center" | "block-end";
+    /**
+     * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them
+     */
+    backgroundVisualFullBleed?: boolean;
 } & {
     children?: React.ReactNode | undefined;
 } & Omit<React.HTMLAttributes<HTMLElement>, "onChange"> & React.RefAttributes<HTMLElement>> & {

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAwB,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAO3E;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;~~CAC3C~~,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;~~AAsalD~~;;GAEG;AACH,eAAO,MAAM,iBAAiB;~~2BA5bL~~,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;;;;~~wCAwCqB~~,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;~~CA2ZnE~~,CAAA"}
1	+ {"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAwB,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAO3E;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAmclD;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BAteL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC1C;;;OAGG;uBACgB,KAAK,CAAC,SAAS;IAClC;;OAEG;oBACa,QAAQ,GAAG,WAAW;IACtC;;OAEG;gCACyB,OAAO;;;;wCAwC4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CAwbnE,CAAA"}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js CHANGED Viewed

@@ -68,51 +68,55 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 }) : {
 	action: null,
 	body: []
-}, V = (e, t) => t === 0 ? -1 : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1), H = h(({ children: n, className: r, defaultSelectedIndex: a = 0, onChange: s, selectedIndex: c, ...h }, x) => {
-	let w = t(), { isLarge: T } = u(), E = v(() => p.Children.toArray(n), [n]), D = E.find(M) ?? null, O = E.filter(j).map(z).filter((e) => e.heading && e.content && e.visual), k = V(a, O.length), A = typeof c == "number" && Number.isFinite(c) ? V(c, O.length) : null, N = A ?? k, P = D?.props.id ?? `${w}-heading`, F = Math.min(Math.max(O.length, 1), 3), I = N >= 0 ? String(N) : void 0, L = T === !0, R = y(!1), { activeTab: H, activateTab: U, getTabListProps: W, getTabPanelProps: G, getTabProps: K } = l({
-		defaultTab: I,
+}, V = (e, t) => t === 0 ? -1 : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1), H = h(({ children: n, className: r, defaultSelectedIndex: a = 0, onChange: s, selectedIndex: c, backgroundVisual: h, imagePosition: x = "center", backgroundVisualFullBleed: w = !1, ...T }, E) => {
+	let D = t(), { isLarge: O } = u(), k = v(() => p.Children.toArray(n), [n]), A = k.find(M) ?? null, N = k.filter(j).map(z).filter((e) => e.heading && e.content && e.visual), P = V(a, N.length), F = typeof c == "number" && Number.isFinite(c) ? V(c, N.length) : null, I = F ?? P, L = A?.props.id ?? `${D}-heading`, R = Math.min(Math.max(N.length, 1), 3), H = I >= 0 ? String(I) : void 0, U = O === !0, W = y(!1), { activeTab: G, activateTab: K, getTabListProps: q, getTabPanelProps: J, getTabProps: Y } = l({
+		defaultTab: H,
 		onTabActivate: g((e) => {
-			if (R.current) {
-				R.current = !1;
+			if (W.current) {
+				W.current = !1;
 				return;
 			}
 			if (!s) return;
 			let t = Number(e);
 			Number.isNaN(t) || s(t);
 		}, [s])
-	}), [q, J] = b(N);
+	}), [X, Z] = b(I);
 	_(() => {
-		if (H === null) return;
-		let e = Number(H);
-		Number.isNaN(e) || J(e);
-	}, [H]), _(() => {
-		if (A === null || A < 0) return;
-		let e = String(A);
-		H !== e && (R.current = !0, U(e)), J(A);
+		if (G === null) return;
+		let e = Number(G);
+		Number.isNaN(e) || Z(e);
+	}, [G]), _(() => {
+		if (F === null || F < 0) return;
+		let e = String(F);
+		G !== e && (W.current = !0, K(e)), Z(F);
 	}, [
-		U,
-		H,
-		A
-	]), !D && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.");
-	let Y = (e) => (t) => {
-		t && (J(e), H !== String(e) && U(String(e)));
-	}, X = (e) => {
+		K,
+		G,
+		F
+	]), !A && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.");
+	let ee = (e) => (t) => {
+		t && (Z(e), G !== String(e) && K(String(e)));
+	}, te = (e) => {
 		let t = Number(e.currentTarget.getAttribute("data-index"));
-		!e.currentTarget.open && q === t && (e.currentTarget.open = !0);
-	}, Z = W(D ? { labelledBy: P } : { label: "River breakout tabs" }), Q = v(() => O.map((e) => B(e.content)), [O]);
+		!e.currentTarget.open && X === t && (e.currentTarget.open = !0);
+	}, ne = q(A ? { labelledBy: L } : { label: "River breakout tabs" }), Q = v(() => N.map((e) => B(e.content)), [N]), $ = h == null ? null : /* @__PURE__ */ S("div", {
+		className: d.RiverBreakoutTabs__backgroundVisual,
+		"aria-hidden": "true",
+		children: h
+	});
 	return /* @__PURE__ */ C("section", {
-		ref: x,
-		className: e(o.RiverBreakout, o["RiverBreakout--variant-gridline"], i.gridline, d.RiverBreakoutTabs, r),
-		...h,
-		children: [D && m(D, { id: P }), L ? /* @__PURE__ */ C("div", {
+		ref: E,
+		className: e(o.RiverBreakout, o["RiverBreakout--variant-gridline"], i.gridline, d.RiverBreakoutTabs, h != null && d["RiverBreakoutTabs--has-background-visual"], h != null && x === "block-end" && d["RiverBreakoutTabs--image-position-block-end"], h != null && w && d["RiverBreakoutTabs--background-visual-full-bleed"], r),
+		...T,
+		children: [A && m(A, { id: L }), U ? /* @__PURE__ */ C("div", {
 			className: d.RiverBreakoutTabs__wideTabList,
 			children: [
 				/* @__PURE__ */ S("div", {
-					...Z,
+					...ne,
 					className: d.RiverBreakoutTabs__tablist,
-					style: { "--river-breakout-tabs-columns": String(F) },
-					children: O.map((t, n) => {
-						let r = H === String(n), i = K(String(n)), { body: a } = Q[n];
+					style: { "--river-breakout-tabs-columns": String(R) },
+					children: N.map((t, n) => {
+						let r = G === String(n), i = Y(String(n)), { body: a } = Q[n];
 						return /* @__PURE__ */ S("div", {
 							className: e(d.RiverBreakoutTabs__item, r && d["RiverBreakoutTabs__item--selected"], t.className),
 							children: /* @__PURE__ */ C("button", {
@@ -131,19 +135,19 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 						}, n);
 					})
 				}),
-				/* @__PURE__ */ S("div", {
+				/* @__PURE__ */ C("div", {
 					className: d.RiverBreakoutTabs__sharedVisuals,
-					children: O.map((t, n) => /* @__PURE__ */ S("div", {
-						...G(String(n)),
+					children: [$, N.map((t, n) => /* @__PURE__ */ S("div", {
+						...J(String(n)),
 						tabIndex: -1,
 						className: d.RiverBreakoutTabs__sharedVisualPanel,
 						children: m(t.visual, { className: e(t.visual?.props.className, d.RiverBreakoutTabs__sharedVisual) })
-					}, n))
+					}, n))]
 				}),
 				Q.some((e) => e.action) && /* @__PURE__ */ S("div", {
 					className: d.RiverBreakoutTabs__wideTabListActions,
-					style: { "--river-breakout-tabs-columns": String(F) },
-					children: O.map((t, n) => {
+					style: { "--river-breakout-tabs-columns": String(R) },
+					children: N.map((t, n) => {
 						let { action: r } = Q[n];
 						return /* @__PURE__ */ S("div", {
 							className: d.RiverBreakoutTabs__wideTabListActionItem,
@@ -154,15 +158,15 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 			]
 		}) : /* @__PURE__ */ C("div", {
 			className: d.RiverBreakoutTabs__accordion,
-			children: [q >= 0 && O[q]?.visual && /* @__PURE__ */ S("div", {
+			children: [X >= 0 && N[X]?.visual && /* @__PURE__ */ C("div", {
 				className: d.RiverBreakoutTabs__accordionSharedVisuals,
-				children: m(O[q].visual, { className: e(O[q].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual) })
-			}), O.map((t, n) => /* @__PURE__ */ C(f, {
+				children: [$, m(N[X].visual, { className: e(N[X].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual) })]
+			}), N.map((t, n) => /* @__PURE__ */ C(f, {
 				"data-index": n,
-				className: e(d.RiverBreakoutTabs__accordionItem, n === q && d["RiverBreakoutTabs__item--selected"], t.className),
-				onToggle: X,
-				open: n === q,
-				handleOpen: Y(n),
+				className: e(d.RiverBreakoutTabs__accordionItem, n === X && d["RiverBreakoutTabs__item--selected"], t.className),
+				onToggle: te,
+				open: n === X,
+				handleOpen: ee(n),
 				children: [/* @__PURE__ */ S(f.Heading, {
 					className: d.RiverBreakoutTabs__accordionHeading,
 					children: /* @__PURE__ */ C("span", {

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {Visual as RiverVisual, type RiverVisualProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/* Main Stylesheet (as a CSS Module) /\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n defaultSelectedIndex?: number\n selectedIndex?: number\n onChange?: (selectedIndex: number) => void\n}> &\n Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n as?: 'h2' \| 'h3'\n id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\ntype RiverBreakoutTabsItemChild =\n \| React.ReactElement<RiverBreakoutTabsIconProps>\n \| React.ReactElement<RiverBreakoutTabsHeadingProps>\n \| React.ReactElement<RiverBreakoutTabsContentProps>\n \| React.ReactElement<RiverVisualProps>\n\ntype ExtractedItemParts = {\n icon: React.ReactElement<RiverBreakoutTabsIconProps> \| null\n heading: React.ReactElement<RiverBreakoutTabsHeadingProps> \| null\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null\n visual: React.ReactElement<RiverVisualProps> \| null\n className?: string\n}\n\ntype ExtractedContentParts = {\n action: React.ReactElement<React.ComponentProps<typeof Link>> \| null\n body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n <Heading as={as} id={id} className=\"visually-hidden\">\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n as = 'h3',\n children,\n className,\n size = 'subhead-large',\n weight = 'normal',\n ...props\n}: RiverBreakoutTabsHeadingProps) => (\n <Heading\n as={as}\n className={clsx(styles.RiverBreakoutTabs__heading, className)}\n size={size}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n const Children = useMemo(\n () =>\n React.Children.toArray(children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n }),\n [children],\n )\n\n return (\n <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n {Children}\n </div>\n )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverVisualProps>(({className, ...props}, ref) => (\n <RiverVisual ref={ref} className={className} {...props} />\n))\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n return Children.reduce<ExtractedItemParts>(\n (acc, child) => {\n if (isIcon(child)) {\n acc.icon = child\n }\n\n if (isHeading(child)) {\n acc.heading = child\n }\n\n if (isContent(child)) {\n acc.content = child\n }\n\n if (isVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n )\n}\n\nconst extractWideTabListContentParts = (\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null,\n): ExtractedContentParts => {\n if (!content) {\n return {action: null, body: []}\n }\n\n const Children = React.Children.toArray(content.props.children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n\n return Children.reduce<ExtractedContentParts>(\n (acc, child) => {\n if (isLinkChild(child)) {\n if (!acc.action) {\n acc.action = child\n }\n\n return acc\n }\n\n acc.body.push(child)\n return acc\n },\n {action: null, body: []},\n )\n}\n\nconst clampIndex = (index: number, length: number) => {\n if (length === 0) return -1\n\n const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n ({children, className, defaultSelectedIndex = 0, onChange, selectedIndex, ...props}, ref) => {\n const instanceId = useId()\n const {isLarge} = useWindowSize()\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n const Items = Children.filter(isItem)\n .map(extractItemParts)\n .filter(item => item.heading && item.content && item.visual)\n\n const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n const controlledActiveIndex =\n typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n ? clampIndex(selectedIndex, Items.length)\n : null\n const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n const isWideTabList = isLarge === true\n const suppressOnTabActivateRef = useRef(false)\n\n const handleTabActivate = useCallback(\n (id: string) => {\n if (suppressOnTabActivateRef.current) {\n suppressOnTabActivateRef.current = false\n return\n }\n\n if (!onChange) return\n\n const nextIndex = Number(id)\n if (!Number.isNaN(nextIndex)) {\n onChange(nextIndex)\n }\n },\n [onChange],\n )\n\n const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n defaultTab: initialActiveTab,\n onTabActivate: handleTabActivate,\n })\n\n const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n useEffect(() => {\n if (activeTab === null) return\n\n const nextIndex = Number(activeTab)\n if (!Number.isNaN(nextIndex)) {\n setActiveAccordionIndex(nextIndex)\n }\n }, [activeTab])\n\n useEffect(() => {\n if (controlledActiveIndex === null \|\| controlledActiveIndex < 0) return\n\n const controlledTab = String(controlledActiveIndex)\n if (activeTab !== controlledTab) {\n suppressOnTabActivateRef.current = true\n activateTab(controlledTab)\n }\n\n setActiveAccordionIndex(controlledActiveIndex)\n }, [activateTab, activeTab, controlledActiveIndex])\n\n if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n\n const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n if (isOpen) {\n setActiveAccordionIndex(index)\n if (activeTab !== String(index)) {\n activateTab(String(index))\n }\n }\n }\n\n const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n event.currentTarget.open = true\n }\n }\n\n const tabListProps = A11yHeadingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'River breakout tabs'})\n const WideTabListContentParts = useMemo(\n () => Items.map(item => extractWideTabListContentParts(item.content)),\n [Items],\n )\n\n return (\n <section\n ref={ref}\n className={clsx(\n riverStyles.RiverBreakout,\n riverStyles['RiverBreakout--variant-gridline'],\n gridlineStyles.gridline,\n styles.RiverBreakoutTabs,\n className,\n )}\n {...props}\n >\n {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n {isWideTabList ? (\n <div className={styles.RiverBreakoutTabs__wideTabList}>\n <div\n {...tabListProps}\n className={styles.RiverBreakoutTabs__tablist}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((item, index) => {\n const isSelected = activeTab === String(index)\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n const {body} = WideTabListContentParts[index]\n\n return (\n <div\n key={index}\n className={clsx(\n styles.RiverBreakoutTabs__item,\n isSelected && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n {item.icon &&\n cloneElement(item.icon, {\n className: item.icon.props.className,\n })}\n\n {item.heading &&\n cloneElement(item.heading, {\n className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n })}\n\n {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n </button>\n </div>\n )\n })}\n </div>\n\n <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n {Items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={styles.RiverBreakoutTabs__sharedVisualPanel}\n >\n {cloneElement(item.visual as React.ReactElement<RiverVisualProps>, {\n className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n })}\n </div>\n )\n })}\n </div>\n\n {WideTabListContentParts.some(content => content.action) && (\n <div\n className={styles.RiverBreakoutTabs__wideTabListActions}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((_, index) => {\n const {action} = WideTabListContentParts[index]\n\n return (\n <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n {action &&\n cloneElement(action, {\n className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n })}\n </div>\n )\n })}\n </div>\n )}\n </div>\n ) : (\n <div className={styles.RiverBreakoutTabs__accordion}>\n {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverVisualProps>, {\n className: clsx(\n Items[activeAccordionIndex].visual.props.className,\n styles.RiverBreakoutTabs__accordionSharedVisual,\n ),\n })}\n </div>\n )}\n\n {Items.map((item, index) => {\n return (\n <Accordion\n key={index}\n data-index={index}\n className={clsx(\n styles.RiverBreakoutTabs__accordionItem,\n index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n onToggle={handleAccordionToggle}\n open={index === activeAccordionIndex}\n handleOpen={handleAccordionOpen(index)}\n >\n <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n {item.icon &&\n cloneElement(item.icon, {\n className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n })}\n <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n </span>\n </Accordion.Heading>\n\n <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n })}\n </Accordion.Content>\n </Accordion>\n )\n })}\n </div>\n )}\n </section>\n )\n },\n)\n\n/\n Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n A11yHeading: RiverBreakoutTabsA11yHeading,\n Content: RiverBreakoutTabsContent,\n Heading: RiverBreakoutTabsHeading,\n Icon: RiverBreakoutTabsIcon,\n Item: RiverBreakoutTabsItem,\n Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {Visual as RiverVisual, type RiverVisualProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/* Main Stylesheet (as a CSS Module) /\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n defaultSelectedIndex?: number\n selectedIndex?: number\n onChange?: (selectedIndex: number) => void\n /\n Decorative background rendered behind the visual and persisted across tab\n * changes. Must not contain interactive and remain purely decorative.\n /\n backgroundVisual?: React.ReactNode\n /\n Alignment of media within the visual container when `backgroundVisual` is provided\n /\n imagePosition?: 'center' \| 'block-end'\n /\n When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n /\n backgroundVisualFullBleed?: boolean\n}> &\n Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n as?: 'h2' \| 'h3'\n id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\ntype RiverBreakoutTabsItemChild =\n \| React.ReactElement<RiverBreakoutTabsIconProps>\n \| React.ReactElement<RiverBreakoutTabsHeadingProps>\n \| React.ReactElement<RiverBreakoutTabsContentProps>\n \| React.ReactElement<RiverVisualProps>\n\ntype ExtractedItemParts = {\n icon: React.ReactElement<RiverBreakoutTabsIconProps> \| null\n heading: React.ReactElement<RiverBreakoutTabsHeadingProps> \| null\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null\n visual: React.ReactElement<RiverVisualProps> \| null\n className?: string\n}\n\ntype ExtractedContentParts = {\n action: React.ReactElement<React.ComponentProps<typeof Link>> \| null\n body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n <Heading as={as} id={id} className=\"visually-hidden\">\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n as = 'h3',\n children,\n className,\n size = 'subhead-large',\n weight = 'normal',\n ...props\n}: RiverBreakoutTabsHeadingProps) => (\n <Heading\n as={as}\n className={clsx(styles.RiverBreakoutTabs__heading, className)}\n size={size}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n const Children = useMemo(\n () =>\n React.Children.toArray(children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n }),\n [children],\n )\n\n return (\n <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n {Children}\n </div>\n )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverVisualProps>(({className, ...props}, ref) => (\n <RiverVisual ref={ref} className={className} {...props} />\n))\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n return Children.reduce<ExtractedItemParts>(\n (acc, child) => {\n if (isIcon(child)) {\n acc.icon = child\n }\n\n if (isHeading(child)) {\n acc.heading = child\n }\n\n if (isContent(child)) {\n acc.content = child\n }\n\n if (isVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n )\n}\n\nconst extractWideTabListContentParts = (\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null,\n): ExtractedContentParts => {\n if (!content) {\n return {action: null, body: []}\n }\n\n const Children = React.Children.toArray(content.props.children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n\n return Children.reduce<ExtractedContentParts>(\n (acc, child) => {\n if (isLinkChild(child)) {\n if (!acc.action) {\n acc.action = child\n }\n\n return acc\n }\n\n acc.body.push(child)\n return acc\n },\n {action: null, body: []},\n )\n}\n\nconst clampIndex = (index: number, length: number) => {\n if (length === 0) return -1\n\n const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n (\n {\n children,\n className,\n defaultSelectedIndex = 0,\n onChange,\n selectedIndex,\n backgroundVisual,\n imagePosition = 'center',\n backgroundVisualFullBleed = false,\n ...props\n },\n ref,\n ) => {\n const instanceId = useId()\n const {isLarge} = useWindowSize()\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n const Items = Children.filter(isItem)\n .map(extractItemParts)\n .filter(item => item.heading && item.content && item.visual)\n\n const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n const controlledActiveIndex =\n typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n ? clampIndex(selectedIndex, Items.length)\n : null\n const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n const isWideTabList = isLarge === true\n const suppressOnTabActivateRef = useRef(false)\n\n const handleTabActivate = useCallback(\n (id: string) => {\n if (suppressOnTabActivateRef.current) {\n suppressOnTabActivateRef.current = false\n return\n }\n\n if (!onChange) return\n\n const nextIndex = Number(id)\n if (!Number.isNaN(nextIndex)) {\n onChange(nextIndex)\n }\n },\n [onChange],\n )\n\n const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n defaultTab: initialActiveTab,\n onTabActivate: handleTabActivate,\n })\n\n const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n useEffect(() => {\n if (activeTab === null) return\n\n const nextIndex = Number(activeTab)\n if (!Number.isNaN(nextIndex)) {\n setActiveAccordionIndex(nextIndex)\n }\n }, [activeTab])\n\n useEffect(() => {\n if (controlledActiveIndex === null \|\| controlledActiveIndex < 0) return\n\n const controlledTab = String(controlledActiveIndex)\n if (activeTab !== controlledTab) {\n suppressOnTabActivateRef.current = true\n activateTab(controlledTab)\n }\n\n setActiveAccordionIndex(controlledActiveIndex)\n }, [activateTab, activeTab, controlledActiveIndex])\n\n if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n\n const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n if (isOpen) {\n setActiveAccordionIndex(index)\n if (activeTab !== String(index)) {\n activateTab(String(index))\n }\n }\n }\n\n const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n event.currentTarget.open = true\n }\n }\n\n const tabListProps = A11yHeadingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'River breakout tabs'})\n const WideTabListContentParts = useMemo(\n () => Items.map(item => extractWideTabListContentParts(item.content)),\n [Items],\n )\n\n const BackgroundVisualLayer =\n backgroundVisual != null ? (\n <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n {backgroundVisual}\n </div>\n ) : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n riverStyles.RiverBreakout,\n riverStyles['RiverBreakout--variant-gridline'],\n gridlineStyles.gridline,\n styles.RiverBreakoutTabs,\n backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n backgroundVisual != null &&\n imagePosition === 'block-end' &&\n styles['RiverBreakoutTabs--image-position-block-end'],\n backgroundVisual != null &&\n backgroundVisualFullBleed &&\n styles['RiverBreakoutTabs--background-visual-full-bleed'],\n className,\n )}\n {...props}\n >\n {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n {isWideTabList ? (\n <div className={styles.RiverBreakoutTabs__wideTabList}>\n <div\n {...tabListProps}\n className={styles.RiverBreakoutTabs__tablist}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((item, index) => {\n const isSelected = activeTab === String(index)\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n const {body} = WideTabListContentParts[index]\n\n return (\n <div\n key={index}\n className={clsx(\n styles.RiverBreakoutTabs__item,\n isSelected && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n {item.icon &&\n cloneElement(item.icon, {\n className: item.icon.props.className,\n })}\n\n {item.heading &&\n cloneElement(item.heading, {\n className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n })}\n\n {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n </button>\n </div>\n )\n })}\n </div>\n\n <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n {BackgroundVisualLayer}\n {Items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={styles.RiverBreakoutTabs__sharedVisualPanel}\n >\n {cloneElement(item.visual as React.ReactElement<RiverVisualProps>, {\n className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n })}\n </div>\n )\n })}\n </div>\n\n {WideTabListContentParts.some(content => content.action) && (\n <div\n className={styles.RiverBreakoutTabs__wideTabListActions}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((_, index) => {\n const {action} = WideTabListContentParts[index]\n\n return (\n <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n {action &&\n cloneElement(action, {\n className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n })}\n </div>\n )\n })}\n </div>\n )}\n </div>\n ) : (\n <div className={styles.RiverBreakoutTabs__accordion}>\n {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n {BackgroundVisualLayer}\n {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverVisualProps>, {\n className: clsx(\n Items[activeAccordionIndex].visual.props.className,\n styles.RiverBreakoutTabs__accordionSharedVisual,\n ),\n })}\n </div>\n )}\n\n {Items.map((item, index) => {\n return (\n <Accordion\n key={index}\n data-index={index}\n className={clsx(\n styles.RiverBreakoutTabs__accordionItem,\n index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n onToggle={handleAccordionToggle}\n open={index === activeAccordionIndex}\n handleOpen={handleAccordionOpen(index)}\n >\n <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n {item.icon &&\n cloneElement(item.icon, {\n className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n })}\n <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n </span>\n </Accordion.Heading>\n\n <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n })}\n </Accordion.Content>\n </Accordion>\n )\n })}\n </div>\n )}\n </section>\n )\n },\n)\n\n/\n Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n A11yHeading: RiverBreakoutTabsA11yHeading,\n Content: RiverBreakoutTabsContent,\n Heading: RiverBreakoutTabsHeading,\n Icon: RiverBreakoutTabsIcon,\n Item: RiverBreakoutTabsItem,\n Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}