@cloudscape-design/components-themeable 3.0.363 → 3.0.365

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "232149b32076a0378019fc5513fc489a8a4c7a5a"
+  "commit": "715264b967c0811cde77f29ec7e98312d780cd45"
 }

package/lib/internal/scss/alert/styles.scss

@@ -6,6 +6,7 @@
 @use 'sass:map';
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
+@use '../internal/hooks/focus-visible' as focus-visible;
 
 @use './motion';
 
@@ -25,6 +26,9 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
+  // display: grid;
+  grid-template-columns: auto auto 1fr;
+
   border-radius: awsui.$border-radius-alert;
   border: awsui.$border-field-width solid;
   padding: awsui.$space-alert-vertical awsui.$space-alert-horizontal;
@@ -43,13 +47,30 @@
 
 .action {
   white-space: nowrap;
-  margin-left: awsui.$space-s;
+  margin-left: awsui.$space-alert-action-left;
 }
 
 .action-button {
   /* used in test-utils */
 }
 
+.alert-focus-wrapper {
+  display: flex;
+  flex: 1 1 0%;
+
+  &:focus {
+    outline: none;
+  }
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+  }
+}
+
+.alert-mobile-block {
+  display: flex;
+  flex: 1 1 0%;
+}
+
 .text {
   padding: awsui.$border-field-width 0; // To account for vertical misalignment due to button borders
   margin: awsui.$space-scaled-xxs awsui.$space-xxs;
@@ -58,18 +79,28 @@
   }
   &.message {
     margin-right: awsui.$space-alert-message-right;
-    & + .action {
-      margin-left: awsui.$space-alert-action-left;
-    }
   }
 }
 
 /* stylelint-disable selector-max-type */
-.root.breakpoint-default > div > .alert > .body {
-  display: block;
-  & > .action {
-    margin-left: awsui.$space-xxs;
-    margin-bottom: awsui.$space-xxs;
+.root.breakpoint-default > div > .alert {
+  // Below the breakpoint, arrange actions below the content
+  & > .alert-mobile-block {
+    display: block;
+    & > .action {
+      margin-bottom: awsui.$space-xxs;
+    }
+  }
+
+  // Indent actions according to the size of the alert icon
+  &.icon-size-medium > .alert-mobile-block > .action {
+    margin-left: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
+  }
+  &.icon-size-big > .alert-mobile-block > .action {
+    margin-left: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
+  }
+  &.icon-size-normal > .alert-mobile-block > .action {
+    margin-left: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
   }
 }
 /* stylelint-enable selector-max-type */
@@ -122,7 +153,7 @@ $_text-colors: (
   .type-#{$type} {
     border-color: #{map.get($_border-colors, $type)};
     background-color: #{map.get($_background-colors, $type)};
-    > .icon {
+    > .alert-mobile-block > .alert-focus-wrapper > .icon {
       color: #{map.get($_text-colors, $type)};
     }
   }

package/lib/internal/scss/breadcrumb-group/item/styles.scss

@@ -20,7 +20,7 @@
   }
 
   > .anchor {
-    @include styles.link-default;
+    @include styles.link-inline;
 
     @include focus-visible.when-visible {
       @include styles.link-focus;

package/lib/internal/scss/internal/styles/links.scss

@@ -19,6 +19,7 @@
   text-decoration: map.get($variant, 'decoration');
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   text-decoration-color: map.get($variant, 'decoration-color');
+  text-decoration-thickness: map.get($variant, 'decoration-thickness');
 
   @include styles.with-motion {
     transition-property: color, text-decoration;
@@ -44,6 +45,7 @@
     text-decoration: underline;
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     text-decoration-color: map.get($variant, 'decoration-color-hover');
+    text-decoration-thickness: map.get($variant, 'decoration-thickness');
   }
 }
 

package/lib/internal/scss/link/constants.scss

@@ -22,11 +22,11 @@ $link-variants: (
     'text-color-default': awsui.$color-text-link-default,
     'text-color-hover': awsui.$color-text-link-hover,
     'text-color-active': awsui.$color-text-link-hover,
-    'font-weight': awsui.$font-link-primary-weight,
-    'decoration': awsui.$font-link-primary-decoration,
-    'decoration-color': awsui.$color-text-link-primary-underline,
+    'font-weight': inherit,
+    'decoration': underline,
+    'decoration-color': currentColor,
     'decoration-color-hover': currentColor,
-    'letter-spacing': awsui.$font-link-primary-letter-spacing,
+    'letter-spacing': normal,
   ),
   'info': (
     'text-color-default': awsui.$color-text-link-default,
@@ -43,9 +43,10 @@ $link-variants: (
     'text-color-hover': awsui.$color-text-link-hover,
     'text-color-active': awsui.$color-text-link-hover,
     'font-weight': awsui.$font-box-value-large-weight,
-    'decoration': none,
-    'decoration-color': transparent,
+    'decoration': underline,
+    'decoration-color': currentColor,
     'decoration-color-hover': currentColor,
+    'decoration-thickness': 0.3rem,
   ),
   'top-navigation': (
     'text-color-default': awsui.$color-text-interactive-default,

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { AlertProps } from './interfaces';
 export { AlertProps };
-export default function Alert({ type, visible, ...props }: AlertProps): JSX.Element;
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertProps.Ref>>;
+export default Alert;
 //# sourceMappingURL=index.d.ts.map

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;AAO1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAa,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAyCpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFA2CV,CAAC;AAGF,eAAe,KAAK,CAAC"}

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

@@ -8,7 +8,7 @@ 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) {
+const Alert = React.forwardRef((_a, ref) => {
     var { type = 'info', visible = true } = _a, props = __rest(_a, ["type", "visible"]);
     const baseComponentProps = useBaseComponent('Alert');
     const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
@@ -43,7 +43,8 @@ export default function Alert(_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [funnelInteractionId, visible, submissionAttempt, errorCount]);
-    return React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps));
-}
+    return React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps, { ref: ref }));
+});
 applyDisplayName(Alert, 'Alert');
