@cloudscape-design/components 3.0.0

package/top-navigation/styles.scoped.css

@@ -0,0 +1,598 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_icon_k5dlb_c5g62_93:not(#\9) {
+  transition: transform 135ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: transform var(--motion-duration-rotate-90-ux18sr, 135ms) var(--motion-easing-rotate-90-eoew89, cubic-bezier(0.165, 0.84, 0.44, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_icon_k5dlb_c5g62_93:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_icon_k5dlb_c5g62_93:not(#\9), .awsui-mode-entering .awsui_icon_k5dlb_c5g62_93:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_top-navigation_k5dlb_c5g62_111:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  background: #ffffff;
+  background: var(--color-background-container-content-i8i4a0, #ffffff);
+}
+.awsui_top-navigation_k5dlb_c5g62_111 > .awsui_padding-box_k5dlb_c5g62_122:not(#\9) {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  height: calc(40px + 16px);
+  height: calc(var(--space-xxxl-bo9z7f, 40px) + var(--space-scaled-m-pv0fmt, 16px));
+  padding-left: 32px;
+  padding-left: var(--space-xxl-2nvmf1, 32px);
+}
+.awsui_top-navigation_k5dlb_c5g62_111.awsui_medium_k5dlb_c5g62_132 > .awsui_padding-box_k5dlb_c5g62_122:not(#\9), .awsui_top-navigation_k5dlb_c5g62_111.awsui_narrow_k5dlb_c5g62_132 > .awsui_padding-box_k5dlb_c5g62_122:not(#\9) {
+  padding-left: 20px;
+  padding-left: var(--space-l-4vl6xu, 20px);
+}
+.awsui_top-navigation_k5dlb_c5g62_111.awsui_medium_k5dlb_c5g62_132 > .awsui_padding-box_k5dlb_c5g62_122:not(#\9) {
+  height: calc(40px + 8px);
+  height: calc(var(--space-xxxl-bo9z7f, 40px) + var(--space-scaled-xs-6859qs, 8px));
+  padding-right: 0;
+}
+.awsui_top-navigation_k5dlb_c5g62_111.awsui_narrow_k5dlb_c5g62_132 > .awsui_padding-box_k5dlb_c5g62_122:not(#\9) {
+  height: 40px;
+  height: var(--space-xxxl-bo9z7f, 40px);
+}
+
+.awsui_virtual_k5dlb_c5g62_143:not(#\9) {
+  width: 9000px;
+}
+
+.awsui_hidden_k5dlb_c5g62_147:not(#\9) {
+  position: absolute !important;
+  top: -9999px !important;
+  left: -9999px !important;
+  visibility: hidden;
+}
+
+/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
+.awsui_hidden_k5dlb_c5g62_147 *:not(#\9):not(#awsui_\9 _k5dlb_c5g62_1) {
+  visibility: hidden;
+}
+
+.awsui_identity_k5dlb_c5g62_159:not(#\9) {
+  min-width: 0;
+}
+.awsui_identity_k5dlb_c5g62_159 > .awsui_identity-link_k5dlb_c5g62_162:not(#\9) {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #000716;
+  color: var(--color-text-top-navigation-title-oypxe3, #000716);
+}
+.awsui_identity_k5dlb_c5g62_159 > .awsui_identity-link_k5dlb_c5g62_162:not(#\9):hover {
+  color: #0972d3;
+  color: var(--color-text-accent-s1eqko, #0972d3);
+}
+.awsui_identity_k5dlb_c5g62_159 > .awsui_identity-link_k5dlb_c5g62_162[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: thin dotted;
+  outline: 0;
+  outline: var(--border-link-focus-ring-outline-k2wccv, 0);
+  outline-offset: 2px;
+  outline-color: #0972d3;
+  outline-color: var(--color-border-item-focused-ap3b6s, #0972d3);
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-nv4ahb, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_identity_k5dlb_c5g62_159.awsui_no-logo_k5dlb_c5g62_179:not(#\9) {
+  min-width: 100px;
+}
+
+.awsui_logo_k5dlb_c5g62_183:not(#\9) {
+  display: block;
+  max-height: 32px;
+  max-height: var(--space-xxl-2nvmf1, 32px);
+  margin-right: 12px;
+  margin-right: var(--space-s-hv8c1d, 12px);
+  width: auto;
+  flex-shrink: 0;
+  min-width: 10px;
+}
+.awsui_logo_k5dlb_c5g62_183.awsui_narrow_k5dlb_c5g62_132:not(#\9) {
+  max-height: 24px;
+  max-height: var(--space-xl-a39hup, 24px);
+}
+
+.awsui_title_k5dlb_c5g62_195:not(#\9) {
+  font-size: 20px;
+  font-size: var(--font-heading-m-size-6e3jmg, 20px);
+  line-height: 24px;
+  line-height: var(--font-heading-m-line-height-u3t54f, 24px);
+  letter-spacing: -0.01em;
+  letter-spacing: var(--font-heading-m-letter-spacing-r00pg3, -0.01em);
+  font-weight: 800;
+  font-weight: var(--font-heading-m-weight-hi5n0j, 800);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.awsui_no-logo_k5dlb_c5g62_179 > .awsui_identity-link_k5dlb_c5g62_162 > .awsui_title_k5dlb_c5g62_195:not(#\9) {
+  font-weight: 700;
+}
+
+.awsui_inputs_k5dlb_c5g62_208:not(#\9) {
+  display: flex;
+  flex: 1;
+  padding: 0 16px;
+  padding: 0 var(--space-m-17eucw, 16px);
+  justify-content: center;
+}
+
+.awsui_search_k5dlb_c5g62_215:not(#\9) {
+  width: 100%;
+  max-width: 340px;
+}
+.awsui_search-expanded_k5dlb_c5g62_219:not(#\9) {
+  max-width: none;
+}
+
+.awsui_utilities_k5dlb_c5g62_223:not(#\9) {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100%;
+}
+.awsui_medium_k5dlb_c5g62_132 > .awsui_padding-box_k5dlb_c5g62_122 > .awsui_utilities_k5dlb_c5g62_223:not(#\9), .awsui_narrow_k5dlb_c5g62_132 > .awsui_padding-box_k5dlb_c5g62_122 > .awsui_utilities_k5dlb_c5g62_223:not(#\9) {
+  padding-left: 0;
+}
+
+.awsui_utility-wrapper_k5dlb_c5g62_234:not(#\9) {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0 16px;
+  padding: 0 var(--space-m-17eucw, 16px);
+}
+.awsui_utility-wrapper_k5dlb_c5g62_234:not(#\9)::after {
+  display: block;
+  position: absolute;
+  content: "";
+  width: 1px;
+  right: 0;
+  top: 12px;
+  top: var(--space-s-hv8c1d, 12px);
+  bottom: 12px;
+  bottom: var(--space-s-hv8c1d, 12px);
+  background: #e9ebed;
+  background: var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+.awsui_utility-wrapper_k5dlb_c5g62_234:not(#\9):last-of-type::after {
+  display: none;
+}
+
+.awsui_utility-type-button-link_k5dlb_c5g62_255:not(#\9) {
+  padding: 0 20px;
+  padding: 0 var(--space-l-4vl6xu, 20px);
+}
+
+.awsui_utility-type-menu-dropdown_k5dlb_c5g62_259:not(#\9) {
+  padding: 0 12px;
+  padding: 0 var(--space-s-hv8c1d, 12px);
+  align-items: stretch;
+}
+.awsui_utility-type-menu-dropdown_k5dlb_c5g62_259:not(#\9):not(.awsui_narrow_k5dlb_c5g62_132):last-of-type, .awsui_utility-type-menu-dropdown_k5dlb_c5g62_259:not(#\9):not(.awsui_medium_k5dlb_c5g62_132):last-of-type {
+  padding-right: 0;
+}
+
+.awsui_utility-type-button-primary-button_k5dlb_c5g62_267:not(#\9) {
+  left: -1px;
+  border-left: 1px solid #ffffff;
+  border-left: 1px solid var(--color-background-container-content-i8i4a0, #ffffff);
+}
+.awsui_utility-type-button-primary-button_k5dlb_c5g62_267:not(#\9)::after {
+  display: none;
+}
+
+.awsui_utility-link-icon_k5dlb_c5g62_275:not(#\9) {
+  margin-left: 4px;
+  margin-left: var(--space-xxs-ynfts5, 4px);
+}
+
+.awsui_utility-button-external-icon_k5dlb_c5g62_279:not(#\9) {
+  display: inline-block;
+}
+
+.awsui_offset-right-none_k5dlb_c5g62_283:not(#\9) {
+  margin-right: 0;
+}
+
+.awsui_offset-right-l_k5dlb_c5g62_287:not(#\9) {
+  margin-right: 4px;
+  margin-right: var(--space-xxs-ynfts5, 4px);
+}
+
+.awsui_offset-right-xxl_k5dlb_c5g62_291:not(#\9) {
+  margin-right: 16px;
+  margin-right: var(--space-m-17eucw, 16px);
+}
+
+/* Overflow Menu */
+.awsui_overflow-menu-drawer_k5dlb_c5g62_296:not(#\9) {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 1001;
+}
+
+.awsui_overflow-menu_k5dlb_c5g62_296:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  background: #ffffff;
+  background: var(--color-background-container-content-i8i4a0, #ffffff);
+  height: 100%;
+}
+
+.awsui_overflow-menu-header_k5dlb_c5g62_316:not(#\9) {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  min-height: var(--font-panel-header-line-height-x2226j, 24px);
+  padding: 16px;
+  padding: var(--space-scaled-m-pv0fmt, 16px);
+  border-bottom: 2px solid #e9ebed;
+  border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+.awsui_overflow-menu-header-text_k5dlb_c5g62_323:not(#\9) {
+  font-size: 20px;
+  font-size: var(--font-panel-header-size-0vdgjc, 20px);
+  line-height: 24px;
+  line-height: var(--font-panel-header-line-height-x2226j, 24px);
+  font-weight: 800;
+  font-weight: var(--font-heading-l-weight-xm7ks9, 800);
+  color: #000716;
+  color: var(--color-text-heading-default-jopz0f, #000716);
+  flex: 1;
+  margin: 0;
+  text-align: center;
+}
+.awsui_overflow-menu-header-text--secondary_k5dlb_c5g62_332:not(#\9) {
+  font-size: 14px;
+  font-size: var(--font-header-h2-description-size-pqrrui, 14px);
+  line-height: 22px;
+  line-height: var(--font-header-h2-description-line-height-gjrb86, 22px);
+  font-weight: 400;
+}
+
+.awsui_overflow-menu-header-text--title_k5dlb_c5g62_338:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_overflow-menu-back-button_k5dlb_c5g62_342:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_overflow-menu-dismiss-button_k5dlb_c5g62_346:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_overflow-menu-control_k5dlb_c5g62_350:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  display: flex;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: none;
+}
+.awsui_overflow-menu-list-item-utility_k5dlb_c5g62_365 > .awsui_overflow-menu-control_k5dlb_c5g62_350:not(#\9) {
+  padding: 16px;
+  padding: var(--space-scaled-m-pv0fmt, 16px);
+}
+.awsui_overflow-menu-control_k5dlb_c5g62_350:not(#\9):hover {
+  color: #0972d3;
+  color: var(--color-text-accent-s1eqko, #0972d3);
+  cursor: pointer;
+}
+.awsui_overflow-menu-control-link_k5dlb_c5g62_372:not(#\9) {
+  text-decoration: none;
+}
+.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_c5g62_375:not(#\9) {
+  color: #414d5c;
+  color: var(--color-text-dropdown-group-label-eaqlcl, #414d5c);
+  font-weight: bold;
+}
+.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_c5g62_375:not(#\9):hover {
+  color: #0972d3;
+  color: var(--color-text-accent-s1eqko, #0972d3);
+}
+.awsui_overflow-menu-control_k5dlb_c5g62_350[data-awsui-focus-visible=true]:not(#\9):focus {
+  position: relative;
+}
+.awsui_overflow-menu-control_k5dlb_c5g62_350[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(4px - 1px);
+  outline-offset: calc(var(--space-button-focus-outline-gutter-4vaedu, 4px) - 1px);
+}
+.awsui_overflow-menu-control_k5dlb_c5g62_350[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * 4px);
+  left: calc(-1 * var(--space-button-focus-outline-gutter-4vaedu, 4px));
+  top: calc(-1 * 4px);
+  top: calc(-1 * var(--space-button-focus-outline-gutter-4vaedu, 4px));
+  width: calc(100% + 2 * 4px);
+  width: calc(100% + 2 * var(--space-button-focus-outline-gutter-4vaedu, 4px));
+  height: calc(100% + 2 * 4px);
+  height: calc(100% + 2 * var(--space-button-focus-outline-gutter-4vaedu, 4px));
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+
+.awsui_overflow-menu-list_k5dlb_c5g62_365:not(#\9) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.awsui_overflow-menu-list-submenu_k5dlb_c5g62_406:not(#\9) {
+  margin: 4px 0;
+  margin: var(--space-scaled-xxs-95dhkm, 4px) 0;
+}
+
+.awsui_overflow-menu-list-item_k5dlb_c5g62_365:not(#\9) {
+  box-sizing: border-box;
+  letter-spacing: 0.005em;
+  letter-spacing: var(--font-button-letter-spacing-8y5poz, 0.005em);
+}
+.awsui_overflow-menu-list-item-icon_k5dlb_c5g62_414:not(#\9) {
+  margin-right: 4px;
+  margin-right: var(--space-xxs-ynfts5, 4px);
+}
+.awsui_overflow-menu-list-item-text_k5dlb_c5g62_417:not(#\9) {
+  flex: 1;
+}
+.awsui_overflow-menu-list-item-utility_k5dlb_c5g62_365:not(#\9) {
+  font-weight: 800;
+  font-weight: var(--font-button-weight-7rj5fx, 800);
+  border-bottom: 2px solid #e9ebed;
+  border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+.awsui_overflow-menu-list-item-submenu_k5dlb_c5g62_424:not(#\9) {
+  border-top: 2px solid transparent;
+  border-top: var(--border-divider-section-width-4wm2it, 2px) solid transparent;
+  border-bottom: 2px solid transparent;
+  border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid transparent;
+  padding: 4px 20px;
+  padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-scaled-l-t03y3z, 20px);
+}
+.awsui_overflow-menu-list-item-dropdown-menu_k5dlb_c5g62_429:not(#\9) {
+  padding: 4px 12px;
+  padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-scaled-s-cu1hzn, 12px);
+}
+.awsui_overflow-menu-list-item-expandable_k5dlb_c5g62_432:not(#\9) {
+  border-top-color: #e9ebed;
+  border-top-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
+  border-bottom-color: #e9ebed;
+  border-bottom-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+
+.awsui_icon_k5dlb_c5g62_93:not(#\9) {
+  transform: rotate(-180deg);
+}
+.awsui_icon_k5dlb_c5g62_93.awsui_expanded_k5dlb_c5g62_440:not(#\9) {
+  transform: rotate(0deg);
+}

package/top-navigation/styles.selectors.js

@@ -0,0 +1,53 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "icon": "awsui_icon_k5dlb_c5g62_93",
+  "top-navigation": "awsui_top-navigation_k5dlb_c5g62_111",
+  "padding-box": "awsui_padding-box_k5dlb_c5g62_122",
+  "medium": "awsui_medium_k5dlb_c5g62_132",
+  "narrow": "awsui_narrow_k5dlb_c5g62_132",
+  "virtual": "awsui_virtual_k5dlb_c5g62_143",
+  "hidden": "awsui_hidden_k5dlb_c5g62_147",
+  "\t": "awsui_\t_k5dlb_c5g62_1",
+  "identity": "awsui_identity_k5dlb_c5g62_159",
+  "identity-link": "awsui_identity-link_k5dlb_c5g62_162",
+  "no-logo": "awsui_no-logo_k5dlb_c5g62_179",
+  "logo": "awsui_logo_k5dlb_c5g62_183",
+  "title": "awsui_title_k5dlb_c5g62_195",
+  "inputs": "awsui_inputs_k5dlb_c5g62_208",
+  "search": "awsui_search_k5dlb_c5g62_215",
+  "search-expanded": "awsui_search-expanded_k5dlb_c5g62_219",
+  "utilities": "awsui_utilities_k5dlb_c5g62_223",
+  "utility-wrapper": "awsui_utility-wrapper_k5dlb_c5g62_234",
+  "utility-type-button-link": "awsui_utility-type-button-link_k5dlb_c5g62_255",
+  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_k5dlb_c5g62_259",
+  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_k5dlb_c5g62_267",
+  "utility-link-icon": "awsui_utility-link-icon_k5dlb_c5g62_275",
+  "utility-button-external-icon": "awsui_utility-button-external-icon_k5dlb_c5g62_279",
+  "offset-right-none": "awsui_offset-right-none_k5dlb_c5g62_283",
+  "offset-right-l": "awsui_offset-right-l_k5dlb_c5g62_287",
+  "offset-right-xxl": "awsui_offset-right-xxl_k5dlb_c5g62_291",
+  "overflow-menu-drawer": "awsui_overflow-menu-drawer_k5dlb_c5g62_296",
+  "overflow-menu": "awsui_overflow-menu_k5dlb_c5g62_296",
+  "overflow-menu-header": "awsui_overflow-menu-header_k5dlb_c5g62_316",
+  "overflow-menu-header-text": "awsui_overflow-menu-header-text_k5dlb_c5g62_323",
+  "overflow-menu-header-text--secondary": "awsui_overflow-menu-header-text--secondary_k5dlb_c5g62_332",
+  "overflow-menu-header-text--title": "awsui_overflow-menu-header-text--title_k5dlb_c5g62_338",
+  "overflow-menu-back-button": "awsui_overflow-menu-back-button_k5dlb_c5g62_342",
+  "overflow-menu-dismiss-button": "awsui_overflow-menu-dismiss-button_k5dlb_c5g62_346",
+  "overflow-menu-control": "awsui_overflow-menu-control_k5dlb_c5g62_350",
+  "overflow-menu-list-item-utility": "awsui_overflow-menu-list-item-utility_k5dlb_c5g62_365",
+  "overflow-menu-control-link": "awsui_overflow-menu-control-link_k5dlb_c5g62_372",
+  "overflow-menu-control-expandable-menu-trigger": "awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_c5g62_375",
+  "overflow-menu-list": "awsui_overflow-menu-list_k5dlb_c5g62_365",
+  "overflow-menu-list-submenu": "awsui_overflow-menu-list-submenu_k5dlb_c5g62_406",
+  "overflow-menu-list-item": "awsui_overflow-menu-list-item_k5dlb_c5g62_365",
+  "overflow-menu-list-item-icon": "awsui_overflow-menu-list-item-icon_k5dlb_c5g62_414",
+  "overflow-menu-list-item-text": "awsui_overflow-menu-list-item-text_k5dlb_c5g62_417",
+  "overflow-menu-list-item-submenu": "awsui_overflow-menu-list-item-submenu_k5dlb_c5g62_424",
+  "overflow-menu-list-item-dropdown-menu": "awsui_overflow-menu-list-item-dropdown-menu_k5dlb_c5g62_429",
+  "overflow-menu-list-item-expandable": "awsui_overflow-menu-list-item-expandable_k5dlb_c5g62_432",
+  "expanded": "awsui_expanded_k5dlb_c5g62_440"
+};
+  

package/top-navigation/use-top-navigation.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { TopNavigationProps } from './interfaces';
+export interface UseTopNavigationParams {
+    identity: TopNavigationProps['identity'];
+    search: TopNavigationProps['search'];
+    utilities: NonNullable<TopNavigationProps['utilities']>;
+}
+export interface ResponsiveState {
+    hideUtilityText?: boolean;
+    hideSearch?: boolean;
+    hideUtilities?: number[];
+    hideTitle?: boolean;
+}
+export interface TopNavigationSizeConfiguration {
+    hasSearch: boolean;
+    availableWidth: number;
+    utilitiesLeftPadding: number;
+    fullIdentityWidth: number;
+    titleWidth: number;
+    searchSlotWidth: number;
+    searchUtilityWidth: number;
+    utilityWithLabelWidths: number[];
+    utilityWithoutLabelWidths: number[];
+    menuTriggerUtilityWidth: number;
+}
+export interface UseTopNavigation {
+    mainRef: React.Ref<HTMLDivElement>;
+    virtualRef: React.Ref<HTMLDivElement>;
+    responsiveState: ResponsiveState;
+    breakpoint: 'default' | 'xxs' | 's';
+    isSearchExpanded: boolean;
+    onSearchUtilityClick: () => void;
+}
+export declare function useTopNavigation({ identity, search, utilities }: UseTopNavigationParams): UseTopNavigation;
+/**
+ * Generates the series of responsive steps that can be performed on the header in order.
+ */
+export declare function generateResponsiveStateKeys(utilities: ReadonlyArray<TopNavigationProps.Utility>, canHideSearch: boolean, canHideTitle: boolean): ReadonlyArray<ResponsiveState>;
+/**
+ * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states
+ * and the current sizes of all elements inside the navigation bar.
+ */
+export declare function determineBestResponsiveState(possibleStates: ReadonlyArray<ResponsiveState>, sizes: TopNavigationSizeConfiguration): ResponsiveState;
+//# sourceMappingURL=use-top-navigation.d.ts.map

package/top-navigation/use-top-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-top-navigation.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/use-top-navigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,MAAM,WAAW,sBAAsB;IACrC,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,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,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,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,sBAAsB,GAAG,gBAAgB,CA8G1G;AAYD;;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"}