@cloudscape-design/components-themeable 3.0.339 → 3.0.341

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

@@ -1,36 +1,33 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_mn3pm_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_mn3pm_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_mn3pm_119",
-  "icon": "awsui_icon_gwq0h_mn3pm_133",
-  "root": "awsui_root_gwq0h_mn3pm_151",
-  "expand-button": "awsui_expand-button_gwq0h_mn3pm_168",
-  "expanded": "awsui_expanded_gwq0h_mn3pm_175",
-  "icon-container": "awsui_icon-container_gwq0h_mn3pm_179",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_mn3pm_184",
-  "wrapper": "awsui_wrapper_gwq0h_mn3pm_188",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_mn3pm_195",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_mn3pm_198",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_mn3pm_204",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_mn3pm_207",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_mn3pm_224",
-  "header": "awsui_header_gwq0h_mn3pm_228",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_mn3pm_231",
-  "header-deprecated": "awsui_header-deprecated_gwq0h_mn3pm_231",
-  "header-button": "awsui_header-button_gwq0h_mn3pm_241",
-  "header-container-button": "awsui_header-container-button_gwq0h_mn3pm_245",
-  "header-container": "awsui_header-container_gwq0h_mn3pm_245",
-  "header-navigation": "awsui_header-navigation_gwq0h_mn3pm_269",
-  "content": "awsui_content_gwq0h_mn3pm_97",
-  "content-default": "awsui_content-default_gwq0h_mn3pm_305",
-  "content-footer": "awsui_content-footer_gwq0h_mn3pm_308",
-  "content-expanded": "awsui_content-expanded_gwq0h_mn3pm_311",
-  "focusable": "awsui_focusable_gwq0h_mn3pm_315",
-  "click-target": "awsui_click-target_gwq0h_mn3pm_326",
-  "description-default": "awsui_description-default_gwq0h_mn3pm_333",
-  "description-footer": "awsui_description-footer_gwq0h_mn3pm_334",
-  "description-container": "awsui_description-container_gwq0h_mn3pm_338"
+  "content-enter": "awsui_content-enter_gwq0h_1hnxv_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1hnxv_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1hnxv_119",
+  "icon": "awsui_icon_gwq0h_1hnxv_133",
+  "root": "awsui_root_gwq0h_1hnxv_151",
+  "expand-button": "awsui_expand-button_gwq0h_1hnxv_168",
+  "expanded": "awsui_expanded_gwq0h_1hnxv_175",
+  "icon-container": "awsui_icon-container_gwq0h_1hnxv_179",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1hnxv_184",
+  "wrapper": "awsui_wrapper_gwq0h_1hnxv_188",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1hnxv_195",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1hnxv_195",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1hnxv_198",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1hnxv_201",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_1hnxv_217",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1hnxv_248",
+  "header": "awsui_header_gwq0h_1hnxv_217",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1hnxv_255",
+  "header-button": "awsui_header-button_gwq0h_1hnxv_265",
+  "header-container-button": "awsui_header-container-button_gwq0h_1hnxv_265",
+  "header-container": "awsui_header-container_gwq0h_1hnxv_265",
+  "header-navigation": "awsui_header-navigation_gwq0h_1hnxv_297",
+  "content": "awsui_content_gwq0h_1hnxv_97",
+  "content-default": "awsui_content-default_gwq0h_1hnxv_333",
+  "content-footer": "awsui_content-footer_gwq0h_1hnxv_336",
+  "content-expanded": "awsui_content-expanded_gwq0h_1hnxv_339",
+  "focusable": "awsui_focusable_gwq0h_1hnxv_343",
+  "click-target": "awsui_click-target_gwq0h_1hnxv_354"
 };
   

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

