npm - @primer/react-brand - Versions diffs - 0.78.0-rc.6fbe9fb5 → 0.78.0-rc.85e39cb4 - Mend

@primer/react-brand 0.78.0-rc.6fbe9fb5 → 0.78.0-rc.85e39cb4

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SubdomainNavBar.module.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.module.css"],"sourcesContent":["/\n Main styles for the subdomain navigation bar.\n /\n.SubdomainNavBar {\n position: relative;\n z-index: 90;\n font-weight: 550;\n background: var(--brand-color-canvas-default);\n height: var(--SubdomainNavBar-height);\n}\n\n.SubdomainNavBar::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-start: 100%;\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-text-emphasized);\n pointer-events: none;\n}\n\n/\n * Outer container\n /\n.SubdomainNavBar-outer-container {\n --SubdomainNavBar-height: var(--base-size-64);\n\n z-index: 90;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-outer-container {\n --SubdomainNavBar-height: calc(var(--base-size-64) - var(--base-size-8));\n }\n}\n\n.SubdomainNavBar-outer-container:not(.SubdomainNavBar-outer-container--fixed) {\n position: relative;\n}\n\n.SubdomainNavBar-outer-container--fixed {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n}\n\n/\n * Inner container\n /\n.SubdomainNavBar-inner-container {\n display: flex;\n padding: 4px 28px;\n}\n\n.SubdomainNavBar-inner-container--centered {\n max-width: 1280px;\n margin: 0 auto;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-inner-container {\n padding: 4px 32px;\n }\n}\n\n.SubdomainNavBar-inner-container--search-open {\n animation: fade-out 150ms;\n}\n\n/\n * Logo and title area\n /\n.SubdomainNavBar-title-area {\n display: inline-flex;\n list-style-type: none;\n align-items: center;\n gap: var(--base-size-8);\n padding: 0;\n margin: 0;\n max-width: 340px;\n color: var(--brand-color-text-default);\n padding: var(--base-size-16) 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-title-area {\n gap: var(--base-size-16);\n }\n}\n\n.SubdomainNavBar-logo-mark,\n.SubdomainNavBar-title {\n display: inline-flex;\n align-items: center;\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-logo-mark {\n position: relative;\n}\n\n.SubdomainNavBar-back-arrow {\n position: absolute;\n display: flex;\n inset-inline-start: calc(-1 var(--base-size-24) + var(--base-size-4));\n inset-block-start: 50%;\n color: var(--brand-color-text-muted);\n opacity: 0;\n transform: translate(var(--base-size-4), -50%);\n transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;\n}\n\n.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {\n opacity: 1;\n transform: translate(0, -50%);\n}\n\n.SubdomainNavBar-logo-mark svg {\n width: 32px;\n height: 32px;\n}\n\n.SubdomainNavBar-title {\n line-height: var(--base-size-32);\n text-decoration: none;\n padding-right: var(--base-size-16);\n white-space: nowrap;\n}\n\n.SubdomainNavBar-title:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar--variant-featured .SubdomainNavBar-title-prefix {\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-title-label {\n color: inherit;\n}\n\n.SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child {\n display: flex;\n align-items: center;\n align-self: stretch;\n}\n\n.SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child::after {\n content: '';\n box-sizing: border-box;\n align-self: center;\n flex: none;\n width: var(--brand-borderWidth-thin);\n height: var(--SubdomainNavBar-height);\n margin-inline: var(--base-size-16);\n background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-leading-component,\n.SubdomainNavBar-trailing-component {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n}\n\n.SubdomainNavBar-leading-component {\n margin-inline-end: var(--base-size-16);\n}\n\n.SubdomainNavBar-trailing-component {\n margin-inline-start: var(--base-size-16);\n}\n\n/\n Primary navigation link area\n /\n.SubdomainNavBar-primary-nav {\n display: inline-flex;\n list-style-type: none;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n padding: 0;\n margin: 0;\n}\n\n.SubdomainNavBar-primary-nav-list {\n list-style-type: none;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-primary-nav-list {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--invisible {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--visible {\n display: block;\n margin: 0;\n padding: 0;\n }\n\n .SubdomainNavBar-leading-component,\n .SubdomainNavBar-trailing-component {\n flex: none;\n width: 100%;\n box-sizing: border-box;\n padding-block: var(--base-size-16);\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar-leading-component {\n margin-inline-end: 0;\n }\n\n .SubdomainNavBar-trailing-component {\n margin-inline-start: 0;\n }\n\n .SubdomainNavBar-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n position: absolute;\n top: var(--SubdomainNavBar-height);\n left: 0;\n right: 0;\n z-index: 2;\n background-color: var(--brand-color-canvas-default);\n width: 100%;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n animation: fade-in-down 500ms;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-menu-wrapper--close {\n display: none;\n }\n\n .SubdomainNavBar-menu-wrapper-footer {\n flex: none;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-overflow {\n display: flex;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n margin: 0 var(--base-size-24) 0 0;\n }\n\n .SubdomainNavBar-primary-nav-list {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n flex-wrap: nowrap;\n min-width: 0;\n block-size: var(--base-size-48);\n max-block-size: var(--base-size-48);\n overflow: hidden;\n padding: 0;\n margin: 0;\n }\n}\n\n.SubdomainNavBar-primary-nav-list-item {\n flex: 0 0 auto;\n white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-primary-nav-list-item {\n animation-name: fade-in-down-staggered;\n animation-duration: 500ms;\n animation-delay: calc(var(--animation-order) 80ms);\n animation-fill-mode: both;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-list-item--overflowed {\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-list-item--overflow {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n position: absolute;\n inset-inline-end: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-overflow--has-overflow .SubdomainNavBar-primary-nav-list-item--overflow {\n position: relative;\n visibility: visible;\n pointer-events: auto;\n }\n}\n\n.SubdomainNavBar-link {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-8);\n color: var(--brand-color-text-default);\n font-family: var(--brand-heading-fontFamily);\n font-weight: var(--base-text-weight-normal);\n font-size: var(--base-size-20);\n line-height: var(--base-size-20);\n padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);\n text-decoration: none;\n}\n\n.SubdomainNavBar-link:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-link-text {\n position: relative;\n}\n\n.SubdomainNavBar-link-content {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-link:first-of-type {\n padding-top: var(--base-size-24);\n }\n\n .SubdomainNavBar-link--title {\n font-weight: var(--base-text-weight-medium);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-link {\n font-family: var(--brand-heading-fontFamily);\n font-weight: var(--base-text-weight-normal);\n font-size: var(--base-size-16);\n line-height: var(--base-size-16);\n padding: var(--base-size-16) var(--base-size-16);\n }\n\n .SubdomainNavBar-link-text::after {\n content: '';\n position: absolute;\n bottom: -6px;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--brand-SubdomainNavBar-border-nav-default);\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);\n transform: scale(0);\n transform-origin: center;\n }\n\n .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,\n .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {\n opacity: 1;\n transform: scale(0.75);\n }\n\n .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {\n background-color: var(--brand-SubdomainNavBar-border-nav-pressed);\n transform: scale(0.75);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n transition: background-color var(--brand-animation-easing-default) 250ms;\n background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);\n color: var(--brand-SubdomainNavBar-fg-overflow-default);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {\n display: none;\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {\n background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);\n outline: none;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-link {\n padding: var(--base-size-16) var(--base-size-24);\n }\n}\n\n.SubdomainNavBar-more-link {\n display: none;\n}\n\n.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,\n.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {\n display: none;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-more-link {\n cursor: pointer;\n appearance: none;\n border: none;\n background-color: transparent;\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n }\n}\n\n.SubdomainNavBar-overflow-menu {\n position: absolute;\n z-index: 100;\n right: auto;\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-large);\n animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;\n animation-timing-function: var(--brand-animation-easing-default);\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n overflow: hidden;\n}\n\n.SubdomainNavBar-overflow-menu-list {\n display: grid;\n list-style-type: none;\n padding: 0;\n margin: 0;\n width: max-content;\n}\n\n/\n Toolbar actions area for search and mobile menu\n /\n\n.SubdomainNavBar-secondary-nav {\n display: flex;\n align-items: center;\n flex: 0 1 auto;\n min-width: 0;\n margin-left: auto;\n}\n.SubdomainNavBar-search-trigger {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-search-input-width: calc(var(--base-size-128) 2 + var(--base-size-24));\n\n flex: 0 9999 var(--SubdomainNavBar-search-input-width);\n width: var(--SubdomainNavBar-search-input-width);\n max-width: 100%;\n min-width: calc(var(--base-size-128) + var(--base-size-32));\n }\n}\n\n.SubdomainNavBar-menu-button {\n position: relative;\n cursor: pointer;\n appearance: none;\n background-color: transparent;\n border: var(--brand-borderWidth-thick) solid transparent;\n color: var(--brand-color-text-default);\n width: calc(48px - var(--brand-borderWidth-thick));\n height: calc(48px - var(--brand-borderWidth-thick));\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;\n border-radius: var(--brand-borderRadius-medium);\n box-shadow: 0 0 0 2px transparent;\n gap: 0;\n}\n\n.SubdomainNavBar-menu-button svg {\n width: 24px;\n height: 24px;\n}\n\n.SubdomainNavBar-search-input-button {\n cursor: pointer;\n appearance: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-16);\n width: 100%;\n block-size: var(--base-size-32);\n min-block-size: var(--base-size-32);\n padding: var(--base-size-4) var(--base-size-4) var(--base-size-4) calc(var(--base-size-8) + var(--base-size-2));\n overflow: hidden;\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-subtle);\n border: 0;\n border-radius: var(--brand-borderRadius-medium);\n font-family: var(--brand-body-fontFamily);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n box-shadow var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubdomainNavBar-search-input-button:hover {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-input-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-input-button:active {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-default);\n}\n\n.SubdomainNavBar-search-input-button-placeholder {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n min-width: 0;\n overflow: hidden;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-normal);\n line-height: 1.2;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-placeholder svg {\n flex: none;\n}\n\n.SubdomainNavBar-search-input-button-placeholder span {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-shortcut {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n min-width: var(--base-size-24);\n padding-inline: var(--base-size-8);\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: calc(var(--brand-borderRadius-medium) / 2);\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-normal);\n line-height: 1.6;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--base-size-48);\n justify-content: center;\n width: var(--base-size-48);\n }\n\n .SubdomainNavBar-search-input-button {\n justify-content: center;\n gap: 0;\n width: var(--base-size-32);\n padding: var(--base-size-8);\n background-color: transparent;\n }\n\n .SubdomainNavBar-search-input-button-placeholder {\n gap: 0;\n }\n\n .SubdomainNavBar-search-input-button-placeholder span,\n .SubdomainNavBar-search-input-button-shortcut {\n display: none;\n }\n}\n\n.SubdomainNavBar-menu-button {\n display: inline-flex;\n align-items: center;\n align-self: center;\n}\n\n.SubdomainNavBar-menu-button-icon {\n display: inline-flex;\n flex-direction: column;\n gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n}\n\n.SubdomainNavBar-menu-button-label {\n display: none;\n}\n\n.SubdomainNavBar-menu-button-bar {\n width: 22px;\n height: 2px;\n background-color: var(--brand-color-text-default);\n margin: var(--base-size-4) auto;\n border-radius: var(--brand-borderRadius-large);\n display: block;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .SubdomainNavBar-menu-button-bar {\n transition-timing-function: var(--brand-animation-easing-default);\n transition-duration: 500ms;\n transition-property: opacity, transform;\n }\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform-origin: bottom right;\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform-origin: top right;\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: rotate(-45deg) translateY(-3px);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {\n opacity: 0;\n transform: scale(0);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: rotate(45deg) translateY(3px);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close {\n position: relative;\n z-index: 3;\n background-color: var(--brand-color-canvas-muted);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible {\n outline: none;\n box-shadow: none;\n transition: none;\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n border: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close::after {\n content: '';\n position: absolute;\n z-index: 1;\n inset-inline: 0;\n inset-block-end: calc(var(--brand-borderWidth-thin) * -2);\n height: calc(var(--brand-borderWidth-thin) * 2);\n background-color: var(--brand-color-canvas-muted);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-menu-button:hover {\n background-color: transparent;\n border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-menu-button:active {\n background-color: transparent;\n box-shadow: 0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-mobile-menu-button {\n display: none;\n }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .SubdomainNavBar-primary-nav {\n display: none;\n }\n\n .SubdomainNavBar-secondary-nav {\n position: relative;\n flex: 0 0 auto;\n align-self: stretch;\n }\n\n .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-tablet-search-width: calc(var(--base-size-128) * 2 + var(--base-size-2));\n\n flex: 0 0 var(--SubdomainNavBar-tablet-search-width);\n width: var(--SubdomainNavBar-tablet-search-width);\n padding-inline: var(--base-size-8);\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar-search-input-button {\n width: 100%;\n }\n\n .SubdomainNavBar-mobile-menu-button {\n align-self: stretch;\n flex: none;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: var(--base-size-8);\n width: max-content;\n min-width: calc(var(--base-size-64) + var(--base-size-32));\n height: 100%;\n padding-inline: var(--base-size-16);\n color: var(--brand-color-text-default);\n border: 0;\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: 0;\n overflow: visible;\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar-menu-button-label {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n }\n\n .SubdomainNavBar-menu-button-icon {\n flex: none;\n align-items: stretch;\n justify-content: center;\n width: var(--base-size-16);\n height: var(--base-size-16);\n overflow: visible;\n }\n\n .SubdomainNavBar-menu-button-icon .SubdomainNavBar-menu-button-bar {\n width: var(--base-size-16);\n height: var(--base-size-2);\n margin: 0;\n transform-origin: center;\n }\n\n .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n }\n\n .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n }\n\n .SubdomainNavBar-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n position: absolute;\n inset-inline: 0;\n top: var(--SubdomainNavBar-height);\n z-index: 2;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n background-color: var(--brand-color-canvas-default);\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n animation: fade-in-down var(--brand-animation-duration-default);\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-menu-wrapper {\n inset-inline-start: auto;\n min-width: calc(var(--base-size-128) * 3);\n }\n\n .SubdomainNavBar-menu-wrapper--close {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--visible {\n display: grid;\n gap: var(--brand-borderWidth-thin);\n margin: 0;\n padding: var(--base-size-8) var(--base-size-16);\n }\n\n .SubdomainNavBar-menu-wrapper-footer {\n flex: none;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n box-sizing: border-box;\n width: 100%;\n min-height: var(--base-size-40);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-medium);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item) {\n width: 100%;\n height: auto;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link {\n padding: var(--base-size-8) var(--base-size-12);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content {\n width: 100%;\n padding: 0;\n background-color: transparent;\n border-radius: 0;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n > .SubdomainNavBar-link-content {\n background-color: transparent;\n outline: none;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false']) {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);\n outline: none;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-leading-component,\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-trailing-component {\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: auto;\n margin-inline: 0;\n padding: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area {\n display: flex;\n width: 100%;\n height: auto;\n padding: 0;\n }\n\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n box-sizing: border-box;\n flex-direction: column;\n width: 100%;\n margin-block: var(--base-size-24);\n padding-inline: var(--base-size-16);\n }\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper-footer--has-leading-item,\n.SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-leading-component\n + .SubdomainNavBar-primary-nav-list--visible,\n.SubdomainNavBar\n .SubdomainNavBar-menu-wrapper-footer\n .SubdomainNavBar-trailing-component\n + .SubdomainNavBar-button-area {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-button-area {\n display: inline-flex;\n gap: var(--base-size-16);\n align-items: center;\n min-width: 0;\n}\n\n.SubdomainNavBar-button-area-inner {\n display: flex;\n gap: var(--base-size-8);\n min-width: 0;\n}\n\n@media screen and (max-width: 48rem) {\n .SubdomainNavBar-button-area {\n display: none;\n }\n\n .SubdomainNavBar-button-area--visible {\n display: flex;\n left: 0;\n z-index: 99;\n width: 100%;\n height: auto;\n animation-name: fade-in-down-staggered;\n animation-duration: 500ms;\n animation-delay: calc(10 * 80ms);\n animation-fill-mode: both;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {\n display: none;\n }\n\n .SubdomainNavBar-button-area-inner {\n width: 100%;\n box-sizing: border-box;\n flex-direction: column;\n margin-block: var(--base-size-24);\n padding-inline: var(--base-size-24);\n min-width: 0;\n }\n}\n\n.SubdomainNavBar-cta-button {\n white-space: nowrap;\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper {\n top: var(--SubdomainNavBar-height);\n height: auto;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n}\n\n.SubdomainNavBar-menu-backdrop {\n position: fixed;\n inset-block-start: calc(var(--SubdomainNavBar-height) + var(--SubdomainNavBar-menu-offset-block-start, 0px));\n inset-block-end: 0;\n inset-inline: 0;\n z-index: 1;\n background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n animation: fade-in var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.SubdomainNavBar .SubdomainNavBar-inner-container--search-open {\n animation: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar {\n --SubdomainNavBar-mobile-control-size: var(--base-size-48);\n }\n\n .SubdomainNavBar .SubdomainNavBar-inner-container {\n height: 100%;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area {\n height: 100%;\n max-width: none;\n gap: 0;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li {\n display: flex;\n align-items: center;\n height: 100%;\n padding-inline: 0 var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n justify-content: center;\n width: auto;\n padding-inline: var(--base-size-16) var(--base-size-8);\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark {\n justify-content: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title > * {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-secondary-nav {\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n justify-content: center;\n width: var(--SubdomainNavBar-mobile-control-size);\n height: 100%;\n padding-inline: 0;\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-input-button,\n .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n box-sizing: border-box;\n display: inline-flex;\n flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n width: var(--SubdomainNavBar-mobile-control-size);\n flex-direction: column;\n height: 100%;\n padding-inline: var(--base-size-16);\n border-radius: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button-bar {\n width: var(--base-size-16);\n height: var(--base-size-2);\n margin: 0 auto;\n transform-origin: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n padding: var(--base-size-16);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n padding-inline: var(--base-size-16);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar .SubdomainNavBar-inner-container {\n height: 100%;\n max-width: none;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area {\n height: 100%;\n max-width: none;\n gap: 0;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li {\n display: flex;\n align-items: center;\n height: 100%;\n padding-inline: 0 var(--base-size-16);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n justify-content: center;\n width: auto;\n padding-inline: var(--base-size-16) var(--base-size-8);\n border-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark {\n justify-content: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title > * {\n font-size: var(--base-size-16);\n line-height: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav,\n .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow,\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list,\n .SubdomainNavBar .SubdomainNavBar-secondary-nav,\n .SubdomainNavBar .SubdomainNavBar-button-area,\n .SubdomainNavBar .SubdomainNavBar-leading-component,\n .SubdomainNavBar .SubdomainNavBar-trailing-component {\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-leading-component,\n .SubdomainNavBar .SubdomainNavBar-trailing-component {\n padding-inline: var(--base-size-16);\n margin-inline: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-leading-component {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list {\n align-items: stretch;\n margin: 0;\n block-size: 100%;\n max-block-size: 100%;\n padding-inline-start: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow {\n margin: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list-item {\n display: flex;\n align-items: center;\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-link {\n align-items: center;\n height: 100%;\n padding: 0 var(--base-size-16);\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link,\n .SubdomainNavBar .SubdomainNavBar-more-link {\n padding-inline: var(--base-size-4);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n gap: var(--base-size-4);\n padding: var(--base-size-4) var(--base-size-12);\n background-color: transparent;\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:hover > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:active > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link[aria-expanded='true'] > .SubdomainNavBar-link-content {\n background-color: var(--brand-SubdomainNavBar-color-link-bgColor);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible,\n .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible {\n outline: none;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible > .SubdomainNavBar-link-content {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n }\n\n .SubdomainNavBar .SubdomainNavBar-link-text::after {\n display: none;\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu {\n animation: fade-in-down-overflow var(--brand-animation-duration-faster);\n animation-timing-function: var(--brand-animation-easing-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-end-start-radius: var(--brand-borderRadius-medium);\n border-end-end-radius: var(--brand-borderRadius-medium);\n box-shadow: none;\n min-width: calc(var(--base-size-128) + var(--base-size-32));\n transform: translateY(calc(0px - var(--base-size-4)));\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-list {\n gap: var(--brand-borderWidth-thin);\n padding: var(--base-size-8);\n width: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n width: 100%;\n min-height: var(--base-size-40);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-medium);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n }\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n height: 100%;\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger--has-trailing-item {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-button-area {\n align-items: center;\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-button-area--has-leading-item {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-search-input-width: clamp(\n calc(var(--base-size-128) + var(--base-size-32)),\n 28.5vw,\n calc(var(--base-size-128) * 3 + var(--base-size-36))\n );\n\n align-self: stretch;\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-primary-nav {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n height: calc(var(--SubdomainNavBar-height) + var(--base-size-48));\n }\n\n .SubdomainNavBar--variant-default::after {\n inset-block-start: var(--SubdomainNavBar-height);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: var(--SubdomainNavBar-height);\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-primary-nav .SubdomainNavBar-inner-container {\n grid-template-rows: var(--SubdomainNavBar-height) var(--base-size-48);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-title-navigation {\n grid-column: 1;\n grid-row: 1;\n min-width: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-primary-nav {\n grid-column: 1 / -1;\n grid-row: 2;\n min-width: 0;\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-primary-nav-list {\n padding-inline-start: calc(var(--base-size-64) + var(--brand-borderWidth-thin));\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container > .SubdomainNavBar-leading-component {\n grid-column: 2;\n grid-row: 1;\n justify-self: start;\n border-inline-start: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container > .SubdomainNavBar-secondary-nav {\n grid-column: 3;\n grid-row: 1;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button {\n justify-content: center;\n gap: 0;\n width: var(--base-size-32);\n padding: var(--base-size-8);\n background-color: transparent;\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-placeholder {\n gap: 0;\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-placeholder-text,\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-shortcut {\n display: none;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--base-size-48);\n width: var(--base-size-48);\n min-width: var(--base-size-48);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n padding-inline: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button {\n width: 100%;\n block-size: 100%;\n padding-inline: var(--base-size-16);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .SubdomainNavBar-cta-button--secondary {\n display: inline-flex;\n }\n}\n\n/\n Search dialog control area\n /\n.SubdomainNavBar-search-form {\n display: flex;\n width: 100%;\n}\n\n.SubdomainNavBar-search-input-area {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n width: 100%;\n}\n\n.SubdomainNavBar-search-close-button {\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n min-block-size: var(--base-size-32);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n border: 0;\n border-radius: var(--brand-borderRadius-medium);\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-medium);\n line-height: var(--base-size-14);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-close-button:hover {\n background-color: var(--brand-color-canvas-inset);\n}\n\n.SubdomainNavBar-search-close-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-dialog-control-area {\n height: var(--base-size-40);\n max-width: none;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n background: transparent;\n}\n\n.SubdomainNavBar-search-text-input {\n border-color: transparent;\n}\n\n.SubdomainNavBar-search-results-area {\n width: 100%;\n}\n\n.SubdomainNavBar-search-results-container {\n animation: fade-in-down 500ms;\n padding: var(--base-size-24);\n background-color: var(--base-color-scale-white-0);\n border-radius: var(--brand-borderRadius-large);\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n max-height: 514px;\n height: 70vh;\n max-width: 570px;\n margin: 0 auto;\n width: 80%;\n}\n\n.SubdomainNavBar-search-results {\n overflow-y: scroll;\n list-style: none;\n padding: 0 var(--base-size-24) 0 0;\n margin: 0;\n height: 90%;\n}\n\n.SubdomainNavBar-search-results-heading {\n display: block;\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--base-size-20);\n line-height: var(--base-size-24);\n margin-bottom: var(--base-size-20);\n padding: 0 var(--base-size-8);\n color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-result-group,\n.SubdomainNavBar-search-result-group-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-result-group-heading {\n display: block;\n margin: 0 0 var(--base-size-20);\n padding: 0 var(--base-size-8);\n color: var(--brand-color-text-muted);\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-result-item {\n padding: var(--base-size-16) var(--base-size-8);\n border-bottom: solid var(--brand-borderWidth-thin, 1px)\n var(--brand-SubdomainNavBar-search-results-border-default, #b7bfc7);\n}\n\n.SubdomainNavBar-search-result-item-container a[aria-selected='true'] {\n outline: var(--brand-color-focus) auto var(--brand-borderWidth-thick);\n}\n\n.SubdomainNavBar-search-result-item-container {\n letter-spacing: var(--brand-heading-letterSpacing-400);\n font-size: var(--brand-text-size-400);\n}\n\n.SubdomainNavBar-search-result-item-container a {\n display: block;\n color: var(--base-color-scale-black-0);\n text-decoration: none;\n margin: 0 0 var(--base-size-12);\n font-size: var(--base-size-16);\n font-weight: var(--brand-heading-weight-400);\n font-family: var(--brand-heading-fontFamily);\n line-height: var(--brand-text-lineHeight-400);\n}\n\n.SubdomainNavBar-search-result-item-container a svg {\n flex: none;\n}\n\n.SubdomainNavBar-search-result-item-container a:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-search-result-item-desc {\n color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-dialog {\n position: fixed;\n inset-block-start: calc(var(--base-size-64) + var(--base-size-8));\n inset-block-end: auto;\n inset-inline: calc(var(--base-size-64) + var(--base-size-8));\n z-index: 99;\n width: min(\n calc(100vw - ((var(--base-size-64) + var(--base-size-8)) 2)),\n calc((var(--base-size-128) * 6) + var(--base-size-36))\n );\n max-height: calc(100vh - ((var(--base-size-64) + var(--base-size-8)) * 2));\n height: auto;\n margin-inline: auto;\n padding: var(--base-size-16);\n overflow: hidden;\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-large);\n box-shadow: 0 0 calc(var(--base-size-32) + var(--base-size-2)) var(--brand-SubdomainNavBar-searchDialog-shadowColor);\n}\n\n.SubdomainNavBar-search-dialog--has-results {\n padding-block-end: var(--base-size-32);\n}\n\n.SubdomainNavBar-search-dialog::backdrop {\n background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n -webkit-backdrop-filter: blur(var(--base-size-24));\n backdrop-filter: blur(var(--base-size-24));\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-input-area {\n gap: var(--base-size-16);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form {\n min-width: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form section > span:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-text-input {\n color: var(--brand-color-text-default);\n font-size: calc(var(--base-size-16) + var(--base-size-2));\n font-weight: var(--base-text-weight-medium);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-close-button {\n background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-area--visible {\n margin-block-start: var(--base-size-24);\n padding-block-start: var(--base-size-24);\n border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-container {\n width: 100%;\n height: auto;\n max-width: none;\n max-height: calc(100vh - (((var(--base-size-64) + var(--base-size-8)) * 2) + var(--base-size-128)));\n padding: 0;\n margin: 0;\n overflow-y: auto;\n background-color: transparent;\n border-radius: 0;\n box-shadow: none;\n animation: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results {\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-heading,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group-heading {\n margin-block-end: var(--base-size-20);\n padding: 0;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-heading-weight-600);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item {\n padding: var(--base-size-16) var(--base-size-4);\n border-block-end: 0;\n border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog\n .SubdomainNavBar-search-result-group-list\n > .SubdomainNavBar-search-result-item:first-child,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results > .SubdomainNavBar-search-result-item:first-child {\n padding-block-start: var(--base-size-12);\n border-block-start: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container {\n font-size: var(--brand-text-size-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a {\n display: flex;\n align-items: center;\n gap: calc(var(--base-size-8) + var(--base-size-2));\n width: 100%;\n margin: 0;\n color: var(--brand-color-text-default);\n font-size: var(--brand-text-size-300);\n font-weight: var(--brand-heading-weight-600);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a span {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-desc,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-meta {\n display: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-search-dialog {\n inset-block-start: var(--base-size-16);\n inset-block-end: auto;\n inset-inline: var(--base-size-16);\n width: calc(100vw - (var(--base-size-16) * 2));\n max-height: calc(100vh - (var(--base-size-16) * 2));\n height: auto;\n }\n}\n\n.SubdomainNavBar-skip-to-content {\n position: absolute;\n inset-block-start: calc(var(--SubdomainNavBar-height) / 2);\n inset-inline-start: var(--base-size-16);\n z-index: 100;\n transform: translateY(-50%);\n}\n\n/\n Reusable animations\n /\n@keyframes fade-in-down {\n 0% {\n opacity: 0;\n transform: translateY(-20px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fade-in-down-overflow {\n 0% {\n opacity: 0;\n transform: translateY(calc(0px - var(--base-size-24)));\n }\n 100% {\n opacity: 1;\n transform: translateY(calc(0px - var(--base-size-4)));\n }\n}\n\n@keyframes fade-out {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes enlarge-shadow {\n 0% {\n scale: 0.98;\n box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);\n }\n 100% {\n scale: 1;\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n }\n}\n\n@keyframes fade-in-down-staggered {\n 0% {\n opacity: 0;\n transform: scale(0.6) translateY(-8px);\n }\n\n 100% {\n opacity: 1;\n }\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 .SubdomainNavBar,\n .SubdomainNavBar::before,\n .SubdomainNavBar::after,\n .SubdomainNavBar {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SubdomainNavBar.module.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.module.css"],"sourcesContent":["/\n Main styles for the subdomain navigation bar.\n /\n.SubdomainNavBar {\n position: relative;\n z-index: 90;\n font-weight: 550;\n background: var(--brand-color-canvas-default);\n height: var(--SubdomainNavBar-height);\n}\n\n.SubdomainNavBar::after {\n content: '';\n position: absolute;\n z-index: 3;\n inset-inline: 0;\n inset-block-start: 100%;\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-SubdomainNavBar-border-nav-default);\n pointer-events: none;\n}\n\n/\n * Outer container\n /\n.SubdomainNavBar-outer-container {\n --SubdomainNavBar-height: var(--base-size-64);\n\n z-index: 90;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-outer-container {\n --SubdomainNavBar-height: calc(var(--base-size-64) - var(--base-size-8));\n }\n}\n\n.SubdomainNavBar-outer-container:not(.SubdomainNavBar-outer-container--fixed) {\n position: relative;\n}\n\n.SubdomainNavBar-outer-container--fixed {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n}\n\n/\n * Inner container\n /\n.SubdomainNavBar-inner-container {\n display: flex;\n padding: 4px 28px;\n}\n\n.SubdomainNavBar-inner-container--centered {\n max-width: 1280px;\n margin: 0 auto;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-inner-container {\n padding: 4px 32px;\n }\n}\n\n.SubdomainNavBar-inner-container--search-open {\n animation: fade-out 150ms;\n}\n\n/\n * Logo and title area\n /\n.SubdomainNavBar-title-area {\n display: inline-flex;\n list-style-type: none;\n align-items: center;\n gap: var(--base-size-8);\n padding: 0;\n margin: 0;\n max-width: 340px;\n color: var(--brand-color-text-default);\n padding: var(--base-size-16) 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-title-area {\n gap: var(--base-size-16);\n }\n}\n\n.SubdomainNavBar-logo-mark,\n.SubdomainNavBar-title {\n display: inline-flex;\n align-items: center;\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-logo-mark {\n position: relative;\n}\n\n.SubdomainNavBar-back-arrow {\n position: absolute;\n display: flex;\n inset-inline-start: calc(-1 var(--base-size-24) + var(--base-size-4));\n inset-block-start: 50%;\n color: var(--brand-color-text-muted);\n opacity: 0;\n transform: translate(var(--base-size-4), -50%);\n transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;\n}\n\n.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {\n opacity: 1;\n transform: translate(0, -50%);\n}\n\n.SubdomainNavBar-logo-mark svg {\n width: 32px;\n height: 32px;\n}\n\n.SubdomainNavBar-title {\n line-height: var(--base-size-32);\n text-decoration: none;\n padding-inline-end: var(--base-size-16);\n white-space: nowrap;\n}\n\n.SubdomainNavBar-title:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar--variant-featured .SubdomainNavBar-title-prefix {\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-title-label {\n color: inherit;\n}\n\n.SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child {\n display: flex;\n align-items: center;\n align-self: stretch;\n}\n\n.SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child::after {\n content: '';\n box-sizing: border-box;\n align-self: center;\n flex: none;\n width: var(--brand-borderWidth-thin);\n height: var(--SubdomainNavBar-height);\n margin-inline: var(--base-size-16);\n background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-leading-component,\n.SubdomainNavBar-trailing-component {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n}\n\n.SubdomainNavBar-leading-component {\n margin-inline-end: var(--base-size-16);\n}\n\n.SubdomainNavBar-trailing-component {\n margin-inline-start: var(--base-size-16);\n}\n\n/\n Primary navigation link area\n /\n.SubdomainNavBar-primary-nav {\n display: inline-flex;\n list-style-type: none;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n padding: 0;\n margin: 0;\n}\n\n.SubdomainNavBar-primary-nav-list {\n list-style-type: none;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-primary-nav-list {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--invisible {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--visible {\n display: block;\n margin: 0;\n padding: 0;\n }\n\n .SubdomainNavBar-leading-component,\n .SubdomainNavBar-trailing-component {\n flex: none;\n width: 100%;\n box-sizing: border-box;\n padding-block: var(--base-size-16);\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar-leading-component {\n margin-inline-end: 0;\n }\n\n .SubdomainNavBar-trailing-component {\n margin-inline-start: 0;\n }\n\n .SubdomainNavBar-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n position: absolute;\n top: var(--SubdomainNavBar-height);\n left: 0;\n right: 0;\n z-index: 2;\n background-color: var(--brand-color-canvas-default);\n width: 100%;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n animation: fade-in-down 500ms;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-menu-wrapper--close {\n display: none;\n }\n\n .SubdomainNavBar-menu-wrapper-footer {\n flex: none;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-overflow {\n display: flex;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n margin: 0 var(--base-size-24) 0 0;\n }\n\n .SubdomainNavBar-primary-nav-list {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n flex-wrap: nowrap;\n min-width: 0;\n block-size: var(--base-size-48);\n max-block-size: var(--base-size-48);\n overflow: hidden;\n padding: 0;\n margin: 0;\n }\n}\n\n.SubdomainNavBar-primary-nav-list-item {\n flex: 0 0 auto;\n white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-primary-nav-list-item {\n animation-name: fade-in-down-staggered;\n animation-duration: 500ms;\n animation-delay: calc(var(--animation-order) 80ms);\n animation-fill-mode: both;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-list-item--overflowed {\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-list-item--overflow {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n position: absolute;\n inset-inline-end: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-overflow--has-overflow .SubdomainNavBar-primary-nav-list-item--overflow {\n position: relative;\n visibility: visible;\n pointer-events: auto;\n }\n}\n\n.SubdomainNavBar-link {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-8);\n color: var(--brand-color-text-default);\n font-family: var(--brand-heading-fontFamily);\n font-weight: var(--base-text-weight-normal);\n text-decoration: none;\n}\n\n.SubdomainNavBar-link:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-link-text {\n position: relative;\n}\n\n.SubdomainNavBar-link-content {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-link--title {\n font-weight: var(--base-text-weight-medium);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n width: 100%;\n min-height: var(--base-size-40);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-medium);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n transition: background-color var(--brand-animation-easing-default) 250ms;\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);\n outline: none;\n }\n}\n\n.SubdomainNavBar-more-link {\n display: none;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-more-link {\n cursor: pointer;\n appearance: none;\n border: none;\n background-color: transparent;\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n }\n}\n\n.SubdomainNavBar .SubdomainNavBar-overflow-menu {\n position: absolute;\n z-index: 100;\n right: auto;\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-end-start-radius: var(--brand-borderRadius-medium);\n border-end-end-radius: var(--brand-borderRadius-medium);\n animation: fade-in-down-overflow var(--brand-animation-duration-faster);\n animation-timing-function: var(--brand-animation-easing-default);\n min-width: calc(var(--base-size-128) + var(--base-size-32));\n transform: translateY(calc(0px - var(--base-size-4)));\n overflow: hidden;\n}\n\n.SubdomainNavBar .SubdomainNavBar-overflow-menu-list {\n display: grid;\n gap: var(--brand-borderWidth-thin);\n list-style-type: none;\n padding: var(--base-size-8);\n margin: 0;\n width: 100%;\n}\n\n/\n Toolbar actions area for search and mobile menu\n /\n\n.SubdomainNavBar-secondary-nav {\n display: flex;\n align-items: center;\n flex: 0 1 auto;\n min-width: 0;\n margin-left: auto;\n}\n.SubdomainNavBar-search-trigger {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-search-input-width: calc(var(--base-size-128) 2 + var(--base-size-24));\n\n flex: 0 9999 var(--SubdomainNavBar-search-input-width);\n width: var(--SubdomainNavBar-search-input-width);\n max-width: 100%;\n min-width: calc(var(--base-size-128) + var(--base-size-32));\n }\n}\n\n.SubdomainNavBar-menu-button {\n position: relative;\n cursor: pointer;\n appearance: none;\n background-color: transparent;\n border: var(--brand-borderWidth-thick) solid transparent;\n color: var(--brand-color-text-default);\n width: calc(48px - var(--brand-borderWidth-thick));\n height: calc(48px - var(--brand-borderWidth-thick));\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;\n border-radius: var(--brand-borderRadius-medium);\n box-shadow: 0 0 0 2px transparent;\n gap: 0;\n}\n\n.SubdomainNavBar-menu-button svg {\n width: 24px;\n height: 24px;\n}\n\n.SubdomainNavBar-search-input-button {\n cursor: pointer;\n appearance: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-16);\n width: 100%;\n block-size: var(--base-size-32);\n min-block-size: var(--base-size-32);\n padding: var(--base-size-4) var(--base-size-4) var(--base-size-4) calc(var(--base-size-8) + var(--base-size-2));\n overflow: hidden;\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-subtle);\n border: 0;\n border-radius: var(--brand-borderRadius-medium);\n font-family: var(--brand-body-fontFamily);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n box-shadow var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubdomainNavBar-search-input-button:hover {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-input-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-input-button:active {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-default);\n}\n\n.SubdomainNavBar-search-input-button-placeholder {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n min-width: 0;\n overflow: hidden;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-normal);\n line-height: 1.2;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-placeholder svg {\n flex: none;\n}\n\n.SubdomainNavBar-search-input-button-placeholder span {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-shortcut {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n min-width: var(--base-size-24);\n padding-inline: var(--base-size-8);\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: calc(var(--brand-borderRadius-medium) / 2);\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-normal);\n line-height: 1.6;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--base-size-48);\n justify-content: center;\n width: var(--base-size-48);\n }\n\n .SubdomainNavBar-search-input-button {\n justify-content: center;\n gap: 0;\n width: var(--base-size-32);\n padding: var(--base-size-8);\n background-color: transparent;\n }\n\n .SubdomainNavBar-search-input-button-placeholder {\n gap: 0;\n }\n\n .SubdomainNavBar-search-input-button-placeholder span,\n .SubdomainNavBar-search-input-button-shortcut {\n display: none;\n }\n}\n\n.SubdomainNavBar-menu-button {\n display: inline-flex;\n align-items: center;\n align-self: center;\n}\n\n.SubdomainNavBar-menu-button-icon {\n display: inline-flex;\n flex-direction: column;\n gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n}\n\n.SubdomainNavBar-menu-button-label {\n display: none;\n}\n\n.SubdomainNavBar-menu-button-bar {\n width: 22px;\n height: 2px;\n background-color: var(--brand-color-text-default);\n margin: var(--base-size-4) auto;\n border-radius: var(--brand-borderRadius-large);\n display: block;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .SubdomainNavBar-menu-button-bar {\n transition-timing-function: var(--brand-animation-easing-default);\n transition-duration: 500ms;\n transition-property: opacity, transform;\n }\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform-origin: bottom right;\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform-origin: top right;\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: rotate(-45deg) translateY(-3px);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {\n opacity: 0;\n transform: scale(0);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: rotate(45deg) translateY(3px);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close {\n position: relative;\n z-index: 3;\n background-color: var(--brand-color-canvas-muted);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible {\n outline: none;\n box-shadow: none;\n transition: none;\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n border: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close::after {\n content: '';\n position: absolute;\n z-index: 1;\n inset-inline: 0;\n inset-block-end: calc(var(--brand-borderWidth-thin) * -2);\n height: calc(var(--brand-borderWidth-thin) * 2);\n background-color: var(--brand-color-canvas-muted);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-menu-button:hover {\n background-color: transparent;\n border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-menu-button:active {\n background-color: transparent;\n box-shadow: 0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-mobile-menu-button {\n display: none;\n }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .SubdomainNavBar-primary-nav {\n display: none;\n }\n\n .SubdomainNavBar-secondary-nav {\n position: relative;\n flex: 0 0 auto;\n align-self: stretch;\n }\n\n .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-tablet-search-width: calc(var(--base-size-128) * 2 + var(--base-size-2));\n\n flex: 0 0 var(--SubdomainNavBar-tablet-search-width);\n width: var(--SubdomainNavBar-tablet-search-width);\n padding-inline: var(--base-size-8);\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar-search-input-button {\n width: 100%;\n }\n\n .SubdomainNavBar-mobile-menu-button {\n align-self: stretch;\n flex: none;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: var(--base-size-8);\n width: max-content;\n min-width: calc(var(--base-size-64) + var(--base-size-32));\n height: 100%;\n padding-inline: var(--base-size-16);\n color: var(--brand-color-text-default);\n border: 0;\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: 0;\n overflow: visible;\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar-menu-button-label {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n }\n\n .SubdomainNavBar-menu-button-icon {\n flex: none;\n align-items: stretch;\n justify-content: center;\n width: var(--base-size-16);\n height: var(--base-size-16);\n overflow: visible;\n }\n\n .SubdomainNavBar-menu-button-icon .SubdomainNavBar-menu-button-bar {\n width: var(--base-size-16);\n height: var(--base-size-2);\n margin: 0;\n transform-origin: center;\n }\n\n .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n }\n\n .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n }\n\n .SubdomainNavBar-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n position: absolute;\n inset-inline: 0;\n top: var(--SubdomainNavBar-height);\n z-index: 2;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n background-color: var(--brand-color-canvas-default);\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n animation: fade-in-down var(--brand-animation-duration-default);\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-menu-wrapper {\n inset-inline-start: auto;\n inset-inline-end: 0;\n width: max(100%, calc(var(--base-size-128) * 3));\n min-width: 0;\n }\n\n .SubdomainNavBar-menu-wrapper--close {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--visible {\n display: grid;\n gap: var(--brand-borderWidth-thin);\n margin: 0;\n padding: var(--base-size-8) var(--base-size-16);\n }\n\n .SubdomainNavBar-menu-wrapper-footer {\n flex: none;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n box-sizing: border-box;\n width: 100%;\n min-height: var(--base-size-40);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-medium);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item) {\n width: 100%;\n height: auto;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link {\n padding: var(--base-size-8) var(--base-size-12);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content {\n width: 100%;\n padding: 0;\n background-color: transparent;\n border-radius: 0;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n > .SubdomainNavBar-link-content {\n background-color: transparent;\n outline: none;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false']) {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);\n outline: none;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-leading-component,\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-trailing-component {\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: auto;\n margin-inline: 0;\n padding: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area {\n display: flex;\n width: 100%;\n height: auto;\n padding: 0;\n }\n\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n box-sizing: border-box;\n flex-direction: column;\n width: 100%;\n margin-block: var(--base-size-24);\n padding-inline: var(--base-size-16);\n }\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper-footer--has-leading-item,\n.SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-leading-component\n + .SubdomainNavBar-primary-nav-list--visible,\n.SubdomainNavBar\n .SubdomainNavBar-menu-wrapper-footer\n .SubdomainNavBar-trailing-component\n + .SubdomainNavBar-button-area {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-button-area {\n display: inline-flex;\n gap: var(--base-size-16);\n align-items: center;\n min-width: 0;\n}\n\n.SubdomainNavBar-button-area-inner {\n display: flex;\n gap: var(--base-size-8);\n min-width: 0;\n}\n\n@media screen and (max-width: 48rem) {\n .SubdomainNavBar-button-area {\n display: none;\n }\n\n .SubdomainNavBar-button-area--visible {\n display: flex;\n left: 0;\n z-index: 99;\n width: 100%;\n height: auto;\n animation-name: fade-in-down-staggered;\n animation-duration: 500ms;\n animation-delay: calc(10 * 80ms);\n animation-fill-mode: both;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {\n display: none;\n }\n\n .SubdomainNavBar-button-area-inner {\n width: 100%;\n box-sizing: border-box;\n flex-direction: column;\n margin-block: var(--base-size-24);\n padding-inline: var(--base-size-24);\n min-width: 0;\n }\n}\n\n.SubdomainNavBar-cta-button {\n white-space: nowrap;\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper {\n top: var(--SubdomainNavBar-height);\n height: auto;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n}\n\n.SubdomainNavBar-menu-backdrop {\n position: fixed;\n inset-block-start: calc(var(--SubdomainNavBar-height) + var(--SubdomainNavBar-menu-offset-block-start, 0px));\n inset-block-end: 0;\n inset-inline: 0;\n z-index: 1;\n background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n animation: fade-in var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.SubdomainNavBar .SubdomainNavBar-inner-container--search-open {\n animation: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar {\n --SubdomainNavBar-mobile-control-size: var(--base-size-48);\n }\n\n .SubdomainNavBar .SubdomainNavBar-inner-container {\n height: 100%;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area {\n height: 100%;\n max-width: none;\n gap: 0;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li {\n display: flex;\n align-items: center;\n height: 100%;\n padding-inline: 0 var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n justify-content: center;\n width: auto;\n padding-inline: var(--base-size-16) var(--base-size-8);\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark {\n justify-content: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title > * {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-secondary-nav {\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n justify-content: center;\n width: var(--SubdomainNavBar-mobile-control-size);\n height: 100%;\n padding-inline: 0;\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-input-button,\n .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n box-sizing: border-box;\n display: inline-flex;\n flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n width: var(--SubdomainNavBar-mobile-control-size);\n flex-direction: column;\n height: 100%;\n padding-inline: var(--base-size-16);\n border-radius: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button-bar {\n width: var(--base-size-16);\n height: var(--base-size-2);\n margin: 0 auto;\n transform-origin: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n padding: var(--base-size-16);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n padding-inline: var(--base-size-16);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar .SubdomainNavBar-inner-container {\n height: 100%;\n max-width: none;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area {\n height: 100%;\n max-width: none;\n gap: 0;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li {\n display: flex;\n align-items: center;\n height: 100%;\n padding-inline: 0 var(--base-size-16);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n justify-content: center;\n width: auto;\n padding-inline: var(--base-size-16) var(--base-size-8);\n border-inline-end: 0;\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child::after {\n margin-inline-end: 0;\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-item {\n padding-inline: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark {\n justify-content: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title > * {\n font-size: var(--base-size-16);\n line-height: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav,\n .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow,\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list,\n .SubdomainNavBar .SubdomainNavBar-secondary-nav,\n .SubdomainNavBar .SubdomainNavBar-button-area,\n .SubdomainNavBar .SubdomainNavBar-leading-component,\n .SubdomainNavBar .SubdomainNavBar-trailing-component {\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-leading-component,\n .SubdomainNavBar .SubdomainNavBar-trailing-component {\n padding-inline: var(--base-size-16);\n margin-inline: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-leading-component {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list {\n align-items: stretch;\n margin: 0;\n block-size: 100%;\n max-block-size: 100%;\n padding-inline-start: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow {\n margin: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list-item {\n display: flex;\n align-items: center;\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-link {\n align-items: center;\n height: 100%;\n padding: 0 var(--base-size-16);\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link,\n .SubdomainNavBar .SubdomainNavBar-more-link {\n padding-inline: var(--base-size-4);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n gap: var(--base-size-4);\n padding: var(--base-size-4) var(--base-size-12);\n background-color: transparent;\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:hover > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:active > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link[aria-expanded='true'] > .SubdomainNavBar-link-content {\n background-color: var(--brand-SubdomainNavBar-color-link-bgColor);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible,\n .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible {\n outline: none;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible > .SubdomainNavBar-link-content {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n }\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n height: 100%;\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger--has-trailing-item {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-button-area {\n align-items: center;\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-button-area--has-leading-item {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-search-input-width: clamp(\n calc(var(--base-size-128) + var(--base-size-32)),\n 28.5vw,\n calc(var(--base-size-128) * 3 + var(--base-size-36))\n );\n\n align-self: stretch;\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-primary-nav {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n height: calc(var(--SubdomainNavBar-height) + var(--base-size-48));\n }\n\n .SubdomainNavBar--variant-default::after {\n inset-block-start: var(--SubdomainNavBar-height);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: var(--SubdomainNavBar-height);\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-primary-nav .SubdomainNavBar-inner-container {\n grid-template-rows: var(--SubdomainNavBar-height) var(--base-size-48);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-title-navigation {\n grid-column: 1;\n grid-row: 1;\n min-width: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-primary-nav {\n grid-column: 1 / -1;\n grid-row: 2;\n min-width: 0;\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-primary-nav-list {\n padding-inline-start: calc(var(--base-size-64) + var(--brand-borderWidth-thin));\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container > .SubdomainNavBar-leading-component {\n grid-column: 2;\n grid-row: 1;\n justify-self: start;\n border-inline-start: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container > .SubdomainNavBar-secondary-nav {\n grid-column: 3;\n grid-row: 1;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button {\n justify-content: center;\n gap: 0;\n width: var(--base-size-32);\n padding: var(--base-size-8);\n background-color: transparent;\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-placeholder {\n gap: 0;\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-placeholder-text,\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-shortcut {\n display: none;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--base-size-48);\n width: var(--base-size-48);\n min-width: var(--base-size-48);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n padding-inline: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button {\n width: 100%;\n block-size: 100%;\n padding-inline: var(--base-size-16);\n border-radius: 0;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .SubdomainNavBar-cta-button--secondary {\n display: inline-flex;\n }\n}\n\n/\n Search dialog control area\n /\n.SubdomainNavBar-search-form {\n display: flex;\n width: 100%;\n}\n\n.SubdomainNavBar-search-input-area {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n width: 100%;\n}\n\n.SubdomainNavBar-search-close-button {\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n min-block-size: var(--base-size-32);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n border: 0;\n border-radius: var(--brand-borderRadius-medium);\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-medium);\n line-height: var(--base-size-14);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-close-button:hover {\n background-color: var(--brand-color-canvas-inset);\n}\n\n.SubdomainNavBar-search-close-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-dialog-control-area {\n height: var(--base-size-40);\n max-width: none;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n background: transparent;\n}\n\n.SubdomainNavBar-search-text-input {\n border-color: transparent;\n}\n\n.SubdomainNavBar-search-results-area {\n width: 100%;\n}\n\n.SubdomainNavBar-search-results-container {\n animation: fade-in-down 500ms;\n padding: var(--base-size-24);\n background-color: var(--base-color-scale-white-0);\n border-radius: var(--brand-borderRadius-large);\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n max-height: 514px;\n height: 70vh;\n max-width: 570px;\n margin: 0 auto;\n width: 80%;\n}\n\n.SubdomainNavBar-search-results {\n overflow-y: scroll;\n list-style: none;\n padding: 0 var(--base-size-24) 0 0;\n margin: 0;\n height: 90%;\n}\n\n.SubdomainNavBar-search-results-heading {\n display: block;\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--base-size-20);\n line-height: var(--base-size-24);\n margin-bottom: var(--base-size-20);\n padding: 0 var(--base-size-8);\n color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-result-group,\n.SubdomainNavBar-search-result-group-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-result-group-heading {\n display: block;\n margin: 0 0 var(--base-size-20);\n padding: 0 var(--base-size-8);\n color: var(--brand-color-text-muted);\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-result-item {\n padding: var(--base-size-16) var(--base-size-8);\n border-bottom: solid var(--brand-borderWidth-thin, 1px)\n var(--brand-SubdomainNavBar-search-results-border-default, #b7bfc7);\n}\n\n.SubdomainNavBar-search-result-item-container a[aria-selected='true'] {\n outline: var(--brand-color-focus) auto var(--brand-borderWidth-thick);\n}\n\n.SubdomainNavBar-search-result-item-container {\n letter-spacing: var(--brand-heading-letterSpacing-400);\n font-size: var(--brand-text-size-400);\n}\n\n.SubdomainNavBar-search-result-item-container a {\n display: block;\n color: var(--base-color-scale-black-0);\n text-decoration: none;\n margin: 0 0 var(--base-size-12);\n font-size: var(--base-size-16);\n font-weight: var(--brand-heading-weight-400);\n font-family: var(--brand-heading-fontFamily);\n line-height: var(--brand-text-lineHeight-400);\n}\n\n.SubdomainNavBar-search-result-item-container a svg {\n flex: none;\n}\n\n.SubdomainNavBar-search-result-item-container a:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-search-result-item-desc {\n color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-dialog {\n position: fixed;\n inset-block-start: calc(var(--base-size-64) + var(--base-size-8));\n inset-block-end: auto;\n inset-inline: calc(var(--base-size-64) + var(--base-size-8));\n z-index: 99;\n width: min(\n calc(100vw - ((var(--base-size-64) + var(--base-size-8)) 2)),\n calc((var(--base-size-128) * 6) + var(--base-size-36))\n );\n max-height: calc(100vh - ((var(--base-size-64) + var(--base-size-8)) * 2));\n height: auto;\n margin-inline: auto;\n padding: var(--base-size-16);\n overflow: hidden;\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-large);\n box-shadow: 0 0 calc(var(--base-size-32) + var(--base-size-2)) var(--brand-SubdomainNavBar-searchDialog-shadowColor);\n}\n\n.SubdomainNavBar-search-dialog--has-results {\n padding-block-end: var(--base-size-32);\n}\n\n.SubdomainNavBar-search-dialog::backdrop {\n background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n -webkit-backdrop-filter: blur(var(--base-size-24));\n backdrop-filter: blur(var(--base-size-24));\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-input-area {\n gap: var(--base-size-16);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form {\n min-width: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form section > span:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-text-input {\n color: var(--brand-color-text-default);\n font-size: calc(var(--base-size-16) + var(--base-size-2));\n font-weight: var(--base-text-weight-medium);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-close-button {\n background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-area--visible {\n margin-block-start: var(--base-size-24);\n padding-block-start: var(--base-size-24);\n border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-container {\n width: 100%;\n height: auto;\n max-width: none;\n max-height: calc(100vh - (((var(--base-size-64) + var(--base-size-8)) * 2) + var(--base-size-128)));\n padding: 0;\n margin: 0;\n overflow-y: auto;\n background-color: transparent;\n border-radius: 0;\n box-shadow: none;\n animation: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results {\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-heading,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group-heading {\n margin-block-end: var(--base-size-20);\n padding: 0;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-heading-weight-600);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item {\n padding: var(--base-size-16) var(--base-size-4);\n border-block-end: 0;\n border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog\n .SubdomainNavBar-search-result-group-list\n > .SubdomainNavBar-search-result-item:first-child,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results > .SubdomainNavBar-search-result-item:first-child {\n padding-block-start: var(--base-size-12);\n border-block-start: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container {\n font-size: var(--brand-text-size-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a {\n display: flex;\n align-items: center;\n gap: calc(var(--base-size-8) + var(--base-size-2));\n width: 100%;\n margin: 0;\n color: var(--brand-color-text-default);\n font-size: var(--brand-text-size-300);\n font-weight: var(--brand-heading-weight-600);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a span {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-desc,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-meta {\n display: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-search-dialog {\n inset-block-start: var(--base-size-16);\n inset-block-end: auto;\n inset-inline: var(--base-size-16);\n width: calc(100vw - (var(--base-size-16) * 2));\n max-height: calc(100vh - (var(--base-size-16) * 2));\n height: auto;\n }\n}\n\n.SubdomainNavBar-skip-to-content {\n position: absolute;\n inset-block-start: calc(var(--SubdomainNavBar-height) / 2);\n inset-inline-start: var(--base-size-16);\n z-index: 100;\n transform: translateY(-50%);\n}\n\n/\n Reusable animations\n /\n@keyframes fade-in-down {\n 0% {\n opacity: 0;\n transform: translateY(-20px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fade-in-down-overflow {\n 0% {\n opacity: 0;\n transform: translateY(calc(0px - var(--base-size-24)));\n }\n 100% {\n opacity: 1;\n transform: translateY(calc(0px - var(--base-size-4)));\n }\n}\n\n@keyframes fade-out {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes fade-in-down-staggered {\n 0% {\n opacity: 0;\n transform: scale(0.6) translateY(-8px);\n }\n\n 100% {\n opacity: 1;\n }\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 .SubdomainNavBar,\n .SubdomainNavBar::before,\n .SubdomainNavBar::after,\n .SubdomainNavBar {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/base-Dl5rLq0_.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ :root{--brand-SubNav-offset-overflowMenu:.25rem;--brand-SubNav-height-overflowMenuItemMin:2.5rem;--brand-SubNav-height-overflowMenuInset:8rem;--brand-SubNav-width-overflowMenuMin:10rem;--brand-SubNav-width-overflowMenuInset:2rem;--brand-SubNav-width-subMenu:18.75rem}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes-Bna3nyXf.css ADDED Viewed

@@ -0,0 +1 @@

+ :root,[data-color-mode=light]{--brand-SubNav-bgColor:var(--brand-color-canvas-default);--brand-SubNav-overflowMenu-bgColor-rest:var(--brand-color-canvas-default);--brand-SubNav-overflowMenu-bgColor-hover:var(--brand-color-canvas-subtle);--brand-SubNav-overflowMenu-fgColor-rest:var(--brand-color-text-muted);--brand-SubNav-overflowMenu-fgColor-hover:var(--brand-color-text-default);--brand-SubNav-overflowMenu-toggle-bgColor-rest:transparent;--brand-SubNav-overflowMenu-toggle-bgColor-hover:var(--base-color-scale-gray-1);--brand-SubNav-overflowMenu-toggle-bgColor-active:var(--base-color-scale-gray-1);--brand-SubNav-color-link-rest:var(--brand-color-text-default);--brand-SubNav-color-link-active:var(--brand-color-text-default);--brand-SubNav-color-link-bgColor:#e4ebe6;--brand-SubNav-shadow:0px 100px 80px #00000003, 0px 41px 33px #00000005, 0px 22px 17px #00000005, 0px 12px 10px #00000008, 0px 6px 5px #0000000a, 0px 2px 2px #00000012}[data-color-mode=dark]{--brand-SubNav-bgColor:var(--brand-color-canvas-default);--brand-SubNav-overflowMenu-bgColor-rest:var(--brand-color-canvas-default);--brand-SubNav-overflowMenu-bgColor-hover:var(--brand-color-canvas-subtle);--brand-SubNav-overflowMenu-fgColor-rest:var(--brand-color-text-muted);--brand-SubNav-overflowMenu-fgColor-hover:var(--brand-color-text-default);--brand-SubNav-overflowMenu-toggle-bgColor-rest:transparent;--brand-SubNav-overflowMenu-toggle-bgColor-hover:var(--base-color-scale-gray-6);--brand-SubNav-overflowMenu-toggle-bgColor-active:var(--base-color-scale-gray-6);--brand-SubNav-color-link-rest:var(--brand-color-text-default);--brand-SubNav-color-link-active:var(--brand-color-text-default);--brand-SubNav-color-link-bgColor:#323834;--brand-SubNav-shadow:0px 100px 80px #00000003, 0px 41px 33px #00000005, 0px 22px 17px #00000005, 0px 12px 10px #00000008, 0px 6px 5px #0000000a, 0px 2px 2px #00000012}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes-C_lnz8M6.css ADDED Viewed

@@ -0,0 +1 @@

+ :root,[data-color-mode=light]{--brand-SubdomainNavBar-canvas-default:#ffffff80;--brand-SubdomainNavBar-canvas-search:var(--base-color-scale-white-0);--brand-SubdomainNavBar-canvas-overflow-default:var(--base-color-scale-white-0);--brand-SubdomainNavBar-canvas-overflow-hover:var(--base-color-scale-gray-0);--brand-SubdomainNavBar-fg-overflow-default:var(--brand-color-text-default);--brand-SubdomainNavBar-color-link-bgColor:var(--base-color-scale-gray-1);--brand-SubdomainNavBar-searchDialog-shadowColor:#0000001a;--brand-SubdomainNavBar-searchDialog-backdropColor:#0003;--brand-SubdomainNavBar-border-nav-default:var(--base-color-scale-green-6);--brand-SubdomainNavBar-border-nav-pressed:var(--base-color-scale-black-0);--brand-SubdomainNavBar-border-button-hover:var(--base-color-scale-black-0)}[data-color-mode=dark]{--brand-SubdomainNavBar-canvas-default:#0d111780;--brand-SubdomainNavBar-canvas-search:var(--base-color-scale-black-0);--brand-SubdomainNavBar-canvas-overflow-default:var(--base-color-scale-white-0);--brand-SubdomainNavBar-canvas-overflow-hover:var(--base-color-scale-gray-0);--brand-SubdomainNavBar-fg-overflow-default:var(--brand-color-text-onEmphasis);--brand-SubdomainNavBar-color-link-bgColor:var(--base-color-scale-gray-6);--brand-SubdomainNavBar-searchDialog-shadowColor:#0000001a;--brand-SubdomainNavBar-searchDialog-backdropColor:#0003;--brand-SubdomainNavBar-border-nav-default:var(--base-color-scale-green-3);--brand-SubdomainNavBar-border-nav-pressed:var(--base-color-scale-white-0);--brand-SubdomainNavBar-border-button-hover:var(--base-color-scale-white-0)}

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,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;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;AAElD,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,CAAA;~~AAmc~~/D;;GAEG;AACH,eAAO,MAAM,iBAAiB;~~2BAxeL~~,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;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;~~CAwbnE~~,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,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;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;AAElD,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,CAAA;AA4c/D;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BAjfL,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;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CAicnE,CAAA"}

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

@@ -45,10 +45,11 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 		...r,
 		children: i
 	});
-}, A = h(({ className: e, ...t }, n) => /* @__PURE__ */ S(s, {
-	ref: n,
-	className: e,
-	...t
+}, A = h(({ className: t, rounded: n = !0, ...r }, i) => /* @__PURE__ */ S(s, {
+	ref: i,
+	className: e(n && d["RiverBreakoutTabs__visual--rounded"], t),
+	rounded: n,
+	...r
 })), j = w(T), M = w(E), N = w(D), P = w(O), F = w(k), I = w(A), L = (e) => p.isValidElement(e) && e.type === n, R = (e) => p.isValidElement(e) && e.type === a, z = (e) => p.Children.toArray(e.props.children).reduce((e, t) => (N(t) && (e.icon = t), P(t) && (e.heading = t), F(t) && (e.content = t), I(t) && (e.visual = t), e), {
 	icon: null,
 	heading: null,
@@ -160,7 +161,10 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 			className: d.RiverBreakoutTabs__accordion,
 			children: [X >= 0 && N[X]?.visual && /* @__PURE__ */ C("div", {
 				className: d.RiverBreakoutTabs__accordionSharedVisuals,
-				children: [$, m(N[X].visual, { className: e(N[X].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual) })]
+				children: [$, m(N[X].visual, {
+					key: String(X),
+					className: e(N[X].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual)
+				})]
 			}), N.map((t, n) => /* @__PURE__ */ C(f, {
 				"data-index": n,
 				className: e(d.RiverBreakoutTabs__accordionItem, n === X && d["RiverBreakoutTabs__item--selected"], t.className),

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

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

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module-C46WY_qp.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{--river-breakout-tabs-columns:1}@media screen and (width<=63.24rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{width:100%;max-width:38.625rem;margin-inline:auto}}@media screen and (width>=80rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{--brand-RiverBreakout-variant-gridline-spacing-outerInline:var(--base-size-60);--brand-RiverBreakout-variant-gridline-spacing-outerBlock:var(--base-size-60)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5{flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabList___mzEmX{flex-direction:column;padding-block-end:var(--base-size-80);display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo{border-radius:var(--brand-borderRadius-small);order:1;width:100%;margin-block-end:var(--base-size-36);position:relative;overflow:hidden}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisuals___DbPMZ{width:100%;margin-block-end:var(--base-size-16);position:relative}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn{z-index:1;min-width:0;position:relative}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG{z-index:1;position:relative}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG{padding:var(--base-size-64)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2 .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2 .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG{padding-block-end:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9:has(>[data-video-player-container]){border-radius:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__visual--rounded___GqKyX>[data-video-player-container]{border-radius:var(--brand-borderRadius-medium);overflow:hidden}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2 .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__visual--rounded___GqKyX>[data-video-player-container]{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo{border-radius:0;overflow:visible}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M{inset-block-start:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock));inset-inline:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline))}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9 img,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9 picture,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9 video,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG img,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG picture,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG video{max-width:100%;display:block}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz [class*=River__visual--rounded]{border-radius:var(--brand-borderRadius-small)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn[hidden]{display:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tablist___sGkZH{grid-template-columns:repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));grid-gap:var(--base-size-40);gap:var(--base-size-40);order:2;display:grid}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActions____5ifh{grid-template-columns:repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));grid-gap:var(--base-size-40);gap:var(--base-size-40);order:3;display:grid}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5{flex-direction:column;align-items:flex-start;min-width:0;display:flex;position:relative}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 0;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-start:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR:before{transform:translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);background-color:var(--brand-color-accent-primary)}@media screen and (width>=63.25rem) and (hover:hover) and (pointer:fine){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5:hover:before{transform:translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);background-color:var(--brand-color-accent-primary)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9{color:var(--brand-color-text-muted);transition:color var(--brand-animation-duration-fast) ease-in-out;margin:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9{color:var(--brand-color-text-default)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__icon___0ToMw{justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;flex-direction:column;align-items:flex-start;padding-block-start:var(--base-size-28);padding-inline:0;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tabHeading___WIYkc{margin:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0>*+.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tabHeading___WIYkc{margin-block-start:var(--base-size-20)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListContent___Thx_L{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;margin-block-start:var(--base-size-12);display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListAction____VPPu{color:var(--brand-Link-color-accent);font-weight:var(--base-text-weight-medium);-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActionItem___Vpe6P{margin-block-start:var(--base-size-12)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__content___NwDBO{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5{padding-block-end:var(--base-size-40)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE>span{color:var(--brand-Link-color-accent);font-weight:var(--base-text-weight-medium)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1{border-top:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:after{display:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 0;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-start:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR:before{transform:translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);background-color:var(--brand-color-accent-primary)}@media (hover:hover) and (pointer:fine){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:hover:before{transform:translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);background-color:var(--brand-color-accent-primary)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeading___u6tN5{color:var(--brand-color-text-default)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeadingInner___nuDDN{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionIcon___GRZr8{flex-shrink:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionLabel___UsRuR{align-items:center;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionPanel___yTX_x{gap:var(--base-size-24);flex-direction:column;display:flex}@media screen and (width>=618px){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:none}}@media screen and (width>=1300px){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}

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

@@ -1,4 +1,4 @@
-import './RiverBreakoutTabs.module-CB2SZhbE.css';//#region src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css
+import './RiverBreakoutTabs.module-C46WY_qp.css';//#region src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css
 var e = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz", t = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5", n = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabList___mzEmX", r = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo", i = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisuals___DbPMZ", a = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn", o = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M", s = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG", c = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9", l = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tablist___sGkZH", u = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActions____5ifh", d = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5", f = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9", p = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__icon___0ToMw", m = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0", h = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tabHeading___WIYkc", g = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListContent___Thx_L", _ = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListAction____VPPu", v = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActionItem___Vpe6P", y = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__content___NwDBO", b = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE", x = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob", S = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1", C = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeading___u6tN5", w = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeadingInner___nuDDN", T = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionIcon___GRZr8", E = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionLabel___UsRuR", D = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionPanel___yTX_x", O = {
 	RiverBreakoutTabs: e,
 	RiverBreakoutTabs__accordion: t,
@@ -10,8 +10,9 @@ var e = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz", t =
 	RiverBreakoutTabs__accordionSharedVisual: s,
 	"RiverBreakoutTabs--has-background-visual": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK",
 	"RiverBreakoutTabs--image-position-block-end": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2",
-	"RiverBreakoutTabs--background-visual-full-bleed": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs",
 	RiverBreakoutTabs__sharedVisual: c,
+	"RiverBreakoutTabs__visual--rounded": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__visual--rounded___GqKyX",
+	"RiverBreakoutTabs--background-visual-full-bleed": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs",
 	RiverBreakoutTabs__tablist: l,
 	RiverBreakoutTabs__wideTabListActions: u,
 	RiverBreakoutTabs__item: d,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RiverBreakoutTabs.module.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css"],"sourcesContent":[".RiverBreakoutTabs {\n --river-breakout-tabs-columns: 1;\n}\n\n@media screen and (max-width: 63.24rem) {\n .RiverBreakoutTabs {\n width: 100%;\n max-width: 38.625rem;\n margin-inline: auto;\n }\n}\n\n@media screen and (min-width: 80rem) {\n .RiverBreakoutTabs {\n --brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-60);\n --brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-60);\n }\n}\n\n.RiverBreakoutTabs__accordion {\n display: flex;\n flex-direction: column;\n}\n\n.RiverBreakoutTabs__wideTabList {\n display: flex;\n flex-direction: column;\n padding-block-end: var(--base-size-80);\n}\n\n.RiverBreakoutTabs__sharedVisuals {\n position: relative;\n order: 1;\n margin-block-end: var(--base-size-36);\n width: 100%;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__accordionSharedVisuals {\n position: relative;\n margin-block-end: var(--base-size-16);\n width: 100%;\n}\n\n.RiverBreakoutTabs__sharedVisualPanel {\n position: relative;\n z-index: 1;\n min-width: 0;\n}\n\n.RiverBreakoutTabs__backgroundVisual {\n position: absolute;\n inset: 0;\n z-index: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.RiverBreakoutTabs__accordionSharedVisual {\n position: relative;\n z-index: 1;\n}\n\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,\n .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {\n padding: var(--base-size-64);\n }\n}\n\n/* for imagePosition=\"block-end\" /\n.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__sharedVisualPanel,\n.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__accordionSharedVisual {\n padding-block-end: 0;\n}\n\n/ for backgroundVisualFullBleed — extend the backdrop to the gridline edges /\n.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__sharedVisuals {\n overflow: visible;\n border-radius: 0;\n}\n\n.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__backgroundVisual {\n inset-block-start: calc(-1 var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock));\n inset-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n}\n\n.RiverBreakoutTabs__sharedVisual :is(img, picture, video),\n.RiverBreakoutTabs__accordionSharedVisual :is(img, picture, video) {\n display: block;\n max-width: 100%;\n}\n\n.RiverBreakoutTabs :global([class='River__visual--rounded']) {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__sharedVisualPanel[hidden] {\n display: none;\n}\n\n.RiverBreakoutTabs__tablist {\n order: 2;\n display: grid;\n grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__wideTabListActions {\n order: 3;\n display: grid;\n grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__item {\n position: relative;\n min-width: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.RiverBreakoutTabs__item::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n height: var(--brand-borderWidth-thin);\n transform: scaleY(1);\n transform-origin: 50% 0;\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.RiverBreakoutTabs__item--selected::before {\n transform: translateY(calc(-1 var(--brand-borderWidth-thin))) scaleY(2);\n background-color: var(--brand-color-accent-primary);\n}\n\n@media screen and (min-width: 63.25rem) and (hover: hover) and (pointer: fine) {\n .RiverBreakoutTabs__item:hover::before {\n transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n background-color: var(--brand-color-accent-primary);\n }\n}\n\n.RiverBreakoutTabs__heading {\n margin: 0;\n color: var(--brand-color-text-muted);\n transition: color var(--brand-animation-duration-fast) ease-in-out;\n}\n\n.RiverBreakoutTabs__item--selected .RiverBreakoutTabs__heading {\n color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.RiverBreakoutTabs__tab {\n width: 100%;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n padding-block-start: var(--base-size-28);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n cursor: pointer;\n outline: none;\n padding-inline: 0;\n}\n\n.RiverBreakoutTabs__tab:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-4);\n}\n\n.RiverBreakoutTabs__tabHeading {\n margin: 0;\n}\n\n/* 20px below the icon — only applies when an icon precedes the heading /\n.RiverBreakoutTabs__tab > + .RiverBreakoutTabs__tabHeading {\n margin-block-start: var(--base-size-20);\n}\n\n.RiverBreakoutTabs__wideTabListContent {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-12);\n margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__wideTabListAction {\n color: var(--brand-Link-color-accent);\n font-weight: var(--base-text-weight-medium);\n text-decoration: none;\n}\n\n.RiverBreakoutTabs__wideTabListActionItem {\n margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__link {\n text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordion {\n padding-block-end: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__accordionContent {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link,\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link > span {\n color: var(--brand-Link-color-accent);\n font-weight: var(--base-text-weight-medium);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link {\n text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordionItem {\n border-top: none;\n}\n\n.RiverBreakoutTabs__accordionItem::after {\n display: none;\n}\n\n.RiverBreakoutTabs__accordionItem::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n height: var(--brand-borderWidth-thin);\n transform: scaleY(1);\n transform-origin: 50% 0;\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.RiverBreakoutTabs__accordionItem.RiverBreakoutTabs__item--selected::before {\n transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n background-color: var(--brand-color-accent-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .RiverBreakoutTabs__accordionItem:hover::before {\n transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n background-color: var(--brand-color-accent-primary);\n }\n}\n\n.RiverBreakoutTabs__accordionHeading {\n color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__accordionHeadingInner {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionIcon {\n flex-shrink: 0;\n}\n\n.RiverBreakoutTabs__accordionLabel {\n display: inline-flex;\n align-items: center;\n}\n\n.RiverBreakoutTabs__accordionPanel {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 618px) {\n .RiverBreakoutTabs {\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 .RiverBreakoutTabs {\n border-inline: none;\n }\n}\n\n@media screen and (min-width: 1300px) {\n .RiverBreakoutTabs {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"RiverBreakoutTabs.module.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css"],"sourcesContent":[".RiverBreakoutTabs {\n --river-breakout-tabs-columns: 1;\n}\n\n@media screen and (max-width: 63.24rem) {\n .RiverBreakoutTabs {\n width: 100%;\n max-width: 38.625rem;\n margin-inline: auto;\n }\n}\n\n@media screen and (min-width: 80rem) {\n .RiverBreakoutTabs {\n --brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-60);\n --brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-60);\n }\n}\n\n.RiverBreakoutTabs__accordion {\n display: flex;\n flex-direction: column;\n}\n\n.RiverBreakoutTabs__wideTabList {\n display: flex;\n flex-direction: column;\n padding-block-end: var(--base-size-80);\n}\n\n.RiverBreakoutTabs__sharedVisuals {\n position: relative;\n order: 1;\n margin-block-end: var(--base-size-36);\n width: 100%;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__accordionSharedVisuals {\n position: relative;\n margin-block-end: var(--base-size-16);\n width: 100%;\n}\n\n.RiverBreakoutTabs__sharedVisualPanel {\n position: relative;\n z-index: 1;\n min-width: 0;\n}\n\n.RiverBreakoutTabs__backgroundVisual {\n position: absolute;\n inset: 0;\n z-index: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.RiverBreakoutTabs__accordionSharedVisual {\n position: relative;\n z-index: 1;\n}\n\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,\n .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {\n padding: var(--base-size-64);\n }\n}\n\n/* for imagePosition=\"block-end\" /\n.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__sharedVisualPanel,\n.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__accordionSharedVisual {\n padding-block-end: 0;\n}\n\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisual:has(> [data-video-player-container]) {\n border-radius: 0;\n}\n\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__visual--rounded > [data-video-player-container] {\n overflow: hidden;\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverBreakoutTabs--has-background-visual.RiverBreakoutTabs--image-position-block-end\n .RiverBreakoutTabs__visual--rounded\n > [data-video-player-container] {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ for backgroundVisualFullBleed — extend the backdrop to the gridline edges /\n.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__sharedVisuals {\n overflow: visible;\n border-radius: 0;\n}\n\n.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__backgroundVisual {\n inset-block-start: calc(-1 var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock));\n inset-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n}\n\n.RiverBreakoutTabs__sharedVisual :is(img, picture, video),\n.RiverBreakoutTabs__accordionSharedVisual :is(img, picture, video) {\n display: block;\n max-width: 100%;\n}\n\n.RiverBreakoutTabs :global([class='River__visual--rounded']) {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__sharedVisualPanel[hidden] {\n display: none;\n}\n\n.RiverBreakoutTabs__tablist {\n order: 2;\n display: grid;\n grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__wideTabListActions {\n order: 3;\n display: grid;\n grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__item {\n position: relative;\n min-width: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.RiverBreakoutTabs__item::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n height: var(--brand-borderWidth-thin);\n transform: scaleY(1);\n transform-origin: 50% 0;\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.RiverBreakoutTabs__item--selected::before {\n transform: translateY(calc(-1 var(--brand-borderWidth-thin))) scaleY(2);\n background-color: var(--brand-color-accent-primary);\n}\n\n@media screen and (min-width: 63.25rem) and (hover: hover) and (pointer: fine) {\n .RiverBreakoutTabs__item:hover::before {\n transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n background-color: var(--brand-color-accent-primary);\n }\n}\n\n.RiverBreakoutTabs__heading {\n margin: 0;\n color: var(--brand-color-text-muted);\n transition: color var(--brand-animation-duration-fast) ease-in-out;\n}\n\n.RiverBreakoutTabs__item--selected .RiverBreakoutTabs__heading {\n color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.RiverBreakoutTabs__tab {\n width: 100%;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n padding-block-start: var(--base-size-28);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n cursor: pointer;\n outline: none;\n padding-inline: 0;\n}\n\n.RiverBreakoutTabs__tab:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-4);\n}\n\n.RiverBreakoutTabs__tabHeading {\n margin: 0;\n}\n\n/* 20px below the icon — only applies when an icon precedes the heading /\n.RiverBreakoutTabs__tab > + .RiverBreakoutTabs__tabHeading {\n margin-block-start: var(--base-size-20);\n}\n\n.RiverBreakoutTabs__wideTabListContent {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-12);\n margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__wideTabListAction {\n color: var(--brand-Link-color-accent);\n font-weight: var(--base-text-weight-medium);\n text-decoration: none;\n}\n\n.RiverBreakoutTabs__wideTabListActionItem {\n margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__link {\n text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordion {\n padding-block-end: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__accordionContent {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link,\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link > span {\n color: var(--brand-Link-color-accent);\n font-weight: var(--base-text-weight-medium);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link {\n text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordionItem {\n border-top: none;\n}\n\n.RiverBreakoutTabs__accordionItem::after {\n display: none;\n}\n\n.RiverBreakoutTabs__accordionItem::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n height: var(--brand-borderWidth-thin);\n transform: scaleY(1);\n transform-origin: 50% 0;\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.RiverBreakoutTabs__accordionItem.RiverBreakoutTabs__item--selected::before {\n transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n background-color: var(--brand-color-accent-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .RiverBreakoutTabs__accordionItem:hover::before {\n transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n background-color: var(--brand-color-accent-primary);\n }\n}\n\n.RiverBreakoutTabs__accordionHeading {\n color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__accordionHeadingInner {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionIcon {\n flex-shrink: 0;\n}\n\n.RiverBreakoutTabs__accordionLabel {\n display: inline-flex;\n align-items: center;\n}\n\n.RiverBreakoutTabs__accordionPanel {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 618px) {\n .RiverBreakoutTabs {\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 .RiverBreakoutTabs {\n border-inline: none;\n }\n}\n\n@media screen and (min-width: 1300px) {\n .RiverBreakoutTabs {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n"],"mappings":""}

package/lib/SubNav/SubNav.d.ts CHANGED Viewed

@@ -12,6 +12,13 @@ type SubNavContextType = {
     portalRef: RefObject<HTMLDivElement | null>;
 };
 export declare const useSubNavContext: () => SubNavContextType;
+export type SubNavMenuLabels = {
+    menuLabel: string;
+    closeLabel: string;
+    activeLabel: string;
+    closeActiveLabel: string;
+    overflowMenuLabel: string;
+};
 export type SubNavProps = {
     /**
      * @deprecated The hasShadow prop is deprecated and will be removed in a future release.
@@ -22,6 +29,10 @@ export type SubNavProps = {
      * removing any internal padding and guttering.
      */
     fullWidth?: boolean;
+    /**
+     * Customizable accessible labels
+     */
+    menuLabels?: Partial<SubNavMenuLabels>;
     'data-testid'?: string;
 } & PropsWithChildren<BaseProps<HTMLDivElement>>;
 type HeadingBaseProps = {
@@ -37,11 +48,16 @@ type LinkBaseProps = {
     'data-testid'?: string;
     variant?: TextProps['variant'];
     _subMenuVariant?: SubMenuVariants;
+    _isOverflowed?: boolean;
+    _isOverflowMenu?: boolean;
+    _onOverflowLinkActivate?: () => void;
 } & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
 type SubMenuProps = {
     variant?: SubMenuVariants;
+    _isOverflowMenu?: boolean;
+    _onOverflowLinkActivate?: () => void;
 } & React.HTMLAttributes<HTMLUListElement> & BaseProps<HTMLUListElement>;
-declare function SubMenuBase({ children, className, variant, ...props }: SubMenuProps): React.JSX.Element;
+declare function SubMenuBase({ children, className, 'aria-label': ariaLabel, variant, _isOverflowMenu, _onOverflowLinkActivate, ...props }: SubMenuProps): React.JSX.Element;
 type SubNavActionProps = {
     /**
      * Required path or location for the action button to link to.
@@ -75,6 +91,8 @@ export declare const SubNav: React.NamedExoticComponent<Omit<SubNavProps, "ref">
         readonly heading: string;
         readonly action: string;
         readonly subMenu: string;
+        readonly overflowButton: string;
+        readonly overflowMenu: string;
     };
 };
 export {};

package/lib/SubNav/useAnchorMenu.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare function useAnchorMenu(): {
+    anchorMenuRef: import("react").RefObject<HTMLDivElement | null>;
+    portalRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/lib/SubNav/useNarrowMenu.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare function useNarrowMenu(isLarge: boolean | undefined): {
+    navRef: import("react").RefObject<HTMLElement | null>;
+    narrowMenuRef: import("react").RefObject<HTMLDivElement | null>;
+    isNarrowMenuOpen: boolean;
+    closeNarrowMenu: () => void;
+    toggleNarrowMenu: () => void;
+};