@cloudscape-design/components-themeable 3.0.1126 → 3.0.1128

package/lib/internal/template/link/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* 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 */
-.awsui_link_4c84z_ndqw8_145:not(#\9) {
+.awsui_link_4c84z_1i06g_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -174,10 +174,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   display: inline;
   white-space: inherit;
-  --awsui-style-focus-ring-box-shadow-vl73au: 0 0 0 var(--awsui-style-focus-ring-border-width-vl73au, var(--border-link-focus-ring-shadow-spread-woh62o, 0px)) var(--awsui-style-focus-ring-border-color-vl73au, var(--color-border-item-focused-r5f6xl, #0073bb));
+  --awsui-style-focus-ring-box-shadow-b75yp7: 0 0 0 var(--awsui-style-focus-ring-border-width-b75yp7, var(--border-link-focus-ring-shadow-spread-woh62o, 0px)) var(--awsui-style-focus-ring-border-color-b75yp7, var(--color-border-item-focused-r5f6xl, #0073bb));
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
-  color: var(--awsui-style-color-default-vl73au, var(--color-text-link-default-x6cnv5, #0073bb));
+  color: var(--awsui-style-color-default-b75yp7, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: none;
@@ -188,33 +188,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_link_4c84z_ndqw8_145:not(#\9) {
+  .awsui_link_4c84z_1i06g_145:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_link_4c84z_ndqw8_145:not(#\9), .awsui-mode-entering .awsui_link_4c84z_ndqw8_145:not(#\9) {
+.awsui-motion-disabled .awsui_link_4c84z_1i06g_145:not(#\9), .awsui-mode-entering .awsui_link_4c84z_1i06g_145:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_link_4c84z_ndqw8_145:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+  color: var(--awsui-style-color-hover-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145:not(#\9):focus {
+.awsui_link_4c84z_1i06g_145:not(#\9):focus {
   outline: none;
 }
-.awsui_link_4c84z_ndqw8_145:not(#\9):active {
-  color: var(--awsui-style-color-active-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+.awsui_link_4c84z_1i06g_145:not(#\9):active {
+  color: var(--awsui-style-color-active-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145:not(#\9):active, .awsui_link_4c84z_ndqw8_145:not(#\9):focus, .awsui_link_4c84z_ndqw8_145:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145:not(#\9):active, .awsui_link_4c84z_1i06g_145:not(#\9):focus, .awsui_link_4c84z_1i06g_145:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9) {
   -webkit-font-smoothing: inherit;
   -moz-osx-font-smoothing: inherit;
-  color: var(--awsui-style-color-default-vl73au, var(--color-text-link-default-x6cnv5, #0073bb));
+  color: var(--awsui-style-color-default-b75yp7, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: none;
@@ -225,31 +225,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9) {
+  .awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9), .awsui-mode-entering .awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9) {
+.awsui-motion-disabled .awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9), .awsui-mode-entering .awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+  color: var(--awsui-style-color-hover-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9):focus {
+.awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9):focus {
   outline: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9):active {
-  color: var(--awsui-style-color-active-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+.awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9):active {
+  color: var(--awsui-style-color-active-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9):active, .awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9):focus, .awsui_link_4c84z_ndqw8_145.awsui_variant-secondary_4c84z_ndqw8_212:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9):active, .awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9):focus, .awsui_link_4c84z_1i06g_145.awsui_variant-secondary_4c84z_1i06g_212:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9) {
-  color: var(--awsui-style-color-default-vl73au, var(--color-text-link-default-x6cnv5, #0073bb));
+.awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9) {
+  color: var(--awsui-style-color-default-b75yp7, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -260,33 +260,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9) {
+  .awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9), .awsui-mode-entering .awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9) {
+.awsui-motion-disabled .awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9), .awsui-mode-entering .awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+  color: var(--awsui-style-color-hover-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9):focus {
+.awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9):focus {
   outline: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9):active {
-  color: var(--awsui-style-color-active-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+.awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9):active {
+  color: var(--awsui-style-color-active-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9):active, .awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9):focus, .awsui_link_4c84z_ndqw8_145.awsui_variant-primary_4c84z_ndqw8_247:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9):active, .awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9):focus, .awsui_link_4c84z_1i06g_145.awsui_variant-primary_4c84z_1i06g_247:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9) {
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
-  color: var(--awsui-style-color-default-vl73au, var(--color-text-link-default-x6cnv5, #0073bb));
+  color: var(--awsui-style-color-default-b75yp7, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: 700;
   letter-spacing: 0.005em;
   text-decoration-line: none;
@@ -297,31 +297,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9) {
+  .awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9), .awsui-mode-entering .awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9) {
+.awsui-motion-disabled .awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9), .awsui-mode-entering .awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+  color: var(--awsui-style-color-hover-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9):focus {
+.awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9):focus {
   outline: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9):active {
-  color: var(--awsui-style-color-active-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+.awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9):active {
+  color: var(--awsui-style-color-active-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9):active, .awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9):focus, .awsui_link_4c84z_ndqw8_145.awsui_variant-info_4c84z_ndqw8_280:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9):active, .awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9):focus, .awsui_link_4c84z_1i06g_145.awsui_variant-info_4c84z_1i06g_280:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: var(--color-text-link-button-underline-hover-s0fj6r, currentColor);
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9) {
-  color: var(--awsui-style-color-default-vl73au, var(--color-text-link-default-x6cnv5, #0073bb));
+.awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9) {
+  color: var(--awsui-style-color-default-b75yp7, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: var(--font-box-value-large-weight-zc1blz, 300);
   text-decoration-line: underline;
   text-decoration-color: currentColor;
@@ -331,33 +331,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9) {
+  .awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9), .awsui-mode-entering .awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9) {
+.awsui-motion-disabled .awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9), .awsui-mode-entering .awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+  color: var(--awsui-style-color-hover-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9):focus {
+.awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9):focus {
   outline: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9):active {
-  color: var(--awsui-style-color-active-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+.awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9):active {
+  color: var(--awsui-style-color-active-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9):active, .awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9):focus, .awsui_link_4c84z_ndqw8_145.awsui_variant-value-large_4c84z_ndqw8_315:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9):active, .awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9):focus, .awsui_link_4c84z_1i06g_145.awsui_variant-value-large_4c84z_1i06g_315:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9) {
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
-  color: var(--awsui-style-color-default-vl73au, var(--color-text-interactive-default-qwoe3g, #545b64));
+  color: var(--awsui-style-color-default-b75yp7, var(--color-text-interactive-default-qwoe3g, #545b64));
   font-weight: 700;
   letter-spacing: 0.005em;
   text-decoration-line: none;
@@ -368,31 +368,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9) {
+  .awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9), .awsui-mode-entering .awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9) {
+.awsui-motion-disabled .awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9), .awsui-mode-entering .awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-vl73au, var(--color-text-interactive-hover-bu4gls, #16191f));
+  color: var(--awsui-style-color-hover-b75yp7, var(--color-text-interactive-hover-bu4gls, #16191f));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9):focus {
+.awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9):focus {
   outline: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9):active {
-  color: var(--awsui-style-color-active-vl73au, var(--color-text-interactive-active-c44vdq, #16191f));
+.awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9):active {
+  color: var(--awsui-style-color-active-b75yp7, var(--color-text-interactive-active-c44vdq, #16191f));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9):active, .awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9):focus, .awsui_link_4c84z_ndqw8_145.awsui_variant-top-navigation_4c84z_ndqw8_347:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9):active, .awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9):focus, .awsui_link_4c84z_1i06g_145.awsui_variant-top-navigation_4c84z_1i06g_347:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: transparent;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9) {
-  color: var(--awsui-style-color-default-vl73au, var(--color-text-link-default-x6cnv5, #0073bb));
+.awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9) {
+  color: var(--awsui-style-color-default-b75yp7, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: var(--font-link-button-weight-bnpz8h, 400);
   letter-spacing: var(--font-link-button-letter-spacing-yobz7z, normal);
   text-decoration-line: underline;
@@ -403,33 +403,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9) {
+  .awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9), .awsui-mode-entering .awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9) {
+.awsui-motion-disabled .awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9), .awsui-mode-entering .awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+  color: var(--awsui-style-color-hover-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9):focus {
+.awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9):focus {
   outline: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9):active {
-  color: var(--awsui-style-color-active-vl73au, var(--color-text-link-hover-tk5gkv, #0a4a74));
+.awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9):active {
+  color: var(--awsui-style-color-active-b75yp7, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9):active, .awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9):focus, .awsui_link_4c84z_ndqw8_145.awsui_variant-recovery_4c84z_ndqw8_382:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9):active, .awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9):focus, .awsui_link_4c84z_1i06g_145.awsui_variant-recovery_4c84z_1i06g_382:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: var(--color-text-link-button-underline-hover-s0fj6r, currentColor);
 }
-.awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9) {
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
-  color: var(--awsui-style-color-default-vl73au, var(--color-text-link-button-normal-default-d9tt5e, #545b64));
+  color: var(--awsui-style-color-default-b75yp7, var(--color-text-link-button-normal-default-d9tt5e, #545b64));
   font-weight: 700;
   letter-spacing: var(--font-button-letter-spacing-9h7rbb, 0.25px);
   text-decoration-line: none;
@@ -440,105 +440,105 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9) {
+  .awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9), .awsui-mode-entering .awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9) {
+.awsui-motion-disabled .awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9), .awsui-mode-entering .awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-vl73au, var(--color-text-link-button-normal-hover-kksv98, #16191f));
+  color: var(--awsui-style-color-hover-b75yp7, var(--color-text-link-button-normal-hover-kksv98, #16191f));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9):focus {
+.awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9):focus {
   outline: none;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9):active {
-  color: var(--awsui-style-color-active-vl73au, var(--color-text-link-button-normal-active-h0gdl1, #16191f));
+.awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9):active {
+  color: var(--awsui-style-color-active-b75yp7, var(--color-text-link-button-normal-active-h0gdl1, #16191f));
 }
-.awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9):active, .awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9):focus, .awsui_link_4c84z_ndqw8_145.awsui_button_4c84z_ndqw8_415:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9):active, .awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9):focus, .awsui_link_4c84z_1i06g_145.awsui_button_4c84z_1i06g_415:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: transparent;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_color-inverted_4c84z_ndqw8_450:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_color-inverted_4c84z_1i06g_450:not(#\9) {
   color: var(--color-text-notification-default-fmebm4, #fafafa);
 }
-.awsui_link_4c84z_ndqw8_145.awsui_color-inverted_4c84z_ndqw8_450:not(#\9):not(.awsui_button_4c84z_ndqw8_415) {
+.awsui_link_4c84z_1i06g_145.awsui_color-inverted_4c84z_1i06g_450:not(#\9):not(.awsui_button_4c84z_1i06g_415) {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_color-inverted_4c84z_ndqw8_450:not(#\9):hover {
+.awsui_link_4c84z_1i06g_145.awsui_color-inverted_4c84z_1i06g_450:not(#\9):hover {
   color: var(--color-text-link-inverted-hover-7jk1d1, #fafafa);
 }
-body[data-awsui-focus-visible=true] .awsui_link_4c84z_ndqw8_145:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_link_4c84z_1i06g_145:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-c5423y, 5px auto Highlight);
   outline-offset: 2px;
-  outline-color: var(--awsui-style-focus-ring-border-color-vl73au, var(--color-border-item-focused-r5f6xl, #0073bb));
-  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-vl73au, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-vl73au, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-vl73au, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-vl73au, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-vl73au);
-}
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-body-s_4c84z_ndqw8_471:not(#\9) {
+  outline-color: var(--awsui-style-focus-ring-border-color-b75yp7, var(--color-border-item-focused-r5f6xl, #0073bb));
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-b75yp7, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-b75yp7, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-b75yp7, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-b75yp7, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-b75yp7);
+}
+.awsui_link_4c84z_1i06g_145.awsui_font-size-body-s_4c84z_1i06g_471:not(#\9) {
   font-size: var(--font-size-body-s-psgqn2, 12px);
   line-height: var(--line-height-body-s-otgtsr, 16px);
   letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
   text-underline-offset: 0.3em;
   text-decoration-thickness: 1px;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-body-m_4c84z_ndqw8_478:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_font-size-body-m_4c84z_1i06g_478:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-heading-xs_4c84z_ndqw8_484:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_font-size-heading-xs_4c84z_1i06g_484:not(#\9) {
   font-size: var(--font-size-heading-xs-c20ika, 16px);
   line-height: var(--line-height-heading-xs-fuzanp, 20px);
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-heading-s_4c84z_ndqw8_490:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_font-size-heading-s_4c84z_1i06g_490:not(#\9) {
   font-size: var(--font-size-heading-s-yde02v, 16px);
   line-height: var(--line-height-heading-s-j2axh8, 20px);
   letter-spacing: var(--letter-spacing-heading-s-696sxe, normal);
   text-underline-offset: 0.3em;
   text-decoration-thickness: 1px;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-heading-m_4c84z_ndqw8_497:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_font-size-heading-m_4c84z_1i06g_497:not(#\9) {
   font-size: var(--font-size-heading-m-56jjln, 18px);
   line-height: var(--line-height-heading-m-irezqt, 22px);
   letter-spacing: var(--letter-spacing-heading-m-93y02s, normal);
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-heading-l_4c84z_ndqw8_504:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_font-size-heading-l_4c84z_1i06g_504:not(#\9) {
   font-size: var(--font-size-heading-l-qgg2za, 18px);
   line-height: var(--line-height-heading-l-vhgtnq, 22px);
   letter-spacing: var(--letter-spacing-heading-l-spdx5v, normal);
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-heading-xl_4c84z_ndqw8_511:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_font-size-heading-xl_4c84z_1i06g_511:not(#\9) {
   font-size: var(--font-size-heading-xl-w5di2k, 28px);
   line-height: var(--line-height-heading-xl-vs1f23, 36px);
   letter-spacing: var(--letter-spacing-heading-xl-33zwds, normal);
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-display-l_4c84z_ndqw8_518:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_font-size-display-l_4c84z_1i06g_518:not(#\9) {
   font-size: var(--font-size-display-l-h1h1h9, 44px);
   line-height: var(--line-height-display-l-3zghmm, 56px);
   letter-spacing: var(--letter-spacing-display-l-dniym1, normal);
   text-underline-offset: 0.25em;
   text-decoration-thickness: 2px;
 }
-.awsui_link_4c84z_ndqw8_145.awsui_font-size-inherit_4c84z_ndqw8_525:not(#\9) {
+.awsui_link_4c84z_1i06g_145.awsui_font-size-inherit_4c84z_1i06g_525:not(#\9) {
   font-size: inherit;
   line-height: inherit;
   letter-spacing: inherit;
@@ -546,10 +546,10 @@ body[data-awsui-focus-visible=true] .awsui_link_4c84z_ndqw8_145:not(#\9):focus {
   text-decoration-thickness: 1px;
 }
 
-.awsui_icon-wrapper_4c84z_ndqw8_533:not(#\9) {
+.awsui_icon-wrapper_4c84z_1i06g_533:not(#\9) {
   white-space: nowrap;
 }
 
-.awsui_icon_4c84z_ndqw8_533:not(#\9) {
+.awsui_icon_4c84z_1i06g_533:not(#\9) {
   display: inline-block;
 }

package/lib/internal/template/link/styles.selectors.js

@@ -2,25 +2,25 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "link": "awsui_link_4c84z_ndqw8_145",
-  "variant-secondary": "awsui_variant-secondary_4c84z_ndqw8_212",
-  "variant-primary": "awsui_variant-primary_4c84z_ndqw8_247",
-  "variant-info": "awsui_variant-info_4c84z_ndqw8_280",
-  "variant-value-large": "awsui_variant-value-large_4c84z_ndqw8_315",
-  "variant-top-navigation": "awsui_variant-top-navigation_4c84z_ndqw8_347",
-  "variant-recovery": "awsui_variant-recovery_4c84z_ndqw8_382",
-  "button": "awsui_button_4c84z_ndqw8_415",
-  "color-inverted": "awsui_color-inverted_4c84z_ndqw8_450",
-  "font-size-body-s": "awsui_font-size-body-s_4c84z_ndqw8_471",
-  "font-size-body-m": "awsui_font-size-body-m_4c84z_ndqw8_478",
-  "font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_ndqw8_484",
-  "font-size-heading-s": "awsui_font-size-heading-s_4c84z_ndqw8_490",
-  "font-size-heading-m": "awsui_font-size-heading-m_4c84z_ndqw8_497",
-  "font-size-heading-l": "awsui_font-size-heading-l_4c84z_ndqw8_504",
-  "font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_ndqw8_511",
-  "font-size-display-l": "awsui_font-size-display-l_4c84z_ndqw8_518",
-  "font-size-inherit": "awsui_font-size-inherit_4c84z_ndqw8_525",
-  "icon-wrapper": "awsui_icon-wrapper_4c84z_ndqw8_533",
-  "icon": "awsui_icon_4c84z_ndqw8_533"
+  "link": "awsui_link_4c84z_1i06g_145",
+  "variant-secondary": "awsui_variant-secondary_4c84z_1i06g_212",
+  "variant-primary": "awsui_variant-primary_4c84z_1i06g_247",
+  "variant-info": "awsui_variant-info_4c84z_1i06g_280",
+  "variant-value-large": "awsui_variant-value-large_4c84z_1i06g_315",
+  "variant-top-navigation": "awsui_variant-top-navigation_4c84z_1i06g_347",
+  "variant-recovery": "awsui_variant-recovery_4c84z_1i06g_382",
+  "button": "awsui_button_4c84z_1i06g_415",
+  "color-inverted": "awsui_color-inverted_4c84z_1i06g_450",
+  "font-size-body-s": "awsui_font-size-body-s_4c84z_1i06g_471",
+  "font-size-body-m": "awsui_font-size-body-m_4c84z_1i06g_478",
+  "font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_1i06g_484",
+  "font-size-heading-s": "awsui_font-size-heading-s_4c84z_1i06g_490",
+  "font-size-heading-m": "awsui_font-size-heading-m_4c84z_1i06g_497",
+  "font-size-heading-l": "awsui_font-size-heading-l_4c84z_1i06g_504",
+  "font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_1i06g_511",
+  "font-size-display-l": "awsui_font-size-display-l_4c84z_1i06g_518",
+  "font-size-inherit": "awsui_font-size-inherit_4c84z_1i06g_525",
+  "icon-wrapper": "awsui_icon-wrapper_4c84z_1i06g_533",
+  "icon": "awsui_icon_4c84z_1i06g_533"
 };
   

package/lib/internal/template/popover/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAM9D,UAAU,qBAAqB;IAC7B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC;IACjD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EACR,mBAAmB,EACnB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,sBA6GvB"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAM9D,UAAU,qBAAqB;IAC7B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC;IACjD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EACR,mBAAmB,EACnB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,sBAsGvB"}

package/lib/internal/template/popover/container.js

@@ -47,13 +47,10 @@ export default function PopoverContainer({ position, trackRef, getTrack: externa
     });
     // Recalculate position when the DOM changes.
     // istanbul ignore next - tested via integration tests
-    usePositionObserver(trackRef, trackKey, () => {
+    usePositionObserver(getTrack.current, trackKey, () => {
         // Do not update position if popover moved offscreen
         const popoverOffset = popoverRef.current && getLogicalBoundingClientRect(popoverRef.current);
-        if (keepPosition ||
-            !popoverOffset ||
-            popoverOffset.insetBlockStart < 0 ||
-            popoverOffset.insetBlockEnd > window.innerHeight) {
+        if (!popoverOffset || popoverOffset.insetBlockStart < 0 || popoverOffset.insetBlockEnd > window.innerHeight) {
             return;
         }
         positionHandlerRef.current();

package/lib/internal/template/popover/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getLogicalBoundingClientRect, useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\nimport usePositionObserver from './use-position-observer';\n\nimport styles from './styles.css.js';\n\ninterface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef?: React.RefObject<HTMLElement | SVGElement>;\n  getTrack?: () => null | HTMLElement | SVGElement;\n  /**\n    Used to update the container position in case track or track position changes:\n\n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  minVisibleBlockSize?: number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n  size: PopoverProps.Size | 'content';\n  fixedWidth: boolean;\n  variant?: 'annotation';\n  // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n  keepPosition?: boolean;\n  // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n  // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n  allowScrollToFit?: boolean;\n  allowVerticalOverflow?: boolean;\n  // Whether the popover should be hidden when the trigger is scrolled away.\n  hideOnOverscroll?: boolean;\n  hoverArea?: boolean;\n  className?: string;\n}\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  getTrack: externalGetTrack,\n  trackKey,\n  minVisibleBlockSize,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n  size,\n  fixedWidth,\n  variant,\n  keepPosition,\n  allowScrollToFit,\n  allowVerticalOverflow,\n  hideOnOverscroll,\n  hoverArea,\n  className,\n}: PopoverContainerProps) {\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const isRefresh = useVisualRefresh();\n\n  const getTrack = useRef(() => {\n    if (trackRef) {\n      return trackRef.current;\n    }\n    if (externalGetTrack) {\n      return externalGetTrack();\n    }\n    throw new Error('Invariant violation: must provide either trackRef or getTrack.');\n  });\n\n  // Updates the position handler.\n  const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =\n    usePopoverPosition({\n      popoverRef,\n      bodyRef,\n      arrowRef,\n      getTrack: getTrack.current,\n      contentRef,\n      allowScrollToFit,\n      allowVerticalOverflow,\n      preferredPosition: position,\n      renderWithPortal,\n      keepPosition,\n      hideOnOverscroll,\n      minVisibleBlockSize,\n    });\n\n  // Recalculate position when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey]);\n\n  // Recalculate position when content size changes.\n  useResizeObserver(contentRef, () => {\n    updatePositionHandler(true);\n  });\n\n  // Recalculate position when the DOM changes.\n  // istanbul ignore next - tested via integration tests\n  usePositionObserver(trackRef, trackKey, () => {\n    // Do not update position if popover moved offscreen\n    const popoverOffset = popoverRef.current && getLogicalBoundingClientRect(popoverRef.current);\n\n    if (\n      keepPosition ||\n      !popoverOffset ||\n      popoverOffset.insetBlockStart < 0 ||\n      popoverOffset.insetBlockEnd > window.innerHeight\n    ) {\n      return;\n    }\n\n    positionHandlerRef.current();\n  });\n\n  // Recalculate position on resize or scroll events.\n  useLayoutEffect(() => {\n    const controller = new AbortController();\n\n    const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler(true));\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n    window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });\n    window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });\n\n    return () => {\n      controller.abort();\n    };\n  }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n  return isOverscrolling ? null : (\n    <div\n      ref={popoverRef}\n      style={{ ...popoverStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh, className)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n\n      <div\n        ref={bodyRef}\n        className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n          [styles['fixed-width']]: fixedWidth,\n          [styles[`container-body-variant-${variant}`]]: variant,\n        })}\n      >\n        {hoverArea ? (\n          <div className={styles['hover-area']}>\n            <div ref={contentRef}>{children}</div>\n          </div>\n        ) : (\n          <div ref={contentRef}>{children}</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAEhH,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,kBAAkB,MAAM,2BAA2B,CAAC;AAC3D,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAE1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAqCrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EACR,mBAAmB,EACnB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,SAAS,GACa;IACtB,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAErD,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,EAAE;QAC3B,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC,OAAO,CAAC;SACzB;QACD,IAAI,gBAAgB,EAAE;YACpB,OAAO,gBAAgB,EAAE,CAAC;SAC3B;QACD,MAAM,IAAI,KAAK,CAAC,gEAAgE,CAAC,CAAC;IACpF,CAAC,CAAC,CAAC;IAEH,gCAAgC;IAChC,MAAM,EAAE,qBAAqB,EAAE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAClG,kBAAkB,CAAC;QACjB,UAAU;QACV,OAAO;QACP,QAAQ;QACR,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,UAAU;QACV,gBAAgB;QAChB,qBAAqB;QACrB,iBAAiB,EAAE,QAAQ;QAC3B,gBAAgB;QAChB,YAAY;QACZ,gBAAgB;QAChB,mBAAmB;KACpB,CAAC,CAAC;IAEL,+CAA+C;IAC/C,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,kDAAkD;IAClD,iBAAiB,CAAC,UAAU,EAAE,GAAG,EAAE;QACjC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,6CAA6C;IAC7C,sDAAsD;IACtD,mBAAmB,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE;QACnD,oDAAoD;QACpD,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,IAAI,4BAA4B,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7F,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,eAAe,GAAG,CAAC,IAAI,aAAa,CAAC,aAAa,GAAG,MAAM,CAAC,WAAW,EAAE;YAC3G,OAAO;SACR;QACD,kBAAkB,CAAC,OAAO,EAAE,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,mDAAmD;IACnD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9F,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC,CAAC;QAExF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAsB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACzF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QAEjG,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,kBAAkB,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE1F,OAAO,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,6BACE,GAAG,EAAE,UAAU,EACf,KAAK,kCAAO,YAAY,KAAE,MAAM,KAChC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;QAEzE,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,4BAA4B,gBAAgB,EAAE,CAAC,CAAC,iBACrF,IAAI,IAEhB,KAAK,CAAC,gBAAgB,CAAC,CACpB;QAEN,6BACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,uBAAuB,IAAI,EAAE,CAAC,EAAE;gBAC/E,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;gBACnC,CAAC,MAAM,CAAC,0BAA0B,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO;aACvD,CAAC,IAED,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC;YAClC,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CAClC,CACP,CAAC,CAAC,CAAC,CACF,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CACvC,CACG,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getLogicalBoundingClientRect, useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\nimport usePositionObserver from './use-position-observer';\n\nimport styles from './styles.css.js';\n\ninterface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef?: React.RefObject<HTMLElement | SVGElement>;\n  getTrack?: () => null | HTMLElement | SVGElement;\n  /**\n    Used to update the container position in case track or track position changes:\n\n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  minVisibleBlockSize?: number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n  size: PopoverProps.Size | 'content';\n  fixedWidth: boolean;\n  variant?: 'annotation';\n  // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n  keepPosition?: boolean;\n  // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n  // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n  allowScrollToFit?: boolean;\n  allowVerticalOverflow?: boolean;\n  // Whether the popover should be hidden when the trigger is scrolled away.\n  hideOnOverscroll?: boolean;\n  hoverArea?: boolean;\n  className?: string;\n}\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  getTrack: externalGetTrack,\n  trackKey,\n  minVisibleBlockSize,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n  size,\n  fixedWidth,\n  variant,\n  keepPosition,\n  allowScrollToFit,\n  allowVerticalOverflow,\n  hideOnOverscroll,\n  hoverArea,\n  className,\n}: PopoverContainerProps) {\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const isRefresh = useVisualRefresh();\n\n  const getTrack = useRef(() => {\n    if (trackRef) {\n      return trackRef.current;\n    }\n    if (externalGetTrack) {\n      return externalGetTrack();\n    }\n    throw new Error('Invariant violation: must provide either trackRef or getTrack.');\n  });\n\n  // Updates the position handler.\n  const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =\n    usePopoverPosition({\n      popoverRef,\n      bodyRef,\n      arrowRef,\n      getTrack: getTrack.current,\n      contentRef,\n      allowScrollToFit,\n      allowVerticalOverflow,\n      preferredPosition: position,\n      renderWithPortal,\n      keepPosition,\n      hideOnOverscroll,\n      minVisibleBlockSize,\n    });\n\n  // Recalculate position when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey]);\n\n  // Recalculate position when content size changes.\n  useResizeObserver(contentRef, () => {\n    updatePositionHandler(true);\n  });\n\n  // Recalculate position when the DOM changes.\n  // istanbul ignore next - tested via integration tests\n  usePositionObserver(getTrack.current, trackKey, () => {\n    // Do not update position if popover moved offscreen\n    const popoverOffset = popoverRef.current && getLogicalBoundingClientRect(popoverRef.current);\n    if (!popoverOffset || popoverOffset.insetBlockStart < 0 || popoverOffset.insetBlockEnd > window.innerHeight) {\n      return;\n    }\n    positionHandlerRef.current();\n  });\n\n  // Recalculate position on resize or scroll events.\n  useLayoutEffect(() => {\n    const controller = new AbortController();\n\n    const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler(true));\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n    window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });\n    window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });\n\n    return () => {\n      controller.abort();\n    };\n  }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n  return isOverscrolling ? null : (\n    <div\n      ref={popoverRef}\n      style={{ ...popoverStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh, className)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n\n      <div\n        ref={bodyRef}\n        className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n          [styles['fixed-width']]: fixedWidth,\n          [styles[`container-body-variant-${variant}`]]: variant,\n        })}\n      >\n        {hoverArea ? (\n          <div className={styles['hover-area']}>\n            <div ref={contentRef}>{children}</div>\n          </div>\n        ) : (\n          <div ref={contentRef}>{children}</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/popover/use-position-observer.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-export default function usePositionObserver(triggerRef: React.RefObject<Element> | undefined, trackKey: string | number | undefined, callback: () => void): void;
+export default function usePositionObserver(getTrack: () => null | Element, trackKey: string | number | undefined, callback: () => void): void;
 //# sourceMappingURL=use-position-observer.d.ts.map

package/lib/internal/template/popover/use-position-observer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-position-observer.d.ts","sourceRoot":"","sources":["../../../src/popover/use-position-observer.ts"],"names":[],"mappings":"AAIA,OAAO,KAAoB,MAAM,OAAO,CAAC;AASzC,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,EAChD,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EACrC,QAAQ,EAAE,MAAM,IAAI,QAyCrB"}
+{"version":3,"file":"use-position-observer.d.ts","sourceRoot":"","sources":["../../../src/popover/use-position-observer.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,EAC9B,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EACrC,QAAQ,EAAE,MAAM,IAAI,QA2CrB"}