@@ -94,10 +94,10 @@ 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_content-enter_gwq0h_mn3pm_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_mn3pm_1 var(--motion-duration-show-paced-et23hs, 180ms) var(--motion-easing-show-paced-ddbkug, ease-out);
+.awsui_content-enter_gwq0h_1hnxv_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_1hnxv_1 var(--motion-duration-show-paced-et23hs, 180ms) var(--motion-easing-show-paced-ddbkug, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_mn3pm_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_1hnxv_1 {
   from {
     opacity: 0.2;
   }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_mn3pm_97:not(#\9) {
+  .awsui_content-enter_gwq0h_1hnxv_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_mn3pm_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_mn3pm_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_1hnxv_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1hnxv_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_mn3pm_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_1hnxv_119:not(#\9) {
   transition: border-bottom-color var(--motion-duration-show-paced-et23hs, 180ms) var(--motion-easing-show-paced-ddbkug, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_mn3pm_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_1hnxv_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_mn3pm_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_mn3pm_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1hnxv_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1hnxv_119:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_mn3pm_133:not(#\9) {
+.awsui_icon_gwq0h_1hnxv_133:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-l1syz5, 135ms) var(--motion-easing-rotate-90-8xzw2x, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_mn3pm_133:not(#\9) {
+  .awsui_icon_gwq0h_1hnxv_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_mn3pm_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_mn3pm_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_1hnxv_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1hnxv_133:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -148,7 +148,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_gwq0h_mn3pm_151:not(#\9) {
+.awsui_root_gwq0h_1hnxv_151:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -191,91 +191,111 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_expand-button_gwq0h_mn3pm_168:not(#\9) {
+.awsui_expand-button_gwq0h_1hnxv_168:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_icon_gwq0h_mn3pm_133:not(#\9) {
+.awsui_icon_gwq0h_1hnxv_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_mn3pm_133.awsui_expanded_gwq0h_mn3pm_175:not(#\9) {
+.awsui_icon_gwq0h_1hnxv_133.awsui_expanded_gwq0h_1hnxv_175:not(#\9) {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_mn3pm_179:not(#\9) {
+.awsui_icon-container_gwq0h_1hnxv_179:not(#\9) {
   position: relative;
   margin-left: calc((var(--font-body-m-line-height-9vkzhc, 22px) - var(--size-icon-normal-sz51st, 16px)) / -2);
   margin-right: calc(var(--space-xxs-xx079q, 4px) + var(--border-divider-list-width-iu80dg, 1px));
 }
-.awsui_icon-container-container_gwq0h_mn3pm_184:not(#\9) {
+.awsui_icon-container-container_gwq0h_1hnxv_184:not(#\9) {
   margin-right: var(--space-xs-7veqkr, 8px);
 }
 
-.awsui_wrapper_gwq0h_mn3pm_188:not(#\9) {
+.awsui_wrapper_gwq0h_1hnxv_188:not(#\9) {
   box-sizing: border-box;
   border: none;
   width: 100%;
   line-height: var(--font-body-m-line-height-9vkzhc, 22px);
   text-align: left;
 }
-.awsui_wrapper-default_gwq0h_mn3pm_195:not(#\9) {
-  padding: var(--space-scaled-xxs-gmgwxk, 4px) var(--space-xxs-xx079q, 4px);
-}
-.awsui_wrapper-footer_gwq0h_mn3pm_198:not(#\9) {
-  padding: var(--space-scaled-xxs-gmgwxk, 4px) 0;
-}
-.awsui_wrapper-default_gwq0h_mn3pm_195:not(#\9), .awsui_wrapper-footer_gwq0h_mn3pm_198:not(#\9) {
+.awsui_wrapper-default_gwq0h_1hnxv_195:not(#\9), .awsui_wrapper-footer_gwq0h_1hnxv_195:not(#\9) {
   border: var(--border-divider-section-width-p0xg84, 1px) solid transparent;
 }
-.awsui_wrapper-navigation_gwq0h_mn3pm_204:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_1hnxv_198:not(#\9) {
   border-left: var(--border-divider-section-width-p0xg84, 1px) solid transparent;
 }
-.awsui_wrapper-navigation_gwq0h_mn3pm_204:not(#\9), .awsui_wrapper-container_gwq0h_mn3pm_207:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_1hnxv_198:not(#\9), .awsui_wrapper-container_gwq0h_1hnxv_201:not(#\9) {
   display: flex;
   font-weight: var(--font-heading-s-weight-rxw9ij, 700);
 }
-.awsui_wrapper-default_gwq0h_mn3pm_195:not(#\9), .awsui_wrapper-navigation_gwq0h_mn3pm_204:not(#\9), .awsui_wrapper-footer_gwq0h_mn3pm_198:not(#\9) {
+.awsui_wrapper-default_gwq0h_1hnxv_195:not(#\9), .awsui_wrapper-navigation_gwq0h_1hnxv_198:not(#\9), .awsui_wrapper-footer_gwq0h_1hnxv_195:not(#\9) {
   color: var(--color-text-expandable-section-default-egmtdl, #545b64);
   -webkit-font-smoothing: var(--font-smoothing-webkit-teqshp, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-apq2ca, auto);
   font-size: var(--font-expandable-heading-size-x20mdp, 14px);
   letter-spacing: var(--font-heading-s-letter-spacing-jp7jyt, normal);
 }
-.awsui_wrapper-container_gwq0h_mn3pm_207:not(#\9) {
-  padding: var(--space-container-header-vertical-ezarcz, 12px) var(--space-container-horizontal-7bp7wa, 20px);
+.awsui_wrapper-default_gwq0h_1hnxv_195:not(#\9) {
+  padding-top: var(--space-scaled-xxs-gmgwxk, 4px);
+  padding-bottom: var(--space-scaled-xxs-gmgwxk, 4px);
+  padding-right: var(--space-xxs-xx079q, 4px);
+}
+.awsui_wrapper-default_gwq0h_1hnxv_195.awsui_header-deprecated_gwq0h_1hnxv_217:not(#\9) {
+  padding-left: var(--space-xxs-xx079q, 4px);
+}
+.awsui_wrapper-default_gwq0h_1hnxv_195:not(#\9):not(.awsui_header-deprecated_gwq0h_1hnxv_217) {
+  padding-left: calc(var(--space-xxs-xx079q, 4px) + calc(var(--size-icon-normal-sz51st, 16px) + (var(--font-body-m-line-height-9vkzhc, 22px) - var(--size-icon-normal-sz51st, 16px)) / -2 + var(--space-xxs-xx079q, 4px) + var(--border-divider-list-width-iu80dg, 1px)));
+}
+.awsui_wrapper-footer_gwq0h_1hnxv_195:not(#\9) {
+  padding-top: var(--space-scaled-xxs-gmgwxk, 4px);
+  padding-bottom: var(--space-scaled-xxs-gmgwxk, 4px);
+  padding-right: 0;
+}
+.awsui_wrapper-footer_gwq0h_1hnxv_195.awsui_header-deprecated_gwq0h_1hnxv_217:not(#\9) {
+  padding-left: 0;
 }
-body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_mn3pm_207:not(#\9):focus {
+.awsui_wrapper-footer_gwq0h_1hnxv_195:not(#\9):not(.awsui_header-deprecated_gwq0h_1hnxv_217) {
+  padding-left: calc(var(--size-icon-normal-sz51st, 16px) + (var(--font-body-m-line-height-9vkzhc, 22px) - var(--size-icon-normal-sz51st, 16px)) / -2 + var(--space-xxs-xx079q, 4px) + var(--border-divider-list-width-iu80dg, 1px));
+}
+.awsui_wrapper-container_gwq0h_1hnxv_201:not(#\9) {
+  padding-top: var(--space-container-header-vertical-ezarcz, 12px);
+  padding-bottom: var(--space-container-header-vertical-ezarcz, 12px);
+  padding-right: var(--space-container-horizontal-7bp7wa, 20px);
+}
+.awsui_wrapper-container_gwq0h_1hnxv_201.awsui_header-deprecated_gwq0h_1hnxv_217:not(#\9) {
+  padding-left: var(--space-container-horizontal-7bp7wa, 20px);
+}
+.awsui_wrapper-container_gwq0h_1hnxv_201:not(#\9):not(.awsui_header-deprecated_gwq0h_1hnxv_217) {
+  padding-left: calc(var(--space-container-horizontal-7bp7wa, 20px) + calc(var(--size-icon-medium-9v2l3x, 16px) + (var(--font-body-m-line-height-9vkzhc, 22px) - var(--size-icon-normal-sz51st, 16px)) / -2 + var(--space-xs-7veqkr, 8px)));
+}
+body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1hnxv_201:not(#\9):focus {
   padding: calc(var(--space-scaled-s-73r995, 12px) - var(--border-divider-section-width-p0xg84, 1px)) calc(var(--space-l-z6h7qi, 20px) - var(--border-divider-section-width-p0xg84, 1px));
 }
-.awsui_wrapper-default_gwq0h_mn3pm_195.awsui_wrapper-expanded_gwq0h_mn3pm_224:not(#\9) {
+.awsui_wrapper-default_gwq0h_1hnxv_195.awsui_wrapper-expanded_gwq0h_1hnxv_248:not(#\9) {
   border-bottom-color: var(--color-border-divider-default-uqjcpn, #eaeded);
 }
 
-.awsui_header_gwq0h_mn3pm_228:not(#\9) {
+.awsui_header_gwq0h_1hnxv_217:not(#\9) {
   /* used in test-utils */
 }
-.awsui_header-wrapper_gwq0h_mn3pm_231:not(#\9), .awsui_header-deprecated_gwq0h_mn3pm_231:not(#\9) {
+.awsui_header-wrapper_gwq0h_1hnxv_255:not(#\9), .awsui_header-deprecated_gwq0h_1hnxv_217:not(#\9) {
   display: flex;
   font-weight: var(--font-heading-s-weight-rxw9ij, 700);
 }
-.awsui_header-wrapper_gwq0h_mn3pm_231:not(#\9) {
+.awsui_header-wrapper_gwq0h_1hnxv_255:not(#\9) {
   font-size: inherit;
   letter-spacing: inherit;
   margin: 0;
   padding: 0;
 }
-.awsui_header-button_gwq0h_mn3pm_241:not(#\9) {
-  box-sizing: border-box;
-  display: flex;
-}
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_mn3pm_241:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_mn3pm_245:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1hnxv_265:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1hnxv_265:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_mn3pm_241:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_mn3pm_245:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1hnxv_265:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1hnxv_265:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_mn3pm_241:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_mn3pm_245:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1hnxv_265:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1hnxv_265:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -286,13 +306,21 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_mn3pm_241:not(#\9
   border-radius: var(--border-radius-control-default-focus-ring-uu8qi4, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4clyb1, #0073bb);
 }
-.awsui_header-container_gwq0h_mn3pm_245:not(#\9) {
+.awsui_header-button_gwq0h_1hnxv_265:not(#\9) {
+  box-sizing: border-box;
+  display: flex;
+  margin-left: calc(-1 * calc(var(--size-icon-normal-sz51st, 16px) + (var(--font-body-m-line-height-9vkzhc, 22px) - var(--size-icon-normal-sz51st, 16px)) / -2 + var(--space-xxs-xx079q, 4px) + var(--border-divider-list-width-iu80dg, 1px)));
+}
+.awsui_header-container-button_gwq0h_1hnxv_265:not(#\9) {
+  margin-left: calc(-1 * calc(var(--size-icon-medium-9v2l3x, 16px) + (var(--font-body-m-line-height-9vkzhc, 22px) - var(--size-icon-normal-sz51st, 16px)) / -2 + var(--space-xs-7veqkr, 8px)));
+}
+.awsui_header-container_gwq0h_1hnxv_265:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_mn3pm_245 > .awsui_icon-container_gwq0h_mn3pm_179:not(#\9) {
+.awsui_header-container_gwq0h_1hnxv_265 > .awsui_icon-container_gwq0h_1hnxv_179:not(#\9) {
   margin-top: var(--space-expandable-section-icon-offset-top-4ysrlk, 8px);
 }
-.awsui_header-navigation_gwq0h_mn3pm_269 > .awsui_icon-container_gwq0h_mn3pm_179:not(#\9) {
+.awsui_header-navigation_gwq0h_1hnxv_297 > .awsui_icon-container_gwq0h_1hnxv_179:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-7jwgwp, #879596);
@@ -303,17 +331,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_mn3pm_241:not(#\9
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_mn3pm_269 > .awsui_icon-container_gwq0h_mn3pm_179:not(#\9):hover {
+.awsui_header-navigation_gwq0h_1hnxv_297 > .awsui_icon-container_gwq0h_1hnxv_179:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-tt7c4n, #16191f);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_mn3pm_269 > .awsui_icon-container_gwq0h_mn3pm_179:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1hnxv_297 > .awsui_icon-container_gwq0h_1hnxv_179:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_mn3pm_269 > .awsui_icon-container_gwq0h_mn3pm_179:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1hnxv_297 > .awsui_icon-container_gwq0h_1hnxv_179:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_mn3pm_269 > .awsui_icon-container_gwq0h_mn3pm_179:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1hnxv_297 > .awsui_icon-container_gwq0h_1hnxv_179:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -325,42 +353,33 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_mn3pm_269 > .
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4clyb1, #0073bb);
 }
 
-.awsui_content_gwq0h_mn3pm_97:not(#\9) {
+.awsui_content_gwq0h_1hnxv_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_mn3pm_305:not(#\9) {
+.awsui_content-default_gwq0h_1hnxv_333:not(#\9) {
   padding: var(--space-scaled-xs-sg3tfb, 8px) 0;
 }
-.awsui_content-footer_gwq0h_mn3pm_308:not(#\9) {
+.awsui_content-footer_gwq0h_1hnxv_336:not(#\9) {
   padding: var(--space-xs-7veqkr, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_mn3pm_311:not(#\9) {
+.awsui_content-expanded_gwq0h_1hnxv_339:not(#\9) {
   display: block;
 }
 
-.awsui_focusable_gwq0h_mn3pm_315:not(#\9):focus {
+.awsui_focusable_gwq0h_1hnxv_343:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_mn3pm_315:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1hnxv_343:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-gmdyxy, 1px) solid var(--color-border-item-focused-4clyb1, #0073bb);
   border-radius: var(--border-radius-control-default-focus-ring-uu8qi4, 2px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-qycpr2, 1px) var(--color-border-item-focused-4clyb1, #0073bb);
 }
 
-.awsui_click-target_gwq0h_mn3pm_326:not(#\9) {
+.awsui_click-target_gwq0h_1hnxv_354:not(#\9) {
   cursor: pointer;
 }
-.awsui_click-target_gwq0h_mn3pm_326:not(#\9):not(.awsui_wrapper-container_gwq0h_mn3pm_207):not(.awsui_header-container-button_gwq0h_mn3pm_245):hover {
+.awsui_click-target_gwq0h_1hnxv_354:not(#\9):not(.awsui_wrapper-container_gwq0h_1hnxv_201):not(.awsui_header-container-button_gwq0h_1hnxv_265):hover {
   color: var(--color-text-expandable-section-hover-tt7c4n, #16191f);
-}
-
-.awsui_description-default_gwq0h_mn3pm_333:not(#\9),
-.awsui_description-footer_gwq0h_mn3pm_334:not(#\9) {
-  padding-left: calc(var(--size-icon-normal-sz51st, 16px) + (var(--font-body-m-line-height-9vkzhc, 22px) - var(--size-icon-normal-sz51st, 16px)) / -2 + var(--space-xxs-xx079q, 4px) + var(--border-divider-list-width-iu80dg, 1px));
-}
-
-.awsui_description-container_gwq0h_mn3pm_338:not(#\9) {
-  padding-left: calc(var(--size-icon-medium-9v2l3x, 16px) + (var(--font-body-m-line-height-9vkzhc, 22px) - var(--size-icon-normal-sz51st, 16px)) / -2 + var(--space-xs-7veqkr, 8px));
 }

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

@@ -2,36 +2,33 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_mn3pm_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_mn3pm_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_mn3pm_119",
-  "icon": "awsui_icon_gwq0h_mn3pm_133",
-  "root": "awsui_root_gwq0h_mn3pm_151",
-  "expand-button": "awsui_expand-button_gwq0h_mn3pm_168",
-  "expanded": "awsui_expanded_gwq0h_mn3pm_175",
-  "icon-container": "awsui_icon-container_gwq0h_mn3pm_179",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_mn3pm_184",
-  "wrapper": "awsui_wrapper_gwq0h_mn3pm_188",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_mn3pm_195",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_mn3pm_198",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_mn3pm_204",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_mn3pm_207",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_mn3pm_224",
-  "header": "awsui_header_gwq0h_mn3pm_228",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_mn3pm_231",
-  "header-deprecated": "awsui_header-deprecated_gwq0h_mn3pm_231",
-  "header-button": "awsui_header-button_gwq0h_mn3pm_241",
-  "header-container-button": "awsui_header-container-button_gwq0h_mn3pm_245",
-  "header-container": "awsui_header-container_gwq0h_mn3pm_245",
-  "header-navigation": "awsui_header-navigation_gwq0h_mn3pm_269",
-  "content": "awsui_content_gwq0h_mn3pm_97",
-  "content-default": "awsui_content-default_gwq0h_mn3pm_305",
-  "content-footer": "awsui_content-footer_gwq0h_mn3pm_308",
-  "content-expanded": "awsui_content-expanded_gwq0h_mn3pm_311",
-  "focusable": "awsui_focusable_gwq0h_mn3pm_315",
-  "click-target": "awsui_click-target_gwq0h_mn3pm_326",
-  "description-default": "awsui_description-default_gwq0h_mn3pm_333",
-  "description-footer": "awsui_description-footer_gwq0h_mn3pm_334",
-  "description-container": "awsui_description-container_gwq0h_mn3pm_338"
+  "content-enter": "awsui_content-enter_gwq0h_1hnxv_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1hnxv_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1hnxv_119",
+  "icon": "awsui_icon_gwq0h_1hnxv_133",
+  "root": "awsui_root_gwq0h_1hnxv_151",
+  "expand-button": "awsui_expand-button_gwq0h_1hnxv_168",
+  "expanded": "awsui_expanded_gwq0h_1hnxv_175",
+  "icon-container": "awsui_icon-container_gwq0h_1hnxv_179",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1hnxv_184",
+  "wrapper": "awsui_wrapper_gwq0h_1hnxv_188",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1hnxv_195",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1hnxv_195",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1hnxv_198",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1hnxv_201",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_1hnxv_217",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1hnxv_248",
+  "header": "awsui_header_gwq0h_1hnxv_217",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1hnxv_255",
+  "header-button": "awsui_header-button_gwq0h_1hnxv_265",
+  "header-container-button": "awsui_header-container-button_gwq0h_1hnxv_265",
+  "header-container": "awsui_header-container_gwq0h_1hnxv_265",
+  "header-navigation": "awsui_header-navigation_gwq0h_1hnxv_297",
+  "content": "awsui_content_gwq0h_1hnxv_97",
+  "content-default": "awsui_content-default_gwq0h_1hnxv_333",
+  "content-footer": "awsui_content-footer_gwq0h_1hnxv_336",
+  "content-expanded": "awsui_content-expanded_gwq0h_1hnxv_339",
+  "focusable": "awsui_focusable_gwq0h_1hnxv_343",
+  "click-target": "awsui_click-target_gwq0h_1hnxv_354"
 };
   

package/lib/internal/template/form-field/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AActD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eA8GxB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAetD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eAmHxB"}

package/lib/internal/template/form-field/internal.js

@@ -16,7 +16,7 @@ import { useInternalI18n } from '../internal/i18n/context';
 import { InfoLinkLabelContext } from '../internal/context/info-link-label-context';
 import { FunnelMetrics } from '../internal/analytics';
 import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
-import { DATA_ATTR_FIELD_ERROR, DATA_ATTR_FIELD_LABEL, getFieldSlotSeletor, getSubStepAllSelector, } from '../internal/analytics/selectors';
+import { DATA_ATTR_FIELD_ERROR, DATA_ATTR_FIELD_LABEL, getFieldSlotSeletor, getNameFromSelector, getSubStepAllSelector, } from '../internal/analytics/selectors';
 export function FormFieldError({ id, children, errorIconAriaLabel }) {
     const i18n = useInternalI18n('form-field');
     return (React.createElement("div", { id: id, className: styles.error },
@@ -51,11 +51,15 @@ export default function InternalFormField(_a) {
     };
     useEffect(() => {
         if (funnelInteractionId && errorText) {
+            const stepName = getNameFromSelector(stepNameSelector);
+            const subStepName = getNameFromSelector(subStepNameSelector);
             FunnelMetrics.funnelSubStepError({
                 funnelInteractionId,
                 subStepSelector,
+                subStepName,
                 subStepNameSelector,
                 stepNumber,
+                stepName,
                 stepNameSelector,
                 fieldErrorSelector: getFieldSlotSeletor(slotIds.error),
                 fieldLabelSelector: getFieldSlotSeletor(slotIds.label),

package/lib/internal/template/form-field/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/internal.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, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n  DATA_ATTR_FIELD_ERROR,\n  DATA_ATTR_FIELD_LABEL,\n  getFieldSlotSeletor,\n  getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n  errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n  const i18n = useInternalI18n('form-field');\n\n  return (\n    <div id={id} className={styles.error}>\n      <div className={styles['error-icon-shake-wrapper']}>\n        <div\n          role=\"img\"\n          aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n          className={styles['error-icon-scale-wrapper']}\n        >\n          <InternalIcon name=\"status-warning\" size=\"small\" />\n        </div>\n      </div>\n      <span className={styles.error__message}>{children}</span>\n    </div>\n  );\n}\n\nexport function ConstraintText({\n  id,\n  hasError,\n  children,\n}: {\n  id?: string;\n  hasError: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n      {children}\n    </div>\n  );\n}\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  i18nStrings,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  __disableGutters = false,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const { funnelInteractionId, stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } =\n    useFunnelSubStep();\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  const analyticsAttributes = {\n    [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n    [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n  };\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText) {\n      FunnelMetrics.funnelSubStepError({\n        funnelInteractionId,\n        subStepSelector,\n        subStepNameSelector,\n        stepNumber,\n        stepNameSelector,\n        fieldErrorSelector: getFieldSlotSeletor(slotIds.error),\n        fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [funnelInteractionId, errorText]);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      ref={__internalRootRef}\n      {...analyticsAttributes}\n    >\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        <InfoLinkLabelContext.Provider value={slotIds.label}>\n          {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n        </InfoLinkLabelContext.Provider>\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n          <FormFieldContext.Provider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldContext.Provider>\n\n          {secondaryControl && (\n            <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldContext.Provider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && (\n            <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n              {errorText}\n            </FormFieldError>\n          )}\n          {constraintText && (\n            <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n              {constraintText}\n            </ConstraintText>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/internal.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, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n  DATA_ATTR_FIELD_ERROR,\n  DATA_ATTR_FIELD_LABEL,\n  getFieldSlotSeletor,\n  getNameFromSelector,\n  getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n  errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n  const i18n = useInternalI18n('form-field');\n\n  return (\n    <div id={id} className={styles.error}>\n      <div className={styles['error-icon-shake-wrapper']}>\n        <div\n          role=\"img\"\n          aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n          className={styles['error-icon-scale-wrapper']}\n        >\n          <InternalIcon name=\"status-warning\" size=\"small\" />\n        </div>\n      </div>\n      <span className={styles.error__message}>{children}</span>\n    </div>\n  );\n}\n\nexport function ConstraintText({\n  id,\n  hasError,\n  children,\n}: {\n  id?: string;\n  hasError: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n      {children}\n    </div>\n  );\n}\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  i18nStrings,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  __disableGutters = false,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const { funnelInteractionId, stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } =\n    useFunnelSubStep();\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  const analyticsAttributes = {\n    [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n    [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n  };\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText) {\n      const stepName = getNameFromSelector(stepNameSelector);\n      const subStepName = getNameFromSelector(subStepNameSelector);\n\n      FunnelMetrics.funnelSubStepError({\n        funnelInteractionId,\n        subStepSelector,\n        subStepName,\n        subStepNameSelector,\n        stepNumber,\n        stepName,\n        stepNameSelector,\n        fieldErrorSelector: getFieldSlotSeletor(slotIds.error),\n        fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [funnelInteractionId, errorText]);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      ref={__internalRootRef}\n      {...analyticsAttributes}\n    >\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        <InfoLinkLabelContext.Provider value={slotIds.label}>\n          {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n        </InfoLinkLabelContext.Provider>\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n          <FormFieldContext.Provider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldContext.Provider>\n\n          {secondaryControl && (\n            <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldContext.Provider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && (\n            <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n              {errorText}\n            </FormFieldError>\n          )}\n          {constraintText && (\n            <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n              {constraintText}\n            </ConstraintText>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAKL,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAU7D,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC/D,WAAW,EACX,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,2BAA4B,oBAAoB,gBA2D3E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACnF,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB,+CAAgD,wBAAwB,gBAqCvG,CAAC;AACF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,sBAAsB,iBAAkB,2BAA2B,gBAsB/E,CAAC"}
+{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAKL,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAW7D,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC/D,WAAW,EACX,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,2BAA4B,oBAAoB,gBA2D3E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACnF,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB,+CAAgD,wBAAwB,gBAyCvG,CAAC;AACF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,sBAAsB,iBAAkB,2BAA2B,gBAsB/E,CAAC"}

package/lib/internal/template/internal/analytics/components/analytics-funnel.js

@@ -8,7 +8,7 @@ import { useUniqueId } from '../../hooks/use-unique-id';
 import { useVisualRefresh } from '../../hooks/use-visual-mode';
 import { PACKAGE_VERSION } from '../../environment';
 import { FunnelMetrics } from '../';
-import { DATA_ATTR_FUNNEL_STEP, getFunnelNameSelector, getSubStepAllSelector, getSubStepNameSelector, getSubStepSelector, } from '../selectors';
+import { DATA_ATTR_FUNNEL_STEP, getFunnelNameSelector, getNameFromSelector, getSubStepAllSelector, getSubStepNameSelector, getSubStepSelector, } from '../selectors';
 export const FUNNEL_VERSION = '1.0';
 export const AnalyticsFunnel = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
@@ -72,10 +72,12 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
     // to record the beginning of the interaction with the current step.
     // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.
     useEffect(() => {
+        const stepName = getNameFromSelector(stepNameSelector);
         if (funnelInteractionId) {
             FunnelMetrics.funnelStepStart({
                 funnelInteractionId,
                 stepNumber,
+                stepName,
                 stepNameSelector,
                 subStepAllSelector: getSubStepAllSelector(),
             });
@@ -85,6 +87,7 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
                 FunnelMetrics.funnelStepComplete({
                     funnelInteractionId,
                     stepNumber,
+                    stepName,
                     stepNameSelector,
                     subStepAllSelector: getSubStepAllSelector(),
                 });

package/lib/internal/template/internal/analytics/components/analytics-funnel.js.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.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, { useEffect, useRef, useState } from 'react';\n\nimport {\n  FunnelStepContext,\n  FunnelSubStepContext,\n  FunnelContext,\n  FunnelContextValue,\n  FunnelStepContextValue,\n} from '../context/analytics-context';\nimport { useFunnel, useFunnelStep } from '../hooks/use-funnel';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport { PACKAGE_VERSION } from '../../environment';\n\nimport { FunnelMetrics } from '../';\nimport { FunnelProps, FunnelStepProps } from '../interfaces';\n\nimport {\n  DATA_ATTR_FUNNEL_STEP,\n  getFunnelNameSelector,\n  getSubStepAllSelector,\n  getSubStepNameSelector,\n  getSubStepSelector,\n} from '../selectors';\n\nexport const FUNNEL_VERSION = '1.0';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n  FunnelProps,\n  'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = ({ children, ...props }: AnalyticsFunnelProps) => {\n  const [funnelInteractionId, setFunnelInteractionId] = useState<string>('');\n  const funnelResultRef = useRef<boolean>(false);\n  const isVisualRefresh = useVisualRefresh();\n\n  // This useEffect hook is run once on component mount to initiate the funnel analytics.\n  // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details\n  // about the funnel, and receives a unique interaction id.\n  // This unique interaction id is then stored in the state for further use.\n  //\n  // On component unmount, it checks whether the funnel was successfully completed.\n  // Based on this, it either calls 'funnelComplete' or 'funnelCancelled' method from FunnelMetrics.\n  //\n  // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,\n  // hence we do not provide any dependencies.\n  useEffect(() => {\n    const funnelInteractionId = FunnelMetrics.funnelStart({\n      funnelNameSelector: getFunnelNameSelector(),\n      optionalStepNumbers: props.optionalStepNumbers,\n      funnelType: props.funnelType,\n      totalFunnelSteps: props.totalFunnelSteps,\n      componentVersion: PACKAGE_VERSION,\n      theme: isVisualRefresh ? 'vr' : 'classic',\n      funnelVersion: FUNNEL_VERSION,\n    });\n\n    setFunnelInteractionId(funnelInteractionId);\n\n    return () => {\n      if (funnelResultRef.current === true) {\n        FunnelMetrics.funnelSuccessful({ funnelInteractionId });\n      } else {\n        FunnelMetrics.funnelCancelled({ funnelInteractionId });\n      }\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const funnelSubmit = () => {\n    FunnelMetrics.funnelComplete({ funnelInteractionId });\n    funnelResultRef.current = true;\n  };\n\n  const funnelCancel = () => {\n    funnelResultRef.current = false;\n  };\n\n  const funnelContextValue: FunnelContextValue = {\n    funnelInteractionId,\n    setFunnelInteractionId,\n    funnelType: props.funnelType,\n    optionalStepNumbers: props.optionalStepNumbers,\n    totalFunnelSteps: props.totalFunnelSteps,\n    funnelSubmit,\n    funnelCancel,\n  };\n\n  return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = {\n  children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);\n} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;\n\nexport const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n  const { funnelInteractionId } = useFunnel();\n\n  const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n  // This useEffect hook is used to track the start and completion of interaction with the step.\n  // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics\n  // to record the beginning of the interaction with the current step.\n  // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.\n  useEffect(() => {\n    if (funnelInteractionId) {\n      FunnelMetrics.funnelStepStart({\n        funnelInteractionId,\n        stepNumber,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    return () => {\n      if (funnelInteractionId) {\n        FunnelMetrics.funnelStepComplete({\n          funnelInteractionId,\n          stepNumber,\n          stepNameSelector,\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      }\n    };\n  }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n  const contextValue: FunnelStepContextValue = { funnelInteractionId, stepNumber, stepNameSelector, funnelStepProps };\n  return (\n    <FunnelStepContext.Provider value={contextValue}>\n      {typeof children === 'function' ? children(contextValue) : children}\n    </FunnelStepContext.Provider>\n  );\n};\ninterface AnalyticsFunnelSubStepProps {\n  children?: React.ReactNode;\n}\n\nexport const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {\n  const { funnelInteractionId } = useFunnel();\n  const { stepNumber, stepNameSelector } = useFunnelStep();\n\n  const subStepId = useUniqueId('substep');\n  const subStepSelector = getSubStepSelector(subStepId);\n  const subStepNameSelector = getSubStepNameSelector(subStepId);\n\n  return (\n    <FunnelSubStepContext.Provider\n      value={{\n        funnelInteractionId,\n        stepNumber,\n        stepNameSelector,\n        subStepSelector,\n        subStepNameSelector,\n        subStepId,\n      }}\n    >\n      {children}\n    </FunnelSubStepContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"analytics-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.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, { useEffect, useRef, useState } from 'react';\n\nimport {\n  FunnelStepContext,\n  FunnelSubStepContext,\n  FunnelContext,\n  FunnelContextValue,\n  FunnelStepContextValue,\n} from '../context/analytics-context';\nimport { useFunnel, useFunnelStep } from '../hooks/use-funnel';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport { PACKAGE_VERSION } from '../../environment';\n\nimport { FunnelMetrics } from '../';\nimport { FunnelProps, FunnelStepProps } from '../interfaces';\n\nimport {\n  DATA_ATTR_FUNNEL_STEP,\n  getFunnelNameSelector,\n  getNameFromSelector,\n  getSubStepAllSelector,\n  getSubStepNameSelector,\n  getSubStepSelector,\n} from '../selectors';\n\nexport const FUNNEL_VERSION = '1.0';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n  FunnelProps,\n  'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = ({ children, ...props }: AnalyticsFunnelProps) => {\n  const [funnelInteractionId, setFunnelInteractionId] = useState<string>('');\n  const funnelResultRef = useRef<boolean>(false);\n  const isVisualRefresh = useVisualRefresh();\n\n  // This useEffect hook is run once on component mount to initiate the funnel analytics.\n  // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details\n  // about the funnel, and receives a unique interaction id.\n  // This unique interaction id is then stored in the state for further use.\n  //\n  // On component unmount, it checks whether the funnel was successfully completed.\n  // Based on this, it either calls 'funnelComplete' or 'funnelCancelled' method from FunnelMetrics.\n  //\n  // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,\n  // hence we do not provide any dependencies.\n  useEffect(() => {\n    const funnelInteractionId = FunnelMetrics.funnelStart({\n      funnelNameSelector: getFunnelNameSelector(),\n      optionalStepNumbers: props.optionalStepNumbers,\n      funnelType: props.funnelType,\n      totalFunnelSteps: props.totalFunnelSteps,\n      componentVersion: PACKAGE_VERSION,\n      theme: isVisualRefresh ? 'vr' : 'classic',\n      funnelVersion: FUNNEL_VERSION,\n    });\n\n    setFunnelInteractionId(funnelInteractionId);\n\n    return () => {\n      if (funnelResultRef.current === true) {\n        FunnelMetrics.funnelSuccessful({ funnelInteractionId });\n      } else {\n        FunnelMetrics.funnelCancelled({ funnelInteractionId });\n      }\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const funnelSubmit = () => {\n    FunnelMetrics.funnelComplete({ funnelInteractionId });\n    funnelResultRef.current = true;\n  };\n\n  const funnelCancel = () => {\n    funnelResultRef.current = false;\n  };\n\n  const funnelContextValue: FunnelContextValue = {\n    funnelInteractionId,\n    setFunnelInteractionId,\n    funnelType: props.funnelType,\n    optionalStepNumbers: props.optionalStepNumbers,\n    totalFunnelSteps: props.totalFunnelSteps,\n    funnelSubmit,\n    funnelCancel,\n  };\n\n  return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = {\n  children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);\n} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;\n\nexport const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n  const { funnelInteractionId } = useFunnel();\n\n  const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n  // This useEffect hook is used to track the start and completion of interaction with the step.\n  // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics\n  // to record the beginning of the interaction with the current step.\n  // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.\n  useEffect(() => {\n    const stepName = getNameFromSelector(stepNameSelector);\n\n    if (funnelInteractionId) {\n      FunnelMetrics.funnelStepStart({\n        funnelInteractionId,\n        stepNumber,\n        stepName,\n        stepNameSelector,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    return () => {\n      if (funnelInteractionId) {\n        FunnelMetrics.funnelStepComplete({\n          funnelInteractionId,\n          stepNumber,\n          stepName,\n          stepNameSelector,\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      }\n    };\n  }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n  const contextValue: FunnelStepContextValue = { funnelInteractionId, stepNumber, stepNameSelector, funnelStepProps };\n  return (\n    <FunnelStepContext.Provider value={contextValue}>\n      {typeof children === 'function' ? children(contextValue) : children}\n    </FunnelStepContext.Provider>\n  );\n};\ninterface AnalyticsFunnelSubStepProps {\n  children?: React.ReactNode;\n}\n\nexport const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {\n  const { funnelInteractionId } = useFunnel();\n  const { stepNumber, stepNameSelector } = useFunnelStep();\n\n  const subStepId = useUniqueId('substep');\n  const subStepSelector = getSubStepSelector(subStepId);\n  const subStepNameSelector = getSubStepNameSelector(subStepId);\n\n  return (\n    <FunnelSubStepContext.Provider\n      value={{\n        funnelInteractionId,\n        stepNumber,\n        stepNameSelector,\n        subStepSelector,\n        subStepNameSelector,\n        subStepId,\n      }}\n    >\n      {children}\n    </FunnelSubStepContext.Provider>\n  );\n};\n"]}