@cloudscape-design/components-themeable 3.0.73 → 3.0.75

package/lib/internal/scss/date-picker/styles.scss

@@ -21,10 +21,6 @@
   }
 }
 
-.screenreader-only {
-  @include styles.awsui-util-hide;
-}
-
 .date-picker-container {
   position: relative;
   max-width: 234px;

package/lib/internal/scss/date-range-picker/calendar/grids/styles.scss

@@ -30,11 +30,27 @@
   }
 }
 
-.day {
-  flex: 1 1 0%;
-  width: 0;
+.grid {
+  width: awsui.$size-calendar-grid-width;
+  border-spacing: 0;
+}
+.grid-cell {
+  width: calc(100% / 7);
   word-break: break-word;
   text-align: center;
+  font-weight: unset;
+}
+.day-header {
+  padding: awsui.$space-s 0 awsui.$space-xxs;
+  color: calendar.$grid-day-name-color;
+  @include styles.font-body-s;
+}
+
+.week {
+  /* used for identifying element */
+}
+
+.day {
   border-bottom: calendar.$grid-border;
   border-right: calendar.$grid-border;
   padding: awsui.$space-xxs 0;

package/lib/internal/scss/date-range-picker/styles.scss

@@ -7,7 +7,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/hooks/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
-@use '../calendar/calendar' as calendar;
 @use './motion';
 
 $calendar-grid-width: awsui.$size-calendar-grid-width;
@@ -73,26 +72,6 @@ $calendar-header-color: awsui.$color-text-body-default;
   &-prev-month-btn {
     /* used for identifying element */
   }
-
-  &-day-names {
-    display: flex;
-    justify-content: stretch;
-  }
-
-  &-day-name {
-    flex: 1 1 0%;
-    width: 0;
-    word-break: break-word;
-    text-align: center;
-    padding: awsui.$space-s 0 awsui.$space-xxs;
-    color: calendar.$grid-day-name-color;
-    @include styles.font-body-s;
-  }
-
-  &-week {
-    display: flex;
-    justify-content: stretch;
-  }
 }
 
 .first-grid,
@@ -100,10 +79,6 @@ $calendar-header-color: awsui.$color-text-body-default;
   /* used in test-utils */
 }
 
-.grid {
-  width: $calendar-grid-width;
-}
-
 .date-and-time-wrapper {
   width: $calendar-grid-width;
 }

package/lib/internal/scss/flashbar/styles.scss

@@ -2,10 +2,12 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/hooks/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use './motion';
+
 .flashbar {
   position: relative;
 }
@@ -94,7 +96,7 @@
   margin-left: awsui.$space-flashbar-action-left;
 }
 /* stylelint-disable selector-max-type */
