@cloudscape-design/components-themeable 3.0.348 → 3.0.350

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "b500fa02c42a0e1fd5bdc54e65c61208f3fb0829"
+  "commit": "b80535d74110de4e1e2e3459ef46bbb215d3baf3"
 }

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss

@@ -61,6 +61,7 @@
   height: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
 
   &:not(.has-multiple-triggers).has-open-drawer {
@@ -124,6 +125,7 @@
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   pointer-events: auto;
   word-wrap: break-word;

package/lib/internal/scss/app-layout/visual-refresh/layout.scss

@@ -211,7 +211,7 @@ explicitly set in script.
 
   // The Header gap is slightly smaller when it comes after the Breadcrumbs
   &.has-breadcrumbs.has-header {
-    #{custom-props.$headerGap}: #{awsui.$space-scaled-xxs};
+    #{custom-props.$headerGap}: #{awsui.$space-scaled-xs};
   }
 
   // Set the Main gap when it follows the Notifications
@@ -236,13 +236,13 @@ explicitly set in script.
 
   // Set the Main gap when it follows the Header
   &.has-header {
-    #{custom-props.$mainGap}: #{awsui.$space-scaled-xl};
+    #{custom-props.$mainGap}: #{awsui.$space-content-header-padding-bottom};
   }
 
   // Set the Main gap when it is the first page content
   &.content-first-child-main:not(.is-overlap-disabled),
   &.content-first-child-main.is-overlap-disabled:not(.disable-content-paddings) {
-    #{custom-props.$mainGap}: #{awsui.$space-scaled-xs};
+    #{custom-props.$mainGap}: #{awsui.$space-scaled-s};
   }
 
   // Set an extension of the overlap and an additional gap on top to be used by content-layout without header

package/lib/internal/scss/app-layout/visual-refresh/navigation.scss

@@ -92,6 +92,7 @@ nav.navigation {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   position: relative;
   word-wrap: break-word;

package/lib/internal/scss/app-layout/visual-refresh/tools.scss

@@ -66,6 +66,7 @@ viewport size and state of the Tools drawer.
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   pointer-events: auto;
   position: relative;

package/lib/internal/scss/button/styles.scss

@@ -80,7 +80,7 @@
   letter-spacing: awsui.$font-button-letter-spacing;
   border-radius: awsui.$border-radius-button;
   border: styles.$control-border-width solid;
-  padding: styles.$control-padding-vertical awsui.$space-l;
+  padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;

package/lib/internal/scss/button-dropdown/category-elements/styles.scss

@@ -6,7 +6,6 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 
-$option-padding-horizontal: awsui.$space-l;
 .header {
   position: relative;
   margin: 0;
@@ -21,7 +20,7 @@ $option-padding-horizontal: awsui.$space-l;
   // to compensate for the loss of padding due to the removal of the left and right borders
   // and differences in default divider + selected border widths (visual refresh)
   padding: styles.$option-padding-with-border-placeholder-vertical
-    calc(#{$option-padding-horizontal} + #{awsui.$border-item-width});
+    calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
   z-index: 1;
 
   &.disabled {
@@ -46,7 +45,7 @@ $option-padding-horizontal: awsui.$space-l;
       background-color: awsui.$color-background-dropdown-item-hover;
       color: awsui.$color-text-dropdown-item-highlighted;
       // reset padding when adding border back in
-      padding: styles.$option-padding-vertical $option-padding-horizontal;
+      padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
       border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
       border-radius: awsui.$border-radius-item;
       z-index: 2;

package/lib/internal/scss/button-dropdown/item-element/styles.scss

@@ -77,7 +77,7 @@
   @include styles.text-wrapping;
   display: flex;
   align-items: flex-start;
-  padding: styles.$option-padding-vertical awsui.$space-l;
+  padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
   color: inherit;
   text-decoration: none;
 
@@ -88,7 +88,7 @@
   /* stylelint-disable-next-line selector-max-type */
   .has-category-header > &,
   .has-category-header > span > & {
-    padding-left: awsui.$space-xxl;
+    padding-left: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
   }
 }
 

package/lib/internal/scss/cards/styles.scss

@@ -21,7 +21,7 @@
     padding-top: 0;
     padding-left: 0;
     padding-right: 0;
-    padding-bottom: #{awsui.$space-container-header-vertical};
+    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
   }
 }
 
@@ -49,7 +49,7 @@
   width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
   top: 0;
   right: 0;
-  padding: awsui.$space-scaled-l awsui.$space-card-horizontal;
+  padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
 }
 
 .loading,
@@ -77,13 +77,7 @@
     position: relative;
     background-color: awsui.$color-background-container-content;
     margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
-    padding: awsui.$space-scaled-l awsui.$space-card-horizontal awsui.$space-scaled-l;
-    // HACK: IE shadow comes with full border that we need to take into account
-    @media screen and (-ms-high-contrast: active) {
-      padding: calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width})
-        calc(#{awsui.$space-card-horizontal} - #{awsui.$border-item-width})
-        calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width});
-    }
+    padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
     @include styles.container-shadow;
     width: 100%;
     min-width: 0;

