@cloudscape-design/components-themeable 3.0.250 → 3.0.252

package/lib/internal/template/date-range-picker/styles.scoped.css

@@ -90,11 +90,11 @@ 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_calendar_mgja0_1l1y5_93:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_mgja0_1l1y5_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
+.awsui_calendar_mgja0_1ptul_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_mgja0_1ptul_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_mgja0_1l1y5_1 {
+@keyframes awsui_awsui-motion-fade-in-0_mgja0_1ptul_1 {
   from {
     opacity: 0;
   }
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_calendar_mgja0_1l1y5_93:not(#\9) {
+  .awsui_calendar_mgja0_1ptul_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_calendar_mgja0_1l1y5_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_1l1y5_93:not(#\9) {
+.awsui-motion-disabled .awsui_calendar_mgja0_1ptul_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_1ptul_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -117,7 +117,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_mgja0_1l1y5_120:not(#\9) {
+.awsui_root_mgja0_1ptul_120:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -157,32 +157,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   max-width: 32em;
 }
 
-.awsui_focus-lock_mgja0_1l1y5_134:not(#\9) {
+.awsui_focus-lock_mgja0_1ptul_134:not(#\9) {
   display: contents;
 }
 
-.awsui_trigger-wrapper_mgja0_1l1y5_138:not(#\9) {
+.awsui_trigger-wrapper_mgja0_1ptul_138:not(#\9) {
   min-width: calc(var(--size-calendar-grid-width-luenzs, 234px) + 2 * var(--space-l-4vl6xu, 20px));
 }
 
-.awsui_trigger-flexbox_mgja0_1l1y5_142:not(#\9) {
+.awsui_trigger-flexbox_mgja0_1ptul_142:not(#\9) {
   display: flex;
 }
 
-.awsui_calendar-container_mgja0_1l1y5_146:not(#\9) {
+.awsui_calendar-container_mgja0_1ptul_146:not(#\9) {
   width: calc(2 * var(--size-calendar-grid-width-luenzs, 234px) + var(--space-xs-rsr2qu, 8px));
 }
-.awsui_calendar-container_mgja0_1l1y5_146.awsui_one-grid_mgja0_1l1y5_149:not(#\9) {
+.awsui_calendar-container_mgja0_1ptul_146.awsui_one-grid_mgja0_1ptul_149:not(#\9) {
   width: var(--size-calendar-grid-width-luenzs, 234px);
 }
 
-.awsui_calendar-header_mgja0_1l1y5_153:not(#\9) {
+.awsui_calendar-header_mgja0_1ptul_153:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
-.awsui_calendar-header-months-wrapper_mgja0_1l1y5_159:not(#\9) {
+.awsui_calendar-header-months-wrapper_mgja0_1ptul_159:not(#\9) {
   position: absolute;
   right: 0;
   left: 0;
@@ -195,7 +195,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   flex: 1;
   pointer-events: none;
 }
-.awsui_calendar-header-month_mgja0_1l1y5_159:not(#\9) {
+.awsui_calendar-header-month_mgja0_1ptul_159:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   font-weight: 700;
@@ -203,130 +203,130 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   pointer-events: auto;
 }
-.awsui_calendar-next-month-btn_mgja0_1l1y5_180:not(#\9) {
+.awsui_calendar-next-month-btn_mgja0_1ptul_180:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-prev-month-btn_mgja0_1l1y5_183:not(#\9) {
+.awsui_calendar-prev-month-btn_mgja0_1ptul_183:not(#\9) {
   /* used for identifying element */
 }
 
-.awsui_first-grid_mgja0_1l1y5_187:not(#\9),
-.awsui_second-grid_mgja0_1l1y5_188:not(#\9) {
+.awsui_first-grid_mgja0_1ptul_187:not(#\9),
+.awsui_second-grid_mgja0_1ptul_188:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_date-and-time-container_mgja0_1l1y5_192:not(#\9) {
+.awsui_date-and-time-container_mgja0_1ptul_192:not(#\9) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--size-calendar-grid-width-luenzs, 234px), 1fr));
   gap: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_date-and-time-wrapper_mgja0_1l1y5_198:not(#\9) {
+.awsui_date-and-time-wrapper_mgja0_1ptul_198:not(#\9) {
   width: var(--size-calendar-grid-width-luenzs, 234px);
   display: grid;
   gap: var(--space-xs-rsr2qu, 8px);
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 }
 
-.awsui_footer_mgja0_1l1y5_205:not(#\9) {
+.awsui_footer_mgja0_1ptul_205:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   border-top: 1px solid var(--color-border-dropdown-item-default-tcqivq, #eaeded);
   padding: 0 var(--space-l-4vl6xu, 20px) var(--space-s-hv8c1d, 12px);
 }
-.awsui_footer_mgja0_1l1y5_205.awsui_has-clear-button_mgja0_1l1y5_212:not(#\9) {
+.awsui_footer_mgja0_1ptul_205.awsui_has-clear-button_mgja0_1ptul_212:not(#\9) {
   justify-content: space-between;
 }
-.awsui_footer_mgja0_1l1y5_205.awsui_one-grid_mgja0_1l1y5_149:not(#\9) {
+.awsui_footer_mgja0_1ptul_205.awsui_one-grid_mgja0_1ptul_149:not(#\9) {
   padding: 0 var(--space-xs-rsr2qu, 8px) var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_footer-button-wrapper_mgja0_1l1y5_219:not(#\9) {
+.awsui_footer-button-wrapper_mgja0_1ptul_219:not(#\9) {
   padding-top: var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_icon-wrapper_mgja0_1l1y5_223:not(#\9) {
+.awsui_icon-wrapper_mgja0_1ptul_223:not(#\9) {
   color: var(--color-text-interactive-default-9me1cm, #545b64);
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_label_mgja0_1l1y5_228:not(#\9) {
+.awsui_label_mgja0_1ptul_228:not(#\9) {
   -webkit-user-select: text;
           user-select: text;
   cursor: default;
 }
 
-.awsui_label_mgja0_1l1y5_228.awsui_label-enabled_mgja0_1l1y5_233:not(#\9):hover > .awsui_trigger-flexbox_mgja0_1l1y5_142 > .awsui_icon-wrapper_mgja0_1l1y5_223 {
+.awsui_label_mgja0_1ptul_228.awsui_label-enabled_mgja0_1ptul_233:not(#\9):hover > .awsui_trigger-flexbox_mgja0_1ptul_142 > .awsui_icon-wrapper_mgja0_1ptul_223 {
   color: var(--color-text-interactive-hover-79wpl9, #16191f);
 }
 
-.awsui_label-text_mgja0_1l1y5_237:not(#\9) {
+.awsui_label-text_mgja0_1ptul_237:not(#\9) {
   color: var(--color-text-input-placeholder-rtvjp5, #687078);
   font-style: italic;
 }
 
-.awsui_label-token-nowrap_mgja0_1l1y5_242:not(#\9) {
+.awsui_label-token-nowrap_mgja0_1ptul_242:not(#\9) {
   white-space: nowrap;
 }
 
-.awsui_mode-switch_mgja0_1l1y5_246:not(#\9) {
+.awsui_mode-switch_mgja0_1ptul_246:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_dropdown_mgja0_1l1y5_250:not(#\9) {
+.awsui_dropdown_mgja0_1ptul_250:not(#\9) {
   overflow: auto;
   border-top: 1px solid var(--color-border-container-top-1itxac, #eaeded);
   border-bottom: 1px solid var(--color-border-container-top-1itxac, #eaeded);
   border-radius: var(--border-radius-dropdown-0c284d, 0px);
 }
-.awsui_dropdown_mgja0_1l1y5_250:not(#\9):focus {
+.awsui_dropdown_mgja0_1ptul_250:not(#\9):focus {
   outline: none;
 }
-.awsui_dropdown_mgja0_1l1y5_250[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dropdown_mgja0_1ptul_250:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-radius: var(--border-radius-dropdown-0c284d, 0px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
 
-.awsui_dropdown-content_mgja0_1l1y5_266:not(#\9) {
+.awsui_dropdown-content_mgja0_1ptul_266:not(#\9) {
   -webkit-user-select: text;
           user-select: text;
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
   width: calc(2 * var(--size-calendar-grid-width-luenzs, 234px) + var(--space-xs-rsr2qu, 8px) + 2 * var(--space-l-4vl6xu, 20px));
 }
-.awsui_dropdown-content_mgja0_1l1y5_266.awsui_one-grid_mgja0_1l1y5_149:not(#\9) {
+.awsui_dropdown-content_mgja0_1ptul_266.awsui_one-grid_mgja0_1ptul_149:not(#\9) {
   width: calc(var(--size-calendar-grid-width-luenzs, 234px) + 2 * var(--space-l-4vl6xu, 20px));
 }
 
-.awsui_start-date-input_mgja0_1l1y5_275:not(#\9),
-.awsui_start-time-input_mgja0_1l1y5_276:not(#\9),
-.awsui_end-date-input_mgja0_1l1y5_277:not(#\9),
-.awsui_end-time-input_mgja0_1l1y5_278:not(#\9) {
+.awsui_start-date-input_mgja0_1ptul_275:not(#\9),
+.awsui_start-time-input_mgja0_1ptul_276:not(#\9),
+.awsui_end-date-input_mgja0_1ptul_277:not(#\9),
+.awsui_end-time-input_mgja0_1ptul_278:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_validation-section_mgja0_1l1y5_282:not(#\9) {
+.awsui_validation-section_mgja0_1ptul_282:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_validation-error_mgja0_1l1y5_286:not(#\9) {
+.awsui_validation-error_mgja0_1ptul_286:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_clear-button_mgja0_1l1y5_290:not(#\9) {
+.awsui_clear-button_mgja0_1ptul_290:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_apply-button_mgja0_1l1y5_294:not(#\9) {
+.awsui_apply-button_mgja0_1ptul_294:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_cancel-button_mgja0_1l1y5_298:not(#\9) {
+.awsui_cancel-button_mgja0_1ptul_298:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_calendar-aria-live_mgja0_1l1y5_302:not(#\9) {
+.awsui_calendar-aria-live_mgja0_1ptul_302:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/date-range-picker/styles.selectors.js

@@ -2,43 +2,43 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "calendar": "awsui_calendar_mgja0_1l1y5_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1l1y5_1",
-  "root": "awsui_root_mgja0_1l1y5_120",
-  "focus-lock": "awsui_focus-lock_mgja0_1l1y5_134",
-  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_1l1y5_138",
-  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_1l1y5_142",
-  "calendar-container": "awsui_calendar-container_mgja0_1l1y5_146",
-  "one-grid": "awsui_one-grid_mgja0_1l1y5_149",
-  "calendar-header": "awsui_calendar-header_mgja0_1l1y5_153",
-  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1l1y5_159",
-  "calendar-header-month": "awsui_calendar-header-month_mgja0_1l1y5_159",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1l1y5_180",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1l1y5_183",
-  "first-grid": "awsui_first-grid_mgja0_1l1y5_187",
-  "second-grid": "awsui_second-grid_mgja0_1l1y5_188",
-  "date-and-time-container": "awsui_date-and-time-container_mgja0_1l1y5_192",
-  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1l1y5_198",
-  "footer": "awsui_footer_mgja0_1l1y5_205",
-  "has-clear-button": "awsui_has-clear-button_mgja0_1l1y5_212",
-  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1l1y5_219",
-  "icon-wrapper": "awsui_icon-wrapper_mgja0_1l1y5_223",
-  "label": "awsui_label_mgja0_1l1y5_228",
-  "label-enabled": "awsui_label-enabled_mgja0_1l1y5_233",
-  "label-text": "awsui_label-text_mgja0_1l1y5_237",
-  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_1l1y5_242",
-  "mode-switch": "awsui_mode-switch_mgja0_1l1y5_246",
-  "dropdown": "awsui_dropdown_mgja0_1l1y5_250",
-  "dropdown-content": "awsui_dropdown-content_mgja0_1l1y5_266",
-  "start-date-input": "awsui_start-date-input_mgja0_1l1y5_275",
-  "start-time-input": "awsui_start-time-input_mgja0_1l1y5_276",
-  "end-date-input": "awsui_end-date-input_mgja0_1l1y5_277",
-  "end-time-input": "awsui_end-time-input_mgja0_1l1y5_278",
-  "validation-section": "awsui_validation-section_mgja0_1l1y5_282",
-  "validation-error": "awsui_validation-error_mgja0_1l1y5_286",
-  "clear-button": "awsui_clear-button_mgja0_1l1y5_290",
-  "apply-button": "awsui_apply-button_mgja0_1l1y5_294",
-  "cancel-button": "awsui_cancel-button_mgja0_1l1y5_298",
-  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_1l1y5_302"
+  "calendar": "awsui_calendar_mgja0_1ptul_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1ptul_1",
+  "root": "awsui_root_mgja0_1ptul_120",
+  "focus-lock": "awsui_focus-lock_mgja0_1ptul_134",
+  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_1ptul_138",
+  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_1ptul_142",
+  "calendar-container": "awsui_calendar-container_mgja0_1ptul_146",
+  "one-grid": "awsui_one-grid_mgja0_1ptul_149",
+  "calendar-header": "awsui_calendar-header_mgja0_1ptul_153",
+  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1ptul_159",
+  "calendar-header-month": "awsui_calendar-header-month_mgja0_1ptul_159",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1ptul_180",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1ptul_183",
+  "first-grid": "awsui_first-grid_mgja0_1ptul_187",
+  "second-grid": "awsui_second-grid_mgja0_1ptul_188",
+  "date-and-time-container": "awsui_date-and-time-container_mgja0_1ptul_192",
+  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1ptul_198",
+  "footer": "awsui_footer_mgja0_1ptul_205",
+  "has-clear-button": "awsui_has-clear-button_mgja0_1ptul_212",
+  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1ptul_219",
+  "icon-wrapper": "awsui_icon-wrapper_mgja0_1ptul_223",
+  "label": "awsui_label_mgja0_1ptul_228",
+  "label-enabled": "awsui_label-enabled_mgja0_1ptul_233",
+  "label-text": "awsui_label-text_mgja0_1ptul_237",
+  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_1ptul_242",
+  "mode-switch": "awsui_mode-switch_mgja0_1ptul_246",
+  "dropdown": "awsui_dropdown_mgja0_1ptul_250",
+  "dropdown-content": "awsui_dropdown-content_mgja0_1ptul_266",
+  "start-date-input": "awsui_start-date-input_mgja0_1ptul_275",
+  "start-time-input": "awsui_start-time-input_mgja0_1ptul_276",
+  "end-date-input": "awsui_end-date-input_mgja0_1ptul_277",
+  "end-time-input": "awsui_end-time-input_mgja0_1ptul_278",
+  "validation-section": "awsui_validation-section_mgja0_1ptul_282",
+  "validation-error": "awsui_validation-error_mgja0_1ptul_286",
+  "clear-button": "awsui_clear-button_mgja0_1ptul_290",
+  "apply-button": "awsui_apply-button_mgja0_1ptul_294",
+  "cancel-button": "awsui_cancel-button_mgja0_1ptul_298",
+  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_1ptul_302"
 };
   

package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWlF,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAYD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA6HD,eAAO,MAAM,uBAAuB,0LAgBjC,4BAA4B,gBAgE9B,CAAC"}
+{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlF,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAYD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA4HD,eAAO,MAAM,uBAAuB,0LAgBjC,4BAA4B,gBAgE9B,CAAC"}

package/lib/internal/template/expandable-section/expandable-section-header.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import useFocusVisible from '../internal/hooks/focus-visible';
 import InternalIcon from '../icon/internal';
 import clsx from 'clsx';
 import styles from './styles.css.js';
@@ -9,37 +8,35 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { isDevelopment } from '../internal/is-development';
 import { warnOnce } from '../internal/logging';
 const ExpandableDefaultHeader = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, onKeyUp, onKeyDown, variant, }) => {
-    const focusVisible = useFocusVisible();
-    return (React.createElement("div", Object.assign({ id: id, role: "button", className: className, tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded }, focusVisible),
+    return (React.createElement("div", { id: id, role: "button", className: className, tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded },
         React.createElement("div", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
         children));
 };
 const ExpandableNavigationHeader = ({ id, className, onClick, ariaLabelledBy, ariaLabel, ariaControls, expanded, children, icon, }) => {
-    const focusVisible = useFocusVisible();
     return (React.createElement("div", { id: id, className: className, onClick: onClick },
-        React.createElement("button", Object.assign({ className: styles['icon-container'], "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded }, focusVisible), icon),
+        React.createElement("button", { className: styles['icon-container'], "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded }, icon),
         children));
 };
 const ExpandableContainerHeader = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, headerDescription, headerCounter, variant, headingTagOverride, onKeyUp, onKeyDown, }) => {
-    const focusVisible = useFocusVisible();
     const screenreaderContentId = useUniqueId('expandable-section-header-content-');
-    const Wrapper = variant === 'container'
+    const isContainer = variant === 'container';
+    const Wrapper = isContainer
         ? ({ children }) => (React.createElement(InternalHeader, { variant: "h2", description: headerDescription, counter: headerCounter, headingTagOverride: headingTagOverride }, children))
         : ({ children }) => {
             const Tag = headingTagOverride || 'div';
             return React.createElement(Tag, { className: styles['header-wrapper'] }, children);
         };
-    return (React.createElement("div", Object.assign({ id: id, className: className, onClick: onClick }, focusVisible),
+    return (React.createElement("div", { id: id, className: className, onClick: onClick },
         React.createElement(Wrapper, null,
-            React.createElement("span", { className: styles['header-container-button'], role: "button", tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded },
+            React.createElement("span", { className: styles['header-container-button'], role: "button", tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded },
                 React.createElement("span", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
                 React.createElement("span", null, children))),
-        React.createElement(ScreenreaderOnly, { id: screenreaderContentId },
+        isContainer && (React.createElement(ScreenreaderOnly, { id: screenreaderContentId },
             children,
             " ",
             headerCounter,
             " ",
-            headerDescription)));
+            headerDescription))));
 };
 export const ExpandableSectionHeader = ({ id, className, variant, header, headerText, headerDescription, headerCounter, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }) => {
     const icon = (React.createElement(InternalIcon, { size: variant === 'container' ? 'medium' : 'normal', className: clsx(styles.icon, expanded && styles.expanded), name: "caret-down-filled" }));

package/lib/internal/template/expandable-section/expandable-section-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\ninterface ExpandableDefaultHeaderProps {\n  id: string;\n  className?: string;\n  children?: ReactNode;\n  expanded: boolean;\n  ariaControls: string;\n  ariaLabel?: string;\n  onKeyUp: KeyboardEventHandler;\n  onKeyDown: KeyboardEventHandler;\n  onClick: MouseEventHandler;\n  icon: JSX.Element;\n  variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n  ariaLabelledBy?: string;\n}\n\ninterface ExpandableContainerHeaderProps extends ExpandableDefaultHeaderProps {\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n  variant: ExpandableSectionProps.Variant;\n  header?: ReactNode;\n  headerText?: ReactNode;\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n  ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  onKeyUp,\n  onKeyDown,\n  variant,\n}: ExpandableDefaultHeaderProps) => {\n  const focusVisible = useFocusVisible();\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={className}\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      aria-controls={ariaControls}\n      aria-expanded={expanded}\n      {...focusVisible}\n    >\n      <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableNavigationHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabelledBy,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n}: ExpandableNavigationHeaderProps) => {\n  const focusVisible = useFocusVisible();\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <button\n        className={styles['icon-container']}\n        aria-labelledby={ariaLabelledBy}\n        aria-label={ariaLabel}\n        aria-controls={ariaControls}\n        aria-expanded={expanded}\n        {...focusVisible}\n      >\n        {icon}\n      </button>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableContainerHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  headerDescription,\n  headerCounter,\n  variant,\n  headingTagOverride,\n  onKeyUp,\n  onKeyDown,\n}: ExpandableContainerHeaderProps) => {\n  const focusVisible = useFocusVisible();\n  const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n  const Wrapper =\n    variant === 'container'\n      ? ({ children }: { children: ReactNode }) => (\n          <InternalHeader\n            variant=\"h2\"\n            description={headerDescription}\n            counter={headerCounter}\n            headingTagOverride={headingTagOverride}\n          >\n            {children}\n          </InternalHeader>\n        )\n      : ({ children }: { children: ReactNode }) => {\n          const Tag = headingTagOverride || 'div';\n          return <Tag className={styles['header-wrapper']}>{children}</Tag>;\n        };\n  return (\n    <div id={id} className={className} onClick={onClick} {...focusVisible}>\n      <Wrapper>\n        <span\n          className={styles['header-container-button']}\n          role=\"button\"\n          tabIndex={0}\n          onKeyUp={onKeyUp}\n          onKeyDown={onKeyDown}\n          aria-label={ariaLabel}\n          // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n          aria-labelledby={ariaLabel ? undefined : screenreaderContentId}\n          aria-controls={ariaControls}\n          aria-expanded={expanded}\n        >\n          <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n          <span>{children}</span>\n        </span>\n      </Wrapper>\n      <ScreenreaderOnly id={screenreaderContentId}>\n        {children} {headerCounter} {headerDescription}\n      </ScreenreaderOnly>\n    </div>\n  );\n};\n\nexport const ExpandableSectionHeader = ({\n  id,\n  className,\n  variant,\n  header,\n  headerText,\n  headerDescription,\n  headerCounter,\n  headingTagOverride,\n  expanded,\n  ariaControls,\n  ariaLabel,\n  ariaLabelledBy,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n}: ExpandableSectionHeaderProps) => {\n  const icon = (\n    <InternalIcon\n      size={variant === 'container' ? 'medium' : 'normal'}\n      className={clsx(styles.icon, expanded && styles.expanded)}\n      name=\"caret-down-filled\"\n    />\n  );\n  const defaultHeaderProps = {\n    id: id,\n    icon: icon,\n    expanded: expanded,\n    ariaControls: ariaControls,\n    ariaLabel: ariaLabel,\n    onClick: onClick,\n    variant,\n  };\n\n  const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);\n  if (variant === 'navigation') {\n    return (\n      <ExpandableNavigationHeader\n        className={clsx(className, triggerClassName)}\n        ariaLabelledBy={ariaLabelledBy}\n        {...defaultHeaderProps}\n      >\n        {headerText ?? header}\n      </ExpandableNavigationHeader>\n    );\n  }\n\n  if (headerText) {\n    return (\n      <ExpandableContainerHeader\n        className={clsx(className, triggerClassName, expanded && styles.expanded)}\n        headerDescription={headerDescription}\n        headerCounter={headerCounter}\n        headingTagOverride={headingTagOverride}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        {...defaultHeaderProps}\n      >\n        {headerText}\n      </ExpandableContainerHeader>\n    );\n  }\n\n  if (variant === 'container' && header && isDevelopment) {\n    warnOnce(\n      'ExpandableSection',\n      'Use `headerText` instead of `header` to provide the button within the heading for a11y.'\n    );\n  }\n\n  return (\n    <ExpandableDefaultHeader\n      className={clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded)}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      {...defaultHeaderProps}\n    >\n      {headerText ?? header}\n    </ExpandableDefaultHeader>\n  );\n};\n"]}
+{"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\ninterface ExpandableDefaultHeaderProps {\n  id: string;\n  className?: string;\n  children?: ReactNode;\n  expanded: boolean;\n  ariaControls: string;\n  ariaLabel?: string;\n  onKeyUp: KeyboardEventHandler;\n  onKeyDown: KeyboardEventHandler;\n  onClick: MouseEventHandler;\n  icon: JSX.Element;\n  variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n  ariaLabelledBy?: string;\n}\n\ninterface ExpandableContainerHeaderProps extends ExpandableDefaultHeaderProps {\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n  variant: ExpandableSectionProps.Variant;\n  header?: ReactNode;\n  headerText?: ReactNode;\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n  ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  onKeyUp,\n  onKeyDown,\n  variant,\n}: ExpandableDefaultHeaderProps) => {\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={className}\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      aria-controls={ariaControls}\n      aria-expanded={expanded}\n    >\n      <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableNavigationHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabelledBy,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n}: ExpandableNavigationHeaderProps) => {\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <button\n        className={styles['icon-container']}\n        aria-labelledby={ariaLabelledBy}\n        aria-label={ariaLabel}\n        aria-controls={ariaControls}\n        aria-expanded={expanded}\n      >\n        {icon}\n      </button>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableContainerHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  headerDescription,\n  headerCounter,\n  variant,\n  headingTagOverride,\n  onKeyUp,\n  onKeyDown,\n}: ExpandableContainerHeaderProps) => {\n  const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n  const isContainer = variant === 'container';\n\n  const Wrapper = isContainer\n    ? ({ children }: { children: ReactNode }) => (\n        <InternalHeader\n          variant=\"h2\"\n          description={headerDescription}\n          counter={headerCounter}\n          headingTagOverride={headingTagOverride}\n        >\n          {children}\n        </InternalHeader>\n      )\n    : ({ children }: { children: ReactNode }) => {\n        const Tag = headingTagOverride || 'div';\n        return <Tag className={styles['header-wrapper']}>{children}</Tag>;\n      };\n\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <Wrapper>\n        <span\n          className={styles['header-container-button']}\n          role=\"button\"\n          tabIndex={0}\n          onKeyUp={onKeyUp}\n          onKeyDown={onKeyDown}\n          aria-label={ariaLabel}\n          // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n          aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n          aria-controls={ariaControls}\n          aria-expanded={expanded}\n        >\n          <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n          <span>{children}</span>\n        </span>\n      </Wrapper>\n      {isContainer && (\n        <ScreenreaderOnly id={screenreaderContentId}>\n          {children} {headerCounter} {headerDescription}\n        </ScreenreaderOnly>\n      )}\n    </div>\n  );\n};\n\nexport const ExpandableSectionHeader = ({\n  id,\n  className,\n  variant,\n  header,\n  headerText,\n  headerDescription,\n  headerCounter,\n  headingTagOverride,\n  expanded,\n  ariaControls,\n  ariaLabel,\n  ariaLabelledBy,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n}: ExpandableSectionHeaderProps) => {\n  const icon = (\n    <InternalIcon\n      size={variant === 'container' ? 'medium' : 'normal'}\n      className={clsx(styles.icon, expanded && styles.expanded)}\n      name=\"caret-down-filled\"\n    />\n  );\n  const defaultHeaderProps = {\n    id: id,\n    icon: icon,\n    expanded: expanded,\n    ariaControls: ariaControls,\n    ariaLabel: ariaLabel,\n    onClick: onClick,\n    variant,\n  };\n\n  const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);\n  if (variant === 'navigation') {\n    return (\n      <ExpandableNavigationHeader\n        className={clsx(className, triggerClassName)}\n        ariaLabelledBy={ariaLabelledBy}\n        {...defaultHeaderProps}\n      >\n        {headerText ?? header}\n      </ExpandableNavigationHeader>\n    );\n  }\n\n  if (headerText) {\n    return (\n      <ExpandableContainerHeader\n        className={clsx(className, triggerClassName, expanded && styles.expanded)}\n        headerDescription={headerDescription}\n        headerCounter={headerCounter}\n        headingTagOverride={headingTagOverride}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        {...defaultHeaderProps}\n      >\n        {headerText}\n      </ExpandableContainerHeader>\n    );\n  }\n\n  if (variant === 'container' && header && isDevelopment) {\n    warnOnce(\n      'ExpandableSection',\n      'Use `headerText` instead of `header` to provide the button within the heading for a11y.'\n    );\n  }\n\n  return (\n    <ExpandableDefaultHeader\n      className={clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded)}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      {...defaultHeaderProps}\n    >\n      {headerText ?? header}\n    </ExpandableDefaultHeader>\n  );\n};\n"]}

package/lib/internal/template/expandable-section/styles.css.js

@@ -1,28 +1,28 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_1nty6_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1nty6_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1nty6_119",
-  "icon": "awsui_icon_gwq0h_1nty6_133",
-  "root": "awsui_root_gwq0h_1nty6_151",
-  "expanded": "awsui_expanded_gwq0h_1nty6_171",
-  "icon-container": "awsui_icon-container_gwq0h_1nty6_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_1nty6_180",
-  "trigger": "awsui_trigger_gwq0h_1nty6_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_1nty6_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_1nty6_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_1nty6_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_1nty6_216",
-  "header": "awsui_header_gwq0h_1nty6_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_1nty6_229",
-  "header-container": "awsui_header-container_gwq0h_1nty6_236",
-  "header-container-button": "awsui_header-container-button_gwq0h_1nty6_251",
-  "header-navigation": "awsui_header-navigation_gwq0h_1nty6_259",
-  "content": "awsui_content_gwq0h_1nty6_97",
-  "content-default": "awsui_content-default_gwq0h_1nty6_295",
-  "content-footer": "awsui_content-footer_gwq0h_1nty6_298",
-  "content-expanded": "awsui_content-expanded_gwq0h_1nty6_301",
-  "focusable": "awsui_focusable_gwq0h_1nty6_305"
+  "content-enter": "awsui_content-enter_gwq0h_9z7os_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_9z7os_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_9z7os_119",
+  "icon": "awsui_icon_gwq0h_9z7os_133",
+  "root": "awsui_root_gwq0h_9z7os_151",
+  "expanded": "awsui_expanded_gwq0h_9z7os_171",
+  "icon-container": "awsui_icon-container_gwq0h_9z7os_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_9z7os_180",
+  "trigger": "awsui_trigger_gwq0h_9z7os_119",
+  "trigger-default": "awsui_trigger-default_gwq0h_9z7os_193",
+  "trigger-footer": "awsui_trigger-footer_gwq0h_9z7os_196",
+  "trigger-navigation": "awsui_trigger-navigation_gwq0h_9z7os_202",
+  "trigger-container": "awsui_trigger-container_gwq0h_9z7os_216",
+  "header": "awsui_header_gwq0h_9z7os_226",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_9z7os_229",
+  "header-container": "awsui_header-container_gwq0h_9z7os_236",
+  "header-container-button": "awsui_header-container-button_gwq0h_9z7os_251",
+  "header-navigation": "awsui_header-navigation_gwq0h_9z7os_259",
+  "content": "awsui_content_gwq0h_9z7os_97",
+  "content-default": "awsui_content-default_gwq0h_9z7os_295",
+  "content-footer": "awsui_content-footer_gwq0h_9z7os_298",
+  "content-expanded": "awsui_content-expanded_gwq0h_9z7os_301",
+  "focusable": "awsui_focusable_gwq0h_9z7os_305"
 };