-.flashbar.breakpoint-default > div > .flash > .flash-body {
+.flashbar.breakpoint-default > .flash > .flash-body {
   display: block;
   & > .action-button-wrapper {
     margin-left: awsui.$space-xxs;
@@ -122,3 +124,131 @@
 .flash-type-info {
   background-color: awsui.$color-background-notification-blue;
 }
+
+// `stackItems` feature beta test
+
+.stack {
+  display: grid;
+  grid-template-columns: 1fr minmax(70px, auto) 1fr;
+}
+
+.stack > .expanded {
+  grid-column: 1 / 4;
+}
+
+/*
+The collapsed stack is a dynamic grid that creates the necessary number of 
+rows and columns based on the number of items passed to CSS via the 
+`flashbarStackDepth` custom property. Assuming there are three flashbar items, 
+the grid layout will be: 
+
+[item 1 start] [12px] [12px] [fractional unit] [12px] [12px] [item 1 end]
+[12px] [item 2 start] [12px] [fractional unit] [12px] [item 2 end] [12px]
+[12px] [12px] [item 3 start] [fractional unit] [item 3 end] [12px] [12px]
+*/
+.stack > .collapsed {
+  display: grid;
+  grid-column: 1 / 4;
+  grid-template-columns:
+    repeat(var(#{custom-props.$flashbarStackDepth}), 12px)
+    1fr
+    repeat(var(#{custom-props.$flashbarStackDepth}), 12px);
+  row-gap: 8px;
+
+  > .item {
+    // Each item will have a unique custom property `flashbarStackIndex`
+    // Add +1 is because the array is indexed at zero but grid positions are indexed at 1.
+    grid-column-start: calc(var(#{custom-props.$flashbarStackIndex}) + 1);
+
+    // Add +1 to include the fractional unit in the column count
+    // Add +1 because the array indexed at zero but grid positions at indexed at 1.
+    grid-column-end: calc(
+      var(#{custom-props.$flashbarStackDepth}) * 2 + 1 - var(#{custom-props.$flashbarStackIndex}) + 1
+    );
+    grid-row-start: 1;
+    grid-row-end: calc(var(#{custom-props.$flashbarStackIndex}) + 2);
+
+    // The first item should have the highest z index than the second item, and so forth...
+    z-index: calc(var(#{custom-props.$flashbarStackDepth}) - var(#{custom-props.$flashbarStackIndex}));
+  }
+
+  > .item:not(:first-of-type) {
+    align-self: end;
+  }
+
+  &.visual-refresh > .item:not(:last-of-type) > :first-child {
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  }
+
+  &:not(.visual-refresh) > .item:not(:last-of-type) > :first-child {
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.stack > .toggle {
+  grid-column: 2;
+  grid-row: 2;
+
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+  }
+
+  &.visual-refresh {
+    background: awsui.$color-background-layout-toggle-default;
+    border: none;
+    border-radius: 0 0 10px 10px;
+    box-shadow: awsui.$shadow-panel-toggle;
+    color: awsui.$color-text-layout-toggle;
+    cursor: pointer;
+    padding: awsui.$space-scaled-xxs;
+    z-index: var(#{custom-props.$flashbarStackDepth});
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      background: awsui.$color-background-layout-toggle-hover;
+    }
+
+    &:active {
+      background: awsui.$color-background-layout-toggle-active;
+    }
+  }
+
+  &:not(.visual-refresh) {
+    background: awsui.$color-background-button-normal-default;
+    border: styles.$control-border-width solid awsui.$color-border-button-normal-default;
+    border-radius: awsui.$border-radius-button;
+    border-top: none;
+    cursor: pointer;
+    padding: styles.$control-padding-vertical awsui.$space-l;
+    text-decoration: none;
+
+    &:focus {
+      outline: none;
+      text-decoration: none;
+    }
+
+    &:hover {
+      background: awsui.$color-background-button-normal-hover;
+      border-color: awsui.$color-border-button-normal-hover;
+      text-decoration: none;
+    }
+
+    &:active {
+      background: awsui.$color-background-button-normal-active;
+      border-color: awsui.$color-border-button-normal-active;
+    }
+  }
+
+  > .icon {
+    @include styles.with-motion {
+      transition: transform awsui.$motion-duration-rotate-90 awsui.$motion-easing-rotate-90;
+    }
+
+    &.expanded {
+      transform: rotate(180deg);
+    }
+  }
+}

package/lib/internal/scss/internal/components/live-region/styles.scss

@@ -3,8 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../styles' as styles;
-
 .root {
-  @include styles.awsui-util-hide;
+  /* used in test-utils */
 }

package/lib/internal/scss/internal/components/screenreader-only/styles.scss

@@ -0,0 +1,10 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../styles' as styles;
+
+.root {
+  @include styles.awsui-util-hide;
+}

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,26 +1,28 @@
 
-    $offsetTop: --awsui-offset-top-ujkcpl;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-ujkcpl;
-$contentGapLeft: --awsui-content-gap-left-ujkcpl;
-$contentGapRight: --awsui-content-gap-right-ujkcpl;
-$contentHeight: --awsui-content-height-ujkcpl;
-$defaultMaxContentWidth: --awsui-default-max-content-width-ujkcpl;
-$defaultMinContentWidth: --awsui-default-min-content-width-ujkcpl;
-$footerHeight: --awsui-footer-height-ujkcpl;
-$headerHeight: --awsui-header-height-ujkcpl;
-$layoutWidth: --awsui-layout-width-ujkcpl;
-$mainOffsetLeft: --awsui-main-offset-left-ujkcpl;
-$maxContentWidth: --awsui-max-content-width-ujkcpl;
-$minContentWidth: --awsui-min-content-width-ujkcpl;
-$notificationsHeight: --awsui-notifications-height-ujkcpl;
-$overlapHeight: --awsui-overlap-height-ujkcpl;
-$navigationWidth: --awsui-navigation-width-ujkcpl;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-ujkcpl;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-ujkcpl;
-$splitPanelMinWidth: --awsui-split-panel-min-width-ujkcpl;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-ujkcpl;
-$toolsMaxWidth: --awsui-tools-max-width-ujkcpl;
-$toolsWidth: --awsui-tools-width-ujkcpl;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-ujkcpl;
-$contentScrollMargin: --awsui-content-scroll-margin-ujkcpl;
+    $offsetTop: --awsui-offset-top-f9jj7p;
+$offsetTopWithNotifications: --awsui-offset-top-with-notifications-f9jj7p;
+$contentGapLeft: --awsui-content-gap-left-f9jj7p;
+$contentGapRight: --awsui-content-gap-right-f9jj7p;
+$contentHeight: --awsui-content-height-f9jj7p;
+$defaultMaxContentWidth: --awsui-default-max-content-width-f9jj7p;
+$defaultMinContentWidth: --awsui-default-min-content-width-f9jj7p;
+$footerHeight: --awsui-footer-height-f9jj7p;
+$headerHeight: --awsui-header-height-f9jj7p;
+$layoutWidth: --awsui-layout-width-f9jj7p;
+$mainOffsetLeft: --awsui-main-offset-left-f9jj7p;
+$maxContentWidth: --awsui-max-content-width-f9jj7p;
+$minContentWidth: --awsui-min-content-width-f9jj7p;
+$notificationsHeight: --awsui-notifications-height-f9jj7p;
+$overlapHeight: --awsui-overlap-height-f9jj7p;
+$navigationWidth: --awsui-navigation-width-f9jj7p;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-f9jj7p;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-f9jj7p;
+$splitPanelMinWidth: --awsui-split-panel-min-width-f9jj7p;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-f9jj7p;
+$toolsMaxWidth: --awsui-tools-max-width-f9jj7p;
+$toolsWidth: --awsui-tools-width-f9jj7p;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-f9jj7p;
+$contentScrollMargin: --awsui-content-scroll-margin-f9jj7p;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-f9jj7p;
+$flashbarStackIndex: --awsui-flashbar-stack-index-f9jj7p;
     

package/lib/internal/template/alert/interfaces.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { BaseComponentProps } from '../internal/base-component';
 import { NonCancelableEventHandler } from '../internal/events';
 export declare namespace AlertProps {
@@ -8,6 +9,10 @@ export interface AlertProps extends BaseComponentProps {
      * Specifies the type of message you want to display.
      */
     type?: AlertProps.Type;
+    /**
+     * Provides a text alternative for the icon.
+     */
+    statusIconAriaLabel?: string;
     /**
      * Determines whether the alert is displayed.
      * @deprecated Use conditional rendering in your code instead of this prop

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IAEvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * **Deprecated**, replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated**, replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n\n  /**\n   * Provides a text alternative for the icon.\n   */\n  statusIconAriaLabel?: string;\n\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * **Deprecated**, replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated**, replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n}\n"]}

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

@@ -2,6 +2,6 @@ import { AlertProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { SomeRequired } from '../internal/types';
 declare type InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps;
-export default function InternalAlert({ type, visible, dismissible, dismissAriaLabel, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef, ...rest }: InternalAlertProps): JSX.Element;
+export default function InternalAlert({ type, statusIconAriaLabel, visible, dismissible, dismissAriaLabel, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef, ...rest }: InternalAlertProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASjD,aAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,OAAc,EACd,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eA6DpB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASjD,aAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,mBAAmB,EACnB,OAAc,EACd,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eA6DpB"}

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

@@ -20,7 +20,7 @@ var typeToIcon = {
 };
 export default function InternalAlert(_a) {
     var _b;
-    var type = _a.type, _c = _a.visible, visible = _c === void 0 ? true : _c, dismissible = _a.dismissible, dismissAriaLabel = _a.dismissAriaLabel, children = _a.children, header = _a.header, buttonText = _a.buttonText, action = _a.action, onDismiss = _a.onDismiss, onButtonClick = _a.onButtonClick, _d = _a.__internalRootRef, __internalRootRef = _d === void 0 ? null : _d, rest = __rest(_a, ["type", "visible", "dismissible", "dismissAriaLabel", "children", "header", "buttonText", "action", "onDismiss", "onButtonClick", "__internalRootRef"]);
+    var type = _a.type, statusIconAriaLabel = _a.statusIconAriaLabel, _c = _a.visible, visible = _c === void 0 ? true : _c, dismissible = _a.dismissible, dismissAriaLabel = _a.dismissAriaLabel, children = _a.children, header = _a.header, buttonText = _a.buttonText, action = _a.action, onDismiss = _a.onDismiss, onButtonClick = _a.onButtonClick, _d = _a.__internalRootRef, __internalRootRef = _d === void 0 ? null : _d, rest = __rest(_a, ["type", "statusIconAriaLabel", "visible", "dismissible", "dismissAriaLabel", "children", "header", "buttonText", "action", "onDismiss", "onButtonClick", "__internalRootRef"]);
     var baseProps = getBaseProps(rest);
     var _e = useContainerBreakpoints(['xs']), breakpoint = _e[0], breakpointRef = _e[1];
     var mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
@@ -31,7 +31,7 @@ export default function InternalAlert(_a) {
     return (React.createElement("div", __assign({}, baseProps, { "aria-hidden": !visible, className: clsx(styles.root, (_b = {}, _b[styles.hidden] = !visible, _b), baseProps.className, styles["breakpoint-".concat(breakpoint)]), ref: mergedRef }),
         React.createElement(VisualContext, { contextName: "alert" },
             React.createElement("div", { className: clsx(styles.alert, styles["type-".concat(type)]) },
-                React.createElement("div", { className: clsx(styles.icon, styles.text) },
+                React.createElement("div", { className: clsx(styles.icon, styles.text), role: "img", "aria-label": statusIconAriaLabel },
                     React.createElement(InternalIcon, { name: typeToIcon[type], size: size })),
                 React.createElement("div", { className: styles.body },
                     React.createElement("div", { className: clsx(styles.message, styles.text) },

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/alert/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 from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../button/internal';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { AlertProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n  error: 'status-negative',\n  warning: 'status-warning',\n  success: 'status-positive',\n  info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps;\n\nexport default function InternalAlert({\n  type,\n  visible = true,\n  dismissible,\n  dismissAriaLabel,\n  children,\n  header,\n  buttonText,\n  action,\n  onDismiss,\n  onButtonClick,\n  __internalRootRef = null,\n  ...rest\n}: InternalAlertProps) {\n  const baseProps = getBaseProps(rest);\n\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n  const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n  const isRefresh = useVisualRefresh();\n  const size = isRefresh ? 'normal' : header && children ? 'big' : 'normal';\n\n  const actionButton = action || (\n    <InternalButton\n      className={styles['action-button']}\n      onClick={() => fireNonCancelableEvent(onButtonClick)}\n      formAction=\"none\"\n    >\n      {buttonText}\n    </InternalButton>\n  );\n\n  const hasAction = Boolean(action || buttonText);\n\n  return (\n    <div\n      {...baseProps}\n      aria-hidden={!visible}\n      className={clsx(\n        styles.root,\n        { [styles.hidden]: !visible },\n        baseProps.className,\n        styles[`breakpoint-${breakpoint}`]\n      )}\n      ref={mergedRef}\n    >\n      <VisualContext contextName=\"alert\">\n        <div className={clsx(styles.alert, styles[`type-${type}`])}>\n          <div className={clsx(styles.icon, styles.text)}>\n            <InternalIcon name={typeToIcon[type]} size={size} />\n          </div>\n          <div className={styles.body}>\n            <div className={clsx(styles.message, styles.text)}>\n              {header && <div className={styles.header}>{header}</div>}\n              <div className={styles.content}>{children}</div>\n            </div>\n            {hasAction && <div className={styles.action}>{actionButton}</div>}\n          </div>\n          {dismissible && (\n            <div className={styles.dismiss}>\n              <InternalButton\n                className={styles['dismiss-button']}\n                variant=\"icon\"\n                iconName=\"close\"\n                formAction=\"none\"\n                ariaLabel={dismissAriaLabel}\n                onClick={() => fireNonCancelableEvent(onDismiss)}\n              />\n            </div>\n          )}\n        </div>\n      </VisualContext>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/alert/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 from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../button/internal';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { AlertProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n  error: 'status-negative',\n  warning: 'status-warning',\n  success: 'status-positive',\n  info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps;\n\nexport default function InternalAlert({\n  type,\n  statusIconAriaLabel,\n  visible = true,\n  dismissible,\n  dismissAriaLabel,\n  children,\n  header,\n  buttonText,\n  action,\n  onDismiss,\n  onButtonClick,\n  __internalRootRef = null,\n  ...rest\n}: InternalAlertProps) {\n  const baseProps = getBaseProps(rest);\n\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n  const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n  const isRefresh = useVisualRefresh();\n  const size = isRefresh ? 'normal' : header && children ? 'big' : 'normal';\n\n  const actionButton = action || (\n    <InternalButton\n      className={styles['action-button']}\n      onClick={() => fireNonCancelableEvent(onButtonClick)}\n      formAction=\"none\"\n    >\n      {buttonText}\n    </InternalButton>\n  );\n\n  const hasAction = Boolean(action || buttonText);\n\n  return (\n    <div\n      {...baseProps}\n      aria-hidden={!visible}\n      className={clsx(\n        styles.root,\n        { [styles.hidden]: !visible },\n        baseProps.className,\n        styles[`breakpoint-${breakpoint}`]\n      )}\n      ref={mergedRef}\n    >\n      <VisualContext contextName=\"alert\">\n        <div className={clsx(styles.alert, styles[`type-${type}`])}>\n          <div className={clsx(styles.icon, styles.text)} role=\"img\" aria-label={statusIconAriaLabel}>\n            <InternalIcon name={typeToIcon[type]} size={size} />\n          </div>\n          <div className={styles.body}>\n            <div className={clsx(styles.message, styles.text)}>\n              {header && <div className={styles.header}>{header}</div>}\n              <div className={styles.content}>{children}</div>\n            </div>\n            {hasAction && <div className={styles.action}>{actionButton}</div>}\n          </div>\n          {dismissible && (\n            <div className={styles.dismiss}>\n              <InternalButton\n                className={styles['dismiss-button']}\n                variant=\"icon\"\n                iconName=\"close\"\n                formAction=\"none\"\n                ariaLabel={dismissAriaLabel}\n                onClick={() => fireNonCancelableEvent(onDismiss)}\n              />\n            </div>\n          )}\n        </div>\n      </VisualContext>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/annotation-context/annotation/styles.css.js

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_z21ah_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_z21ah_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_z21ah_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_z21ah_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_z21ah_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_z21ah_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_z21ah_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_z21ah_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_z21ah_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_z21ah_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_z21ah_137",
-  "annotation": "awsui_annotation_1hpp3_z21ah_145",
-  "next-button": "awsui_next-button_1hpp3_z21ah_146",
-  "previous-button": "awsui_previous-button_1hpp3_z21ah_147",
-  "finish-button": "awsui_finish-button_1hpp3_z21ah_148",
-  "header": "awsui_header_1hpp3_z21ah_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_z21ah_150",
-  "content": "awsui_content_1hpp3_z21ah_151",
-  "description": "awsui_description_1hpp3_z21ah_155",
-  "actionBar": "awsui_actionBar_1hpp3_z21ah_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_z21ah_167",
-  "divider": "awsui_divider_1hpp3_z21ah_171",
-  "hotspot": "awsui_hotspot_1hpp3_z21ah_175",
-  "icon": "awsui_icon_1hpp3_z21ah_213"
+  "arrow": "awsui_arrow_1hpp3_1nzqd_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1nzqd_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1nzqd_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1nzqd_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1nzqd_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1nzqd_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1nzqd_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1nzqd_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1nzqd_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1nzqd_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1nzqd_137",
+  "annotation": "awsui_annotation_1hpp3_1nzqd_145",
+  "next-button": "awsui_next-button_1hpp3_1nzqd_146",
+  "previous-button": "awsui_previous-button_1hpp3_1nzqd_147",
+  "finish-button": "awsui_finish-button_1hpp3_1nzqd_148",
+  "header": "awsui_header_1hpp3_1nzqd_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1nzqd_150",
+  "content": "awsui_content_1hpp3_1nzqd_151",
+  "description": "awsui_description_1hpp3_1nzqd_155",
+  "actionBar": "awsui_actionBar_1hpp3_1nzqd_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1nzqd_167",
+  "divider": "awsui_divider_1hpp3_1nzqd_171",
+  "hotspot": "awsui_hotspot_1hpp3_1nzqd_175",
+  "icon": "awsui_icon_1hpp3_1nzqd_213"
 };
   

package/lib/internal/template/annotation-context/annotation/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_arrow_1hpp3_z21ah_93:not(#\9) {
+.awsui_arrow_1hpp3_1nzqd_93:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_1hpp3_z21ah_97:not(#\9), .awsui_arrow-inner_1hpp3_z21ah_97:not(#\9) {
+.awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9), .awsui_arrow-inner_1hpp3_1nzqd_97:not(#\9) {
   position: absolute;
   overflow: hidden;
   width: 20px;
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   top: 0;
   left: 0;
 }
-.awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_z21ah_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1nzqd_97:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after {
   background-color: var(--color-border-status-info-0iedcr, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_z21ah_97:not(#\9) {
+.awsui_arrow-inner_1hpp3_1nzqd_97:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_1hpp3_z21ah_97:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_1nzqd_97:not(#\9)::after {
   border-radius: 1px 0 0 0;
   background-color: var(--color-background-status-info-yq3r41, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_z21ah_128 > .awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_z21ah_128 > .awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_1nzqd_128 > .awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1nzqd_128 > .awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_z21ah_131 > .awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_z21ah_131 > .awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_1nzqd_131 > .awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1nzqd_131 > .awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_z21ah_134 > .awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_z21ah_134 > .awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_1nzqd_134 > .awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1nzqd_134 > .awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_z21ah_137 > .awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_z21ah_137 > .awsui_arrow-outer_1hpp3_z21ah_97:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_1nzqd_137 > .awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1nzqd_137 > .awsui_arrow-outer_1hpp3_1nzqd_97:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
 
@@ -142,37 +142,37 @@ 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_annotation_1hpp3_z21ah_145:not(#\9),
-.awsui_next-button_1hpp3_z21ah_146:not(#\9),
-.awsui_previous-button_1hpp3_z21ah_147:not(#\9),
-.awsui_finish-button_1hpp3_z21ah_148:not(#\9),
-.awsui_header_1hpp3_z21ah_149:not(#\9),
-.awsui_step-counter-content_1hpp3_z21ah_150:not(#\9),
-.awsui_content_1hpp3_z21ah_151:not(#\9) {
+.awsui_annotation_1hpp3_1nzqd_145:not(#\9),
+.awsui_next-button_1hpp3_1nzqd_146:not(#\9),
+.awsui_previous-button_1hpp3_1nzqd_147:not(#\9),
+.awsui_finish-button_1hpp3_1nzqd_148:not(#\9),
+.awsui_header_1hpp3_1nzqd_149:not(#\9),
+.awsui_step-counter-content_1hpp3_1nzqd_150:not(#\9),
+.awsui_content_1hpp3_1nzqd_151:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_z21ah_155:not(#\9) {
+.awsui_description_1hpp3_1nzqd_155:not(#\9) {
   overflow: hidden;
   margin-top: var(--space-xxs-ynfts5, 4px);
 }
 
-.awsui_actionBar_1hpp3_z21ah_160:not(#\9) {
+.awsui_actionBar_1hpp3_1nzqd_160:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_z21ah_167:not(#\9) {
+.awsui_stepCounter_1hpp3_1nzqd_167:not(#\9) {
   margin-right: 20px;
 }
 
-.awsui_divider_1hpp3_z21ah_171:not(#\9) {
+.awsui_divider_1hpp3_1nzqd_171:not(#\9) {
   border-bottom: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_z21ah_175:not(#\9) {
+.awsui_hotspot_1hpp3_1nzqd_175:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -211,21 +211,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border: none;
   padding: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-ujkcpl, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-f9jj7p, 40px 0 0 0);
   width: 16px;
   height: 16px;
 }
-.awsui_hotspot_1hpp3_z21ah_175:not(#\9):focus {
+.awsui_hotspot_1hpp3_1nzqd_175:not(#\9):focus {
   outline: none;
 }
-.awsui_hotspot_1hpp3_z21ah_175[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_hotspot_1hpp3_1nzqd_175[data-awsui-focus-visible=true]:not(#\9):focus {
   position: relative;
 }
-.awsui_hotspot_1hpp3_z21ah_175[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_hotspot_1hpp3_1nzqd_175[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_hotspot_1hpp3_z21ah_175[data-awsui-focus-visible=true]:not(#\9):focus::before {
+.awsui_hotspot_1hpp3_1nzqd_175[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -236,13 +236,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-circular-focus-ring-l88ib6, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_hotspot_1hpp3_z21ah_175 > .awsui_icon_1hpp3_z21ah_213:not(#\9) {
+.awsui_hotspot_1hpp3_1nzqd_175 > .awsui_icon_1hpp3_1nzqd_213:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }
-.awsui_hotspot_1hpp3_z21ah_175:not(#\9):hover > .awsui_icon_1hpp3_z21ah_213 {
+.awsui_hotspot_1hpp3_1nzqd_175:not(#\9):hover > .awsui_icon_1hpp3_1nzqd_213 {
   stroke: var(--color-text-link-hover-ok01xk, #0073bb);
 }
-.awsui_hotspot_1hpp3_z21ah_175:not(#\9):active > .awsui_icon_1hpp3_z21ah_213 {
+.awsui_hotspot_1hpp3_1nzqd_175:not(#\9):active > .awsui_icon_1hpp3_1nzqd_213 {
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }