npm - @primer/react-brand - Versions diffs - 0.0.0-20260623115247 → 0.0.0-20260626110701 - Mend

@primer/react-brand 0.0.0-20260623115247 → 0.0.0-20260626110701

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 (395) 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/Footnotes/Footnotes.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Footnotes.d.ts","sourceRoot":"","sources":["../../src/Footnotes/Footnotes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;~~AAKnD~~,eAAO,MAAM,aAAa,wBAAyB,CAAA;AAEnD,KAAK,+BAA+B,GAChC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACjF,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAC,CAAC,CAAA;AAE5F,KAAK,cAAc,GAAG;IACpB,EAAE,CAAC,EAAE,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,GAAG,+BAA+B,CAAA;AAEnC,iBAAS,IAAI,CAAC,EAAC,EAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,qBAAmC,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,2CAyC3G;AAED,eAAO,MAAM,iBAAiB,qBAAsB,CAAA;AAEpD,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,GAChF,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAC1C,SAAS,CAAC,oBAAoB,CAAC,CAAA;AAEjC,iBAAS,IAAI,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAqB,EAAE,GAAG,IAAI,EAAC,EAAE,kBAAkB,2CAsBtF;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;;CAA8B,CAAA"}
1	+ {"version":3,"file":"Footnotes.d.ts","sourceRoot":"","sources":["../../src/Footnotes/Footnotes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAMnD,eAAO,MAAM,aAAa,wBAAyB,CAAA;AAEnD,KAAK,+BAA+B,GAChC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACjF,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAC,CAAC,CAAA;AAE5F,KAAK,cAAc,GAAG;IACpB,EAAE,CAAC,EAAE,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,GAAG,+BAA+B,CAAA;AAEnC,iBAAS,IAAI,CAAC,EAAC,EAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,qBAAmC,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,2CAyC3G;AAED,eAAO,MAAM,iBAAiB,qBAAsB,CAAA;AAEpD,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,GAChF,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAC1C,SAAS,CAAC,oBAAoB,CAAC,CAAA;AAEjC,iBAAS,IAAI,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAqB,EAAE,GAAG,IAAI,EAAC,EAAE,kBAAkB,2CAsBtF;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;;CAA8B,CAAA"}

package/esm/Footnotes/Footnotes.js CHANGED Viewed

@@ -4,67 +4,68 @@ import { Heading as n } from "../Heading/Heading.js";
 import { ReplyIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
 import { InlineLink as i } from "../InlineLink/InlineLink.js";
 import a from "./Footnotes.module.js";
-import o from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { getTextContent as o } from "../utils/getTextContent.js";
+import s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/Footnotes/Footnotes.tsx
-var u = ["div", "ol"];
-function d({ as: t = "ol", className: r, children: i, visuallyHiddenHeading: u = "Footnotes", ...d }) {
-	let f = o.useMemo(() => o.Children.toArray(i), [i]);
+var d = ["div", "ol"];
+function f({ as: t = "ol", className: r, children: i, visuallyHiddenHeading: o = "Footnotes", ...d }) {
+	let f = s.useMemo(() => s.Children.toArray(i), [i]);
 	if (t === "div") {
-		let t = f.map((e) => o.isValidElement(e) && e.type === p ? o.cloneElement(e, {
+		let t = f.map((e) => s.isValidElement(e) && e.type === m ? s.cloneElement(e, {
 			_variant: "disclaimer",
 			...e.props
 		}) : null);
-		return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
+		return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(n, {
 			className: "visually-hidden",
 			as: "h2",
 			id: "footnote-label",
-			children: u
-		}), /* @__PURE__ */ c("div", {
+			children: o
+		}), /* @__PURE__ */ l("div", {
 			className: e(a.Footnotes, a["Footnotes--variant-disclaimer"], r),
 			...d,
 			children: t
 		})] });
 	}
-	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(n, {
 		className: "visually-hidden",
 		as: "h2",
 		id: "footnote-label",
-		children: u
-	}), /* @__PURE__ */ c("ol", {
+		children: o
+	}), /* @__PURE__ */ l("ol", {
 		className: e(a.Footnotes, a["Footnotes--variant-citations"], r),
 		...d,
 		children: i
 	})] });
 }