+export default Alert;
 //# sourceMappingURL=index.js.map

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,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"]}
+{"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,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAuD,EAAE,GAA8B,EAAE,EAAE;QAA3F,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACxC,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,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AACtG,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,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\nconst Alert = React.forwardRef(\n  ({ type = 'info', visible = true, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {\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} ref={ref} />;\n  }\n);\n\napplyDisplayName(Alert, 'Alert');\nexport default Alert;\n"]}

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

@@ -3,6 +3,12 @@ import { BaseComponentProps } from '../internal/base-component';
 import { NonCancelableEventHandler } from '../internal/events';
 export declare namespace AlertProps {
     type Type = 'success' | 'error' | 'warning' | 'info';
+    interface Ref {
+        /**
+         * Sets focus on the alert content.
+         */
+        focus(): void;
+    }
 }
 export interface AlertProps extends BaseComponentProps {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["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;;;OAGG;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":"lib/default/","sources":["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;IAE5D,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF;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;;;OAGG;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":"lib/default/","sources":["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   * @i18n\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":"lib/default/","sources":["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  export interface Ref {\n    /**\n     * Sets focus on the alert content.\n     */\n    focus(): void;\n  }\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   * @i18n\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

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

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["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;AAWjD,KAAK,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,eAkEpB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["alert/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAYtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAgBlF,QAAA,MAAM,aAAa;;qEA8FlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,7 +1,7 @@
 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, { useRef } from 'react';
 import clsx from 'clsx';
 import { InternalButton } from '../button/internal';
 import InternalIcon from '../icon/internal';
@@ -11,19 +11,23 @@ import styles from './styles.css.js';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import useForwardFocus from '../internal/hooks/forward-focus';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useInternalI18n } from '../i18n/context';
 import { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 const typeToIcon = {
     error: 'status-negative',
     warning: 'status-warning',
     success: 'status-positive',
     info: 'status-info',
 };
-export default function InternalAlert(_a) {
+const InternalAlert = React.forwardRef((_a, ref) => {
     var { type, statusIconAriaLabel, visible = true, dismissible, dismissAriaLabel, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef = null } = _a, rest = __rest(_a, ["type", "statusIconAriaLabel", "visible", "dismissible", "dismissAriaLabel", "children", "header", "buttonText", "action", "onDismiss", "onButtonClick", "__internalRootRef"]);
     const baseProps = getBaseProps(rest);
     const i18n = useInternalI18n('alert');
+    const focusRef = useRef(null);
+    useForwardFocus(ref, focusRef);
     const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);
     const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
     const isRefresh = useVisualRefresh();
@@ -34,16 +38,20 @@ export default function InternalAlert(_a) {
         [DATA_ATTR_ANALYTICS_ALERT]: type,
     };
     return (React.createElement("div", Object.assign({}, baseProps, analyticsAttributes, { "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, styles[`breakpoint-${breakpoint}`]), ref: mergedRef }),
-        React.createElement(VisualContext, { contextName: "alert" },
-            React.createElement("div", { className: clsx(styles.alert, styles[`type-${type}`]) },
-                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) },
-                        header && React.createElement("div", { className: styles.header }, header),
-                        React.createElement("div", { className: styles.content }, children)),
-                    hasAction && React.createElement("div", { className: styles.action }, actionButton)),
-                dismissible && (React.createElement("div", { className: styles.dismiss },
-                    React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: i18n('dismissAriaLabel', dismissAriaLabel), onClick: () => fireNonCancelableEvent(onDismiss) })))))));
-}
+        React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
+            React.createElement(VisualContext, { contextName: "alert" },
+                React.createElement("div", { className: clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`]) },
+                    React.createElement("div", { className: styles['alert-mobile-block'] },
+                        React.createElement("div", { className: styles['alert-focus-wrapper'], tabIndex: -1, ref: focusRef },
+                            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) },
+                                    header && React.createElement("div", { className: styles.header }, header),
+                                    React.createElement("div", { className: styles.content }, children)))),
+                        hasAction && React.createElement("div", { className: styles.action }, actionButton)),
+                    dismissible && (React.createElement("div", { className: styles.dismiss },
+                        React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: i18n('dismissAriaLabel', dismissAriaLabel), onClick: () => fireNonCancelableEvent(onDismiss) }))))))));
+});
+export default InternalAlert;
 //# sourceMappingURL=internal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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';\nimport { useInternalI18n } from '../i18n/context';\nimport { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';\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  const i18n = useInternalI18n('alert');\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  const analyticsAttributes = {\n    [DATA_ATTR_ANALYTICS_ALERT]: type,\n  };\n\n  return (\n    <div\n      {...baseProps}\n      {...analyticsAttributes}\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={i18n('dismissAriaLabel', dismissAriaLabel)}\n                onClick={() => fireNonCancelableEvent(onDismiss)}\n              />\n            </div>\n          )}\n        </div>\n      </VisualContext>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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, { useRef } 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 useForwardFocus from '../internal/hooks/forward-focus';\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';\nimport { useInternalI18n } from '../i18n/context';\nimport { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\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\nconst InternalAlert = React.forwardRef(\n  (\n    {\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    ref: React.Ref<AlertProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const i18n = useInternalI18n('alert');\n\n    const focusRef = useRef<HTMLDivElement>(null);\n    useForwardFocus(ref, focusRef);\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    const analyticsAttributes = {\n      [DATA_ATTR_ANALYTICS_ALERT]: type,\n    };\n\n    return (\n      <div\n        {...baseProps}\n        {...analyticsAttributes}\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        <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n          <VisualContext contextName=\"alert\">\n            <div className={clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`])}>\n              <div className={styles['alert-mobile-block']}>\n                <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>\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                  </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={i18n('dismissAriaLabel', dismissAriaLabel)}\n                    onClick={() => fireNonCancelableEvent(onDismiss)}\n                  />\n                </div>\n              )}\n            </div>\n          </VisualContext>\n        </LinkDefaultVariantContext.Provider>\n      </div>\n    );\n  }\n);\n\nexport default InternalAlert;\n"]}

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