package/lib/internal/scss/container/shared.scss

@@ -7,8 +7,8 @@
 @use '../internal/styles/tokens' as awsui;
 
 $header-padding-horizontal: awsui.$space-container-horizontal;
-$header-padding-vertical: awsui.$space-container-header-vertical;
-$header-padding: $header-padding-vertical $header-padding-horizontal;
+$header-padding: awsui.$space-container-header-top awsui.$space-container-horizontal
+  awsui.$space-container-header-bottom;
 $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 
 // HACK: Remediate focus border for expandable section

package/lib/internal/scss/container/styles.scss

@@ -158,6 +158,9 @@
 
   &.with-paddings {
     padding: shared.$header-padding;
+    &.header-variant-cards {
+      padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
+    }
   }
 
   &.with-hidden-content {

package/lib/internal/scss/expandable-section/styles.scss

@@ -105,8 +105,8 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 
   &-container {
-    padding-top: container.$header-padding-vertical;
-    padding-bottom: container.$header-padding-vertical;
+    padding-top: awsui.$space-container-header-top;
+    padding-bottom: awsui.$space-container-header-bottom;
     padding-right: container.$header-padding-horizontal;
 
     &.header-deprecated {

package/lib/internal/scss/header/styles.scss

@@ -13,31 +13,23 @@
   width: 100%;
   flex-wrap: wrap;
   justify-content: space-between;
-
-  &-no-actions {
-    &.root-variant-h1 {
-      padding-bottom: 0;
-      &-refresh {
-        padding-bottom: awsui.$space-xxxs;
-      }
-    }
+  column-gap: awsui.$space-xs;
+  &.refresh {
+    row-gap: awsui.$space-scaled-xxs;
   }
 
   &-no-actions,
   &-has-description {
-    &.root-variant-h2 {
+    &.root-variant-h2:not(.refresh),
+    &.root-variant-h3:not(.refresh) {
       padding-bottom: awsui.$space-scaled-xxs;
-      &-refresh {
-        padding-bottom: awsui.$space-xxxs;
-      }
-    }
-    &.root-variant-h3 {
-      padding-bottom: awsui.$space-scaled-xxs;
-      &-refresh {
-        padding-bottom: 0;
-      }
     }
   }
+  // H3s are most often used inside containers, so minimal headings have extra padding below
+  // to prevent info links from having overlapping touch targets with surrounding elements.
+  &-no-actions:not(.root-has-description).refresh.root-variant-h3 {
+    padding-bottom: awsui.$space-scaled-xs;
+  }
 
   &-no-wrap {
     flex-wrap: nowrap;
@@ -49,32 +41,31 @@
   word-wrap: break-word;
   max-width: 100%;
 
-  :not(.root-no-actions) > & {
-    margin-right: awsui.$space-xs;
+  &.refresh {
+    display: flex;
+    flex-direction: column;
+    // Can't use justify-content: center because it won't align with configurable dashboard handle icon
   }
 
   &-variant-h1 {
     padding: awsui.$space-scaled-2x-xxs 0;
-    &-refresh {
-      padding: awsui.$space-xxs 0;
+    &.refresh {
+      padding: 0;
+      row-gap: awsui.$space-scaled-xxs;
     }
   }
-  :not(.root-no-actions) > &-variant-h1-refresh {
-    padding-top: awsui.$space-scaled-xxxs;
-  }
 
   // So that headers with only a title have the same height as headers with actions and descriptions
   &-variant-h2,
   &-variant-h3 {
-    padding-top: awsui.$space-scaled-xxs;
-    :not(.root-has-description) > & {
-      padding-bottom: awsui.$space-xxxs;
+    &:not(.refresh) {
+      padding-top: awsui.$space-scaled-xxs;
+      :not(.root-has-description) > & {
+        padding-bottom: awsui.$space-xxxs;
+      }
     }
-  }
-  &-variant-h2-refresh {
-    padding-top: 0;
-    :not(.root-has-description) > & {
-      padding-bottom: 0;
+    &.refresh {
+      row-gap: awsui.$space-scaled-xxxs;
     }
   }
 }
@@ -84,25 +75,29 @@
   // https://github.com/philipwalton/flexbugs/issues/170
   display: flex;
   align-items: flex-start;
-  &-variant-h1 {
+
+  // Calculate padding so the heading text is better aligned with the buttons.
+  // Can't align-items: middle because we want buttons to stay at the top of the container when text wraps to multiple lines.
+  &-variant-h1.refresh {
+    padding: calc((#{awsui.$font-heading-xl-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
+  }
+  &-variant-h2.refresh {
+    padding: calc((#{awsui.$font-heading-l-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
+  }
+  &-variant-h3.refresh {
+    padding: calc((#{awsui.$font-heading-m-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
+  }
+
+  &-variant-h1:not(.refresh) {
     padding: awsui.$space-scaled-xs 0;
-    &-refresh {
-      padding: awsui.$space-xs 0;
-    }
   }
-  &-variant-h2,
-  &-variant-h3 {
+  &-variant-h2:not(.refresh),
+  &-variant-h3:not(.refresh) {
     padding: awsui.$space-scaled-xxs 0;
     .root-has-description > & {
       padding-bottom: 0;
     }
   }
-  &-variant-h2-refresh {
-    padding-bottom: awsui.$space-xxxs;
-  }
-  &-variant-h3-refresh {
-    padding-bottom: 0;
-  }
 }
 
 .title {
@@ -111,19 +106,27 @@
 
   &-variant-h1 {
     font-size: awsui.$font-heading-xl-size;
-  }
-  &-variant-h2,
-  &-variant-h3 {
-    padding: awsui.$space-scaled-xxs 0;
+    // Use padding rather than center align so that all headers of the same size start at the same height in the container,
+    // whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
+    &.refresh {
+      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-xl-line-height}) / 2);
+    }
   }
   &-variant-h2 {
     font-size: awsui.$font-heading-l-size;
-    &-refresh {
-      padding-top: awsui.$space-scaled-2x-xxs;
+    &.refresh {
+      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-l-line-height}) / 2);
     }
   }
   &-variant-h3 {
     font-size: awsui.$font-heading-m-size;
+    &.refresh {
+      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-m-line-height}) / 2);
+    }
+  }
+  &-variant-h2:not(.refresh),
+  &-variant-h3:not(.refresh) {
+    padding: awsui.$space-scaled-xxs 0;
   }
 }
 
@@ -140,21 +143,21 @@
 
   &-variant-h1 {
     @include styles.font-body-m;
-    padding-top: awsui.$space-scaled-xxs;
-    &-refresh {
-      padding-top: awsui.$space-scaled-xs;
+    &:not(.refresh) {
+      padding-top: awsui.$space-scaled-xxs;
     }
   }
   &-variant-h2 {
     font-size: awsui.$font-header-h2-description-size;
     line-height: awsui.$font-header-h2-description-line-height;
-    padding-bottom: awsui.$space-scaled-xxs;
+    &:not(.refresh) {
+      padding-bottom: awsui.$space-scaled-xxs;
+    }
   }
   &-variant-h3 {
     @include styles.font-body-s;
-    padding-bottom: awsui.$space-scaled-xxs;
-    &-refresh {
-      padding-top: awsui.$space-xxxs;
+    &:not(.refresh) {
+      padding-bottom: awsui.$space-scaled-xxs;
     }
   }
 }

package/lib/internal/scss/modal/styles.scss

@@ -93,7 +93,7 @@ $modal-z-index: 5000;
 }
 
 .header {
-  padding: awsui.$space-s awsui.$space-modal-horizontal;
+  padding: awsui.$space-container-header-top awsui.$space-modal-horizontal awsui.$space-container-header-bottom;
   background-color: awsui.$color-background-container-header;
   border-bottom: 1px solid awsui.$color-border-container-divider;
   border-radius: awsui.$border-radius-container awsui.$border-radius-container 0 0;

package/lib/internal/scss/segmented-control/segment.scss

@@ -39,7 +39,7 @@ $selected-color: awsui.$color-text-segment-active;
   @include styles.font-button;
   letter-spacing: 0.25px;
   border: styles.$control-border-width solid $default-border-color;
-  padding: styles.$control-padding-vertical awsui.$space-l;
+  padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
   border-right-width: 0;
   background: $default-background;
   color: $default-color;

package/lib/internal/scss/table/body-cell/styles.scss

@@ -18,6 +18,12 @@ $cell-horizontal-padding-w-border: calc(#{$cell-edge-horizontal-padding} + #{aws
 $selected-border: awsui.$border-item-width solid awsui.$color-border-item-selected;
 $selected-border-placeholder: awsui.$border-divider-list-width solid awsui.$color-border-item-placeholder;
 $border-placeholder: awsui.$border-item-width solid transparent;
+$icon-width-with-spacing: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
+// Right paddings of the absolute positioned icons (success icon is shown next to the edit icon)
+$edit-button-padding-right: calc(
+  #{awsui.$space-xs} + #{awsui.$space-xxs}
+); // Cell vertical padding + xxs space that would normally come from the button.
+$success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
 
 .body-cell {
   box-sizing: border-box;
@@ -180,6 +186,15 @@ $border-placeholder: awsui.$border-item-width solid transparent;
   &-selected:not(.body-cell-prev-selected) {
     padding-top: $cell-vertical-padding;
   }
+
+  &-editor {
+    padding: 0 $edit-button-padding-right 0 0;
+  }
+
+  &-success {
+    padding: 0 $success-icon-padding-right 0 0;
+  }
+
   &-success,
   &-editor {
     top: 0;
@@ -196,10 +211,7 @@ $border-placeholder: awsui.$border-item-width solid transparent;
     outline: 0;
     background: 0;
     border: 0;
-    padding: 0;
 
-    // Additional xxs padding that would normally come from the Inline Icon Button
-    padding-right: calc(#{awsui.$space-xs} + #{awsui.$space-xxs});
     color: awsui.$color-text-button-normal-default;
 
     &:hover {
@@ -256,20 +268,22 @@ $border-placeholder: awsui.$border-item-width solid transparent;
           opacity: 1;
         }
         & > .body-cell-success {
-          opacity: 0;
+          opacity: 1;
         }
       }
       & > .body-cell-editor {
         opacity: 0;
       }
-      &.body-cell-has-success {
-        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
-      }
       // We don't use our focus-visible polyfill here because it doesn't work properly with screen readers.
       // These edit buttons are special because they are visually hidden (opacity: 0), but exposed to assistive technology.
       // It's therefore important to display the focus outline, even when a keyboard user wasn't detected.
       // For example, when an edit button is selected from the VoiceOver rotor menu.
       &:focus-within {
+        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+        &.body-cell-has-success {
+          // After a successful edit, we display the success icon next to the edit button and need additional padding to not let the text overflow the success icon.
+          padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
+        }
         @include focused-editor-styles;
         @include styles.focus-highlight(
           (
@@ -293,7 +307,11 @@ $border-placeholder: awsui.$border-item-width solid transparent;
           right: 0;
         }
         & > .body-cell-editor {
-          padding-right: calc(#{awsui.$space-xs} + #{awsui.$space-xxs} - (2 * #{awsui.$border-divider-list-width}));
+          padding-right: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
+        }
+        & > .body-cell-success {
+          // Update padding to avoid a jumping icon because of the additional borders added when hovering an editable cell.
+          padding-right: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
         }
         &.body-cell-last-row.body-cell-selected,
         &.body-cell-next-selected {
@@ -322,6 +340,7 @@ $border-placeholder: awsui.$border-item-width solid transparent;
       border-top-right-radius: awsui.$border-radius-item;
       border-bottom-right-radius: awsui.$border-radius-item;
     }
+    &.body-cell-first-row > .body-cell-success,
     &.body-cell-first-row > .body-cell-editor {
       padding-top: awsui.$border-divider-list-width;
     }

package/lib/internal/scss/table/styles.scss

@@ -17,7 +17,7 @@
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
-  padding: awsui.$space-scaled-xs 0 awsui.$space-scaled-xxs;
+  padding: awsui.$space-scaled-xs 0 awsui.$space-table-header-tools-bottom;
 
   &-filtering {
     @supports (flex-basis: fit-content) {
@@ -63,8 +63,6 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  padding-top: awsui.$space-table-content-top;
-  padding-bottom: awsui.$space-table-content-bottom;
   overflow-x: auto;
 
   scrollbar-width: none; /* Hide scrollbar in Firefox */
@@ -75,15 +73,8 @@
       padding-right: awsui.$space-table-horizontal;
     }
   }
-  &.variant-embedded,
-  &.variant-borderless {
-    padding-bottom: awsui.$space-table-embedded-content-bottom;
-  }
-  &.has-header {
-    padding-top: 0px;
-  }
-  &.has-footer {
-    padding-bottom: 0px;
+  &.variant-container:not(.has-footer) {
+    padding-bottom: awsui.$space-table-content-bottom;
   }
   &:not(.has-header) {
     border-top-right-radius: awsui.$border-radius-container;
@@ -182,11 +173,12 @@ the default white background of the container component.
 }
 
 .header-controls {
-  padding-top: awsui.$space-container-header-vertical;
-  padding-bottom: awsui.$space-container-header-vertical;
+  padding-top: awsui.$space-container-header-top;
+  padding-bottom: awsui.$space-container-header-bottom;
 
   &.variant-full-page {
     padding-top: 0;
+    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
   }
   &.variant-stacked,
   &.variant-container {

package/lib/internal/template/alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAa,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAGpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAa,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAyCpF"}

package/lib/internal/template/alert/index.js

@@ -1,13 +1,48 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect } from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalAlert from './internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
+import { FunnelMetrics } from '../internal/analytics';
+import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
+import { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';
 export default function Alert(_a) {
     var { type = 'info', visible = true } = _a, props = __rest(_a, ["type", "visible"]);
     const baseComponentProps = useBaseComponent('Alert');
+    const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
+    const { stepNumber, stepNameSelector } = useFunnelStep();
+    const { subStepSelector, subStepNameSelector } = useFunnelSubStep();
+    useEffect(() => {
+        if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {
+            const stepName = getNameFromSelector(stepNameSelector);
+            const subStepName = getNameFromSelector(subStepNameSelector);
+            errorCount.current++;
+            if (subStepSelector) {
+                FunnelMetrics.funnelSubStepError({
+                    funnelInteractionId,
+                    subStepSelector,
+                    subStepName,
+                    subStepNameSelector,
+                    stepNumber,
+                    stepName,
+                    stepNameSelector,
+                    subStepAllSelector: getSubStepAllSelector(),
+                });
+            }
+            else {
+                FunnelMetrics.funnelError({
+                    funnelInteractionId,
+                });
+            }
+            return () => {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                errorCount.current--;
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [funnelInteractionId, visible, submissionAttempt, errorCount]);
     return React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps));
 }
 applyDisplayName(Alert, 'Alert');

package/lib/internal/template/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AACvC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAuD;QAAvD,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACrE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC5F,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { AlertProps };\n\nexport default function Alert({ type = 'info', visible = true, ...props }: AlertProps) {\n  const baseComponentProps = useBaseComponent('Alert');\n  return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Alert, 'Alert');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AACvC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACpG,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAI7F,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAuD;QAAvD,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACrE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACxF,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IACzD,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,IAAI,OAAO,IAAI,IAAI,KAAK,OAAO,IAAI,WAAW,CAAC,OAAO,KAAK,UAAU,EAAE;YAC5F,MAAM,QAAQ,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YACvD,MAAM,WAAW,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;YAE7D,UAAU,CAAC,OAAO,EAAE,CAAC;YAErB,IAAI,eAAe,EAAE;gBACnB,aAAa,CAAC,kBAAkB,CAAC;oBAC/B,mBAAmB;oBACnB,eAAe;oBACf,WAAW;oBACX,mBAAmB;oBACnB,UAAU;oBACV,QAAQ;oBACR,gBAAgB;oBAChB,kBAAkB,EAAE,qBAAqB,EAAE;iBAC5C,CAAC,CAAC;aACJ;iBAAM;gBACL,aAAa,CAAC,WAAW,CAAC;oBACxB,mBAAmB;iBACpB,CAAC,CAAC;aACJ;YAED,OAAO,GAAG,EAAE;gBACV,uDAAuD;gBACvD,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC;SACH;QAED,uDAAuD;IACzD,CAAC,EAAE,CAAC,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IAElE,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC5F,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\n\nexport { AlertProps };\n\nexport default function Alert({ type = 'info', visible = true, ...props }: AlertProps) {\n  const baseComponentProps = useBaseComponent('Alert');\n\n  const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n  const { stepNumber, stepNameSelector } = useFunnelStep();\n  const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n  useEffect(() => {\n    if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n      const stepName = getNameFromSelector(stepNameSelector);\n      const subStepName = getNameFromSelector(subStepNameSelector);\n\n      errorCount.current++;\n\n      if (subStepSelector) {\n        FunnelMetrics.funnelSubStepError({\n          funnelInteractionId,\n          subStepSelector,\n          subStepName,\n          subStepNameSelector,\n          stepNumber,\n          stepName,\n          stepNameSelector,\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      } else {\n        FunnelMetrics.funnelError({\n          funnelInteractionId,\n        });\n      }\n\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        errorCount.current--;\n      };\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n  return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Alert, 'Alert');\n"]}

package/lib/internal/template/app-layout/styles.css.js

@@ -1,22 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "resize-active": "awsui_resize-active_lm6vo_2ctod_98",
-  "resize-side": "awsui_resize-side_lm6vo_2ctod_104",
-  "resize-bottom": "awsui_resize-bottom_lm6vo_2ctod_107",
-  "with-motion": "awsui_with-motion_lm6vo_2ctod_112",
-  "root": "awsui_root_lm6vo_2ctod_127",
-  "layout-wrapper": "awsui_layout-wrapper_lm6vo_2ctod_128",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_2ctod_135",
-  "layout": "awsui_layout_lm6vo_2ctod_128",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_2ctod_146",
-  "layout-main": "awsui_layout-main_lm6vo_2ctod_150",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_2ctod_156",
-  "unfocusable": "awsui_unfocusable_lm6vo_2ctod_161",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_2ctod_165",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_2ctod_170",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_2ctod_174",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_2ctod_178",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_2ctod_182"
+  "resize-active": "awsui_resize-active_lm6vo_iriab_98",
+  "resize-side": "awsui_resize-side_lm6vo_iriab_104",
+  "resize-bottom": "awsui_resize-bottom_lm6vo_iriab_107",
+  "with-motion": "awsui_with-motion_lm6vo_iriab_112",
+  "root": "awsui_root_lm6vo_iriab_127",
+  "layout-wrapper": "awsui_layout-wrapper_lm6vo_iriab_128",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_iriab_135",
+  "layout": "awsui_layout_lm6vo_iriab_128",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_iriab_146",
+  "layout-main": "awsui_layout-main_lm6vo_iriab_150",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_iriab_156",
+  "unfocusable": "awsui_unfocusable_lm6vo_iriab_161",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_iriab_165",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_iriab_170",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_iriab_174",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_iriab_178",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_iriab_182"
 };