@cloudscape-design/components-themeable 3.0.3 → 3.0.6

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

@@ -94,11 +94,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_content-enter_gwq0h_17r2p_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_17r2p_1 180ms ease-out;
-  animation: awsui_awsui-motion-fade-in_gwq0h_17r2p_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
+.awsui_content-enter_gwq0h_w4zz2_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_w4zz2_1 180ms ease-out;
+  animation: awsui_awsui-motion-fade-in_gwq0h_w4zz2_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_17r2p_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_w4zz2_1 {
   from {
     opacity: 0.2;
   }
@@ -107,42 +107,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_17r2p_97:not(#\9) {
+  .awsui_content-enter_gwq0h_w4zz2_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_17r2p_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_17r2p_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_w4zz2_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_w4zz2_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_17r2p_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_w4zz2_119:not(#\9) {
   transition: border-bottom-color 180ms ease-out;
   transition: border-bottom-color var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_17r2p_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_w4zz2_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_17r2p_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_17r2p_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_w4zz2_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_w4zz2_119:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_17r2p_133:not(#\9) {
+.awsui_icon_gwq0h_w4zz2_133:not(#\9) {
   transition: transform 135ms cubic-bezier(0.165, 0.84, 0.44, 1);
   transition: transform var(--motion-duration-rotate-90-ux18sr, 135ms) var(--motion-easing-rotate-90-eoew89, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_17r2p_133:not(#\9) {
+  .awsui_icon_gwq0h_w4zz2_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_17r2p_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_17r2p_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_w4zz2_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_w4zz2_133:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -151,7 +151,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_gwq0h_17r2p_151:not(#\9) {
+.awsui_root_gwq0h_w4zz2_151:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -197,14 +197,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_icon_gwq0h_17r2p_133:not(#\9) {
+.awsui_icon_gwq0h_w4zz2_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_17r2p_133.awsui_expanded_gwq0h_17r2p_169:not(#\9) {
+.awsui_icon_gwq0h_w4zz2_133.awsui_expanded_gwq0h_w4zz2_169:not(#\9) {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_17r2p_173:not(#\9) {
+.awsui_icon-container_gwq0h_w4zz2_173:not(#\9) {
   position: relative;
   margin-left: calc((22px - 16px) / -2);
   margin-left: calc((var(--font-body-m-line-height-i7xxvv, 22px) - var(--size-icon-normal-j1z5fn, 16px)) / -2);
@@ -212,7 +212,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-right: calc(var(--space-xxs-ynfts5, 4px) + var(--border-divider-list-width-hacikr, 1px));
 }
 
-.awsui_trigger_gwq0h_17r2p_119:not(#\9) {
+.awsui_trigger_gwq0h_w4zz2_119:not(#\9) {
   cursor: pointer;
   box-sizing: border-box;
   display: flex;
@@ -222,23 +222,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   text-align: left;
 }
-.awsui_trigger-default_gwq0h_17r2p_188:not(#\9) {
+.awsui_trigger-default_gwq0h_w4zz2_188:not(#\9) {
   padding: 4px 4px;
   padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px);
 }
-.awsui_trigger-footer_gwq0h_17r2p_191:not(#\9) {
+.awsui_trigger-footer_gwq0h_w4zz2_191:not(#\9) {
   padding: 4px 0;
   padding: var(--space-scaled-xxs-95dhkm, 4px) 0;
 }
-.awsui_trigger-default_gwq0h_17r2p_188:not(#\9), .awsui_trigger-footer_gwq0h_17r2p_191:not(#\9) {
+.awsui_trigger-default_gwq0h_w4zz2_188:not(#\9), .awsui_trigger-footer_gwq0h_w4zz2_191:not(#\9) {
   border: 1px solid transparent;
   border: var(--border-divider-section-width-5a4cv1, 1px) solid transparent;
 }
-.awsui_trigger-navigation_gwq0h_17r2p_197:not(#\9) {
+.awsui_trigger-navigation_gwq0h_w4zz2_197:not(#\9) {
   border-left: 1px solid transparent;
   border-left: var(--border-divider-section-width-5a4cv1, 1px) solid transparent;
 }
-.awsui_trigger-default_gwq0h_17r2p_188:not(#\9), .awsui_trigger-navigation_gwq0h_17r2p_197:not(#\9), .awsui_trigger-footer_gwq0h_17r2p_191:not(#\9) {
+.awsui_trigger-default_gwq0h_w4zz2_188:not(#\9), .awsui_trigger-navigation_gwq0h_w4zz2_197:not(#\9), .awsui_trigger-footer_gwq0h_w4zz2_191:not(#\9) {
   color: #545b64;
   color: var(--color-text-expandable-section-default-muap7v, #545b64);
   font-weight: 700;
@@ -248,36 +248,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: normal;
   letter-spacing: var(--font-heading-s-letter-spacing-i014lh, normal);
 }
-.awsui_trigger-default_gwq0h_17r2p_188:not(#\9):hover, .awsui_trigger-navigation_gwq0h_17r2p_197:not(#\9):hover, .awsui_trigger-footer_gwq0h_17r2p_191:not(#\9):hover {
+.awsui_trigger-default_gwq0h_w4zz2_188:not(#\9):hover, .awsui_trigger-navigation_gwq0h_w4zz2_197:not(#\9):hover, .awsui_trigger-footer_gwq0h_w4zz2_191:not(#\9):hover {
   color: #16191f;
   color: var(--color-text-expandable-section-hover-fhlqd8, #16191f);
 }
-.awsui_trigger-container_gwq0h_17r2p_209:not(#\9) {
+.awsui_trigger-container_gwq0h_w4zz2_209:not(#\9) {
   padding: 12px 20px;
   padding: var(--space-container-header-vertical-0bd19u, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_trigger-container_gwq0h_17r2p_209[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_trigger-container_gwq0h_w4zz2_209[data-awsui-focus-visible=true]:not(#\9):focus {
   padding: calc(12px - 1px) calc(20px - 1px);
   padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-5a4cv1, 1px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-5a4cv1, 1px));
 }
-.awsui_trigger-default_gwq0h_17r2p_188.awsui_trigger-expanded_gwq0h_17r2p_119:not(#\9) {
+.awsui_trigger-default_gwq0h_w4zz2_188.awsui_trigger-expanded_gwq0h_w4zz2_119:not(#\9) {
   border-bottom-color: #eaeded;
   border-bottom-color: var(--color-border-divider-default-k96bks, #eaeded);
 }
 
-.awsui_header_gwq0h_17r2p_219:not(#\9) {
+.awsui_header_gwq0h_w4zz2_219:not(#\9) {
   display: flex;
 }
-.awsui_header-container_gwq0h_17r2p_222:not(#\9) {
+.awsui_header-container_gwq0h_w4zz2_222:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_17r2p_222 > .awsui_icon-container_gwq0h_17r2p_173:not(#\9) {
+.awsui_header-container_gwq0h_w4zz2_222 > .awsui_icon-container_gwq0h_w4zz2_173:not(#\9) {
   margin-top: 8px;
   margin-top: var(--space-expandable-section-icon-offset-top-jo3eu8, 8px);
   margin-right: 8px;
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
-.awsui_header-navigation_gwq0h_17r2p_229 > .awsui_icon-container_gwq0h_17r2p_173:not(#\9) {
+.awsui_header-navigation_gwq0h_w4zz2_229 > .awsui_icon-container_gwq0h_w4zz2_173:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: #879596;
@@ -289,18 +289,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_17r2p_229 > .awsui_icon-container_gwq0h_17r2p_173:not(#\9):hover {
+.awsui_header-navigation_gwq0h_w4zz2_229 > .awsui_icon-container_gwq0h_w4zz2_173:not(#\9):hover {
   color: #16191f;
   color: var(--color-text-expandable-section-hover-fhlqd8, #16191f);
 }
-.awsui_header-navigation_gwq0h_17r2p_229 > .awsui_icon-container_gwq0h_17r2p_173[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_header-navigation_gwq0h_w4zz2_229 > .awsui_icon-container_gwq0h_w4zz2_173[data-awsui-focus-visible=true]:not(#\9):focus {
   position: relative;
 }
-.awsui_header-navigation_gwq0h_17r2p_229 > .awsui_icon-container_gwq0h_17r2p_173[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_header-navigation_gwq0h_w4zz2_229 > .awsui_icon-container_gwq0h_w4zz2_173[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_header-navigation_gwq0h_17r2p_229 > .awsui_icon-container_gwq0h_17r2p_173[data-awsui-focus-visible=true]:not(#\9):focus::before {
+.awsui_header-navigation_gwq0h_w4zz2_229 > .awsui_icon-container_gwq0h_w4zz2_173[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -310,35 +310,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   height: calc(100% + 2 * 2px);
   border-radius: 2px;
   border-radius: var(--border-control-focus-ring-radius-default-9royjh, 2px);
-  box-shadow: 0 0 0 2px #00a1c9;
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-bs10w5, #00a1c9);
+  box-shadow: 0 0 0 2px #0073bb;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
 
-.awsui_content_gwq0h_17r2p_97:not(#\9) {
+.awsui_content_gwq0h_w4zz2_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_17r2p_265:not(#\9) {
+.awsui_content-default_gwq0h_w4zz2_265:not(#\9) {
   padding: 8px 0;
   padding: var(--space-scaled-xs-6859qs, 8px) 0;
 }
-.awsui_content-footer_gwq0h_17r2p_268:not(#\9) {
+.awsui_content-footer_gwq0h_w4zz2_268:not(#\9) {
   padding: 8px 0;
   padding: var(--space-xs-rsr2qu, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_17r2p_271:not(#\9) {
+.awsui_content-expanded_gwq0h_w4zz2_271:not(#\9) {
   display: block;
 }
 
-.awsui_focusable_gwq0h_17r2p_275:not(#\9):focus {
+.awsui_focusable_gwq0h_w4zz2_275:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_focusable_gwq0h_17r2p_275[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_focusable_gwq0h_w4zz2_275[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
-  border: 1px solid #00a1c9;
-  border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-focused-bs10w5, #00a1c9);
+  border: 1px solid #0073bb;
+  border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-focused-n5kd8g, #0073bb);
   border-radius: 2px;
   border-radius: var(--border-control-focus-ring-radius-default-9royjh, 2px);
-  box-shadow: 0 0 0 1px #00a1c9;
-  box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-glnuoy, 1px) var(--color-border-item-focused-bs10w5, #00a1c9);
+  box-shadow: 0 0 0 1px #0073bb;
+  box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-glnuoy, 1px) var(--color-border-item-focused-n5kd8g, #0073bb);
 }

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

@@ -2,25 +2,25 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_17r2p_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_17r2p_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_17r2p_119",
-  "icon": "awsui_icon_gwq0h_17r2p_133",
-  "root": "awsui_root_gwq0h_17r2p_151",
-  "expanded": "awsui_expanded_gwq0h_17r2p_169",
-  "icon-container": "awsui_icon-container_gwq0h_17r2p_173",
-  "trigger": "awsui_trigger_gwq0h_17r2p_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_17r2p_188",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_17r2p_191",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_17r2p_197",
-  "trigger-container": "awsui_trigger-container_gwq0h_17r2p_209",
-  "header": "awsui_header_gwq0h_17r2p_219",
-  "header-container": "awsui_header-container_gwq0h_17r2p_222",
-  "header-navigation": "awsui_header-navigation_gwq0h_17r2p_229",
-  "content": "awsui_content_gwq0h_17r2p_97",
-  "content-default": "awsui_content-default_gwq0h_17r2p_265",
-  "content-footer": "awsui_content-footer_gwq0h_17r2p_268",
-  "content-expanded": "awsui_content-expanded_gwq0h_17r2p_271",
-  "focusable": "awsui_focusable_gwq0h_17r2p_275"
+  "content-enter": "awsui_content-enter_gwq0h_w4zz2_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_w4zz2_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_w4zz2_119",
+  "icon": "awsui_icon_gwq0h_w4zz2_133",
+  "root": "awsui_root_gwq0h_w4zz2_151",
+  "expanded": "awsui_expanded_gwq0h_w4zz2_169",
+  "icon-container": "awsui_icon-container_gwq0h_w4zz2_173",
+  "trigger": "awsui_trigger_gwq0h_w4zz2_119",
+  "trigger-default": "awsui_trigger-default_gwq0h_w4zz2_188",
+  "trigger-footer": "awsui_trigger-footer_gwq0h_w4zz2_191",
+  "trigger-navigation": "awsui_trigger-navigation_gwq0h_w4zz2_197",
+  "trigger-container": "awsui_trigger-container_gwq0h_w4zz2_209",
+  "header": "awsui_header_gwq0h_w4zz2_219",
+  "header-container": "awsui_header-container_gwq0h_w4zz2_222",
+  "header-navigation": "awsui_header-navigation_gwq0h_w4zz2_229",
+  "content": "awsui_content_gwq0h_w4zz2_97",
+  "content-default": "awsui_content-default_gwq0h_w4zz2_265",
+  "content-footer": "awsui_content-footer_gwq0h_w4zz2_268",
+  "content-expanded": "awsui_content-expanded_gwq0h_w4zz2_271",
+  "focusable": "awsui_focusable_gwq0h_w4zz2_275"
 };
   

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

@@ -35,12 +35,12 @@ export interface FlashbarProps extends BaseComponentProps {
      * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.
      * When a user clicks on this button the `onButtonClick` handler is called. If the `action` property is set, this property is ignored.
      * **Deprecated**, replaced by `action`.
-     * *`id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:
-     * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
-     * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
-     * @visualrefresh `id` property
      * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button
      *   using the `action` property. **Deprecated**, replaced by `action`.
+     * * `id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:
+     *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
+     *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
+     * @visualrefresh `id` property
      */
     items: ReadonlyArray<FlashbarProps.MessageDefinition>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/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 React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called. If the `action` property is set, this property is ignored.\n   * **Deprecated**, replaced by `action`.\n   * *`id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:\n   * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   * @visualrefresh `id` property\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/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 React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called. If the `action` property is set, this property is ignored.\n   * **Deprecated**, replaced by `action`.\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   * * `id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:\n   *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   * @visualrefresh `id` property\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n"]}

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

@@ -4,7 +4,7 @@ import { __assign, __rest } from "tslib";
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
-import { FormFieldDomContext, useFormFieldContext } from '../internal/context/form-field-context';
+import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import InternalGrid from '../grid/internal';
@@ -46,8 +46,8 @@ export default function InternalFormField(_a) {
         description && (React.createElement("div", { className: styles.description, id: slotIds.description }, description)),
         React.createElement("div", { className: clsx(styles.controls, __hideLabel && styles['label-hidden']) },
             React.createElement(InternalGrid, { gridDefinition: gridDefinition },
-                React.createElement(FormFieldDomContext.RootProvider, { value: __assign({ controlId: generatedControlId }, contextValuesWithoutControlId) }, children && React.createElement("div", { className: styles.control }, children)),
-                secondaryControl && (React.createElement(FormFieldDomContext.RootProvider, { value: contextValuesWithoutControlId },
+                React.createElement(FormFieldContext.Provider, { value: __assign({ controlId: generatedControlId }, contextValuesWithoutControlId) }, children && React.createElement("div", { className: styles.control }, children)),
+                secondaryControl && (React.createElement(FormFieldContext.Provider, { value: contextValuesWithoutControlId },
                     React.createElement("div", { className: styles['secondary-control'] }, secondaryControl))))),
         (constraintText || errorText) && (React.createElement("div", { className: styles.hints },
             errorText && React.createElement(FormFieldError, { id: slotIds.error }, errorText),

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldDomContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { joinStrings } from '../internal/utils/strings';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n}\n\nexport const FormFieldError = ({ id, children }: FormFieldErrorProps) => (\n  <div className={styles.error}>\n    <div className={styles['error-icon-shake-wrapper']}>\n      <div className={styles['error-icon-scale-wrapper']}>\n        <InternalIcon name=\"status-warning\" size=\"small\" />\n      </div>\n    </div>\n    <span id={id} className={styles.error__message}>\n      {children}\n    </span>\n  </div>\n);\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const ref = useRef<HTMLElement>(null);\n  const isRefresh = useVisualRefresh(ref);\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition}>\n          <FormFieldDomContext.RootProvider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldDomContext.RootProvider>\n\n          {secondaryControl && (\n            <FormFieldDomContext.RootProvider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldDomContext.RootProvider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && <FormFieldError id={slotIds.error}>{errorText}</FormFieldError>}\n          {constraintText && (\n            <div\n              className={clsx(styles.constraint, errorText && styles['constraint-has-error'])}\n              id={slotIds.constraint}\n            >\n              {constraintText}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { joinStrings } from '../internal/utils/strings';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n}\n\nexport const FormFieldError = ({ id, children }: FormFieldErrorProps) => (\n  <div className={styles.error}>\n    <div className={styles['error-icon-shake-wrapper']}>\n      <div className={styles['error-icon-scale-wrapper']}>\n        <InternalIcon name=\"status-warning\" size=\"small\" />\n      </div>\n    </div>\n    <span id={id} className={styles.error__message}>\n      {children}\n    </span>\n  </div>\n);\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const ref = useRef<HTMLElement>(null);\n  const isRefresh = useVisualRefresh(ref);\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition}>\n          <FormFieldContext.Provider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldContext.Provider>\n\n          {secondaryControl && (\n            <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldContext.Provider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && <FormFieldError id={slotIds.error}>{errorText}</FormFieldError>}\n          {constraintText && (\n            <div\n              className={clsx(styles.constraint, errorText && styles['constraint-has-error'])}\n              id={slotIds.constraint}\n            >\n              {constraintText}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/help-panel/styles.css.js

@@ -1,9 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "help-panel": "awsui_help-panel_1d237_858ym_94",
-  "header": "awsui_header_1d237_858ym_258",
-  "content": "awsui_content_1d237_858ym_284",
-  "footer": "awsui_footer_1d237_858ym_295"
+  "help-panel": "awsui_help-panel_1d237_p97sp_94",
+  "header": "awsui_header_1d237_p97sp_258",
+  "content": "awsui_content_1d237_p97sp_284",
+  "footer": "awsui_footer_1d237_p97sp_295"
 };