npm - @primer/react-brand - Versions diffs - 0.74.0 → 0.75.0-rc.96de7cef - Mend

@primer/react-brand 0.74.0 → 0.75.0-rc.96de7cef

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

Files changed (456) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SubdomainNavBar.module.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.module.css"],"sourcesContent":["/\n Main styles for the subdomain navigation bar.\n /\n.SubdomainNavBar {\n position: relative;\n z-index: 90;\n font-weight: 550;\n background: var(--brand-SubdomainNavBar-canvas-default);\n -webkit-backdrop-filter: blur(16px);\n backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n height: 75px;\n}\n\n/\n * Outer container\n /\n.SubdomainNavBar-outer-container {\n z-index: 90;\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 color: var(--brand-color-text-default);\n position: relative;\n}\n\n.SubdomainNavBar-back-arrow {\n position: absolute;\n left: calc(-32px + 5px);\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;\n transform: translateX(5px);\n color: var(--brand-color-text-muted);\n}\n\n.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {\n opacity: 1;\n transform: translateX(0);\n}\n\n.SubdomainNavBar-title-separator {\n color: var(--brand-color-text-muted);\n font-weight: var(--base-text-weight-normal);\n font-size: var(--base-size-32);\n line-height: 29px;\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 / Optical alignment with logo /\n position: relative;\n top: 1px;\n}\n\n.SubdomainNavBar-title:hover {\n text-decoration: none;\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 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-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n overflow-y: auto;\n position: absolute;\n top: 75px;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n background-color: var(--brand-color-canvas-default);\n width: 100vw;\n height: calc(100vh - 75px);\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\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-list {\n display: flex;\n align-items: center;\n width: 100%;\n max-width: 150px;\n padding: 0;\n margin: 0 24px 0 0;\n / overflow: hidden; /\n }\n}\n\n@media screen and (min-width: 768px) {\n .SubdomainNavBar-primary-nav-list {\n max-width: 100px;\n }\n}\n\n@media screen and (min-width: 850px) {\n .SubdomainNavBar-primary-nav-list {\n max-width: 200px;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .SubdomainNavBar-primary-nav-list {\n max-width: 300px;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .SubdomainNavBar-primary-nav-list {\n max-width: 520px;\n margin-right: 80px;\n }\n\n .SubdomainNavBar-outer-container--has-actions .SubdomainNavBar-primary-nav-list {\n max-width: 465px;\n }\n}\n\n.SubdomainNavBar-primary-nav-list-item {\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--visible {\n order: 0;\n visibility: visible;\n opacity: 1;\n }\n\n .SubdomainNavBar-primary-nav-list-item--invisible {\n order: 100;\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-list-item--overflow {\n order: 99;\n position: relative;\n right: 0;\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@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 right: 0;\n top: var(--base-size-48);\n background-color: var(--base-color-scale-white-0);\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 margin-left: auto;\n min-width: 0;\n}\n.SubdomainNavBar-search-trigger {\n display: flex;\n align-items: center;\n}\n\n.SubdomainNavBar-search-button,\n.SubdomainNavBar-menu-button {\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}\n\n.SubdomainNavBar-search-button svg,\n.SubdomainNavBar-menu-button svg {\n width: 24px;\n height: 24px;\n}\n\n.SubdomainNavBar-menu-button {\n display: inline-block;\n align-self: center;\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@media screen and (min-width: 48rem) {\n .SubdomainNavBar-search-button:hover,\n .SubdomainNavBar-menu-button:hover {\n border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-search-button:active,\n .SubdomainNavBar-menu-button:active {\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 .SubdomainNavBar-search-dialog-control-area .SubdomainNavBar-search-button,\n .SubdomainNavBar-search-dialog-control-area .SubdomainNavBar-menu-button {\n display: inline-flex;\n width: 48px;\n }\n\n .SubdomainNavBar-search-button {\n margin: 0 var(--base-size-16) 0 auto;\n }\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 flex-direction: column;\n margin: 24px;\n min-width: 0;\n }\n}\n\n.SubdomainNavBar-cta-button {\n white-space: nowrap;\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-dialog {\n position: absolute;\n z-index: 99;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-search-dialog {\n top: 0;\n left: 0;\n right: 0;\n background: var(--brand-SubdomainNavBar-canvas-search);\n -webkit-backdrop-filter: blur(100px);\n backdrop-filter: blur(100px);\n height: 100vh;\n width: 100vw;\n animation: fade-in-down var(--brand-animation-duration-fast);\n animation-timing-function: var(--brand-animation-easing-default);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-search-dialog {\n position: absolute;\n top: 0;\n bottom: 1px;\n left: 0;\n right: 0;\n background-color: var(--brand-SubdomainNavBar-canvas-search);\n }\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-trigger .SubdomainNavBar-search-button {\n margin-right: 0;\n}\n\n.SubdomainNavBar-search-dialog-control-area {\n height: 74px;\n background: var(--brand-SubdomainNavBar-canvas-default);\n -webkit-backdrop-filter: blur(16px);\n backdrop-filter: blur(16px);\n padding: var(--base-size-12) var(--base-size-28);\n display: flex;\n align-items: center;\n animation: fade-in-down 500ms;\n gap: var(--base-size-4);\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-search-dialog-control-area {\n max-width: 570px;\n margin: 0 auto;\n }\n}\n\n.SubdomainNavBar-search-text-input {\n border-color: transparent;\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-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[aria-selected='true'] a {\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: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-skip-to-content {\n position: absolute;\n top: 75px;\n border-radius: 0px;\n width: 100%;\n z-index: 100;\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-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 --SubdomainNavBar-height: var(--base-size-64);\n\n position: relative;\n z-index: 90;\n font-weight: 550;\n background: var(--brand-color-canvas-default);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n height: var(--SubdomainNavBar-height);\n}\n\n.SubdomainNavBar::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-start: calc(100% + var(--brand-borderWidth-thin));\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 inset-inline-start: calc(-1 var(--base-size-24) + var(--base-size-4));\n color: var(--brand-color-text-muted);\n opacity: 0;\n transform: translateX(var(--base-size-4));\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: translateX(0);\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-title-prefix {\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-title-label {\n color: var(--brand-color-text-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(--base-color-scale-white-0);\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-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-height: calc(var(--base-size-64) - var(--base-size-8));\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\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":""}

package/esm/SubdomainNavBar/SubdomainNavBarLinkContext.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import React from 'react';
+type SubdomainNavBarLinkContextValue = {
+    isOverflowed?: boolean;
+    onLinkClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+export declare const SubdomainNavBarLinkContext: React.Context<SubdomainNavBarLinkContextValue>;
+export declare function useSubdomainNavBarLinkContext(): SubdomainNavBarLinkContextValue;
+export {};
+//# sourceMappingURL=SubdomainNavBarLinkContext.d.ts.map

package/esm/SubdomainNavBar/SubdomainNavBarLinkContext.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SubdomainNavBarLinkContext.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/SubdomainNavBarLinkContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,KAAK,+BAA+B,GAAG;IACrC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACzD,CAAA;AAED,eAAO,MAAM,0BAA0B,gDAA2D,CAAA;AAElG,wBAAgB,6BAA6B,oCAE5C"}

package/esm/SubdomainNavBar/SubdomainNavBarLinkContext.js ADDED Viewed

@@ -0,0 +1,10 @@
+import e, { useContext as t } from "react";
+//#region src/SubdomainNavBar/SubdomainNavBarLinkContext.ts
+var n = e.createContext({});
+function r() {
+	return t(n);
+}
+//#endregion
+export { n as SubdomainNavBarLinkContext, r as useSubdomainNavBarLinkContext };
+//# sourceMappingURL=SubdomainNavBarLinkContext.js.map

package/esm/SubdomainNavBar/SubdomainNavBarLinkContext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SubdomainNavBarLinkContext.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBarLinkContext.ts"],"sourcesContent":["import React, {useContext} from 'react'\n\ntype SubdomainNavBarLinkContextValue = {\n isOverflowed?: boolean\n onLinkClick?: React.MouseEventHandler<HTMLAnchorElement>\n}\n\nexport const SubdomainNavBarLinkContext = React.createContext<SubdomainNavBarLinkContextValue>({})\n\nexport function useSubdomainNavBarLinkContext() {\n return useContext(SubdomainNavBarLinkContext)\n}\n"],"mappings":";;AAOA,IAAa,IAA6B,EAAM,cAA+C,EAAE,CAAC;AAElG,SAAgB,IAAgC;AAC9C,QAAO,EAAW,EAA2B"}

package/esm/SubdomainNavBar/useSearchKeyboardShortcut.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+type UseSearchKeyboardShortcutOptions = {
+    disabled: boolean;
+    keyboardShortcut?: string | false;
+    onTrigger: () => void;
+};
+export declare function useSearchKeyboardShortcut({ disabled, keyboardShortcut, onTrigger, }: UseSearchKeyboardShortcutOptions): void;
+export {};
+//# sourceMappingURL=useSearchKeyboardShortcut.d.ts.map

package/esm/SubdomainNavBar/useSearchKeyboardShortcut.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useSearchKeyboardShortcut.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/useSearchKeyboardShortcut.ts"],"names":[],"mappings":"AAUA,KAAK,gCAAgC,GAAG;IACtC,QAAQ,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IACjC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAqED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,gBAAwB,EACxB,SAAS,GACV,EAAE,gCAAgC,QAsBlC"}

package/esm/SubdomainNavBar/useSearchKeyboardShortcut.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { useEffect as e, useMemo as t } from "react";
+//#region src/SubdomainNavBar/useSearchKeyboardShortcut.ts
+var n = new Set([
+	"alt",
+	"option",
+	"ctrl",
+	"control",
+	"meta",
+	"cmd",
+	"command",
+	"shift"
+]);
+function r(e) {
+	if (!(e instanceof Element)) return !1;
+	let t = e.closest("input, textarea, select, [role=\"textbox\"], [role=\"combobox\"], [role=\"searchbox\"], [contenteditable]");
+	return t ? t instanceof HTMLElement && t.isContentEditable ? !0 : t.matches("input, textarea, select, [role=\"textbox\"], [role=\"combobox\"], [role=\"searchbox\"]") : !1;
+}
+function i(e) {
+	if (!e) return !1;
+	let t = e.split("+").map((e) => e.trim()).filter(Boolean), r = t.pop();
+	if (!r) return !1;
+	let i = t.map((e) => e.toLowerCase());
+	return i.every((e) => n.has(e)) ? {
+		key: r,
+		altKey: i.includes("alt") || i.includes("option"),
+		ctrlKey: i.includes("ctrl") || i.includes("control"),
+		metaKey: i.includes("meta") || i.includes("cmd") || i.includes("command"),
+		shiftKey: i.includes("shift")
+	} : !1;
+}
+function a(e, t) {
+	let n = t.key.toLowerCase(), r = e.key.toLowerCase(), i = e.code.toLowerCase();
+	return e.altKey !== t.altKey || e.ctrlKey !== t.ctrlKey || e.metaKey !== t.metaKey ? !1 : /^[^a-z0-9]$/.test(n) && r === n ? t.shiftKey ? e.shiftKey : !0 : e.shiftKey === t.shiftKey ? /^[a-z]$/.test(n) ? r === n || i === `key${n}` : /^[0-9]$/.test(n) ? r === n || i === `digit${n}` : r === n : !1;
+}
+function o({ disabled: n, keyboardShortcut: o = !1, onTrigger: s }) {
+	let c = t(() => i(o), [o]);
+	e(() => {
+		if (!c) return;
+		let e = (e) => {
+			n || e.defaultPrevented || e.isComposing || !a(e, c) || r(e.target) || r(document.activeElement) || (e.preventDefault(), s());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		n,
+		s,
+		c
+	]);
+}
+//#endregion
+export { o as useSearchKeyboardShortcut };
+//# sourceMappingURL=useSearchKeyboardShortcut.js.map

package/esm/SubdomainNavBar/useSearchKeyboardShortcut.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSearchKeyboardShortcut.js","names":[],"sources":["../../src/SubdomainNavBar/useSearchKeyboardShortcut.ts"],"sourcesContent":["import {useEffect, useMemo} from 'react'\n\ntype SearchKeyboardShortcut = {\n key: string\n altKey: boolean\n ctrlKey: boolean\n metaKey: boolean\n shiftKey: boolean\n}\n\ntype UseSearchKeyboardShortcutOptions = {\n disabled: boolean\n keyboardShortcut?: string | false\n onTrigger: () => void\n}\n\nconst searchKeyboardShortcutModifiers = new Set(['alt', 'option', 'ctrl', 'control', 'meta', 'cmd', 'command', 'shift'])\n\nfunction isEditableKeyboardTarget(target: EventTarget | Element | null): boolean {\n if (!(target instanceof Element)) return false\n\n const editableElement = target.closest(\n 'input, textarea, select, [role=\"textbox\"], [role=\"combobox\"], [role=\"searchbox\"], [contenteditable]',\n )\n\n if (!editableElement) return false\n\n if (editableElement instanceof HTMLElement && editableElement.isContentEditable) return true\n\n return editableElement.matches('input, textarea, select, [role=\"textbox\"], [role=\"combobox\"], [role=\"searchbox\"]')\n}\n\nfunction parseSearchKeyboardShortcut(keyboardShortcut: string | false): SearchKeyboardShortcut | false {\n if (!keyboardShortcut) return false\n\n const shortcutParts = keyboardShortcut\n .split('+')\n .map(part => part.trim())\n .filter(Boolean)\n const key = shortcutParts.pop()\n if (!key) return false\n\n const modifiers = shortcutParts.map(part => part.toLowerCase())\n\n if (!modifiers.every(modifier => searchKeyboardShortcutModifiers.has(modifier))) return false\n\n return {\n key,\n altKey: modifiers.includes('alt') || modifiers.includes('option'),\n ctrlKey: modifiers.includes('ctrl') || modifiers.includes('control'),\n metaKey: modifiers.includes('meta') || modifiers.includes('cmd') || modifiers.includes('command'),\n shiftKey: modifiers.includes('shift'),\n }\n}\n\nfunction keyboardEventMatchesShortcut(event: KeyboardEvent, shortcut: SearchKeyboardShortcut): boolean {\n const shortcutKey = shortcut.key.toLowerCase()\n const eventKey = event.key.toLowerCase()\n const eventCode = event.code.toLowerCase()\n\n if (event.altKey !== shortcut.altKey || event.ctrlKey !== shortcut.ctrlKey || event.metaKey !== shortcut.metaKey) {\n return false\n }\n\n if (/^[^a-z0-9]$/.test(shortcutKey) && eventKey === shortcutKey) {\n return shortcut.shiftKey ? event.shiftKey : true\n }\n\n if (event.shiftKey !== shortcut.shiftKey) {\n return false\n }\n\n if (/^[a-z]$/.test(shortcutKey)) {\n return eventKey === shortcutKey || eventCode === `key${shortcutKey}`\n }\n\n if (/^[0-9]$/.test(shortcutKey)) {\n return eventKey === shortcutKey || eventCode === `digit${shortcutKey}`\n }\n\n return eventKey === shortcutKey\n}\n\nexport function useSearchKeyboardShortcut({\n disabled,\n keyboardShortcut = false,\n onTrigger,\n}: UseSearchKeyboardShortcutOptions) {\n const shortcut = useMemo(() => parseSearchKeyboardShortcut(keyboardShortcut), [keyboardShortcut])\n\n useEffect(() => {\n if (!shortcut) return\n\n const handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (disabled || event.defaultPrevented || event.isComposing || !keyboardEventMatchesShortcut(event, shortcut)) {\n return\n }\n\n if (isEditableKeyboardTarget(event.target) || isEditableKeyboardTarget(document.activeElement)) {\n return\n }\n\n event.preventDefault()\n onTrigger()\n }\n\n document.addEventListener('keydown', handleDocumentKeyDown)\n return () => document.removeEventListener('keydown', handleDocumentKeyDown)\n }, [disabled, onTrigger, shortcut])\n}\n"],"mappings":";;AAgBA,IAAM,IAAkC,IAAI,IAAI;CAAC;CAAO;CAAU;CAAQ;CAAW;CAAQ;CAAO;CAAW;CAAQ,CAAC;AAExH,SAAS,EAAyB,GAA+C;AAC/E,KAAI,EAAE,aAAkB,SAAU,QAAO;CAEzC,IAAM,IAAkB,EAAO,QAC7B,4GACD;AAMD,QAJK,IAED,aAA2B,eAAe,EAAgB,oBAA0B,KAEjF,EAAgB,QAAQ,yFAAmF,GAJrF;;AAO/B,SAAS,EAA4B,GAAkE;AACrG,KAAI,CAAC,EAAkB,QAAO;CAE9B,IAAM,IAAgB,EACnB,MAAM,IAAI,CACV,KAAI,MAAQ,EAAK,MAAM,CAAC,CACxB,OAAO,QAAQ,EACZ,IAAM,EAAc,KAAK;AAC/B,KAAI,CAAC,EAAK,QAAO;CAEjB,IAAM,IAAY,EAAc,KAAI,MAAQ,EAAK,aAAa,CAAC;AAI/D,QAFK,EAAU,OAAM,MAAY,EAAgC,IAAI,EAAS,CAAC,GAExE;EACL;EACA,QAAQ,EAAU,SAAS,MAAM,IAAI,EAAU,SAAS,SAAS;EACjE,SAAS,EAAU,SAAS,OAAO,IAAI,EAAU,SAAS,UAAU;EACpE,SAAS,EAAU,SAAS,OAAO,IAAI,EAAU,SAAS,MAAM,IAAI,EAAU,SAAS,UAAU;EACjG,UAAU,EAAU,SAAS,QAAQ;EACtC,GARuF;;AAW1F,SAAS,EAA6B,GAAsB,GAA2C;CACrG,IAAM,IAAc,EAAS,IAAI,aAAa,EACxC,IAAW,EAAM,IAAI,aAAa,EAClC,IAAY,EAAM,KAAK,aAAa;AAsB1C,QApBI,EAAM,WAAW,EAAS,UAAU,EAAM,YAAY,EAAS,WAAW,EAAM,YAAY,EAAS,UAChG,KAGL,cAAc,KAAK,EAAY,IAAI,MAAa,IAC3C,EAAS,WAAW,EAAM,WAAW,KAG1C,EAAM,aAAa,EAAS,WAI5B,UAAU,KAAK,EAAY,GACtB,MAAa,KAAe,MAAc,MAAM,MAGrD,UAAU,KAAK,EAAY,GACtB,MAAa,KAAe,MAAc,QAAQ,MAGpD,MAAa,IAXX;;AAcX,SAAgB,EAA0B,EACxC,aACA,sBAAmB,IACnB,gBACmC;CACnC,IAAM,IAAW,QAAc,EAA4B,EAAiB,EAAE,CAAC,EAAiB,CAAC;AAEjG,SAAgB;AACd,MAAI,CAAC,EAAU;EAEf,IAAM,KAAyB,MAAyB;AAClD,QAAY,EAAM,oBAAoB,EAAM,eAAe,CAAC,EAA6B,GAAO,EAAS,IAIzG,EAAyB,EAAM,OAAO,IAAI,EAAyB,SAAS,cAAc,KAI9F,EAAM,gBAAgB,EACtB,GAAW;;AAIb,SADA,SAAS,iBAAiB,WAAW,EAAsB,QAC9C,SAAS,oBAAoB,WAAW,EAAsB;IAC1E;EAAC;EAAU;EAAW;EAAS,CAAC"}

package/esm/SubdomainNavBar/useSearchResults.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+import type { SubdomainNavBarSearchResultProps, SubdomainNavBarSearchResults } from './SubdomainNavBar';
+export type NormalizedSearchResultGroup = {
+    title?: string;
+    results: Array<{
+        result: SubdomainNavBarSearchResultProps;
+        index: number;
+    }>;
+};
+type UseSearchResultsOptions = {
+    dialogRef: RefObject<HTMLDialogElement | null>;
+    searchResults?: SubdomainNavBarSearchResults;
+};
+export declare function useSearchResults({ dialogRef, searchResults }: UseSearchResultsOptions): {
+    activeDescendant: number;
+    handleSearchResultKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    hasGroupedSearchResults: boolean;
+    hasSearchResults: boolean;
+    normalizedSearchResultGroups: NormalizedSearchResultGroup[];
+    resetActiveDescendant: () => void;
+    searchResultsLength: number;
+};
+export {};
+//# sourceMappingURL=useSearchResults.d.ts.map

package/esm/SubdomainNavBar/useSearchResults.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSearchResults.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/useSearchResults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAExF,OAAO,KAAK,EAEV,gCAAgC,EAChC,4BAA4B,EAC7B,MAAM,mBAAmB,CAAA;AAE1B,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,KAAK,CAAC;QACb,MAAM,EAAE,gCAAgC,CAAA;QACxC,KAAK,EAAE,MAAM,CAAA;KACd,CAAC,CAAA;CACH,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IAC9C,aAAa,CAAC,EAAE,4BAA4B,CAAA;CAC7C,CAAA;AA+CD,wBAAgB,gBAAgB,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,EAAE,uBAAuB;;uCAUxE,aAAa,CAAC,gBAAgB,CAAC;;;;;;EA0C1C"}

package/esm/SubdomainNavBar/useSearchResults.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { useCallback as e, useMemo as t, useState as n } from "react";
+//#region src/SubdomainNavBar/useSearchResults.ts
+function r(e) {
+	return "results" in e;
+}
+function i(e = []) {
+	let t = [], n = 0;
+	for (let i of e) {
+		if (r(i)) {
+			if (i.results.length === 0) continue;
+			t.push({
+				title: i.title,
+				results: i.results.map((e) => ({
+					result: e,
+					index: n++
+				}))
+			});
+			continue;
+		}
+		let e = i.group, a = t.find((t) => t.title === e);
+		a || (a = {
+			title: e,
+			results: []
+		}, t.push(a)), a.results.push({
+			result: i,
+			index: n++
+		});
+	}
+	return t;
+}
+function a({ dialogRef: r, searchResults: a }) {
+	let o = t(() => i(a), [a]), s = o.some((e) => e.title), c = o.reduce((e, t) => e + t.results.length, 0), l = c > 0, [u, d] = n(-1), f = e(() => d(-1), []);
+	return {
+		activeDescendant: u,
+		handleSearchResultKeyDown: e((e) => {
+			let t = [
+				"ArrowDown",
+				"ArrowUp",
+				"Enter"
+			], n = r.current, i = u;
+			!t.includes(e.key) || e.key === "Enter" && u === -1 || !n || (e.preventDefault(), e.key === "ArrowDown" ? (i = u < c - 1 ? u + 1 : -1, d(i)) : e.key === "ArrowUp" && (i = u === -1 ? c - 1 : u - 1, d(i)), (e.key === "ArrowDown" || e.key === "ArrowUp") && n.querySelector(`#subdomainnavbar-search-result-${i}`)?.scrollIntoView({ block: "nearest" }), e.key === "Enter" && n.querySelector(`#subdomainnavbar-search-result-${u}`)?.click());
+		}, [
+			u,
+			r,
+			c
+		]),
+		hasGroupedSearchResults: s,
+		hasSearchResults: l,
+		normalizedSearchResultGroups: o,
+		resetActiveDescendant: f,
+		searchResultsLength: c
+	};
+}
+//#endregion
+export { a as useSearchResults };
+//# sourceMappingURL=useSearchResults.js.map

package/esm/SubdomainNavBar/useSearchResults.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSearchResults.js","names":[],"sources":["../../src/SubdomainNavBar/useSearchResults.ts"],"sourcesContent":["import {useCallback, useMemo, useState, type KeyboardEvent, type RefObject} from 'react'\n\nimport type {\n SubdomainNavBarSearchResultGroupProps,\n SubdomainNavBarSearchResultProps,\n SubdomainNavBarSearchResults,\n} from './SubdomainNavBar'\n\nexport type NormalizedSearchResultGroup = {\n title?: string\n results: Array<{\n result: SubdomainNavBarSearchResultProps\n index: number\n }>\n}\n\ntype UseSearchResultsOptions = {\n dialogRef: RefObject<HTMLDialogElement | null>\n searchResults?: SubdomainNavBarSearchResults\n}\n\nfunction isSearchResultGroup(\n item: SubdomainNavBarSearchResultProps | SubdomainNavBarSearchResultGroupProps,\n): item is SubdomainNavBarSearchResultGroupProps {\n return 'results' in item\n}\n\nfunction normalizeSearchResults(searchResults: SubdomainNavBarSearchResults = []): NormalizedSearchResultGroup[] {\n const groups: NormalizedSearchResultGroup[] = []\n let resultIndex = 0\n\n for (const item of searchResults) {\n if (isSearchResultGroup(item)) {\n if (item.results.length === 0) continue\n\n groups.push({\n title: item.title,\n results: item.results.map(result => ({\n result,\n index: resultIndex++,\n })),\n })\n\n continue\n }\n\n const groupTitle = item.group\n let group = groups.find(existingGroup => existingGroup.title === groupTitle)\n\n if (!group) {\n group = {\n title: groupTitle,\n results: [],\n }\n groups.push(group)\n }\n\n group.results.push({\n result: item,\n index: resultIndex++,\n })\n }\n\n return groups\n}\n\nexport function useSearchResults({dialogRef, searchResults}: UseSearchResultsOptions) {\n const normalizedSearchResultGroups = useMemo(() => normalizeSearchResults(searchResults), [searchResults])\n const hasGroupedSearchResults = normalizedSearchResultGroups.some(group => group.title)\n const searchResultsLength = normalizedSearchResultGroups.reduce((count, group) => count + group.results.length, 0)\n const hasSearchResults = searchResultsLength > 0\n const [activeDescendant, setActiveDescendant] = useState(-1)\n\n const resetActiveDescendant = useCallback(() => setActiveDescendant(-1), [])\n\n const handleSearchResultKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n const supportedKeys = ['ArrowDown', 'ArrowUp', 'Enter']\n const dialog = dialogRef.current\n let nextActiveDescendant = activeDescendant\n\n if (!supportedKeys.includes(event.key) || (event.key === 'Enter' && activeDescendant === -1) || !dialog) {\n return\n }\n\n event.preventDefault()\n\n if (event.key === 'ArrowDown') {\n nextActiveDescendant = activeDescendant < searchResultsLength - 1 ? activeDescendant + 1 : -1\n setActiveDescendant(nextActiveDescendant)\n } else if (event.key === 'ArrowUp') {\n nextActiveDescendant = activeDescendant === -1 ? searchResultsLength - 1 : activeDescendant - 1\n setActiveDescendant(nextActiveDescendant)\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n dialog\n .querySelector(`#subdomainnavbar-search-result-${nextActiveDescendant}`)\n ?.scrollIntoView({block: 'nearest'})\n }\n\n if (event.key === 'Enter') {\n const link = dialog.querySelector<HTMLAnchorElement>(`#subdomainnavbar-search-result-${activeDescendant}`)\n link?.click()\n }\n },\n [activeDescendant, dialogRef, searchResultsLength],\n )\n\n return {\n activeDescendant,\n handleSearchResultKeyDown,\n hasGroupedSearchResults,\n hasSearchResults,\n normalizedSearchResultGroups,\n resetActiveDescendant,\n searchResultsLength,\n }\n}\n"],"mappings":";;AAqBA,SAAS,EACP,GAC+C;AAC/C,QAAO,aAAa;;AAGtB,SAAS,EAAuB,IAA8C,EAAE,EAAiC;CAC/G,IAAM,IAAwC,EAAE,EAC5C,IAAc;AAElB,MAAK,IAAM,KAAQ,GAAe;AAChC,MAAI,EAAoB,EAAK,EAAE;AAC7B,OAAI,EAAK,QAAQ,WAAW,EAAG;AAE/B,KAAO,KAAK;IACV,OAAO,EAAK;IACZ,SAAS,EAAK,QAAQ,KAAI,OAAW;KACnC;KACA,OAAO;KACR,EAAE;IACJ,CAAC;AAEF;;EAGF,IAAM,IAAa,EAAK,OACpB,IAAQ,EAAO,MAAK,MAAiB,EAAc,UAAU,EAAW;AAU5E,EARK,MACH,IAAQ;GACN,OAAO;GACP,SAAS,EAAE;GACZ,EACD,EAAO,KAAK,EAAM,GAGpB,EAAM,QAAQ,KAAK;GACjB,QAAQ;GACR,OAAO;GACR,CAAC;;AAGJ,QAAO;;AAGT,SAAgB,EAAiB,EAAC,cAAW,oBAAyC;CACpF,IAAM,IAA+B,QAAc,EAAuB,EAAc,EAAE,CAAC,EAAc,CAAC,EACpG,IAA0B,EAA6B,MAAK,MAAS,EAAM,MAAM,EACjF,IAAsB,EAA6B,QAAQ,GAAO,MAAU,IAAQ,EAAM,QAAQ,QAAQ,EAAE,EAC5G,IAAmB,IAAsB,GACzC,CAAC,GAAkB,KAAuB,EAAS,GAAG,EAEtD,IAAwB,QAAkB,EAAoB,GAAG,EAAE,EAAE,CAAC;AAoC5E,QAAO;EACL;EACA,2BApCgC,GAC/B,MAA2C;GAC1C,IAAM,IAAgB;IAAC;IAAa;IAAW;IAAQ,EACjD,IAAS,EAAU,SACrB,IAAuB;AAEvB,IAAC,EAAc,SAAS,EAAM,IAAI,IAAK,EAAM,QAAQ,WAAW,MAAqB,MAAO,CAAC,MAIjG,EAAM,gBAAgB,EAElB,EAAM,QAAQ,eAChB,IAAuB,IAAmB,IAAsB,IAAI,IAAmB,IAAI,IAC3F,EAAoB,EAAqB,IAChC,EAAM,QAAQ,cACvB,IAAuB,MAAqB,KAAK,IAAsB,IAAI,IAAmB,GAC9F,EAAoB,EAAqB,IAGvC,EAAM,QAAQ,eAAe,EAAM,QAAQ,cAC7C,EACG,cAAc,kCAAkC,IAAuB,EACtE,eAAe,EAAC,OAAO,WAAU,CAAC,EAGpC,EAAM,QAAQ,WACH,EAAO,cAAiC,kCAAkC,IACvF,EAAM,OAAO;KAGjB;GAAC;GAAkB;GAAW;GAAoB,CAKlD;EACA;EACA;EACA;EACA;EACA;EACD"}

package/esm/SubdomainNavBar/useVisibilityObserver.d.ts CHANGED Viewed

@@ -2,5 +2,5 @@ import { RefObject } from 'react';
 export type VisibilityMap = {
     [key: string]: boolean;
 };
-export declare function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement | null>, children: any): VisibilityMap[];
+export declare function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement | null>, overflowRef: RefObject<HTMLElement | null>, measurementKey: string, disabled?: boolean): VisibilityMap[];
 //# sourceMappingURL=useVisibilityObserver.d.ts.map

package/esm/SubdomainNavBar/useVisibilityObserver.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useVisibilityObserver.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/useVisibilityObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,~~EAAsB~~,MAAM,OAAO,CAAA;~~AAEpD~~,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,CAAA;~~AAED~~,wBAAgB,qBAAqB,~~CAAC~~,aAAa,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,QAAQ,~~KAAA~~,~~mBA0ChG~~"}
1	+ {"version":3,"file":"useVisibilityObserver.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/useVisibilityObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAmC,MAAM,OAAO,CAAA;AAIjE,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,CAAA;AASD,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,EACjD,WAAW,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC1C,cAAc,EAAE,MAAM,EACtB,QAAQ,UAAQ,mBAuIjB"}

package/esm/SubdomainNavBar/useVisibilityObserver.js CHANGED Viewed

@@ -1,30 +1,67 @@
-import { useEffect as e, useState as t } from "react";
+import e from "../hooks/useIsomorphicLayoutEffect.js";
+import { useCallback as t, useEffect as n, useState as r } from "react";
 //#region src/SubdomainNavBar/useVisibilityObserver.ts
-function n(n, r) {
-	let [i, a] = t({}), o = (e) => {
-		let t = {};
-		for (let n of e) {
-			let e = n.target.getAttribute("data-navitemid");
-			e && (n.isIntersecting ? t[e] = !0 : t[e] = !1);
+function i(e, t) {
+	let n = Object.keys(e), r = Object.keys(t);
+	return n.length === r.length && r.every((n) => e[n] === t[n]);
+}
+function a(a, o, s, c = !1) {
+	let [l, u] = r({}), d = t(() => {
+		let e = a.current;
+		if (c || !e) {
+			u((e) => Object.keys(e).length === 0 ? e : {});
+			return;
 		}
-		a((e) => ({
-			...e,
-			...t
-		}));
-	};
-	return e(() => {
-		let e = new IntersectionObserver(o, {
-			root: n.current,
-			threshold: 1
-		});
-		if (n.current) {
-			let t = Array.from(n.current.children);
-			for (let n of t) n.getAttribute("data-navitemid") && e.observe(n);
+		let t = Array.from(e.children).filter((e) => e instanceof HTMLElement && e !== o.current);
+		if (t.length === 0) {
+			u((e) => Object.keys(e).length === 0 ? e : {});
+			return;
 		}
-		return () => e.disconnect();
-	}, [n, r]), [i];
+		let n = window.getComputedStyle(e), r = (Number.parseFloat(n.paddingInlineStart) || 0) + (Number.parseFloat(n.paddingInlineEnd) || 0), s = Math.max(0, e.clientWidth - r);
+		if (t.reduce((e, t) => e + t.offsetWidth, 0) <= s) {
+			let e = t.reduce((e, t, n) => (e[n] = !0, e), {});
+			u((t) => i(t, e) ? t : e);
+			return;
+		}
+		let l = Math.max(0, s - (o.current?.offsetWidth ?? 0)), d = 0, f = !1, p = t.reduce((e, t, n) => {
+			if (f) return e[n] = !1, e;
+			let r = d + t.offsetWidth, i = r <= l;
+			return i ? d = r : f = !0, e[n] = i, e;
+		}, {});
+		u((e) => i(e, p) ? e : p);
+	}, [
+		c,
+		a,
+		o
+	]);
+	return e(() => {
+		d();
+	}, [s, d]), n(() => {
+		let e = a.current;
+		if (c || !e) return;
+		let t, n = !1, r = () => {
+			t !== void 0 && cancelAnimationFrame(t), t = requestAnimationFrame(d);
+		}, i = typeof ResizeObserver < "u" ? new ResizeObserver(r) : void 0;
+		i?.observe(e);
+		for (let t of Array.from(e.children)) t instanceof HTMLElement && t !== o.current && i?.observe(t);
+		o.current && i?.observe(o.current), i || window.addEventListener("resize", r), r();
+		let s = document.fonts;
+		return s && (async () => {
+			await s.ready, n || r();
+		})(), () => {
+			n = !0, t !== void 0 && cancelAnimationFrame(t), i?.disconnect(), i || window.removeEventListener("resize", r);
+		};
+	}, [
+		c,
+		s,
+		a,
+		o,
+		d
+	]), n(() => {
+		c && u((e) => Object.keys(e).length === 0 ? e : {});
+	}, [c]), [l];
 }
 //#endregion
-export { n as useVisibilityObserver };
+export { a as useVisibilityObserver };
 //# sourceMappingURL=useVisibilityObserver.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useVisibilityObserver.js","names":[],"sources":["../../src/SubdomainNavBar/useVisibilityObserver.ts"],"sourcesContent":["import {RefObject, ~~useState~~, useEffect} from 'react'\n\nexport type VisibilityMap = {\n [key: string]: boolean\n}\n\nexport function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement \| null>, ~~children~~) {\n const [visibilityMap, setVisibilityMap] = useState<VisibilityMap>({})\n const ~~handleIntersection~~ = (~~entries: IntersectionObserverEntry[]~~) => {\n const ~~updatedEntries~~ = {}\n\n ~~for~~ (~~const~~ ~~entry~~ of ~~entries~~) {\n const ~~navitemid~~ = ~~entry~~.~~target~~.~~getAttribute~~(~~'data~~-~~navitemid'~~)\n if (~~navitemid~~) {\n if (~~entry.isIntersecting~~) {\n ~~updatedEntries~~[~~navitemid~~] = true\n } ~~else~~ {\n ~~updatedEntries~~[~~navitemid~~] = false\n }\n }\n }\n\n setVisibilityMap(prev => ({\n ~~...prev,\~~n ~~...updatedEntries,\~~n }))\n }\n\n useEffect(() => {\n const ~~observer~~ = ~~new~~ ~~IntersectionObserver~~(~~handleIntersection,~~ {\n ~~root:~~ ~~navigationRef.current,\~~n ~~threshold:~~ ~~1,\~~n })\n\n if (~~navigationRef.current~~) {\n const ~~navItems~~ = Array.from(~~navigationRef~~.~~current.~~children)\n\n ~~for~~ (~~const~~ item of ~~navItems~~) {\n if (~~item~~.~~getAttribute~~(~~'data~~-~~navitemid~~')) {\n ~~observer~~.~~observe~~(~~item~~)\n }\n }\n }\n\n return () => ~~observer.~~disconnect()\n }, [navigationRef, ~~children~~])\n\n return [visibilityMap]\n}\n"],"mappings":";;~~AAMA~~,SAAgB,~~EAAsB~~,~~GAAmD~~,~~GAAU~~;~~CACjG~~,IAAM,CAAC,GAAe,KAAoB,EAAwB,EAAE,CAAC,~~EAC~~/D,~~KAAsB~~,~~MAAyC~~;~~EACnE~~,IAAM,~~IAAiB~~,EAAE;~~AAEzB~~,~~OAAK,~~IAAM,~~KAAS~~,~~GAAS~~;~~GAC3B~~,IAAM,~~IAAY~~,~~EAAM~~,OAAO,~~aAAa~~,iBAAiB;~~AAC7D~~,~~GAAI~~,~~MACE~~,~~EAAM~~,~~iBACR~~,~~EAAe~~,~~KAAa~~,~~KAE5B~~,~~EAAe~~,~~KAAa;;AAKlC~~,~~KAAiB~~,~~OAAS~~;~~GACxB~~,GAAG;~~GACH~~,GAAG;~~GACJ~~,~~EAAE;;AAsBL~~,~~QAnBA~~,~~QAAgB~~;~~EACd~~,IAAM,~~IAAW~~,~~IAAI~~,~~qBAAqB~~,~~GAAoB~~;~~GAC5D~~,~~MAAM~~,~~EAAc~~;~~GACpB~~,~~WAAW~~;~~GACZ~~,CAAC;~~AAEF~~,~~MAAI~~,~~EAAc~~,~~SAAS~~;~~GACzB~~,~~IAAM~~,~~IAAW~~,~~MAAM~~,~~KAAK~~,EAAc,QAAQ,~~SAAS~~;~~AAE3D~~,~~QAAK~~,IAAM,KAAQ,~~EACjB~~,CAAI,~~EAAK~~,~~aAAa~~,~~iBAAiB~~,~~IACrC~~,~~EAAS~~,QAAQ,EAAK~~;;AAK5B~~,~~eAAa~~,~~EAAS~~,YAAY;~~IACjC~~,CAAC,~~GAAe~~,EAAS,CAAC,~~EAEtB~~,CAAC,EAAc"}
1	+ {"version":3,"file":"useVisibilityObserver.js","names":[],"sources":["../../src/SubdomainNavBar/useVisibilityObserver.ts"],"sourcesContent":["import {RefObject, useCallback, useEffect, useState} from 'react'\n\nimport useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'\n\nexport type VisibilityMap = {\n [key: string]: boolean\n}\n\nfunction visibilityMapsAreEqual(current: VisibilityMap, next: VisibilityMap) {\n const currentKeys = Object.keys(current)\n const nextKeys = Object.keys(next)\n\n return currentKeys.length === nextKeys.length && nextKeys.every(key => current[key] === next[key])\n}\n\nexport function useVisibilityObserver(\n navigationRef: RefObject<HTMLUListElement \| null>,\n overflowRef: RefObject<HTMLElement \| null>,\n measurementKey: string,\n disabled = false,\n) {\n const [visibilityMap, setVisibilityMap] = useState<VisibilityMap>({})\n\n const updateVisibilityMap = useCallback(() => {\n const navigation = navigationRef.current\n\n if (disabled \|\| !navigation) {\n setVisibilityMap(prev => (Object.keys(prev).length === 0 ? prev : {}))\n return\n }\n\n const navItems = Array.from(navigation.children).filter(\n (item): item is HTMLElement => item instanceof HTMLElement && item !== overflowRef.current,\n )\n\n if (navItems.length === 0) {\n setVisibilityMap(prev => (Object.keys(prev).length === 0 ? prev : {}))\n return\n }\n\n const navigationStyles = window.getComputedStyle(navigation)\n const inlinePadding =\n (Number.parseFloat(navigationStyles.paddingInlineStart) \|\| 0) +\n (Number.parseFloat(navigationStyles.paddingInlineEnd) \|\| 0)\n const availableWidth = Math.max(0, navigation.clientWidth - inlinePadding)\n const navItemsWidth = navItems.reduce((width, item) => width + item.offsetWidth, 0)\n\n if (navItemsWidth <= availableWidth) {\n const nextVisibilityMap = navItems.reduce<VisibilityMap>((nextMap, _item, index) => {\n nextMap[index] = true\n return nextMap\n }, {})\n\n setVisibilityMap(prev => (visibilityMapsAreEqual(prev, nextVisibilityMap) ? prev : nextVisibilityMap))\n return\n }\n\n const availableWidthWithOverflow = Math.max(0, availableWidth - (overflowRef.current?.offsetWidth ?? 0))\n let visibleItemsWidth = 0\n let hasOverflowedItem = false\n\n const nextVisibilityMap = navItems.reduce<VisibilityMap>((nextMap, item, index) => {\n if (hasOverflowedItem) {\n nextMap[index] = false\n return nextMap\n }\n\n const nextVisibleItemsWidth = visibleItemsWidth + item.offsetWidth\n const isVisible = nextVisibleItemsWidth <= availableWidthWithOverflow\n\n if (isVisible) {\n visibleItemsWidth = nextVisibleItemsWidth\n } else {\n hasOverflowedItem = true\n }\n\n nextMap[index] = isVisible\n return nextMap\n }, {})\n\n setVisibilityMap(prev => (visibilityMapsAreEqual(prev, nextVisibilityMap) ? prev : nextVisibilityMap))\n }, [disabled, navigationRef, overflowRef])\n\n useIsomorphicLayoutEffect(() => {\n updateVisibilityMap()\n }, [measurementKey, updateVisibilityMap])\n\n useEffect(() => {\n const navigation = navigationRef.current\n if (disabled \|\| !navigation) return\n\n let animationFrameId: number \| undefined\n let cancelled = false\n\n const scheduleVisibilityUpdate = () => {\n if (animationFrameId !== undefined) {\n cancelAnimationFrame(animationFrameId)\n }\n\n animationFrameId = requestAnimationFrame(updateVisibilityMap)\n }\n\n const resizeObserver =\n typeof ResizeObserver !== 'undefined' ? new ResizeObserver(scheduleVisibilityUpdate) : undefined\n\n resizeObserver?.observe(navigation)\n\n for (const item of Array.from(navigation.children)) {\n if (item instanceof HTMLElement && item !== overflowRef.current) {\n resizeObserver?.observe(item)\n }\n }\n\n if (overflowRef.current) {\n resizeObserver?.observe(overflowRef.current)\n }\n\n if (!resizeObserver) {\n // eslint-disable-next-line github/prefer-observers -- This is the fallback path when ResizeObserver is unavailable.\n window.addEventListener('resize', scheduleVisibilityUpdate)\n }\n\n scheduleVisibilityUpdate()\n\n const fonts = (document as unknown as {fonts?: FontFaceSet}).fonts\n if (fonts) {\n void (async () => {\n await fonts.ready\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Cleanup can run before font loading resolves.\n if (!cancelled) {\n scheduleVisibilityUpdate()\n }\n })()\n }\n\n return () => {\n cancelled = true\n if (animationFrameId !== undefined) {\n cancelAnimationFrame(animationFrameId)\n }\n resizeObserver?.disconnect()\n if (!resizeObserver) {\n window.removeEventListener('resize', scheduleVisibilityUpdate)\n }\n }\n }, [disabled, measurementKey, navigationRef, overflowRef, updateVisibilityMap])\n\n useEffect(() => {\n if (disabled) {\n setVisibilityMap(prev => (Object.keys(prev).length === 0 ? prev : {}))\n }\n }, [disabled])\n\n return [visibilityMap]\n}\n"],"mappings":";;;AAQA,SAAS,EAAuB,GAAwB,GAAqB;CAC3E,IAAM,IAAc,OAAO,KAAK,EAAQ,EAClC,IAAW,OAAO,KAAK,EAAK;AAElC,QAAO,EAAY,WAAW,EAAS,UAAU,EAAS,OAAM,MAAO,EAAQ,OAAS,EAAK,GAAK;;AAGpG,SAAgB,EACd,GACA,GACA,GACA,IAAW,IACX;CACA,IAAM,CAAC,GAAe,KAAoB,EAAwB,EAAE,CAAC,EAE/D,IAAsB,QAAkB;EAC5C,IAAM,IAAa,EAAc;AAEjC,MAAI,KAAY,CAAC,GAAY;AAC3B,MAAiB,MAAS,OAAO,KAAK,EAAK,CAAC,WAAW,IAAI,IAAO,EAAE,CAAE;AACtE;;EAGF,IAAM,IAAW,MAAM,KAAK,EAAW,SAAS,CAAC,QAC9C,MAA8B,aAAgB,eAAe,MAAS,EAAY,QACpF;AAED,MAAI,EAAS,WAAW,GAAG;AACzB,MAAiB,MAAS,OAAO,KAAK,EAAK,CAAC,WAAW,IAAI,IAAO,EAAE,CAAE;AACtE;;EAGF,IAAM,IAAmB,OAAO,iBAAiB,EAAW,EACtD,KACH,OAAO,WAAW,EAAiB,mBAAmB,IAAI,MAC1D,OAAO,WAAW,EAAiB,iBAAiB,IAAI,IACrD,IAAiB,KAAK,IAAI,GAAG,EAAW,cAAc,EAAc;AAG1E,MAFsB,EAAS,QAAQ,GAAO,MAAS,IAAQ,EAAK,aAAa,EAE7E,IAAiB,GAAgB;GACnC,IAAM,IAAoB,EAAS,QAAuB,GAAS,GAAO,OACxE,EAAQ,KAAS,IACV,IACN,EAAE,CAAC;AAEN,MAAiB,MAAS,EAAuB,GAAM,EAAkB,GAAG,IAAO,EAAmB;AACtG;;EAGF,IAAM,IAA6B,KAAK,IAAI,GAAG,KAAkB,EAAY,SAAS,eAAe,GAAG,EACpG,IAAoB,GACpB,IAAoB,IAElB,IAAoB,EAAS,QAAuB,GAAS,GAAM,MAAU;AACjF,OAAI,EAEF,QADA,EAAQ,KAAS,IACV;GAGT,IAAM,IAAwB,IAAoB,EAAK,aACjD,IAAY,KAAyB;AAS3C,UAPI,IACF,IAAoB,IAEpB,IAAoB,IAGtB,EAAQ,KAAS,GACV;KACN,EAAE,CAAC;AAEN,KAAiB,MAAS,EAAuB,GAAM,EAAkB,GAAG,IAAO,EAAmB;IACrG;EAAC;EAAU;EAAe;EAAY,CAAC;AAwE1C,QAtEA,QAAgC;AAC9B,KAAqB;IACpB,CAAC,GAAgB,EAAoB,CAAC,EAEzC,QAAgB;EACd,IAAM,IAAa,EAAc;AACjC,MAAI,KAAY,CAAC,EAAY;EAE7B,IAAI,GACA,IAAY,IAEV,UAAiC;AAKrC,GAJI,MAAqB,KAAA,KACvB,qBAAqB,EAAiB,EAGxC,IAAmB,sBAAsB,EAAoB;KAGzD,IACJ,OAAO,iBAAmB,MAAc,IAAI,eAAe,EAAyB,GAAG,KAAA;AAEzF,KAAgB,QAAQ,EAAW;AAEnC,OAAK,IAAM,KAAQ,MAAM,KAAK,EAAW,SAAS,CAChD,CAAI,aAAgB,eAAe,MAAS,EAAY,WACtD,GAAgB,QAAQ,EAAK;AAajC,EATI,EAAY,WACd,GAAgB,QAAQ,EAAY,QAAQ,EAGzC,KAEH,OAAO,iBAAiB,UAAU,EAAyB,EAG7D,GAA0B;EAE1B,IAAM,IAAS,SAA8C;AAW7D,SAVI,MACI,YAAY;AAGhB,GAFA,MAAM,EAAM,OAEP,KACH,GAA0B;MAE1B,QAGO;AAMX,GALA,IAAY,IACR,MAAqB,KAAA,KACvB,qBAAqB,EAAiB,EAExC,GAAgB,YAAY,EACvB,KACH,OAAO,oBAAoB,UAAU,EAAyB;;IAGjE;EAAC;EAAU;EAAgB;EAAe;EAAa;EAAoB,CAAC,EAE/E,QAAgB;AACd,EAAI,KACF,GAAiB,MAAS,OAAO,KAAK,EAAK,CAAC,WAAW,IAAI,IAAO,EAAE,CAAE;IAEvE,CAAC,EAAS,CAAC,EAEP,CAAC,EAAc"}

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

@@ -1,19 +1,24 @@
 import React, { PropsWithChildren } from 'react';
 import { TextProps } from '../Text/Text';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css';
 export declare const testIds: {
     root: string;
+    readonly text: string;
     readonly cursor: string;
 };
 export type TextCursorAnimationProps = {
     /**
-     * Whether to animate the text reveal with a sliding wipe animation
-     * and a cursor that transitions from grey to green.
+     * Whether to animate the text with a typing effect.
      */
     animate?: boolean;
+    /**
+     * Optional text to type before transitioning to the final text
+     */
+    initialText?: string;
     ['data-testid']?: string;
     delay?: number;
     waitForPageLoad?: boolean;
 } & React.HTMLAttributes<HTMLSpanElement> & Omit<TextProps, 'animate' | 'as'>;
-export declare function TextCursorAnimation({ children, className, animate, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextCursorAnimation.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAEtC,OAAO,yHAAyH,CAAA;AAIhI,eAAO,MAAM,OAAO~~;;;CAKnB~~,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC~~;;;OAGG~~;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,CAAA;AAEnC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EAAE,MAAM,EACrB,~~KAAW~~,~~EACX~~,eAAsB,EACtB,OAAiB,GAClB,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,~~2CA0C7C~~"}
1	+ {"version":3,"file":"TextCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAEtC,OAAO,4GAA4G,CAAA;AACnH,OAAO,yHAAyH,CAAA;AAIhI,eAAO,MAAM,OAAO;;;;CAQnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,CAAA;AAEnC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EAAE,MAAM,EACrB,KAAK,EACL,eAAsB,EACtB,OAAiB,GAClB,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,2CA+E7C"}