npm - @primer/react-brand - Versions diffs - 0.68.0-rc.b6d410ef → 0.68.0 - Mend

@primer/react-brand 0.68.0-rc.b6d410ef → 0.68.0

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 (414) hide show

package/esm/LogoSuite/LogoSuite.module-69Mthqju.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ{padding-block-end:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN+.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN{padding-block-start:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(:has(.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms)) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL{font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);text-transform:uppercase;color:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-16)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX{text-align:left}.Primer_Brand__LogoSuite-module__LogoSuite--center___j119b,.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u{text-align:center}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{padding-block-start:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{row-gap:var(--brand-LogoSuite-logobar-rowGap);flex-wrap:wrap;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-default___sGwUx{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-default);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-default);column-gap:var(--brand-LogoSuite-logobar-columnGap-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-condensed___T86E8{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-condensed);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed);column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL:not(.Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO)+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:var(--base-size-44);padding-block-start:0}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru a,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR a{width:auto;height:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru path{fill:var(--brand-LogoSuite-color-logo-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru img{filter:var(--brand-LogoSuite-color-logo-filter-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR path{fill:var(--brand-LogoSuite-color-logo-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR img{filter:var(--brand-LogoSuite-color-logo-filter-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:center}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:space-between}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC a:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2);border-radius:var(--base-size-4)}.Primer_Brand__LogoSuite-module__LogoSuite--hasDivider___Wj8u_{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{align-items:center;gap:var(--base-size-24);flex-direction:row;max-width:100vw;margin:auto;display:flex;position:relative}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{justify-content:space-around;align-items:center;gap:var(--marquee-gap);min-width:100%;animation-name:Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4;animation-duration:var(--brand-LogoSuite-logobar-marquee-default);flex-shrink:0;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-play-state:running;animation-fill-mode:none;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-default___nsm9D{animation-duration:var(--brand-LogoSuite-logobar-marquee-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-slow___NZHrb{animation-duration:var(--brand-LogoSuite-logobar-marquee-slow)}@keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4{0%{transform:translate(0)}to{transform:translateX(calc(-100% - var(--marquee-gap)))}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS,.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-play-state:paused}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK{padding-block:var(--base-size-4);-webkit-user-select:none;user-select:none;gap:var(--marquee-gap);flex:1;min-width:0;display:flex;overflow:hidden visible;-webkit-mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000);mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--paused___7p9ka *{animation-play-state:paused!important}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee--focused___zizoE .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-name:none}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie{cursor:pointer;width:var(--base-size-32);height:var(--base-size-32);border-radius:var(--base-size-48);border:none;border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-LogoSuite-color-control-rest);transition:background-color var(--brand-animation-duration-faster);flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:hover{background-color:var(--brand-LogoSuite-color-control-hover)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie svg{width:var(--base-size-16);height:var(--base-size-16);fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie path{fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{gap:0;padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-20);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:auto}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-32) var(--base-size-20) var(--base-size-32);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{width:100%;max-width:none}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-8)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{padding-block-start:0}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:91px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=64rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{max-width:1280px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{text-align:left;padding:var(--base-size-64)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-64)}}@media screen and (width>=1281px){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC:first-child{border-inline-start:none}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf{position:relative;overflow:visible}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:before{content:"";inset:calc(-1 * var(--base-size-16)) 0;z-index:1;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(var(--base-size-6));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover:before,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within:before{opacity:1}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within img{opacity:.7;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:0;visibility:hidden;z-index:2;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:1;visibility:visible}

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

@@ -1,4 +1,4 @@
-import './LogoSuite.module-CWV4mJoG.css';var e = {
+import './LogoSuite.module-69Mthqju.css';var e = {
 	LogoSuite: "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ",
 	"LogoSuite--default": "Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN",
 	LogoSuite__description: "Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) /\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n text-transform: uppercase;\n color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n display: flex;\n flex-wrap: wrap;\n row-gap: var(--brand-LogoSuite-logobar-rowGap);\n justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n padding-block-start: 0;\n margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n width: auto;\n height: var(--base-size-28);\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite__logobar--variant-muted svg,\n .LogoSuite__logobar--variant-muted img,\n .LogoSuite__logobar--variant-muted a,\n .LogoSuite__logobar--variant-emphasis svg,\n .LogoSuite__logobar--variant-emphasis img,\n .LogoSuite__logobar--variant-emphasis a {\n height: var(--base-size-32);\n }\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted path {\n fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted img {\n filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis path {\n fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis img {\n filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--justify .LogoSuite__logobar {\n justify-content: space-between;\n }\n}\n\n.LogoSuite__logobar a:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-24);\n margin: auto;\n max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: var(--marquee-gap);\n min-width: 100%;\n animation-name: LogobarScrollX;\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(calc(-100% - var(--marquee-gap)));\n }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,\n.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {\n animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n display: flex;\n overflow-x: hidden;\n overflow-y: visible;\n padding-block: var(--base-size-4);\n user-select: none;\n gap: var(--marquee-gap);\n flex: 1;\n min-width: 0;\n -webkit-mask-image: linear-gradient(\n to right,\n hsl(0 0% 0% / 0),\n hsl(0 0% 0% / 1) 20%,\n hsl(0 0% 0% / 1) 80%,\n hsl(0 0% 0% / 0)\n );\n mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused {\n animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {\n animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n cursor: pointer;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-32);\n height: var(--base-size-32);\n margin: 0;\n padding: 0;\n border: none;\n border-radius: var(--base-size-48);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-LogoSuite-color-control-rest);\n transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n fill: var(--brand-color-text-muted);\n}\n\n/* Gridline expressive variant styles /\n.LogoSuite--gridline-expressive {\n padding: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__content {\n padding-inline: 0;\n gap: 0;\n max-width: 618px; / From the Figma design /\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n margin-block-start: auto;\n}\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n max-width: none;\n width: 100%;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n padding-block-start: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-36);\n }\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 64rem) {\n .LogoSuite--gridline-expressive .LogoSuite__content {\n max-width: 1280px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n text-align: left;\n padding: var(--base-size-64);\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 1281px) {\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n / When the logobar is the only column visible (no adjacent text), this removes start border /\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n border-inline-start: none;\n }\n}\n\n.LogoSuite__logobar--has-takeover {\n position: relative;\n overflow: visible;\n}\n\n/ Glass blur overlay effect /\n.LogoSuite__logobar--has-takeover::before {\n content: '';\n position: absolute;\n inset: calc(-1 var(--base-size-16)) 0;\n z-index: 1;\n pointer-events: none;\n opacity: 0;\n backdrop-filter: blur(var(--base-size-6));\n -webkit-backdrop-filter: blur(var(--base-size-6));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n opacity: 0.7;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n opacity: 0;\n visibility: hidden;\n z-index: 2;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n opacity: 1;\n visibility: visible;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) /\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n text-transform: uppercase;\n color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n display: flex;\n flex-wrap: wrap;\n row-gap: var(--brand-LogoSuite-logobar-rowGap);\n justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n padding-block-start: 0;\n margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n width: auto;\n height: var(--base-size-32);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted path {\n fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted img {\n filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis path {\n fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis img {\n filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--justify .LogoSuite__logobar {\n justify-content: space-between;\n }\n}\n\n.LogoSuite__logobar a:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-24);\n margin: auto;\n max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: var(--marquee-gap);\n min-width: 100%;\n animation-name: LogobarScrollX;\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(calc(-100% - var(--marquee-gap)));\n }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,\n.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {\n animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n display: flex;\n overflow-x: hidden;\n overflow-y: visible;\n padding-block: var(--base-size-4);\n user-select: none;\n gap: var(--marquee-gap);\n flex: 1;\n min-width: 0;\n -webkit-mask-image: linear-gradient(\n to right,\n hsl(0 0% 0% / 0),\n hsl(0 0% 0% / 1) 20%,\n hsl(0 0% 0% / 1) 80%,\n hsl(0 0% 0% / 0)\n );\n mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused {\n animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {\n animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n cursor: pointer;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-32);\n height: var(--base-size-32);\n margin: 0;\n padding: 0;\n border: none;\n border-radius: var(--base-size-48);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-LogoSuite-color-control-rest);\n transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n fill: var(--brand-color-text-muted);\n}\n\n/* Gridline expressive variant styles /\n.LogoSuite--gridline-expressive {\n padding: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__content {\n padding-inline: 0;\n gap: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n margin-block-start: auto;\n}\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n max-width: none;\n width: 100%;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n padding-block-start: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--gridline-expressive {\n padding-inline: 91px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-40);\n }\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 64rem) {\n .LogoSuite--gridline-expressive {\n padding-inline: 0;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__content {\n max-width: 1280px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n text-align: left;\n padding: var(--base-size-64);\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 1281px) {\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n / When the logobar is the only column visible (no adjacent text), this removes start border /\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n border-inline-start: none;\n }\n}\n\n.LogoSuite__logobar--has-takeover {\n position: relative;\n overflow: visible;\n}\n\n/ Glass blur overlay effect /\n.LogoSuite__logobar--has-takeover::before {\n content: '';\n position: absolute;\n inset: calc(-1 var(--base-size-16)) 0;\n z-index: 1;\n pointer-events: none;\n opacity: 0;\n backdrop-filter: blur(var(--base-size-6));\n -webkit-backdrop-filter: blur(var(--base-size-6));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n opacity: 0.7;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n opacity: 0;\n visibility: hidden;\n z-index: 2;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n opacity: 1;\n visibility: visible;\n}\n"],"mappings":""}

package/esm/MediaPlaylist/MediaPlaylist.d.ts ADDED Viewed

@@ -0,0 +1,77 @@
+import React from 'react';
+import { type HeadingProps, type TextProps } from '..';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css';
+export type MediaPlaylistProps = React.PropsWithChildren<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type MediaPlaylistHeadingProps = React.PropsWithChildren<{
+    as?: Exclude<HeadingProps['as'], 'h1'>;
+}> & BaseProps<HTMLDivElement>;
+type MediaPlaylistHeadingInternalProps = {
+    activeIndex?: number | null;
+    itemCount?: number;
+};
+declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemProps = React.PropsWithChildren<{
+    /**
+     * An optional thumbnail to be shown in the playlist for this item.
+     */
+    thumbnail?: React.ReactNode;
+} & BaseProps<HTMLDivElement>>;
+declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.
+ */
+export declare const MediaPlaylist: React.ForwardRefExoticComponent<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: typeof MediaPlaylistHeading;
+    Item: typeof MediaPlaylistItem;
+    ItemHeading: typeof MediaPlaylistItemHeading;
+    ItemContent: typeof MediaPlaylistItemContent;
+    ItemMedia: React.ForwardRefExoticComponent<MediaPlaylistItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+    };
+};
+export {};
+//# sourceMappingURL=MediaPlaylist.d.ts.map

package/esm/MediaPlaylist/MediaPlaylist.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MediaPlaylist.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,IAAI,CAAA;AAKnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD;;GAEG;AACH,OAAO,kHAAkH,CAAA;AAOzH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AA6HxD,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC9D,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,CAAC,GACA,SAAS,CAAC,cAAc,CAAC,CAAA;AAE3B,KAAK,iCAAiC,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,WAAkB,EAClB,EAAS,EACT,QAAQ,EACR,SAAS,EACT,EAAE,EACF,SAAa,EACb,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,iCAAiC,2CAa/D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAC1D;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,GAAG,SAAS,CAAC,cAAc,CAAC,CAC9B,CAAA;AAED,iBAAS,iBAAiB,CAAC,EAAC,QAAQ,EAAC,EAAE,sBAAsB,2CAE5D;AAED,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,iBAAS,wBAAwB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAkB,EAClB,IAAY,EACZ,KAAK,EACL,OAAmB,EACnB,MAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,2CA4B/B;AAED,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,iBAAS,wBAAwB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,6BAA6B,2CAM/F;AAED,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAyB9E;;GAEG;AACH,eAAO,MAAM,aAAa;IA7QxB;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;oBACa,MAAM;IACtB;;OAEG;eACQ,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;oBAC1B,MAAM;;;;;;;;;;;;CAwQtB,CAAA"}

package/esm/MediaPlaylist/MediaPlaylist.js ADDED Viewed

@@ -0,0 +1,172 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { Text as n } from "../Text/Text.js";
+import { Heading as r } from "../Heading/Heading.js";
+import i from "../component-helpers/shared.module.js";
+import { Pagination as a } from "../Pagination/Pagination.js";
+import { useMediaPlaylist as o } from "./useMediaPlaylist.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-YId8eSZQ.css';/* empty css                                                                                                            */
+import s from "./MediaPlaylist.module.js";
+import { cloneElement as c, forwardRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/MediaPlaylist/MediaPlaylist.tsx
+var p = l(({ children: n, className: r, defaultSelectedIndex: l = 0, onChange: u, selectedIndex: p, "data-testid": m, ...h }, g) => {
+	let _ = t(), { activeIndex: v, currentItemPage: x, getPaginationAttributes: S, getTabListProps: C, getTabPanelProps: w, getTabProps: T, handlePageChange: E, hasOverflowItems: D, headingChild: O, isItemSelected: k, items: A, setItemRef: j, tabListRef: M } = o({
+		children: n,
+		components: y,
+		defaultSelectedIndex: l,
+		onChange: u,
+		selectedIndex: p
+	}), N = O?.props.id ?? `${_}-heading`;
+	!O && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.");
+	let P = C(O ? { labelledBy: N } : { label: "Media playlist" });
+	return /* @__PURE__ */ d("div", {
+		ref: g,
+		className: e(s.MediaPlaylist, i.gridline, D && s["MediaPlaylist--overflowItems"], r),
+		"data-testid": m || b.root,
+		...h,
+		children: /* @__PURE__ */ f("div", {
+			className: s.MediaPlaylist__layout,
+			children: [/* @__PURE__ */ f("div", {
+				className: s.MediaPlaylist__playlist,
+				children: [
+					O && c(O, {
+						activeIndex: v,
+						id: N,
+						itemCount: A.length
+					}),
+					/* @__PURE__ */ d("div", {
+						...P,
+						ref: M,
+						className: s.MediaPlaylist__tablist,
+						children: A.map((t, n) => {
+							let r = T(String(n));
+							return /* @__PURE__ */ d("div", {
+								ref: (e) => {
+									j(n, e);
+								},
+								className: e(s.MediaPlaylist__item, k(n) && s["MediaPlaylist__item--selected"], t.className),
+								children: /* @__PURE__ */ d("button", {
+									type: "button",
+									...r,
+									className: s.MediaPlaylist__tab,
+									children: /* @__PURE__ */ f("span", {
+										className: s.MediaPlaylist__tabContent,
+										children: [t.thumbnail && /* @__PURE__ */ d("span", {
+											className: s.MediaPlaylist__thumbnail,
+											children: t.thumbnail
+										}), /* @__PURE__ */ d("span", {
+											className: s.MediaPlaylist__itemHeadingContent,
+											children: t.heading
+										})]
+									})
+								})
+							}, n);
+						})
+					}),
+					D && /* @__PURE__ */ d(a, {
+						className: s.MediaPlaylist__pagination,
+						pageCount: A.length,
+						currentPage: x,
+						onPageChange: E,
+						hrefBuilder: () => "#",
+						pageAttributesBuilder: S,
+						"aria-label": "Media playlist items",
+						showPages: !1
+					})
+				]
+			}), /* @__PURE__ */ d("div", {
+				className: s.MediaPlaylist__mediaPanels,
+				children: A.map((t, n) => /* @__PURE__ */ f("div", {
+					...w(String(n)),
+					tabIndex: -1,
+					className: e(s.MediaPlaylist__mediaPanel, s.MediaPlaylist__panel),
+					children: [t.media, /* @__PURE__ */ d("div", {
+						className: s.MediaPlaylist__panelContent,
+						children: t.content
+					})]
+				}, n))
+			})]
+		})
+	});
+});
+function m({ activeIndex: t = null, as: n = "h3", children: i, className: a, id: o, itemCount: c = 0, ...l }) {
+	return /* @__PURE__ */ f("div", {
+		className: e(s.MediaPlaylist__heading, a),
+		...l,
+		children: [/* @__PURE__ */ d(r, {
+			as: n,
+			id: o,
+			className: s.MediaPlaylist__headingLabel,
+			children: i
+		}), c > 0 && t !== null && /* @__PURE__ */ f("span", {
+			className: s.MediaPlaylist__headingCounter,
+			"aria-live": "polite",
+			children: [
+				t + 1,
+				"/",
+				c
+			]
+		})]
+	});
+}
+function h({ children: e }) {
+	return /* @__PURE__ */ d(u, { children: e });
+}
+function g({ children: t, className: r, description: i, font: a = "mona-sans", size: o = "200", title: c, variant: l = "default", weight: u = "medium", ...p }) {
+	let m = c !== void 0 || i !== void 0, h = c ?? t;
+	return /* @__PURE__ */ d(n, {
+		...p,
+		as: "span",
+		className: e(s.MediaPlaylist__itemHeading, r),
+		font: a,
+		size: o,
+		variant: l,
+		weight: u,
+		children: m ? /* @__PURE__ */ f("span", {
+			className: s.MediaPlaylist__itemHeadingDetails,
+			children: [h && /* @__PURE__ */ d("span", {
+				className: s.MediaPlaylist__itemHeadingTitle,
+				children: h
+			}), i && /* @__PURE__ */ d(n, {
+				as: "span",
+				font: "monospace",
+				size: "100",
+				variant: "muted",
+				children: i
+			})]
+		}) : t
+	});
+}
+function _({ children: t, className: n, ...r }) {
+	return /* @__PURE__ */ d("div", {
+		className: e(s.MediaPlaylist__content, n),
+		...r,
+		children: t
+	});
+}
+var v = l(function({ children: t, className: n, ...r }, i) {
+	return /* @__PURE__ */ d("div", {
+		ref: i,
+		className: e(s.MediaPlaylist__media, n),
+		...r,
+		children: t
+	});
+}), y = {
+	Heading: m,
+	Item: h,
+	ItemHeading: g,
+	ItemContent: _,
+	ItemMedia: v
+}, b = { root: "MediaPlaylist" }, x = Object.assign(p, {
+	Heading: m,
+	Item: h,
+	ItemHeading: g,
+	ItemContent: _,
+	ItemMedia: v,
+	testIds: b
+});
+//#endregion
+export { x as MediaPlaylist };
+//# sourceMappingURL=MediaPlaylist.js.map

package/esm/MediaPlaylist/MediaPlaylist.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MediaPlaylist.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, Text, type HeadingProps, type TextProps} from '..'\nimport {Pagination} from '../Pagination'\nimport {useId} from '../hooks/useId'\n\nimport {type MediaPlaylistComponentTypes, useMediaPlaylist} from './useMediaPlaylist'\nimport type {BaseProps} from '../component-helpers'\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css'\n\n/** Main Stylesheet (as a CSS Module) */\n\nimport styles from './MediaPlaylist.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nexport type MediaPlaylistProps = React.PropsWithChildren<{\n /**\n * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.\n */\n defaultSelectedIndex?: number\n /**\n * The index of the currently selected item. This makes the component controlled.\n */\n selectedIndex?: number\n /**\n * Callback fired when the selected index changes.\n */\n onChange?: (selectedIndex: number) => void\n 'data-testid'?: string\n}> &\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>\n\nconst MediaPlaylistRoot = forwardRef<HTMLDivElement, MediaPlaylistProps>(\n ({children, className, defaultSelectedIndex = 0, onChange, selectedIndex, 'data-testid': testId, ...props}, ref) => {\n const uniqueId = useId()\n\n const {\n activeIndex,\n currentItemPage,\n getPaginationAttributes,\n getTabListProps,\n getTabPanelProps,\n getTabProps,\n handlePageChange,\n hasOverflowItems,\n headingChild,\n isItemSelected,\n items,\n setItemRef,\n tabListRef,\n } = useMediaPlaylist({\n children,\n components: mediaPlaylistComponents,\n defaultSelectedIndex,\n onChange,\n selectedIndex,\n })\n\n const headingId = headingChild?.props.id ?? `${uniqueId}-heading`\n\n if (!headingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.',\n )\n }\n\n const tabListProps = headingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'Media playlist'})\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.MediaPlaylist,\n gridlineStyles.gridline,\n hasOverflowItems && styles['MediaPlaylist--overflowItems'],\n className,\n )}\n data-testid={testId || testIds.root}\n {...props}\n >\n <div className={styles.MediaPlaylist__layout}>\n <div className={styles.MediaPlaylist__playlist}>\n {headingChild &&\n cloneElement(headingChild, {\n activeIndex,\n id: headingId,\n itemCount: items.length,\n })}\n <div {...tabListProps} ref={tabListRef} className={styles.MediaPlaylist__tablist}>\n {items.map((item, index) => {\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n\n return (\n <div\n key={index}\n ref={element => {\n setItemRef(index, element)\n }}\n className={clsx(\n styles.MediaPlaylist__item,\n isItemSelected(index) && styles['MediaPlaylist__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.MediaPlaylist__tab}>\n <span className={styles.MediaPlaylist__tabContent}>\n {item.thumbnail && <span className={styles.MediaPlaylist__thumbnail}>{item.thumbnail}</span>}\n <span className={styles.MediaPlaylist__itemHeadingContent}>{item.heading}</span>\n </span>\n </button>\n </div>\n )\n })}\n </div>\n\n {hasOverflowItems && (\n <Pagination\n className={styles.MediaPlaylist__pagination}\n pageCount={items.length}\n currentPage={currentItemPage}\n onPageChange={handlePageChange}\n hrefBuilder={() => '#'}\n pageAttributesBuilder={getPaginationAttributes}\n aria-label=\"Media playlist items\"\n showPages={false}\n />\n )}\n </div>\n\n <div className={styles.MediaPlaylist__mediaPanels}>\n {items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={clsx(styles.MediaPlaylist__mediaPanel, styles.MediaPlaylist__panel)}\n >\n {item.media}\n <div className={styles.MediaPlaylist__panelContent}>{item.content}</div>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n )\n },\n)\n\nexport type MediaPlaylistHeadingProps = React.PropsWithChildren<{\n as?: Exclude<HeadingProps['as'], 'h1'>\n}> &\n BaseProps<HTMLDivElement>\n\ntype MediaPlaylistHeadingInternalProps = {\n activeIndex?: number | null\n itemCount?: number\n}\n\nfunction MediaPlaylistHeading({\n activeIndex = null,\n as = 'h3',\n children,\n className,\n id,\n itemCount = 0,\n ...props\n}: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps) {\n return (\n <div className={clsx(styles.MediaPlaylist__heading, className)} {...props}>\n <Heading as={as} id={id} className={styles.MediaPlaylist__headingLabel}>\n {children}\n </Heading>\n {itemCount > 0 && activeIndex !== null && (\n <span className={styles.MediaPlaylist__headingCounter} aria-live=\"polite\">\n {activeIndex + 1}/{itemCount}\n </span>\n )}\n </div>\n )\n}\n\nexport type MediaPlaylistItemProps = React.PropsWithChildren<\n {\n /**\n * An optional thumbnail to be shown in the playlist for this item.\n */\n thumbnail?: React.ReactNode\n } & BaseProps<HTMLDivElement>\n>\n\nfunction MediaPlaylistItem({children}: MediaPlaylistItemProps) {\n return <>{children}</>\n}\n\nexport type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {\n children?: React.ReactNode\n description?: React.ReactNode\n title?: React.ReactNode\n}\n\nfunction MediaPlaylistItemHeading({\n children,\n className,\n description,\n font = 'mona-sans',\n size = '200',\n title,\n variant = 'default',\n weight = 'medium',\n ...props\n}: MediaPlaylistItemHeadingProps) {\n const hasStructuredContent = title !== undefined || description !== undefined\n const headingTitle = title ?? children\n\n return (\n <Text\n {...props}\n as=\"span\"\n className={clsx(styles.MediaPlaylist__itemHeading, className)}\n font={font}\n size={size}\n variant={variant}\n weight={weight}\n >\n {hasStructuredContent ? (\n <span className={styles.MediaPlaylist__itemHeadingDetails}>\n {headingTitle && <span className={styles.MediaPlaylist__itemHeadingTitle}>{headingTitle}</span>}\n {description && (\n <Text as=\"span\" font=\"monospace\" size=\"100\" variant=\"muted\">\n {description}\n </Text>\n )}\n </span>\n ) : (\n children\n )}\n </Text>\n )\n}\n\nexport type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>\n\nfunction MediaPlaylistItemContent({children, className, ...props}: MediaPlaylistItemContentProps) {\n return (\n <div className={clsx(styles.MediaPlaylist__content, className)} {...props}>\n {children}\n </div>\n )\n}\n\nexport type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>\n\nconst MediaPlaylistItemMedia = forwardRef<HTMLDivElement, MediaPlaylistItemMediaProps>(function MediaPlaylistItemMedia(\n {children, className, ...props},\n ref,\n) {\n return (\n <div ref={ref} className={clsx(styles.MediaPlaylist__media, className)} {...props}>\n {children}\n </div>\n )\n})\n\nconst mediaPlaylistComponents = {\n Heading: MediaPlaylistHeading,\n Item: MediaPlaylistItem,\n ItemHeading: MediaPlaylistItemHeading,\n ItemContent: MediaPlaylistItemContent,\n ItemMedia: MediaPlaylistItemMedia,\n} satisfies MediaPlaylistComponentTypes\n\nconst testIds = {\n root: 'MediaPlaylist',\n}\n\n/**\n * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.\n */\nexport const MediaPlaylist = Object.assign(MediaPlaylistRoot, {\n Heading: MediaPlaylistHeading,\n Item: MediaPlaylistItem,\n ItemHeading: MediaPlaylistItemHeading,\n ItemContent: MediaPlaylistItemContent,\n ItemMedia: MediaPlaylistItemMedia,\n testIds,\n})\n"],"mappings":";;;;;;;;;;;;AAoCA,IAAM,IAAoB,GACvB,EAAC,aAAU,cAAW,0BAAuB,GAAG,aAAU,kBAAe,eAAe,GAAQ,GAAG,KAAQ,MAAQ;CAClH,IAAM,IAAW,GAAO,EAElB,EACJ,gBACA,oBACA,4BACA,oBACA,qBACA,gBACA,qBACA,qBACA,iBACA,mBACA,UACA,eACA,kBACE,EAAiB;EACnB;EACA,YAAY;EACZ;EACA;EACA;EACD,CAAC,EAEI,IAAY,GAAc,MAAM,MAAM,GAAG,EAAS;AAExD,CAAI,CAAC,MAAA,QAAA,IAAA,aAA0C,iBAAA,QAAA,IAAA,aAA0C,WAEvF,QAAQ,KACN,yGACD;CAGH,IAAM,IACF,EADiB,IACD,EAAC,YAAY,GAAU,GACvB,EAAC,OAAO,kBAAiB,CAAC;AAE9C,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,eACP,EAAe,UACf,KAAoB,EAAO,iCAC3B,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACG,KACC,EAAa,GAAc;MACzB;MACA,IAAI;MACJ,WAAW,EAAM;MAClB,CAAC;KACJ,kBAAC,OAAD;MAAK,GAAI;MAAc,KAAK;MAAY,WAAW,EAAO;gBACvD,EAAM,KAAK,GAAM,MAAU;OAC1B,IAAM,IAAW,EAA+B,OAAO,EAAM,CAAC;AAE9D,cACE,kBAAC,OAAD;QAEE,MAAK,MAAW;AACd,WAAW,GAAO,EAAQ;;QAE5B,WAAW,EACT,EAAO,qBACP,EAAe,EAAM,IAAI,EAAO,kCAChC,EAAK,UACN;kBAED,kBAAC,UAAD;SAAQ,MAAK;SAAS,GAAI;SAAU,WAAW,EAAO;mBACpD,kBAAC,QAAD;UAAM,WAAW,EAAO;oBAAxB,CACG,EAAK,aAAa,kBAAC,QAAD;WAAM,WAAW,EAAO;qBAA2B,EAAK;WAAiB,CAAA,EAC5F,kBAAC,QAAD;WAAM,WAAW,EAAO;qBAAoC,EAAK;WAAe,CAAA,CAC3E;;SACA,CAAA;QACL,EAhBC,EAgBD;QAER;MACE,CAAA;KAEL,KACC,kBAAC,GAAD;MACE,WAAW,EAAO;MAClB,WAAW,EAAM;MACjB,aAAa;MACb,cAAc;MACd,mBAAmB;MACnB,uBAAuB;MACvB,cAAW;MACX,WAAW;MACX,CAAA;KAEA;OAEN,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,KAAK,GAAM,MAId,kBAAC,OAAD;KAEE,GALe,EAAiB,OAAO,EAAM,CAKzC;KACJ,UAAU;KACV,WAAW,EAAK,EAAO,2BAA2B,EAAO,qBAAqB;eAJhF,CAMG,EAAK,OACN,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAA8B,EAAK;MAAc,CAAA,CACpE;OAPC,EAOD,CAER;IACE,CAAA,CACF;;EACF,CAAA;EAGX;AAYD,SAAS,EAAqB,EAC5B,iBAAc,MACd,QAAK,MACL,aACA,cACA,OACA,eAAY,GACZ,GAAG,KAC6D;AAChE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,wBAAwB,EAAU;EAAE,GAAI;YAApE,CACE,kBAAC,GAAD;GAAa;GAAQ;GAAI,WAAW,EAAO;GACxC;GACO,CAAA,EACT,IAAY,KAAK,MAAgB,QAChC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA+B,aAAU;aAAjE;IACG,IAAc;IAAE;IAAE;IACd;KAEL;;;AAaV,SAAS,EAAkB,EAAC,eAAmC;AAC7D,QAAO,kBAAA,GAAA,EAAG,aAAY,CAAA;;AASxB,SAAS,EAAyB,EAChC,aACA,cACA,gBACA,UAAO,aACP,UAAO,OACP,UACA,aAAU,WACV,YAAS,UACT,GAAG,KAC6B;CAChC,IAAM,IAAuB,MAAU,KAAA,KAAa,MAAgB,KAAA,GAC9D,IAAe,KAAS;AAE9B,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,IAAG;EACH,WAAW,EAAK,EAAO,4BAA4B,EAAU;EACvD;EACA;EACG;EACD;YAEP,IACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KAAgB,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAkC;IAAoB,CAAA,EAC9F,KACC,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAY,MAAK;IAAM,SAAQ;cACjD;IACI,CAAA,CAEJ;OAEP;EAEG,CAAA;;AAMX,SAAS,EAAyB,EAAC,aAAU,cAAW,GAAG,KAAuC;AAChG,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,wBAAwB,EAAU;EAAE,GAAI;EACjE;EACG,CAAA;;AAMV,IAAM,IAAyB,EAAwD,SACrF,EAAC,aAAU,cAAW,GAAG,KACzB,GACA;AACA,QACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAK,EAAO,sBAAsB,EAAU;EAAE,GAAI;EACzE;EACG,CAAA;EAER,EAEI,IAA0B;CAC9B,SAAS;CACT,MAAM;CACN,aAAa;CACb,aAAa;CACb,WAAW;CACZ,EAEK,IAAU,EACd,MAAM,iBACP,EAKY,IAAgB,OAAO,OAAO,GAAmB;CAC5D,SAAS;CACT,MAAM;CACN,aAAa;CACb,aAAa;CACb,WAAW;CACX;CACD,CAAC"}

package/esm/MediaPlaylist/MediaPlaylist.module-BU39a4-W.css ADDED Viewed

@@ -0,0 +1 @@

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

package/esm/MediaPlaylist/MediaPlaylist.module.js ADDED Viewed

@@ -0,0 +1,30 @@
+import './MediaPlaylist.module-BU39a4-W.css';var e = {
+	MediaPlaylist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg",
+	MediaPlaylist__layout: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17",
+	MediaPlaylist__playlist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y",
+	MediaPlaylist__heading: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj",
+	MediaPlaylist__headingLabel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs",
+	MediaPlaylist__headingCounter: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs",
+	MediaPlaylist__mediaPanels: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2",
+	MediaPlaylist__mediaPanel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2",
+	MediaPlaylist__panel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx",
+	MediaPlaylist__panelContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr",
+	MediaPlaylist__media: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb",
+	MediaPlaylist__tablist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB",
+	"MediaPlaylist--overflowItems": "Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc",
+	MediaPlaylist__pagination: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v",
+	MediaPlaylist__item: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C",
+	"MediaPlaylist__item--selected": "Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G",
+	MediaPlaylist__itemHeading: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s",
+	MediaPlaylist__itemHeadingContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0",
+	MediaPlaylist__itemHeadingDetails: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu",
+	MediaPlaylist__itemHeadingTitle: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm",
+	MediaPlaylist__tab: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX",
+	MediaPlaylist__tabContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ",
+	MediaPlaylist__thumbnail: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA",
+	MediaPlaylist__content: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=MediaPlaylist.module.js.map

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

@@ -0,0 +1 @@

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

package/esm/MediaPlaylist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './MediaPlaylist';
2	+ //# sourceMappingURL=index.d.ts.map

package/esm/MediaPlaylist/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/esm/MediaPlaylist/useMediaPlaylist.d.ts ADDED Viewed

@@ -0,0 +1,84 @@
+import React from 'react';
+import type { PaginationPageType } from '../Pagination/model';
+type UseMediaPlaylistProps = {
+    children: React.ReactNode;
+    components: MediaPlaylistComponentTypes;
+    defaultSelectedIndex: number;
+    onChange?: (selectedIndex: number) => void;
+    selectedIndex?: number;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export type MediaPlaylistComponentTypes = {
+    Heading: React.ElementType;
+    Item: React.ElementType;
+    ItemHeading: React.ElementType;
+    ItemContent: React.ElementType;
+    ItemMedia: React.ElementType;
+};
+type MediaPlaylistHeadingChildProps = {
+    activeIndex?: number | null;
+    id?: string;
+    itemCount?: number;
+};
+type MediaPlaylistItemChildProps = React.PropsWithChildren<Record<string, unknown>>;
+type MediaPlaylistItemChild = React.ReactElement<MediaPlaylistItemChildProps>;
+type MediaPlaylistItemData = {
+    className?: string;
+    content: MediaPlaylistItemChild;
+    heading: MediaPlaylistItemChild;
+    media: MediaPlaylistItemChild;
+    thumbnail?: React.ReactNode;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export declare function useMediaPlaylist({ children, components, defaultSelectedIndex, onChange, selectedIndex, }: UseMediaPlaylistProps): {
+    activeIndex: number | null;
+    currentItemPage: number;
+    getPaginationAttributes: (pageNumber: number, page: PaginationPageType) => {
+        [key: string]: string;
+    };
+    getTabListProps: (props: {
+        label: string;
+        labelledBy?: never;
+    } | {
+        labelledBy: string;
+        label?: never;
+    }) => {
+        role: "tablist";
+        'aria-orientation': "horizontal" | "vertical";
+    };
+    getTabPanelProps: (id: string) => {
+        role: "tabpanel";
+        id: `tabs-${string}-panel-${string}`;
+        'aria-labelledby': `tabs-${string}-tab-${string}`;
+        hidden: boolean;
+        tabIndex: 0;
+    };
+    getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: React.Ref<T>) => {
+        role: "tab";
+        id: `tabs-${string}-tab-${string}`;
+        'aria-controls': `tabs-${string}-panel-${string}`;
+        'aria-selected': boolean;
+        tabIndex: 0 | -1;
+        onClick: () => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        onFocus: () => void;
+        ref: (element: HTMLElement | null) => void;
+    };
+    handlePageChange: (event: React.MouseEvent, page: number) => void;
+    hasOverflowItems: boolean;
+    headingChild: React.ReactElement<MediaPlaylistHeadingChildProps, string | React.JSXElementConstructor<any>> | null;
+    isItemSelected: (index: number) => boolean;
+    items: MediaPlaylistItemData[];
+    setItemRef: (index: number, element: HTMLDivElement | null) => void;
+    tabListRef: React.RefObject<HTMLDivElement | null>;
+};
+export {};
+//# sourceMappingURL=useMediaPlaylist.d.ts.map

package/esm/MediaPlaylist/useMediaPlaylist.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useMediaPlaylist.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/useMediaPlaylist.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAA;AAG3D,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,2BAA2B,CAAA;IACvC,oBAAoB,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAA;IAC1B,IAAI,EAAE,KAAK,CAAC,WAAW,CAAA;IACvB,WAAW,EAAE,KAAK,CAAC,WAAW,CAAA;IAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,CAAA;IAC9B,SAAS,EAAE,KAAK,CAAC,WAAW,CAAA;CAC7B,CAAA;AAED,KAAK,8BAA8B,GAAG;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAOD,KAAK,2BAA2B,GAAG,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAEnF,KAAK,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAA;AAE7E,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,sBAAsB,CAAA;IAC/B,OAAO,EAAE,sBAAsB,CAAA;IAC/B,KAAK,EAAE,sBAAsB,CAAA;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB;;;0CA8FmC,MAAM,QAAQ,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BArB/E,KAAK,CAAC,UAAU,QAAQ,MAAM;;;4BAeG,MAAM;;wBAEV,MAAM,WAAW,cAAc,GAAG,IAAI;;EAuC9E"}