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

@primer/react-brand 0.77.1-rc.bd5b9efe → 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 (535) 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/Tooltip/Tooltip.d.ts CHANGED Viewed

@@ -1,9 +1,13 @@
 import React from 'react';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css';
 import { BaseProps } from '../component-helpers';
-type TooltipDirection = 'n' | 'e' | 's' | 'w';
+export declare const TooltipDirections: readonly ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+export declare const TooltipDelays: readonly ["short", "medium", "long"];
+export type TooltipDirection = (typeof TooltipDirections)[number];
+export type TooltipDelay = (typeof TooltipDelays)[number];
 export type TooltipProps = {
     direction?: TooltipDirection;
+    delay?: TooltipDelay;
     text: string;
     type?: 'label' | 'description';
     children?: React.ReactNode;
@@ -22,5 +26,4 @@ export declare const TooltipContext: React.Context<{
     tooltipId?: string;
 }>;
 export declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React.RefAttributes<unknown>>;
-export {};
 //# sourceMappingURL=Tooltip.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAUlE,OAAO,2GAA2G,CAAA;AAClH,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,~~KAAK~~,gBAAgB,GAAG,~~GAAG~~,~~GAAG~~,~~GAAG~~,~~GAAG~~,~~GAAG~~,~~GAAG~~,GAAG,CAAA;~~AAC7C~~,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;AAE7B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACtC,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACtC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAC1C,CAAA;~~AAkCD~~,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAE3E,eAAO,MAAM,OAAO,~~2FAgKnB~~,CAAA"}
1	+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAUlE,OAAO,2GAA2G,CAAA;AAClH,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,eAAO,MAAM,iBAAiB,uDAAwD,CAAA;AACtF,eAAO,MAAM,aAAa,sCAAuC,CAAA;AACjE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACjE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AACzD,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;AAE7B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACtC,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACtC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAC1C,CAAA;AAgDD,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAE3E,eAAO,MAAM,OAAO,2FAyNnB,CAAA"}

package/esm/Tooltip/Tooltip.js CHANGED Viewed

@@ -8,106 +8,151 @@ import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { getAnchoredPosition as d } from "@primer/behaviors";
 import { apply as f, isSupported as p } from "@oddbird/popover-polyfill/fn";
 //#region src/Tooltip/Tooltip.tsx
-var m = {
+var m = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+], h = [
+	"short",
+	"medium",
+	"long"
+], g = {
+	nw: {
+		side: "outside-top",
+		align: "end"
+	},
 	n: {
 		side: "outside-top",
 		align: "center"
 	},
+	ne: {
+		side: "outside-top",
+		align: "start"
+	},
 	e: {
 		side: "outside-right",
 		align: "center"
 	},
+	se: {
+		side: "outside-bottom",
+		align: "start"
+	},
 	s: {
 		side: "outside-bottom",
 		align: "center"
 	},
+	sw: {
+		side: "outside-bottom",
+		align: "end"
+	},
 	w: {
 		side: "outside-left",
 		align: "center"
 	}
-}, h = {
+}, _ = {
+	"outside-top-end": "nw",
 	"outside-top-center": "n",
+	"outside-top-start": "ne",
 	"outside-right-center": "e",
+	"outside-bottom-start": "se",
 	"outside-bottom-center": "s",
+	"outside-bottom-end": "sw",
 	"outside-left-center": "w"
-}, g = [
+}, v = {
+	short: 50,
+	medium: 400,
+	long: 1200
+}, y = [
 	"a[href]",
 	"button:not(:disabled)",
 	"summary",
 	"select",
 	"input:not([type=hidden])",
 	"textarea"
-], _ = (e) => g.some((t) => e.matches(t)) || e.hasAttribute("role") && e.getAttribute("role") === "button", v = i.createContext({}), y = i.forwardRef(({ direction: g = "s", text: y, type: b = "description", children: x, id: S, className: C, ...w }, T) => {
-	let E = t(S), D = a.only(x) ?? null, O = n(T), k = s(null), A = s(null), [j, M] = c(g), N = i.useCallback(() => {
-		A.current &&= (clearTimeout(A.current), null), k.current && O.current && !k.current.matches(":popover-open") && k.current.showPopover();
-	}, [k, O]), P = i.useCallback(() => {
-		A.current = setTimeout(() => {
-			k.current && O.current && k.current.matches(":popover-open") && k.current.hidePopover();
+], b = (e) => y.some((t) => e.matches(t)) || e.hasAttribute("role") && e.getAttribute("role") === "button", x = i.createContext({}), S = i.forwardRef(({ direction: m = "s", delay: h = "short", text: y, type: S = "description", children: C, id: w, className: T, ...E }, D) => {
+	let O = t(w), k = a.only(C) ?? null, A = n(D), j = s(null), M = s(null), N = s(null), [P, F] = c(m), I = i.useCallback(() => {
+		M.current &&= (clearTimeout(M.current), null);
+		let e = A.current?.getAttribute("aria-haspopup");
+		A.current?.getAttribute("aria-expanded") === "true" && e !== null && e !== "false" || (N.current &&= (clearTimeout(N.current), null), j.current && A.current && typeof j.current.showPopover == "function" && !j.current.matches(":popover-open") && j.current.showPopover());
+	}, [j, A]), L = i.useCallback(() => {
+		M.current && clearTimeout(M.current), M.current = setTimeout(() => {
+			M.current = null, I();
+		}, v[h]);
+	}, [h, I]), R = i.useCallback(() => {
+		M.current &&= (clearTimeout(M.current), null), N.current = setTimeout(() => {
+			j.current && A.current && typeof j.current.hidePopover == "function" && j.current.matches(":popover-open") && j.current.hidePopover();
 		}, 200);
-	}, [k, O]);
+	}, [j, A]);
 	return o(() => () => {
-		A.current && clearTimeout(A.current);
-	}, [A]), o(() => {
-		if (!k.current || !O.current) return;
-		let e = _(O.current), t = O.current.childNodes, n = Array.from(t).some((e) => e instanceof HTMLElement && _(e));
-		if (!(e || n) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead."), b === "label") {
-			let e = O.current.hasAttribute("aria-label"), t = Array.from(O.current.childNodes).some((e) => e instanceof HTMLElement && e.hasAttribute("aria-label"));
+		M.current && clearTimeout(M.current), N.current && clearTimeout(N.current);
+	}, [N]), o(() => {
+		if (!j.current || !A.current) return;
+		let e = b(A.current), t = A.current.childNodes, n = Array.from(t).some((e) => e instanceof HTMLElement && b(e));
+		if (!(e || n) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead."), S === "label") {
+			let e = A.current.hasAttribute("aria-label"), t = Array.from(A.current.childNodes).some((e) => e instanceof HTMLElement && e.hasAttribute("aria-label"));
 			(e || t) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.");
 		}
 		typeof window < "u" && (p() || f());
-		let r = k.current, i = O.current;
+		let r = j.current, i = A.current;
 		r.setAttribute("popover", "auto");
 		let a = {
-			side: m[g].side,
-			align: m[g].align,
+			side: g[m].side,
+			align: g[m].align,
 			anchorOffset: 8
 		}, o = () => {
 			let { top: e, left: t, anchorAlign: n, anchorSide: o } = d(r, i, a);
 			r.style.top = `${e}px`, r.style.left = `${t}px`;
-			let s = h[`${o}-${n}`];
-			M(s);
+			let s = r.getBoundingClientRect(), c = i.getBoundingClientRect(), l = o === "outside-top" || o === "outside-bottom", u = l ? c.left + c.width / 2 - s.left : c.top + c.height / 2 - s.top, f = l ? s.width : s.height, p = Math.max(0, Math.min(u, f));
+			r.style.setProperty("--p", `${p}px`);
+			let m = _[`${o}-${n}`];
+			F(m);
 		};
 		return r.addEventListener("toggle", o), () => {
 			r.removeEventListener("toggle", o);
 		};
 	}, [
-		k,
-		O,
-		g,
-		b
-	]), /* @__PURE__ */ u(v.Provider, {
-		value: { tooltipId: E },
-		children: [D && i.cloneElement(D, {
-			ref: O,
-			"aria-describedby": b === "description" ? E : D.props["aria-describedby"],
-			"aria-labelledby": b === "label" ? E : D.props["aria-labelledby"],
+		j,
+		A,
+		m,
+		S
+	]), /* @__PURE__ */ u(x.Provider, {
+		value: { tooltipId: O },
+		children: [k && i.cloneElement(k, {
+			ref: A,
+			"aria-describedby": S === "description" ? O : k.props["aria-describedby"],
+			"aria-labelledby": S === "label" ? O : k.props["aria-labelledby"],
 			onBlur: (e) => {
-				P(), D.props.onBlur?.(e);
+				R(), k.props.onBlur?.(e);
 			},
 			onFocus: (e) => {
-				N(), D.props.onFocus?.(e);
+				I(), k.props.onFocus?.(e);
 			},
 			onMouseEnter: (e) => {
-				N(), D.props.onMouseEnter?.(e);
+				L(), k.props.onMouseEnter?.(e);
 			},
 			onMouseLeave: (e) => {
-				P(), D.props.onMouseLeave?.(e);
+				R(), k.props.onMouseLeave?.(e);
 			}
 		}), /* @__PURE__ */ l("div", {
-			className: e(r.Tooltip, C),
-			ref: k,
-			"data-direction": j,
-			...w,
-			role: b === "description" ? "tooltip" : void 0,
-			"aria-hidden": b === "label" || void 0,
-			id: E,
-			onMouseEnter: N,
-			onMouseLeave: P,
+			className: e(r.Tooltip, T),
+			ref: j,
+			"data-direction": P,
+			...E,
+			role: S === "description" ? "tooltip" : void 0,
+			"aria-hidden": S === "label" || void 0,
+			id: O,
+			onMouseEnter: I,
+			onMouseLeave: R,
 			children: y
 		})]
 	});
 });
 //#endregion
-export { y as Tooltip, v as TooltipContext };
+export { S as Tooltip, x as TooltipContext, h as TooltipDelays, m as TooltipDirections };
 //# sourceMappingURL=Tooltip.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {Children, useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../hooks/useId'\nimport {getAnchoredPosition} from '@primer/behaviors'\nimport type {AnchorSide, AnchorAlignment} from '@primer/behaviors'\nimport {isSupported, apply} from '@oddbird/popover-polyfill/fn'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/** * Main Stylesheet (as a CSS Module) /\nimport styles from './Tooltip.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css'\nimport {BaseProps} from '../component-helpers'\n\ntype TooltipDirection = 'n' \| 'e' \| 's' \| 'w'\nexport type TooltipProps = {\n direction?: TooltipDirection\n text: string\n type?: 'label' \| 'description'\n children?: React.ReactNode\n} & BaseProps<HTMLDivElement>\n\nexport type TriggerPropsType = {\n 'aria-describedby'?: string\n 'aria-labelledby'?: string\n 'aria-label'?: string\n onBlur?: React.FocusEventHandler\n onFocus?: React.FocusEventHandler\n onMouseEnter?: React.MouseEventHandler\n onMouseLeave?: React.MouseEventHandler\n ref?: React.RefObject<HTMLElement \| null>\n}\n\n// map tooltip direction to anchoredPosition props\nconst directionToPosition: Record<TooltipDirection, {side: AnchorSide; align: AnchorAlignment}> = {\n n: {side: 'outside-top', align: 'center'},\n e: {side: 'outside-right', align: 'center'},\n s: {side: 'outside-bottom', align: 'center'},\n w: {side: 'outside-left', align: 'center'},\n}\n\n// map anchoredPosition props to tooltip direction\nconst positionToDirection: Record<string, TooltipDirection> = {\n 'outside-top-center': 'n',\n 'outside-right-center': 'e',\n 'outside-bottom-center': 's',\n 'outside-left-center': 'w',\n}\n\n// The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3\nconst interactiveElements = [\n 'a[href]',\n 'button:not(:disabled)',\n 'summary',\n 'select',\n 'input:not([type=hidden])',\n 'textarea',\n]\n\nconst isInteractive = (element: HTMLElement) => {\n return (\n interactiveElements.some(selector => element.matches(selector)) \|\|\n (element.hasAttribute('role') && element.getAttribute('role') === 'button')\n )\n}\nexport const TooltipContext = React.createContext<{tooltipId?: string}>({})\n\nexport const Tooltip = React.forwardRef(\n ({direction = 's', text, type = 'description', children, id, className, ...rest}: TooltipProps, forwardedRef) => {\n const tooltipId = useId(id)\n const child = (Children.only(children) as React.ReactElement<TriggerPropsType> \| null) ?? null\n const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement \| null> \| null)\n const tooltipElRef = useRef<HTMLDivElement>(null)\n // Used to delay the closing of the tooltip to make sure the user can move the mouse from the trigger to the tooltip\n const closeTooltipTimeoutRef = useRef<NodeJS.Timeout \| null>(null)\n const tooltipCloseTimeout = 200\n\n const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)\n\n const openTooltip = React.useCallback(() => {\n if (closeTooltipTimeoutRef.current) {\n clearTimeout(closeTooltipTimeoutRef.current)\n closeTooltipTimeoutRef.current = null\n }\n\n if (tooltipElRef.current && triggerRef.current && !tooltipElRef.current.matches(':popover-open')) {\n tooltipElRef.current.showPopover()\n }\n }, [tooltipElRef, triggerRef])\n\n const closeTooltip = React.useCallback(() => {\n closeTooltipTimeoutRef.current = setTimeout(() => {\n if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.matches(':popover-open')) {\n tooltipElRef.current.hidePopover()\n }\n }, tooltipCloseTimeout)\n }, [tooltipElRef, triggerRef])\n\n useEffect(() => {\n return () => {\n if (closeTooltipTimeoutRef.current) {\n clearTimeout(closeTooltipTimeoutRef.current)\n }\n }\n }, [closeTooltipTimeoutRef])\n\n useEffect(() => {\n if (!tooltipElRef.current \|\| !triggerRef.current) return\n /\n * ACCESSIBILITY CHECKS\n /\n // Has trigger element or any of its children interactive elements?\n const isTriggerInteractive = isInteractive(triggerRef.current)\n const triggerChildren = triggerRef.current.childNodes\n const hasInteractiveChild = Array.from(triggerChildren).some(triggerChild => {\n return triggerChild instanceof HTMLElement && isInteractive(triggerChild)\n })\n\n if (\n !(isTriggerInteractive \|\| hasInteractiveChild) &&\n (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n 'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',\n )\n }\n\n // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label\n if (type === 'label') {\n const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')\n const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(\n triggerChild => triggerChild instanceof HTMLElement && triggerChild.hasAttribute('aria-label'),\n )\n\n if (\n (hasAriaLabel \|\| hasAriaLabelInChildren) &&\n (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n 'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',\n )\n }\n }\n\n // SSR safe polyfill apply\n if (typeof window !== 'undefined') {\n if (!isSupported()) {\n apply()\n }\n }\n\n /\n * TOOLTIP POSITIONING\n */\n const tooltip = tooltipElRef.current\n const trigger = triggerRef.current\n tooltip.setAttribute('popover', 'auto')\n const settings = {\n side: directionToPosition[direction].side,\n align: directionToPosition[direction].align,\n anchorOffset: 8,\n }\n\n const positionSet = () => {\n const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)\n\n tooltip.style.top = `${top}px`\n tooltip.style.left = `${left}px`\n // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after\n const calculatedDirectionString = positionToDirection[`${anchorSide}-${anchorAlign}` as string]\n setCalculatedDirection(calculatedDirectionString)\n }\n\n tooltip.addEventListener('toggle', positionSet)\n\n return () => {\n tooltip.removeEventListener('toggle', positionSet)\n }\n }, [tooltipElRef, triggerRef, direction, type])\n\n return (\n <TooltipContext.Provider value={{tooltipId}}>\n {child &&\n React.cloneElement(child, {\n ref: triggerRef,\n // If it is a type description, we use tooltip to describe the trigger\n 'aria-describedby': type === 'description' ? tooltipId : child.props['aria-describedby'],\n // If it is a label type, we use tooltip to label the trigger\n 'aria-labelledby': type === 'label' ? tooltipId : child.props['aria-labelledby'],\n onBlur: (event: React.FocusEvent) => {\n closeTooltip()\n child.props.onBlur?.(event)\n },\n onFocus: (event: React.FocusEvent) => {\n openTooltip()\n child.props.onFocus?.(event)\n },\n onMouseEnter: (event: React.MouseEvent) => {\n openTooltip()\n child.props.onMouseEnter?.(event)\n },\n onMouseLeave: (event: React.MouseEvent) => {\n closeTooltip()\n child.props.onMouseLeave?.(event)\n },\n })}\n <div\n className={clsx(styles.Tooltip, className)}\n ref={tooltipElRef}\n data-direction={calculatedDirection}\n {...rest}\n // Only need tooltip role if the tooltip is a description for supplementary information\n role={type === 'description' ? 'tooltip' : undefined}\n // stop AT from announcing the tooltip twice when it is a label type because it will be announced with \"aria-labelledby\"\n aria-hidden={type === 'label' ? true : undefined}\n id={tooltipId}\n // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip\n onMouseEnter={openTooltip}\n onMouseLeave={closeTooltip}\n >\n {text}\n </div>\n </TooltipContext.Provider>\n )\n },\n)\n"],"mappings":"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"}
1	+ {"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {Children, useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../hooks/useId'\nimport {getAnchoredPosition} from '@primer/behaviors'\nimport type {AnchorSide, AnchorAlignment} from '@primer/behaviors'\nimport {isSupported, apply} from '@oddbird/popover-polyfill/fn'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/** * Main Stylesheet (as a CSS Module) /\nimport styles from './Tooltip.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css'\nimport {BaseProps} from '../component-helpers'\n\nexport const TooltipDirections = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'] as const\nexport const TooltipDelays = ['short', 'medium', 'long'] as const\nexport type TooltipDirection = (typeof TooltipDirections)[number]\nexport type TooltipDelay = (typeof TooltipDelays)[number]\nexport type TooltipProps = {\n direction?: TooltipDirection\n delay?: TooltipDelay\n text: string\n type?: 'label' \| 'description'\n children?: React.ReactNode\n} & BaseProps<HTMLDivElement>\n\nexport type TriggerPropsType = {\n 'aria-describedby'?: string\n 'aria-labelledby'?: string\n 'aria-label'?: string\n onBlur?: React.FocusEventHandler\n onFocus?: React.FocusEventHandler\n onMouseEnter?: React.MouseEventHandler\n onMouseLeave?: React.MouseEventHandler\n ref?: React.RefObject<HTMLElement \| null>\n}\n\n// map tooltip direction to anchoredPosition props\nconst directionToPosition: Record<TooltipDirection, {side: AnchorSide; align: AnchorAlignment}> = {\n nw: {side: 'outside-top', align: 'end'},\n n: {side: 'outside-top', align: 'center'},\n ne: {side: 'outside-top', align: 'start'},\n e: {side: 'outside-right', align: 'center'},\n se: {side: 'outside-bottom', align: 'start'},\n s: {side: 'outside-bottom', align: 'center'},\n sw: {side: 'outside-bottom', align: 'end'},\n w: {side: 'outside-left', align: 'center'},\n}\n\n// map anchoredPosition props to tooltip direction\nconst positionToDirection: Record<string, TooltipDirection> = {\n 'outside-top-end': 'nw',\n 'outside-top-center': 'n',\n 'outside-top-start': 'ne',\n 'outside-right-center': 'e',\n 'outside-bottom-start': 'se',\n 'outside-bottom-center': 's',\n 'outside-bottom-end': 'sw',\n 'outside-left-center': 'w',\n}\n\nconst tooltipDelayMap: Record<TooltipDelay, number> = {\n short: 50,\n medium: 400,\n long: 1200,\n}\n\n// The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3\nconst interactiveElements = [\n 'a[href]',\n 'button:not(:disabled)',\n 'summary',\n 'select',\n 'input:not([type=hidden])',\n 'textarea',\n]\n\nconst isInteractive = (element: HTMLElement) => {\n return (\n interactiveElements.some(selector => element.matches(selector)) \|\|\n (element.hasAttribute('role') && element.getAttribute('role') === 'button')\n )\n}\nexport const TooltipContext = React.createContext<{tooltipId?: string}>({})\n\nexport const Tooltip = React.forwardRef(\n (\n {direction = 's', delay = 'short', text, type = 'description', children, id, className, ...rest}: TooltipProps,\n forwardedRef,\n ) => {\n const tooltipId = useId(id)\n const child = (Children.only(children) as React.ReactElement<TriggerPropsType> \| null) ?? null\n const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement \| null> \| null)\n const tooltipElRef = useRef<HTMLDivElement>(null)\n const openTooltipTimeoutRef = useRef<NodeJS.Timeout \| null>(null)\n // Used to delay the closing of the tooltip to make sure the user can move the mouse from the trigger to the tooltip\n const closeTooltipTimeoutRef = useRef<NodeJS.Timeout \| null>(null)\n const tooltipCloseTimeout = 200\n\n const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)\n\n const openTooltip = React.useCallback(() => {\n if (openTooltipTimeoutRef.current) {\n clearTimeout(openTooltipTimeoutRef.current)\n openTooltipTimeoutRef.current = null\n }\n\n const ariaHasPopup = triggerRef.current?.getAttribute('aria-haspopup')\n const hasActivePopup =\n triggerRef.current?.getAttribute('aria-expanded') === 'true' &&\n ariaHasPopup !== null &&\n ariaHasPopup !== 'false'\n if (hasActivePopup) return\n\n if (closeTooltipTimeoutRef.current) {\n clearTimeout(closeTooltipTimeoutRef.current)\n closeTooltipTimeoutRef.current = null\n }\n\n if (\n tooltipElRef.current &&\n triggerRef.current &&\n typeof tooltipElRef.current.showPopover === 'function' &&\n !tooltipElRef.current.matches(':popover-open')\n ) {\n tooltipElRef.current.showPopover()\n }\n }, [tooltipElRef, triggerRef])\n\n const openTooltipWithDelay = React.useCallback(() => {\n if (openTooltipTimeoutRef.current) {\n clearTimeout(openTooltipTimeoutRef.current)\n }\n\n openTooltipTimeoutRef.current = setTimeout(() => {\n openTooltipTimeoutRef.current = null\n openTooltip()\n }, tooltipDelayMap[delay])\n }, [delay, openTooltip])\n\n const closeTooltip = React.useCallback(() => {\n if (openTooltipTimeoutRef.current) {\n clearTimeout(openTooltipTimeoutRef.current)\n openTooltipTimeoutRef.current = null\n }\n\n closeTooltipTimeoutRef.current = setTimeout(() => {\n if (\n tooltipElRef.current &&\n triggerRef.current &&\n typeof tooltipElRef.current.hidePopover === 'function' &&\n tooltipElRef.current.matches(':popover-open')\n ) {\n tooltipElRef.current.hidePopover()\n }\n }, tooltipCloseTimeout)\n }, [tooltipElRef, triggerRef])\n\n useEffect(() => {\n return () => {\n if (openTooltipTimeoutRef.current) {\n clearTimeout(openTooltipTimeoutRef.current)\n }\n if (closeTooltipTimeoutRef.current) {\n clearTimeout(closeTooltipTimeoutRef.current)\n }\n }\n }, [closeTooltipTimeoutRef])\n\n useEffect(() => {\n if (!tooltipElRef.current \|\| !triggerRef.current) return\n /\n * ACCESSIBILITY CHECKS\n /\n // Has trigger element or any of its children interactive elements?\n const isTriggerInteractive = isInteractive(triggerRef.current)\n const triggerChildren = triggerRef.current.childNodes\n const hasInteractiveChild = Array.from(triggerChildren).some(triggerChild => {\n return triggerChild instanceof HTMLElement && isInteractive(triggerChild)\n })\n\n if (\n !(isTriggerInteractive \|\| hasInteractiveChild) &&\n (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n 'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',\n )\n }\n\n // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label\n if (type === 'label') {\n const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')\n const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(\n triggerChild => triggerChild instanceof HTMLElement && triggerChild.hasAttribute('aria-label'),\n )\n\n if (\n (hasAriaLabel \|\| hasAriaLabelInChildren) &&\n (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n 'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',\n )\n }\n }\n\n // SSR safe polyfill apply\n if (typeof window !== 'undefined') {\n if (!isSupported()) {\n apply()\n }\n }\n\n /\n * TOOLTIP POSITIONING\n */\n const tooltip = tooltipElRef.current\n const trigger = triggerRef.current\n tooltip.setAttribute('popover', 'auto')\n const settings = {\n side: directionToPosition[direction].side,\n align: directionToPosition[direction].align,\n anchorOffset: 8,\n }\n\n const positionSet = () => {\n const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)\n\n tooltip.style.top = `${top}px`\n tooltip.style.left = `${left}px`\n\n const tooltipRect = tooltip.getBoundingClientRect()\n const triggerRect = trigger.getBoundingClientRect()\n const isVerticalPlacement = anchorSide === 'outside-top' \|\| anchorSide === 'outside-bottom'\n const caretPosition = isVerticalPlacement\n ? triggerRect.left + triggerRect.width / 2 - tooltipRect.left\n : triggerRect.top + triggerRect.height / 2 - tooltipRect.top\n const tooltipSize = isVerticalPlacement ? tooltipRect.width : tooltipRect.height\n const constrainedCaretPosition = Math.max(0, Math.min(caretPosition, tooltipSize))\n\n tooltip.style.setProperty('--p', `${constrainedCaretPosition}px`)\n\n // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after\n const calculatedDirectionString = positionToDirection[`${anchorSide}-${anchorAlign}` as string]\n setCalculatedDirection(calculatedDirectionString)\n }\n\n tooltip.addEventListener('toggle', positionSet)\n\n return () => {\n tooltip.removeEventListener('toggle', positionSet)\n }\n }, [tooltipElRef, triggerRef, direction, type])\n\n return (\n <TooltipContext.Provider value={{tooltipId}}>\n {child &&\n React.cloneElement(child, {\n ref: triggerRef,\n // If it is a type description, we use tooltip to describe the trigger\n 'aria-describedby': type === 'description' ? tooltipId : child.props['aria-describedby'],\n // If it is a label type, we use tooltip to label the trigger\n 'aria-labelledby': type === 'label' ? tooltipId : child.props['aria-labelledby'],\n onBlur: (event: React.FocusEvent) => {\n closeTooltip()\n child.props.onBlur?.(event)\n },\n onFocus: (event: React.FocusEvent) => {\n openTooltip()\n child.props.onFocus?.(event)\n },\n onMouseEnter: (event: React.MouseEvent) => {\n openTooltipWithDelay()\n child.props.onMouseEnter?.(event)\n },\n onMouseLeave: (event: React.MouseEvent) => {\n closeTooltip()\n child.props.onMouseLeave?.(event)\n },\n })}\n <div\n className={clsx(styles.Tooltip, className)}\n ref={tooltipElRef}\n data-direction={calculatedDirection}\n {...rest}\n // Only need tooltip role if the tooltip is a description for supplementary information\n role={type === 'description' ? 'tooltip' : undefined}\n // stop AT from announcing the tooltip twice when it is a label type because it will be announced with \"aria-labelledby\"\n aria-hidden={type === 'label' ? true : undefined}\n id={tooltipId}\n // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip\n onMouseEnter={openTooltip}\n onMouseLeave={closeTooltip}\n >\n {text}\n </div>\n </TooltipContext.Provider>\n )\n },\n)\n"],"mappings":"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"}

package/esm/Tooltip/Tooltip.module-CSt4tNaI.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Tooltip-module__Tooltip___0Eipx{display:none}@media (forced-colors:active){.Primer_Brand__Tooltip-module__Tooltip___0Eipx{outline:var(--brand-borderWidth-thin) solid transparent}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover]{--offset:var(--base-size-8,--base-size-8);--b:1em;--h:.5em;--p:50%;--r:var(--brand-borderRadius-medium);--c:var(--brand-color-neutral-emphasisPlus);clip:auto;white-space:normal;width:max-content;font:normal normal var(--brand-text-size-100) / var(--brand-text-lineHeight-100) var(--brand-fontStack-sansSerif);-webkit-font-smoothing:subpixel-antialiased;color:var(--brand-Tooltip-color-default);text-align:center;word-wrap:break-word;background:var(--c);border-radius:var(--r);opacity:0;border:0;max-width:250px;margin:auto;padding:.5em .75em;position:absolute;inset:auto;overflow:visible}:is(.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover]:popover-open,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[popover].Primer_Brand__Tooltip-module__\:popover-open___GpZlX){animation-name:Primer_Brand__Tooltip-module__tooltip-appear___hAyFD;animation-duration:.2s;animation-duration:var(--brand-animation-duration-faster,.2s);animation-timing-function:ease-in;animation-delay:0s;animation-fill-mode:forwards;display:block}.Primer_Brand__Tooltip-module__Tooltip___0Eipx:after{height:var(--offset);content:"";display:block;position:absolute;left:0;right:0}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=ne],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=nw]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;clip-path:polygon(0 100%, 0 0, 100% 0, 100% 100%, min(100%, var(--p) + var(--b) / 2) 100%, var(--p) calc(100% + var(--h)), max(0%, var(--p) - var(--b) / 2) 100%)}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=ne],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=nw]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;border-image:conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=se],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=sw]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0, min(100%, var(--p) + var(--b) / 2) 0, var(--p) calc(-1 * var(--h)), max(0%, var(--p) - var(--b) / 2) 0)}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=se],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=sw]{-o-border-image:conic-gradient(var(--c) 0 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;border-image:conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;clip-path:polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% max(0%, var(--p) - var(--b) / 2), calc(100% + var(--h)) var(--p), 100% min(100%, var(--p) + var(--b) / 2))}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;border-image:conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]{-o-border-image:conic-gradient(var(--c) 0, var(--c) 0) 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);border-image:conic-gradient(var(--c) 0, var(--c) 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);clip-path:polygon(0 100%, 100% 100%, 100% 0, 0 0, 0 max(0%, var(--p) - var(--b) / 2), calc(-1 * var(--h)) var(--p), 0 min(100%, var(--p) + var(--b) / 2))}@supports (background:conic-gradient(red 0deg, red 0deg 1deg, red 2deg)){.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]{-o-border-image:conic-gradient(var(--c) 0 0) 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);border-image:conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r) calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h)}}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=ne],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=se]{--p:25%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=nw],.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=sw]{--p:75%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=n]:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=ne]:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=nw]:after{top:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=s]:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=se]:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=sw]:after{bottom:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=w]:after{height:100%;width:var(--offset);content:"";display:block;position:absolute;bottom:0;left:100%}.Primer_Brand__Tooltip-module__Tooltip___0Eipx[data-direction=e]:after{height:100%;width:var(--offset);content:"";margin-left:calc(var(--offset) * -1px);display:block;position:absolute;bottom:0;right:100%}@keyframes Primer_Brand__Tooltip-module__tooltip-appear___hAyFD{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tooltip-module__Tooltip___0Eipx,.Primer_Brand__Tooltip-module__Tooltip___0Eipx:before,.Primer_Brand__Tooltip-module__Tooltip___0Eipx:after,.Primer_Brand__Tooltip-module__Tooltip___0Eipx *{animation-duration:0s!important}}

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