@@ -1,24 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_a8ifo_93",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_a8ifo_1",
-  "root": "awsui_root_mx3cw_a8ifo_119",
-  "hidden": "awsui_hidden_mx3cw_a8ifo_135",
-  "body": "awsui_body_mx3cw_a8ifo_160",
-  "header": "awsui_header_mx3cw_a8ifo_166",
-  "action": "awsui_action_mx3cw_a8ifo_170",
-  "action-button": "awsui_action-button_mx3cw_a8ifo_175",
-  "text": "awsui_text_mx3cw_a8ifo_179",
-  "icon": "awsui_icon_mx3cw_a8ifo_183",
-  "message": "awsui_message_mx3cw_a8ifo_186",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_a8ifo_194",
-  "content": "awsui_content_mx3cw_a8ifo_208",
-  "dismiss": "awsui_dismiss_mx3cw_a8ifo_212",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_a8ifo_218",
-  "type-error": "awsui_type-error_mx3cw_a8ifo_226",
-  "type-warning": "awsui_type-warning_mx3cw_a8ifo_234",
-  "type-success": "awsui_type-success_mx3cw_a8ifo_242",
-  "type-info": "awsui_type-info_mx3cw_a8ifo_250"
+  "alert": "awsui_alert_mx3cw_1pmxt_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1pmxt_1",
+  "root": "awsui_root_mx3cw_1pmxt_119",
+  "hidden": "awsui_hidden_mx3cw_1pmxt_135",
+  "body": "awsui_body_mx3cw_1pmxt_161",
+  "header": "awsui_header_mx3cw_1pmxt_167",
+  "action": "awsui_action_mx3cw_1pmxt_171",
+  "action-button": "awsui_action-button_mx3cw_1pmxt_176",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1pmxt_180",
+  "alert-mobile-block": "awsui_alert-mobile-block_mx3cw_1pmxt_206",
+  "text": "awsui_text_mx3cw_1pmxt_211",
+  "icon": "awsui_icon_mx3cw_1pmxt_215",
+  "message": "awsui_message_mx3cw_1pmxt_218",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_1pmxt_223",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1pmxt_229",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_1pmxt_232",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1pmxt_235",
+  "content": "awsui_content_mx3cw_1pmxt_245",
+  "dismiss": "awsui_dismiss_mx3cw_1pmxt_249",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_1pmxt_255",
+  "type-error": "awsui_type-error_mx3cw_1pmxt_263",
+  "type-warning": "awsui_type-warning_mx3cw_1pmxt_271",
+  "type-success": "awsui_type-success_mx3cw_1pmxt_279",
+  "type-info": "awsui_type-info_mx3cw_1pmxt_287"
 };