-var f = ["a", "p"];
-function p({ className: n, children: o, _variant: s = "citation", ...u }) {
-	if (s === "disclaimer") return /* @__PURE__ */ c(t, {
+var p = ["a", "p"];
+function m({ className: n, children: s, _variant: c = "citation", ...d }) {
+	if (c === "disclaimer") return /* @__PURE__ */ l(t, {
 		as: "p",
 		variant: "muted",
 		size: "100",
 		className: e(a.FootnotesItem, n),
-		children: o
+		children: s
 	});
-	let { href: d, ...f } = u;
-	return /* @__PURE__ */ c("li", {
+	let { href: f, ...p } = d;
+	return /* @__PURE__ */ l("li", {
 		className: e(a.FootnotesItem, n),
-		...f,
-		children: /* @__PURE__ */ l(t, {
+		...p,
+		children: /* @__PURE__ */ u(t, {
 			as: "p",
 			variant: "muted",
 			size: "100",
 			className: e(a.FootnotesItem__citationText),
-			children: [o, d && /* @__PURE__ */ c(i, {
-				href: d,
-				"aria-label": "Back to content",
-				children: /* @__PURE__ */ c(r, { className: a.FootnotesItem__citationIcon })
+			children: [s, f && /* @__PURE__ */ l(i, {
+				href: f,
+				"aria-label": `Back to content ${o(s)}`,
+				children: /* @__PURE__ */ l(r, { className: a.FootnotesItem__citationIcon })
 			})]
 		})
 	});
 }
-var m = Object.assign(d, { Item: p });
+var h = Object.assign(f, { Item: m });
 //#endregion
-export { m as Footnotes, f as FootnotesItemTags, u as FootnotesTags };
+export { h as Footnotes, p as FootnotesItemTags, d as FootnotesTags };
 //# sourceMappingURL=Footnotes.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Footnotes.js","names":[],"sources":["../../src/Footnotes/Footnotes.tsx"],"sourcesContent":["import React from 'react'\nimport {ReplyIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\n\nimport {Heading, InlineLink, Text} from '../'\nimport type {BaseProps} from '../component-helpers'\n\n/** * Main Stylesheet (as a CSS Module) /\nimport styles from './Footnotes.module.css'\n\nexport const FootnotesTags = ['div', 'ol'] as const\n\ntype FootnotesRestrictedPolymorphism =\n \| (React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {as?: 'div'})\n \| (React.HTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLOListElement> & {as?: 'ol'})\n\ntype FootnotesProps = {\n as?: (typeof FootnotesTags)[number]\n visuallyHiddenHeading?: string\n} & FootnotesRestrictedPolymorphism\n\nfunction Root({as = 'ol', className, children, visuallyHiddenHeading = 'Footnotes', ...rest}: FootnotesProps) {\n const memoizedChildren = React.useMemo(() => React.Children.toArray(children), [children])\n\n if (as === 'div') {\n const filteredChildren = memoizedChildren.map(child => {\n if (React.isValidElement<FootnotesItemProps>(child) && child.type === Item) {\n return React.cloneElement(child, {\n _variant: 'disclaimer',\n ...child.props,\n })\n }\n return null\n })\n return (\n <>\n <Heading className=\"visually-hidden\" as=\"h2\" id=\"footnote-label\">\n {visuallyHiddenHeading}\n </Heading>\n <div\n className={clsx(styles.Footnotes, styles['Footnotes--variant-disclaimer'], className)}\n {...(rest as BaseProps<HTMLDivElement>)}\n >\n {filteredChildren}\n </div>\n </>\n )\n }\n\n return (\n <>\n <Heading className=\"visually-hidden\" as=\"h2\" id=\"footnote-label\">\n {visuallyHiddenHeading}\n </Heading>\n <ol\n className={clsx(styles.Footnotes, styles['Footnotes--variant-citations'], className)}\n {...(rest as BaseProps<HTMLOListElement>)}\n >\n {children}\n </ol>\n </>\n )\n}\n\nexport const FootnotesItemTags = ['a', 'p'] as const\n\ntype DefaultFootnotesItemProps = {\n _variant?: 'disclaimer'\n}\n\ntype CitationFootnotesItemProps = {\n _variant?: 'citation'\n href?: string\n}\n\ntype FootnotesItemProps = (DefaultFootnotesItemProps \| CitationFootnotesItemProps) &\n React.HTMLAttributes<HTMLParagraphElement> &\n BaseProps<HTMLParagraphElement>\n\nfunction Item({className, children, _variant = 'citation', ...rest}: FootnotesItemProps) {\n if (_variant === 'disclaimer') {\n return (\n <Text as=\"p\" variant=\"muted\" size=\"100\" className={clsx(styles.FootnotesItem, className)}>\n {children}\n </Text>\n )\n }\n\n const {href, ...restSansHref} = rest as CitationFootnotesItemProps\n return (\n <li className={clsx(styles.FootnotesItem, className)} {...(restSansHref as CitationFootnotesItemProps)}>\n <Text as=\"p\" variant=\"muted\" size=\"100\" className={clsx(styles.FootnotesItem__citationText)}>\n {children}\n {href && (\n <InlineLink href={href} aria-label~~=\"~~Back to content\">\n <ReplyIcon className={styles.FootnotesItem__citationIcon} />\n </InlineLink>\n )}\n </Text>\n </li>\n )\n}\n\n/\n Footnotes component\n * {@link https://primer.style/brand/components/Footnotes/ See usage examples}.\n */\nexport const Footnotes = Object.assign(Root, {Item})\n"],"mappings":"~~;;;;;;;;;AAUA~~,IAAa,IAAgB,CAAC,OAAO,KAAK;AAW1C,SAAS,EAAK,EAAC,QAAK,MAAM,cAAW,aAAU,2BAAwB,aAAa,GAAG,KAAuB;CAC5G,IAAM,IAAmB,EAAM,cAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC;AAE1F,KAAI,MAAO,OAAO;EAChB,IAAM,IAAmB,EAAiB,KAAI,MACxC,EAAM,eAAmC,EAAM,IAAI,EAAM,SAAS,IAC7D,EAAM,aAAa,GAAO;GAC/B,UAAU;GACV,GAAG,EAAM;GACV,CAAC,GAEG,KACP;AACF,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAS,WAAU;GAAkB,IAAG;GAAK,IAAG;aAC7C;GACO,CAAA,EACV,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,WAAW,EAAO,kCAAkC,EAAU;GACrF,GAAK;aAEJ;GACG,CAAA,CACL,EAAA,CAAA;;AAIP,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAS,WAAU;EAAkB,IAAG;EAAK,IAAG;YAC7C;EACO,CAAA,EACV,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,WAAW,EAAO,iCAAiC,EAAU;EACpF,GAAK;EAEJ;EACE,CAAA,CACJ,EAAA,CAAA;;AAIP,IAAa,IAAoB,CAAC,KAAK,IAAI;AAe3C,SAAS,EAAK,EAAC,cAAW,aAAU,cAAW,YAAY,GAAG,KAA2B;AACvF,KAAI,MAAa,aACf,QACE,kBAAC,GAAD;EAAM,IAAG;EAAI,SAAQ;EAAQ,MAAK;EAAM,WAAW,EAAK,EAAO,eAAe,EAAU;EACrF;EACI,CAAA;CAIX,IAAM,EAAC,SAAM,GAAG,MAAgB;AAChC,QACE,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,GAAK;YACzD,kBAAC,GAAD;GAAM,IAAG;GAAI,SAAQ;GAAQ,MAAK;GAAM,WAAW,EAAK,EAAO,4BAA4B;aAA3F,CACG,GACA,KACC,kBAAC,GAAD;IAAkB;IAAM,~~cAAW~~;~~cACjC~~,kBAAC,GAAD,EAAW,WAAW,EAAO,6BAA+B,CAAA;IACjD,CAAA,CAEV;;EACJ,CAAA;;AAQT,IAAa,IAAY,OAAO,OAAO,GAAM,EAAC,SAAK,CAAC"}
1	+ {"version":3,"file":"Footnotes.js","names":[],"sources":["../../src/Footnotes/Footnotes.tsx"],"sourcesContent":["import React from 'react'\nimport {ReplyIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\n\nimport {Heading, InlineLink, Text} from '../'\nimport type {BaseProps} from '../component-helpers'\n\n/** * Main Stylesheet (as a CSS Module) /\nimport styles from './Footnotes.module.css'\nimport {getTextContent} from '../utils/getTextContent'\n\nexport const FootnotesTags = ['div', 'ol'] as const\n\ntype FootnotesRestrictedPolymorphism =\n \| (React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {as?: 'div'})\n \| (React.HTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLOListElement> & {as?: 'ol'})\n\ntype FootnotesProps = {\n as?: (typeof FootnotesTags)[number]\n visuallyHiddenHeading?: string\n} & FootnotesRestrictedPolymorphism\n\nfunction Root({as = 'ol', className, children, visuallyHiddenHeading = 'Footnotes', ...rest}: FootnotesProps) {\n const memoizedChildren = React.useMemo(() => React.Children.toArray(children), [children])\n\n if (as === 'div') {\n const filteredChildren = memoizedChildren.map(child => {\n if (React.isValidElement<FootnotesItemProps>(child) && child.type === Item) {\n return React.cloneElement(child, {\n _variant: 'disclaimer',\n ...child.props,\n })\n }\n return null\n })\n return (\n <>\n <Heading className=\"visually-hidden\" as=\"h2\" id=\"footnote-label\">\n {visuallyHiddenHeading}\n </Heading>\n <div\n className={clsx(styles.Footnotes, styles['Footnotes--variant-disclaimer'], className)}\n {...(rest as BaseProps<HTMLDivElement>)}\n >\n {filteredChildren}\n </div>\n </>\n )\n }\n\n return (\n <>\n <Heading className=\"visually-hidden\" as=\"h2\" id=\"footnote-label\">\n {visuallyHiddenHeading}\n </Heading>\n <ol\n className={clsx(styles.Footnotes, styles['Footnotes--variant-citations'], className)}\n {...(rest as BaseProps<HTMLOListElement>)}\n >\n {children}\n </ol>\n </>\n )\n}\n\nexport const FootnotesItemTags = ['a', 'p'] as const\n\ntype DefaultFootnotesItemProps = {\n _variant?: 'disclaimer'\n}\n\ntype CitationFootnotesItemProps = {\n _variant?: 'citation'\n href?: string\n}\n\ntype FootnotesItemProps = (DefaultFootnotesItemProps \| CitationFootnotesItemProps) &\n React.HTMLAttributes<HTMLParagraphElement> &\n BaseProps<HTMLParagraphElement>\n\nfunction Item({className, children, _variant = 'citation', ...rest}: FootnotesItemProps) {\n if (_variant === 'disclaimer') {\n return (\n <Text as=\"p\" variant=\"muted\" size=\"100\" className={clsx(styles.FootnotesItem, className)}>\n {children}\n </Text>\n )\n }\n\n const {href, ...restSansHref} = rest as CitationFootnotesItemProps\n return (\n <li className={clsx(styles.FootnotesItem, className)} {...(restSansHref as CitationFootnotesItemProps)}>\n <Text as=\"p\" variant=\"muted\" size=\"100\" className={clsx(styles.FootnotesItem__citationText)}>\n {children}\n {href && (\n <InlineLink href={href} aria-label={`Back to content ${getTextContent(children)}`}>\n <ReplyIcon className={styles.FootnotesItem__citationIcon} />\n </InlineLink>\n )}\n </Text>\n </li>\n )\n}\n\n/\n Footnotes component\n * {@link https://primer.style/brand/components/Footnotes/ See usage examples}.\n */\nexport const Footnotes = Object.assign(Root, {Item})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,IAAgB,CAAC,OAAO,KAAK;AAW1C,SAAS,EAAK,EAAC,QAAK,MAAM,cAAW,aAAU,2BAAwB,aAAa,GAAG,KAAuB;CAC5G,IAAM,IAAmB,EAAM,cAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC;AAE1F,KAAI,MAAO,OAAO;EAChB,IAAM,IAAmB,EAAiB,KAAI,MACxC,EAAM,eAAmC,EAAM,IAAI,EAAM,SAAS,IAC7D,EAAM,aAAa,GAAO;GAC/B,UAAU;GACV,GAAG,EAAM;GACV,CAAC,GAEG,KACP;AACF,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAS,WAAU;GAAkB,IAAG;GAAK,IAAG;aAC7C;GACO,CAAA,EACV,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,WAAW,EAAO,kCAAkC,EAAU;GACrF,GAAK;aAEJ;GACG,CAAA,CACL,EAAA,CAAA;;AAIP,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAS,WAAU;EAAkB,IAAG;EAAK,IAAG;YAC7C;EACO,CAAA,EACV,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,WAAW,EAAO,iCAAiC,EAAU;EACpF,GAAK;EAEJ;EACE,CAAA,CACJ,EAAA,CAAA;;AAIP,IAAa,IAAoB,CAAC,KAAK,IAAI;AAe3C,SAAS,EAAK,EAAC,cAAW,aAAU,cAAW,YAAY,GAAG,KAA2B;AACvF,KAAI,MAAa,aACf,QACE,kBAAC,GAAD;EAAM,IAAG;EAAI,SAAQ;EAAQ,MAAK;EAAM,WAAW,EAAK,EAAO,eAAe,EAAU;EACrF;EACI,CAAA;CAIX,IAAM,EAAC,SAAM,GAAG,MAAgB;AAChC,QACE,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,GAAK;YACzD,kBAAC,GAAD;GAAM,IAAG;GAAI,SAAQ;GAAQ,MAAK;GAAM,WAAW,EAAK,EAAO,4BAA4B;aAA3F,CACG,GACA,KACC,kBAAC,GAAD;IAAkB;IAAM,cAAY,mBAAmB,EAAe,EAAS;cAC7E,kBAAC,GAAD,EAAW,WAAW,EAAO,6BAA+B,CAAA;IACjD,CAAA,CAEV;;EACJ,CAAA;;AAQT,IAAa,IAAY,OAAO,OAAO,GAAM,EAAC,SAAK,CAAC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,eAAO,MAAM,YAAY,uFAAwF,CAAA;AACjH,eAAO,MAAM,WAAW,+CAAgD,CAAA;AAExE,eAAO,MAAM,cAAc,gGASjB,CAAA;AACV,eAAO,MAAM,cAAc,8CAA+C,CAAA;AAC1E,eAAO,MAAM,oBAAoB,0CAA2C,CAAA;AAC5E,eAAO,MAAM,mBAAmB,mDAAoD,CAAA;AAEpF,eAAO,MAAM,iBAAiB,MAAiB,CAAA;AAC/C,eAAO,MAAM,kBAAkB,aAAyB,CAAA;AAExD,KAAK,qBAAqB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,KAAK,sBAAsB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,KAAK,4BAA4B,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzE,KAAK,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,KAAK,uBAAuB,GAAG,MAAM,GAAG,SAAS,CAAA;AAEjD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,IAAI,CAAC,EAAE,sBAAsB,CAAA;CAC9B,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,MAAM,CAAC,EAAE,4BAA4B,CAAA;IACrC,OAAO,CAAC,EAAE,4BAA4B,CAAA;IACtC,IAAI,CAAC,EAAE,4BAA4B,CAAA;CACpC,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAA;IAC9B,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;CAOpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,qBAAqB,GAAG,mBAAmB,CAAA;IACpD,OAAO,CAAC,EAAE,sBAAsB,GAAG,oBAAoB,CAAA;IACvD,aAAa,CAAC,EAAE,4BAA4B,GAAG,0BAA0B,CAAA;IACzE,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,QAAQ,CAAC,EAAE,uBAAuB,CAAA;CACnC,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAC1C,SAAS,CAAC,kBAAkB,CAAC,CAAA;AAE/B,eAAO,MAAM,OAAO,+HA4DnB,CAAA"}
1	+ {"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,eAAO,MAAM,YAAY,uFAAwF,CAAA;AACjH,eAAO,MAAM,WAAW,+CAAgD,CAAA;AAExE,eAAO,MAAM,cAAc,gGASjB,CAAA;AACV,eAAO,MAAM,cAAc,8CAA+C,CAAA;AAC1E,eAAO,MAAM,oBAAoB,0CAA2C,CAAA;AAC5E,eAAO,MAAM,mBAAmB,mDAAoD,CAAA;AAEpF,eAAO,MAAM,iBAAiB,MAAiB,CAAA;AAC/C,eAAO,MAAM,kBAAkB,aAAyB,CAAA;AAExD,KAAK,qBAAqB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,KAAK,sBAAsB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,KAAK,4BAA4B,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzE,KAAK,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,KAAK,uBAAuB,GAAG,MAAM,GAAG,SAAS,CAAA;AAEjD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,IAAI,CAAC,EAAE,sBAAsB,CAAA;CAC9B,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,MAAM,CAAC,EAAE,4BAA4B,CAAA;IACrC,OAAO,CAAC,EAAE,4BAA4B,CAAA;IACtC,IAAI,CAAC,EAAE,4BAA4B,CAAA;CACpC,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAA;IAC9B,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;CAOpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,qBAAqB,GAAG,mBAAmB,CAAA;IACpD,OAAO,CAAC,EAAE,sBAAsB,GAAG,oBAAoB,CAAA;IACvD,aAAa,CAAC,EAAE,4BAA4B,GAAG,0BAA0B,CAAA;IACzE,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,QAAQ,CAAC,EAAE,uBAAuB,CAAA;CACnC,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAC1C,SAAS,CAAC,kBAAkB,CAAC,CAAA;AAE/B;;GAEG;AACH,eAAO,MAAM,OAAO,+HA4DnB,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.js","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Heading.module.css'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const HeadingSizes = ['display', '1', '2', '3', '4', '5', '6', 'subhead-large', 'subhead-medium'] as const\nexport const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport const HeadingWeights = [\n 'heavy',\n 'extrabold',\n 'bold',\n 'semibold',\n 'medium',\n 'normal',\n 'light',\n 'extralight',\n] as const\nexport const HeadingStretch = ['condensed', 'normal', 'expanded'] as const\nexport const HeadingLetterSpacing = ['condensed', 'normal', 'none'] as const\nexport const HeadingFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultHeadingTag = HeadingTags[1]\nexport const defaultHeadingFont = HeadingFontVariants[0]\n\ntype HeadingWeightVariants = (typeof HeadingWeights)[number]\ntype HeadingStretchVariants = (typeof HeadingStretch)[number]\ntype HeadingLetterSpacingVariants = (typeof HeadingLetterSpacing)[number]\ntype HeadingFontVariants = (typeof HeadingFontVariants)[number]\ntype HeadingTextWrapVariants = 'wrap' \| 'balance'\n\ntype ResponsiveStretchMap = {\n narrow?: HeadingStretchVariants\n regular?: HeadingStretchVariants\n wide?: HeadingStretchVariants\n}\n\ntype ResponsiveLetterSpacingMap = {\n narrow?: HeadingLetterSpacingVariants\n regular?: HeadingLetterSpacingVariants\n wide?: HeadingLetterSpacingVariants\n}\n\ntype ResponsiveWeightMap = {\n narrow?: HeadingWeightVariants\n regular?: HeadingWeightVariants\n wide?: HeadingWeightVariants\n}\n\nexport const classMap = {\n h1: HeadingSizes[1],\n h2: HeadingSizes[2],\n h3: HeadingSizes[3],\n h4: HeadingSizes[4],\n h5: HeadingSizes[5],\n h6: HeadingSizes[6],\n}\n\nexport type HeadingProps = {\n as?: (typeof HeadingTags)[number]\n size?: (typeof HeadingSizes)[number]\n weight?: HeadingWeightVariants \| ResponsiveWeightMap\n stretch?: HeadingStretchVariants \| ResponsiveStretchMap\n letterSpacing?: HeadingLetterSpacingVariants \| ResponsiveLetterSpacingMap\n font?: HeadingFontVariants\n textWrap?: HeadingTextWrapVariants\n} & React.HTMLAttributes<HTMLHeadingElement> &\n BaseProps<HTMLHeadingElement>\n\nexport const Heading = forwardRef<HTMLHeadingElement, PropsWithChildren<HeadingProps>>(\n (\n {\n animate,\n className,\n children,\n as: HeadingComponent = defaultHeadingTag,\n size,\n letterSpacing,\n weight,\n stretch,\n style,\n font = 'mona-sans',\n textWrap = 'balance',\n ...rest\n },\n ref,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const buildClass = (type: string, value) => {\n if (!value) return null\n return typeof value === 'string'\n ? styles[`Heading--${type}-${value}`]\n : Object.keys(value)\n .map(viewport => {\n return styles[`Heading-${viewport}--${type}-${value[viewport]}`]\n })\n .join(' ')\n }\n\n const weightClass = useMemo(() => buildClass('weight', weight), [weight])\n const stretchClass = useMemo(() => buildClass('stretch', stretch), [stretch])\n const letterSpacingClass = useMemo(() => buildClass('letter-spacing', letterSpacing), [letterSpacing])\n\n const headingClassNames = clsx(\n animationClasses,\n styles.Heading,\n styles[`Heading-font--${font}`],\n !size && styles[`Heading--${classMap[HeadingComponent]}`],\n size && styles[`Heading--${size}`],\n styles[`Heading--textWrap-${textWrap}`],\n weight && weightClass,\n stretch && stretchClass,\n letterSpacingClass && letterSpacingClass,\n className,\n )\n\n if (!HeadingTags.includes(HeadingComponent)) {\n // eslint-disable-next-line no-console\n console.error(`Heading: 'as' prop must be one of ${HeadingTags.join(', ')}`)\n return null\n }\n\n return (\n <HeadingComponent ref={ref} className={headingClassNames} style={{...animationInlineStyles, ...style}} {...rest}>\n {children}\n </HeadingComponent>\n )\n },\n)\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;CAAC;CAAW;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAiB;CAAiB,EAC3F,IAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK,EAElD,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,IAAiB;CAAC;CAAa;CAAU;CAAW,EACpD,IAAuB;CAAC;CAAa;CAAU;CAAO,EACtD,IAAsB;CAAC;CAAa;CAAc;CAAY,EAE9D,IAAoB,EAAY,IAChC,IAAqB,EAAoB,IA0BzC,IAAW;CACtB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CAClB,~~EAaY~~,IAAU,GAEnB,EACE,YACA,cACA,aACA,IAAI,IAAmB,GACvB,SACA,kBACA,WACA,YACA,UACA,UAAO,aACP,cAAW,WACX,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,KAAc,GAAc,MAC3B,IACE,OAAO,KAAU,WACpB,EAAO,YAAY,EAAK,GAAG,OAC3B,OAAO,KAAK,EAAM,CACf,KAAI,MACI,EAAO,WAAW,EAAS,IAAI,EAAK,GAAG,EAAM,MACpD,CACD,KAAK,IAAI,GAPG,MAUf,IAAc,QAAc,EAAW,UAAU,EAAO,EAAE,CAAC,EAAO,CAAC,EACnE,IAAe,QAAc,EAAW,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EACvE,IAAqB,QAAc,EAAW,kBAAkB,EAAc,EAAE,CAAC,EAAc,CAAC,EAEhG,IAAoB,EACxB,GACA,EAAO,SACP,EAAO,iBAAiB,MACxB,CAAC,KAAQ,EAAO,YAAY,EAAS,OACrC,KAAQ,EAAO,YAAY,MAC3B,EAAO,qBAAqB,MAC5B,KAAU,GACV,KAAW,GACX,KAAsB,GACtB,EACD;AAQD,QANK,EAAY,SAAS,EAAiB,GAOzC,kBAAC,GAAD;EAAuB;EAAK,WAAW;EAAmB,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAAE,GAAI;EACxG;EACgB,CAAA,IAPnB,QAAQ,MAAM,qCAAqC,EAAY,KAAK,KAAK,GAAG,EACrE;EASZ"}
1	+ {"version":3,"file":"Heading.js","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Heading.module.css'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const HeadingSizes = ['display', '1', '2', '3', '4', '5', '6', 'subhead-large', 'subhead-medium'] as const\nexport const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport const HeadingWeights = [\n 'heavy',\n 'extrabold',\n 'bold',\n 'semibold',\n 'medium',\n 'normal',\n 'light',\n 'extralight',\n] as const\nexport const HeadingStretch = ['condensed', 'normal', 'expanded'] as const\nexport const HeadingLetterSpacing = ['condensed', 'normal', 'none'] as const\nexport const HeadingFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultHeadingTag = HeadingTags[1]\nexport const defaultHeadingFont = HeadingFontVariants[0]\n\ntype HeadingWeightVariants = (typeof HeadingWeights)[number]\ntype HeadingStretchVariants = (typeof HeadingStretch)[number]\ntype HeadingLetterSpacingVariants = (typeof HeadingLetterSpacing)[number]\ntype HeadingFontVariants = (typeof HeadingFontVariants)[number]\ntype HeadingTextWrapVariants = 'wrap' \| 'balance'\n\ntype ResponsiveStretchMap = {\n narrow?: HeadingStretchVariants\n regular?: HeadingStretchVariants\n wide?: HeadingStretchVariants\n}\n\ntype ResponsiveLetterSpacingMap = {\n narrow?: HeadingLetterSpacingVariants\n regular?: HeadingLetterSpacingVariants\n wide?: HeadingLetterSpacingVariants\n}\n\ntype ResponsiveWeightMap = {\n narrow?: HeadingWeightVariants\n regular?: HeadingWeightVariants\n wide?: HeadingWeightVariants\n}\n\nexport const classMap = {\n h1: HeadingSizes[1],\n h2: HeadingSizes[2],\n h3: HeadingSizes[3],\n h4: HeadingSizes[4],\n h5: HeadingSizes[5],\n h6: HeadingSizes[6],\n}\n\nexport type HeadingProps = {\n /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. /\n as?: (typeof HeadingTags)[number]\n /\n Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.\n \n @example\n * <Heading as=\"h2\" size=\"4\">This h2 will appear visually identical to an h4</Heading>\n /\n size?: (typeof HeadingSizes)[number]\n weight?: HeadingWeightVariants \| ResponsiveWeightMap\n stretch?: HeadingStretchVariants \| ResponsiveStretchMap\n letterSpacing?: HeadingLetterSpacingVariants \| ResponsiveLetterSpacingMap\n font?: HeadingFontVariants\n textWrap?: HeadingTextWrapVariants\n} & React.HTMLAttributes<HTMLHeadingElement> &\n BaseProps<HTMLHeadingElement>\n\n/\n Use the heading component to render titles or subtitle text.\n */\nexport const Heading = forwardRef<HTMLHeadingElement, PropsWithChildren<HeadingProps>>(\n (\n {\n animate,\n className,\n children,\n as: HeadingComponent = defaultHeadingTag,\n size,\n letterSpacing,\n weight,\n stretch,\n style,\n font = 'mona-sans',\n textWrap = 'balance',\n ...rest\n },\n ref,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const buildClass = (type: string, value) => {\n if (!value) return null\n return typeof value === 'string'\n ? styles[`Heading--${type}-${value}`]\n : Object.keys(value)\n .map(viewport => {\n return styles[`Heading-${viewport}--${type}-${value[viewport]}`]\n })\n .join(' ')\n }\n\n const weightClass = useMemo(() => buildClass('weight', weight), [weight])\n const stretchClass = useMemo(() => buildClass('stretch', stretch), [stretch])\n const letterSpacingClass = useMemo(() => buildClass('letter-spacing', letterSpacing), [letterSpacing])\n\n const headingClassNames = clsx(\n animationClasses,\n styles.Heading,\n styles[`Heading-font--${font}`],\n !size && styles[`Heading--${classMap[HeadingComponent]}`],\n size && styles[`Heading--${size}`],\n styles[`Heading--textWrap-${textWrap}`],\n weight && weightClass,\n stretch && stretchClass,\n letterSpacingClass && letterSpacingClass,\n className,\n )\n\n if (!HeadingTags.includes(HeadingComponent)) {\n // eslint-disable-next-line no-console\n console.error(`Heading: 'as' prop must be one of ${HeadingTags.join(', ')}`)\n return null\n }\n\n return (\n <HeadingComponent ref={ref} className={headingClassNames} style={{...animationInlineStyles, ...style}} {...rest}>\n {children}\n </HeadingComponent>\n )\n },\n)\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;CAAC;CAAW;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAiB;CAAiB,EAC3F,IAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK,EAElD,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,IAAiB;CAAC;CAAa;CAAU;CAAW,EACpD,IAAuB;CAAC;CAAa;CAAU;CAAO,EACtD,IAAsB;CAAC;CAAa;CAAc;CAAY,EAE9D,IAAoB,EAAY,IAChC,IAAqB,EAAoB,IA0BzC,IAAW;CACtB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CAClB,EAuBY,IAAU,GAEnB,EACE,YACA,cACA,aACA,IAAI,IAAmB,GACvB,SACA,kBACA,WACA,YACA,UACA,UAAO,aACP,cAAW,WACX,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,KAAc,GAAc,MAC3B,IACE,OAAO,KAAU,WACpB,EAAO,YAAY,EAAK,GAAG,OAC3B,OAAO,KAAK,EAAM,CACf,KAAI,MACI,EAAO,WAAW,EAAS,IAAI,EAAK,GAAG,EAAM,MACpD,CACD,KAAK,IAAI,GAPG,MAUf,IAAc,QAAc,EAAW,UAAU,EAAO,EAAE,CAAC,EAAO,CAAC,EACnE,IAAe,QAAc,EAAW,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EACvE,IAAqB,QAAc,EAAW,kBAAkB,EAAc,EAAE,CAAC,EAAc,CAAC,EAEhG,IAAoB,EACxB,GACA,EAAO,SACP,EAAO,iBAAiB,MACxB,CAAC,KAAQ,EAAO,YAAY,EAAS,OACrC,KAAQ,EAAO,YAAY,MAC3B,EAAO,qBAAqB,MAC5B,KAAU,GACV,KAAW,GACX,KAAsB,GACtB,EACD;AAQD,QANK,EAAY,SAAS,EAAiB,GAOzC,kBAAC,GAAD;EAAuB;EAAK,WAAW;EAAmB,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAAE,GAAI;EACxG;EACgB,CAAA,IAPnB,QAAQ,MAAM,qCAAqC,EAAY,KAAK,KAAK,GAAG,EACrE;EASZ"}

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"}