@cloudscape-design/components-themeable 3.0.344 → 3.0.346

package/lib/internal/template/token-group/styles.scoped.css

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_dm8gx_177wh_97:not(#\9) {
+.awsui_root_dm8gx_14yza_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -125,32 +125,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-spacing: normal;
   box-sizing: border-box;
   font-size: var(--font-body-m-size-0qqejn, 14px);
-  line-height: var(--font-body-m-line-height-9vkzhc, 22px);
+  line-height: var(--font-body-m-line-height-43ichb, 22px);
   color: var(--color-text-body-default-4colr5, #16191f);
   font-weight: 400;
   font-family: var(--font-family-base-nzcxu9, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_root_dm8gx_177wh_97.awsui_has-items_dm8gx_177wh_109:not(#\9) {
+.awsui_root_dm8gx_14yza_97.awsui_has-items_dm8gx_14yza_109:not(#\9) {
   padding-top: var(--space-xs-7veqkr, 8px);
 }
 
-.awsui_dismiss-button_dm8gx_177wh_113:not(#\9) {
+.awsui_dismiss-button_dm8gx_14yza_113:not(#\9) {
   margin: -1px -1px 0 var(--space-xxs-xx079q, 4px);
   border: 1px solid transparent;
   padding: 0 var(--space-xxs-xx079q, 4px);
   color: var(--color-text-button-inline-icon-default-au9sza, #545b64);
   background-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_177wh_113:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_14yza_113:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_177wh_113:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_14yza_113:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_177wh_113:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_14yza_113:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -161,23 +161,23 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_177wh_113:not(#\
   border-radius: var(--border-radius-control-default-focus-ring-uu8qi4, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4clyb1, #0073bb);
 }
-.awsui_dismiss-button_dm8gx_177wh_113:not(#\9):focus {
+.awsui_dismiss-button_dm8gx_14yza_113:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_dm8gx_177wh_113:not(#\9):hover {
+.awsui_dismiss-button_dm8gx_14yza_113:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-button-inline-icon-hover-3vml1m, #16191f);
 }
 
-.awsui_token_dm8gx_177wh_147:not(#\9) {
+.awsui_token_dm8gx_14yza_147:not(#\9) {
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--space-xxs-xx079q, 4px);
 }
 
-.awsui_token-box_dm8gx_177wh_154:not(#\9) {
+.awsui_token-box_dm8gx_14yza_154:not(#\9) {
   height: 100%;
   border: var(--border-field-width-gmdyxy, 1px) solid var(--color-border-item-selected-044zoh, #0073bb);
   padding: var(--space-scaled-xxs-gmgwxk, 4px) var(--space-xxs-xx079q, 4px) var(--space-scaled-xxs-gmgwxk, 4px) var(--space-field-horizontal-xg7uom, 8px);
@@ -189,27 +189,27 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_177wh_113:not(#\
   box-sizing: border-box;
 }
 
-.awsui_token-box-error_dm8gx_177wh_166:not(#\9) {
+.awsui_token-box-error_dm8gx_14yza_166:not(#\9) {
   border-color: var(--color-border-status-error-jb9vli, #d13212);
   border-left-width: var(--border-invalid-width-6tnuc9, 4px);
 }
-.awsui_token-box-error_dm8gx_177wh_166 > .awsui_dismiss-button_dm8gx_177wh_113:not(#\9) {
+.awsui_token-box-error_dm8gx_14yza_166 > .awsui_dismiss-button_dm8gx_14yza_113:not(#\9) {
   color: var(--color-text-interactive-default-9x433a, #545b64);
 }
-.awsui_token-box-error_dm8gx_177wh_166 > .awsui_dismiss-button_dm8gx_177wh_113:not(#\9):hover {
+.awsui_token-box-error_dm8gx_14yza_166 > .awsui_dismiss-button_dm8gx_14yza_113:not(#\9):hover {
   color: var(--color-text-interactive-hover-6fw5y8, #16191f);
 }
 
-.awsui_token-box-disabled_dm8gx_177wh_177.awsui_token-box-disabled_dm8gx_177wh_177:not(#\9) {
+.awsui_token-box-disabled_dm8gx_14yza_177.awsui_token-box-disabled_dm8gx_14yza_177:not(#\9) {
   border-color: var(--color-border-control-disabled-p74xpm, #d5dbdb);
   background-color: var(--color-background-container-content-xlzim4, #ffffff);
   color: var(--color-text-disabled-uznqkj, #aab7b8);
   pointer-events: none;
 }
-.awsui_token-box-disabled_dm8gx_177wh_177.awsui_token-box-disabled_dm8gx_177wh_177 > .awsui_dismiss-button_dm8gx_177wh_113:not(#\9) {
+.awsui_token-box-disabled_dm8gx_14yza_177.awsui_token-box-disabled_dm8gx_14yza_177 > .awsui_dismiss-button_dm8gx_14yza_113:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-320glj, #aab7b8);
 }
-.awsui_token-box-disabled_dm8gx_177wh_177.awsui_token-box-disabled_dm8gx_177wh_177 > .awsui_dismiss-button_dm8gx_177wh_113:not(#\9):hover {
+.awsui_token-box-disabled_dm8gx_14yza_177.awsui_token-box-disabled_dm8gx_14yza_177 > .awsui_dismiss-button_dm8gx_14yza_113:not(#\9):hover {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   cursor: auto;
   color: var(--color-text-button-inline-icon-disabled-320glj, #aab7b8);

package/lib/internal/template/token-group/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_dm8gx_177wh_97",
-  "has-items": "awsui_has-items_dm8gx_177wh_109",
-  "dismiss-button": "awsui_dismiss-button_dm8gx_177wh_113",
-  "token": "awsui_token_dm8gx_177wh_147",
-  "token-box": "awsui_token-box_dm8gx_177wh_154",
-  "token-box-error": "awsui_token-box-error_dm8gx_177wh_166",
-  "token-box-disabled": "awsui_token-box-disabled_dm8gx_177wh_177"
+  "root": "awsui_root_dm8gx_14yza_97",
+  "has-items": "awsui_has-items_dm8gx_14yza_109",
+  "dismiss-button": "awsui_dismiss-button_dm8gx_14yza_113",
+  "token": "awsui_token_dm8gx_14yza_147",
+  "token-box": "awsui_token-box_dm8gx_14yza_154",
+  "token-box-error": "awsui_token-box-error_dm8gx_14yza_166",
+  "token-box-disabled": "awsui_token-box-disabled_dm8gx_14yza_177"
 };
   

package/lib/internal/template/top-navigation/1.0-beta/styles.css.js

@@ -1,30 +1,30 @@
 
     import './styles.scoped.css';
     export default {
-  "top-navigation": "awsui_top-navigation_1ca1i_wm2uf_93",
-  "padding-box": "awsui_padding-box_1ca1i_wm2uf_106",
-  "medium": "awsui_medium_1ca1i_wm2uf_116",
-  "narrow": "awsui_narrow_1ca1i_wm2uf_116",
-  "hidden": "awsui_hidden_1ca1i_wm2uf_124",
-  "\t": "awsui_\t_1ca1i_wm2uf_1",
-  "identity": "awsui_identity_1ca1i_wm2uf_137",
-  "identity-link": "awsui_identity-link_1ca1i_wm2uf_137",
-  "no-logo": "awsui_no-logo_1ca1i_wm2uf_154",
-  "logo": "awsui_logo_1ca1i_wm2uf_158",
-  "title": "awsui_title_1ca1i_wm2uf_169",
-  "inputs": "awsui_inputs_1ca1i_wm2uf_185",
-  "search": "awsui_search_1ca1i_wm2uf_192",
-  "search-expanded": "awsui_search-expanded_1ca1i_wm2uf_197",
-  "utilities": "awsui_utilities_1ca1i_wm2uf_202",
-  "utility-wrapper": "awsui_utility-wrapper_1ca1i_wm2uf_214",
-  "utility-wrapper-last": "awsui_utility-wrapper-last_1ca1i_wm2uf_230",
-  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_1ca1i_wm2uf_230",
-  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_1ca1i_wm2uf_244",
-  "utility-type-button-link": "awsui_utility-type-button-link_1ca1i_wm2uf_259",
-  "utility-link-icon": "awsui_utility-link-icon_1ca1i_wm2uf_272",
-  "utility-button-external-icon": "awsui_utility-button-external-icon_1ca1i_wm2uf_276",
-  "trigger": "awsui_trigger_1ca1i_wm2uf_280",
-  "rotate-up": "awsui_rotate-up_1ca1i_wm2uf_284",
-  "rotate-down": "awsui_rotate-down_1ca1i_wm2uf_299"
+  "top-navigation": "awsui_top-navigation_1ca1i_1ep6t_93",
+  "padding-box": "awsui_padding-box_1ca1i_1ep6t_106",
+  "medium": "awsui_medium_1ca1i_1ep6t_116",
+  "narrow": "awsui_narrow_1ca1i_1ep6t_116",
+  "hidden": "awsui_hidden_1ca1i_1ep6t_124",
+  "\t": "awsui_\t_1ca1i_1ep6t_1",
+  "identity": "awsui_identity_1ca1i_1ep6t_137",
+  "identity-link": "awsui_identity-link_1ca1i_1ep6t_137",
+  "no-logo": "awsui_no-logo_1ca1i_1ep6t_154",
+  "logo": "awsui_logo_1ca1i_1ep6t_158",
+  "title": "awsui_title_1ca1i_1ep6t_169",
+  "inputs": "awsui_inputs_1ca1i_1ep6t_185",
+  "search": "awsui_search_1ca1i_1ep6t_192",
+  "search-expanded": "awsui_search-expanded_1ca1i_1ep6t_197",
+  "utilities": "awsui_utilities_1ca1i_1ep6t_202",
+  "utility-wrapper": "awsui_utility-wrapper_1ca1i_1ep6t_214",
+  "utility-wrapper-last": "awsui_utility-wrapper-last_1ca1i_1ep6t_230",
+  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_1ca1i_1ep6t_230",
+  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_1ca1i_1ep6t_244",
+  "utility-type-button-link": "awsui_utility-type-button-link_1ca1i_1ep6t_259",
+  "utility-link-icon": "awsui_utility-link-icon_1ca1i_1ep6t_272",
+  "utility-button-external-icon": "awsui_utility-button-external-icon_1ca1i_1ep6t_276",
+  "trigger": "awsui_trigger_1ca1i_1ep6t_280",
+  "rotate-up": "awsui_rotate-up_1ca1i_1ep6t_284",
+  "rotate-down": "awsui_rotate-down_1ca1i_1ep6t_299"
 };
   

package/lib/internal/template/top-navigation/1.0-beta/styles.scoped.css

@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_top-navigation_1ca1i_wm2uf_93:not(#\9) {
+.awsui_top-navigation_1ca1i_1ep6t_93:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -121,7 +121,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-spacing: normal;
   box-sizing: border-box;
   font-size: var(--font-body-m-size-0qqejn, 14px);
-  line-height: var(--font-body-m-line-height-9vkzhc, 22px);
+  line-height: var(--font-body-m-line-height-43ichb, 22px);
   color: var(--color-text-body-default-4colr5, #16191f);
   font-weight: 400;
   font-family: var(--font-family-base-nzcxu9, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
@@ -129,7 +129,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   background: var(--color-background-container-content-xlzim4, #ffffff);
 }
-.awsui_top-navigation_1ca1i_wm2uf_93 > .awsui_padding-box_1ca1i_wm2uf_106:not(#\9) {
+.awsui_top-navigation_1ca1i_1ep6t_93 > .awsui_padding-box_1ca1i_1ep6t_106:not(#\9) {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -139,15 +139,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   height: calc(var(--space-xxxl-ecj2b1, 40px) + var(--space-scaled-m-5caa5e, 16px));
   padding: 0 0 0 var(--space-l-z6h7qi, 20px);
 }
-.awsui_top-navigation_1ca1i_wm2uf_93.awsui_medium_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106:not(#\9), .awsui_top-navigation_1ca1i_wm2uf_93.awsui_narrow_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106:not(#\9) {
+.awsui_top-navigation_1ca1i_1ep6t_93.awsui_medium_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106:not(#\9), .awsui_top-navigation_1ca1i_1ep6t_93.awsui_narrow_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106:not(#\9) {
   height: calc(var(--space-xxxl-ecj2b1, 40px) + var(--space-scaled-xs-sg3tfb, 8px));
 }
-.awsui_top-navigation_1ca1i_wm2uf_93.awsui_narrow_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106:not(#\9) {
+.awsui_top-navigation_1ca1i_1ep6t_93.awsui_narrow_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106:not(#\9) {
   height: var(--space-xxxl-ecj2b1, 40px);
   padding: 0 0 0 var(--space-xs-7veqkr, 8px);
 }
 
-.awsui_hidden_1ca1i_wm2uf_124:not(#\9) {
+.awsui_hidden_1ca1i_1ep6t_124:not(#\9) {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
@@ -156,20 +156,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_hidden_1ca1i_wm2uf_124 *:not(#\9):not(#awsui_\9 _1ca1i_wm2uf_1) {
+.awsui_hidden_1ca1i_1ep6t_124 *:not(#\9):not(#awsui_\9 _1ca1i_1ep6t_1) {
   visibility: hidden;
 }
 
-.awsui_identity_1ca1i_wm2uf_137 > .awsui_identity-link_1ca1i_wm2uf_137:not(#\9) {
+.awsui_identity_1ca1i_1ep6t_137 > .awsui_identity-link_1ca1i_1ep6t_137:not(#\9) {
   display: flex;
   align-items: center;
   text-decoration: none;
   color: var(--color-text-top-navigation-title-rfejca, #16191f);
 }
-.awsui_identity_1ca1i_wm2uf_137 > .awsui_identity-link_1ca1i_wm2uf_137:not(#\9):hover {
+.awsui_identity_1ca1i_1ep6t_137 > .awsui_identity-link_1ca1i_1ep6t_137:not(#\9):hover {
   color: var(--color-text-accent-exu66k, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_identity_1ca1i_wm2uf_137 > .awsui_identity-link_1ca1i_wm2uf_137:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_identity_1ca1i_1ep6t_137 > .awsui_identity-link_1ca1i_1ep6t_137:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-e033ba, 5px auto Highlight);
   outline-offset: 2px;
@@ -177,22 +177,22 @@ body[data-awsui-focus-visible=true] .awsui_identity_1ca1i_wm2uf_137 > .awsui_ide
   border-radius: var(--border-radius-control-default-focus-ring-uu8qi4, 2px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-3gfzjd, 0px) var(--color-border-item-focused-4clyb1, #0073bb);
 }
-.awsui_identity_1ca1i_wm2uf_137.awsui_no-logo_1ca1i_wm2uf_154:not(#\9) {
+.awsui_identity_1ca1i_1ep6t_137.awsui_no-logo_1ca1i_1ep6t_154:not(#\9) {
   min-width: 100px;
 }
 
-.awsui_logo_1ca1i_wm2uf_158:not(#\9) {
+.awsui_logo_1ca1i_1ep6t_158:not(#\9) {
   display: block;
   max-height: var(--space-xxl-y3qgr4, 32px);
   margin-left: var(--space-s-o95p2n, 12px);
   width: auto;
   min-width: 10px;
 }
-.awsui_logo_1ca1i_wm2uf_158.awsui_narrow_1ca1i_wm2uf_116:not(#\9) {
+.awsui_logo_1ca1i_1ep6t_158.awsui_narrow_1ca1i_1ep6t_116:not(#\9) {
   max-height: var(--space-xl-uesynn, 24px);
 }
 
-.awsui_title_1ca1i_wm2uf_169:not(#\9) {
+.awsui_title_1ca1i_1ep6t_169:not(#\9) {
   font-size: var(--font-heading-m-size-bwdbnx, 18px);
   line-height: var(--font-heading-m-line-height-ahaded, 22px);
   letter-spacing: var(--font-heading-m-letter-spacing-t3csz2, normal);
@@ -204,28 +204,28 @@ body[data-awsui-focus-visible=true] .awsui_identity_1ca1i_wm2uf_137 > .awsui_ide
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.awsui_no-logo_1ca1i_wm2uf_154 > .awsui_identity-link_1ca1i_wm2uf_137 > .awsui_title_1ca1i_wm2uf_169:not(#\9) {
+.awsui_no-logo_1ca1i_1ep6t_154 > .awsui_identity-link_1ca1i_1ep6t_137 > .awsui_title_1ca1i_1ep6t_169:not(#\9) {
   font-weight: 700;
 }
 
-.awsui_inputs_1ca1i_wm2uf_185:not(#\9) {
+.awsui_inputs_1ca1i_1ep6t_185:not(#\9) {
   flex: 1;
   min-width: 0;
   display: flex;
   justify-content: center;
 }
 
-.awsui_search_1ca1i_wm2uf_192:not(#\9) {
+.awsui_search_1ca1i_1ep6t_192:not(#\9) {
   width: 100%;
   max-width: 340px;
   padding-left: var(--space-xxxl-ecj2b1, 40px);
 }
-.awsui_search-expanded_1ca1i_wm2uf_197:not(#\9) {
+.awsui_search-expanded_1ca1i_1ep6t_197:not(#\9) {
   max-width: none;
   padding-left: var(--space-s-o95p2n, 12px);
 }
 
-.awsui_utilities_1ca1i_wm2uf_202:not(#\9) {
+.awsui_utilities_1ca1i_1ep6t_202:not(#\9) {
   display: flex;
   flex-shrink: 0;
   flex-direction: row;
@@ -233,17 +233,17 @@ body[data-awsui-focus-visible=true] .awsui_identity_1ca1i_wm2uf_137 > .awsui_ide
   padding-left: var(--space-m-2wfcpy, 16px);
   height: 100%;
 }
-.awsui_medium_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106 > .awsui_utilities_1ca1i_wm2uf_202:not(#\9), .awsui_narrow_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106 > .awsui_utilities_1ca1i_wm2uf_202:not(#\9) {
+.awsui_medium_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106 > .awsui_utilities_1ca1i_1ep6t_202:not(#\9), .awsui_narrow_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106 > .awsui_utilities_1ca1i_1ep6t_202:not(#\9) {
   padding-left: 0;
 }
 
-.awsui_utility-wrapper_1ca1i_wm2uf_214:not(#\9) {
+.awsui_utility-wrapper_1ca1i_1ep6t_214:not(#\9) {
   display: flex;
   position: relative;
   flex-shrink: 0;
   align-items: center;
 }
-.awsui_utility-wrapper_1ca1i_wm2uf_214:not(#\9)::after {
+.awsui_utility-wrapper_1ca1i_1ep6t_214:not(#\9)::after {
   display: block;
   position: absolute;
   content: "";
@@ -253,86 +253,86 @@ body[data-awsui-focus-visible=true] .awsui_identity_1ca1i_wm2uf_137 > .awsui_ide
   bottom: var(--space-s-o95p2n, 12px);
   background: var(--color-border-divider-default-uqjcpn, #eaeded);
 }
-.awsui_utility-wrapper_1ca1i_wm2uf_214.awsui_utility-wrapper-last_1ca1i_wm2uf_230:not(#\9):not(.awsui_utility-type-button-primary-button_1ca1i_wm2uf_230) {
+.awsui_utility-wrapper_1ca1i_1ep6t_214.awsui_utility-wrapper-last_1ca1i_1ep6t_230:not(#\9):not(.awsui_utility-type-button-primary-button_1ca1i_1ep6t_230) {
   padding-right: 0;
 }
-.awsui_utility-wrapper_1ca1i_wm2uf_214.awsui_utility-wrapper-last_1ca1i_wm2uf_230:not(#\9):not(.awsui_utility-type-button-primary-button_1ca1i_wm2uf_230)::after {
+.awsui_utility-wrapper_1ca1i_1ep6t_214.awsui_utility-wrapper-last_1ca1i_1ep6t_230:not(#\9):not(.awsui_utility-type-button-primary-button_1ca1i_1ep6t_230)::after {
   display: none;
 }
-.awsui_medium_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106 > .awsui_utilities_1ca1i_wm2uf_202 > .awsui_utility-wrapper_1ca1i_wm2uf_214:not(#\9)::after, .awsui_narrow_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106 > .awsui_utilities_1ca1i_wm2uf_202 > .awsui_utility-wrapper_1ca1i_wm2uf_214:not(#\9)::after {
+.awsui_medium_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106 > .awsui_utilities_1ca1i_1ep6t_202 > .awsui_utility-wrapper_1ca1i_1ep6t_214:not(#\9)::after, .awsui_narrow_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106 > .awsui_utilities_1ca1i_1ep6t_202 > .awsui_utility-wrapper_1ca1i_1ep6t_214:not(#\9)::after {
   top: var(--space-xs-7veqkr, 8px);
   bottom: var(--space-xs-7veqkr, 8px);
 }
 
-.awsui_utility-wrapper-last_1ca1i_wm2uf_230:not(#\9) {
+.awsui_utility-wrapper-last_1ca1i_1ep6t_230:not(#\9) {
   margin-right: var(--space-s-o95p2n, 12px);
 }
-.awsui_utility-wrapper-last_1ca1i_wm2uf_230.awsui_utility-type-menu-dropdown_1ca1i_wm2uf_244:not(#\9) {
+.awsui_utility-wrapper-last_1ca1i_1ep6t_230.awsui_utility-type-menu-dropdown_1ca1i_1ep6t_244:not(#\9) {
   margin-right: 0;
 }
-.awsui_narrow_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106 > .awsui_utilities_1ca1i_wm2uf_202 > .awsui_utility-wrapper-last_1ca1i_wm2uf_230:not(#\9) {
+.awsui_narrow_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106 > .awsui_utilities_1ca1i_1ep6t_202 > .awsui_utility-wrapper-last_1ca1i_1ep6t_230:not(#\9) {
   margin-right: 0;
 }
-.awsui_narrow_1ca1i_wm2uf_116 > .awsui_padding-box_1ca1i_wm2uf_106 > .awsui_utilities_1ca1i_wm2uf_202 > .awsui_utility-wrapper-last_1ca1i_wm2uf_230.awsui_utility-type-button-primary-button_1ca1i_wm2uf_230:not(#\9) {
+.awsui_narrow_1ca1i_1ep6t_116 > .awsui_padding-box_1ca1i_1ep6t_106 > .awsui_utilities_1ca1i_1ep6t_202 > .awsui_utility-wrapper-last_1ca1i_1ep6t_230.awsui_utility-type-button-primary-button_1ca1i_1ep6t_230:not(#\9) {
   padding-right: var(--space-l-z6h7qi, 20px);
 }
 
-.awsui_utility-type-menu-dropdown_1ca1i_wm2uf_244:not(#\9) {
+.awsui_utility-type-menu-dropdown_1ca1i_1ep6t_244:not(#\9) {
   padding: 0 var(--space-s-o95p2n, 12px);
   align-items: stretch;
 }
 
-.awsui_utility-type-button-link_1ca1i_wm2uf_259:not(#\9),
-.awsui_utility-type-button-primary-button_1ca1i_wm2uf_230:not(#\9) {
+.awsui_utility-type-button-link_1ca1i_1ep6t_259:not(#\9),
+.awsui_utility-type-button-primary-button_1ca1i_1ep6t_230:not(#\9) {
   padding: 0 var(--space-m-2wfcpy, 16px);
 }
 
-.awsui_utility-type-button-primary-button_1ca1i_wm2uf_230:not(#\9) {
+.awsui_utility-type-button-primary-button_1ca1i_1ep6t_230:not(#\9) {
   left: -1px;
   border-left: 1px solid var(--color-background-container-content-xlzim4, #ffffff);
 }
-.awsui_utility-type-button-primary-button_1ca1i_wm2uf_230:not(#\9)::after {
+.awsui_utility-type-button-primary-button_1ca1i_1ep6t_230:not(#\9)::after {
   display: none;
 }
 
-.awsui_utility-link-icon_1ca1i_wm2uf_272:not(#\9) {
+.awsui_utility-link-icon_1ca1i_1ep6t_272:not(#\9) {
   margin-right: var(--space-xxs-xx079q, 4px);
 }
 
-.awsui_utility-button-external-icon_1ca1i_wm2uf_276:not(#\9) {
+.awsui_utility-button-external-icon_1ca1i_1ep6t_276:not(#\9) {
   display: inline-block;
 }
 
-.awsui_trigger_1ca1i_wm2uf_280:not(#\9) {
+.awsui_trigger_1ca1i_1ep6t_280:not(#\9) {
   /*used in test-utils*/
 }
 
-.awsui_rotate-up_1ca1i_wm2uf_284:not(#\9) {
+.awsui_rotate-up_1ca1i_1ep6t_284:not(#\9) {
   transform: rotate(-180deg);
   transition: transform var(--motion-duration-rotate-180-ur235g, 135ms) var(--motion-easing-rotate-180-eilno1, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-up_1ca1i_wm2uf_284:not(#\9) {
+  .awsui_rotate-up_1ca1i_1ep6t_284:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-up_1ca1i_wm2uf_284:not(#\9), .awsui-mode-entering .awsui_rotate-up_1ca1i_wm2uf_284:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-up_1ca1i_1ep6t_284:not(#\9), .awsui-mode-entering .awsui_rotate-up_1ca1i_1ep6t_284:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_rotate-down_1ca1i_wm2uf_299:not(#\9) {
+.awsui_rotate-down_1ca1i_1ep6t_299:not(#\9) {
   transform: rotate(0deg);
   transition: transform var(--motion-duration-rotate-180-ur235g, 135ms) var(--motion-easing-rotate-180-eilno1, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-down_1ca1i_wm2uf_299:not(#\9) {
+  .awsui_rotate-down_1ca1i_1ep6t_299:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-down_1ca1i_wm2uf_299:not(#\9), .awsui-mode-entering .awsui_rotate-down_1ca1i_wm2uf_299:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-down_1ca1i_1ep6t_299:not(#\9), .awsui-mode-entering .awsui_rotate-down_1ca1i_1ep6t_299:not(#\9) {
   animation: none;
   transition: none;
 }

package/lib/internal/template/top-navigation/1.0-beta/styles.selectors.js

@@ -2,30 +2,30 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "top-navigation": "awsui_top-navigation_1ca1i_wm2uf_93",
-  "padding-box": "awsui_padding-box_1ca1i_wm2uf_106",
-  "medium": "awsui_medium_1ca1i_wm2uf_116",
-  "narrow": "awsui_narrow_1ca1i_wm2uf_116",
-  "hidden": "awsui_hidden_1ca1i_wm2uf_124",
-  "\t": "awsui_\t_1ca1i_wm2uf_1",
-  "identity": "awsui_identity_1ca1i_wm2uf_137",
-  "identity-link": "awsui_identity-link_1ca1i_wm2uf_137",
-  "no-logo": "awsui_no-logo_1ca1i_wm2uf_154",
-  "logo": "awsui_logo_1ca1i_wm2uf_158",
-  "title": "awsui_title_1ca1i_wm2uf_169",
-  "inputs": "awsui_inputs_1ca1i_wm2uf_185",
-  "search": "awsui_search_1ca1i_wm2uf_192",
-  "search-expanded": "awsui_search-expanded_1ca1i_wm2uf_197",
-  "utilities": "awsui_utilities_1ca1i_wm2uf_202",
-  "utility-wrapper": "awsui_utility-wrapper_1ca1i_wm2uf_214",
-  "utility-wrapper-last": "awsui_utility-wrapper-last_1ca1i_wm2uf_230",
-  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_1ca1i_wm2uf_230",
-  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_1ca1i_wm2uf_244",
-  "utility-type-button-link": "awsui_utility-type-button-link_1ca1i_wm2uf_259",
-  "utility-link-icon": "awsui_utility-link-icon_1ca1i_wm2uf_272",
-  "utility-button-external-icon": "awsui_utility-button-external-icon_1ca1i_wm2uf_276",
-  "trigger": "awsui_trigger_1ca1i_wm2uf_280",
-  "rotate-up": "awsui_rotate-up_1ca1i_wm2uf_284",
-  "rotate-down": "awsui_rotate-down_1ca1i_wm2uf_299"
+  "top-navigation": "awsui_top-navigation_1ca1i_1ep6t_93",
+  "padding-box": "awsui_padding-box_1ca1i_1ep6t_106",
+  "medium": "awsui_medium_1ca1i_1ep6t_116",
+  "narrow": "awsui_narrow_1ca1i_1ep6t_116",
+  "hidden": "awsui_hidden_1ca1i_1ep6t_124",
+  "\t": "awsui_\t_1ca1i_1ep6t_1",
+  "identity": "awsui_identity_1ca1i_1ep6t_137",
+  "identity-link": "awsui_identity-link_1ca1i_1ep6t_137",
+  "no-logo": "awsui_no-logo_1ca1i_1ep6t_154",
+  "logo": "awsui_logo_1ca1i_1ep6t_158",
+  "title": "awsui_title_1ca1i_1ep6t_169",
+  "inputs": "awsui_inputs_1ca1i_1ep6t_185",
+  "search": "awsui_search_1ca1i_1ep6t_192",
+  "search-expanded": "awsui_search-expanded_1ca1i_1ep6t_197",
+  "utilities": "awsui_utilities_1ca1i_1ep6t_202",
+  "utility-wrapper": "awsui_utility-wrapper_1ca1i_1ep6t_214",
+  "utility-wrapper-last": "awsui_utility-wrapper-last_1ca1i_1ep6t_230",
+  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_1ca1i_1ep6t_230",
+  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_1ca1i_1ep6t_244",
+  "utility-type-button-link": "awsui_utility-type-button-link_1ca1i_1ep6t_259",
+  "utility-link-icon": "awsui_utility-link-icon_1ca1i_1ep6t_272",
+  "utility-button-external-icon": "awsui_utility-button-external-icon_1ca1i_1ep6t_276",
+  "trigger": "awsui_trigger_1ca1i_1ep6t_280",
+  "rotate-up": "awsui_rotate-up_1ca1i_1ep6t_284",
+  "rotate-down": "awsui_rotate-down_1ca1i_1ep6t_299"
 };
   

package/lib/internal/template/top-navigation/1.0-beta/use-top-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-top-navigation.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/1.0-beta/use-top-navigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,MAAM,WAAW,sBAAsB;IACrC,iBAAiB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,eAAe;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,8BAA8B;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,yBAAyB,EAAE,MAAM,EAAE,CAAC;IACpC,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEtC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,SAAS,GAAG,KAAK,GAAG,GAAG,CAAC;IACpC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAKD,wBAAgB,gBAAgB,CAAC,EAC/B,iBAAiB,EAAE,OAAO,EAC1B,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE,sBAAsB,GAAG,gBAAgB,CA0F3C;AAUD;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,EACpD,aAAa,EAAE,OAAO,EACtB,YAAY,EAAE,OAAO,GACpB,aAAa,CAAC,eAAe,CAAC,CA+BhC;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,aAAa,CAAC,eAAe,CAAC,EAC9C,KAAK,EAAE,8BAA8B,GACpC,eAAe,CA6BjB"}
+{"version":3,"file":"use-top-navigation.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/1.0-beta/use-top-navigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,MAAM,WAAW,sBAAsB;IACrC,iBAAiB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,eAAe;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,8BAA8B;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,yBAAyB,EAAE,MAAM,EAAE,CAAC;IACpC,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEtC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,SAAS,GAAG,KAAK,GAAG,GAAG,CAAC;IACpC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAKD,wBAAgB,gBAAgB,CAAC,EAC/B,iBAAiB,EAAE,OAAO,EAC1B,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE,sBAAsB,GAAG,gBAAgB,CA0F3C;AAUD;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,EACpD,aAAa,EAAE,OAAO,EACtB,YAAY,EAAE,OAAO,GACpB,aAAa,CAAC,eAAe,CAAC,CA+BhC;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,aAAa,CAAC,eAAe,CAAC,EAC9C,KAAK,EAAE,8BAA8B,GACpC,eAAe,CA6BjB"}

package/lib/internal/template/top-navigation/1.0-beta/use-top-navigation.js

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
-import { useContainerBreakpoints, useContainerQuery } from '../../internal/hooks/container-queries';
+import { useContainerBreakpoints } from '../../internal/hooks/container-queries';
 import styles from './styles.css.js';
+import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 // A small buffer to make calculations more lenient against browser lag or padding adjustments.
 const RESPONSIVENESS_BUFFER = 20;
 export function useTopNavigation({ __internalRootRef: mainRef, identity, search, utilities, }) {

package/lib/internal/template/top-navigation/1.0-beta/use-top-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-top-navigation.js","sourceRoot":"lib/default/","sources":["top-navigation/1.0-beta/use-top-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\n\nimport { useContainerBreakpoints, useContainerQuery } from '../../internal/hooks/container-queries';\nimport { TopNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface UseTopNavigationParams {\n  __internalRootRef?: React.MutableRefObject<HTMLElement> | null;\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\nexport interface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\nexport interface UseTopNavigation {\n  ref: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({\n  __internalRootRef: mainRef,\n  identity,\n  search,\n  utilities,\n}: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  //\n  // TODO: Some of these values can be memoized to improve perf.\n  const [responsiveState, containerQueryRef] = useContainerQuery<ResponsiveState>(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      return responsiveStates[0];\n    }\n\n    const sizeConfiguration = {\n      hasSearch: !!search,\n\n      // Get widths and paddings from the visible top navigation\n      availableWidth: getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!),\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft\n      ),\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n\n    return determineBestResponsiveState(responsiveStates, sizeConfiguration);\n  }, [mainRef, search, responsiveStates]);\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && breakpoint !== 's' && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedRef = useMergeRefs(...(mainRef ? [mainRef] : []), containerQueryRef, breakpointRef);\n\n  return {\n    ref: mergedRef,\n    virtualRef: virtualRef,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return parseFloat(style.width) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}
+{"version":3,"file":"use-top-navigation.js","sourceRoot":"lib/default/","sources":["top-navigation/1.0-beta/use-top-navigation.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAuCzE,+FAA+F;AAC/F,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAEjC,MAAM,UAAU,gBAAgB,CAAC,EAC/B,iBAAiB,EAAE,OAAO,EAC1B,QAAQ,EACR,MAAM,EACN,SAAS,GACc;IACvB,uBAAuB;IACvB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,uBAAuB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;IAE1E,uBAAuB;IACvB,4EAA4E;IAC5E,8EAA8E;IAC9E,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC;IAC3B,MAAM,gBAAgB,GAAG,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;IACzE,MAAM,gBAAgB,GAAG,OAAO,CAAiC,GAAG,EAAE;QACpE,OAAO,2BAA2B,CAAC,SAAS,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;IAC7E,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE7C,kFAAkF;IAClF,qFAAqF;IACrF,wFAAwF;IACxF,uFAAuF;IACvF,uDAAuD;IACvD,EAAE;IACF,qFAAqF;IACrF,mFAAmF;IACnF,sDAAsD;IACtD,EAAE;IACF,8DAA8D;IAC9D,MAAM,CAAC,eAAe,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,CAAkB,GAAG,EAAE;;QACnF,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YAC5C,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC;SAC5B;QAED,MAAM,iBAAiB,GAAG;YACxB,SAAS,EAAE,CAAC,CAAC,MAAM;YAEnB,0DAA0D;YAC1D,cAAc,EAAE,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,aAAa,CAAC,EAAE,CAAE,CAAC;YAC/F,oBAAoB,EAAE,UAAU,CAC9B,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,CAAE,CAAC,CAAC,WAAW,CACxF;YAED,4CAA4C;YAC5C,iBAAiB,EAAE,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACzG,UAAU,EAAE,MAAA,MAAA,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC,0CAAE,qBAAqB,GAAG,KAAK,mCAAI,CAAC;YACpG,eAAe,EAAE,MAAA,MAAA,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,0CAAE,qBAAqB,GAAG,KAAK,mCAAI,CAAC;YAC1G,kBAAkB,EAAE,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,iCAAiC,CAAE,CAAC,qBAAqB,EAAE;iBAC7G,KAAK;YACR,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK;iBAC1C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CAAC;iBACxE,GAAG,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YACnE,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK;iBAC7C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC;iBACvE,GAAG,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YACnE,uBAAuB,EAAE,UAAU,CAAC,OAAO;iBACxC,aAAa,CAAC,uCAAuC,CAAE;iBACvD,qBAAqB,EAAE,CAAC,KAAK;SACjC,CAAC;QAEF,OAAO,4BAA4B,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAExC,yCAAyC;IACzC,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAG,CAAC,iBAAiB,IAAI,UAAU,KAAK,GAAG,IAAI,SAAS,KAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,UAAU,CAAA,CAAC;IAE9G,sEAAsE;IACtE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,UAAU,CAAA,EAAE;YAChC,kBAAkB,CAAC,IAAI,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,uEAAuE;IACvE,2EAA2E;IAC3E,uEAAuE;IACvE,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,gBAAgB,EAAE;YACpB,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,0CAAE,aAAa,CAAmB,IAAI,MAAM,CAAC,MAAM,QAAQ,CAAC,0CAAE,KAAK,EAAE,CAAC;SACvF;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhC,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,iBAAiB,EAAE,aAAa,CAAC,CAAC;IAEhG,OAAO;QACL,GAAG,EAAE,SAAS;QACd,UAAU,EAAE,UAAU;QACtB,eAAe,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,gBAAgB,CAAC,CAAC,CAAC;QACvD,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,SAAS;QACnC,gBAAgB,EAAE,CAAC,CAAC,gBAAgB;QACpC,oBAAoB,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,iBAAiB,CAAC;KACxF,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,kBAAkB,CAAC,OAAgB;IAC1C,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,OAAO,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;AAClG,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,2BAA2B,CACzC,SAAoD,EACpD,aAAsB,EACtB,YAAqB;IAErB,MAAM,MAAM,GAAsB,CAAC,EAAE,CAAC,CAAC;IACvC,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAC3C,MAAM,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC;KACxC;IACD,IAAI,aAAa,EAAE;QACjB,MAAM,CAAC,IAAI,CAAC;YACV,eAAe,EAAE,IAAI;YACrB,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;KACJ;IACD,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE;YACxC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACvB,MAAM,CAAC,IAAI,CAAC;gBACV,eAAe,EAAE,IAAI;gBACrB,UAAU,EAAE,aAAa,IAAI,SAAS;gBACtC,aAAa,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS;aAC9E,CAAC,CAAC;SACJ;KACF;IACD,IAAI,YAAY,EAAE;QAChB,MAAM,CAAC,IAAI,CAAC;YACV,eAAe,EAAE,IAAI;YACrB,UAAU,EAAE,aAAa,IAAI,SAAS;YACtC,aAAa,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS;YAC7E,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;KACJ;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,4BAA4B,CAC1C,cAA8C,EAC9C,KAAqC;IAErC,MAAM,EACJ,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,sBAAsB,EACtB,yBAAyB,EACzB,uBAAuB,GACxB,GAAG,KAAK,CAAC;IACV,wEAAwE;IACxE,KAAK,MAAM,KAAK,IAAI,cAAc,EAAE;QAClC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9F,MAAM,cAAc,GAAW,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,sBAAsB,CAAC;aACxG,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;aACpF,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1C,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3E,MAAM,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAC3F,MAAM,kBAAkB,GAAG,aAAa,GAAG,WAAW,GAAG,oBAAoB,GAAG,cAAc,GAAG,gBAAgB,CAAC;QAClH,IAAI,kBAAkB,IAAI,cAAc,GAAG,qBAAqB,EAAE;YAChE,OAAO,KAAK,CAAC;SACd;KACF;IAED,wDAAwD;IACxD,OAAO,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACnD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\n\nimport { useContainerBreakpoints } from '../../internal/hooks/container-queries';\nimport { TopNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nexport interface UseTopNavigationParams {\n  __internalRootRef?: React.MutableRefObject<HTMLElement> | null;\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\nexport interface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\nexport interface UseTopNavigation {\n  ref: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({\n  __internalRootRef: mainRef,\n  identity,\n  search,\n  utilities,\n}: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  //\n  // TODO: Some of these values can be memoized to improve perf.\n  const [responsiveState, containerQueryRef] = useContainerQuery<ResponsiveState>(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      return responsiveStates[0];\n    }\n\n    const sizeConfiguration = {\n      hasSearch: !!search,\n\n      // Get widths and paddings from the visible top navigation\n      availableWidth: getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!),\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft\n      ),\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n\n    return determineBestResponsiveState(responsiveStates, sizeConfiguration);\n  }, [mainRef, search, responsiveStates]);\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && breakpoint !== 's' && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedRef = useMergeRefs(...(mainRef ? [mainRef] : []), containerQueryRef, breakpointRef);\n\n  return {\n    ref: mergedRef,\n    virtualRef: virtualRef,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return parseFloat(style.width) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}