@@ -1,4 +1,4 @@
-import './Tooltip.module-5Km7qGR5.css';//#region src/Tooltip/Tooltip.module.css
+import './Tooltip.module-CSt4tNaI.css';//#region src/Tooltip/Tooltip.module.css
 var e = "Primer_Brand__Tooltip-module__Tooltip___0Eipx", t = {
 	Tooltip: e,
 	":popover-open": "Primer_Brand__Tooltip-module__:popover-open___GpZlX",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../src/Tooltip/Tooltip.module.css"],"sourcesContent":[".Tooltip {\n display: none;\n}\n\n@media (forced-colors: active) {\n .Tooltip {\n outline: var(--brand-borderWidth-thin) solid transparent;\n }\n}\n\n/* Overriding the default popover styles /\n.Tooltip[popover] {\n --offset: var(\n --base-size-8,\n --base-size-8\n ); / This is a \"magic number\". Just gives some room to make sure the tooltip stay open when mouse leaves the trigger to hover tooltip /\n / these vars are for the triangle, via https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/ /\n --b: 1em; / triangle base width /\n --h: 0.5em; / triangle height /\n --p: 50%; / center triangle position (0%:left 100%:right) /\n --r: var(--brand-borderRadius-medium); / border radius /\n --c: var(--brand-color-neutral-emphasisPlus); / bg color /\n\n position: absolute;\n padding: 0.5em 0.75em;\n width: max-content;\n margin: auto;\n clip: auto;\n white-space: normal;\n font: normal normal var(--brand-text-size-100) / var(--brand-text-lineHeight-100) var(--brand-fontStack-sansSerif);\n -webkit-font-smoothing: subpixel-antialiased;\n color: var(--brand-Tooltip-color-default);\n text-align: center;\n word-wrap: break-word;\n background: var(--c);\n border-radius: var(--r);\n border: 0;\n opacity: 0;\n max-width: 250px;\n inset: auto;\n / for scrollbar /\n overflow: visible;\n}\n\n.Tooltip[popover]:popover-open, / selector in chrome is :popover-open /\n.Tooltip[popover].\\:popover-open {\n / selector in firefox and safari is \\:popover-open /\n display: block;\n animation-name: tooltip-appear;\n animation-duration: var(--brand-animation-duration-faster, 0.2s);\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n}\n\n/ This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip /\n.Tooltip::after {\n position: absolute;\n display: block;\n right: 0;\n left: 0;\n height: var(--offset);\n content: '';\n}\n\n/ Directional styles /\n.Tooltip[data-direction='n'] {\n border-image: conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0\n calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;\n clip-path: polygon(\n 0 100%,\n 0 0,\n 100% 0,\n 100% 100%,\n min(100%, var(--p) + var(--b) / 2) 100%,\n var(--p) calc(100% + var(--h)),\n max(0%, var(--p) - var(--b) / 2) 100%\n );\n}\n\n.Tooltip[data-direction='s'] {\n border-image: conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(\n var(--p) - var(--b) / 2\n ) / var(--h) 0 0 0;\n clip-path: polygon(\n 0 0,\n 0 100%,\n 100% 100%,\n 100% 0,\n min(100%, var(--p) + var(--b) / 2) 0,\n var(--p) calc(-1 var(--h)),\n max(0%, var(--p) - var(--b) / 2) 0\n );\n}\n\n.Tooltip[data-direction='w'] {\n border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) 0\n calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;\n clip-path: polygon(\n 100% 100%,\n 0 100%,\n 0 0,\n 100% 0,\n 100% max(0%, var(--p) - var(--b) / 2),\n calc(100% + var(--h)) var(--p),\n 100% min(100%, var(--p) + var(--b) / 2)\n );\n}\n\n.Tooltip[data-direction='e'] {\n border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r)\n calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);\n clip-path: polygon(\n 0 100%,\n 100% 100%,\n 100% 0,\n 0 0,\n 0 max(0%, var(--p) - var(--b) / 2),\n calc(-1 * var(--h)) var(--p),\n 0 min(100%, var(--p) + var(--b) / 2)\n );\n}\n\n.Tooltip[data-direction='n']::after {\n top: 100%;\n}\n\n.Tooltip[data-direction='s']::after {\n bottom: 100%;\n}\n\n.Tooltip[data-direction='w']::after {\n position: absolute;\n display: block;\n height: 100%;\n width: var(--offset);\n content: '';\n bottom: 0;\n left: 100%;\n}\n\n.Tooltip[data-direction='e']::after {\n position: absolute;\n display: block;\n height: 100%;\n width: var(--offset);\n content: '';\n bottom: 0;\n right: 100%;\n margin-left: calc(var(--offset) * -1px);\n}\n\n@keyframes tooltip-appear {\n from {\n opacity: 0;\n }\n to {\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 .Tooltip,\n .Tooltip::before,\n .Tooltip::after,\n .Tooltip {\n animation-duration: 0s !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../src/Tooltip/Tooltip.module.css"],"sourcesContent":[".Tooltip {\n display: none;\n}\n\n@media (forced-colors: active) {\n .Tooltip {\n outline: var(--brand-borderWidth-thin) solid transparent;\n }\n}\n\n/* Overriding the default popover styles /\n.Tooltip[popover] {\n --offset: var(\n --base-size-8,\n --base-size-8\n ); / This is a \"magic number\". Just gives some room to make sure the tooltip stay open when mouse leaves the trigger to hover tooltip /\n / these vars are for the triangle, via https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/ /\n --b: 1em; / triangle base width /\n --h: 0.5em; / triangle height /\n --p: 50%; / center triangle position (0%:left 100%:right) /\n --r: var(--brand-borderRadius-medium); / border radius /\n --c: var(--brand-color-neutral-emphasisPlus); / bg color /\n\n position: absolute;\n padding: 0.5em 0.75em;\n width: max-content;\n margin: auto;\n clip: auto;\n white-space: normal;\n font: normal normal var(--brand-text-size-100) / var(--brand-text-lineHeight-100) var(--brand-fontStack-sansSerif);\n -webkit-font-smoothing: subpixel-antialiased;\n color: var(--brand-Tooltip-color-default);\n text-align: center;\n word-wrap: break-word;\n background: var(--c);\n border-radius: var(--r);\n border: 0;\n opacity: 0;\n max-width: 250px;\n inset: auto;\n / for scrollbar /\n overflow: visible;\n}\n\n.Tooltip[popover]:popover-open, / selector in chrome is :popover-open /\n.Tooltip[popover].\\:popover-open {\n / selector in firefox and safari is \\:popover-open /\n display: block;\n animation-name: tooltip-appear;\n animation-duration: var(--brand-animation-duration-faster, 0.2s);\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n}\n\n/ This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip /\n.Tooltip::after {\n position: absolute;\n display: block;\n right: 0;\n left: 0;\n height: var(--offset);\n content: '';\n}\n\n/ Directional styles /\n.Tooltip[data-direction='n'],\n.Tooltip[data-direction='ne'],\n.Tooltip[data-direction='nw'] {\n border-image: conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0\n calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;\n clip-path: polygon(\n 0 100%,\n 0 0,\n 100% 0,\n 100% 100%,\n min(100%, var(--p) + var(--b) / 2) 100%,\n var(--p) calc(100% + var(--h)),\n max(0%, var(--p) - var(--b) / 2) 100%\n );\n}\n\n.Tooltip[data-direction='s'],\n.Tooltip[data-direction='se'],\n.Tooltip[data-direction='sw'] {\n border-image: conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(\n var(--p) - var(--b) / 2\n ) / var(--h) 0 0 0;\n clip-path: polygon(\n 0 0,\n 0 100%,\n 100% 100%,\n 100% 0,\n min(100%, var(--p) + var(--b) / 2) 0,\n var(--p) calc(-1 var(--h)),\n max(0%, var(--p) - var(--b) / 2) 0\n );\n}\n\n.Tooltip[data-direction='w'] {\n border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) 0\n calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;\n clip-path: polygon(\n 100% 100%,\n 0 100%,\n 0 0,\n 100% 0,\n 100% max(0%, var(--p) - var(--b) / 2),\n calc(100% + var(--h)) var(--p),\n 100% min(100%, var(--p) + var(--b) / 2)\n );\n}\n\n.Tooltip[data-direction='e'] {\n border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r)\n calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);\n clip-path: polygon(\n 0 100%,\n 100% 100%,\n 100% 0,\n 0 0,\n 0 max(0%, var(--p) - var(--b) / 2),\n calc(-1 * var(--h)) var(--p),\n 0 min(100%, var(--p) + var(--b) / 2)\n );\n}\n\n.Tooltip[data-direction='ne'],\n.Tooltip[data-direction='se'] {\n --p: 25%;\n}\n\n.Tooltip[data-direction='nw'],\n.Tooltip[data-direction='sw'] {\n --p: 75%;\n}\n\n.Tooltip[data-direction='n']::after,\n.Tooltip[data-direction='ne']::after,\n.Tooltip[data-direction='nw']::after {\n top: 100%;\n}\n\n.Tooltip[data-direction='s']::after,\n.Tooltip[data-direction='se']::after,\n.Tooltip[data-direction='sw']::after {\n bottom: 100%;\n}\n\n.Tooltip[data-direction='w']::after {\n position: absolute;\n display: block;\n height: 100%;\n width: var(--offset);\n content: '';\n bottom: 0;\n left: 100%;\n}\n\n.Tooltip[data-direction='e']::after {\n position: absolute;\n display: block;\n height: 100%;\n width: var(--offset);\n content: '';\n bottom: 0;\n right: 100%;\n margin-left: calc(var(--offset) * -1px);\n}\n\n@keyframes tooltip-appear {\n from {\n opacity: 0;\n }\n to {\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 .Tooltip,\n .Tooltip::before,\n .Tooltip::after,\n .Tooltip {\n animation-duration: 0s !important;\n }\n}\n"],"mappings":""}